@dreamworld/dw-ripple 2.3.0 → 2.4.0-development.2

package/README.md

@@ -41,6 +41,7 @@ theming variables.
 - `unbounded` Boolean. By defualt ripple effect are shown from the point where user clicks. If we want to show ripple 
 always from the center (irrespective of the click position) then set to `true`. When this is set, ripple is shown in 
 circular shape always.
+- `enableHover` Boolean. Set to enable hover and focuse for ripple.
 
 ## Theming
 By default ripple is shown in `--mdc-theme-on-surface`. That should be ok for most places. When need to change it at

package/demo/dw-ripple-demo.js

@@ -68,6 +68,32 @@ export class DwRippleDemo extends LitElement {
         </mwc-formfield>
       
         <h2>Ripple</h2>
+        <div class="demo-box">
+          Default
+          <dw-ripple enableHover></dw-ripple>
+        </div>
+        <div class="demo-box">
+          Primary
+          <dw-ripple primary enableHover></dw-ripple>
+        </div>
+        <div class="demo-box">
+          Secondary
+          <dw-ripple secondary enableHover tabindex="1"></dw-ripple>
+        </div>
+        <div class="demo-box custom">
+            Custom
+            <dw-ripple enableHover></dw-ripple>
+          </div>
+        <div class="demo-box">
+          unbounded
+          <dw-ripple unbounded enableHover></dw-ripple>
+        </div>
+        <div class="demo-box">
+          disabled
+          <dw-ripple disabled enableHover></dw-ripple>
+        </div>
+
+        <h2>Ripple without hover and focuse</h2>
         <div class="demo-box">
           Default
           <dw-ripple></dw-ripple>

package/dw-ripple.js

@@ -45,7 +45,12 @@ export class DwRipple extends Ripple {
       /**
        * Set to `true` if ripple should not be shown
        */
-      disabled: { type: Boolean, reflect: true }
+      disabled: { type: Boolean, reflect: true },
+
+      /**
+       * Set to `true` to show hover or focuse in ripple
+       */
+      enableHover: { type: Boolean }
     }
   }
 
@@ -54,6 +59,7 @@ export class DwRipple extends Ripple {
     this.primary = false;
     this.secondary = false;
     this.disabled = false;
+    this.enableHover = false;
   }
 
   connectedCallback() {
@@ -69,12 +75,15 @@ export class DwRipple extends Ripple {
     this.__onMouseUp = this.__onMouseUp.bind(this);
     this.__onTouchEnd = this.__onTouchEnd.bind(this);
 
-    parent.addEventListener('mouseenter', this._rippleHander.startHover);
-    parent.addEventListener('mouseleave', this._rippleHander.endHover);
+    if(this.enableHover) {
+      parent.addEventListener('mouseenter', this._rippleHander.startHover);
+      parent.addEventListener('mouseleave', this._rippleHander.endHover);
+      parent.addEventListener('focus', this._rippleHander.startFocus);
+      parent.addEventListener('blur', this._rippleHander.endFocus);
+    }
+
     parent.addEventListener('mousedown', this.__onMouseDown);
     parent.addEventListener('touchstart', this.__onTouchStart);
-    parent.addEventListener('focus', this._rippleHander.startFocus);
-    parent.addEventListener('blur', this._rippleHander.endFocus);
   }
 
   __onMouseDown(e) {
@@ -108,13 +117,16 @@ export class DwRipple extends Ripple {
   disconnectedCallback() {
     const parent = this.__getParentNode();
     if (parent) {
-      parent.removeEventListener('mouseenter', this._rippleHander.startHover);
-      parent.removeEventListener('mouseleave', this._rippleHander.endHover);
+
+      if(this.enableHover) {
+        parent.removeEventListener('mouseenter', this._rippleHander.startHover);
+        parent.removeEventListener('mouseleave', this._rippleHander.endHover);
+        parent.removeEventListener('focus', this._rippleHander.startFocus);
+        parent.removeEventListener('blur', this._rippleHander.endFocus);
+      }
 
       parent.removeEventListener('mousedown', this.__onMouseDown);
       parent.removeEventListener('touchstart', this.__onTouchStart);
-      parent.removeEventListener('focus', this._rippleHander.startFocus);
-      parent.removeEventListener('blur', this._rippleHander.endFocus);
     }
 
     window.removeEventListener('touchend', this.__onTouchEnd);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dreamworld/dw-ripple",
-  "version": "2.3.0",
+  "version": "2.4.0-development.2",
   "description": "Ripple element created as child-class of [`mwc-ripple`] (https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)",
   "main": "dw-ripple.js",
   "scripts": {