Add webpacker and use it for new_design

app/javascript/new_design/avis.js

@@ -0,0 +1,3 @@
+export function toggleCondidentielExplanation() {
+  $('.confidentiel-explanation').toggle();
+}

app/javascript/new_design/buttons.js

@@ -0,0 +1,11 @@
+$(document).on('click', 'body', () => {
+  $('.button.dropdown').removeClass('open');
+});
+
+$(document).on('click', '.button.dropdown', event => {
+  event.stopPropagation();
+  const $target = $(event.target);
+  if ($target.hasClass('button', 'dropdown')) {
+    $target.toggleClass('open');
+  }
+});

app/javascript/new_design/carto.js

@@ -0,0 +1,44 @@
+import L from 'leaflet';
+
+import { getData } from '../shared/data';
+
+import {
+  drawCadastre,
+  drawQuartiersPrioritaires,
+  drawUserSelection
+} from './carto/draw';
+
+const LON = '2.428462';
+const LAT = '46.538192';
+const DEFAULT_POSITION = { lon: LON, lat: LAT, zoom: 5 };
+
+function initialize() {
+  if ($('#map').length > 0) {
+    $.getJSON(getData('carto').getPositionUrl).then(
+      position => initializeWithPosition(position),
+      () => initializeWithPosition(DEFAULT_POSITION)
+    );
+  }
+}
+
+addEventListener('turbolinks:load', initialize);
+
+function initializeWithPosition(position) {
+  const map = L.map('map', {
+    scrollWheelZoom: false
+  }).setView([position.lat, position.lon], position.zoom);
+
+  L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+    attribution:
+      '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+  }).addTo(map);
+
+  const data = getData('carto');
+
+  // draw external polygons
+  drawCadastre(map, data);
+  drawQuartiersPrioritaires(map, data);
+
+  // draw user polygon
+  drawUserSelection(map, data);
+}

app/javascript/new_design/carto/draw.js

@@ -0,0 +1,48 @@
+import L from 'leaflet';
+
+function drawLayerWithItems(map, items, style) {
+  if (Array.isArray(items) && items.length > 0) {
+    const layer = new L.GeoJSON();
+
+    items.forEach(function(item) {
+      layer.addData(item.geometry);
+    });
+
+    layer.setStyle(style).addTo(map);
+  }
+}
+
+export function drawCadastre(map, { dossierCadastres }) {
+  drawLayerWithItems(map, dossierCadastres, {
+    fillColor: '#8A6D3B',
+    weight: 2,
+    opacity: 0.7,
+    color: '#8A6D3B',
+    dashArray: '3',
+    fillOpacity: 0.5
+  });
+}
+
+export function drawQuartiersPrioritaires(
+  map,
+  { dossierQuartiersPrioritaires }
+) {
+  drawLayerWithItems(map, dossierQuartiersPrioritaires, {
+    fillColor: '#31708F',
+    weight: 2,
+    opacity: 0.7,
+    color: '#31708F',
+    dashArray: '3',
+    fillOpacity: 0.5
+  });
+}
+
+export function drawUserSelection(map, { dossierJsonLatLngs }) {
+  if (dossierJsonLatLngs.length > 0) {
+    const polygon = L.polygon(dossierJsonLatLngs, {
+      color: 'red',
+      zIndex: 3
+    }).addTo(map);
+    map.fitBounds(polygon.getBounds());
+  }
+}

app/javascript/new_design/champs/address.js

@@ -0,0 +1,30 @@
+import Bloodhound from 'bloodhound-js';
+
+const display = 'label';
+
+const bloodhound = new Bloodhound({
+  datumTokenizer: Bloodhound.tokenizers.obj.whitespace(display),
+  queryTokenizer: Bloodhound.tokenizers.whitespace,
+
+  remote: {
+    url: '/ban/search?request=%QUERY',
+    wildcard: '%QUERY'
+  }
+});
+
+bloodhound.initialize();
+
+function bindTypeahead() {
+  $('input[data-address="true"]').typeahead(
+    {
+      minLength: 1
+    },
+    {
+      display: display,
+      source: bloodhound,
+      limit: 5
+    }
+  );
+}
+
+addEventListener('turbolinks:load', bindTypeahead);

app/javascript/new_design/champs/dossier-link.js

@@ -0,0 +1,40 @@
+function showNotFound() {
+  $('.dossier-link .text-info').hide();
+  $('.dossier-link .text-warning').show();
+}
+
+function showData(data) {
+  $('.dossier-link .dossier-text-summary').text(data.textSummary);
+  $('.dossier-link .text-info').show();
+  $('.dossier-link .text-warning').hide();
+}
+
+function hideEverything() {
+  $('.dossier-link .text-info').hide();
+  $('.dossier-link .text-warning').hide();
+}
+
+function fetchProcedureLibelle(e) {
+  const dossierId = $(e.target).val();
+  if (dossierId) {
+    $.get(`/users/dossiers/${dossierId}/text_summary`)
+      .done(showData)
+      .fail(showNotFound);
+  } else {
+    hideEverything();
+  }
+}
+
+let timeOut;
+function debounceFetchProcedureLibelle(e) {
+  if (timeOut) {
+    clearTimeout(timeOut);
+  }
+  timeOut = setTimeout(() => fetchProcedureLibelle(e), 300);
+}
+
+$(document).on(
+  'input',
+  '[data-type=dossier-link]',
+  debounceFetchProcedureLibelle
+);

