├── .babelrc
├── .gitignore
├── .jshintrc
├── LICENSE
├── README.md
├── demo
└── index.html
├── dist
└── vue-waves.js
├── index.js
├── package-lock.json
├── package.json
├── waves.css
├── waves.js
└── webpack.config.babel.js
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["es2015"]
3 | }
4 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 |
--------------------------------------------------------------------------------
/.jshintrc:
--------------------------------------------------------------------------------
1 | {
2 | "undef": true,
3 | "unused": true,
4 | "esversion": 6,
5 | "asi": true,
6 | "browser": true,
7 | "node": true,
8 | "devel": true,
9 | "predef": ["Vue", "VueWaves"]
10 | }
11 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License (MIT)
2 |
3 | Copyright (c) 2016 TeddyZhu
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # vue-waves
2 |
3 | A Vue.js version of waves based on https://github.com/fians/Waves.
4 |
5 | ## How to Use
6 |
7 | ### SetUp
8 |
9 | ```bash
10 | npm i -S vue-waves
11 | ```
12 |
13 | then in the js file
14 |
15 | ```javascript
16 | import Vue from 'vue';
17 | import VueWaves from 'vue-waves';
18 |
19 | Vue.use(VueWaves);
20 | ```
21 |
22 | ### Config
23 |
24 | ```javascript
25 | Vue.use(VueWaves, {
26 | name: 'waves' // Vue指令名称
27 | duration: 500, // 涟漪效果持续时间
28 | delay: 200 // 延时显示涟漪效果
29 | })
30 | ```
31 |
32 | ### Usage
33 |
34 | ```html
35 |
36 |
37 | ```
38 |
39 | Vue directive:
40 | ```
41 | v-waves.button 按钮
42 | v-waves.circle 圆形
43 | v-waves.block 块
44 | v-waves.float 阴影效果
45 | v-waves.light 亮色涟漪
46 | v-waves.classic ??
47 | ```
48 |
49 | Demo:
50 |
51 | git clone https://github.com/Teddy-Zhu/vue-waves.git
52 | open vue-waves/demo/index.html
53 |
54 | # Contributes
55 |
56 | ```
57 | $ npm i
58 | $ npm run build
59 | ```
60 |
--------------------------------------------------------------------------------
/demo/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | vue-waves
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 | {{ message }}
15 |
16 |
19 |
22 |
25 |
28 |
31 |
32 | 
33 |
34 |
![]()
204 | */
205 | var TagWrapper = {
206 |
207 | // Wrap tag so it can perform the effect
208 | input: function(element) {
209 |
210 | var parent = element.parentNode;
211 |
212 | // If input already have parent just pass through
213 | if (parent.tagName.toLowerCase() === 'i' && parent.classList.contains('waves-effect')) {
214 | return;
215 | }
216 |
217 | // Put element class and style to the specified parent
218 | var wrapper = document.createElement('i');
219 | wrapper.className = element.className + ' waves-input-wrapper';
220 | element.className = 'waves-button-input';
221 |
222 | // Put element as child
223 | parent.replaceChild(wrapper, element);
224 | wrapper.appendChild(element);
225 |
226 | // Apply element color and background color to wrapper
227 | var elementStyle = window.getComputedStyle(element, null);
228 | var color = elementStyle.color;
229 | var backgroundColor = elementStyle.backgroundColor;
230 |
231 | wrapper.setAttribute('style', 'color:' + color + ';background:' + backgroundColor);
232 | element.setAttribute('style', 'background-color:rgba(0,0,0,0);');
233 |
234 | },
235 |
236 | // Wrap ![]()
tag so it can perform the effect
237 | img: function(element) {
238 |
239 | var parent = element.parentNode;
240 |
241 | // If input already have parent just pass through
242 | if (parent.tagName.toLowerCase() === 'i' && parent.classList.contains('waves-effect')) {
243 | return;
244 | }
245 |
246 | // Put element as child
247 | var wrapper = document.createElement('i');
248 | parent.replaceChild(wrapper, element);
249 | wrapper.appendChild(element);
250 |
251 | }
252 | };
253 |
254 | /**
255 | * Hide the effect and remove the ripple. Must be
256 | * a separate function to pass the JSLint...
257 | */
258 | function removeRipple(e, el, ripple) {
259 |
260 | // Check if the ripple still exist
261 | if (!ripple) {
262 | return;
263 | }
264 |
265 | ripple.classList.remove('waves-rippling');
266 |
267 | var relativeX = ripple.getAttribute('data-x');
268 | var relativeY = ripple.getAttribute('data-y');
269 | var scale = ripple.getAttribute('data-scale');
270 | var translate = ripple.getAttribute('data-translate');
271 |
272 | // Get delay beetween mousedown and mouse leave
273 | var diff = Date.now() - Number(ripple.getAttribute('data-hold'));
274 | var delay = 350 - diff;
275 |
276 | if (delay < 0) {
277 | delay = 0;
278 | }
279 |
280 | if (e.type === 'mousemove') {
281 | delay = 150;
282 | }
283 |
284 | // Fade out ripple after delay
285 | var duration = e.type === 'mousemove' ? 2500 : Effect.duration;
286 |
287 | setTimeout(function() {
288 |
289 | var style = {
290 | top: relativeY + 'px',
291 | left: relativeX + 'px',
292 | opacity: '0',
293 |
294 | // Duration
295 | '-webkit-transition-duration': duration + 'ms',
296 | '-moz-transition-duration': duration + 'ms',
297 | '-o-transition-duration': duration + 'ms',
298 | 'transition-duration': duration + 'ms',
299 | '-webkit-transform': scale + ' ' + translate,
300 | '-moz-transform': scale + ' ' + translate,
301 | '-ms-transform': scale + ' ' + translate,
302 | '-o-transform': scale + ' ' + translate,
303 | 'transform': scale + ' ' + translate
304 | };
305 |
306 | ripple.setAttribute('style', convertStyle(style));
307 |
308 | setTimeout(function() {
309 | try {
310 | el.removeChild(ripple);
311 | } catch (e) {
312 | return false;
313 | }
314 | }, duration);
315 |
316 | }, delay);
317 | }
318 |
319 |
320 | /**
321 | * Disable mousedown event for 500ms during and after touch
322 | */
323 | var TouchHandler = {
324 |
325 | /* uses an integer rather than bool so there's no issues with
326 | * needing to clear timeouts if another touch event occurred
327 | * within the 500ms. Cannot mouseup between touchstart and
328 | * touchend, nor in the 500ms after touchend. */
329 | touches: 0,
330 |
331 | allowEvent: function(e) {
332 |
333 | var allow = true;
334 |
335 | if (/^(mousedown|mousemove)$/.test(e.type) && TouchHandler.touches) {
336 | allow = false;
337 | }
338 |
339 | return allow;
340 | },
341 | registerEvent: function(e) {
342 | var eType = e.type;
343 |
344 | if (eType === 'touchstart') {
345 |
346 | TouchHandler.touches += 1; // push
347 |
348 | } else if (/^(touchend|touchcancel)$/.test(eType)) {
349 |
350 | setTimeout(function() {
351 | if (TouchHandler.touches) {
352 | TouchHandler.touches -= 1; // pop after 500ms
353 | }
354 | }, 500);
355 |
356 | }
357 | }
358 | };
359 |
360 |
361 | /**
362 | * Delegated click handler for .waves-effect element.
363 | * returns null when .waves-effect element not in "click tree"
364 | */
365 | function getWavesEffectElement(e) {
366 |
367 | if (TouchHandler.allowEvent(e) === false) {
368 | return null;
369 | }
370 |
371 | var element = null;
372 | var target = e.target || e.srcElement;
373 |
374 | while (target.parentElement) {
375 | if ( (!(target instanceof SVGElement)) && target.classList.contains('waves-effect')) {
376 | element = target;
377 | break;
378 | }
379 | target = target.parentElement;
380 | }
381 |
382 | return element;
383 | }
384 |
385 | /**
386 | * Bubble the click and show effect if .waves-effect elem was found
387 | */
388 | function showEffect(e) {
389 |
390 | // Disable effect if element has "disabled" property on it
391 | // In some cases, the event is not triggered by the current element
392 | // if (e.target.getAttribute('disabled') !== null) {
393 | // return;
394 | // }
395 |
396 | var element = getWavesEffectElement(e);
397 |
398 | if (element !== null) {
399 |
400 | // Make it sure the element has either disabled property, disabled attribute or 'disabled' class
401 | if (element.disabled || element.getAttribute('disabled') || element.classList.contains('disabled')) {
402 | return;
403 | }
404 |
405 | TouchHandler.registerEvent(e);
406 |
407 | if (e.type === 'touchstart' && Effect.delay) {
408 |
409 | var hidden = false;
410 |
411 | var timer = setTimeout(function () {
412 | timer = null;
413 | Effect.show(e, element);
414 | }, Effect.delay);
415 |
416 | var hideEffect = function(hideEvent) {
417 |
418 | // if touch hasn't moved, and effect not yet started: start effect now
419 | if (timer) {
420 | clearTimeout(timer);
421 | timer = null;
422 | Effect.show(e, element);
423 | }
424 | if (!hidden) {
425 | hidden = true;
426 | Effect.hide(hideEvent, element);
427 | }
428 |
429 | removeListeners();
430 | };
431 |
432 | var touchMove = function(moveEvent) {
433 | if (timer) {
434 | clearTimeout(timer);
435 | timer = null;
436 | }
437 | hideEffect(moveEvent);
438 |
439 | removeListeners();
440 | };
441 |
442 | element.addEventListener('touchmove', touchMove, false);
443 | element.addEventListener('touchend', hideEffect, false);
444 | element.addEventListener('touchcancel', hideEffect, false);
445 |
446 | var removeListeners = function() {
447 | element.removeEventListener('touchmove', touchMove);
448 | element.removeEventListener('touchend', hideEffect);
449 | element.removeEventListener('touchcancel', hideEffect);
450 | };
451 | } else {
452 |
453 | Effect.show(e, element);
454 |
455 | if (isTouchAvailable) {
456 | element.addEventListener('touchend', Effect.hide, false);
457 | element.addEventListener('touchcancel', Effect.hide, false);
458 | }
459 |
460 | element.addEventListener('mouseup', Effect.hide, false);
461 | element.addEventListener('mouseleave', Effect.hide, false);
462 | }
463 | }
464 | }
465 |
466 | Waves.init = function(options) {
467 | var body = document.body;
468 |
469 | options = options || {};
470 |
471 | if ('duration' in options) {
472 | Effect.duration = options.duration;
473 | }
474 |
475 | if ('delay' in options) {
476 | Effect.delay = options.delay;
477 | }
478 |
479 | if (isTouchAvailable) {
480 | body.addEventListener('touchstart', showEffect, false);
481 | body.addEventListener('touchcancel', TouchHandler.registerEvent, false);
482 | body.addEventListener('touchend', TouchHandler.registerEvent, false);
483 | }
484 |
485 | body.addEventListener('mousedown', showEffect, false);
486 | };
487 |
488 |
489 | /**
490 | * Attach Waves to dynamically loaded inputs, or add .waves-effect and other
491 | * waves classes to a set of elements. Set drag to true if the ripple mouseover
492 | * or skimming effect should be applied to the elements.
493 | */
494 | Waves.attach = function(elements, classes) {
495 |
496 | elements = getWavesElements(elements);
497 |
498 | if (toString.call(classes) === '[object Array]') {
499 | classes = classes.join(' ');
500 | }
501 |
502 | classes = classes ? ' ' + classes : '';
503 |
504 | var element, tagName;
505 |
506 | for (var i = 0, len = elements.length; i < len; i++) {
507 |
508 | element = elements[i];
509 | tagName = element.tagName.toLowerCase();
510 |
511 | if (['input', 'img'].indexOf(tagName) !== -1) {
512 | TagWrapper[tagName](element);
513 | element = element.parentElement;
514 | }
515 |
516 | if (element.className.indexOf('waves-effect') === -1) {
517 | element.className += ' waves-effect' + classes;
518 | }
519 | }
520 | };
521 |
522 |
523 | /**
524 | * Cause a ripple to appear in an element via code.
525 | */
526 | Waves.ripple = function(elements, options) {
527 | elements = getWavesElements(elements);
528 | var elementsLen = elements.length;
529 |
530 | options = options || {};
531 | options.wait = options.wait || 0;
532 | options.position = options.position || null; // default = centre of element
533 |
534 |
535 | if (elementsLen) {
536 | var element, pos, off, centre = {}, i = 0;
537 | var mousedown = {
538 | type: 'mousedown',
539 | button: 1
540 | };
541 | var hideRipple = function(mouseup, element) {
542 | return function() {
543 | Effect.hide(mouseup, element);
544 | };
545 | };
546 |
547 | for (; i < elementsLen; i++) {
548 | element = elements[i];
549 | pos = options.position || {
550 | x: element.clientWidth / 2,
551 | y: element.clientHeight / 2
552 | };
553 |
554 | off = offset(element);
555 | centre.x = off.left + pos.x;
556 | centre.y = off.top + pos.y;
557 |
558 | mousedown.pageX = centre.x;
559 | mousedown.pageY = centre.y;
560 |
561 | Effect.show(mousedown, element);
562 |
563 | if (options.wait >= 0 && options.wait !== null) {
564 | var mouseup = {
565 | type: 'mouseup',
566 | button: 1
567 | };
568 |
569 | setTimeout(hideRipple(mouseup, element), options.wait);
570 | }
571 | }
572 | }
573 | };
574 |
575 | /**
576 | * Remove all ripples from an element.
577 | */
578 | Waves.calm = function(elements) {
579 | elements = getWavesElements(elements);
580 | var mouseup = {
581 | type: 'mouseup',
582 | button: 1
583 | };
584 |
585 | for (var i = 0, len = elements.length; i < len; i++) {
586 | Effect.hide(mouseup, elements[i]);
587 | }
588 | };
589 |
590 | /**
591 | * Deprecated API fallback
592 | */
593 | Waves.displayEffect = function(options) {
594 | console.error('Waves.displayEffect() has been deprecated and will be removed in future version. Please use Waves.init() to initialize Waves effect');
595 | Waves.init(options);
596 | };
597 |
598 | return Waves;
599 | });
600 |
--------------------------------------------------------------------------------
/webpack.config.babel.js:
--------------------------------------------------------------------------------
1 | export default {
2 | entry: './index.js',
3 | output: {
4 | path: __dirname + '/dist',
5 | filename: 'vue-waves.js',
6 | library: 'VueWaves',
7 | libraryTarget: 'umd',
8 | },
9 | module: {
10 | rules: [
11 | { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" },
12 | { test: /\.css$/, loader: "style-loader!css-loader" },
13 | ]
14 | }
15 | }
16 |
--------------------------------------------------------------------------------