node-waves.min.js 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600
  1. /*!
  2. * Waves v0.7.6
  3. * http://fian.my.id/Waves
  4. *
  5. * Copyright 2014-2018 Alfiana E. Sibuea and other contributors
  6. * Released under the MIT license
  7. * https://github.com/fians/Waves/blob/master/LICENSE
  8. */
  9. ;(function(window, factory) {
  10. 'use strict';
  11. // AMD. Register as an anonymous module. Wrap in function so we have access
  12. // to root via `this`.
  13. if (typeof define === 'function' && define.amd) {
  14. define([], function() {
  15. window.Waves = factory.call(window);
  16. return window.Waves;
  17. });
  18. }
  19. // Node. Does not work with strict CommonJS, but only CommonJS-like
  20. // environments that support module.exports, like Node.
  21. else if (typeof exports === 'object') {
  22. module.exports = factory.call(window);
  23. }
  24. // Browser globals.
  25. else {
  26. window.Waves = factory.call(window);
  27. }
  28. })(typeof global === 'object' ? global : this, function() {
  29. 'use strict';
  30. var Waves = Waves || {};
  31. var $$ = document.querySelectorAll.bind(document);
  32. var toString = Object.prototype.toString;
  33. var isTouchAvailable = 'ontouchstart' in window;
  34. // Find exact position of element
  35. function isWindow(obj) {
  36. return obj !== null && obj === obj.window;
  37. }
  38. function getWindow(elem) {
  39. return isWindow(elem) ? elem : elem.nodeType === 9 && elem.defaultView;
  40. }
  41. function isObject(value) {
  42. var type = typeof value;
  43. return type === 'function' || type === 'object' && !!value;
  44. }
  45. function isDOMNode(obj) {
  46. return isObject(obj) && obj.nodeType > 0;
  47. }
  48. function getWavesElements(nodes) {
  49. var stringRepr = toString.call(nodes);
  50. if (stringRepr === '[object String]') {
  51. return $$(nodes);
  52. } else if (isObject(nodes) && /^\[object (Array|HTMLCollection|NodeList|Object)\]$/.test(stringRepr) && nodes.hasOwnProperty('length')) {
  53. return nodes;
  54. } else if (isDOMNode(nodes)) {
  55. return [nodes];
  56. }
  57. return [];
  58. }
  59. function offset(elem) {
  60. var docElem, win,
  61. box = { top: 0, left: 0 },
  62. doc = elem && elem.ownerDocument;
  63. docElem = doc.documentElement;
  64. if (typeof elem.getBoundingClientRect !== typeof undefined) {
  65. box = elem.getBoundingClientRect();
  66. }
  67. win = getWindow(doc);
  68. return {
  69. top: box.top + win.pageYOffset - docElem.clientTop,
  70. left: box.left + win.pageXOffset - docElem.clientLeft
  71. };
  72. }
  73. function convertStyle(styleObj) {
  74. var style = '';
  75. for (var prop in styleObj) {
  76. if (styleObj.hasOwnProperty(prop)) {
  77. style += (prop + ':' + styleObj[prop] + ';');
  78. }
  79. }
  80. return style;
  81. }
  82. var Effect = {
  83. // Effect duration
  84. duration: 750,
  85. // Effect delay (check for scroll before showing effect)
  86. delay: 200,
  87. show: function(e, element, velocity) {
  88. // Disable right click
  89. if (e.button === 2) {
  90. return false;
  91. }
  92. element = element || this;
  93. // Create ripple
  94. var ripple = document.createElement('div');
  95. ripple.className = 'waves-ripple waves-rippling';
  96. element.appendChild(ripple);
  97. // Get click coordinate and element width
  98. var pos = offset(element);
  99. var relativeY = 0;
  100. var relativeX = 0;
  101. // Support for touch devices
  102. if('touches' in e && e.touches.length) {
  103. relativeY = (e.touches[0].pageY - pos.top);
  104. relativeX = (e.touches[0].pageX - pos.left);
  105. }
  106. //Normal case
  107. else {
  108. relativeY = (e.pageY - pos.top);
  109. relativeX = (e.pageX - pos.left);
  110. }
  111. // Support for synthetic events
  112. relativeX = relativeX >= 0 ? relativeX : 0;
  113. relativeY = relativeY >= 0 ? relativeY : 0;
  114. var scale = 'scale(' + ((element.clientWidth / 100) * 3) + ')';
  115. var translate = 'translate(0,0)';
  116. if (velocity) {
  117. translate = 'translate(' + (velocity.x) + 'px, ' + (velocity.y) + 'px)';
  118. }
  119. // Attach data to element
  120. ripple.setAttribute('data-hold', Date.now());
  121. ripple.setAttribute('data-x', relativeX);
  122. ripple.setAttribute('data-y', relativeY);
  123. ripple.setAttribute('data-scale', scale);
  124. ripple.setAttribute('data-translate', translate);
  125. // Set ripple position
  126. var rippleStyle = {
  127. top: relativeY + 'px',
  128. left: relativeX + 'px'
  129. };
  130. ripple.classList.add('waves-notransition');
  131. ripple.setAttribute('style', convertStyle(rippleStyle));
  132. ripple.classList.remove('waves-notransition');
  133. // Scale the ripple
  134. rippleStyle['-webkit-transform'] = scale + ' ' + translate;
  135. rippleStyle['-moz-transform'] = scale + ' ' + translate;
  136. rippleStyle['-ms-transform'] = scale + ' ' + translate;
  137. rippleStyle['-o-transform'] = scale + ' ' + translate;
  138. rippleStyle.transform = scale + ' ' + translate;
  139. rippleStyle.opacity = '1';
  140. var duration = e.type === 'mousemove' ? 2500 : Effect.duration;
  141. rippleStyle['-webkit-transition-duration'] = duration + 'ms';
  142. rippleStyle['-moz-transition-duration'] = duration + 'ms';
  143. rippleStyle['-o-transition-duration'] = duration + 'ms';
  144. rippleStyle['transition-duration'] = duration + 'ms';
  145. ripple.setAttribute('style', convertStyle(rippleStyle));
  146. },
  147. hide: function(e, element) {
  148. element = element || this;
  149. var ripples = element.getElementsByClassName('waves-rippling');
  150. for (var i = 0, len = ripples.length; i < len; i++) {
  151. removeRipple(e, element, ripples[i]);
  152. }
  153. if (isTouchAvailable) {
  154. element.removeEventListener('touchend', Effect.hide);
  155. element.removeEventListener('touchcancel', Effect.hide);
  156. }
  157. element.removeEventListener('mouseup', Effect.hide);
  158. element.removeEventListener('mouseleave', Effect.hide);
  159. }
  160. };
  161. /**
  162. * Collection of wrapper for HTML element that only have single tag
  163. * like <input> and <img>
  164. */
  165. var TagWrapper = {
  166. // Wrap <input> tag so it can perform the effect
  167. input: function(element) {
  168. var parent = element.parentNode;
  169. // If input already have parent just pass through
  170. if (parent.tagName.toLowerCase() === 'i' && parent.classList.contains('waves-effect')) {
  171. return;
  172. }
  173. // Put element class and style to the specified parent
  174. var wrapper = document.createElement('i');
  175. wrapper.className = element.className + ' waves-input-wrapper';
  176. element.className = 'waves-button-input';
  177. // Put element as child
  178. parent.replaceChild(wrapper, element);
  179. wrapper.appendChild(element);
  180. // Apply element color and background color to wrapper
  181. var elementStyle = window.getComputedStyle(element, null);
  182. var color = elementStyle.color;
  183. var backgroundColor = elementStyle.backgroundColor;
  184. wrapper.setAttribute('style', 'color:' + color + ';background:' + backgroundColor);
  185. element.setAttribute('style', 'background-color:rgba(0,0,0,0);');
  186. },
  187. // Wrap <img> tag so it can perform the effect
  188. img: function(element) {
  189. var parent = element.parentNode;
  190. // If input already have parent just pass through
  191. if (parent.tagName.toLowerCase() === 'i' && parent.classList.contains('waves-effect')) {
  192. return;
  193. }
  194. // Put element as child
  195. var wrapper = document.createElement('i');
  196. parent.replaceChild(wrapper, element);
  197. wrapper.appendChild(element);
  198. }
  199. };
  200. /**
  201. * Hide the effect and remove the ripple. Must be
  202. * a separate function to pass the JSLint...
  203. */
  204. function removeRipple(e, el, ripple) {
  205. // Check if the ripple still exist
  206. if (!ripple) {
  207. return;
  208. }
  209. ripple.classList.remove('waves-rippling');
  210. var relativeX = ripple.getAttribute('data-x');
  211. var relativeY = ripple.getAttribute('data-y');
  212. var scale = ripple.getAttribute('data-scale');
  213. var translate = ripple.getAttribute('data-translate');
  214. // Get delay beetween mousedown and mouse leave
  215. var diff = Date.now() - Number(ripple.getAttribute('data-hold'));
  216. var delay = 350 - diff;
  217. if (delay < 0) {
  218. delay = 0;
  219. }
  220. if (e.type === 'mousemove') {
  221. delay = 150;
  222. }
  223. // Fade out ripple after delay
  224. var duration = e.type === 'mousemove' ? 2500 : Effect.duration;
  225. setTimeout(function() {
  226. var style = {
  227. top: relativeY + 'px',
  228. left: relativeX + 'px',
  229. opacity: '0',
  230. // Duration
  231. '-webkit-transition-duration': duration + 'ms',
  232. '-moz-transition-duration': duration + 'ms',
  233. '-o-transition-duration': duration + 'ms',
  234. 'transition-duration': duration + 'ms',
  235. '-webkit-transform': scale + ' ' + translate,
  236. '-moz-transform': scale + ' ' + translate,
  237. '-ms-transform': scale + ' ' + translate,
  238. '-o-transform': scale + ' ' + translate,
  239. 'transform': scale + ' ' + translate
  240. };
  241. ripple.setAttribute('style', convertStyle(style));
  242. setTimeout(function() {
  243. try {
  244. el.removeChild(ripple);
  245. } catch (e) {
  246. return false;
  247. }
  248. }, duration);
  249. }, delay);
  250. }
  251. /**
  252. * Disable mousedown event for 500ms during and after touch
  253. */
  254. var TouchHandler = {
  255. /* uses an integer rather than bool so there's no issues with
  256. * needing to clear timeouts if another touch event occurred
  257. * within the 500ms. Cannot mouseup between touchstart and
  258. * touchend, nor in the 500ms after touchend. */
  259. touches: 0,
  260. allowEvent: function(e) {
  261. var allow = true;
  262. if (/^(mousedown|mousemove)$/.test(e.type) && TouchHandler.touches) {
  263. allow = false;
  264. }
  265. return allow;
  266. },
  267. registerEvent: function(e) {
  268. var eType = e.type;
  269. if (eType === 'touchstart') {
  270. TouchHandler.touches += 1; // push
  271. } else if (/^(touchend|touchcancel)$/.test(eType)) {
  272. setTimeout(function() {
  273. if (TouchHandler.touches) {
  274. TouchHandler.touches -= 1; // pop after 500ms
  275. }
  276. }, 500);
  277. }
  278. }
  279. };
  280. /**
  281. * Delegated click handler for .waves-effect element.
  282. * returns null when .waves-effect element not in "click tree"
  283. */
  284. function getWavesEffectElement(e) {
  285. if (TouchHandler.allowEvent(e) === false) {
  286. return null;
  287. }
  288. var element = null;
  289. var target = e.target || e.srcElement;
  290. while (target.parentElement) {
  291. if ( (!(target instanceof SVGElement)) && target.classList.contains('waves-effect')) {
  292. element = target;
  293. break;
  294. }
  295. target = target.parentElement;
  296. }
  297. return element;
  298. }
  299. /**
  300. * Bubble the click and show effect if .waves-effect elem was found
  301. */
  302. function showEffect(e) {
  303. // Disable effect if element has "disabled" property on it
  304. // In some cases, the event is not triggered by the current element
  305. // if (e.target.getAttribute('disabled') !== null) {
  306. // return;
  307. // }
  308. var element = getWavesEffectElement(e);
  309. if (element !== null) {
  310. // Make it sure the element has either disabled property, disabled attribute or 'disabled' class
  311. if (element.disabled || element.getAttribute('disabled') || element.classList.contains('disabled')) {
  312. return;
  313. }
  314. TouchHandler.registerEvent(e);
  315. if (e.type === 'touchstart' && Effect.delay) {
  316. var hidden = false;
  317. var timer = setTimeout(function () {
  318. timer = null;
  319. Effect.show(e, element);
  320. }, Effect.delay);
  321. var hideEffect = function(hideEvent) {
  322. // if touch hasn't moved, and effect not yet started: start effect now
  323. if (timer) {
  324. clearTimeout(timer);
  325. timer = null;
  326. Effect.show(e, element);
  327. }
  328. if (!hidden) {
  329. hidden = true;
  330. Effect.hide(hideEvent, element);
  331. }
  332. removeListeners();
  333. };
  334. var touchMove = function(moveEvent) {
  335. if (timer) {
  336. clearTimeout(timer);
  337. timer = null;
  338. }
  339. hideEffect(moveEvent);
  340. removeListeners();
  341. };
  342. element.addEventListener('touchmove', touchMove, false);
  343. element.addEventListener('touchend', hideEffect, false);
  344. element.addEventListener('touchcancel', hideEffect, false);
  345. var removeListeners = function() {
  346. element.removeEventListener('touchmove', touchMove);
  347. element.removeEventListener('touchend', hideEffect);
  348. element.removeEventListener('touchcancel', hideEffect);
  349. };
  350. } else {
  351. Effect.show(e, element);
  352. if (isTouchAvailable) {
  353. element.addEventListener('touchend', Effect.hide, false);
  354. element.addEventListener('touchcancel', Effect.hide, false);
  355. }
  356. element.addEventListener('mouseup', Effect.hide, false);
  357. element.addEventListener('mouseleave', Effect.hide, false);
  358. }
  359. }
  360. }
  361. Waves.init = function(options) {
  362. var body = document.body;
  363. options = options || {};
  364. if ('duration' in options) {
  365. Effect.duration = options.duration;
  366. }
  367. if ('delay' in options) {
  368. Effect.delay = options.delay;
  369. }
  370. if (isTouchAvailable) {
  371. body.addEventListener('touchstart', showEffect, false);
  372. body.addEventListener('touchcancel', TouchHandler.registerEvent, false);
  373. body.addEventListener('touchend', TouchHandler.registerEvent, false);
  374. }
  375. body.addEventListener('mousedown', showEffect, false);
  376. };
  377. /**
  378. * Attach Waves to dynamically loaded inputs, or add .waves-effect and other
  379. * waves classes to a set of elements. Set drag to true if the ripple mouseover
  380. * or skimming effect should be applied to the elements.
  381. */
  382. Waves.attach = function(elements, classes) {
  383. elements = getWavesElements(elements);
  384. if (toString.call(classes) === '[object Array]') {
  385. classes = classes.join(' ');
  386. }
  387. classes = classes ? ' ' + classes : '';
  388. var element, tagName;
  389. for (var i = 0, len = elements.length; i < len; i++) {
  390. element = elements[i];
  391. tagName = element.tagName.toLowerCase();
  392. if (['input', 'img'].indexOf(tagName) !== -1) {
  393. TagWrapper[tagName](element);
  394. element = element.parentElement;
  395. }
  396. if (element.className.indexOf('waves-effect') === -1) {
  397. element.className += ' waves-effect' + classes;
  398. }
  399. }
  400. };
  401. /**
  402. * Cause a ripple to appear in an element via code.
  403. */
  404. Waves.ripple = function(elements, options) {
  405. elements = getWavesElements(elements);
  406. var elementsLen = elements.length;
  407. options = options || {};
  408. options.wait = options.wait || 0;
  409. options.position = options.position || null; // default = centre of element
  410. if (elementsLen) {
  411. var element, pos, off, centre = {}, i = 0;
  412. var mousedown = {
  413. type: 'mousedown',
  414. button: 1
  415. };
  416. var hideRipple = function(mouseup, element) {
  417. return function() {
  418. Effect.hide(mouseup, element);
  419. };
  420. };
  421. for (; i < elementsLen; i++) {
  422. element = elements[i];
  423. pos = options.position || {
  424. x: element.clientWidth / 2,
  425. y: element.clientHeight / 2
  426. };
  427. off = offset(element);
  428. centre.x = off.left + pos.x;
  429. centre.y = off.top + pos.y;
  430. mousedown.pageX = centre.x;
  431. mousedown.pageY = centre.y;
  432. Effect.show(mousedown, element);
  433. if (options.wait >= 0 && options.wait !== null) {
  434. var mouseup = {
  435. type: 'mouseup',
  436. button: 1
  437. };
  438. setTimeout(hideRipple(mouseup, element), options.wait);
  439. }
  440. }
  441. }
  442. };
  443. /**
  444. * Remove all ripples from an element.
  445. */
  446. Waves.calm = function(elements) {
  447. elements = getWavesElements(elements);
  448. var mouseup = {
  449. type: 'mouseup',
  450. button: 1
  451. };
  452. for (var i = 0, len = elements.length; i < len; i++) {
  453. Effect.hide(mouseup, elements[i]);
  454. }
  455. };
  456. /**
  457. * Deprecated API fallback
  458. */
  459. Waves.displayEffect = function(options) {
  460. console.error('Waves.displayEffect() has been deprecated and will be removed in future version. Please use Waves.init() to initialize Waves effect');
  461. Waves.init(options);
  462. };
  463. return Waves;
  464. });