-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
4 changed files
with
702 additions
and
327 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,70 +1,62 @@ | ||
| /* Script for triggering element active states when touched | ||
| * Supplement to the MaterialZ CSS library | ||
| * | ||
| * Copyright 2015 Zachary Yaro | ||
| * Copyright 2015-2021 Zachary Yaro | ||
| * Released under the MIT license | ||
| * http://materialz.zmyaro.com/LICENSE.txt | ||
| * https://materialz.dev/LICENSE.txt | ||
| */ | ||
|
|
||
| window.addEventListener("load", function(e) { | ||
| // Do not run the script on Chrome 32 or higher. | ||
| /*if(/Chrome\/[3-9][2-9]/.test(navigator.userAgent)) { | ||
| return; | ||
| }*/ | ||
| (function () { | ||
| var ELEM_TYPES = ["button", "select"], | ||
| INPUT_TYPES = ["button", "checkbox", "radio", "range", "reset", "submit"]; | ||
|
|
||
| // Create an array of all input elements. | ||
| var inputElems = Array.prototype.slice.call(document.getElementsByTagName("button")).concat( | ||
| Array.prototype.slice.call(document.getElementsByTagName("select"))).concat( | ||
| Array.prototype.slice.call(document.getElementsByTagName("input"))); | ||
|
|
||
| // If they can be found, identify all elements with role="button". | ||
| if(document.querySelectorAll) { | ||
| inputElems = inputElems.concat( | ||
| Array.prototype.slice.call(document.querySelectorAll("*[role=\"button\"]"))); | ||
| } | ||
|
|
||
| var elemTypes = ["button", "select"]; | ||
| var inputTypes = ["button", "checkbox", "radio", "range", "reset", "submit"]; | ||
|
|
||
| for(var i = 0; i < inputElems.length; i++) { | ||
| // If the element is a supported form element, | ||
| if(elemTypes.indexOf(inputElems[i].tagName.toLowerCase()) !== -1 || | ||
| // Or the element is a supported <input> type, | ||
| (inputElems[i].type && inputTypes.indexOf(inputElems[i].type.toLowerCase()) !== -1) || | ||
| // Or the element has role="button", | ||
| (inputElems[i].getAttribute("role") && inputElems[i].getAttribute("role").toLowerCase() === "button")) { | ||
| // Add the touch event listeners. | ||
| inputElems[i].addEventListener("touchstart", makeActive, false); | ||
| inputElems[i].addEventListener("touchend", makeInactive, false); | ||
| inputElems[i].addEventListener("touchcancel", makeInactive, false); | ||
| } | ||
| /** | ||
| * Check whether a given element is a supported form element. | ||
| * @param {HTMLElement} elem | ||
| */ | ||
| function isSupported(elem) { | ||
| // Check whether the element is a supported form element, | ||
| return (ELEM_TYPES.indexOf(elem.tagName.toLowerCase()) !== -1 || | ||
| // a supported <input> type, | ||
| (elem.type && INPUT_TYPES.indexOf(elem.type.toLowerCase()) !== -1) || | ||
| // or has role="button". | ||
| elem.getAttribute('role') === 'button'); | ||
| } | ||
|
|
||
|
|
||
| /** | ||
| * Adds the “active” class to the touched element | ||
| * Add the “active” class to the touched element | ||
| * @param {TouchEvent} e | ||
| */ | ||
| function makeActive(e) { | ||
| if(!!e.srcElement.classList) { // use classList API if available | ||
| e.srcElement.classList.add("active"); | ||
| } else { | ||
| e.srcElement.className += " active"; | ||
| if (isSupported(e.target)) { | ||
| if(!!e.target.classList) { // use classList API if available | ||
| e.target.classList.add("active"); | ||
| } else { | ||
| e.target.className += " active"; | ||
| } | ||
| e.stopPropagation(); | ||
| } | ||
|
|
||
| } | ||
|
|
||
| /** | ||
| * Removes the “active” class from the touched element | ||
| * Remove the “active” class from the touched element | ||
| * @param {TouchEvent} e | ||
| */ | ||
| function makeInactive(e) { | ||
| if(!!e.srcElement.classList) { // use classList API if available | ||
| e.srcElement.classList.remove("active"); | ||
| } else { | ||
| e.srcElement.className = e.srcElement.className.replace(/\s*active/g, ""); | ||
| if (isSupported(e.target)) { | ||
| if(!!e.target.classList) { // use classList API if available | ||
| e.target.classList.remove("active"); | ||
| } else { | ||
| e.target.className = e.srcElement.className.replace(/\s*active/g, ""); | ||
| } | ||
| e.stopPropagation(); | ||
| } | ||
|
|
||
| } | ||
| }, false); | ||
|
|
||
|
|
||
| window.addEventListener('load', function(e) { | ||
| // Add the event listeners to the body. | ||
| document.body.addEventListener('touchstart', makeActive, false); | ||
| document.body.addEventListener("touchend", makeInactive, false); | ||
| document.body.addEventListener("touchcancel", makeInactive, false); | ||
| }, false); | ||
| })(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.