ripple-js - npm Package Compare versions

Comparing version 1.1.2 to 1.2.0

package.json

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

README.md

 # ripple-js
 **A small Javascript library for ripple effects**
 
-<br><br><br><br>
+<br><br>
 
-###Demo
-**View a demo [here](http://sirbaaron.github.io/ripple-js/demo/)**
+####View a demo [here](http://sirbaaron.github.io/ripple-js/demo/)
 
@@ -14,2 +13,4 @@ <br><br><br>
 * **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.
+ 
+**Then simply add the class ripple to elements**
 
@@ -16,0 +17,0 @@ <br><br><br>

ripple.js

@@ -5,3 +5,6 @@ //Written by Aaron Längert
         //add stylesheet at finished load
-        document.head.innerHTML += '<style type="text/css">.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;}</style>';
+        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);
         ripple.registerRipples();
@@ -13,2 +16,3 @@ });
             rippleContainer.setAttribute("animating", "1");
+            document.styleSheets[0].insertRule("body, body * {overflow: hidden}", 0);
             scroll = getScroll(e.target);
@@ -33,2 +37,3 @@ offsetX = typeof e.offsetX == "number" ? e.offsetX : e.touches[0].pageX - scroll.left;
             rippleContainer.setAttribute("animating", "2");
+            document.styleSheets[0].deleteRule(0);
             radius = window.getComputedStyle(rippleContainer, null).getPropertyValue("padding");
@@ -54,2 +59,3 @@ background = window.getComputedStyle(rippleContainer, null).getPropertyValue("background");
             rippleContainer.setAttribute("animating", "3");
+            document.styleSheets[0].deleteRule(0);
             collapseTime = e.target.getAttribute("ripple-leave-collapse-time") || .4;
@@ -56,0 +62,0 @@ rippleContainer.style.transition = "padding " + collapseTime + "s linear, box-shadow " + collapseTime + "s linear";

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(){document.head.innerHTML+='<style type="text/css">.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;}</style>',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")||(rippleContainer.setAttribute("animating","1"),document.styleSheets[0].insertRule("body, body * {overflow: hidden}",0),scroll=o(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"),document.styleSheets[0].deleteRule(0),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"),document.styleSheets[0].deleteRule(0),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 o(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),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){try{scroll=o(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 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

140493

increased by0.71%

Number of package files

9

increased by12.5%

Lines of code

136

increased by4.62%

Number of lines in readme file

38

increased by2.7%

No dependency changes