Run load scripts after ujs responces (#4170)

Exécute les scripts UJS après une modification asynchrone de la page

app/javascript/new_design/champs/carte.js

@@ -39,7 +39,7 @@ function diplayMap(element, data, initial = false) {
   }
 }
 
-addEventListener('turbolinks:load', initialize);
+addEventListener('ds:page:update', initialize);
 
 addEventListener('carte:update', ({ detail: { selector, data } }) => {
   const element = document.querySelector(selector);

app/javascript/new_design/messagerie.js

@@ -14,4 +14,4 @@ export function scrollMessagerie() {
   }
 }
 
-addEventListener('turbolinks:load', scrollMessagerie);
+addEventListener('ds:page:update', scrollMessagerie);

app/javascript/new_design/procedure-context.js

@@ -14,7 +14,7 @@ function expandProcedureDescription() {
   descBody.classList.remove('read-more-collapsed');
 }
 
-addEventListener('turbolinks:load', updateReadMoreVisibility);
+addEventListener('ds:page:update', updateReadMoreVisibility);
 addEventListener('resize', updateReadMoreVisibility);
 
 delegate('click', '.read-more-button', expandProcedureDescription);

app/javascript/new_design/select2.js

@@ -1,7 +1,7 @@
 import $ from 'jquery';
 import 'select2';
 
-addEventListener('turbolinks:load', () => {
+addEventListener('ds:page:update', () => {
   $('select.select2').select2({
     language: 'fr',
     width: '100%'

app/javascript/new_design/support.js

@@ -12,5 +12,5 @@ function updateContactElementsVisibility() {
   }
 }
 
-addEventListener('turbolinks:load', updateContactElementsVisibility);
+addEventListener('ds:page:update', updateContactElementsVisibility);
 delegate('change', '#contact-form #type', updateContactElementsVisibility);

app/javascript/packs/application-old.js

@@ -4,6 +4,7 @@ import Rails from '@rails/ujs';
 import * as ActiveStorage from '@rails/activestorage';
 import jQuery from 'jquery';
 
+import '../shared/page-update-event';
 import '../shared/activestorage/ujs';
 import '../shared/rails-ujs-fix';
 import '../shared/safari-11-file-xhr-workaround';

app/javascript/packs/application.js

@@ -9,6 +9,7 @@ import Highcharts from 'highcharts';
 import ReactUJS from '../shared/react-ujs';
 import reactComponents from '../shared/react-components';
 
+import '../shared/page-update-event';
 import '../shared/activestorage/ujs';
 import '../shared/activestorage/attachment-checker';
 import '../shared/rails-ujs-fix';

app/javascript/shared/autocomplete.js

@@ -37,22 +37,14 @@ function source(url) {
   };
 }
 
-addEventListener('turbolinks:load', function() {
-  autocompleteSetup();
-});
-
-addEventListener('ajax:success', function() {
-  autocompleteSetup();
-});
-
-function autocompleteSetup() {
+addEventListener('ds:page:update', function() {
   for (let { type, url } of sources) {
     for (let element of document.querySelectorAll(selector(type))) {
       element.removeAttribute('data-autocomplete');
       autocompleteInitializeElement(element, url);
     }
   }
-}
+});
 
 function autocompleteInitializeElement(element, url) {
   const select = autocomplete(element, options, [source(url)]);

app/javascript/shared/franceconnect.js

@@ -20,8 +20,7 @@ function init() {
   }
 }
 
-addEventListener('DOMContentLoaded', init);
-addEventListener('turbolinks:load', init);
+addEventListener('ds:page:update', init);
 
 function toggleElement(event) {
   event.preventDefault();

app/javascript/shared/page-update-event.js

@@ -0,0 +1,9 @@
+import { fire } from '@utils';
+
+addEventListener('turbolinks:load', function() {
+  fire(document, 'ds:page:update');
+});
+
+addEventListener('ajax:success', function() {
+  fire(document, 'ds:page:update');
+});

app/javascript/shared/react-ujs.js

@@ -56,6 +56,6 @@ export default class ReactUJS {
   }
 
   start() {
-    addEventListener('turbolinks:load', () => this.mountComponents());
+    addEventListener('ds:page:update', () => this.mountComponents());
   }
 }