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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/README.md +17 -27
  2. package/demo/dw-ripple-demo.js +45 -32
  3. package/dw-ripple.js +32 -59
  4. package/package.json +1 -1
package/README.md CHANGED
@@ -1,51 +1,41 @@
1
1
  # dw-ripple
2
2
 
3
- Ripple element created as child-class of [`mwc-ripple`]
4
- (https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)
3
+ Ripple element created as child-class of [`mwc-ripple`](https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)
5
4
 
6
5
  ## What are the changes in `mwc-ripple`?
7
- - To show ripple in secondary color, they have used property named `accent`. Which is confusing in terms of standard
8
- theming variables.
9
- - They render ripple always in black color by default. So, it doesn't work on dark theme. We changed default color to
10
- `--mdc-theme-on-surface`
6
+
7
+ - To show ripple in secondary color, they have used property named `accent`. Which is confusing in terms of standard
8
+ theming variables.
11
9
 
12
10
  ## Installation
13
11
 
14
12
  ```html
15
- npm install @dw/dw-ripple
13
+ npm install @dw/dw-ripple
16
14
  ```
17
15
 
18
16
  ## Usage
19
17
 
20
18
  ```html
21
- @import '@dw/dw-ripple/dw-ripple';
22
-
23
- .demo-box {
24
- width: 96px;
25
- height: 96px;
26
- border: 1px solid gray;
27
- }
28
-
29
- <div class="demo-box">
30
- Default
31
- <dw-ripple></dw-ripple>
32
- </div>
19
+ @import '@dw/dw-ripple/dw-ripple'; .demo-box { width: 96px; height: 96px; border: 1px solid gray; }
20
+
21
+ <div class="demo-box">
22
+ Default
23
+ <dw-ripple></dw-ripple>
24
+ </div>
33
25
  ```
34
26
 
35
27
  ## [Demo](https://dreamworldsolutions.github.io/dw-ripple/demo/index.html)
36
28
 
37
29
  ## Properties
30
+
38
31
  - `primary` Boolean. Set when ripple is to be shown in primary color.
39
32
  - `secondary` Boolean, Set when ripple is to be shown in secondary color.
40
33
  - `disabled` Boolean. Set when disabled. e.g. When icon-button is disabled, no ripple is to be shown.
41
- - `unbounded` Boolean. By defualt ripple effect are shown from the point where user clicks. If we want to show ripple
42
- always from the center (irrespective of the click position) then set to `true`. When this is set, ripple is shown in
43
- circular shape always.
44
- - `enableHover` Boolean. Set to enable hover and focuse for ripple.
34
+ - `unbounded` Boolean. By defualt ripple effect are shown from the point where user clicks. If we want to show ripple
35
+ always from the center (irrespective of the click position) then set to `true`. When this is set, ripple is shown in
36
+ circular shape always.
37
+ - `disableHover` Boolean. Set to disabl hover and focuse.
45
38
 
46
39
  ## Theming
47
- By default ripple is shown in `--mdc-theme-on-surface`. That should be ok for most places. When need to change it at
48
- special place, set said CSS property to any other color.
49
-
50
40
 
51
- it's opacity can't be configured as of now. If needed please raise a feature request.
41
+ By default ripple is shown in `#000`. When need to change it at special place, set `--mdc-ripple-color` CSS property to any other color.
package/demo/dw-ripple-demo.js CHANGED
@@ -1,23 +1,23 @@
1
- import { html, css } from 'lit-element';
2
- import { LitElement } from '@dreamworld/pwa-helpers/lit-element.js';
1
+ import { html, css } from "lit-element";
2
+ import { LitElement } from "@dreamworld/pwa-helpers/lit-element.js";
3
3
 
4
4
  //These are the dw element needed by this element.
5
- import '../dw-ripple.js';
5
+ import "../dw-ripple.js";
6
6
 
7
7
  // These are the dw styles element needed by this element.
8
- import { ThemeStyle } from '@dreamworld/material-styles/theme.js';
8
+ import { ThemeStyle } from "@dreamworld/material-styles/theme.js";
9
9
 
