mirror of
				https://github.com/mdbootstrap/mdb-ui-kit.git
				synced 2025-10-31 16:07:53 +03:00 
			
		
		
		
	fixed troubles with "non-click" on browsers different by Chrome, it has still lot of problems...
This commit is contained in:
		
							parent
							
								
									d6b15454b2
								
							
						
					
					
						commit
						bc58c96dec
					
				|  | @ -1,4 +1,4 @@ | |||
| /* Generated by less 1.7.0 */ | ||||
| /* Generated by less 1.7.5 */ | ||||
| .withripple { | ||||
|   position: relative; | ||||
| } | ||||
|  | @ -21,17 +21,14 @@ | |||
|   border-radius: 100%; | ||||
|   background-color: rgba(0, 0, 0, 0.05); | ||||
|   -webkit-transform: scale(1); | ||||
|   -ms-transform: scale(1); | ||||
|   transform: scale(1); | ||||
|   -webkit-transform-origin: 50%; | ||||
|   -ms-transform-origin: 50%; | ||||
|   transform-origin: 50%; | ||||
|   opacity: 0; | ||||
|   pointer-events: none; | ||||
| } | ||||
| .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; | ||||
|   -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; | ||||
|   opacity: 1; | ||||
| } | ||||
|  |  | |||
|  | @ -28,6 +28,7 @@ | |||
|     -ms-transform-origin: 50%; | ||||
|     transform-origin: 50%; | ||||
|     opacity: 0; | ||||
|     pointer-events: none; | ||||
| } | ||||
| .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; | ||||
|  |  | |||
|  | @ -1,5 +1,6 @@ | |||
| /* Copyright 2014+, Federico Zivolo, LICENSE at https://github.com/FezVrasta/bootstrap-material-design/blob/master/LICENSE.md */ | ||||
| /* globals CustomEvent, navigator */ | ||||
| /* globals CustomEvent */ | ||||
| 
 | ||||
| var ripples = { | ||||
|     init : function(withRipple) { | ||||
|         "use strict"; | ||||
|  | @ -28,7 +29,7 @@ var ripples = { | |||
|         var rippleStart = function(e, target) { | ||||
| 
 | ||||
|             // Init variables
 | ||||
|             var $rippleWrapper  = (matchesSelector(target, ".ripple-wrapper")) ? target : target.parentNode, | ||||
|             var $rippleWrapper  = target, | ||||
|                 $el             = $rippleWrapper.parentNode, | ||||
|                 $ripple         = document.createElement("div"), | ||||
|                 elPos           = $el.getBoundingClientRect(), | ||||
|  | @ -37,6 +38,8 @@ var ripples = { | |||
|                 rippleEnd       = new CustomEvent("rippleEnd", {detail: $ripple}), | ||||
|                 refreshElementStyle; | ||||
| 
 | ||||
|             $ripplecache = $ripple; | ||||
| 
 | ||||
|             // Set ripple class
 | ||||
|             $ripple.className = "ripple"; | ||||
| 
 | ||||
|  | @ -56,11 +59,6 @@ var ripples = { | |||
|             $ripple.className = "ripple ripple-on"; | ||||
|             $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
 | ||||
|             setTimeout(function() { | ||||
| 
 | ||||
|  | @ -73,6 +71,7 @@ var ripples = { | |||
|         }; | ||||
| 
 | ||||
|         var rippleOut = function($ripple) { | ||||
|             console.log($ripple); | ||||
|             // Clear previous animation
 | ||||
|             $ripple.className = "ripple ripple-on ripple-out"; | ||||
| 
 | ||||
|  | @ -99,25 +98,29 @@ var ripples = { | |||
|                 var $rippleWrapper = document.createElement("div"); | ||||
|                 $rippleWrapper.className = "ripple-wrapper"; | ||||
|                 target.appendChild($rippleWrapper); | ||||
|                 rippleStart(e, $rippleWrapper); | ||||
|             } | ||||
| 
 | ||||
|         }; | ||||
| 
 | ||||
| 
 | ||||
|         var $ripplecache; | ||||
| 
 | ||||
|         // Events handler
 | ||||
|         // init RippleJS and start ripple effect on mousedown
 | ||||
|         bind("mousedown", withRipple, rippleInit); | ||||
|         bind("mouseover", withRipple, rippleInit); | ||||
| 
 | ||||
|         console.log(withRipple); | ||||
|         // 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
 | ||||
|         bind("rippleEnd", ".ripple-wrapper, .ripple-wrapper .ripple", function(e, $ripple) { | ||||
|         bind("rippleEnd", ".ripple-wrapper .ripple", function(e, $ripple) { | ||||
|             if (!mouseDown) { | ||||
|                 rippleOut($ripple); | ||||
|             } | ||||
|         }); | ||||
|         // 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) { | ||||
|                 rippleOut($ripple); | ||||
|             } | ||||
|  |  | |||
		Loading…
	
		Reference in New Issue
	
	Block a user