Adding JS for External Links

drupal-pattern-lab · sghoweri · May 5, 2017 · May 4, 2017 · May 4, 2017 · May 4, 2017
commit 4b24e876bf68b3493a3c3f6d0dd1833e821f8a63
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -1,37 +1,37 @@
 <!doctype html>
-<html>
+<html class="no-js">
   <head>
     <meta charset="utf-8">
     <title>{% if page.title %}{{ page.title }} | {% endif %}{{ site.name }}</title>
     <meta name="description" content="{{ site.description }}">
     <meta name="viewport" content="width=device-width,initial-scale=1">
-    
+
     <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
     <link rel="stylesheet" href="{{ '/styles/styles.drupal-pattern-lab.css?v=' | append: site.github.build_revision | relative_url }}">
   </head>
   <body>
-      
+
     <header class="c-global-header">
       <div class="o-flag c-global-header__intro">
         <div class="o-flag__image">
           <a href="/" alt="Home">
             <img src="{{ '/assets/images/logo--inverted.svg' | relative_url }}" alt="Pattern Lab logo combined with the Drupal Drop" width="100">
           </a>
         </div>
-        
+
         <div class="o-flag__body c-global-header__intro-text">
           <h1 class="c-project-name">{{ site.name | default: site.github.repository_name }}</h1>
         </div>
       </div>
-      
+
       <h2 class="c-project-tagline">{{ site.description | default: site.github.project_tagline }}</h2>
-      
-      
+
+
       {% for nav_item in site.navItems %}
         <a href="{{ nav_item.url }}" class="c-btn">{{ nav_item.text }}</a>
       {% endfor %}
     </header>
-      
+
 
 
     <section class="c-page">
@@ -46,6 +46,8 @@ <h2 class="c-project-tagline">{{ site.description | default: site.github.project
       </footer>
     </section>
 
+    <script src="/assets/script.js" defer></script>
+
     {% if site.google_analytics %}
       <script type="text/javascript">
         (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
@@ -57,5 +59,5 @@ <h2 class="c-project-tagline">{{ site.description | default: site.github.project
       </script>
     {% endif %}
   </body>
-  
+
 </html>
diff --git a/assets/script.js b/assets/script.js
@@ -0,0 +1,25 @@
+/**
+ * Query selector using Vanilla JS and `querySelectorAll`, returning Array instead of NodeList..
+ * @param {String} selector
+ * @param {HTMLElement} [el=document] - Element to search within.
+ * @returns {Array}
+ */
+function query(selector, el) {
+  el = el || document;
+  // returning an Array instead of a NodeList
+  return Array.prototype.slice.call(el.querySelectorAll(selector));
+}
+
+function globalSetup() {
+  document.documentElement.classList.remove('no-js');
+  document.documentElement.classList.add('js');
+
+  // External links open in new tab
+  query('a[href^=http]').forEach(function (el) {
+    el.setAttribute('target', '_blank');
+  });
+}
+
+document.addEventListener('DOMContentLoaded', function () {
+  globalSetup();
+});