10
10
  //These are the mwc element needed by this element.
11
- import '@material/mwc-switch';
12
- import '@material/mwc-formfield';
11
+ import "@material/mwc-switch";
12
+ import "@material/mwc-formfield";
13
13
 
14
14
  export class DwRippleDemo extends LitElement {
15
15
  static get styles() {
16
16
  return [
17
17
  ThemeStyle,
18
18
  css`
19
- :host {
20
- display:block;
19
+ :host {
20
+ display: block;
21
21
  color: var(--mdc-theme-text-primary);
22
22
  }
23
23
 
@@ -49,24 +49,26 @@ export class DwRippleDemo extends LitElement {
49
49
  mwc-formfield {
50
50
  --mdc-theme-text-primary-on-background: var(--mdc-theme-text-primary);
51
51
  }
52
- `
53
- ]
52
+ `,
53
+ ];
54
54
  }
55
55
 
56
56
  render() {
57
57
  return html`
58
58
  <section class="main">
59
59
  <mwc-formfield label="Enable dark theme">
60
- <mwc-switch @click="${(e) => {
60
+ <mwc-switch
61
+ @click="${(e) => {
61
62
  if (e.target.selected) {
62
- this.setAttribute('dark-theme', e.detail);
63
+ this.setAttribute("dark-theme", e.detail);
63
64
  return;
64
65
  }
65
- this.removeAttribute('dark-theme');
66
- }}">
66
+ this.removeAttribute("dark-theme");
67
+ }}"
68
+ >
67
69
  </mwc-switch>
68
70
  </mwc-formfield>
69
-
71
+
70
72
  <h2>Ripple</h2>
71
73
  <div class="demo-box">
72
74
  Default
