Added read more for statements

Gemfile

@@ -23,6 +23,9 @@ gem 'aws-sdk'
 # A fixtures replacement 
 gem 'factory_girl'
 
+# It's a small library to provide the Rails I18n translations on the JavaScript.
+gem "i18n-js"
+
 # Use jquery as the JavaScript library
 gem 'jquery-rails'
 

Gemfile.lock

@@ -119,6 +119,8 @@ GEM
       tilt
     heapy (0.1.2)
     i18n (0.8.1)
+    i18n-js (3.0.0)
+      i18n (~> 0.6, >= 0.6.6)
     jbuilder (2.6.3)
       activesupport (>= 3.0.0, < 5.2)
       multi_json (~> 1.2)
@@ -345,6 +347,7 @@ DEPENDENCIES
   factory_girl
   faker
   geocoder
+  i18n-js
   jbuilder (~> 2.0)
   jquery-rails
   kaminari-actionview

app/assets/javascripts/application.js

@@ -15,4 +15,5 @@
 //= require bootstrap-sprockets
 //= require typeahead.bundle
 //= require markerclusterer_compiled
+//= require i18n/translations
 //= require_tree .

app/assets/javascripts/statements.js

@@ -0,0 +1,25 @@
+$(document).ready(function(){
+  $('.statement p').each(function(){
+    var trimLength = 300;
+    var trimMargin = 1.2; // don't trim just a couple of words
+    if($(this).text().length > (trimLength * trimMargin)) {
+      var text = $(this).text();
+      var trimPoint = $(this).text().indexOf(" ", trimLength);
+      var newContent = text.substring(0, trimPoint)+'<span class="read-more">'+text.substring(trimPoint)+'</span><span class="toggle">... <a href="#">' + I18n.t("pages.statements.read_more");
+ + '</a></span>';
+      $(this).html(newContent);
+    }
+  });
+  $('.toggle a').click(function(e){
+    e.preventDefault();
+    var para = $(this).closest('p');
+    var initialHeight = $(this).closest('p').innerHeight();
+    para.find('.read-more').show();
+    para.find('.toggle').hide();
+    var newHeight = para.innerHeight();
+    para.css('max-height', initialHeight+'px');
+    para.animate({ maxHeight: newHeight }, 300, function(){
+      para.css('max-height', 'none');
+    });
+  });
+});

app/assets/stylesheets/statements.sass

@@ -14,6 +14,9 @@
     margin: 0px
     display: inline
   
+  .read-more
+    display: none
+
 @media (max-width: 800px)
   .statement
     display: block

app/views/layouts/application.html.slim

@@ -76,3 +76,6 @@ html lang="#{I18n.locale}"
         .col-xs-12.col-sm-2
           = render 'address'
  
+  javascript:
+    I18n.defaultLocale = "#{I18n.default_locale}";
+    I18n.locale = "#{I18n.locale}";

app/views/pages/statements.de.slim

@@ -8,7 +8,7 @@ h1 = title t('.title')
     - unless supporter.publicity.organisation.blank?
       em= ", #{supporter.publicity.organisation}"
     br
-    = supporter.publicity.statement
+    p = supporter.publicity.statement
     hr.clearfix
      
 .text-center = link_to t(".submit_your_own_statement"), new_publicity_path

config/locales/de.yml

@@ -105,6 +105,7 @@ de:
     statements:
       title: Statements von unseren Unterstützern
       submit_your_own_statement: Veröffentliche dein eigenes Statement...
+      read_more: das ganze Statement lesen.
   
   routes:
     initiative_text: initiativtext

config/locales/fr.yml

@@ -102,6 +102,7 @@ fr:
     statements:
       title: Les déclarations de nos partisans
       submit_your_own_statement: Publie tes propres déclaration ...
+      read_more: lire toute la déclaration.
       
   routes:
     initiative_text: l_initiative_propose

config/locales/it.yml

@@ -106,6 +106,7 @@ it:
     statements: 
       title: Dichiarazioni di nostri sostenitori
       submit_your_own_statement: Pubblica il tuo propria dichiarazione ...
+      read_more: leggere l'intero.
   
   routes:
     initiative_text: il_testo_dell_iniziativa