fians / waves

Click effect inspired by Google's Material Design

Waves

Click effect inspired by Google's Material Design http://fian.my.id/Waves/

Documentation

Waves uses Situs to generate documentation. Here are some steps to run documentation locally on your computer:

1. Make sure Node.js and Ruby are installed in your computer.
2. Install SASS via RubyGems (gem install sass).
3. Install Situs globally via npm (npm install situs -g).
4. Clone Waves's Github repository, if you haven't already (git clone https://github.com/fians/Waves.git).
5. Run npm install to install the necessary local node packages.
6. Install grunt globally with npm install -g grunt-cli.
7. Run grunt to watch the directory, or simply grunt build to do a single build.
8. Now just start Situs server (situs server), then visit http://localhost:4000/ on your browser.

License

Waves is created by Alfiana Sibuea, and released under MIT license.

Copyright © 2014-2018 Alfiana E. Sibuea. All rights reserved.

waves's Issues

Button color issue.

In waves.min.css:

.waves-button, .waves-button-input, .waves-button:hover, .waves-button:link, .waves-button:visited {
...
  background: 0 0;
...
}

It's drop colors.
May be background-position: left top ?

Source files in bower

Hi, I was surprised when bower downloads only dist folder of the project.
Because I want to use scss files. Can you modify your bower.json?

Thanks for project!

"Sunk" input wrapper on Safari iOS 8 (iPad)

I don't have any real device to check it, But from iPad simulator, the <input> button look likes sinking.

Where to submit contributions?

If I want to send a patch/code who do I go to?

Click event in demo

It looks like it doesn't matter right now where someone clicks?
Unlike the google variant, when I click right, bottom on the header for instance, the effect still comes in from the left, top.

Is this intended behavior or should I try to improve on this? I was fooling around before with JSFiddle and was able to create something similar.. (http://jsfiddle.net/Jeffreyvdh/ewmnbLxc/ , please ignore the bad formatting and code, it's just a fiddle)

The Effect happen two times with touch device (iPhone 5s + Safari).

For some reason, the effect happen two times with touch device (iPhone 5s + Safari).

It works properly with Mac + Safari,Chrome, and Firefox.

Do you call to mind cause about this issue?

Conflict beetween mouseup and mouse right click.

There is a conflict beetween mouseup and right click action. If a link button clicked via right click, the Effect.action will be triggered. It will decrease user experience if user accidentally do right-clicking on .waves-button element.

Waves doesn't work with new version

Your new version with the touch-interaction fix isn't working. The waves effect isn't working on my page, but it does with your latest stable release. Code is just the simple example you gave on your own site, your new release just doesn't work on desktop.

Add Grunt support for development automation

Effect does not fade out.

Whenever you press on a button with Waves using BOTH your left mouse button and your right mouse button, it bugs and the effect does not go away. This only happens when you click both very very fast. Just try clicking using both mouse buttons for 2 seconds as fast as you can and look what happens with the element.

---

edit:
better yet, hold your left mouse button on a div with Waves, and then press right mouse button (while still holding left mouse button), and then release both buttons.. gets same effect.

how to fix:
i.addEventListener('mousedown', Effect.show, false);

change mousedown so it only works for left mouse button.

Rename files

Hi. Preferably all css and js files starting with a lowercase letter, so please rename them

Remove dependency on jQuery and document.ready event

It would be great if the dependency on jQuery and document.ready event are removed so it can be used in wider platforms apps. Great job, by the way!

IE8+ support

What about SASS support?

Stylus ?

Hi, maybe, add stylus support ?

Animation doesn't finish

Really wanted to use this on the tile images for my marketplace, fauna.net, but the animation would often not finish when started.

Don't work with <a href="xxx"> tag (I can't jump other page)

This plugin don't work with Firefox/Safari when I write like this. (I can't jump other page)
Button A

But it works with Chrome.

More browser support

Please tested in various modern browser and also the old one (IE)

cannot clone to local

