polymer-paper-rails 1.0.0.pre.rc.2 → 1.0.0.pre.rc.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.
- checksums.yaml +4 -4
- data/app/assets/components/paper-fab/bower.json +1 -1
- data/app/assets/components/paper-fab/demo/index.html +4 -0
- data/app/assets/components/paper-fab/paper-fab.html +19 -3
- data/app/assets/components/paper-slider/bower.json +7 -2
- data/app/assets/components/paper-slider/demo/index.html +5 -1
- data/app/assets/components/paper-slider/paper-slider.css +6 -2
- data/app/assets/components/paper-slider/paper-slider.html +128 -61
- data/app/assets/components/paper-slider/test/basic.html +59 -12
- data/lib/polymer-paper-rails/version.rb +1 -1
- metadata +1 -29
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 8c59b188ea4761429b0e0abd9cd8c80d2814b252
|
4
|
+
data.tar.gz: 61e16f1a30df92ee84f7caa13e2cadc340f9206d
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 50a70aada2a98cbb67e047d636460f4da437b128e82cfcbbb211963462dca29fc157c46cf7dec5382d9c290dc3dd147f5ab484cff480bad1c7b524fcf8412933
|
7
|
+
data.tar.gz: f1d5eba2f15b0cdb161770200ff18445a14f5c3ff3965e412eff440d1dfef855d98e24e2cff125860b0bc735fae2730c454fb9aa9677f28990aad3c62195817c
|
@@ -37,18 +37,22 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|
37
37
|
|
38
38
|
paper-fab.blue {
|
39
39
|
--paper-fab-background: var(--paper-light-blue-500);
|
40
|
+
--paper-fab-keyboard-focus-background: var(--paper-light-blue-900);
|
40
41
|
}
|
41
42
|
|
42
43
|
paper-fab.red {
|
43
44
|
--paper-fab-background: var(--paper-red-500);
|
45
|
+
--paper-fab-keyboard-focus-background: var(--paper-red-900);
|
44
46
|
}
|
45
47
|
|
46
48
|
paper-fab.green {
|
47
49
|
--paper-fab-background: var(--paper-green-500);
|
50
|
+
--paper-fab-keyboard-focus-background: var(--paper-green-900);
|
48
51
|
}
|
49
52
|
|
50
53
|
paper-fab.orange {
|
51
54
|
--paper-fab-background: var(--paper-orange-500);
|
55
|
+
--paper-fab-keyboard-focus-background: var(--paper-orange-900);
|
52
56
|
}
|
53
57
|
|
54
58
|
</style>
|
@@ -42,7 +42,8 @@ The following custom properties and mixins are available for styling:
|
|
42
42
|
|
43
43
|
Custom property | Description | Default
|
44
44
|
----------------|-------------|----------
|
45
|
-
`--paper-fab-background` | The background color of the button | `--
|
45
|
+
`--paper-fab-background` | The background color of the button | `--accent-color`
|
46
|
+
`--paper-fab-keyboard-focus-background` | The background color of the button when focused | `--paper-pink-900`
|
46
47
|
`--paper-fab-disabled-background` | The background color of the button when it's disabled | `--paper-grey-300`
|
47
48
|
`--paper-fab-disabled-text` | The text color of the button when it's disabled | `--paper-grey-500`
|
48
49
|
`--paper-fab` | Mixin applied to the button | `{}`
|
@@ -71,7 +72,7 @@ Custom property | Description | Default
|
|
71
72
|
min-width: 0;
|
72
73
|
width: 56px;
|
73
74
|
height: 56px;
|
74
|
-
background: var(--paper-fab-background, --
|
75
|
+
background: var(--paper-fab-background, --accent-color);
|
75
76
|
color: var(--text-primary-color);
|
76
77
|
border-radius: 50%;
|
77
78
|
padding: 16px;
|
@@ -97,11 +98,18 @@ Custom property | Description | Default
|
|
97
98
|
|
98
99
|
paper-material {
|
99
100
|
border-radius: inherit;
|
101
|
+
@apply(--layout-fit);
|
102
|
+
@apply(--layout-vertical);
|
103
|
+
@apply(--layout-center-center);
|
104
|
+
}
|
105
|
+
|
106
|
+
.keyboard-focus {
|
107
|
+
background: var(--paper-fab-keyboard-focus-background, --paper-pink-900);
|
100
108
|
}
|
101
109
|
</style>
|
102
110
|
<template>
|
103
111
|
<paper-ripple></paper-ripple>
|
104
|
-
<paper-material class
|
112
|
+
<paper-material class$="[[_computeContentClass(receivedFocusFromKeyboard)]]" elevation="[[_elevation]]" animated>
|
105
113
|
<iron-icon id="icon" src="[[src]]" icon="[[icon]]"></iron-icon>
|
106
114
|
</paper-material>
|
107
115
|
</template>
|
@@ -153,6 +161,14 @@ Custom property | Description | Default
|
|
153
161
|
type: Boolean,
|
154
162
|
value: false
|
155
163
|
}
|
164
|
+
},
|
165
|
+
|
166
|
+
_computeContentClass: function(receivedFocusFromKeyboard) {
|
167
|
+
var className = 'content';
|
168
|
+
if (receivedFocusFromKeyboard) {
|
169
|
+
className += ' keyboard-focus';
|
170
|
+
}
|
171
|
+
return className;
|
156
172
|
}
|
157
173
|
|
158
174
|
});
|
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "paper-slider",
|
3
|
-
"version": "1.0.
|
3
|
+
"version": "1.0.2",
|
4
4
|
"description": "A material design-style slider",
|
5
5
|
"license": "http://polymer.github.io/LICENSE.txt",
|
6
6
|
"authors": "The Polymer Authors",
|
@@ -23,11 +23,16 @@
|
|
23
23
|
"paper-progress": "PolymerElements/paper-progress#^1.0.0",
|
24
24
|
"iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
|
25
25
|
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
|
26
|
-
"
|
26
|
+
"paper-ripple": "PolymerElements/paper-ripple#^1.0.0",
|
27
|
+
"iron-behaviors": "PolymerElements/iron-behaviors#^1.0.0",
|
28
|
+
"paper-behaviors": "PolymerElements/paper-behaviors#^1.0.0",
|
29
|
+
"iron-a11y-keys-behavior": "PolymerElements/iron-a11y-keys-behavior#^1.0.0",
|
30
|
+
"iron-form-element-behavior": "PolymerElements/iron-form-element-behavior#^1.0.0"
|
27
31
|
},
|
28
32
|
"devDependencies": {
|
29
33
|
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
|
30
34
|
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
|
35
|
+
"iron-test-helpers": "polymerelements/iron-test-helpers#^1.0.0",
|
31
36
|
"web-component-tester": "*",
|
32
37
|
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
33
38
|
}
|
@@ -59,7 +59,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|
59
59
|
</style>
|
60
60
|
|
61
61
|
</head>
|
62
|
-
<body>
|
62
|
+
<body unresolved>
|
63
63
|
<div class="vertical center-justified layout">
|
64
64
|
<h4>Default</h4>
|
65
65
|
<div class="vertical-section">
|
@@ -89,6 +89,10 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|
89
89
|
<div>B</div>
|
90
90
|
<paper-slider class="blue" value="211" max="255" editable></paper-slider>
|
91
91
|
</div>
|
92
|
+
<div class="center horizontal layout">
|
93
|
+
<div>α</div>
|
94
|
+
<paper-slider max="1.0" step="0.01" editable></paper-slider>
|
95
|
+
</div>
|
92
96
|
</div>
|
93
97
|
|
94
98
|
<h4>Labelled pins</h4>
|
@@ -116,7 +116,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|
116
116
|
}
|
117
117
|
|
118
118
|
.transiting #sliderBar::shadow #activeProgress {
|
119
|
-
transition: -webkit-transform 0.08s ease;
|
119
|
+
-webkit-transition: -webkit-transform 0.08s ease;
|
120
120
|
transition: transform 0.08s ease;
|
121
121
|
}
|
122
122
|
|
@@ -249,4 +249,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|
249
249
|
|
250
250
|
.disabled.ring > #sliderKnob > #sliderKnobInner {
|
251
251
|
background-color: transparent;
|
252
|
-
}
|
252
|
+
}
|
253
|
+
|
254
|
+
paper-ripple {
|
255
|
+
color: var(--paper-slider-knob-color, --google-blue-700);
|
256
|
+
}
|
@@ -8,11 +8,14 @@ Code distributed by Google as part of the polymer project is also
|
|
8
8
|
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS
|
9
9
|
-->
|
10
10
|
|
11
|
+
<link rel="import" href="../polymer/polymer.html">
|
11
12
|
<link rel="import" href="../paper-styles/paper-styles.html">
|
12
|
-
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
|
13
|
-
<link rel="import" href="../iron-behaviors/iron-control-state.html">
|
14
13
|
<link rel="import" href="../paper-progress/paper-progress.html">
|
15
14
|
<link rel="import" href="../paper-input/paper-input.html">
|
15
|
+
<link rel="import" href="../paper-behaviors/paper-inky-focus-behavior.html">
|
16
|
+
<link rel="import" href="../paper-ripple/paper-ripple.html">
|
17
|
+
<link rel="import" href="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
|
18
|
+
<link rel="import" href="../iron-form-element-behavior/iron-form-element-behavior.html">
|
16
19
|
|
17
20
|
<!--
|
18
21
|
`paper-slider` allows user to select a value from a range of values by
|
@@ -81,15 +84,26 @@ To change the slider disabled secondary progress bar color:
|
|
81
84
|
-->
|
82
85
|
|
83
86
|
<dom-module id="paper-slider">
|
87
|
+
|
84
88
|
<link rel="import" type="css" href="paper-slider.css">
|
89
|
+
|
85
90
|
<template>
|
86
|
-
<
|
87
|
-
|
91
|
+
<div id="sliderContainer"
|
92
|
+
class$="[[_getClassNames(disabled, pin, snaps, immediateValue, min, expand, dragging, transiting, editable)]]">
|
88
93
|
|
89
|
-
<div id="sliderContainer" class$="[[_getClassNames(disabled, pin, snaps, immediateValue, min, expand, dragging, transiting, editable)]]">
|
90
94
|
<div class="bar-container">
|
91
|
-
<paper-progress
|
92
|
-
|
95
|
+
<paper-progress
|
96
|
+
id="sliderBar"
|
97
|
+
aria-hidden="true"
|
98
|
+
min="[[min]]"
|
99
|
+
max="[[max]]"
|
100
|
+
step="[[step]]"
|
101
|
+
value="[[immediateValue]]"
|
102
|
+
secondary-progress="[[secondaryProgress]]"
|
103
|
+
on-down="_bardown"
|
104
|
+
on-up="_resetKnob"
|
105
|
+
on-track="_onTrack">
|
106
|
+
</paper-progress>
|
93
107
|
</div>
|
94
108
|
|
95
109
|
<template is="dom-if" if="[[snaps]]">
|
@@ -100,20 +114,27 @@ To change the slider disabled secondary progress bar color:
|
|
100
114
|
</div>
|
101
115
|
</template>
|
102
116
|
|
103
|
-
<div id="sliderKnob"
|
117
|
+
<div id="sliderKnob"
|
118
|
+
class="center-justified center horizontal layout"
|
119
|
+
on-down="_knobdown"
|
120
|
+
on-up="_resetKnob"
|
104
121
|
on-track="_onTrack"
|
105
|
-
on-transitionend="_knobTransitionEnd"
|
106
|
-
|
107
|
-
|
108
|
-
<div id="sliderKnobInner" value$="[[immediateValue]]"></div>
|
122
|
+
on-transitionend="_knobTransitionEnd">
|
123
|
+
<paper-ripple id="ink" class="circle" center></paper-ripple>
|
124
|
+
<div id="sliderKnobInner" value$="[[immediateValue]]"></div>
|
109
125
|
</div>
|
110
126
|
</div>
|
111
127
|
|
112
128
|
<template is="dom-if" if="[[editable]]">
|
113
|
-
<paper-input
|
129
|
+
<paper-input
|
130
|
+
id="input"
|
131
|
+
class="slider-input"
|
132
|
+
disabled$="[[disabled]]"
|
133
|
+
on-change="_inputChange">
|
134
|
+
</paper-input>
|
114
135
|
</template>
|
115
|
-
|
116
136
|
</template>
|
137
|
+
|
117
138
|
</dom-module>
|
118
139
|
|
119
140
|
<script>
|
@@ -143,11 +164,12 @@ To change the slider disabled secondary progress bar color:
|
|
143
164
|
|
144
165
|
behaviors: [
|
145
166
|
Polymer.IronRangeBehavior,
|
146
|
-
Polymer.
|
167
|
+
Polymer.IronA11yKeysBehavior,
|
168
|
+
Polymer.IronFormElementBehavior,
|
169
|
+
Polymer.PaperInkyFocusBehavior
|
147
170
|
],
|
148
171
|
|
149
172
|
properties: {
|
150
|
-
|
151
173
|
/**
|
152
174
|
* If true, the slider thumb snaps to tick marks evenly spaced based
|
153
175
|
* on the `step` property value.
|
@@ -160,7 +182,7 @@ To change the slider disabled secondary progress bar color:
|
|
160
182
|
|
161
183
|
/**
|
162
184
|
* If true, a pin with numeric value label is shown when the slider thumb
|
163
|
-
* is pressed.
|
185
|
+
* is pressed. Use for settings for which users need to know the exact
|
164
186
|
* value of the setting.
|
165
187
|
*/
|
166
188
|
pin: {
|
@@ -232,6 +254,7 @@ To change the slider disabled secondary progress bar color:
|
|
232
254
|
},
|
233
255
|
|
234
256
|
markers: {
|
257
|
+
type: Array,
|
235
258
|
readOnly: true,
|
236
259
|
value: []
|
237
260
|
},
|
@@ -245,8 +268,19 @@ To change the slider disabled secondary progress bar color:
|
|
245
268
|
'_immediateValueChanged(immediateValue)'
|
246
269
|
],
|
247
270
|
|
271
|
+
hostAttributes: {
|
272
|
+
role: 'slider',
|
273
|
+
tabindex: 0
|
274
|
+
},
|
275
|
+
|
276
|
+
keyBindings: {
|
277
|
+
'left down pagedown home': '_decrementKey',
|
278
|
+
'right up pageup end': '_incrementKey'
|
279
|
+
},
|
280
|
+
|
248
281
|
ready: function() {
|
249
282
|
// issue polymer/polymer#1305
|
283
|
+
|
250
284
|
this.async(function() {
|
251
285
|
this._updateKnob(this.value);
|
252
286
|
this._updateInputValue();
|
@@ -287,11 +321,12 @@ To change the slider disabled secondary progress bar color:
|
|
287
321
|
},
|
288
322
|
|
289
323
|
_immediateValueChanged: function() {
|
290
|
-
if (
|
324
|
+
if (this.dragging) {
|
325
|
+
this.fire('immediate-value-change');
|
326
|
+
} else {
|
291
327
|
this.value = this.immediateValue;
|
292
328
|
}
|
293
329
|
this._updateInputValue();
|
294
|
-
this.fire('immediate-value-change');
|
295
330
|
},
|
296
331
|
|
297
332
|
_secondaryProgressChanged: function() {
|
@@ -300,23 +335,26 @@ To change the slider disabled secondary progress bar color:
|
|
300
335
|
|
301
336
|
_updateInputValue: function() {
|
302
337
|
if (this.editable) {
|
303
|
-
this.$$('#input').value = this.immediateValue;
|
338
|
+
this.$$('#input').value = this.immediateValue.toString();
|
304
339
|
}
|
305
340
|
},
|
306
341
|
|
307
342
|
_expandKnob: function() {
|
343
|
+
this.$.ink.holdDown = false;
|
308
344
|
this._setExpand(true);
|
309
345
|
},
|
310
346
|
|
311
347
|
_resetKnob: function() {
|
312
|
-
this.
|
348
|
+
this.cancelDebouncer('expandKnob');
|
313
349
|
this._setExpand(false);
|
350
|
+
this.$.ink.hidden = true;
|
314
351
|
},
|
315
352
|
|
316
353
|
_positionKnob: function(ratio) {
|
317
|
-
this._setImmediateValue(this._calcStep(this._calcKnobPosition(ratio))
|
318
|
-
this._setRatio(this.
|
319
|
-
|
354
|
+
this._setImmediateValue(this._calcStep(this._calcKnobPosition(ratio)));
|
355
|
+
this._setRatio(this._calcRatio(this.immediateValue));
|
356
|
+
|
357
|
+
this.$.sliderKnob.style.left = (this.ratio * 100) + '%';
|
320
358
|
},
|
321
359
|
|
322
360
|
_inputChange: function() {
|
@@ -328,75 +366,104 @@ To change the slider disabled secondary progress bar color:
|
|
328
366
|
return (this.max - this.min) * ratio + this.min;
|
329
367
|
},
|
330
368
|
|
331
|
-
_onTrack: function(
|
369
|
+
_onTrack: function(event) {
|
332
370
|
switch (event.detail.state) {
|
333
|
-
case '
|
334
|
-
this.
|
371
|
+
case 'start':
|
372
|
+
this._trackStart(event);
|
335
373
|
break;
|
336
374
|
case 'track':
|
337
375
|
this._trackX(event);
|
338
376
|
break;
|
339
|
-
case '
|
340
|
-
this.
|
377
|
+
case 'end':
|
378
|
+
this._trackEnd();
|
341
379
|
break;
|
342
380
|
}
|
343
381
|
},
|
344
382
|
|
345
|
-
_trackStart: function(
|
383
|
+
_trackStart: function(event) {
|
346
384
|
this._w = this.$.sliderBar.offsetWidth;
|
347
385
|
this._x = this.ratio * this._w;
|
348
386
|
this._startx = this._x || 0;
|
349
387
|
this._minx = - this._startx;
|
350
388
|
this._maxx = this._w - this._startx;
|
351
389
|
this.$.sliderKnob.classList.add('dragging');
|
390
|
+
|
352
391
|
this._setDragging(true);
|
353
|
-
e.preventDefault();
|
354
392
|
},
|
355
393
|
|
356
394
|
_trackX: function(e) {
|
357
395
|
if (!this.dragging) {
|
358
396
|
this._trackStart(e);
|
359
397
|
}
|
360
|
-
|
361
|
-
|
362
|
-
this.
|
363
|
-
|
364
|
-
var
|
365
|
-
|
366
|
-
|
398
|
+
|
399
|
+
var dx = Math.min(this._maxx, Math.max(this._minx, e.detail.dx));
|
400
|
+
this._x = this._startx + dx;
|
401
|
+
|
402
|
+
var immediateValue = this._calcStep(this._calcKnobPosition(this._x / this._w));
|
403
|
+
this._setImmediateValue(immediateValue);
|
404
|
+
|
405
|
+
// update knob's position
|
406
|
+
var translateX = ((this._calcRatio(immediateValue) * this._w) - this._startx);
|
407
|
+
this.translate3d(translateX + 'px', 0, 0, this.$.sliderKnob);
|
367
408
|
},
|
368
409
|
|
369
410
|
_trackEnd: function() {
|
370
|
-
var s =
|
371
|
-
|
411
|
+
var s = this.$.sliderKnob.style;
|
412
|
+
|
372
413
|
this.$.sliderKnob.classList.remove('dragging');
|
373
414
|
this._setDragging(false);
|
374
415
|
this._resetKnob();
|
375
416
|
this.value = this.immediateValue;
|
417
|
+
|
418
|
+
s.transform = s.webkitTransform = '';
|
419
|
+
|
376
420
|
this.fire('change');
|
377
421
|
},
|
378
422
|
|
379
|
-
_knobdown: function(
|
380
|
-
e.preventDefault();
|
423
|
+
_knobdown: function(event) {
|
381
424
|
this._expandKnob();
|
425
|
+
|
426
|
+
// cancel selection
|
427
|
+
event.detail.sourceEvent.preventDefault();
|
428
|
+
|
429
|
+
// set the focus manually because we will called prevent default
|
430
|
+
this.focus();
|
382
431
|
},
|
383
432
|
|
384
|
-
_bardown: function(
|
385
|
-
|
386
|
-
|
433
|
+
_bardown: function(event) {
|
434
|
+
this.$.ink.hidden = true;
|
435
|
+
|
436
|
+
event.preventDefault();
|
437
|
+
|
387
438
|
this._w = this.$.sliderBar.offsetWidth;
|
388
439
|
var rect = this.$.sliderBar.getBoundingClientRect();
|
389
|
-
var ratio = (
|
440
|
+
var ratio = (event.detail.x - rect.left) / this._w;
|
441
|
+
var prevRatio = this.ratio;
|
442
|
+
|
443
|
+
this._setTransiting(true);
|
444
|
+
|
390
445
|
this._positionKnob(ratio);
|
391
|
-
|
446
|
+
|
447
|
+
this.debounce('expandKnob', this._expandKnob, 60);
|
448
|
+
|
449
|
+
// if the ratio doesn't change, sliderKnob's animation won't start
|
450
|
+
// and `_knobTransitionEnd` won't be called
|
451
|
+
// Therefore, we need to manually update the `transiting` state
|
452
|
+
|
453
|
+
if (prevRatio === this.ratio) {
|
454
|
+
this._setTransiting(false);
|
455
|
+
}
|
392
456
|
|
393
457
|
this.async(function() {
|
394
458
|
this.fire('change');
|
395
459
|
});
|
460
|
+
|
461
|
+
// cancel selection
|
462
|
+
event.detail.sourceEvent.preventDefault();
|
396
463
|
},
|
397
464
|
|
398
|
-
_knobTransitionEnd: function(
|
399
|
-
if (
|
465
|
+
_knobTransitionEnd: function(event) {
|
466
|
+
if (event.target === this.$.sliderKnob) {
|
400
467
|
this._setTransiting(false);
|
401
468
|
}
|
402
469
|
},
|
@@ -413,14 +480,14 @@ To change the slider disabled secondary progress bar color:
|
|
413
480
|
_getClassNames: function() {
|
414
481
|
var classes = {};
|
415
482
|
|
416
|
-
classes
|
417
|
-
classes
|
418
|
-
classes
|
419
|
-
classes
|
420
|
-
classes
|
421
|
-
classes
|
422
|
-
classes
|
423
|
-
classes
|
483
|
+
classes.disabled = this.disabled;
|
484
|
+
classes.pin = this.pin;
|
485
|
+
classes.snaps = this.snaps;
|
486
|
+
classes.ring = this.immediateValue <= this.min;
|
487
|
+
classes.expand = this.expand;
|
488
|
+
classes.dragging = this.dragging;
|
489
|
+
classes.transiting = this.transiting;
|
490
|
+
classes.editable = this.editable;
|
424
491
|
|
425
492
|
return Object.keys(classes).filter(
|
426
493
|
function(className) {
|
@@ -428,8 +495,8 @@ To change the slider disabled secondary progress bar color:
|
|
428
495
|
}).join(' ');
|
429
496
|
},
|
430
497
|
|
431
|
-
_incrementKey: function(
|
432
|
-
if (
|
498
|
+
_incrementKey: function(event) {
|
499
|
+
if (event.detail.key === 'end') {
|
433
500
|
this.value = this.max;
|
434
501
|
} else {
|
435
502
|
this.increment();
|
@@ -437,8 +504,8 @@ To change the slider disabled secondary progress bar color:
|
|
437
504
|
this.fire('change');
|
438
505
|
},
|
439
506
|
|
440
|
-
_decrementKey: function(
|
441
|
-
if (
|
507
|
+
_decrementKey: function(event) {
|
508
|
+
if (event.detail.key === 'home') {
|
442
509
|
this.value = this.min;
|
443
510
|
} else {
|
444
511
|
this.decrement();
|
@@ -17,6 +17,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|
17
17
|
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
|
18
18
|
<script src="../../web-component-tester/browser.js"></script>
|
19
19
|
<script src="../../test-fixture/test-fixture-mocha.js"></script>
|
20
|
+
<script src="../../iron-test-helpers/mock-interactions.js"></script>
|
20
21
|
|
21
22
|
<link rel="import" href="../paper-slider.html">
|
22
23
|
<link rel="import" href="../../test-fixture/test-fixture.html">
|
@@ -46,11 +47,11 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|
46
47
|
|
47
48
|
test('set value', function(done) {
|
48
49
|
slider.value = 50;
|
49
|
-
|
50
|
+
flush(function() {
|
50
51
|
assert.equal(slider.value, 50);
|
51
52
|
// test clamp value
|
52
53
|
slider.value = 60.1;
|
53
|
-
|
54
|
+
flush(function() {
|
54
55
|
assert.equal(slider.value, 60);
|
55
56
|
done();
|
56
57
|
});
|
@@ -60,32 +61,32 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|
60
61
|
test('set max', function(done) {
|
61
62
|
slider.max = 10;
|
62
63
|
slider.value = 11;
|
63
|
-
|
64
|
+
flush(function() {
|
64
65
|
assert.equal(slider.value, slider.max);
|
65
66
|
done();
|
66
67
|
});
|
67
68
|
});
|
68
69
|
|
69
|
-
test('
|
70
|
+
test('ratio', function(done) {
|
70
71
|
slider.max = 10;
|
71
72
|
slider.value = 5;
|
72
|
-
|
73
|
+
flush(function() {
|
73
74
|
assert.equal(slider.ratio, 0.5);
|
74
75
|
done();
|
75
76
|
});
|
76
77
|
});
|
77
78
|
|
78
|
-
test('
|
79
|
+
test('snaps', function(done) {
|
79
80
|
slider.snaps = true;
|
80
81
|
slider.step = 10;
|
81
82
|
slider.max = 100;
|
82
83
|
slider.value = 25;
|
83
|
-
|
84
|
+
flush(function() {
|
84
85
|
assert.equal(slider.value, 30);
|
85
86
|
|
86
87
|
slider.value = 51.1;
|
87
88
|
|
88
|
-
|
89
|
+
flush(function() {
|
89
90
|
assert.equal(slider.value, 50);
|
90
91
|
slider.snaps = false;
|
91
92
|
slider.step = 1;
|
@@ -94,10 +95,10 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|
94
95
|
});
|
95
96
|
});
|
96
97
|
|
97
|
-
test('
|
98
|
+
test('secondary progress', function(done) {
|
98
99
|
slider.max = 10;
|
99
100
|
slider.secondaryProgress = 50;
|
100
|
-
|
101
|
+
flush(function() {
|
101
102
|
assert.equal(slider.secondaryProgress, slider.max);
|
102
103
|
done();
|
103
104
|
});
|
@@ -110,7 +111,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|
110
111
|
slider.value = 0;
|
111
112
|
slider.increment();
|
112
113
|
|
113
|
-
|
114
|
+
flush(function() {
|
114
115
|
assert.equal(slider.value, slider.step);
|
115
116
|
slider.step = 1;
|
116
117
|
done();
|
@@ -124,13 +125,59 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|
124
125
|
slider.value = 8;
|
125
126
|
slider.decrement();
|
126
127
|
|
127
|
-
|
128
|
+
flush(function() {
|
128
129
|
assert.equal(slider.value, 6);
|
129
130
|
slider.step = 1;
|
130
131
|
done();
|
131
132
|
});
|
132
133
|
});
|
133
134
|
|
135
|
+
test('editable', function(done) {
|
136
|
+
slider.min = 0;
|
137
|
+
slider.max = 10;
|
138
|
+
slider.step = 1;
|
139
|
+
slider.editable = true;
|
140
|
+
|
141
|
+
flush(function() {
|
142
|
+
slider.value = 2;
|
143
|
+
assert.equal(slider.$$('#input').value, slider.value);
|
144
|
+
done();
|
145
|
+
});
|
146
|
+
});
|
147
|
+
|
148
|
+
test('decimal values', function(done) {
|
149
|
+
slider.min = 0;
|
150
|
+
slider.max = 1;
|
151
|
+
slider.value = slider.min;
|
152
|
+
slider.step = 0.1;
|
153
|
+
|
154
|
+
slider.increment();
|
155
|
+
|
156
|
+
flush(function() {
|
157
|
+
assert.equal(slider.value, slider.step);
|
158
|
+
assert.equal(slider.$.sliderBar.value, slider.step);
|
159
|
+
done();
|
160
|
+
});
|
161
|
+
});
|
162
|
+
|
163
|
+
test('snap to the correct value on tapping', function(done) {
|
164
|
+
var cursor = MockInteractions.topLeftOfNode(slider.$.sliderBar);
|
165
|
+
cursor.x += slider.$.sliderBar.getBoundingClientRect().width * 0.9;
|
166
|
+
|
167
|
+
slider.min = 0;
|
168
|
+
slider.max = 2;
|
169
|
+
slider.step = 1;
|
170
|
+
slider.value = 0;
|
171
|
+
|
172
|
+
MockInteractions.down(slider.$.sliderBar, cursor);
|
173
|
+
|
174
|
+
flush(function() {
|
175
|
+
assert.equal(slider.value, slider.max);
|
176
|
+
slider.step = 1;
|
177
|
+
done();
|
178
|
+
});
|
179
|
+
});
|
180
|
+
|
134
181
|
});
|
135
182
|
|
136
183
|
</script>
|
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: polymer-paper-rails
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 1.0.0.pre.rc.
|
4
|
+
version: 1.0.0.pre.rc.3
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Alex Chaplinsky
|
@@ -30,34 +30,6 @@ dependencies:
|
|
30
30
|
- - ">="
|
31
31
|
- !ruby/object:Gem::Version
|
32
32
|
version: 1.0.3
|
33
|
-
- !ruby/object:Gem::Dependency
|
34
|
-
name: polymer-iron-rails
|
35
|
-
requirement: !ruby/object:Gem::Requirement
|
36
|
-
requirements:
|
37
|
-
- - "~>"
|
38
|
-
- !ruby/object:Gem::Version
|
39
|
-
version: 1.0.0.pre.rc.2
|
40
|
-
type: :runtime
|
41
|
-
prerelease: false
|
42
|
-
version_requirements: !ruby/object:Gem::Requirement
|
43
|
-
requirements:
|
44
|
-
- - "~>"
|
45
|
-
- !ruby/object:Gem::Version
|
46
|
-
version: 1.0.0.pre.rc.2
|
47
|
-
- !ruby/object:Gem::Dependency
|
48
|
-
name: polymer-neon-rails
|
49
|
-
requirement: !ruby/object:Gem::Requirement
|
50
|
-
requirements:
|
51
|
-
- - "~>"
|
52
|
-
- !ruby/object:Gem::Version
|
53
|
-
version: 1.0.0.pre.rc.2
|
54
|
-
type: :runtime
|
55
|
-
prerelease: false
|
56
|
-
version_requirements: !ruby/object:Gem::Requirement
|
57
|
-
requirements:
|
58
|
-
- - "~>"
|
59
|
-
- !ruby/object:Gem::Version
|
60
|
-
version: 1.0.0.pre.rc.2
|
61
33
|
- !ruby/object:Gem::Dependency
|
62
34
|
name: bundler
|
63
35
|
requirement: !ruby/object:Gem::Requirement
|