ripple-js - npm Package Compare versions

Comparing version 1.2.1 to 1.3.0

changelog.txt

@@ -33,2 +33,12 @@ !========_ Version 1.1 _========!
 
-°Scrolling no longer gets disabled
+°Scrolling no longer gets disabled
+
+
+
+
+!========_ Version 1.3 _========!
+
+°Bug with wrong ripple position fixed
+°Performance improvements
+°Added the ripple-cancel-on-move attribute
+°You can unregister a ripple now by removing the ripple class

package.json

 {
   "name": "ripple-js",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "description": "A small library for ripple effects",
@@ -5,0 +5,0 @@ "main": "ripple.min.js",

README.md

@@ -26,2 +26,3 @@ # ripple-js
 * **ripple-leave-collapse-time**<br>Configure the time the ripple collapses in itselft when the user moves the touch / mousepress away from the element. <p>°The unit of measurement is seconds.<br>°_Example:_ `ripple-leave-collapse-time=".8"`<br>°_Default Value:_ `0.4`
+* **ripple-cancel-on-move**<br>If applied, the ripple cancels on the slightest touch movement. <br>°Normally the ripple gets canceled when the touch is being moved out of the container. With this attribute, the touch gets canceled on a touchmove or mousemove. This is especially great for when the container can be scrolled around by the user.
 
@@ -38,2 +39,6 @@ <br><br><br>
 ###Events
-* **ripple-button-click**<br>This event gets fired when a ripple is released<p>The only parametrer is `target`, which is the element that got clicked
+* **ripple-button-click**<br>This event gets fired when a ripple is released<p>The only parameter is `target`, which is the element that got clicked
+
+
+<br><br><br>
+To unregister an element, simply remove the `ripple` class.

ripple.js

@@ -7,3 +7,3 @@ //Written by Aaron Längert
         css.type = "text/css";
-        css.innerHTML = ".ripple { overflow: hidden; position: relative; } .ripple .rippleContainer { display: inline-block; height: 0px !important; width: 0px !important; padding: 0px 0px 0px 0px; border-radius: 50%; position: absolute; top: 0px; left: 0px; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); background-color: transparent; }  .ripple * {pointer-events: none;}";
+        css.innerHTML = ".ripple { overflow: hidden !important; position: relative; } .ripple .rippleContainer { display: block; height: 200px !important; width: 200px !important; padding: 0px 0px 0px 0px; border-radius: 50%; position: absolute !important; top: 0px; left: 0px; transform: translate(-50%, -50%) scale(0); -webkit-transform: translate(-50%, -50%) scale(0); -ms-transform: translate(-50%, -50%) scale(0); background-color: transparent; }  .ripple * {pointer-events: none !important;}";
         document.head.appendChild(css);
@@ -14,11 +14,10 @@ ripple.registerRipples();
         rippleContainer = getRippleContainer(e.target);
-        if (rippleContainer.getAttribute("animating") == "0" || !rippleContainer.hasAttribute("animating")) {
+        if ((rippleContainer.getAttribute("animating") == "0" || !rippleContainer.hasAttribute("animating")) && e.target.className.indexOf("ripple") > -1) {
             rippleContainer.setAttribute("animating", "1");
-            scroll = getScroll(e.target);
-            offsetX = typeof e.offsetX == "number" ? e.offsetX : e.touches[0].pageX - scroll.left;
-            offsetY = typeof e.offsetY == "number" ? e.offsetY : e.touches[0].pageY - scroll.top;
+            offsetX = typeof e.offsetX == "number" ? e.offsetX : e.touches[0].clientX - e.target.getBoundingClientRect().left;
+            offsetY = typeof e.offsetY == "number" ? e.offsetY : e.touches[0].clientY - e.target.getBoundingClientRect().top;
             //fullCoverRadius is the longest distance between the touch and the corners of the element where the event fired
             fullCoverRadius = Math.max(Math.sqrt(Math.pow(offsetX, 2) + Math.pow(offsetY, 2)), Math.sqrt(Math.pow(e.target.clientWidth - offsetX, 2) + Math.pow(e.target.clientHeight - offsetY, 2)), Math.sqrt(Math.pow(offsetX, 2) + Math.pow(e.target.clientHeight - offsetY, 2)), Math.sqrt(Math.pow(offsetY, 2) + Math.pow(e.target.clientWidth - offsetX, 2)));
             expandTime = e.target.getAttribute("ripple-press-expand-time") || 3;
-            rippleContainer.style.transition = "padding " + expandTime + "s ease-out, box-shadow 0.1s linear";
+            rippleContainer.style.transition = "transform " + expandTime + "s ease-out, box-shadow 0.1s linear";
             rippleContainer.style.background = e.target.getAttribute("ripple-color") || "white";
@@ -29,3 +28,3 @@ rippleContainer.style.opacity = e.target.getAttribute("ripple-opacity") || "0.6";
             rippleContainer.style.left = offsetX + "px";
-            rippleContainer.style.padding = fullCoverRadius + "px";
+            rippleContainer.style.transform = "translate(-50%, -50%) scale(" + fullCoverRadius / 100 + ")";
         }
@@ -37,10 +36,8 @@ }
             rippleContainer.setAttribute("animating", "2");
-            radius = window.getComputedStyle(rippleContainer, null).getPropertyValue("padding");
             background = window.getComputedStyle(rippleContainer, null).getPropertyValue("background");
             destinationRadius = e.target.clientWidth + e.target.clientHeight;
             rippleContainer.style.transition = "none";
-            rippleContainer.style.padding = radius;
             expandTime = e.target.getAttribute("ripple-release-expand-time") || .4;
-            rippleContainer.style.transition = "padding " + expandTime + "s linear, background " + expandTime + "s linear, opacity " + expandTime + "s ease-in-out";
-            rippleContainer.style.padding = destinationRadius + "px";
+            rippleContainer.style.transition = "transform " + expandTime + "s linear, background " + expandTime + "s linear, opacity " + expandTime + "s ease-in-out";
+            rippleContainer.style.transform = "translate(-50%, -50%) scale(" + destinationRadius / 100 + ")";
             rippleContainer.style.background = "radial-gradient(transparent 10%, " + background + " 40%)";
@@ -59,5 +56,5 @@ rippleContainer.style.opacity = "0";
             collapseTime = e.target.getAttribute("ripple-leave-collapse-time") || .4;
-            rippleContainer.style.transition = "padding " + collapseTime + "s linear, box-shadow " + collapseTime + "s linear";
+            rippleContainer.style.transition = "transform " + collapseTime + "s linear, box-shadow " + collapseTime + "s linear";
             rippleContainer.style.boxShadow = "none";
-            rippleContainer.style.padding = "0px";
+            rippleContainer.style.transform = "translate(-50%, -50%) scale(0)";
         }
