From 5e15653b2d7c9441b660a0af2e1de1ac157622fb Mon Sep 17 00:00:00 2001 From: f Date: Thu, 19 Nov 2020 21:23:23 -0300 Subject: [PATCH] eliminar la dependencia en zepto --- app/assets/javascripts/application.js | 1 - app/assets/javascripts/image_preview.js | 18 +++--- app/assets/javascripts/input-tag.js | 26 ++++----- app/assets/javascripts/turbolinks-anchors.js | 6 +- app/assets/javascripts/validation.js | 60 ++++++++++---------- app/views/posts/attributes/_image.haml | 5 ++ 6 files changed, 56 insertions(+), 60 deletions(-) diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index b3a88447..63cd7f58 100644 --- a/app/assets/javascripts/application.js +++ b/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 . diff --git a/app/assets/javascripts/image_preview.js b/app/assets/javascripts/image_preview.js index c3f639d9..fcdeec85 100644 --- a/app/assets/javascripts/image_preview.js +++ b/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]) + }) + }) +}) diff --git a/app/assets/javascripts/input-tag.js b/app/assets/javascripts/input-tag.js index 99079891..f07d8dcd 100644 --- a/app/assets/javascripts/input-tag.js +++ b/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 } }) + }) +}) diff --git a/app/assets/javascripts/turbolinks-anchors.js b/app/assets/javascripts/turbolinks-anchors.js index 27ca3d33..c1b2e17c 100644 --- a/app/assets/javascripts/turbolinks-anchors.js +++ b/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) +}) diff --git a/app/assets/javascripts/validation.js b/app/assets/javascripts/validation.js index ed53a092..f05854f6 100644 --- a/app/assets/javascripts/validation.js +++ b/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'); - }); - } else { - sending_help.removeClass('d-none'); - } + if (form.checkValidity() === false) { + event.preventDefault() + event.stopPropagation() - form.addClass('was-validated'); - }); + invalid_help.forEach(i => i.classList.remove('d-none')) - $('.submit-post-incomplete').click(function(e) { - $('.sending_help').removeClass('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.forEach(i => i.classList.remove('d-none')) + } + + form.classList.add('was-validated') + }) + }) +}) diff --git a/app/views/posts/attributes/_image.haml b/app/views/posts/attributes/_image.haml index e8034dd7..076d50de 100644 --- a/app/views/posts/attributes/_image.haml +++ b/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),