123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378 |
- (function($) {
- 'use strict';
- // Add wave effect.
- Drupal.behaviors.adminimal_material_wave_effect = {
- attach: function (context, settings) {
- // Init Waves
- $( ".action-links li a" ).addClass("waves-effect waves-button waves-float waves-classic");
- //$( ".form-actions input" ).addClass("waves-effect");
- //$( 'input[type="submit"]' ).addClass("waves-effect");
- $( "#navigation ul.tabs.primary li a" ).addClass("waves-effect waves-button waves-classic");
- $( "#navigation ul.tabs.secondary li a" ).addClass("waves-effect waves-button waves-classic");
- $( "#admin-menu a" ).addClass("waves-effect waves-button waves-light waves-classic");
- $( ".theme-info .operations a" ).addClass("waves-effect waves-button waves-classic");
- $( "table tbody td a" ).addClass("waves-effect waves-button waves-classic");
- }
- };
- })(jQuery);
- /*!
- * Waves v0.6.6
- * http://fian.my.id/Waves
- *
- * Copyright 2014 Alfiana E. Sibuea and other contributors
- * Released under the MIT license
- * https://github.com/fians/Waves/blob/master/LICENSE
- */
- ;(function(window, factory) {
- "use strict";
- // AMD. Register as an anonymous module. Wrap in function so we have access
- // to root via `this`.
- if (typeof define === "function" && define.amd) {
- define([], function() {
- return factory.apply(window);
- });
- }
- // Node. Does not work with strict CommonJS, but only CommonJS-like
- // environments that support module.exports, like Node.
- else if (typeof exports === "object") {
- module.exports = factory.call(window);
- }
- // Browser globals.
- else {
- window.Waves = factory.call(window);
- }
- })(typeof global === "object" ? global : this, function () {
- "use strict";
- var Waves = Waves || {};
- var $$ = document.querySelectorAll.bind(document);
- // Find exact position of element
- function isWindow(obj) {
- return obj !== null && obj === obj.window;
- }
- function getWindow(elem) {
- return isWindow(elem) ? elem : elem.nodeType === 9 && elem.defaultView;
- }
- function offset(elem) {
- var docElem, win,
- box = {top: 0, left: 0},
- doc = elem && elem.ownerDocument;
- docElem = doc.documentElement;
- if (typeof elem.getBoundingClientRect !== typeof undefined) {
- box = elem.getBoundingClientRect();
- }
- win = getWindow(doc);
- return {
- top: box.top + win.pageYOffset - docElem.clientTop,
- left: box.left + win.pageXOffset - docElem.clientLeft
- };
- }
- function convertStyle(obj) {
- var style = '';
- for (var a in obj) {
- if (obj.hasOwnProperty(a)) {
- style += (a + ':' + obj[a] + ';');
- }
- }
- return style;
- }
- var Effect = {
- // Effect delay
- duration: 750,
- show: function(e, element) {
- // Disable right click
- if (e.button === 2) {
- return false;
- }
- var el = element || this;
- // Create ripple
- var ripple = document.createElement('div');
- ripple.className = 'waves-ripple';
- el.appendChild(ripple);
- // Get click coordinate and element witdh
- var pos = offset(el);
- var relativeY = (e.pageY - pos.top);
- var relativeX = (e.pageX - pos.left);
- var scale = 'scale('+((el.clientWidth / 100) * 3)+')';
- // Support for touch devices
- if ('touches' in e) {
- relativeY = (e.touches[0].pageY - pos.top);
- relativeX = (e.touches[0].pageX - pos.left);
- }
- // Attach data to element
- ripple.setAttribute('data-hold', Date.now());
- ripple.setAttribute('data-scale', scale);
- ripple.setAttribute('data-x', relativeX);
- ripple.setAttribute('data-y', relativeY);
- // Set ripple position
- var rippleStyle = {
- 'top': relativeY+'px',
- 'left': relativeX+'px'
- };
- ripple.className = ripple.className + ' waves-notransition';
- ripple.setAttribute('style', convertStyle(rippleStyle));
- ripple.className = ripple.className.replace('waves-notransition', '');
- // Scale the ripple
- rippleStyle['-webkit-transform'] = scale;
- rippleStyle['-moz-transform'] = scale;
- rippleStyle['-ms-transform'] = scale;
- rippleStyle['-o-transform'] = scale;
- rippleStyle.transform = scale;
- rippleStyle.opacity = '1';
- rippleStyle['-webkit-transition-duration'] = Effect.duration + 'ms';
- rippleStyle['-moz-transition-duration'] = Effect.duration + 'ms';
- rippleStyle['-o-transition-duration'] = Effect.duration + 'ms';
- rippleStyle['transition-duration'] = Effect.duration + 'ms';
- ripple.setAttribute('style', convertStyle(rippleStyle));
- },
- hide: function(e) {
- TouchHandler.touchup(e);
- var el = this;
- var width = el.clientWidth * 1.4;
- // Get first ripple
- var ripple = null;
- var ripples = el.getElementsByClassName('waves-ripple');
- if (ripples.length > 0) {
- ripple = ripples[ripples.length - 1];
- } else {
- return false;
- }
- var relativeX = ripple.getAttribute('data-x');
- var relativeY = ripple.getAttribute('data-y');
- var scale = ripple.getAttribute('data-scale');
- // Get delay beetween mousedown and mouse leave
- var diff = Date.now() - Number(ripple.getAttribute('data-hold'));
- var delay = 350 - diff;
- if (delay < 0) {
- delay = 0;
- }
- // Fade out ripple after delay
- setTimeout(function() {
- var style = {
- 'top': relativeY+'px',
- 'left': relativeX+'px',
- 'opacity': '0',
- // Duration
- '-webkit-transition-duration': Effect.duration + 'ms',
- '-moz-transition-duration': Effect.duration + 'ms',
- '-o-transition-duration': Effect.duration + 'ms',
- 'transition-duration': Effect.duration + 'ms',
- '-webkit-transform': scale,
- '-moz-transform': scale,
- '-ms-transform': scale,
- '-o-transform': scale,
- 'transform': scale
- };
- ripple.setAttribute('style', convertStyle(style));
- setTimeout(function() {
- try {
- el.removeChild(ripple);
- } catch(e) {
- return false;
- }
- }, Effect.duration);
- }, delay);
- },
- // Little hack to make <input> can perform waves effect
- wrapInput: function(elements) {
- for (var a = 0; a < elements.length; a++) {
- var el = elements[a];
- if (el.tagName.toLowerCase() === 'input') {
- var parent = el.parentNode;
- // If input already have parent just pass through
- if (parent.tagName.toLowerCase() === 'i' && parent.className.indexOf('waves-effect') !== -1) {
- continue;
- }
- // Put element class and style to the specified parent
- var wrapper = document.createElement('i');
- wrapper.className = el.className + ' waves-input-wrapper';
- var elementStyle = el.getAttribute('style');
- if (!elementStyle) {
- elementStyle = '';
- }
- wrapper.setAttribute('style', elementStyle);
- el.className = 'waves-button-input';
- el.removeAttribute('style');
- // Put element as child
- parent.replaceChild(wrapper, el);
- wrapper.appendChild(el);
- }
- }
- }
- };
- /**
- * Disable mousedown event for 500ms during and after touch
- */
- var TouchHandler = {
- /* uses an integer rather than bool so there's no issues with
- * needing to clear timeouts if another touch event occurred
- * within the 500ms. Cannot mouseup between touchstart and
- * touchend, nor in the 500ms after touchend. */
- touches: 0,
- allowEvent: function(e) {
- var allow = true;
- if (e.type === 'touchstart') {
- TouchHandler.touches += 1; //push
- } else if (e.type === 'touchend' || e.type === 'touchcancel') {
- setTimeout(function() {
- if (TouchHandler.touches > 0) {
- TouchHandler.touches -= 1; //pop after 500ms
- }
- }, 500);
- } else if (e.type === 'mousedown' && TouchHandler.touches > 0) {
- allow = false;
- }
- return allow;
- },
- touchup: function(e) {
- TouchHandler.allowEvent(e);
- }
- };
- /**
- * Delegated click handler for .waves-effect element.
- * returns null when .waves-effect element not in "click tree"
- */
- function getWavesEffectElement(e) {
- if (TouchHandler.allowEvent(e) === false) {
- return null;
- }
- var element = null;
- var target = e.target || e.srcElement;
- while (target.parentElement !== null) {
- if (!(target instanceof SVGElement) && target.className.indexOf('waves-effect') !== -1) {
- element = target;
- break;
- } else if (target.classList.contains('waves-effect')) {
- element = target;
- break;
- }
- target = target.parentElement;
- }
- return element;
- }
- /**
- * Bubble the click and show effect if .waves-effect elem was found
- */
- function showEffect(e) {
- var element = getWavesEffectElement(e);
- if (element !== null) {
- Effect.show(e, element);
- if ('ontouchstart' in window) {
- element.addEventListener('touchend', Effect.hide, false);
- element.addEventListener('touchcancel', Effect.hide, false);
- }
- element.addEventListener('mouseup', Effect.hide, false);
- element.addEventListener('mouseleave', Effect.hide, false);
- }
- }
- Waves.displayEffect = function(options) {
- options = options || {};
- if ('duration' in options) {
- Effect.duration = options.duration;
- }
- //Wrap input inside <i> tag
- Effect.wrapInput($$('.waves-effect'));
- if ('ontouchstart' in window) {
- document.body.addEventListener('touchstart', showEffect, false);
- }
- document.body.addEventListener('mousedown', showEffect, false);
- };
- /**
- * Attach Waves to an input element (or any element which doesn't
- * bubble mouseup/mousedown events).
- * Intended to be used with dynamically loaded forms/inputs, or
- * where the user doesn't want a delegated click handler.
- */
- Waves.attach = function(element) {
- //FUTURE: automatically add waves classes and allow users
- // to specify them with an options param? Eg. light/classic/button
- if (element.tagName.toLowerCase() === 'input') {
- Effect.wrapInput([element]);
- element = element.parentElement;
- }
- if ('ontouchstart' in window) {
- element.addEventListener('touchstart', showEffect, false);
- }
- element.addEventListener('mousedown', showEffect, false);
- };
- return Waves;
- });
- // Init Waves
- (function ($) {
- Drupal.behaviors.wavesInit = {
- attach: function (context, settings) {
- Waves.displayEffect();
- }
- };
- })(jQuery);
|