eliminar la dependencia en zepto

app/assets/javascripts/application.js

@@ -2,5 +2,4 @@
 //= require turbolinks
 //= require input-tag/input-tag.js
 //= require input-map/input-map.js
-//= require zepto/dist/zepto.min.js
 //= require_tree .

app/assets/javascripts/image_preview.js

@@ -1,11 +1,11 @@
-$(document).on('turbolinks:load', function() {
-  $('input[type=file]').on('change', function(event) {
-    if (event.target.files.length == 0) return;
+document.addEventListener('turbolinks:load', () => {
+  document.querySelectorAll('input[type=file]').forEach(file => {
+    if (!file.dataset.preview) return
 
-    var input = $(event.target);
-    var preview = $(`#${input.data('preview')}`);
+    file.addEventListener('change', event => {
+      if (file.files.length === 0) return
 
-    preview.attr('src',
-                 window.URL.createObjectURL(event.target.files[0]));
-  });
-});
+      document.querySelector('#' + file.dataset.preview).src = window.URL.createObjectURL(file.files[0])
+    })
+  })
+})

app/assets/javascripts/input-tag.js

@@ -1,19 +1,13 @@
-$(document).on('turbolinks:load', function() {
-  $('.taggable').each(function() {
-    this.innerHTML = '';
+document.addEventListener('turbolinks:load', () => {
+  document.querySelectorAll('.taggable').forEach(target => {
+    target.innerHTML = ''
 
-    new InputTag({
-      target: this,
-      props: { ...this.dataset }
-    });
-  });
+    new InputTag({ target, props: { ...target.dataset } })
+  })
 
-  $('.mapable').each(function() {
-    this.innerHTML = '';
+  document.querySelectorAll('.mapable').forEach(target => {
+    target.innerHTML = ''
 
-    new InputMap({
-      target: this,
-      props: { ...this.dataset }
-    });
-  });
-});
+    new InputMap({ target, props: { ...target.dataset } })
+  })
+})

app/assets/javascripts/turbolinks-anchors.js

@@ -1,3 +1,3 @@
-$(document).on('turbolinks:load', function() {
-  $('a[href^="#"]').data('turbolinks', false);
-});
+document.addEventListener('turbolinks:load', () => {
+  document.querySelectorAll('a[href^="#"]').forEach(a => a.data.turbolinks = false)
+})

app/assets/javascripts/validation.js

@@ -1,37 +1,35 @@
-$(document).on('turbolinks:load', function() {
-
+document.addEventListener('turbolinks:load', () => {
   // Al enviar el formulario del artículo, aplicar la validación
-  $('.submit-post').click(function(e) {
-    var form = $(this).parents('form.form');
-    var invalid_help = $('.invalid_help');
-    var sending_help = $('.sending_help');
+  // localmente y actualizar los comentarios para lectores de pantalla.
+  document.querySelectorAll('.submit-post').forEach(submit => {
+    submit.addEventListener('click', event => {
+      const form = submit.closest('form')
+      const invalid_help = form.querySelectorAll('.invalid_help')
+      const sending_help = form.querySelectorAll('.sending_help')
 
-    invalid_help.addClass('d-none');
-    sending_help.addClass('d-none');
-    form.find('[aria-invalid="true"]')
-      .attr('aria-invalid', false)
-      .attr('aria-describedby', function() {
-        return $(this).siblings('.feedback').attr('id');
-      });
+      invalid_help.forEach(i => i.classList.add('d-none'))
+      sending_help.forEach(i => i.classList.add('d-none'))
 
-    if (form[0].checkValidity() === false) {
-      e.preventDefault();
-      e.stopPropagation();
-      invalid_help.removeClass('d-none');
+      form.querySelectorAll('[aria-invalid="true"]').forEach(aria => {
+        aria.setAttribute('aria-invalid', false)
+        aria.setAttribute('aria-describedby', aria.parentElement.querySelector('.feedback').id)
+      })
 
-      form.find(':invalid')
-        .attr('aria-invalid', true)
-        .attr('aria-describedby', function() {
-          return $(this).siblings('.invalid-feedback').attr('id');
-        });
+      if (form.checkValidity() === false) {
+        event.preventDefault()
+        event.stopPropagation()
+
+        invalid_help.forEach(i => i.classList.remove('d-none'))
+
+        form.querySelectorAll(':invalid').forEach(invalid => {
+          invalid.setAttribute('aria-invalid', true)
+          invalid.setAttribute('aria-describedby', invalid.parentElement.querySelector('.invalid-feedback').id)
+        })
       } else {
-      sending_help.removeClass('d-none');
+        sending_help.forEach(i => i.classList.remove('d-none'))
       }
 
-    form.addClass('was-validated');
-  });
-
-  $('.submit-post-incomplete').click(function(e) {
-    $('.sending_help').removeClass('d-none');
-  });
-});
+      form.classList.add('was-validated')
+    })
+  })
+})

app/views/posts/attributes/_image.haml

@@ -10,6 +10,11 @@
     .custom-control.custom-switch
       = check_box_tag "post[#{attribute}][path]", '', false, id: "post_#{attribute}_destroy", class: 'custom-control-input'
       = label_tag "post_#{attribute}_destroy", t('posts.attributes.image.destroy'), class: 'custom-control-label'
+  - else
+    = image_tag '',
+      alt: metadata.value['description'],
+      class: 'img-fluid',
+      id: "#{attribute}-preview"
 
   .custom-file
     = file_field(*field_name_for('post', attribute, :path),