ripple-js - npm Package Compare versions

Comparing version 1.3.1 to 1.4.0

changelog.txt

@@ -1,2 +0,2 @@
-!========_ Version 1.1 _========!
+!========_ Version 1.1.0 _========!
 
@@ -23,3 +23,3 @@ °Fixed the position of the ripple when the document is scrolled
 
-!========_ Version 1.2 _========!
+!========_ Version 1.2.0 _========!
 
@@ -39,3 +39,3 @@ °Scrolling now gets disabled while a ripple element is being pressed
 
-!========_ Version 1.3 _========!
+!========_ Version 1.3.0 _========!
 
@@ -52,2 +52,11 @@ °Bug with wrong ripple position fixed
 
-°Bug where ripples would not start fixed
+°Bug where ripples would not start fixed
+
+
+
+
+!========_ Version 1.4.0 _========!
+
+°Added the function ripple(). Call it to start a ripple without user input
+°Bug where ripple with the ripple-cancel-on-move attribute would cancel automatically fixed
+°Changed Readme a bit

package.json

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

README.md

@@ -11,4 +11,4 @@ # ripple-js
 ### Setup
-* **With npm:**<p>1. At the root of your index, type `npm install ripple-js` into the command line.<br>2. Add the tag `<script src="node_modules/ripple-js/ripple.min.js"></script>` to your index file.
-* **As Download:**<p>1. Download the project as zip from github.<br>2. Extract the file and move the folder to your project.<br>3. Add the tag `script src="ripple-js-master/ripple-js-master/ripple.min.js"></script>` to your index file.
+**With npm:**<p>1. At the root of your index, type `npm install ripple-js` into the command line.<br>2. Add the tag `<script src="node_modules/ripple-js/ripple.min.js"></script>` to your index file.
+
  
@@ -31,3 +31,4 @@ **Then simply add the class ripple to elements**
 ###Methods
-* **registerRipples**<br>Call this method to register ripple elements afterwards <p>°If you add ripple elements after the document has loaded, you then need to call this function. The function gets called auomatically on initial load.<br>°_Example:_ 
+
+* **registerRipples()**<br>Call this method to register ripple elements afterwards <p>°If you add ripple elements after the document has loaded, you then need to call this function. The function gets called auomatically on initial load.<br>°_Example:_ 
 ```
@@ -37,5 +38,7 @@ document.body.innerHTML += '<div class="ripple">Added Afterwards</div>';
 ```
+* **ripple(element)**<br>With this function you can trigger a ripple programatically.<p>°The only argument it takes is the element you want to start the ripple at. This element needs to have been registered before!<br>°The ripple starts at the center of the element. This function is useful when you want to click an element based on key presses.<br>°_Example:_ `ripple.ripple(document.getElementById("someEl"));`
 
 <br><br><br>
 ###Events
+
 * **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
@@ -45,2 +48,2 @@
 <br><br><br>
-To unregister an element, simply remove the `ripple` class.
+Tip: To unregister an element, simply remove the `ripple` class.

ripple.js

@@ -11,2 +11,3 @@ //Written by Aaron Längert
     });
+
     function rippleStart(e) {
@@ -30,2 +31,3 @@ rippleContainer = getRippleContainer(e.target);
     }
+
     function rippleEnd(e) {
@@ -49,2 +51,3 @@ rippleContainer = getRippleContainer(e.target);
     }
+
     function rippleRetrieve(e) {
@@ -86,2 +89,3 @@ rippleContainer = getRippleContainer(e.target);
                         rippleRetrieve(e);
+                        return
                     }
@@ -107,3 +111,3 @@ try {
                 rippleButtons[i].addEventListener("mousemove", function(e) {
-                    if (e.target.hasAttribute("ripple-cancel-on-move")) {
+                    if (e.target.hasAttribute("ripple-cancel-on-move") && (e.movementX != 0 || e.movementY != 0)) {
                         rippleRetrieve(e);
@@ -128,5 +132,18 @@ }
             }
+        },
+        ripple: function(el) {
+            if (el.className.indexOf("ripple") < 0) {
+                return;
+            }
+            rect = el.getBoundingClientRect();
+            e = {
+                target: el,
+                offsetX: rect.width / 2,
+                offsetY: rect.height / 2
+            }
+            rippleStart(e);
+            rippleEnd(e);
         }
     };
     return ripple;
-}();
+}();

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"))&&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),"translate(-50%, -50%) scale(0)"==rippleContainer.style.transform&&rippleContainer.setAttribute("animating","0"),"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}();
+var ripple=function(){function t(t){rippleContainer=a(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 n(t){rippleContainer=a(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 r(t){rippleContainer=a(t.target),"translate(-50%, -50%) scale(0)"==rippleContainer.style.transform&&rippleContainer.setAttribute("animating","0"),"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 a(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),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){if(t.target.hasAttribute("ripple-cancel-on-move"))return void r(t);try{overEl=document.elementFromPoint(t.touches[0].clientX,t.touches[0].clientY).className.indexOf("ripple")>=0}catch(e){overEl=!1}overEl||r(t)},!1),rippleButtons[i].addEventListener("touchend",function(t){n(t)},!1),rippleButtons[i].addEventListener("mousedown",function(e){t(e)},!1),rippleButtons[i].addEventListener("mouseup",function(t){n(t)},!1),rippleButtons[i].addEventListener("mousemove",function(t){!t.target.hasAttribute("ripple-cancel-on-move")||0==t.movementX&&0==t.movementY||r(t)},!1),rippleButtons[i].addEventListener("mouseleave",function(t){r(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),a(rippleButtons[i])==rippleButtons[i]&&(rippleButtons[i].innerHTML+='<div class="rippleContainer"></div>')},ripple:function(i){i.className.indexOf("ripple")<0||(rect=i.getBoundingClientRect(),e={target:i,offsetX:rect.width/2,offsetY:rect.height/2},t(e),n(e))}};return o}();

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

142434

increased by0.78%

Lines of code

143

increased by11.72%

Number of lines in readme file

46

increased by6.98%

No dependency changes