@@ -74,45 +76,57 @@ export class DwRippleDemo extends LitElement {
74
76
  </div>
75
77
  <div class="demo-box">
76
78
  Primary
77
- <dw-ripple primary enableHover></dw-ripple>
79
+ <dw-ripple primary></dw-ripple>
78
80
  </div>
79
81
  <div class="demo-box">
80
82
  Secondary
81
- <dw-ripple secondary enableHover tabindex="1"></dw-ripple>
83
+ <dw-ripple secondary></dw-ripple>
84
+ </div>
85
+ <div class="demo-box" tabindex="1">
86
+ Focuse
87
+ <dw-ripple></dw-ripple>
88
+ </div>
89
+ <div class="demo-box">
90
+ Selected
91
+ <dw-ripple selected></dw-ripple>
92
+ </div>
93
+ <div class="demo-box">
94
+ Activated
95
+ <dw-ripple activated></dw-ripple>
82
96
  </div>
83
97
  <div class="demo-box custom">
84
- Custom
85
- <dw-ripple enableHover></dw-ripple>
86
- </div>
98
+ Custom
99
+ <dw-ripple></dw-ripple>
100
+ </div>
87
101
  <div class="demo-box">
88
102
  unbounded
89
- <dw-ripple unbounded enableHover></dw-ripple>
103
+ <dw-ripple unbounded></dw-ripple>
90
104
  </div>
91
105
  <div class="demo-box">
92
106
  disabled
93
- <dw-ripple disabled enableHover></dw-ripple>
107
+ <dw-ripple disabled></dw-ripple>
94
108
  </div>
95
109
 
96
- <h2>Ripple without hover and focuse</h2>
110
+ <h2>Ripple without hover</h2>
97
111
  <div class="demo-box">
98
112
  Default
99
- <dw-ripple></dw-ripple>
113
+ <dw-ripple disableHover></dw-ripple>
100
114
  </div>
101
115
  <div class="demo-box">
102
116
  Primary
103
- <dw-ripple primary></dw-ripple>
117
+ <dw-ripple primary disableHover></dw-ripple>
104
118
  </div>
105
119
  <div class="demo-box">
106
120
  Secondary
107
- <dw-ripple secondary></dw-ripple>
121
+ <dw-ripple secondary disableHover></dw-ripple>
108
122
  </div>
109
123
  <div class="demo-box custom">
110
- Custom
111
- <dw-ripple></dw-ripple>
112
- </div>
124
+ Custom
125
+ <dw-ripple disableHover></dw-ripple>
126
+ </div>
113
127
  <div class="demo-box">
114
128
  unbounded
115
- <dw-ripple unbounded></dw-ripple>
129
+ <dw-ripple unbounded disableHover></dw-ripple>
116
130
  </div>
117
131
  <div class="demo-box">
118
132
  disabled
@@ -121,6 +135,5 @@ export class DwRippleDemo extends LitElement {
121
135
  </section>
122
136
  `;
123
137
  }
124
-
125
138
  }
126
- window.customElements.define('dw-ripple-demo', DwRippleDemo);
139
+ window.customElements.define("dw-ripple-demo", DwRippleDemo);
package/dw-ripple.js CHANGED
@@ -1,65 +1,40 @@
1
- import { css } from 'lit-element';
1
+ import { css } from "lit-element";
2
2
 
3
3
  // These are the mwc element needed by this element.
4
- import { Ripple } from '@material/mwc-ripple';
5
- import { RippleHandlers } from '@material/mwc-ripple/ripple-handlers';
6
-
4
+ import { Ripple } from "@material/mwc-ripple";
5
+ import { RippleHandlers } from "@material/mwc-ripple/ripple-handlers";
7
6
 
8
7
  export class DwRipple extends Ripple {
9
8
  static get styles() {
10
9
  return [
11
10
  super.styles,
12
11
  css`
13
- :host([disabled]) {
14
- --mdc-theme-on-surface: transparent;
15
- }
16
-
17
- :host([primary]) {
18
- --mdc-theme-on-surface: var(--mdc-theme-primary);
19
- }
20
-
21
- :host([secondary]) {
22
- --mdc-theme-on-surface: var(--mdc-theme-secondary);
23
- }
24
-
25
- .mdc-ripple-surface::before, .mdc-ripple-surface::after {
26
- background-color: var(--mdc-theme-on-surface, #000);
27
- }
28
- `
12
+ :host([secondary]) {
13
+ --mdc-ripple-color: var(--mdc-theme-secondary);
14
+ }
15
+ `,
29
16
  ];
30
17
  }
31
18
 
32
19
  static get properties() {
33
20
  return {
34
-
35
- /**
36
- * Set to `true` when ripple is to be shown in primary color.
37
- */
38
- primary: { type: Boolean, reflect: true },
39
-
40
21
  /**
41
22
  * Set to `true` when ripple is to be shown in secondary color
42
23
  */
43
24
  secondary: { type: Boolean, reflect: true },
44
25
 
45
26
  /**
46
- * Set to `true` if ripple should not be shown
47
- */
48
- disabled: { type: Boolean, reflect: true },
49
-
50
- /**
51
- * Set to `true` to show hover or focuse in ripple
27
+ * Set to `true` to disable hover and focuse in.
52
28
  */
53
- enableHover: { type: Boolean }
54
- }
29
+ disableHover: { type: Boolean },
30
+ };
55
31
  }
56
32
 
57
33
  constructor() {
58
34
  super();
59
35
  this.primary = false;
60
36
  this.secondary = false;
61
- this.disabled = false;
62
- this.enableHover = false;
37
+ this.disableHover = false;
63
38
  }
64
39
 
