fixed troubles with "non-click" on browsers different by Chrome, it has still lot of problems...

This commit is contained in:
FezVrasta 2014-09-30 10:07:59 +02:00
parent f786000407
commit 242b3eaf35
3 changed files with 18 additions and 17 deletions

View File

@ -1,4 +1,4 @@
/* Generated by less 1.7.0 */ /* Generated by less 1.7.5 */
.withripple { .withripple {
position: relative; position: relative;
} }
@ -21,17 +21,14 @@
border-radius: 100%; border-radius: 100%;
background-color: rgba(0, 0, 0, 0.05); background-color: rgba(0, 0, 0, 0.05);
-webkit-transform: scale(1); -webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1); transform: scale(1);
-webkit-transform-origin: 50%; -webkit-transform-origin: 50%;
-ms-transform-origin: 50%;
transform-origin: 50%; transform-origin: 50%;
opacity: 0; opacity: 0;
pointer-events: none;
} }
.ripple.ripple-on { .ripple.ripple-on {
-webkit-transition: opacity 0.15s ease-in 0s, -webkit-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s; -webkit-transition: opacity 0.15s ease-in 0s, -webkit-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
-ms-transition: opacity 0.15s ease-in 0s, -ms-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
-moz-transition: opacity 0.15s ease-in 0s, -moz-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s; transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
opacity: 1; opacity: 1;
} }

View File

@ -28,6 +28,7 @@
-ms-transform-origin: 50%; -ms-transform-origin: 50%;
transform-origin: 50%; transform-origin: 50%;
opacity: 0; opacity: 0;
pointer-events: none;
} }
.ripple.ripple-on { .ripple.ripple-on {
-webkit-transition: opacity 0.15s ease-in 0s, -webkit-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s; -webkit-transition: opacity 0.15s ease-in 0s, -webkit-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;

View File

@ -1,5 +1,6 @@
/* Copyright 2014+, Federico Zivolo, LICENSE at https://github.com/FezVrasta/bootstrap-material-design/blob/master/LICENSE.md */ /* Copyright 2014+, Federico Zivolo, LICENSE at https://github.com/FezVrasta/bootstrap-material-design/blob/master/LICENSE.md */
/* globals CustomEvent, navigator */ /* globals CustomEvent */
var ripples = { var ripples = {
init : function(withRipple) { init : function(withRipple) {
"use strict"; "use strict";
@ -28,7 +29,7 @@ var ripples = {
var rippleStart = function(e, target) { var rippleStart = function(e, target) {
// Init variables // Init variables
var $rippleWrapper = (matchesSelector(target, ".ripple-wrapper")) ? target : target.parentNode, var $rippleWrapper = target,
$el = $rippleWrapper.parentNode, $el = $rippleWrapper.parentNode,
$ripple = document.createElement("div"), $ripple = document.createElement("div"),
elPos = $el.getBoundingClientRect(), elPos = $el.getBoundingClientRect(),
@ -37,6 +38,8 @@ var ripples = {
rippleEnd = new CustomEvent("rippleEnd", {detail: $ripple}), rippleEnd = new CustomEvent("rippleEnd", {detail: $ripple}),
refreshElementStyle; refreshElementStyle;
$ripplecache = $ripple;
// Set ripple class // Set ripple class
$ripple.className = "ripple"; $ripple.className = "ripple";
@ -56,11 +59,6 @@ var ripples = {
$ripple.className = "ripple ripple-on"; $ripple.className = "ripple ripple-on";
$ripple.setAttribute("style", $ripple.getAttribute("style") + ["-ms-" + scale,"-moz-" + scale,"-webkit-" + scale,scale].join(";")); $ripple.setAttribute("style", $ripple.getAttribute("style") + ["-ms-" + scale,"-moz-" + scale,"-webkit-" + scale,scale].join(";"));
// Dirty fix for Firefox... seems like absolute elements inside <A> tags do not trigger the "click" event
if (/firefox|crios|(^(?!.*chrome).*safari)|ip(ad|hone|od)/i.test(navigator.userAgent)) {
$el.click();
}
// This function is called when the animation is finished // This function is called when the animation is finished
setTimeout(function() { setTimeout(function() {
@ -73,6 +71,7 @@ var ripples = {
}; };
var rippleOut = function($ripple) { var rippleOut = function($ripple) {
console.log($ripple);
// Clear previous animation // Clear previous animation
$ripple.className = "ripple ripple-on ripple-out"; $ripple.className = "ripple ripple-on ripple-out";
@ -99,25 +98,29 @@ var ripples = {
var $rippleWrapper = document.createElement("div"); var $rippleWrapper = document.createElement("div");
$rippleWrapper.className = "ripple-wrapper"; $rippleWrapper.className = "ripple-wrapper";
target.appendChild($rippleWrapper); target.appendChild($rippleWrapper);
rippleStart(e, $rippleWrapper);
} }
}; };
var $ripplecache;
// Events handler // Events handler
// init RippleJS and start ripple effect on mousedown // init RippleJS and start ripple effect on mousedown
bind("mousedown", withRipple, rippleInit); bind("mouseover", withRipple, rippleInit);
console.log(withRipple);
// start ripple effect on mousedown // start ripple effect on mousedown
bind("mousedown", ".ripple-wrapper, .ripple-wrapper .ripple", rippleStart); bind("mousedown", ".ripple-wrapper", rippleStart);
// if animation ends and user is not holding mouse then destroy the ripple // if animation ends and user is not holding mouse then destroy the ripple
bind("rippleEnd", ".ripple-wrapper, .ripple-wrapper .ripple", function(e, $ripple) { bind("rippleEnd", ".ripple-wrapper .ripple", function(e, $ripple) {
if (!mouseDown) { if (!mouseDown) {
rippleOut($ripple); rippleOut($ripple);
} }
}); });
// Destroy ripple when mouse is not holded anymore if the ripple still exists // Destroy ripple when mouse is not holded anymore if the ripple still exists
bind("mouseup", ".ripple-wrapper, .ripple-wrapper .ripple", function(e, $ripple) { bind("mouseup", ".ripple-wrapper", function() {
var $ripple = $ripplecache;
if ($ripple.dataset.animating != 1) { if ($ripple.dataset.animating != 1) {
rippleOut($ripple); rippleOut($ripple);
} }