From 8db49a24a3ccc19465bf545fbe7d5dd41bac7df7 Mon Sep 17 00:00:00 2001
From: Matthew Grove <matthew@grove.gq>
Date: Wed, 14 Nov 2018 17:17:34 +0000
Subject: [PATCH] Simplify dynamic navbar styling & include top app bar via
 jQuery Remove the need to specify the current URL in order to style the
 selected item in the navbar

---
 assets/global.js              | 43 +++++++++++++++++++++--------------
 luhn-algorithm/index.html     | 17 ++++----------
 luhn-algorithm/script.js      |  2 --
 page-inserts/top-app-bar.html |  6 +++++
 4 files changed, 37 insertions(+), 31 deletions(-)
 create mode 100644 page-inserts/top-app-bar.html

diff --git a/assets/global.js b/assets/global.js
index 6d4f2dd..d1b34ee 100644
--- a/assets/global.js
+++ b/assets/global.js
@@ -4,23 +4,32 @@ $(document).ready(function(){
         // initiate MDC drawer
         const drawer = new mdc.drawer.MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));
 
-        // initiate MDC top app bar
-        const mdc_top_app_bar = new mdc.topAppBar.MDCTopAppBar.attachTo(document.querySelector('.mdc-top-app-bar'));
-        mdc_top_app_bar.setScrollTarget(document.getElementById('main-content'));
-        mdc_top_app_bar.listen('MDCTopAppBar:nav', () => {
-            drawer.open = !drawer.open;
+        // include top app bar
+        $(".mdc-top-app-bar").load("/page-inserts/top-app-bar.html", function(){
+            // initiate MDC top app bar
+            const mdc_top_app_bar = new mdc.topAppBar.MDCTopAppBar.attachTo(document.querySelector('.mdc-top-app-bar'));
+            mdc_top_app_bar.setScrollTarget(document.getElementById('main-content'));
+            mdc_top_app_bar.listen('MDCTopAppBar:nav', () => {
+                drawer.open = !drawer.open;
+            });
+
+            // include source code link
+            $(".source-code-link").load("/page-inserts/source-code-link.html");
+
+            // initiate MDC items
+            mdc.autoInit();
+
+            // get current URL with no forward slash at the end and no domain
+            var drawer_item_link_query_selector = ".mdc-list-item[href='" + window.location.pathname;
+            if (drawer_item_link_query_selector.substring(drawer_item_link_query_selector.length - 1) == "/") {
+                drawer_item_link_query_selector = drawer_item_link_query_selector.substring(0,drawer_item_link_query_selector.length - 1);
+            }
+
+            // give 'seleted' styling to correct item on navbar
+            $(drawer_item_link_query_selector + "']").addClass("mdc-list-item--activated");
+            $(drawer_item_link_query_selector + "']").attr("aria-selected", "true");
+            $(drawer_item_link_query_selector + "/']").addClass("mdc-list-item--activated");
+            $(drawer_item_link_query_selector + "/']").attr("aria-selected", "true");
         });
-
-        // include source code link
-        $(".source-code-link").load("/page-inserts/source-code-link.html");
-
-        // initiate MDC items
-        mdc.autoInit();
-
-        var drawer_item_link_query_selector = ".mdc-list-item[href='" + window.activated_drawer_item_link;
-        $(drawer_item_link_query_selector + "']").addClass("mdc-list-item--activated");
-        $(drawer_item_link_query_selector + "']").attr("aria-selected", "true");
-        $(drawer_item_link_query_selector + "/']").addClass("mdc-list-item--activated");
-        $(drawer_item_link_query_selector + "/']").attr("aria-selected", "true");
     });
 });
diff --git a/luhn-algorithm/index.html b/luhn-algorithm/index.html
index c115b5e..6eab0a3 100644
--- a/luhn-algorithm/index.html
+++ b/luhn-algorithm/index.html
@@ -48,14 +48,7 @@
         <div class="mdc-drawer-scrim"></div>
 
         <div class="mdc-drawer-app-content">
-            <header class="mdc-top-app-bar app-bar" id="app-bar">
-                <div class="mdc-top-app-bar__row">
-                    <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
-                        <a href="javascript:void(0);" class="demo-mensu material-icons mdc-top-app-bar__navigation-icon">menu</a>
-                        <span class="mdc-top-app-bar__title">Luhn Algorithm</span>
-                    </section>
-                </div>
-            </header>
+            <header class="mdc-top-app-bar app-bar" id="app-bar"></header>
 
             <main class="main-content" id="main-content">
                 <div class="mdc-top-app-bar--fixed-adjust">
@@ -72,11 +65,11 @@
                             </div>
                             <div class="mdc-notched-outline__idle"></div>
                         </div>
+                        <!-- input field helper text -->
+                        <p class="mdc-text-field-helper-text" aria-hidden="true">
+                            Validate with the Luhn Algorithm
+                        </p>
                     </div>
-                    <!-- input field helper text -->
-                    <p class="mdc-text-field-helper-text" aria-hidden="true">
-                        Validate with the Luhn Algorithm
-                    </p>
                     <!-- button to submit & check number with Luhn algorithm -->
                     <button class="validation_button mdc-button mdc-button--outlined" onclick="checkNumber()" data-mdc-auto-init="MDCRipple">
                         <i class="material-icons mdc-button__icon">check_circle_outline</i>
diff --git a/luhn-algorithm/script.js b/luhn-algorithm/script.js
index 8a65196..b4434da 100644
--- a/luhn-algorithm/script.js
+++ b/luhn-algorithm/script.js
@@ -1,5 +1,3 @@
-window.activated_drawer_item_link = "/luhn-algorithm";
-
 document.addEventListener("keyup", function(event) {
     // stop any code that may normally run when enter key pressed
     event.preventDefault();
diff --git a/page-inserts/top-app-bar.html b/page-inserts/top-app-bar.html
new file mode 100644
index 0000000..048557c
--- /dev/null
+++ b/page-inserts/top-app-bar.html
@@ -0,0 +1,6 @@
+<div class="mdc-top-app-bar__row">
+    <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
+        <a href="javascript:void(0);" class="demo-mensu material-icons mdc-top-app-bar__navigation-icon">menu</a>
+        <span class="mdc-top-app-bar__title">Luhn Algorithm</span>
+    </section>
+</div>