65
40
  connectedCallback() {
@@ -75,34 +50,34 @@ export class DwRipple extends Ripple {
75
50
  this.__onMouseUp = this.__onMouseUp.bind(this);
76
51
  this.__onTouchEnd = this.__onTouchEnd.bind(this);
77
52
 
78
- if(this.enableHover) {
79
- parent.addEventListener('mouseenter', this._rippleHander.startHover);
80
- parent.addEventListener('mouseleave', this._rippleHander.endHover);
81
- parent.addEventListener('focus', this._rippleHander.startFocus);
82
- parent.addEventListener('blur', this._rippleHander.endFocus);
53
+ if (!this.disableHover) {
54
+ parent.addEventListener("mouseenter", this._rippleHander.startHover);
55
+ parent.addEventListener("mouseleave", this._rippleHander.endHover);
56
+ parent.addEventListener("focus", this._rippleHander.startFocus);
57
+ parent.addEventListener("blur", this._rippleHander.endFocus);
83
58
  }
84
59
 
85
- parent.addEventListener('mousedown', this.__onMouseDown);
86
- parent.addEventListener('touchstart', this.__onTouchStart);
60
+ parent.addEventListener("mousedown", this.__onMouseDown);
61
+ parent.addEventListener("touchstart", this.__onTouchStart);
87
62
  }
88
63
 
89
64
  __onMouseDown(e) {
90
- window.addEventListener('mouseup', this.__onMouseUp);
65
+ window.addEventListener("mouseup", this.__onMouseUp);
91
66
  this._rippleHander.startPress(e);
92
67
  }
93
68
 
94
69
  __onTouchStart(e) {
95
- window.addEventListener('touchend', this.__onTouchEnd);
70
+ window.addEventListener("touchend", this.__onTouchEnd);
96
71
  this._rippleHander.startPress(e);
97
72
  }
98
73
 
99
74
  __onMouseUp() {
100
- window.removeEventListener('mouseup', this.__onMouseUp);
75
+ window.removeEventListener("mouseup", this.__onMouseUp);
101
76
  this._rippleHander.endPress();
102
77
  }
103
78
 
104
79
  __onTouchEnd() {
105
- window.removeEventListener('touchend', this.__onTouchEnd);
80
+ window.removeEventListener("touchend", this.__onTouchEnd);
106
81
  this._rippleHander.endPress();
107
82
  }
108
83
 
@@ -117,24 +92,22 @@ export class DwRipple extends Ripple {
117
92
  disconnectedCallback() {
118
93
  const parent = this.__getParentNode();
119
94
  if (parent) {
120
-
121
- if(this.enableHover) {
122
- parent.removeEventListener('mouseenter', this._rippleHander.startHover);
123
- parent.removeEventListener('mouseleave', this._rippleHander.endHover);
124
- parent.removeEventListener('focus', this._rippleHander.startFocus);
125
- parent.removeEventListener('blur', this._rippleHander.endFocus);
95
+ if (!this.disableHover) {
96
+ parent.removeEventListener("mouseenter", this._rippleHander.startHover);
97
+ parent.removeEventListener("mouseleave", this._rippleHander.endHover);
98
+ parent.removeEventListener("focus", this._rippleHander.startFocus);
99
+ parent.removeEventListener("blur", this._rippleHander.endFocus);
126
100
  }
127
101
 
128
- parent.removeEventListener('mousedown', this.__onMouseDown);
129
- parent.removeEventListener('touchstart', this.__onTouchStart);
102
+ parent.removeEventListener("mousedown", this.__onMouseDown);
103
+ parent.removeEventListener("touchstart", this.__onTouchStart);
130
104
  }
131
105
 
132
- window.removeEventListener('touchend', this.__onTouchEnd);
133
- window.removeEventListener('mouseup', this.__onMouseUp);
106
+ window.removeEventListener("touchend", this.__onTouchEnd);
107
+ window.removeEventListener("mouseup", this.__onMouseUp);
134
108
 
135
109
  super.disconnectedCallback();
136
110
  }
137
-
138
111
  }
139
112
 
140
- window.customElements.define('dw-ripple', DwRipple);
113
+ window.customElements.define("dw-ripple", DwRipple);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dreamworld/dw-ripple",
3
- "version": "2.4.0-development.2",
3
+ "version": "2.4.0-development.3",
4
4
  "description": "Ripple element created as child-class of [`mwc-ripple`] (https://github.com/material-components/material-components-web-components/tree/master/packages/ripple)",
5
5
  "main": "dw-ripple.js",
6
6
  "scripts": {