porcentaje de financiacion

TODO convertir esto en una clase general

app/assets/javascripts/porcentaje_de_financiacion.js

@@ -0,0 +1,32 @@
+// XXX Esto solo está acá para cumplicar con objetivos de
+// documentalmexicano.org
+
+$(document).on('turbolinks:load', function() {
+  var porcentajes = $('[id^=post_porcentaje_de_financiacion_]');
+
+  porcentajes.on('change', function() {
+    // Obtener todos los valores
+    var values = porcentajes.map(function(i, e) {
+      return (e.value.length > 0) ? parseInt(e.value) : 0;
+    }).toArray();
+
+    // Obtener la suma de los valores
+    var sum = values.reduce(function(i, e) {
+      return i + e;
+    }, 0);
+
+    // Si superan el 100%, estan mal
+    if (sum > 100) {
+      porcentajes.addClass('is-invalid');
+    } else {
+      porcentajes.removeClass('is-invalid');
+    }
+
+    var max = 100;
+    porcentajes.each(function(i, porcentaje) {
+      $(porcentaje).attr('max', max);
+      $(porcentaje).parent().find('.input-max').text(max);
+      max = max - porcentaje.value;
+    });
+  });
+});

app/views/posts/template_field/_number.haml

@@ -5,4 +5,4 @@
   max: template.max > 0 ? template.max : nil,
   min: template.min
 - if template.max > 0
-  %small= t('posts.number.max', max: template.max)
+  %small= raw t('posts.number.max', max: template.max)

config/locales/en.yml

@@ -240,7 +240,7 @@ en:
     checkbox: 'Yes'
     anchor: 'Copy this link to come back here'
     number:
-      max: 'The maximum value is %{max}'
+      max: 'The maximum value is <span class="input-max">%{max}</span>'
     image:
       multiple: 'You can select several images by holding the <kbd>Ctrl</kbd> or <kbd>Cmd</kbd> kbd in your kbdboard.'
     url: 'The address must start with http:// or https://'

config/locales/es.yml

@@ -247,7 +247,7 @@ es:
     checkbox: 'Sí'
     anchor: 'Copia este vínculo para volver aquí más tarde'
     number:
-      max: 'El valor máximo es %{max}'
+      max: 'El valor máximo es <span class="input-max">%{max}</span>'
     image:
       multiple: 'Puedes seleccionar varias imágenes usando la tecla <kbd>Ctrl</kbd> o <kbd>Cmd</kbd> en tu teclado.'
     url: 'La dirección debe comenzar con http:// o https://'