me/portfolio
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use auto-init instead of manual JS initiation of MDC components

Browse Source
This commit is contained in:
Matthew Grove
2018-11-13 19:34:19 +00:00
parent 6329fb3724
commit b3947cce47
2 changed files with 4 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
assets/global.js
View File

@@ -15,28 +15,7 @@ $(document).ready(function(){
$(".source-code-link").load("/page-inserts/source-code-link.html"); $(".source-code-link").load("/page-inserts/source-code-link.html");
// initiate MDC buttons // initiate MDC buttons
const mdc_buttons = document.querySelectorAll('.mdc-button'); mdc.autoInit();
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);
}
var drawer_item_link_query_selector = ".mdc-list-item[href='" + window.activated_drawer_item_link; 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 + "']").addClass("mdc-list-item--activated");

6
luhn-algorithm/index.html
View File

@@ -60,7 +60,7 @@
<h1>Validate</h1> <h1>Validate</h1>
<!-- input field (in a container so that unwanted overflow from :before & :after is hidden) --> <!-- 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-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"> <input type="number" id="tf-outlined" class="mdc-text-field__input">
<label for="tf-outlined" class="mdc-floating-label ">Your Number</label> <label for="tf-outlined" class="mdc-floating-label ">Your Number</label>
<div class="mdc-notched-outline"> <div class="mdc-notched-outline">
@@ -76,7 +76,7 @@
Validate with the Luhn Algorithm Validate with the Luhn Algorithm
</p> </p>
<!-- button to submit & check number with Luhn algorithm --> <!-- 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> <i class="material-icons mdc-button__icon">check_circle_outline</i>
Check Check
</button> </button>
@@ -84,7 +84,7 @@
<p id="validation_message"></p> <p id="validation_message"></p>
<!-- link to source code on GitHub --> <!-- 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> </div>
</main> </main>
</div> </div>