root / drupal7 / sites / all / themes / adminimal_theme / skins / material / material.js @ 27370441
1 |
(function($) { |
---|---|
2 |
'use strict';
|
3 |
|
4 |
// Add wave effect.
|
5 |
Drupal.behaviors.adminimal_material_wave_effect = { |
6 |
attach: function (context, settings) { |
7 |
// Init Waves
|
8 |
$( ".action-links li a" ).addClass("waves-effect waves-button waves-float waves-classic"); |
9 |
//$( ".form-actions input" ).addClass("waves-effect");
|
10 |
//$( 'input[type="submit"]' ).addClass("waves-effect");
|
11 |
$( "#navigation ul.tabs.primary li a" ).addClass("waves-effect waves-button waves-classic"); |
12 |
$( "#navigation ul.tabs.secondary li a" ).addClass("waves-effect waves-button waves-classic"); |
13 |
$( "#admin-menu a" ).addClass("waves-effect waves-button waves-light waves-classic"); |
14 |
$( ".theme-info .operations a" ).addClass("waves-effect waves-button waves-classic"); |
15 |
$( "table tbody td a" ).addClass("waves-effect waves-button waves-classic"); |
16 |
$( "#homebox-buttons a" ).addClass("waves-effect waves-button waves-classic"); |
17 |
} |
18 |
}; |
19 |
|
20 |
})(jQuery); |
21 |
|
22 |
/*!
|
23 |
* Waves v0.6.6
|
24 |
* http://fian.my.id/Waves
|
25 |
*
|
26 |
* Copyright 2014 Alfiana E. Sibuea and other contributors
|
27 |
* Released under the MIT license
|
28 |
* https://github.com/fians/Waves/blob/master/LICENSE
|
29 |
*/
|
30 |
|
31 |
;(function(window, factory) {
|
32 |
"use strict";
|
33 |
|
34 |
// AMD. Register as an anonymous module. Wrap in function so we have access
|
35 |
// to root via `this`.
|
36 |
if (typeof define === "function" && define.amd) { |
37 |
define([], function() {
|
38 |
return factory.apply(window);
|
39 |
}); |
40 |
} |
41 |
|
42 |
// Node. Does not work with strict CommonJS, but only CommonJS-like
|
43 |
// environments that support module.exports, like Node.
|
44 |
else if (typeof exports === "object") { |
45 |
module.exports = factory.call(window); |
46 |
} |
47 |
|
48 |
// Browser globals.
|
49 |
else {
|
50 |
window.Waves = factory.call(window); |
51 |
} |
52 |
})(typeof global === "object" ? global : this, function () { |
53 |
"use strict";
|
54 |
|
55 |
var Waves = Waves || {};
|
56 |
var $$ = document.querySelectorAll.bind(document); |
57 |
|
58 |
// Find exact position of element
|
59 |
function isWindow(obj) { |
60 |
return obj !== null && obj === obj.window; |
61 |
} |
62 |
|
63 |
function getWindow(elem) { |
64 |
return isWindow(elem) ? elem : elem.nodeType === 9 && elem.defaultView; |
65 |
} |
66 |
|
67 |
function offset(elem) { |
68 |
var docElem, win,
|
69 |
box = {top: 0, left: 0}, |
70 |
doc = elem && elem.ownerDocument; |
71 |
|
72 |
docElem = doc.documentElement; |
73 |
|
74 |
if (typeof elem.getBoundingClientRect !== typeof undefined) { |
75 |
box = elem.getBoundingClientRect(); |
76 |
} |
77 |
win = getWindow(doc); |
78 |
return {
|
79 |
top: box.top + win.pageYOffset - docElem.clientTop,
|
80 |
left: box.left + win.pageXOffset - docElem.clientLeft
|
81 |
}; |
82 |
} |
83 |
|
84 |
function convertStyle(obj) { |
85 |
var style = ''; |
86 |
|
87 |
for (var a in obj) { |
88 |
if (obj.hasOwnProperty(a)) {
|
89 |
style += (a + ':' + obj[a] + ';'); |
90 |
} |
91 |
} |
92 |
|
93 |
return style;
|
94 |
} |
95 |
|
96 |
var Effect = {
|
97 |
|
98 |
// Effect delay
|
99 |
duration: 750, |
100 |
|
101 |
show: function(e, element) { |
102 |
|
103 |
// Disable right click
|
104 |
if (e.button === 2) { |
105 |
return false; |
106 |
} |
107 |
|
108 |
var el = element || this; |
109 |
|
110 |
// Create ripple
|
111 |
var ripple = document.createElement('div'); |
112 |
ripple.className = 'waves-ripple';
|
113 |
el.appendChild(ripple); |
114 |
|
115 |
// Get click coordinate and element witdh
|
116 |
var pos = offset(el);
|
117 |
var relativeY = (e.pageY - pos.top);
|
118 |
var relativeX = (e.pageX - pos.left);
|
119 |
var scale = 'scale('+((el.clientWidth / 100) * 3)+')'; |
120 |
|
121 |
// Support for touch devices
|
122 |
if ('touches' in e) { |
123 |
relativeY = (e.touches[0].pageY - pos.top);
|
124 |
relativeX = (e.touches[0].pageX - pos.left);
|
125 |
} |
126 |
|
127 |
// Attach data to element
|
128 |
ripple.setAttribute('data-hold', Date.now());
|
129 |
ripple.setAttribute('data-scale', scale);
|
130 |
ripple.setAttribute('data-x', relativeX);
|
131 |
ripple.setAttribute('data-y', relativeY);
|
132 |
|
133 |
// Set ripple position
|
134 |
var rippleStyle = {
|
135 |
'top': relativeY+'px', |
136 |
'left': relativeX+'px' |
137 |
}; |
138 |
|
139 |
ripple.className = ripple.className + ' waves-notransition';
|
140 |
ripple.setAttribute('style', convertStyle(rippleStyle));
|
141 |
ripple.className = ripple.className.replace('waves-notransition', ''); |
142 |
|
143 |
// Scale the ripple
|
144 |
rippleStyle['-webkit-transform'] = scale;
|
145 |
rippleStyle['-moz-transform'] = scale;
|
146 |
rippleStyle['-ms-transform'] = scale;
|
147 |
rippleStyle['-o-transform'] = scale;
|
148 |
rippleStyle.transform = scale; |
149 |
rippleStyle.opacity = '1';
|
150 |
|
151 |
rippleStyle['-webkit-transition-duration'] = Effect.duration + 'ms'; |
152 |
rippleStyle['-moz-transition-duration'] = Effect.duration + 'ms'; |
153 |
rippleStyle['-o-transition-duration'] = Effect.duration + 'ms'; |
154 |
rippleStyle['transition-duration'] = Effect.duration + 'ms'; |
155 |
|
156 |
ripple.setAttribute('style', convertStyle(rippleStyle));
|
157 |
}, |
158 |
|
159 |
hide: function(e) { |
160 |
TouchHandler.touchup(e); |
161 |
|
162 |
var el = this; |
163 |
var width = el.clientWidth * 1.4; |
164 |
|
165 |
// Get first ripple
|
166 |
var ripple = null; |
167 |
var ripples = el.getElementsByClassName('waves-ripple'); |
168 |
if (ripples.length > 0) { |
169 |
ripple = ripples[ripples.length - 1];
|
170 |
} else {
|
171 |
return false; |
172 |
} |
173 |
|
174 |
var relativeX = ripple.getAttribute('data-x'); |
175 |
var relativeY = ripple.getAttribute('data-y'); |
176 |
var scale = ripple.getAttribute('data-scale'); |
177 |
|
178 |
// Get delay beetween mousedown and mouse leave
|
179 |
var diff = Date.now() - Number(ripple.getAttribute('data-hold')); |
180 |
var delay = 350 - diff; |
181 |
|
182 |
if (delay < 0) { |
183 |
delay = 0;
|
184 |
} |
185 |
|
186 |
// Fade out ripple after delay
|
187 |
setTimeout(function() {
|
188 |
var style = {
|
189 |
'top': relativeY+'px', |
190 |
'left': relativeX+'px', |
191 |
'opacity': '0', |
192 |
|
193 |
// Duration
|
194 |
'-webkit-transition-duration': Effect.duration + 'ms', |
195 |
'-moz-transition-duration': Effect.duration + 'ms', |
196 |
'-o-transition-duration': Effect.duration + 'ms', |
197 |
'transition-duration': Effect.duration + 'ms', |
198 |
'-webkit-transform': scale,
|
199 |
'-moz-transform': scale,
|
200 |
'-ms-transform': scale,
|
201 |
'-o-transform': scale,
|
202 |
'transform': scale
|
203 |
}; |
204 |
|
205 |
ripple.setAttribute('style', convertStyle(style));
|
206 |
|
207 |
setTimeout(function() {
|
208 |
try {
|
209 |
el.removeChild(ripple); |
210 |
} catch(e) {
|
211 |
return false; |
212 |
} |
213 |
}, Effect.duration); |
214 |
}, delay); |
215 |
}, |
216 |
|
217 |
// Little hack to make <input> can perform waves effect
|
218 |
wrapInput: function(elements) { |
219 |
for (var a = 0; a < elements.length; a++) { |
220 |
var el = elements[a];
|
221 |
|
222 |
if (el.tagName.toLowerCase() === 'input') { |
223 |
var parent = el.parentNode;
|
224 |
|
225 |
// If input already have parent just pass through
|
226 |
if (parent.tagName.toLowerCase() === 'i' && parent.className.indexOf('waves-effect') !== -1) { |
227 |
continue;
|
228 |
} |
229 |
|
230 |
// Put element class and style to the specified parent
|
231 |
var wrapper = document.createElement('i'); |
232 |
wrapper.className = el.className + ' waves-input-wrapper';
|
233 |
|
234 |
var elementStyle = el.getAttribute('style'); |
235 |
|
236 |
if (!elementStyle) {
|
237 |
elementStyle = '';
|
238 |
} |
239 |
|
240 |
wrapper.setAttribute('style', elementStyle);
|
241 |
|
242 |
el.className = 'waves-button-input';
|
243 |
el.removeAttribute('style');
|
244 |
|
245 |
// Put element as child
|
246 |
parent.replaceChild(wrapper, el); |
247 |
wrapper.appendChild(el); |
248 |
} |
249 |
} |
250 |
} |
251 |
}; |
252 |
|
253 |
|
254 |
/**
|
255 |
* Disable mousedown event for 500ms during and after touch
|
256 |
*/
|
257 |
var TouchHandler = {
|
258 |
/* uses an integer rather than bool so there's no issues with
|
259 |
* needing to clear timeouts if another touch event occurred
|
260 |
* within the 500ms. Cannot mouseup between touchstart and
|
261 |
* touchend, nor in the 500ms after touchend. */
|
262 |
touches: 0, |
263 |
allowEvent: function(e) { |
264 |
var allow = true; |
265 |
|
266 |
if (e.type === 'touchstart') { |
267 |
TouchHandler.touches += 1; //push |
268 |
} else if (e.type === 'touchend' || e.type === 'touchcancel') { |
269 |
setTimeout(function() {
|
270 |
if (TouchHandler.touches > 0) { |
271 |
TouchHandler.touches -= 1; //pop after 500ms |
272 |
} |
273 |
}, 500);
|
274 |
} else if (e.type === 'mousedown' && TouchHandler.touches > 0) { |
275 |
allow = false;
|
276 |
} |
277 |
|
278 |
return allow;
|
279 |
}, |
280 |
touchup: function(e) { |
281 |
TouchHandler.allowEvent(e); |
282 |
} |
283 |
}; |
284 |
|
285 |
|
286 |
/**
|
287 |
* Delegated click handler for .waves-effect element.
|
288 |
* returns null when .waves-effect element not in "click tree"
|
289 |
*/
|
290 |
function getWavesEffectElement(e) { |
291 |
if (TouchHandler.allowEvent(e) === false) { |
292 |
return null; |
293 |
} |
294 |
|
295 |
var element = null; |
296 |
var target = e.target || e.srcElement;
|
297 |
|
298 |
while (target.parentElement !== null) { |
299 |
if (!(target instanceof SVGElement) && target.className.indexOf('waves-effect') !== -1) { |
300 |
element = target; |
301 |
break;
|
302 |
} else if (target.classList.contains('waves-effect')) { |
303 |
element = target; |
304 |
break;
|
305 |
} |
306 |
target = target.parentElement; |
307 |
} |
308 |
|
309 |
return element;
|
310 |
} |
311 |
|
312 |
/**
|
313 |
* Bubble the click and show effect if .waves-effect elem was found
|
314 |
*/
|
315 |
function showEffect(e) { |
316 |
var element = getWavesEffectElement(e);
|
317 |
|
318 |
if (element !== null) { |
319 |
Effect.show(e, element); |
320 |
|
321 |
if ('ontouchstart' in window) { |
322 |
element.addEventListener('touchend', Effect.hide, false); |
323 |
element.addEventListener('touchcancel', Effect.hide, false); |
324 |
} |
325 |
|
326 |
element.addEventListener('mouseup', Effect.hide, false); |
327 |
element.addEventListener('mouseleave', Effect.hide, false); |
328 |
} |
329 |
} |
330 |
|
331 |
Waves.displayEffect = function(options) { |
332 |
options = options || {}; |
333 |
|
334 |
if ('duration' in options) { |
335 |
Effect.duration = options.duration; |
336 |
} |
337 |
|
338 |
//Wrap input inside <i> tag
|
339 |
Effect.wrapInput($$('.waves-effect')); |
340 |
|
341 |
if ('ontouchstart' in window) { |
342 |
document.body.addEventListener('touchstart', showEffect, false); |
343 |
} |
344 |
|
345 |
document.body.addEventListener('mousedown', showEffect, false); |
346 |
}; |
347 |
|
348 |
/**
|
349 |
* Attach Waves to an input element (or any element which doesn't
|
350 |
* bubble mouseup/mousedown events).
|
351 |
* Intended to be used with dynamically loaded forms/inputs, or
|
352 |
* where the user doesn't want a delegated click handler.
|
353 |
*/
|
354 |
Waves.attach = function(element) { |
355 |
//FUTURE: automatically add waves classes and allow users
|
356 |
// to specify them with an options param? Eg. light/classic/button
|
357 |
if (element.tagName.toLowerCase() === 'input') { |
358 |
Effect.wrapInput([element]); |
359 |
element = element.parentElement; |
360 |
} |
361 |
|
362 |
if ('ontouchstart' in window) { |
363 |
element.addEventListener('touchstart', showEffect, false); |
364 |
} |
365 |
|
366 |
element.addEventListener('mousedown', showEffect, false); |
367 |
}; |
368 |
|
369 |
return Waves;
|
370 |
}); |
371 |
|
372 |
// Init Waves
|
373 |
(function ($) { |
374 |
Drupal.behaviors.wavesInit = { |
375 |
attach: function (context, settings) { |
376 |
Waves.displayEffect(); |
377 |
} |
378 |
}; |
379 |
})(jQuery); |