DS-4122 by maikelkoopman: update waves plugin, remove old plugins

assets/css/button.css

@@ -182,7 +182,6 @@ fieldset[disabled] .btn-flat.focus {
 
 .btn-flat:hover, .btn-flat:focus,
 .open .dropdown-toggle .btn-flat {
-  background-color: rgba(0, 0, 0, 0.12);
   border-color: transparent;
   color: #29abe2;
   fill: #1a8dbe;

assets/css/waves.css

-.waves-effect {
-  overflow: hidden;
-  z-index: 1;
-  will-change: opacity,transform;
-  -webkit-tap-highlight-color: transparent;
-  position: relative;
-}
-
-.waves-effect .waves-ripple {
-  position: absolute;
-  border-radius: 50%;
-  width: 20px;
-  height: 20px;
-  margin-top: -10px;
-  margin-left: -10px;
-  opacity: 0;
-  background: rgba(0, 0, 0, 0.2);
-  -webkit-transition: all 0.7s ease-out;
-  transition: all 0.7s ease-out;
-  -webkit-transition-property: opacity, -webkit-transform;
-  transition-property: opacity, -webkit-transform;
-  transition-property: transform, opacity;
-  transition-property: transform, opacity, -webkit-transform;
-  -webkit-transform: scale(0);
-          transform: scale(0);
-  pointer-events: none;
-}
-
-.waves-effect.waves-light .waves-ripple {
-  background-color: rgba(255, 255, 255, 0.45);
-}
-
-.waves-effect.waves-gray .waves-ripple {
-  background-color: rgba(0, 0, 0, 0.15);
-}
-
 .waves-effect input[type="button"], .waves-effect input[type="reset"], .waves-effect input[type="submit"] {
   background: none;
   border: 0;
@@ -48,15 +12,11 @@
   z-index: -1;
 }
 
-.waves-notransition {
-  -webkit-transition: none !important;
-  transition: none !important;
+.waves-effect.waves-classic .waves-ripple {
+  background-color: rgba(0, 0, 0, 0.15);
 }
 
 .waves-circle {
-  -webkit-transform: translateZ(0);
-          transform: translateZ(0);
-  -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
   text-align: center;
   -webkit-mask-image: none;
   border-width: 0;
@@ -64,19 +24,13 @@
 
 .waves-input-wrapper {
   border-radius: 10px;
-  vertical-align: bottom;
-}
-
-.waves-input-wrapper .waves-button-input {
-  position: relative;
-  padding: 0;
-  top: 0;
-  left: 0;
-  z-index: 1;
 }
 
-.waves-block {
-  display: block;
+.waves-btn {
+  -webkit-transform: translateZ(0);
+          transform: translateZ(0);
+  -webkit-mask-image: none;
+  border-radius: 10px;
 }
 
 a.waves-effect .waves-ripple {

assets/js/waves.min.js

-!function(t){"use strict";function e(t){return null!==t&&t===t.window}function n(t){return e(t)?t:9===t.nodeType&&t.defaultView}function a(t){var e,a,i={top:0,left:0},o=t&&t.ownerDocument;return e=o.documentElement,"undefined"!=typeof t.getBoundingClientRect&&(i=t.getBoundingClientRect()),a=n(o),{top:i.top+a.pageYOffset-e.clientTop,left:i.left+a.pageXOffset-e.clientLeft}}function i(t){var e="";for(var n in t)t.hasOwnProperty(n)&&(e+=n+":"+t[n]+";");return e}function o(t){if(d.allowEvent(t)===!1)return null;for(var e=null,n=t.target||t.srcElement;null!==n.parentElement;){if(!(n instanceof SVGElement||n.className.indexOf("waves-effect")===-1)){e=n;break}if(n.classList.contains("waves-effect")){e=n;break}n=n.parentElement}return e}function r(e){var n=o(e);null!==n&&(c.show(e,n),"ontouchstart"in t&&(n.addEventListener("touchend",c.hide,!1),n.addEventListener("touchcancel",c.hide,!1)),n.addEventListener("mouseup",c.hide,!1),n.addEventListener("mouseleave",c.hide,!1))}var s=s||{},u=document.querySelectorAll.bind(document),c={duration:750,show:function(t,e){if(2===t.button)return!1;var n=e||this,o=document.createElement("div");o.className="waves-ripple",n.appendChild(o);var r=a(n),s=t.pageY-r.top,u=t.pageX-r.left,d="scale("+n.clientWidth/100*10+")";"touches"in t&&(s=t.touches[0].pageY-r.top,u=t.touches[0].pageX-r.left),o.setAttribute("data-hold",Date.now()),o.setAttribute("data-scale",d),o.setAttribute("data-x",u),o.setAttribute("data-y",s);var l={top:s+"px",left:u+"px"};o.className=o.className+" waves-notransition",o.setAttribute("style",i(l)),o.className=o.className.replace("waves-notransition",""),l["-webkit-transform"]=d,l["-moz-transform"]=d,l["-ms-transform"]=d,l["-o-transform"]=d,l.transform=d,l.opacity="1",l["-webkit-transition-duration"]=c.duration+"ms",l["-moz-transition-duration"]=c.duration+"ms",l["-o-transition-duration"]=c.duration+"ms",l["transition-duration"]=c.duration+"ms",l["-webkit-transition-timing-function"]="cubic-bezier(0.250, 0.460, 0.450, 0.940)",l["-moz-transition-timing-function"]="cubic-bezier(0.250, 0.460, 0.450, 0.940)",l["-o-transition-timing-function"]="cubic-bezier(0.250, 0.460, 0.450, 0.940)",l["transition-timing-function"]="cubic-bezier(0.250, 0.460, 0.450, 0.940)",o.setAttribute("style",i(l))},hide:function(t){d.touchup(t);var e=this,n=(1.4*e.clientWidth,null),a=e.getElementsByClassName("waves-ripple");if(!(a.length>0))return!1;n=a[a.length-1];var o=n.getAttribute("data-x"),r=n.getAttribute("data-y"),s=n.getAttribute("data-scale"),u=Date.now()-Number(n.getAttribute("data-hold")),l=350-u;l<0&&(l=0),setTimeout(function(){var t={top:r+"px",left:o+"px",opacity:"0","-webkit-transition-duration":c.duration+"ms","-moz-transition-duration":c.duration+"ms","-o-transition-duration":c.duration+"ms","transition-duration":c.duration+"ms","-webkit-transform":s,"-moz-transform":s,"-ms-transform":s,"-o-transform":s,transform:s};n.setAttribute("style",i(t)),setTimeout(function(){try{e.removeChild(n)}catch(t){return!1}},c.duration)},l)},wrapInput:function(t){for(var e=0;e<t.length;e++){var n=t[e];if("input"===n.tagName.toLowerCase()){var a=n.parentNode;if("i"===a.tagName.toLowerCase()&&a.className.indexOf("waves-effect")!==-1)continue;var i=document.createElement("i");i.className=n.className+" waves-input-wrapper";var o=n.getAttribute("style");o||(o=""),i.setAttribute("style",o),n.className="waves-button-input",n.removeAttribute("style"),a.replaceChild(i,n),i.appendChild(n)}}}},d={touches:0,allowEvent:function(t){var e=!0;return"touchstart"===t.type?d.touches+=1:"touchend"===t.type||"touchcancel"===t.type?setTimeout(function(){d.touches>0&&(d.touches-=1)},500):"mousedown"===t.type&&d.touches>0&&(e=!1),e},touchup:function(t){d.allowEvent(t)}};s.displayEffect=function(e){e=e||{},"duration"in e&&(c.duration=e.duration),c.wrapInput(u(".waves-effect")),"ontouchstart"in t&&document.body.addEventListener("touchstart",r,!1),document.body.addEventListener("mousedown",r,!1)},s.attach=function(e){"input"===e.tagName.toLowerCase()&&(c.wrapInput([e]),e=e.parentElement),"ontouchstart"in t&&e.addEventListener("touchstart",r,!1),e.addEventListener("mousedown",r,!1)},t.Waves=s,document.addEventListener("DOMContentLoaded",function(){s.displayEffect()},!1)}(window);
\ No newline at end of file
+!function(t){Drupal.behaviors.initWaves={attach:function(t,n){if("undefined"!=typeof Waves){Waves.attach(".btn-default:not(.btn-icon):not(.btn-float)",["waves-btn"]),Waves.attach(".btn-flat:not(.btn-icon):not(.btn-float)",["waves-btn"]),Waves.attach(".btn-primary:not(.btn-icon):not(.btn-float)",["waves-btn","waves-light"]),Waves.attach(".btn-secondary:not(.btn-icon):not(.btn-float)",["waves-btn","waves-light"]),Waves.attach(".btn-accent:not(.btn-icon):not(.btn-float)",["waves-btn","waves-light"]),Waves.attach(".btn-icon-toggle, .btn-float");var a={duration:750,delay:200};Waves.init(a)}}}}(jQuery);
\ No newline at end of file

components/02-atoms/button/button.scss

@@ -99,7 +99,6 @@
   &:hover,
   &:focus,
   .open .dropdown-toggle & {
-    background-color: rgba(0, 0, 0, 0.12);
     border-color: transparent;
     color: $brand-primary;
     fill: darken($brand-primary, 10%);

components/02-atoms/waves/waves.js

@@ -3,21 +3,33 @@
   Drupal.behaviors.initWaves = {
     attach: function (context, settings) {
 
-      var config = {
-        // How long Waves effect duration
-        // when it's clicked (in milliseconds)
-        duration: 750,
+      if(typeof(Waves) !== 'undefined'){
 
-        // Delay showing Waves effect on touch
-        // and hide the effect if user scrolls
-        // (0 to disable delay) (in milliseconds)
-        delay: 200
-      };
+        Waves.attach('.btn-default:not(.btn-icon):not(.btn-float)', ['waves-btn']);
+        Waves.attach('.btn-flat:not(.btn-icon):not(.btn-float)', ['waves-btn']);
+        Waves.attach('.btn-primary:not(.btn-icon):not(.btn-float)', ['waves-btn', 'waves-light']);
+        Waves.attach('.btn-secondary:not(.btn-icon):not(.btn-float)', ['waves-btn', 'waves-light']);
+        Waves.attach('.btn-accent:not(.btn-icon):not(.btn-float)', ['waves-btn', 'waves-light']);
+        Waves.attach('.btn-icon-toggle, .btn-float');
 
-      // Initialise Waves with the config
-      Waves.init(config);
+        var config = {
+          // How long Waves effect duration
+          // when it's clicked (in milliseconds)
+          duration: 750,
+
+          // Delay showing Waves effect on touch
+          // and hide the effect if user scrolls
+          // (0 to disable delay) (in milliseconds)
+          delay: 200
+        };
+
+        // Initialise Waves with the config
+        Waves.init(config);
+
+      }
 
     }
+
   }
 
-})(jQuery);
\ No newline at end of file
+})(jQuery);

components/02-atoms/waves/waves.scss

 @import 'settings';
 
 .waves-effect {
-  overflow: hidden;
-  z-index: 1;
-  will-change: opacity,transform;
-  -webkit-tap-highlight-color: transparent;
-  position: relative;
-
-  .waves-ripple {
-    position: absolute;
-    border-radius: 50%;
-    width: 20px;
-    height: 20px;
-    margin-top:-10px;
-    margin-left:-10px;
-    opacity: 0;
-    background: rgba(0,0,0,0.2);
-    transition: all 0.7s ease-out;
-    transition-property: transform, opacity;
-    transform: scale(0);
-    pointer-events: none;
-  }
-
-  // Waves Colors
-  &.waves-light .waves-ripple {
-    background-color: rgba(255, 255, 255, 0.45);
-  }
-
-  &.waves-gray .waves-ripple {
-    background-color: rgba(0, 0, 0, .15);
-  }
 
   // Style input button bug.
   input[type="button"], input[type="reset"], input[type="submit"] {
@@ -46,15 +17,13 @@
     z-index: -1;
   }
 
-}
+  &.waves-classic .waves-ripple {
+    background-color: rgba(0, 0, 0, 0.15);
+  }
 
-.waves-notransition {
-  transition: none #{"!important"};
 }
 
 .waves-circle {
-  transform: translateZ(0);
-  -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
   text-align: center;
   -webkit-mask-image: none;
   border-width: 0;
@@ -62,22 +31,16 @@
 
 .waves-input-wrapper {
   border-radius: $border-radius-base;
-  vertical-align: bottom;
-
-  .waves-button-input {
-    position: relative;
-    padding: 0;
-    top: 0;
-    left: 0;
-    z-index: 1;
-  }
-
 }
 
-.waves-block {
-  display: block;
+// custom bootstrap button implementation
+.waves-btn {
+  transform: translateZ(0);
+  -webkit-mask-image: none;
+  border-radius: $border-radius-base;
 }
 
+
 // Firefox Bug: link not triggered
 a.waves-effect .waves-ripple {
   z-index: -1;

socialblue.libraries.yml

@@ -27,9 +27,8 @@ button:
     theme:
       assets/css/button.css: {}
       assets/css/waves.css: {}
-  js:
-    /libraries/waves/dist/waves.js: {}
-    components/02-atoms/waves/waves.js: {}
+  dependencies:
+    - socialblue/waves
 
 cards:
   css:
@@ -51,6 +50,14 @@ spinner:
     theme:
       assets/css/spinner.css: {}
 
+waves:
+  css:
+    theme:
+      /libraries/waves/dist/waves.css: {}
+  js:
+    /libraries/waves/dist/waves.min.js: { minified: true }
+    assets/js/waves.min.js: { minified: true }
+
 ### 2.2 Molecules
 
 breadcrumb: