1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 |
|
18 | import onsElements from '../ons/elements.js';
|
19 | import util from '../ons/util.js';
|
20 | import autoStyle from '../ons/autostyle.js';
|
21 | import ModifierUtil from '../ons/internal/modifier-util.js';
|
22 | import BaseElement from './base/base-element.js';
|
23 | import contentReady from '../ons/content-ready.js';
|
24 |
|
25 | const scheme = {
|
26 | '.progress-circular': 'progress-circular--*',
|
27 | '.progress-circular__background': 'progress-circular--*__background',
|
28 | '.progress-circular__primary': 'progress-circular--*__primary',
|
29 | '.progress-circular__secondary': 'progress-circular--*__secondary'
|
30 | };
|
31 |
|
32 | const template = util.createElement(`
|
33 | <svg class="progress-circular">
|
34 | <circle class="progress-circular__background" />
|
35 | <circle class="progress-circular__secondary" cx="50%" cy="50%" r="40%" />
|
36 | <circle class="progress-circular__primary" cx="50%" cy="50%" r="40%" />
|
37 | </svg>
|
38 | `);
|
39 |
|
40 | const INDET = 'indeterminate';
|
41 |
|
42 |
|
43 |
|
44 |
|
45 |
|
46 |
|
47 |
|
48 |
|
49 |
|
50 |
|
51 |
|
52 |
|
53 |
|
54 |
|
55 |
|
56 |
|
57 |
|
58 |
|
59 |
|
60 |
|
61 |
|
62 |
|
63 |
|
64 |
|
65 | export default class ProgressCircularElement extends BaseElement {
|
66 |
|
67 | |
68 |
|
69 |
|
70 |
|
71 |
|
72 |
|
73 |
|
74 |
|
75 | |
76 |
|
77 |
|
78 |
|
79 |
|
80 |
|
81 |
|
82 |
|
83 | |
84 |
|
85 |
|
86 |
|
87 |
|
88 |
|
89 |
|
90 |
|
91 | |
92 |
|
93 |
|
94 |
|
95 |
|
96 |
|
97 |
|
98 | constructor() {
|
99 | super();
|
100 |
|
101 | contentReady(this, () => this._compile());
|
102 | }
|
103 |
|
104 | static get observedAttributes() {
|
105 | return ['modifier', 'value', 'secondary-value', INDET];
|
106 | }
|
107 |
|
108 | attributeChangedCallback(name, last, current) {
|
109 | if (name === 'modifier') {
|
110 | ModifierUtil.onModifierChanged(last, current, this, scheme);
|
111 | this.hasAttribute(INDET) && this._updateDeterminate();
|
112 | } else if (name === 'value' || name === 'secondary-value') {
|
113 | this._updateValue();
|
114 | } else if (name === INDET) {
|
115 | this._updateDeterminate();
|
116 | }
|
117 | }
|
118 |
|
119 | _updateDeterminate() {
|
120 | contentReady(this, () => util.toggleModifier(this, INDET, { force: this.hasAttribute(INDET) }));
|
121 | }
|
122 |
|
123 | _updateValue() {
|
124 | if (this.hasAttribute('value')) {
|
125 | contentReady(this, () => {
|
126 | const per = Math.ceil(this.getAttribute('value') * 251.32 * 0.01);
|
127 | this._primary.style['stroke-dasharray'] = per + '%, 251.32%';
|
128 | });
|
129 | }
|
130 | if (this.hasAttribute('secondary-value')) {
|
131 | contentReady(this, () => {
|
132 | const per = Math.ceil(this.getAttribute('secondary-value') * 251.32 * 0.01);
|
133 | this._secondary.style.display = null;
|
134 | this._secondary.style['stroke-dasharray'] = per + '%, 251.32%';
|
135 | });
|
136 | } else {
|
137 | contentReady(this, () => {
|
138 | this._secondary.style.display = 'none';
|
139 | });
|
140 | }
|
141 | }
|
142 |
|
143 | |
144 |
|
145 |
|
146 |
|
147 |
|
148 |
|
149 |
|
150 | set value(value) {
|
151 | if (typeof value !== 'number' || value < 0 || value > 100) {
|
152 | util.throw('Invalid value');
|
153 | }
|
154 |
|
155 | this.setAttribute('value', Math.floor(value));
|
156 | }
|
157 |
|
158 | get value() {
|
159 | return parseInt(this.getAttribute('value') || '0');
|
160 | }
|
161 |
|
162 | |
163 |
|
164 |
|
165 |
|
166 |
|
167 |
|
168 |
|
169 | set secondaryValue(value) {
|
170 | if (typeof value !== 'number' || value < 0 || value > 100) {
|
171 | util.throw('Invalid value');
|
172 | }
|
173 |
|
174 | this.setAttribute('secondary-value', Math.floor(value));
|
175 | }
|
176 |
|
177 | get secondaryValue() {
|
178 | return parseInt(this.getAttribute('secondary-value') || '0');
|
179 | }
|
180 |
|
181 | |
182 |
|
183 |
|
184 |
|
185 |
|
186 |
|
187 |
|
188 | set indeterminate(value) {
|
189 | if (value) {
|
190 | this.setAttribute(INDET, '');
|
191 | }
|
192 | else {
|
193 | this.removeAttribute(INDET);
|
194 | }
|
195 | }
|
196 |
|
197 | get indeterminate() {
|
198 | return this.hasAttribute(INDET);
|
199 | }
|
200 |
|
201 | _compile() {
|
202 | if (this._isCompiled()) {
|
203 | this._template = util.findChild(this, '.progress-circular');
|
204 | } else {
|
205 | this._template = template.cloneNode(true);
|
206 | }
|
207 |
|
208 | this._primary = util.findChild(this._template, '.progress-circular__primary');
|
209 | this._secondary = util.findChild(this._template, '.progress-circular__secondary');
|
210 |
|
211 | this._updateDeterminate();
|
212 | this._updateValue();
|
213 |
|
214 | this.appendChild(this._template);
|
215 |
|
216 | autoStyle.prepare(this);
|
217 | ModifierUtil.initModifier(this, scheme);
|
218 | }
|
219 |
|
220 | _isCompiled() {
|
221 | if (!util.findChild(this, '.progress-circular')) {
|
222 | return false;
|
223 | }
|
224 |
|
225 | const svg = util.findChild(this, '.progress-circular');
|
226 |
|
227 | if (!util.findChild(svg, '.progress-circular__secondary')) {
|
228 | return false;
|
229 | }
|
230 |
|
231 | if (!util.findChild(svg, '.progress-circular__primary')) {
|
232 | return false;
|
233 | }
|
234 |
|
235 | return true;
|
236 | }
|
237 | }
|
238 |
|
239 | onsElements.ProgressCircular = ProgressCircularElement;
|
240 | customElements.define('ons-progress-circular', ProgressCircularElement);
|