Skip to content

Commit bb758f2

Browse files
ZMYaroZMYaro
committed
Update MaterialZ
1 parent d02bd4c commit bb758f2

File tree

4 files changed

+702
-327
lines changed

4 files changed

+702
-327
lines changed

‎scripts/material-touch.js‎

Lines changed: 40 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,62 @@
11
/* Script for triggering element active states when touched
22
* Supplement to the MaterialZ CSS library
33
*
4-
* Copyright 2015 Zachary Yaro
4+
* Copyright 2015-2021 Zachary Yaro
55
* Released under the MIT license
6-
* http://materialz.zmyaro.com/LICENSE.txt
6+
* https://materialz.dev/LICENSE.txt
77
*/
88

9-
window.addEventListener("load", function(e) {
10-
// Do not run the script on Chrome 32 or higher.
11-
/*if(/Chrome\/[3-9][2-9]/.test(navigator.userAgent)) {
12-
return;
13-
}*/
9+
(function () {
10+
var ELEM_TYPES = ["button", "select"],
11+
INPUT_TYPES = ["button", "checkbox", "radio", "range", "reset", "submit"];
1412

15-
// Create an array of all input elements.
16-
var inputElems = Array.prototype.slice.call(document.getElementsByTagName("button")).concat(
17-
Array.prototype.slice.call(document.getElementsByTagName("select"))).concat(
18-
Array.prototype.slice.call(document.getElementsByTagName("input")));
19-
20-
// If they can be found, identify all elements with role="button".
21-
if(document.querySelectorAll) {
22-
inputElems = inputElems.concat(
23-
Array.prototype.slice.call(document.querySelectorAll("*[role=\"button\"]")));
24-
}
25-
26-
var elemTypes = ["button", "select"];
27-
var inputTypes = ["button", "checkbox", "radio", "range", "reset", "submit"];
28-
29-
for(var i = 0; i < inputElems.length; i++) {
30-
// If the element is a supported form element,
31-
if(elemTypes.indexOf(inputElems[i].tagName.toLowerCase()) !== -1 ||
32-
// Or the element is a supported <input> type,
33-
(inputElems[i].type && inputTypes.indexOf(inputElems[i].type.toLowerCase()) !== -1) ||
34-
// Or the element has role="button",
35-
(inputElems[i].getAttribute("role") && inputElems[i].getAttribute("role").toLowerCase() === "button")) {
36-
// Add the touch event listeners.
37-
inputElems[i].addEventListener("touchstart", makeActive, false);
38-
inputElems[i].addEventListener("touchend", makeInactive, false);
39-
inputElems[i].addEventListener("touchcancel", makeInactive, false);
40-
}
13+
/**
14+
* Check whether a given element is a supported form element.
15+
* @param {HTMLElement} elem
16+
*/
17+
function isSupported(elem) {
18+
// Check whether the element is a supported form element,
19+
return (ELEM_TYPES.indexOf(elem.tagName.toLowerCase()) !== -1 ||
20+
// a supported <input> type,
21+
(elem.type && INPUT_TYPES.indexOf(elem.type.toLowerCase()) !== -1) ||
22+
// or has role="button".
23+
elem.getAttribute('role') === 'button');
4124
}
4225

43-
4426
/**
45-
* Adds the “active” class to the touched element
27+
* Add the “active” class to the touched element
4628
* @param {TouchEvent} e
4729
*/
4830
function makeActive(e) {
49-
if(!!e.srcElement.classList) { // use classList API if available
50-
e.srcElement.classList.add("active");
51-
} else {
52-
e.srcElement.className += " active";
31+
if (isSupported(e.target)) {
32+
if(!!e.target.classList) { // use classList API if available
33+
e.target.classList.add("active");
34+
} else {
35+
e.target.className += " active";
36+
}
37+
e.stopPropagation();
5338
}
54-
5539
}
5640

5741
/**
58-
* Removes the “active” class from the touched element
42+
* Remove the “active” class from the touched element
5943
* @param {TouchEvent} e
6044
*/
6145
function makeInactive(e) {
62-
if(!!e.srcElement.classList) { // use classList API if available
63-
e.srcElement.classList.remove("active");
64-
} else {
65-
e.srcElement.className = e.srcElement.className.replace(/\s*active/g, "");
46+
if (isSupported(e.target)) {
47+
if(!!e.target.classList) { // use classList API if available
48+
e.target.classList.remove("active");
49+
} else {
50+
e.target.className = e.srcElement.className.replace(/\s*active/g, "");
51+
}
52+
e.stopPropagation();
6653
}
67-
6854
}
69-
}, false);
70-
55+
56+
window.addEventListener('load', function(e) {
57+
// Add the event listeners to the body.
58+
document.body.addEventListener('touchstart', makeActive, false);
59+
document.body.addEventListener("touchend", makeInactive, false);
60+
document.body.addEventListener("touchcancel", makeInactive, false);
61+
}, false);
62+
})();

‎styles/material-depth.css‎

Lines changed: 63 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
/* Base Material styles for depth
22
* Part of the MaterialZ CSS library
33
*
4-
* Copyright 2015 Zachary Yaro
4+
* Copyright 2015-2021 Zachary Yaro
55
* Released under the MIT license
6-
* http://materialz.zmyaro.com/LICENSE.txt
6+
* https://materialz.dev/LICENSE.txt
77
*/
88

99
@charset "UTF-8";
@@ -29,16 +29,27 @@
2929
-o-transition-property: box-shadow;
3030
transition-property: box-shadow;
3131
}
32+
.card.full-width.z1,
33+
.card.full-width.z2,
34+
.card.full-width.z3,
35+
.card.full-width.z4,
36+
.card.full-width.z5 {
37+
-webkit-transition-property: margin, border-radius, -webkit-box-shadow, box-shadow;
38+
-moz-transition-property: margin, border-radius, -moz-box-shadow, box-shadow;
39+
-ms-transition-property: margin, border-radius, box-shadow;
40+
-o-transition-property: margin, border-radius, box-shadow;
41+
transition-property: margin, border-radius, box-shadow;
42+
}
3243
button.z1,
3344
button.z2,
3445
button.z3,
3546
button.z4,
3647
button.z5,
37-
*[role="button"].z1,
38-
*[role="button"].z2,
39-
*[role="button"].z3,
40-
*[role="button"].z4,
41-
*[role="button"].z5 ,
48+
[role="button"].z1,
49+
[role="button"].z2,
50+
[role="button"].z3,
51+
[role="button"].z4,
52+
[role="button"].z5 ,
4253
input[type="button"].z1,
4354
input[type="button"].z2,
4455
input[type="button"].z3,
@@ -61,11 +72,11 @@ input[type="reset"].z5 {
6172
button.z3:hover,
6273
button.z4:hover,
6374
button.z5:hover,
64-
*[role="button"].z1:hover,
65-
*[role="button"].z2:hover,
66-
*[role="button"].z3:hover,
67-
*[role="button"].z4:hover,
68-
*[role="button"].z5:hover,
75+
[role="button"].z1:hover,
76+
[role="button"].z2:hover,
77+
[role="button"].z3:hover,
78+
[role="button"].z4:hover,
79+
[role="button"].z5:hover,
6980
input[type="button"].z1:hover,
7081
input[type="button"].z2:hover,
7182
input[type="button"].z3:hover,
@@ -86,11 +97,11 @@ input[type="reset"].z5 {
8697
button.z3:focus,
8798
button.z4:focus,
8899
button.z5:focus,
89-
*[role="button"].z1:focus,
90-
*[role="button"].z2:focus,
91-
*[role="button"].z3:focus,
92-
*[role="button"].z4:focus,
93-
*[role="button"].z5:focus,
100+
[role="button"].z1:focus,
101+
[role="button"].z2:focus,
102+
[role="button"].z3:focus,
103+
[role="button"].z4:focus,
104+
[role="button"].z5:focus,
94105
input[type="button"].z1:focus,
95106
input[type="button"].z2:focus,
96107
input[type="button"].z3:focus,
@@ -113,11 +124,11 @@ input[type="reset"].z5 {
113124
button.z3:enabled:active,
114125
button.z4:enabled:active,
115126
button.z5:enabled:active,
116-
*[role="button"].z1:active,
117-
*[role="button"].z2:active,
118-
*[role="button"].z3:active,
119-
*[role="button"].z4:active,
120-
*[role="button"].z5:active,
127+
[role="button"].z1:active,
128+
[role="button"].z2:active,
129+
[role="button"].z3:active,
130+
[role="button"].z4:active,
131+
[role="button"].z5:active,
121132
input[type="button"].z1:enabled:active,
122133
input[type="button"].z2:enabled:active,
123134
input[type="button"].z3:enabled:active,
@@ -138,11 +149,11 @@ input[type="reset"].z5 {
138149
button.z3:enabled.active,
139150
button.z4:enabled.active,
140151
button.z5:enabled.active,
141-
*[role="button"].z1.active,
142-
*[role="button"].z2.active,
143-
*[role="button"].z3.active,
144-
*[role="button"].z4.active,
145-
*[role="button"].z5.active,
152+
[role="button"].z1.active,
153+
[role="button"].z2.active,
154+
[role="button"].z3.active,
155+
[role="button"].z4.active,
156+
[role="button"].z5.active,
146157
input[type="button"].z1:enabled.active,
147158
input[type="button"].z2:enabled.active,
148159
input[type="button"].z3:enabled.active,
@@ -165,14 +176,12 @@ input[type="reset"].z5 {
165176
-webkit-box-shadow: rgba(0, 0, 0, 0.26) 0 2px 5px 0, rgba(0, 0, 0, 0.16) 0 2px 10px 0;
166177
-moz-box-shadow: rgba(0, 0, 0, 0.26) 0 2px 5px 0, rgba(0, 0, 0, 0.16) 0 2px 10px 0;
167178
box-shadow: rgba(0, 0, 0, 0.26) 0 2px 5px 0, rgba(0, 0, 0, 0.16) 0 2px 10px 0;
168-
filter: progid:DXImageTransform.Microsoft.Glow(Color=#b8b8b8,Strength=5);
169-
-ms-filter: "progid:DXImageTransform.Microsoft.Glow(Color=#b8b8b8,Strength=5)";
170179
}
171180

172181
button.z1:hover,
173182
button.z1:focus,
174-
*[role="button"].z1:hover,
175-
*[role="button"].z1:focus,
183+
[role="button"].z1:hover,
184+
[role="button"].z1:focus,
176185
input[type="button"].z1:hover,
177186
input[type="button"].z1:focus,
178187
input[type="submit"].z1:hover,
@@ -182,14 +191,12 @@ input[type="reset"].z1:focus {
182191
-webkit-box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.23), 0 4px 15px 0 rgba(0, 0, 0, 0.175);
183192
-moz-box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.23), 0 4px 15px 0 rgba(0, 0, 0, 0.175);
184193
box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.23), 0 4px 15px 0 rgba(0, 0, 0, 0.175);
185-
filter: progid:DXImageTransform.Microsoft.Glow(Color=#b4b4b4,Strength=7);
186-
-ms-filter: "progid:DXImageTransform.Microsoft.Glow(Color=#b4b4b4,Strength=7)";
187194
}
188195
.z2,
189196
button.z1:enabled:active,
190197
button.z1:enabled.active,
191-
*[role="button"].z1:active,
192-
*[role="button"].z1.active,
198+
[role="button"].z1:active,
199+
[role="button"].z1.active,
193200
input[type="button"].z1:active,
194201
input[type="button"].z1.active,
195202
input[type="submit"].z1:active,
@@ -199,14 +206,12 @@ input[type="reset"].z1.active {
199206
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 8px 17px 0, rgba(0, 0, 0, 0.19) 0 6px 20px 0;
200207
-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 8px 17px 0, rgba(0, 0, 0, 0.19) 0 6px 20px 0;
201208
box-shadow: rgba(0, 0, 0, 0.2) 0 8px 17px 0, rgba(0, 0, 0, 0.19) 0 6px 20px 0;
202-
filter: progid:DXImageTransform.Microsoft.Glow(Color=#b0b0b0,Strength=10);
203-
-ms-filter: "progid:DXImageTransform.Microsoft.Glow(Color=#b0b0b0,Strength=10)";
204209
}
205210
.z3,
206211
button.z2:enabled:active,
207212
button.z2:enabled.active,
208-
*[role="button"].z2:active,
209-
*[role="button"].z2.active,
213+
[role="button"].z2:active,
214+
[role="button"].z2.active,
210215
input[type="button"].z2:active,
211216
input[type="button"].z2.active,
212217
input[type="submit"].z2:active,
@@ -220,8 +225,8 @@ input[type="reset"].z2.active {
220225
.z4,
221226
button.z3:enabled:active,
222227
button.z3:enabled.active,
223-
*[role="button"].z3:active,
224-
*[role="button"].z3.active,
228+
[role="button"].z3:active,
229+
[role="button"].z3.active,
225230
input[type="button"].z3:active,
226231
input[type="button"].z3.active,
227232
input[type="submit"].z3:active,
@@ -235,8 +240,8 @@ input[type="reset"].z3.active {
235240
.z5,
236241
button.z4:enabled:active,
237242
button.z4:enabled.active,
238-
*[role="button"].z4:active,
239-
*[role="button"].z4.active,
243+
[role="button"].z4:active,
244+
[role="button"].z4.active,
240245
input[type="button"].z4:active,
241246
input[type="button"].z4.active,
242247
input[type="submit"].z4:active,
@@ -248,13 +253,25 @@ input[type="reset"].z4.active {
248253
box-shadow: rgba(0, 0, 0, 0.2) 0 27px 24px 0, rgba(0, 0, 0, 0.22) 0 40px 77px 0;
249254
}
250255
button.z1:disabled,
251-
*[role="button"].z1.disabled,
256+
[role="button"].z1.disabled,
252257
input[type="button"].z1.disabled,
253258
input[type="submit"].z1.disabled,
254259
input[type="reset"].z1.disabled {
255260
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 2px 0, rgba(0, 0, 0, 0.14) 0 2px 5px 0;
256261
-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 2px 0, rgba(0, 0, 0, 0.14) 0 2px 5px 0;
257262
box-shadow: rgba(0, 0, 0, 0.2) 0 2px 2px 0, rgba(0, 0, 0, 0.14) 0 2px 5px 0;
258-
filter: progid:DXImageTransform.Microsoft.Glow(Color=#b8b8b8,Strength=5);
259-
-ms-filter: "progid:DXImageTransform.Microsoft.Glow(Color=#b8b8b8,Strength=5)";
263+
}
264+
265+
@media (prefers-reduced-motion: reduce) {
266+
.z1,
267+
.z2,
268+
.z3,
269+
.z4,
270+
.z5 {
271+
-webkit-transition-duration: 0s;
272+
-moz-transition-duration: 0s;
273+
-ms-transition-duration: 0s;
274+
-o-transition-duration: 0s;
275+
transition-duration: 0s;
276+
}
260277
}

0 commit comments

Comments
 (0)