Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(423)

Side by Side Diff: third_party/polymer/v1_0/components/paper-slider/paper-slider.html

Issue 1221923003: Update bower.json for Polymer elements and add PRESUBMIT.py (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: rebase Created 5 years, 5 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
1 <!-- 1 <!--
2 @license 2 @license
3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
4 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE 4 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt
5 The complete set of authors may be found at http://polymer.github.io/AUTHORS 5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
6 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS 6 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt
7 Code distributed by Google as part of the polymer project is also 7 Code distributed by Google as part of the polymer project is also
8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS 8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt
9 --> 9 -->
10 10
11 <link rel="import" href="../polymer/polymer.html"> 11 <link rel="import" href="../polymer/polymer.html">
12 <link rel="import" href="../paper-styles/paper-styles.html"> 12 <link rel="import" href="../paper-styles/paper-styles.html">
13 <link rel="import" href="../paper-progress/paper-progress.html"> 13 <link rel="import" href="../paper-progress/paper-progress.html">
14 <link rel="import" href="../paper-input/paper-input.html"> 14 <link rel="import" href="../paper-input/paper-input.html">
15 <link rel="import" href="../paper-behaviors/paper-inky-focus-behavior.html"> 15 <link rel="import" href="../paper-behaviors/paper-inky-focus-behavior.html">
16 <link rel="import" href="../paper-ripple/paper-ripple.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 "> 17 <link rel="import" href="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html ">
18 <link rel="import" href="../iron-range-behavior/iron-range-behavior.html">
18 <link rel="import" href="../iron-form-element-behavior/iron-form-element-behavio r.html"> 19 <link rel="import" href="../iron-form-element-behavior/iron-form-element-behavio r.html">
19 20
20 <!-- 21 <!--
21 `paper-slider` allows user to select a value from a range of values by 22 `paper-slider` allows user to select a value from a range of values by
22 moving the slider thumb. The interactive nature of the slider makes it a 23 moving the slider thumb. The interactive nature of the slider makes it a
23 great choice for settings that reflect intensity levels, such as volume, 24 great choice for settings that reflect intensity levels, such as volume,
24 brightness, or color saturation. 25 brightness, or color saturation.
25 26
26 Example: 27 Example:
27 28
28 <paper-slider></paper-slider> 29 <paper-slider></paper-slider>
29 30
30 Use `min` and `max` to specify the slider range. Default is 0 to 100. 31 Use `min` and `max` to specify the slider range. Default is 0 to 100.
31 32
32 Example: 33 Example:
33 34
34 <paper-slider min="10" max="200" value="110"></paper-slider> 35 <paper-slider min="10" max="200" value="110"></paper-slider>
35 36
36 Styling slider: 37 ### Styling
37 38
38 To change the slider progress bar color: 39 The following custom properties and mixins are available for styling:
39 40
40 paper-slider { 41 Custom property | Description | Default
41 --paper-slider-active-color: #0f9d58; 42 ----------------|-------------|----------
42 } 43 `--paper-slider-bar-color` | The background color of the slider | `transparent`
43 44 `--paper-slider-active-color` | The progress bar color | `--google-blue-700`
44 To change the slider knob color: 45 `--paper-slider-secondary-color` | The secondary progress bar color | `--google- blue-300`
45 46 `--paper-slider-knob-color` | The knob color | `--google-blue-700`
46 paper-slider { 47 `--paper-slider-disabled-knob-color` | The disabled knob color | `--google-grey- 500`
47 --paper-slider-knob-color: #0f9d58; 48 `--paper-slider-pin-color` | The pin color | `--google-blue-700`
48 } 49 `--paper-slider-font-color` | The pin's text color | `#fff`
49 50 `--paper-slider-disabled-active-color` | The disabled progress bar color | `--go ogle-grey-500`
50 To change the slider pin color: 51 `--paper-slider-disabled-secondary-color` | The disabled secondary progress bar color | `--google-grey-300`
51
52 paper-slider {
53 --paper-slider-pin-color: #0f9d58;
54 }
55
56 To change the slider pin's font color:
57
58 paper-slider {
59 --paper-slider-pin-font-color: #0f9d58;
60 }
61
62 To change the slider secondary progress bar color:
63
64 paper-slider {
65 --paper-slider-secondary-color: #0f9d58;
66 }
67
68 To change the slider disabled active color:
69
70 paper-slider {
71 --paper-slider-disabled-active-color: #ccc;
72 }
73
74 To change the slider disabled secondary progress bar color:
75
76 paper-slider {
77 --paper-slider-disabled-secondary-color: #ccc;
78 }
79 52
80 @group Paper Elements 53 @group Paper Elements
81 @element paper-slider 54 @element paper-slider
82 @demo demo/index.html 55 @demo demo/index.html
83 @hero hero.svg 56 @hero hero.svg
84 --> 57 -->
85 58
86 <dom-module id="paper-slider"> 59 <dom-module id="paper-slider">
87 60
88 <link rel="import" type="css" href="paper-slider.css"> 61 <link rel="import" type="css" href="paper-slider.css">
(...skipping 24 matching lines...) Expand all
113 </template> 86 </template>
114 </div> 87 </div>
115 </template> 88 </template>
116 89
117 <div id="sliderKnob" 90 <div id="sliderKnob"
118 class="center-justified center horizontal layout" 91 class="center-justified center horizontal layout"
119 on-down="_knobdown" 92 on-down="_knobdown"
120 on-up="_resetKnob" 93 on-up="_resetKnob"
121 on-track="_onTrack" 94 on-track="_onTrack"
122 on-transitionend="_knobTransitionEnd"> 95 on-transitionend="_knobTransitionEnd">
123 <paper-ripple id="ink" class="circle" center></paper-ripple> 96 <paper-ripple id="ink" class="circle" center hidden$="[[!receivedFocus FromKeyboard]]"></paper-ripple>
124 <div id="sliderKnobInner" value$="[[immediateValue]]"></div> 97 <div id="sliderKnobInner" value$="[[immediateValue]]"></div>
125 </div> 98 </div>
126 </div> 99 </div>
127 100
128 <template is="dom-if" if="[[editable]]"> 101 <template is="dom-if" if="[[editable]]">
129 <paper-input 102 <paper-input
130 id="input" 103 id="input"
131 class="slider-input" 104 class="slider-input"
132 disabled$="[[disabled]]" 105 disabled$="[[disabled]]"
133 on-change="_inputChange"> 106 on-change="_inputChange">
134 </paper-input> 107 </paper-input>
135 </template> 108 </template>
136 </template> 109 </template>
137 110
138 </dom-module> 111 </dom-module>
139 112
140 <script> 113 <script>
141 /**
142 * Fired when the slider's value changes.
143 *
144 * @event value-change
145 */
146
147 /**
148 * Fired when the slider's immediateValue changes.
149 *
150 * @event immediate-value-change
151 */
152
153 /**
154 * Fired when the slider's value changes due to user interaction.
155 *
156 * Changes to the slider's value due to changes in an underlying
157 * bound variable will not trigger this event.
158 *
159 * @event change
160 */
161 114
162 Polymer({ 115 Polymer({
163 is: 'paper-slider', 116 is: 'paper-slider',
164 117
165 behaviors: [ 118 behaviors: [
166 Polymer.IronRangeBehavior,
167 Polymer.IronA11yKeysBehavior, 119 Polymer.IronA11yKeysBehavior,
120 Polymer.PaperInkyFocusBehavior,
168 Polymer.IronFormElementBehavior, 121 Polymer.IronFormElementBehavior,
169 Polymer.PaperInkyFocusBehavior 122 Polymer.IronRangeBehavior
170 ], 123 ],
171 124
172 properties: { 125 properties: {
126
173 /** 127 /**
174 * If true, the slider thumb snaps to tick marks evenly spaced based 128 * If true, the slider thumb snaps to tick marks evenly spaced based
175 * on the `step` property value. 129 * on the `step` property value.
176 */ 130 */
177 snaps: { 131 snaps: {
178 type: Boolean, 132 type: Boolean,
179 value: false, 133 value: false,
180 notify: true 134 notify: true
181 }, 135 },
182 136
(...skipping 90 matching lines...) Expand 10 before | Expand all | Expand 10 after
273 tabindex: 0 227 tabindex: 0
274 }, 228 },
275 229
276 keyBindings: { 230 keyBindings: {
277 'left down pagedown home': '_decrementKey', 231 'left down pagedown home': '_decrementKey',
278 'right up pageup end': '_incrementKey' 232 'right up pageup end': '_incrementKey'
279 }, 233 },
280 234
281 ready: function() { 235 ready: function() {
282 // issue polymer/polymer#1305 236 // issue polymer/polymer#1305
283
284 this.async(function() { 237 this.async(function() {
285 this._updateKnob(this.value); 238 this._updateKnob(this.value);
286 this._updateInputValue(); 239 this._updateInputValue();
287 }, 1); 240 }, 1);
288 }, 241 },
289 242
290 /** 243 /**
291 * Increases value by `step` but not above `max`. 244 * Increases value by `step` but not above `max`.
292 * @method increment 245 * @method increment
293 */ 246 */
(...skipping 39 matching lines...) Expand 10 before | Expand all | Expand 10 after
333 this.secondaryProgress = this._clampValue(this.secondaryProgress); 286 this.secondaryProgress = this._clampValue(this.secondaryProgress);
334 }, 287 },
335 288
336 _updateInputValue: function() { 289 _updateInputValue: function() {
337 if (this.editable) { 290 if (this.editable) {
338 this.$$('#input').value = this.immediateValue.toString(); 291 this.$$('#input').value = this.immediateValue.toString();
339 } 292 }
340 }, 293 },
341 294
342 _expandKnob: function() { 295 _expandKnob: function() {
343 this.$.ink.holdDown = false;
344 this._setExpand(true); 296 this._setExpand(true);
345 }, 297 },
346 298
347 _resetKnob: function() { 299 _resetKnob: function() {
348 this.cancelDebouncer('expandKnob'); 300 this.cancelDebouncer('expandKnob');
349 this._setExpand(false); 301 this._setExpand(false);
350 this.$.ink.hidden = true;
351 }, 302 },
352 303
353 _positionKnob: function(ratio) { 304 _positionKnob: function(ratio) {
354 this._setImmediateValue(this._calcStep(this._calcKnobPosition(ratio))); 305 this._setImmediateValue(this._calcStep(this._calcKnobPosition(ratio)));
355 this._setRatio(this._calcRatio(this.immediateValue)); 306 this._setRatio(this._calcRatio(this.immediateValue));
356 307
357 this.$.sliderKnob.style.left = (this.ratio * 100) + '%'; 308 this.$.sliderKnob.style.left = (this.ratio * 100) + '%';
358 }, 309 },
359 310
360 _inputChange: function() { 311 _inputChange: function() {
(...skipping 63 matching lines...) Expand 10 before | Expand all | Expand 10 after
424 this._expandKnob(); 375 this._expandKnob();
425 376
426 // cancel selection 377 // cancel selection
427 event.detail.sourceEvent.preventDefault(); 378 event.detail.sourceEvent.preventDefault();
428 379
429 // set the focus manually because we will called prevent default 380 // set the focus manually because we will called prevent default
430 this.focus(); 381 this.focus();
431 }, 382 },
432 383
433 _bardown: function(event) { 384 _bardown: function(event) {
434 this.$.ink.hidden = true;
435
436 event.preventDefault();
437
438 this._w = this.$.sliderBar.offsetWidth; 385 this._w = this.$.sliderBar.offsetWidth;
439 var rect = this.$.sliderBar.getBoundingClientRect(); 386 var rect = this.$.sliderBar.getBoundingClientRect();
440 var ratio = (event.detail.x - rect.left) / this._w; 387 var ratio = (event.detail.x - rect.left) / this._w;
441 var prevRatio = this.ratio; 388 var prevRatio = this.ratio;
442 389
443 this._setTransiting(true); 390 this._setTransiting(true);
444 391
445 this._positionKnob(ratio); 392 this._positionKnob(ratio);
446 393
447 this.debounce('expandKnob', this._expandKnob, 60); 394 this.debounce('expandKnob', this._expandKnob, 60);
(...skipping 57 matching lines...) Expand 10 before | Expand all | Expand 10 after
505 }, 452 },
506 453
507 _decrementKey: function(event) { 454 _decrementKey: function(event) {
508 if (event.detail.key === 'home') { 455 if (event.detail.key === 'home') {
509 this.value = this.min; 456 this.value = this.min;
510 } else { 457 } else {
511 this.decrement(); 458 this.decrement();
512 } 459 }
513 this.fire('change'); 460 this.fire('change');
514 } 461 }
515 }) 462 });
463
464 /**
465 * Fired when the slider's value changes.
466 *
467 * @event value-change
468 */
469
470 /**
471 * Fired when the slider's immediateValue changes.
472 *
473 * @event immediate-value-change
474 */
475
476 /**
477 * Fired when the slider's value changes due to user interaction.
478 *
479 * Changes to the slider's value due to changes in an underlying
480 * bound variable will not trigger this event.
481 *
482 * @event change
483 */
484
516 </script> 485 </script>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698