polymer-paper-rails 1.0.0.pre.rc.2 → 1.0.0.pre.rc.3
Sign up to get free protection for your applications and to get access to all the features.
- 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
|