Hi, When I try to clone to local dir using Github for Mac, it cannot find Waves.
Any idea..

regards
Gokhan

Double ripple on touch devices with delegated click

Clicking a button or notification on Snarl while using an iOS device (or simulator?) will produce one ripple on the touch event, and then one ripple on the delayed mouseup/click event, meaning it double-ripples with a 300ms delay.

This doesn't happen with Waves v0.5.5, so I'll see why it's happening with the delegated click handler and how to stop it. (Disabling mouse or ripple events after the first touch for the following 500ms would probably fix it? But I'll see if there's a cleaner way.)

I reckon using fastclick.js would also solve it and make pages/buttons feel faster on mobile, but I'll investigate the Waves code first.

Add waves.css to main in bower.json

Could you add waves.min.css in the main option in bower.json, this makes the flow of using tools such as wiredep much easier

Effect is buggy with touch events

Tested on Nexus 5 and with touch emulation in the browser.

The effect goes completely dark for a moment before the wave effect happens.

Add delegated mouse/touch handler because dynamically added .waves-effect doesn't work

If Snarl notifications have the .waves-effect class added to them, no event listener is bound to them, hence clicking them does not start the waves effect. Waves needs to be fully reloaded every time a dynamic element to be used with .waves-effect is added to the document (potentially causing duplicated event listeners).

I'm not sure what the best solution would be, is adding an addWavesListener function which takes the added element as a parameter a good way of [manually] adding the extra event listeners?

Minify

Also provide minified files, please

Make animation more fast

Sample site

Is it possible to add sample site into github repo? Sometimes we can lost the site or can't imagine what was the benefit of the source.

Disable Wave effect when you scroll (touch)

When you scroll down/up, the effect is call everytime you "click -> scroll" over the element. It is possible to disable the effect onScroll?

http://screencast-o-matic.com/u/VAds/waves

animation doesn't finish

the browser is webkit core ; android cell phone
my code is

<a href="tel:[phone]" class="waves-effect waves-button">click here</a>

when click this button, the browser default action is pop-up notice and will be stop the waves effect,

when trigger focus out event on this element, the waves effect will be continue to implement.

but when finish, this part of the text on the button will be covered , it's look like this

Waves does not work correctly on Windows computers with touchscreen + Chrome

Click effect - Ipad mini2 - Safari 7.1

"Click effect" always starts from the top left corner of the element, regardless of where the click. No errors in JS console.

Initializing with a custom class/id

Is it possible to initialize the plugin with a custom class? something like,

Waves.displayEffect('.my-custom-class');

Thanks

Support touch event for mobile support

Add waves to cdnjs

