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");
// 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");

6
luhn-algorithm/index.html
View File

@@ -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>