mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2025-01-31 11:54:15 +03:00
fixed troubles with "non-click" on browsers different by Chrome, it has still lot of problems...
This commit is contained in:
parent
f786000407
commit
242b3eaf35
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user