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

Side by Side Diff: polymer_0.5.0/bower_components/paper-slider/paper-slider.html

Issue 786953007: npm_modules: Fork bower_components into Polymer 0.4.0 and 0.5.0 versions (Closed) Base URL: https://chromium.googlesource.com/infra/third_party/npm_modules.git@master
Patch Set: Created 5 years, 11 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 Copyright (c) 2014 The Polymer Project Authors. All rights reserved. 2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
3 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt 3 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt
4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
5 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt 5 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt
6 Code distributed by Google as part of the polymer project is also 6 Code distributed by Google as part of the polymer project is also
7 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt 7 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt
8 --> 8 -->
9 9
10 <!-- 10 <!--
(...skipping 25 matching lines...) Expand all
36 paper-slider::shadow #sliderKnobInner { 36 paper-slider::shadow #sliderKnobInner {
37 background-color: #0f9d58; 37 background-color: #0f9d58;
38 } 38 }
39 39
40 To change the slider pin color: 40 To change the slider pin color:
41 41
42 paper-slider::shadow #sliderKnobInner::before { 42 paper-slider::shadow #sliderKnobInner::before {
43 background-color: #0f9d58; 43 background-color: #0f9d58;
44 } 44 }
45 45
46 To change the slider pin's value: 46 To change the slider pin's font color:
47 47
48 paper-slider::shadow #sliderKnobInner::after { 48 paper-slider::shadow #sliderKnob > #sliderKnobInner::after {
49 color: #0f9d58 49 color: #0f9d58
50 } 50 }
51 51
52 To change the slider secondary progress bar color: 52 To change the slider secondary progress bar color:
53 53
54 paper-slider::shadow #sliderBar::shadow #secondaryProgress { 54 paper-slider::shadow #sliderBar::shadow #secondaryProgress {
55 background-color: #0f9d58; 55 background-color: #0f9d58;
56 } 56 }
57 57
58 @group Paper Elements 58 @group Paper Elements
(...skipping 25 matching lines...) Expand all
84 </div> 84 </div>
85 85
86 <template if="{{snaps && !disabled}}"> 86 <template if="{{snaps && !disabled}}">
87 <div class="slider-markers" horizontal layout> 87 <div class="slider-markers" horizontal layout>
88 <template repeat="{{markers}}"> 88 <template repeat="{{markers}}">
89 <div flex class="slider-marker"></div> 89 <div flex class="slider-marker"></div>
90 </template> 90 </template>
91 </div> 91 </div>
92 </template> 92 </template>
93 93
94 <div id="sliderKnob" on-down="{{expandKnob}}" on-up="{{resetKnob}}" 94 <div id="sliderKnob" on-down="{{knobdown}}" on-up="{{resetKnob}}"
95 on-trackstart="{{trackStart}}" on-trackx="{{trackx}}" on-trackend="{{tra ckEnd}}" 95 on-trackstart="{{trackStart}}" on-trackx="{{trackx}}" on-trackend="{{tra ckEnd}}"
96 on-transitionend="{{knobTransitionEnd}}" 96 on-transitionend="{{knobTransitionEnd}}"
97 center-justified center horizontal layout> 97 center-justified center horizontal layout>
98 98
99 <div id="sliderKnobInner" value="{{immediateValue}}"></div> 99 <div id="sliderKnobInner" value="{{immediateValue}}"></div>
100 100
101 </div> 101 </div>
102 102
103 </div> 103 </div>
104 104
105 <template if="{{editable}}"> 105 <template if="{{editable}}">
106 <paper-input id="input" class="slider-input" value="{{immediateValue}}" disa bled?="{{disabled}}" on-change="{{inputChange}}"></paper-input> 106 <paper-input id="input" class="slider-input" value="{{immediateValue}}" disa bled?="{{disabled}}" on-change="{{inputChange}}"></paper-input>
107 </template> 107 </template>
108 108
109 </template> 109 </template>
110 <script> 110 <script>
111 111
112 Polymer('paper-slider', { 112 Polymer('paper-slider', {
113 113
114 /** 114 /**
115 * Fired when the slider's value changes. 115 * Fired when the slider's value changes.
116 * 116 *
117 * @event core-change 117 * @event core-change
118 */ 118 */
119
120 /**
121 * Fired when the slider's immediateValue changes.
122 *
123 * @event immediate-value-change
124 */
119 125
120 /** 126 /**
121 * Fired when the slider's value changes due to user interaction. 127 * Fired when the slider's value changes due to user interaction.
122 * 128 *
123 * Changes to the slider's value due to changes in an underlying 129 * Changes to the slider's value due to changes in an underlying
124 * bound variable will not trigger this event. 130 * bound variable will not trigger this event.
125 * 131 *
126 * @event change 132 * @event change
127 */ 133 */
128 134
(...skipping 48 matching lines...) Expand 10 before | Expand all | Expand 10 after
177 183
178 /** 184 /**
179 * The immediate value of the slider. This value is updated while the user 185 * The immediate value of the slider. This value is updated while the user
180 * is dragging the slider. 186 * is dragging the slider.
181 * 187 *
182 * @attribute immediateValue 188 * @attribute immediateValue
183 * @type number 189 * @type number
184 * @default 0 190 * @default 0
185 */ 191 */
186 192
193 maxMarkers: 100,
194
187 observe: { 195 observe: {
188 'step snaps': 'update' 196 'step snaps': 'update'
189 }, 197 },
190 198
191 ready: function() { 199 ready: function() {
192 this.update(); 200 this.update();
193 }, 201 },
194 202
195 update: function() { 203 update: function() {
196 this.positionKnob(this.calcRatio(this.value)); 204 this.positionKnob(this.calcRatio(this.value));
(...skipping 21 matching lines...) Expand all
218 this.removeAttribute('tabindex'); 226 this.removeAttribute('tabindex');
219 } else { 227 } else {
220 this.tabIndex = 0; 228 this.tabIndex = 0;
221 } 229 }
222 }, 230 },
223 231
224 immediateValueChanged: function() { 232 immediateValueChanged: function() {
225 if (!this.dragging) { 233 if (!this.dragging) {
226 this.value = this.immediateValue; 234 this.value = this.immediateValue;
227 } 235 }
236 this.fire('immediate-value-change');
228 }, 237 },
229 238
230 expandKnob: function() { 239 expandKnob: function() {
231 this.expand = true; 240 this.expand = true;
232 }, 241 },
233 242
234 resetKnob: function() { 243 resetKnob: function() {
235 this.expandJob && this.expandJob.stop(); 244 this.expandJob && this.expandJob.stop();
236 this.expand = false; 245 this.expand = false;
237 }, 246 },
(...skipping 36 matching lines...) Expand 10 before | Expand all | Expand 10 after
274 283
275 trackEnd: function() { 284 trackEnd: function() {
276 var s = this.$.sliderKnob.style; 285 var s = this.$.sliderKnob.style;
277 s.transform = s.webkitTransform = ''; 286 s.transform = s.webkitTransform = '';
278 this.$.sliderKnob.classList.remove('dragging'); 287 this.$.sliderKnob.classList.remove('dragging');
279 this.dragging = false; 288 this.dragging = false;
280 this.resetKnob(); 289 this.resetKnob();
281 this.value = this.immediateValue; 290 this.value = this.immediateValue;
282 this.fire('change'); 291 this.fire('change');
283 }, 292 },
293
294 knobdown: function(e) {
295 e.preventDefault();
296 this.expandKnob();
297 },
284 298
285 bardown: function(e) { 299 bardown: function(e) {
300 e.preventDefault();
286 this.transiting = true; 301 this.transiting = true;
287 this._w = this.$.sliderBar.offsetWidth; 302 this._w = this.$.sliderBar.offsetWidth;
288 var rect = this.$.sliderBar.getBoundingClientRect(); 303 var rect = this.$.sliderBar.getBoundingClientRect();
289 var ratio = (e.x - rect.left) / this._w; 304 var ratio = (e.x - rect.left) / this._w;
290 this.positionKnob(ratio); 305 this.positionKnob(ratio);
291 this.expandJob = this.job(this.expandJob, this.expandKnob, 60); 306 this.expandJob = this.job(this.expandJob, this.expandKnob, 60);
292 this.fire('change'); 307 this.fire('change');
293 }, 308 },
294 309
295 knobTransitionEnd: function(e) { 310 knobTransitionEnd: function(e) {
296 if (e.target === this.$.sliderKnob) { 311 if (e.target === this.$.sliderKnob) {
297 this.transiting = false; 312 this.transiting = false;
298 } 313 }
299 }, 314 },
300 315
301 updateMarkers: function() { 316 updateMarkers: function() {
302 this.markers = [], l = (this.max - this.min) / this.step; 317 this.markers = [];
318 var l = (this.max - this.min) / this.step;
319 if (!this.snaps && l > this.maxMarkers) {
320 return;
321 }
303 for (var i = 0; i < l; i++) { 322 for (var i = 0; i < l; i++) {
304 this.markers.push(''); 323 this.markers.push('');
305 } 324 }
306 }, 325 },
307 326
308 increment: function() { 327 increment: function() {
309 this.value = this.clampValue(this.value + this.step); 328 this.value = this.clampValue(this.value + this.step);
310 }, 329 },
311 330
312 decrement: function() { 331 decrement: function() {
(...skipping 15 matching lines...) Expand all
328 } else { 347 } else {
329 this.decrement(); 348 this.decrement();
330 } 349 }
331 this.fire('change'); 350 this.fire('change');
332 } 351 }
333 352
334 }); 353 });
335 354
336 </script> 355 </script>
337 </polymer-element> 356 </polymer-element>
OLDNEW
« no previous file with comments | « polymer_0.5.0/bower_components/paper-slider/paper-slider.css ('k') | polymer_0.5.0/bower_components/paper-spinner/.bower.json » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698