Use @utils instead of jQuery

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)
     );

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')) {

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);

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);
       });
     }

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);

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));