Reorder JS

modules/admin/templates/federation.twig

@@ -4,6 +4,7 @@
 
 {% block preload %}
 <link rel="stylesheet" href="{{ asset('css/admin.css', 'admin') }}">
+<link rel="preload" href="{{ asset('js/bundle.js') }}" as="script">
 {% endblock %}
 
 {% block content %}
@@ -146,3 +147,7 @@
       </fieldset>
     </form>
 {% endblock %}
+{% block postload %}
+    <script src="{{ asset('js/bundle.js') }}"></script>
+{% endblock %}
+

src/js/bundle.js

-import "es5-shim";
-import "es6-shim";
 import ClipboardJS from "clipboard/dist/clipboard";
 import hljs from  "highlight.js/lib/core";
 import xml from "highlight.js/lib/languages/xml";
 import php from "highlight.js/lib/languages/php";
 import json from "highlight.js/lib/languages/json";
 
-window.readyHandlers = [];
-window.ready = function ready(handler)
-{
-    window.readyHandlers.push(handler);
-    handleState();
-};
-
-window.handleState = function handleState()
-{
-    if (document.readyState === 'interactive' || document.readyState === "complete") {
-        while (window.readyHandlers.length > 0) {
-            (window.readyHandlers.shift())();
-        }
-    }
-};
-
-document.onreadystatechange = window.handleState;
-
-ready(function () {
-    // Language selector
-    var languageSelector = document.getElementById("language-selector");
-    languageSelector.onchange = function () {
-        let languageForm = document.getElementById("language-form");
-        languageForm.submit();
-        return true;
-    };
-
-
-    // Side menu
-    var menuLink = document.getElementById("menuLink");
-    menuLink.onclick = function (e) {
+// Expander boxes
+var expandable = document.querySelectorAll('.expandable > .expander');
+expandable.forEach(function (currentValue, index, arr) {
+    currentValue.onclick = function (e) {
         e.preventDefault();
 
-        let layout = document.getElementById("layout");
-        if (layout.className.match(/(?:^|\s)active(?!\S)/)) {
-            layout.className = layout.className.replace(/(?:^|\s)active(?!\S)/g , '');
+        var parent = e.currentTarget.parentNode;
+        if (parent.className.match(/(?:^|\s)expanded(?!\S)/)) {
+            parent.className = parent.className.replace(/(?:^|\s)expanded(?!\S)/g , '');
         } else {
-            layout.className += " active";
+            parent.className += " expanded";
         }
 
-        let foot = document.getElementById("foot");
-        if (foot.className.match(/(?:^|\s)active(?!\S)/)) {
-            foot.className = foot.className.replace(/(?:^|\s)active(?!\S)/g , '');
-        } else {
-            foot.className += " active";
-        }
-
-        if (menuLink.className.match(/(?:^|\s)active(?!\S)/)) {
-            menuLink.className = menuLink.className.replace(/(?:^|\s)active(?!\S)/g , '');
-        } else {
-            menuLink.className += " active";
-        }
-    };
-
+        e.currentTarget.blur();
+    }
+});
 
+ready(function () {
     // Syntax highlight
     hljs.registerLanguage('xml', xml);
     hljs.registerLanguage('php', php);

src/js/expander.js

-// Expander boxes
-var expandable = document.querySelectorAll('.expandable > .expander');
-expandable.forEach(function (currentValue, index, arr) {
-    currentValue.onclick = function (e) {
-        e.preventDefault();
-
-        var parent = e.currentTarget.parentNode;
-        if (parent.className.match(/(?:^|\s)expanded(?!\S)/)) {
-            parent.className = parent.className.replace(/(?:^|\s)expanded(?!\S)/g , '');
-        } else {
-            parent.className += " expanded";
-        }
-
-        e.currentTarget.blur();
-    }
-});

src/js/main.js

+import "es5-shim";
+import "es6-shim";
+
+window.readyHandlers = [];
+window.ready = function ready(handler) {
+    window.readyHandlers.push(handler);
+    handleState();
+};
+
+window.handleState = function handleState () {
+    if (document.readyState === 'interactive' || document.readyState === "complete") {
+        while(window.readyHandlers.length > 0) {
+            (window.readyHandlers.shift())();
+        }
+    }
+};
+
+document.onreadystatechange = window.handleState;
+
+ready(function () {
+    // Language selector
+    var languageSelector = document.getElementById("language-selector");
+    languageSelector.onchange = function() {
+        let languageForm = document.getElementById("language-form");
+        languageForm.submit();
+        return true;
+    };
+
+
+    // Side menu
+    var menuLink = document.getElementById("menuLink");
+    menuLink.onclick = function(e) {
+        e.preventDefault();
+
+        let layout = document.getElementById("layout");
+        if (layout.className.match(/(?:^|\s)active(?!\S)/)) {
+            layout.className = layout.className.replace(/(?:^|\s)active(?!\S)/g , '');
+        } else {
+            layout.className += " active";
+        }
+
+        let foot = document.getElementById("foot");
+        if (foot.className.match(/(?:^|\s)active(?!\S)/)) {
+            foot.className = foot.className.replace(/(?:^|\s)active(?!\S)/g , '');
+        } else {
+            foot.className += " active";
+        }
+
+        if (menuLink.className.match(/(?:^|\s)active(?!\S)/)) {
+            menuLink.className = menuLink.className.replace(/(?:^|\s)active(?!\S)/g , '');
+        } else {
+            menuLink.className += " active";
+        }
+    };
+
+    // Expander boxes
+    var expandable = document.querySelectorAll('.expandable > .expander');
+    expandable.forEach(function (currentValue, index, arr) {
+        currentValue.onclick = function (e) {
+            var parent = e.currentTarget.parentNode;
+            if (parent.className.match(/(?:^|\s)expanded(?!\S)/)) {
+                parent.className = parent.className.replace(/(?:^|\s)expanded(?!\S)/g , '');
+            } else {
+                parent.className += " expanded";
+            }
+            e.currentTarget.blur();
+        }
+    )};
+});

templates/auth_status.twig

 {% set pagetitle = 'Authentication status'|trans %}
 {% extends 'base.twig' %}
 
+{% block preload %}
+    <link rel="preload" href="{{ asset('js/main.js') }}" as="script">
+{% endblock %}
+
 {% block content %}
 <h2>{{ pagetitle }}</h2>
 
@@ -116,3 +120,7 @@
     </div>
 {% endif %}
 {% endblock %}
+{% block postload %}
+    <script src="{{ asset('js/bundle.js') }}"></script>
+{% endblock %}
+

templates/base.twig

@@ -12,7 +12,7 @@
     <link rel="stylesheet" href="{{ asset("assets/css/src/default-rtl.css") }}">
     {% endif %}
     <meta name="robots" content="noindex, nofollow">
-    <link rel="preload" href="{{ asset('js/bundle.js') }}" as="script">
+    <link rel="preload" href="{{ asset('js/main.js') }}" as="script">
     {% block preload %}{% endblock %}
   </head>
   <body id="{{ templateId }}">
@@ -30,7 +30,7 @@
     <div id="foot">
       {% block footer %}{% include "_footer.twig" %}{% endblock %}
     </div>
-    <script src="{{ asset('js/bundle.js') }}"></script>
+    <script src="{{ asset('js/main.js') }}"></script>
     {% block postload %}{% endblock %}
   </body>
 </html>

templates/includes/expander.twig

@@ -11,6 +11,3 @@
 
           </div>
         </div>
-{% block postload %}
-    <script src="{{ asset('js/expander.js') }}"></script>
-{% endblock %}

webpack.config.js

@@ -18,7 +18,6 @@ module.exports = environment => {
     return {
         entry: {
             bundle: './src/js/bundle',
-            expander: './src/js/expander',
             logout: './src/js/logout/main',
             stylesheet: './src/js/style'
         },