From b3947cce4766c7a456f3efc02e10932b6088e8cf Mon Sep 17 00:00:00 2001
From: Matthew Grove <matthew@grove.gq>
Date: Tue, 13 Nov 2018 19:34:19 +0000
Subject: [PATCH] Use auto-init instead of manual JS initiation of MDC
 components

---
 assets/global.js          | 23 +----------------------
 luhn-algorithm/index.html |  6 +++---
 2 files changed, 4 insertions(+), 25 deletions(-)

diff --git a/assets/global.js b/assets/global.js
index 9ba08f7..0e44877 100644
--- a/assets/global.js
+++ b/assets/global.js
@@ -15,28 +15,7 @@ $(document).ready(function(){
         $(".source-code-link").load("/page-inserts/source-code-link.html");
 
         // initiate MDC buttons
-        const mdc_buttons = document.querySelectorAll('.mdc-button');
-        for (const button of mdc_buttons) {
-            mdc.ripple.MDCRipple.attachTo(button);
-        }
-
-        // initiate FABs
-        const mdc_fabs = document.querySelectorAll('.mdc-fab');
-        for (const fab of mdc_fabs) {
-            mdc.ripple.MDCRipple.attachTo(fab);
-        }
-
-        // initiate text fields
-        const mdc_text_fields = document.querySelectorAll('.mdc-text-field');
-        for (const text_field of mdc_text_fields) {
-            mdc.textField.MDCTextField.attachTo(text_field);
-        }
-
-        // initiate helper texts
-        const mdc_helper_texts = document.querySelectorAll(".mdc-text-field-helper-text");
-        for (const helper_text of mdc_helper_texts) {
-            mdc.textField.MDCHelperText.attachTo(helper_text);
-        }
+        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");
diff --git a/luhn-algorithm/index.html b/luhn-algorithm/index.html
index a83904c..06be2a1 100644
--- a/luhn-algorithm/index.html
+++ b/luhn-algorithm/index.html
@@ -60,7 +60,7 @@
                     <h1>Validate</h1>
                     <!-- input field (in a container so that unwanted overflow from :before & :after is hidden) -->
                     <div class="mdc-text-field-container">
-                        <div class="mdc-text-field mdc-text-field--outlined">
+                        <div class="mdc-text-field mdc-text-field--outlined"  data-mdc-auto-init="MDCTextField">
                             <input type="number" id="tf-outlined" class="mdc-text-field__input">
                             <label for="tf-outlined" class="mdc-floating-label ">Your Number</label>
                             <div class="mdc-notched-outline">
@@ -76,7 +76,7 @@
                         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()">
+                    <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>
                         Check
                     </button>
@@ -84,7 +84,7 @@
                     <p id="validation_message"></p>
 
                     <!-- link to source code on GitHub -->
-                    <a href="https://github.com/mgrove36/demo-code/blob/master/luhn-algorithm/index.html" class="source-code-link mdc-fab mdc-fab--extended"></a>
+                    <a href="https://github.com/mgrove36/demo-code/blob/master/luhn-algorithm/index.html" class="source-code-link mdc-fab mdc-fab--extended"  data-mdc-auto-init="MDCRipple"></a>
                 </div>
             </main>
         </div>