@@ -77,14 +74,2 @@ }
     }
-    //calculates the top and left space of the document hidden due to scrolling
-    function getScroll(el) {
-        scroll = {
-            top: 0 + el.getBoundingClientRect().top,
-            left: 0 + el.getBoundingClientRect().left
-        };
-        do {
-            scroll.top += el.scrollTop || 0;
-            scroll.left += el.scrollLeft || 0;
-        } while (el = el.parentNode);
-        return scroll;
-    }
     var ripple = {
@@ -99,5 +84,7 @@ registerRipples: function() {
                 rippleButtons[i].addEventListener("touchmove", function(e) {
+                    if (e.target.hasAttribute("ripple-cancel-on-move")) {
+                        rippleRetrieve(e);
+                    }
                     try {
-                        scroll = getScroll(e.target);
-                        overEl = document.elementFromPoint(e.touches[0].pageX - scroll.left, e.touches[0].pageY - scroll.top).className.indexOf("ripple") >= 0;
+                        overEl = document.elementFromPoint(e.touches[0].clientX, e.touches[0].clientY).className.indexOf("ripple") >= 0;
                     } catch (err) {
@@ -119,2 +106,7 @@ overEl = false;
                 }, false);
+                rippleButtons[i].addEventListener("mousemove", function(e) {
+                    if (e.target.hasAttribute("ripple-cancel-on-move")) {
+                        rippleRetrieve(e);
+                    }
+                }, false);
                 rippleButtons[i].addEventListener("mouseleave", function(e) {
@@ -126,3 +118,3 @@ rippleRetrieve(e);
                         e.target.style.transition = "none";
-                        e.target.style.padding = "0px";
+                        e.target.style.transform = "translate(-50%, -50%) scale(0)";
                         e.target.style.boxShadow = "none";
@@ -129,0 +121,0 @@ e.target.setAttribute("animating", "0");

ripple.min.js

 //Written by Aaron Längert
-var ripple=function(){function t(t){rippleContainer=r(t.target),"0"!=rippleContainer.getAttribute("animating")&&rippleContainer.hasAttribute("animating")||(rippleContainer.setAttribute("animating","1"),scroll=a(t.target),offsetX="number"==typeof t.offsetX?t.offsetX:t.touches[0].pageX-scroll.left,offsetY="number"==typeof t.offsetY?t.offsetY:t.touches[0].pageY-scroll.top,fullCoverRadius=Math.max(Math.sqrt(Math.pow(offsetX,2)+Math.pow(offsetY,2)),Math.sqrt(Math.pow(t.target.clientWidth-offsetX,2)+Math.pow(t.target.clientHeight-offsetY,2)),Math.sqrt(Math.pow(offsetX,2)+Math.pow(t.target.clientHeight-offsetY,2)),Math.sqrt(Math.pow(offsetY,2)+Math.pow(t.target.clientWidth-offsetX,2))),expandTime=t.target.getAttribute("ripple-press-expand-time")||3,rippleContainer.style.transition="padding "+expandTime+"s ease-out, box-shadow 0.1s linear",rippleContainer.style.background=t.target.getAttribute("ripple-color")||"white",rippleContainer.style.opacity=t.target.getAttribute("ripple-opacity")||"0.6",rippleContainer.style.boxShadow=t.target.getAttribute("ripple-shadow")||"none",rippleContainer.style.top=offsetY+"px",rippleContainer.style.left=offsetX+"px",rippleContainer.style.padding=fullCoverRadius+"px")}function e(t){rippleContainer=r(t.target),"1"==rippleContainer.getAttribute("animating")&&(rippleContainer.setAttribute("animating","2"),radius=window.getComputedStyle(rippleContainer,null).getPropertyValue("padding"),background=window.getComputedStyle(rippleContainer,null).getPropertyValue("background"),destinationRadius=t.target.clientWidth+t.target.clientHeight,rippleContainer.style.transition="none",rippleContainer.style.padding=radius,expandTime=t.target.getAttribute("ripple-release-expand-time")||.4,rippleContainer.style.transition="padding "+expandTime+"s linear, background "+expandTime+"s linear, opacity "+expandTime+"s ease-in-out",rippleContainer.style.padding=destinationRadius+"px",rippleContainer.style.background="radial-gradient(transparent 10%, "+background+" 40%)",rippleContainer.style.opacity="0",t.target.dispatchEvent(new CustomEvent("ripple-button-click",{target:t.target})))}function n(t){rippleContainer=r(t.target),"1"==rippleContainer.getAttribute("animating")&&(rippleContainer.setAttribute("animating","3"),collapseTime=t.target.getAttribute("ripple-leave-collapse-time")||.4,rippleContainer.style.transition="padding "+collapseTime+"s linear, box-shadow "+collapseTime+"s linear",rippleContainer.style.boxShadow="none",rippleContainer.style.padding="0px")}function r(t){for(childs=t.childNodes,ii=0;ii<childs.length;ii++)try{if(childs[ii].className.indexOf("rippleContainer")>-1)return childs[ii]}catch(e){}return t}function a(t){scroll={top:0+t.getBoundingClientRect().top,left:0+t.getBoundingClientRect().left};do scroll.top+=t.scrollTop||0,scroll.left+=t.scrollLeft||0;while(t=t.parentNode);return scroll}window.addEventListener("load",function(){css=document.createElement("style"),css.type="text/css",css.innerHTML=".ripple { overflow: hidden; position: relative; } .ripple .rippleContainer { display: inline-block; height: 0px !important; width: 0px !important; padding: 0px 0px 0px 0px; border-radius: 50%; position: absolute; top: 0px; left: 0px; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); background-color: transparent; }  .ripple * {pointer-events: none;}",document.head.appendChild(css),o.registerRipples()});var o={registerRipples:function(){for(rippleButtons=document.getElementsByClassName("ripple"),i=0;i<rippleButtons.length;i++)rippleButtons[i].addEventListener("touchstart",function(e){t(e)},!1),rippleButtons[i].addEventListener("touchmove",function(t){try{scroll=a(t.target),overEl=document.elementFromPoint(t.touches[0].pageX-scroll.left,t.touches[0].pageY-scroll.top).className.indexOf("ripple")>=0}catch(e){overEl=!1}overEl||n(t)},!1),rippleButtons[i].addEventListener("touchend",function(t){e(t)},!1),rippleButtons[i].addEventListener("mousedown",function(e){t(e)},!1),rippleButtons[i].addEventListener("mouseup",function(t){e(t)},!1),rippleButtons[i].addEventListener("mouseleave",function(t){n(t)},!1),rippleButtons[i].addEventListener("transitionend",function(t){("2"==t.target.getAttribute("animating")||"3"==t.target.getAttribute("animating"))&&(t.target.style.transition="none",t.target.style.padding="0px",t.target.style.boxShadow="none",t.target.setAttribute("animating","0"))},!1),r(rippleButtons[i])==rippleButtons[i]&&(rippleButtons[i].innerHTML+='<div class="rippleContainer"></div>')}};return o}();
+var ripple=function(){function t(t){rippleContainer=r(t.target),("0"==rippleContainer.getAttribute("animating")||!rippleContainer.hasAttribute("animating"))&&t.target.className.indexOf("ripple")>-1&&(rippleContainer.setAttribute("animating","1"),offsetX="number"==typeof t.offsetX?t.offsetX:t.touches[0].clientX-t.target.getBoundingClientRect().left,offsetY="number"==typeof t.offsetY?t.offsetY:t.touches[0].clientY-t.target.getBoundingClientRect().top,fullCoverRadius=Math.max(Math.sqrt(Math.pow(offsetX,2)+Math.pow(offsetY,2)),Math.sqrt(Math.pow(t.target.clientWidth-offsetX,2)+Math.pow(t.target.clientHeight-offsetY,2)),Math.sqrt(Math.pow(offsetX,2)+Math.pow(t.target.clientHeight-offsetY,2)),Math.sqrt(Math.pow(offsetY,2)+Math.pow(t.target.clientWidth-offsetX,2))),expandTime=t.target.getAttribute("ripple-press-expand-time")||3,rippleContainer.style.transition="transform "+expandTime+"s ease-out, box-shadow 0.1s linear",rippleContainer.style.background=t.target.getAttribute("ripple-color")||"white",rippleContainer.style.opacity=t.target.getAttribute("ripple-opacity")||"0.6",rippleContainer.style.boxShadow=t.target.getAttribute("ripple-shadow")||"none",rippleContainer.style.top=offsetY+"px",rippleContainer.style.left=offsetX+"px",rippleContainer.style.transform="translate(-50%, -50%) scale("+fullCoverRadius/100+")")}function e(t){rippleContainer=r(t.target),"1"==rippleContainer.getAttribute("animating")&&(rippleContainer.setAttribute("animating","2"),background=window.getComputedStyle(rippleContainer,null).getPropertyValue("background"),destinationRadius=t.target.clientWidth+t.target.clientHeight,rippleContainer.style.transition="none",expandTime=t.target.getAttribute("ripple-release-expand-time")||.4,rippleContainer.style.transition="transform "+expandTime+"s linear, background "+expandTime+"s linear, opacity "+expandTime+"s ease-in-out",rippleContainer.style.transform="translate(-50%, -50%) scale("+destinationRadius/100+")",rippleContainer.style.background="radial-gradient(transparent 10%, "+background+" 40%)",rippleContainer.style.opacity="0",t.target.dispatchEvent(new CustomEvent("ripple-button-click",{target:t.target})))}function n(t){rippleContainer=r(t.target),"1"==rippleContainer.getAttribute("animating")&&(rippleContainer.setAttribute("animating","3"),collapseTime=t.target.getAttribute("ripple-leave-collapse-time")||.4,rippleContainer.style.transition="transform "+collapseTime+"s linear, box-shadow "+collapseTime+"s linear",rippleContainer.style.boxShadow="none",rippleContainer.style.transform="translate(-50%, -50%) scale(0)")}function r(t){for(childs=t.childNodes,ii=0;ii<childs.length;ii++)try{if(childs[ii].className.indexOf("rippleContainer")>-1)return childs[ii]}catch(e){}return t}window.addEventListener("load",function(){css=document.createElement("style"),css.type="text/css",css.innerHTML=".ripple { overflow: hidden !important; position: relative; } .ripple .rippleContainer { display: block; height: 200px !important; width: 200px !important; padding: 0px 0px 0px 0px; border-radius: 50%; position: absolute !important; top: 0px; left: 0px; transform: translate(-50%, -50%) scale(0); -webkit-transform: translate(-50%, -50%) scale(0); -ms-transform: translate(-50%, -50%) scale(0); background-color: transparent; }  .ripple * {pointer-events: none !important;}",document.head.appendChild(css),a.registerRipples()});var a={registerRipples:function(){for(rippleButtons=document.getElementsByClassName("ripple"),i=0;i<rippleButtons.length;i++)rippleButtons[i].addEventListener("touchstart",function(e){t(e)},!1),rippleButtons[i].addEventListener("touchmove",function(t){t.target.hasAttribute("ripple-cancel-on-move")&&n(t);try{overEl=document.elementFromPoint(t.touches[0].clientX,t.touches[0].clientY).className.indexOf("ripple")>=0}catch(e){overEl=!1}overEl||n(t)},!1),rippleButtons[i].addEventListener("touchend",function(t){e(t)},!1),rippleButtons[i].addEventListener("mousedown",function(e){t(e)},!1),rippleButtons[i].addEventListener("mouseup",function(t){e(t)},!1),rippleButtons[i].addEventListener("mousemove",function(t){t.target.hasAttribute("ripple-cancel-on-move")&&n(t)},!1),rippleButtons[i].addEventListener("mouseleave",function(t){n(t)},!1),rippleButtons[i].addEventListener("transitionend",function(t){("2"==t.target.getAttribute("animating")||"3"==t.target.getAttribute("animating"))&&(t.target.style.transition="none",t.target.style.transform="translate(-50%, -50%) scale(0)",t.target.style.boxShadow="none",t.target.setAttribute("animating","0"))},!1),r(rippleButtons[i])==rippleButtons[i]&&(rippleButtons[i].innerHTML+='<div class="rippleContainer"></div>')}};return a}();

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

140982

increased by0.53%

Number of lines in readme file

43

increased by13.16%

Worsened metrics

Lines of code

125

decreased by-6.02%

No dependency changes