Would be nice to see Waves added to cdnjs (https://github.com/cdnjs/cdnjs)

v0.6.0 Beta Preview

v0.6.0-beta preview has been released, you can see it here http://fian.my.id/Waves/0.6.0-beta/.

I will test it using BrowserStack before make it generally available, and post the updates here. If you have time, feel free to test it in your device.

Don't work on Safari 5.1

Don't work on Safari 5.1.
Waves = undefined

Add button which has a side-effect on the demo page.

I'll add a button which has a side effect on the demo page (to demonstrate that JS clicks still work on the buttons). I'll see if I can use SweetAlert because it looks pretty nifty.

Auto generate SASS/SCSS file from LESS file

Let's figure how to programmatically generate SASS/SCSS file from LESS file on grunt build.

Fixed position parent element breaks waves effect

A <nav> position:fixed and bottom:0 causes the generated waves effect to be placed in the wrong location, and never slides in to create the effect. Position nav to the top, effects works.

404

As of 10:23 am Wednesday, 23 July 2014 (UTC) http://publicis-indonesia.github.io/Waves/ produces a github 404

svg error

First I want to note that this is my first issue report ever so don't be to harsh on me. But on to the good or in this case the bad stuff. Mainly, svgs seems to be, for no real reason targeted causing an

Uncaught TypeError: undefined is not a function

It doesn't seems like it would brake anything, just this annoying console message. Here you can see it in action http://codepen.io/anon/pen/MYEgaa open the console click on the div see nothing happening(except the wished ripple effect) but when you click on the svg you get an TypeError.

A second function doesn't get executed when combined with Waves

A second set of javascript doesn't get executed when combined with WavesJS.
Issue is only present in Firefox (33) and Opera (12.16).

So lets say I have this markup for my page

<div class="waves-effect waves-block section section-one">
    <p>Content</p>
</div>
<div class="waves-effect waves-block section section-two">
    <p>Content</p>
</div>
<div class="waves-effect waves-block section section-three">
    <p>Content</p>
</div>

    <script type="text/javascript">
        Waves.displayEffect();
    </script>

    <script type="text/javascript">
        // $sections = the divs that have .section class
        var $sections = $(".section");
        // On clicking a div
        $sections.click(function() {
            // $sectionOthers = Select all other sections other than clicked section
            var $sectionOthers = $sections.not(this);
            // Wait for 500ms (time taken for ripple effect to complete) before continuing
            setTimeout(function(){
                // doSomething
                $sectionOthers.css("background-color","red");
            },500);
        });
    </script>

The second block of JS doesn't get executed. The ripple effect completes but the second function is not called.
It works well with Chrome and mobile version of Chrome and Firefox (Android).
It also gets executed when done in this way.
left click -> right click -> left click (works)
right click -> left click (doesn't work)

Waves doesn't work on Chrome

Waves doesn't work on the site (http://fian.my.id/Waves). Using Chrome 39 on Windows 7.

Ripple not displaying in combination with bootstrap

Hi I like your work and i want to use it in my project. Unfortunately Bootstrap is messing things up. The ripple is hooked up correct, as i see that the dom is changing when i click on a icon or button. when i set a break point in Waves.js a glimp of the ripple is shown. so there is surely stuff going on. After i remove bootstrap all ripples work fine . So do you have a suggestion how i could use your lib and bootstrap together?

Thanks in advance.
alex

Using Waves in a Meteor package

Hi @fians,

I'm using Waves in this Meteor package: https://github.com/npvn/meteor-material-design

The package aims to provide Meteor developers an easy way to implement material components in their apps.

Could you please review the following files to see if you're ok with the license information?
https://github.com/npvn/meteor-material-design/blob/master/licenses/credits.md
https://github.com/npvn/meteor-material-design/blob/master/licenses/waves.md

If there's anything you want to change, please feel free to let me know.

Thank you for an awesome library!

Combine circle and box shadow

Hi,

Love the project, thanks for creating it!

I'm trying to create a circular button but one that also benefits from the box-shadow effect, but it seems impossible with the current library. Either the box shadow doesn't show up (because of the -webkit-mask-image) or if the latter is removed, the tap effect becomes a box and goes out of bounds of the circle.

Is there a way to combine this and achieve a true FAB, like the one seen here? http://www.polymer-project.org/components/paper-fab/demo.html.

Thank you.

Waves doesn't work correctly in Safari

Effect appears at the top left corner instead of where the click happened

Animation on svg icons just like on Font Awesome icons

typo in tutorial

http://publicis-indonesia.github.io/Waves/
At the Getting Started section, in the first example there are two unnecessary back-slashes

<script type="text/javascript" src="/path/to/waves.min.js"></script>

More 'material-ish' ripple effect

The ripple effect should be faster and fade out more naturally. Examples from Google: http://www.polymer-project.org/components/paper-button/demo.html

I found an implementation that looks very similar to Google's examples. However I'm not sure how to integrate the code into Waves: http://codepen.io/anon/pen/okIlh

Wrong sources in waves.min.js.map

Hi, /dist/waves.min.js.map points to sources":["../src/js/waves.js"] but the src directory is not available when installing via Bower.
Can you make it point to the waves file in the dist directory? sources":["waves.js"]

Thank you in advance.