Merge pull request #288 from fourkitchens/attach_library-fixes

move drupal js loading to head, reload scripts

components/_meta/_00-head.twig

@@ -4,10 +4,20 @@
     <title>{{ title }}</title>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width" />
-    
+
     <!-- Component styles -->
     <link rel="stylesheet" href="../../../../dist/style.css?{{ cacheBuster }}" media="all" />
 
+    <!-- Drupal-specific usage -->
+    <!-- example using symlinking -->
+    <!-- cd web/themes/custom/emulsify/components/js -->
+    <!-- ln -s ../../../../../core/assets/vendor/domready/ready.min.js ./ -->
+    <!-- ln -s ../../../../../core/misc/drupal.js ./ -->
+
+    <!-- UNCOMMENT AS NECESSARY -->
+    <!-- <script src="../../js/ready.min.js"></script> -->
+    <!-- <script src="../../js/drupal.js"></script> -->
+
     <!-- Begin Pattern Lab (Required for Pattern Lab to run properly) -->
     {{ patternLabHead | raw }}
     <!-- End Pattern Lab -->

components/_meta/_01-foot.twig

@@ -2,18 +2,8 @@
   <!--DO NOT REMOVE-->
   {{ patternLabFoot | raw }}
 
-  <!-- Drupal-specific usage -->
-  <!-- example using symlinking -->
-  <!-- cd web/themes/custom/emulsify/components/js -->
-  <!-- ln -s ../../../../../core/assets/vendor/domready/ready.min.js ./ -->
-  <!-- ln -s ../../../../../core/misc/drupal.js ./ -->
-
-  <!-- UNCOMMENT AS NECESSARY -->
-  <!-- <script src="../../js/ready.min.js"></script> -->
-  <!-- <script src="../../js/drupal.js"></script> -->
-
-  <!-- If using Drupal.behaviors, uncomment for them to work in Pattern Lab -->
-  <!-- <script>Drupal.attachBehaviors();</script> -->
+  <!-- This makes attach_library work wherever it is in the document flow. -->
+  <script src="../../js/reload-scripts.js"></script>
 
   </body>
 </html>

components/js/reload-scripts.js

@@ -0,0 +1,44 @@
+/*
+* Reload Scripts on page (required for attach_library)
+*
+*/
+const d = document;
+// Get body tag.
+const head = d.getElementsByTagName('body')[0];
+// Get scripts within the body.
+const scripts = head.querySelectorAll('script');
+const scriptsArray = [];
+
+function async(src, callback) {
+  const script = document.createElement('script');
+  script.src = src;
+  if (callback) {
+    script.addEventListener(
+      "load",
+      e => {
+        callback(null, e);
+      },
+      false
+    );
+  }
+  head.appendChild(script);
+}
+
+scripts.forEach(element => {
+  // If the script has the data-name attribute.
+  if (element.dataset.name) {
+    const scriptSrc = element.dataset.src;
+    if (!scriptsArray.includes(scriptSrc)) {
+      async(scriptSrc, () => {
+        if (typeof Drupal === 'object' && typeof Drupal.attachBehaviors === 'function') {
+          const behaviors = Object.values(Drupal.behaviors);
+          // Only run attachBehaviors once.
+          behaviors.forEach(behavior => {
+            Drupal.attachBehaviors();
+          });
+        }
+      });
+      scriptsArray.push(scriptSrc);
+    }
+  }
+});