diff --git a/app/javascript/new_design/carto.js b/app/javascript/new_design/carto.js index 11fbbe75d..895a613ba 100644 --- a/app/javascript/new_design/carto.js +++ b/app/javascript/new_design/carto.js @@ -1,5 +1,5 @@ -import $ from 'jquery'; import L from 'leaflet'; +import { getJSON } from '@utils'; import { getData } from '../shared/data'; import { DEFAULT_POSITION } from '../shared/carto'; @@ -11,8 +11,8 @@ import { } from './carto/draw'; function initialize() { - if ($('#map').length > 0) { - $.getJSON(getData('carto').getPositionUrl).then( + if (document.getElementById('map')) { + getJSON(getData('carto').getPositionUrl).then( position => initializeWithPosition(position), () => initializeWithPosition(DEFAULT_POSITION) ); diff --git a/app/javascript/new_design/dropdown.js b/app/javascript/new_design/dropdown.js index 2829b98d8..13d8965c2 100644 --- a/app/javascript/new_design/dropdown.js +++ b/app/javascript/new_design/dropdown.js @@ -1,8 +1,6 @@ -import Rails from 'rails-ujs'; +import { delegate } from '@utils'; -const { delegate } = Rails; - -delegate(document, 'body', 'click', event => { +delegate('click', 'body', event => { if (!event.target.closest('.dropdown')) { [...document.querySelectorAll('.dropdown')].forEach(element => element.classList.remove('open', 'fade-in-down') @@ -10,7 +8,7 @@ delegate(document, 'body', 'click', event => { } }); -delegate(document, '.dropdown-button', 'click', event => { +delegate('click', '.dropdown-button', event => { event.stopPropagation(); const parent = event.target.closest('.dropdown-button').parentElement; if (parent.classList.contains('dropdown')) { diff --git a/app/javascript/new_design/spinner.js b/app/javascript/new_design/spinner.js index 7c92ca53b..8b1fbac3e 100644 --- a/app/javascript/new_design/spinner.js +++ b/app/javascript/new_design/spinner.js @@ -1,7 +1,4 @@ -import Rails from 'rails-ujs'; -import { show, hide } from '../shared/utils'; - -const { delegate } = Rails; +import { show, hide, delegate } from '@utils'; function showSpinner() { [...document.querySelectorAll('.spinner')].forEach(show); @@ -11,6 +8,6 @@ function hideSpinner() { [...document.querySelectorAll('.spinner')].forEach(hide); } -delegate(document, '[data-spinner]', 'ajax:complete', hideSpinner); -delegate(document, '[data-spinner]', 'ajax:stopped', hideSpinner); -delegate(document, '[data-spinner]', 'ajax:send', showSpinner); +delegate('ajax:complete', '[data-spinner]', hideSpinner); +delegate('ajax:stopped', '[data-spinner]', hideSpinner); +delegate('ajax:send', '[data-spinner]', showSpinner); diff --git a/app/javascript/shared/autocomplete.js b/app/javascript/shared/autocomplete.js index 727ae172a..809373bf1 100644 --- a/app/javascript/shared/autocomplete.js +++ b/app/javascript/shared/autocomplete.js @@ -1,5 +1,5 @@ -import $ from 'jquery'; import autocomplete from 'autocomplete.js'; +import { getJSON, fire } from '@utils'; const sources = [ { @@ -24,7 +24,7 @@ function selector(type) { function source(url) { return { source(query, callback) { - $.getJSON(url, { request: query }).then(callback); + getJSON(url, { request: query }).then(callback); }, templates: { suggestion({ label, mine }) { @@ -41,7 +41,7 @@ addEventListener('turbolinks:load', function() { for (let target of document.querySelectorAll(selector(type))) { let select = autocomplete(target, options, [source(url)]); select.on('autocomplete:selected', ({ target }, suggestion) => { - $(target).trigger('autocomplete:select', suggestion); + fire(target, 'autocomplete:select', suggestion); select.autocomplete.setVal(suggestion.label); }); } diff --git a/app/javascript/shared/rails-ujs-fix.js b/app/javascript/shared/rails-ujs-fix.js index a7cc7eb5e..f36330901 100644 --- a/app/javascript/shared/rails-ujs-fix.js +++ b/app/javascript/shared/rails-ujs-fix.js @@ -1,12 +1,13 @@ import Rails from 'rails-ujs'; import jQuery from 'jquery'; +import { delegate } from '@utils'; // We use `jQuery.active` in our capybara suit to wait for ajax requests. // Newer jQuery-less version of rails-ujs is breaking it. // We have to set `ajax:complete` listener on the same element as the one // we catch ajax:send on as by the end of the request // the old element may be removed from DOM. -Rails.delegate(document, '[data-remote]', 'ajax:send', ({ target }) => { +delegate('ajax:send', '[data-remote]', ({ target }) => { let callback = () => { jQuery.active--; target.removeEventListener('ajax:complete', callback); diff --git a/app/javascript/shared/remote-input.js b/app/javascript/shared/remote-input.js index d03e69640..e265a1835 100644 --- a/app/javascript/shared/remote-input.js +++ b/app/javascript/shared/remote-input.js @@ -1,7 +1,4 @@ -import Rails from 'rails-ujs'; -import debounce from 'debounce'; - -const { delegate, fire } = Rails; +import { delegate, fire, debounce } from '@utils'; const remote = 'data-remote'; const inputChangeSelector = `input[${remote}], textarea[${remote}]`; @@ -21,4 +18,4 @@ function isRemote(element) { return value && value !== 'false'; } -delegate(document, inputChangeSelector, 'input', debounce(handleRemote, 200)); +delegate('input', inputChangeSelector, debounce(handleRemote, 200));