Merge pull request #2726 from tchak/less-jquery

Remove jQuery from new design

app/assets/stylesheets/new_design/avis.scss

@@ -65,7 +65,6 @@
   }
 
   .confidentiel-explanation {
-    display: none;
     font-size: 14px;
     color: $grey;
     margin-top: -$default-padding;

app/assets/stylesheets/new_design/motivation.scss

@@ -2,7 +2,6 @@
 @import "constants";
 
 .motivation {
-  display: none;
   padding: $default-padding;
   color: $black;
   width: 450px;

app/javascript/new_design/avis.js

@@ -1,5 +1,5 @@
-import $ from 'jquery';
+import { toggle } from '@utils';
 
 export function toggleCondidentielExplanation() {
-  $('.confidentiel-explanation').toggle();
+  toggle(document.querySelector('.confidentiel-explanation'));
 }

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) {
+  if (document.getElementById('map')) {
-    $.getJSON(getData('carto').getPositionUrl).then(
+    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('click', 'body', event => {
-
-delegate(document, 'body', 'click', 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/form-validation.js

@@ -1,10 +1,19 @@
-import $ from 'jquery';
+import { delegate } from '@utils';
 
-$(document).on('blur keydown', 'input, textarea', () => {
+delegate('blur keydown', 'input, textarea', ({ target }) => {
-  $(this).addClass('touched');
+  touch(target);
 });
 
-$(document).on('click', 'input[type="submit"]:not([formnovalidate])', () => {
+delegate(
-  const $form = $(this).closest('form');
+  'click',
-  $('input, textarea', $form).addClass('touched');
+  'input[type="submit"]:not([formnovalidate])',
-});
+  ({ target }) => {
+    let form = target.closest('form');
+    let inputs = form ? form.querySelectorAll('input, textarea') : [];
+    [...inputs].forEach(touch);
+  }
+);
+
+function touch({ classList }) {
+  classList.add('touched');
+}

app/javascript/new_design/messagerie.js

@@ -1,27 +1,17 @@
-import $ from 'jquery';
+import { scrollTo, scrollToBottom } from '@utils';
 
 export function scrollMessagerie() {
-  const $ul = $('.messagerie ul').first();
+  const ul = document.querySelector('.messagerie ul');
 
-  if ($ul.length) {
+  if (ul) {
-    const $elementToScroll = $('.date.highlighted').first();
+    const elementToScroll = document.querySelector('.date.highlighted');
 
-    if ($elementToScroll.length != 0) {
+    if (elementToScroll) {
-      scrollTo($ul, $elementToScroll);
+      scrollTo(ul, elementToScroll);
     } else {
-      scrollToBottom($ul);
+      scrollToBottom(ul);
     }
   }
 }
 
-function scrollTo($container, $scrollTo) {
-  $container.scrollTop(
-    $scrollTo.offset().top - $container.offset().top + $container.scrollTop()
-  );
-}
-
-function scrollToBottom($container) {
-  $container.scrollTop($container.prop('scrollHeight'));
-}
-
 addEventListener('turbolinks:load', scrollMessagerie);

app/javascript/new_design/spinner.js

@@ -1,7 +1,4 @@
-import Rails from 'rails-ujs';
+import { show, hide, delegate } from '@utils';
-import { show, hide } from '../shared/utils';
-
-const { delegate } = Rails;
 
 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('ajax:complete', '[data-spinner]', hideSpinner);
-delegate(document, '[data-spinner]', 'ajax:stopped', hideSpinner);
+delegate('ajax:stopped', '[data-spinner]', hideSpinner);
-delegate(document, '[data-spinner]', 'ajax:send', showSpinner);
+delegate('ajax:send', '[data-spinner]', showSpinner);

app/javascript/new_design/state-button.js

@@ -1,12 +1,12 @@
-import $ from 'jquery';
+import { show, hide } from '@utils';
 
 export function showMotivation(event, state) {
   event.preventDefault();
-  $(`.motivation.${state}`).show();
+  show(document.querySelector(`.motivation.${state}`));
-  $('.dropdown-items').hide();
+  hide(document.querySelector('.dropdown-items'));
 }
 
 export function motivationCancel() {
-  $('.motivation').hide();
+  document.querySelectorAll('.motivation').forEach(hide);
-  $('.dropdown-items').show();
+  show(document.querySelector('.dropdown-items'));
 }

app/javascript/new_design/toggle-chart.js

@@ -1,28 +1,24 @@
-import $ from 'jquery';
 import Chartkick from 'chartkick';
+import { toggle } from '@utils';
 
 export function toggleChart(event, chartClass) {
-  const nextSelectorItem = $(event.target),
+  const nextSelectorItem = event.target,
-    nextChart = $(chartClass),
+    nextChart = document.querySelector(chartClass),
-    nextChartId = nextChart
+    nextChartId = nextChart.children[0].id,
-      .children()
+    currentSelectorItem = nextSelectorItem.parentElement.querySelector(
-      .first()
+      '.segmented-control-item-active'
-      .attr('id'),
+    ),
-    currentSelectorItem = nextSelectorItem
+    currentChart = nextSelectorItem.parentElement.parentElement.querySelector(
-      .parent()
+      '.chart:not(.hidden)'
-      .find('.segmented-control-item-active'),
+    );
-    currentChart = nextSelectorItem
-      .parent()
-      .parent()
-      .find('.chart:not(.hidden)');
 
   // Change the current selector and the next selector states
-  currentSelectorItem.toggleClass('segmented-control-item-active');
+  currentSelectorItem.classList.toggle('segmented-control-item-active');
-  nextSelectorItem.toggleClass('segmented-control-item-active');
+  nextSelectorItem.classList.toggle('segmented-control-item-active');
 
   // Hide the currently shown chart and show the new one
-  currentChart.toggleClass('hidden');
+  toggle(currentChart);
-  nextChart.toggleClass('hidden');
+  toggle(nextChart);
 
   // Reflow needed, see https://github.com/highcharts/highcharts/issues/1979
   Chartkick.charts[nextChartId].getChartObject().reflow();

app/javascript/packs/application.js

@@ -4,7 +4,6 @@ import Rails from 'rails-ujs';
 import ActiveStorage from '../shared/activestorage/ujs';
 import Chartkick from 'chartkick';
 import Highcharts from 'highcharts';
-import jQuery from 'jquery';
 
 import '../shared/sentry';
 import '../shared/rails-ujs-fix';
@@ -41,11 +40,6 @@ Rails.start();
 Turbolinks.start();
 ActiveStorage.start();
 
-// Disable jQuery-driven animations during tests
-if (process.env['RAILS_ENV'] === 'test') {
-  jQuery.fx.off = true;
-}
-
 // Expose globals
 window.DS = window.DS || DS;
 window.Chartkick = Chartkick;

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 { delegate, fire, debounce } from '@utils';
-import debounce from 'debounce';
-
-const { delegate, fire } = Rails;
 
 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));

app/javascript/shared/utils.js

@@ -1,3 +1,10 @@
+import Rails from 'rails-ujs';
+import $ from 'jquery';
+import debounce from 'debounce';
+
+export { debounce };
+export const { fire } = Rails;
+
 export function show({ classList }) {
   classList.remove('hidden');
 }
@@ -9,3 +16,45 @@ export function hide({ classList }) {
 export function toggle({ classList }) {
   classList.toggle('hidden');
 }
+
+export function delegate(eventNames, selector, callback) {
+  eventNames
+    .split(' ')
+    .forEach(eventName =>
+      Rails.delegate(document, selector, eventName, callback)
+    );
+}
+
+export function getJSON(url, data, method = 'get') {
+  data = method !== 'get' ? JSON.stringify(data) : data;
+  return $.ajax({
+    method,
+    url,
+    data,
+    contentType: 'application/json',
+    dataType: 'json'
+  });
+}
+
+export function scrollTo(container, scrollTo) {
+  container.scrollTop =
+    offset(scrollTo).top - offset(container).top + container.scrollTop;
+}
+
+export function scrollToBottom(container) {
+  container.scrollTop = container.scrollHeight;
+}
+
+export function on(selector, eventName, fn) {
+  [...document.querySelectorAll(selector)].forEach(element =>
+    element.addEventListener(eventName, event => fn(event, event.detail))
+  );
+}
+
+function offset(element) {
+  const rect = element.getBoundingClientRect();
+  return {
+    top: rect.top + document.body.scrollTop,
+    left: rect.left + document.body.scrollLeft
+  };
+}

app/views/new_gestionnaire/dossiers/_state_button_motivation.html.haml

@@ -1,4 +1,4 @@
-.motivation{ class: popup_class }
+.motivation.hidden{ class: popup_class }
   %h3
     %span.icon{ class: popup_class }
     #{popup_title}

app/views/new_gestionnaire/shared/avis/_form.html.haml

@@ -17,7 +17,7 @@
         .confidentiel-wrapper
           = f.label :confidentiel, 'Cet avis est'
           = f.select :confidentiel, [['partagé avec les autres experts', false], ['confidentiel', true]], {}, onchange: "javascript:DS.toggleCondidentielExplanation(event);"
-          .confidentiel-explanation
+          .confidentiel-explanation.hidden
             Il ne sera pas affiché aux autres experts consultés mais sera visible par les instructeurs
         .send-wrapper
           = f.submit 'Demander un avis', class: 'button send'

config/webpack/environment.js

@@ -1,3 +1,4 @@
+const path = require('path');
 const { environment } = require('@rails/webpacker');
 
 // By default don't transpile JS files in ./node_modules – except for some specific modules.
@@ -14,4 +15,12 @@ babelLoader.exclude = function(modulePath) {
   );
 };
 
+const resolve = {
+  alias: {
+    '@utils': path.resolve(__dirname, '..', '..', 'app/javascript/shared/utils')
+  }
+};
+
+environment.config.merge({ resolve });
+
 module.exports = environment;