app/javascript/new_design/champs/linked-drop-down-list.js

@@ -0,0 +1,29 @@
+addEventListener('turbolinks:load', () => {
+  const primaries = document.querySelectorAll('select[data-secondary-options]');
+
+  for (let primary of primaries) {
+    let secondary = document.querySelector(
+      `select[data-secondary-id="${primary.dataset.primaryId}"]`
+    );
+    let secondaryOptions = JSON.parse(primary.dataset.secondaryOptions);
+
+    primary.addEventListener('change', e => {
+      let option, options, element;
+
+      while ((option = secondary.firstChild)) {
+        secondary.removeChild(option);
+      }
+
+      options = secondaryOptions[e.target.value];
+
+      for (let option of options) {
+        element = document.createElement('option');
+        element.textContent = option;
+        element.value = option;
+        secondary.appendChild(element);
+      }
+
+      secondary.selectedIndex = 0;
+    });
+  }
+});

app/javascript/new_design/champs/multiple-drop-down-list.js

@@ -0,0 +1,13 @@
+addEventListener('turbolinks:load', () => {
+  $('select.select2').select2({
+    language: 'fr',
+    width: '100%'
+  });
+
+  $('select.select2-limited').select2({
+    language: 'fr',
+    placeholder: 'Sélectionnez des colonnes',
+    maximumSelectionLength: '5',
+    width: '300px'
+  });
+});

app/javascript/new_design/champs/siret.js

@@ -0,0 +1,34 @@
+addEventListener('turbolinks:load', () => {
+  $('[data-siret]').on('input', evt => {
+    const input = $(evt.target);
+    const value = input.val();
+    const url = input.attr('data-siret');
+
+    switch (value.length) {
+      case 0:
+        $.get(`${url}?siret=blank`);
+        break;
+      case 14:
+        input.attr('disabled', 'disabled');
+        $('.spinner').show();
+        $.get(`${url}?siret=${value}`).then(
+          () => {
+            input.removeAttr('data-invalid');
+            input.removeAttr('disabled');
+            $('.spinner').hide();
+          },
+          () => {
+            input.removeAttr('disabled');
+            input.attr('data-invalid', true);
+            $('.spinner').hide();
+          }
+        );
+        break;
+      default:
+        if (!input.attr('data-invalid')) {
+          input.attr('data-invalid', true);
+          $.get(`${url}?siret=invalid`);
+        }
+    }
+  });
+});

app/javascript/new_design/dossier.js

@@ -0,0 +1,8 @@
+$(document).on('click', 'body', () => {
+  $('.print-menu').removeClass('open fade-in-down');
+});
+
+export function togglePrintMenu(event) {
+  event.stopPropagation();
+  $('.print-menu').toggleClass('open fade-in-down');
+}

app/javascript/new_design/form-validation.js

@@ -0,0 +1,8 @@
+$(document).on('blur keydown', 'input, textarea', () => {
+  $(this).addClass('touched');
+});
+
+$(document).on('click', 'input[type="submit"]:not([formnovalidate])', () => {
+  const $form = $(this).closest('form');
+  $('input, textarea', $form).addClass('touched');
+});

app/javascript/new_design/header.js

@@ -0,0 +1,8 @@
+$(document).on('click', 'body', () => {
+  $('.header-menu').removeClass('open fade-in-down');
+});
+
+export function toggleHeaderMenu(event) {
+  event.stopPropagation();
+  $('.header-menu').toggleClass('open fade-in-down');
+}

app/javascript/new_design/messagerie.js

@@ -0,0 +1,25 @@
+export function scrollMessagerie() {
+  const $ul = $('.messagerie ul').first();
+
+  if ($ul.length) {
+    const $elementToScroll = $('.date.highlighted').first();
+
+    if ($elementToScroll.length != 0) {
+      scrollTo($ul, $elementToScroll);
+    } else {
+      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/state-button.js

@@ -0,0 +1,9 @@
+export function showMotivation(state) {
+  $(`.motivation.${state}`).show();
+  $('.dropdown-items').hide();
+}
+
+export function motivationCancel() {
+  $('.motivation').hide();
+  $('.dropdown-items').show();
+}

app/javascript/new_design/toggle-chart.js

@@ -0,0 +1,28 @@
+import Chartkick from 'chartkick';
+
+export function toggleChart(event, chartClass) {
+  const nextSelectorItem = $(event.target),
+    nextChart = $(chartClass),
+    nextChartId = nextChart
+      .children()
+      .first()
+      .attr('id'),
+    currentSelectorItem = nextSelectorItem
+      .parent()
+      .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');
+  nextSelectorItem.toggleClass('segmented-control-item-active');
+
+  // Hide the currently shown chart and show the new one
+  currentChart.toggleClass('hidden');
+  nextChart.toggleClass('hidden');
+
+  // Reflow needed, see https://github.com/highcharts/highcharts/issues/1979
+  Chartkick.charts[nextChartId].getChartObject().reflow();
+}