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

Unified Diff: third_party/polymer/v1_0/components-chromium/paper-slider/paper-slider-extracted.js

Issue 1187823002: Update Polymer components and re-run reproduce.sh (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Rebase Created 5 years, 6 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 side-by-side diff with in-line comments
Download patch
Index: third_party/polymer/v1_0/components-chromium/paper-slider/paper-slider-extracted.js
diff --git a/third_party/polymer/v1_0/components-chromium/paper-slider/paper-slider-extracted.js b/third_party/polymer/v1_0/components-chromium/paper-slider/paper-slider-extracted.js
index f69a9d7197afc19c205dd9946149da72225462e3..b50d22fc69f6b189fa6a95f86ef84f9a559d6bad 100644
--- a/third_party/polymer/v1_0/components-chromium/paper-slider/paper-slider-extracted.js
+++ b/third_party/polymer/v1_0/components-chromium/paper-slider/paper-slider-extracted.js
@@ -25,11 +25,12 @@
behaviors: [
Polymer.IronRangeBehavior,
- Polymer.IronControlState
+ Polymer.IronA11yKeysBehavior,
+ Polymer.IronFormElementBehavior,
+ Polymer.PaperInkyFocusBehavior
],
properties: {
-
/**
* If true, the slider thumb snaps to tick marks evenly spaced based
* on the `step` property value.
@@ -42,7 +43,7 @@
/**
* If true, a pin with numeric value label is shown when the slider thumb
- * is pressed. Use for settings for which users need to know the exact
+ * is pressed. Use for settings for which users need to know the exact
* value of the setting.
*/
pin: {
@@ -114,6 +115,7 @@
},
markers: {
+ type: Array,
readOnly: true,
value: []
},
@@ -127,8 +129,19 @@
'_immediateValueChanged(immediateValue)'
],
+ hostAttributes: {
+ role: 'slider',
+ tabindex: 0
+ },
+
+ keyBindings: {
+ 'left down pagedown home': '_decrementKey',
+ 'right up pageup end': '_incrementKey'
+ },
+
ready: function() {
// issue polymer/polymer#1305
+
this.async(function() {
this._updateKnob(this.value);
this._updateInputValue();
@@ -169,11 +182,12 @@
},
_immediateValueChanged: function() {
- if (!this.dragging) {
+ if (this.dragging) {
+ this.fire('immediate-value-change');
+ } else {
this.value = this.immediateValue;
}
this._updateInputValue();
- this.fire('immediate-value-change');
},
_secondaryProgressChanged: function() {
@@ -182,23 +196,26 @@
_updateInputValue: function() {
if (this.editable) {
- this.$$('#input').value = this.immediateValue;
+ this.$$('#input').value = this.immediateValue.toString();
}
},
_expandKnob: function() {
+ this.$.ink.holdDown = false;
this._setExpand(true);
},
_resetKnob: function() {
- this._expandJob && this._expandJob.stop();
+ this.cancelDebouncer('expandKnob');
this._setExpand(false);
+ this.$.ink.hidden = true;
},
_positionKnob: function(ratio) {
- this._setImmediateValue(this._calcStep(this._calcKnobPosition(ratio)) || 0);
- this._setRatio(this.snaps ? this._calcRatio(this.immediateValue) : ratio);
- this.$.sliderKnob.style.left = this.ratio * 100 + '%';
+ this._setImmediateValue(this._calcStep(this._calcKnobPosition(ratio)));
+ this._setRatio(this._calcRatio(this.immediateValue));
+
+ this.$.sliderKnob.style.left = (this.ratio * 100) + '%';
},
_inputChange: function() {
@@ -210,75 +227,104 @@
return (this.max - this.min) * ratio + this.min;
},
- _onTrack: function(e) {
+ _onTrack: function(event) {
switch (event.detail.state) {
- case 'end':
- this._trackEnd(event);
+ case 'start':
+ this._trackStart(event);
break;
case 'track':
this._trackX(event);
break;
- case 'start':
- this._trackStart(event);
+ case 'end':
+ this._trackEnd();
break;
}
},
- _trackStart: function(e) {
+ _trackStart: function(event) {
this._w = this.$.sliderBar.offsetWidth;
this._x = this.ratio * this._w;
this._startx = this._x || 0;
this._minx = - this._startx;
this._maxx = this._w - this._startx;
this.$.sliderKnob.classList.add('dragging');
+
this._setDragging(true);
- e.preventDefault();
},
_trackX: function(e) {
if (!this.dragging) {
this._trackStart(e);
}
- var x = Math.min(this._maxx, Math.max(this._minx, e.detail.dx));
- this._x = this._startx + x;
- this._setImmediateValue(this._calcStep(
- this._calcKnobPosition(this._x / this._w)) || 0);
- var s = this.$.sliderKnob.style;
- s.transform = s.webkitTransform = 'translate3d(' + (this.snaps ?
- (this._calcRatio(this.immediateValue) * this._w) - this._startx : x) + 'px, 0, 0)';
+
+ var dx = Math.min(this._maxx, Math.max(this._minx, e.detail.dx));
+ this._x = this._startx + dx;
+
+ var immediateValue = this._calcStep(this._calcKnobPosition(this._x / this._w));
+ this._setImmediateValue(immediateValue);
+
+ // update knob's position
+ var translateX = ((this._calcRatio(immediateValue) * this._w) - this._startx);
+ this.translate3d(translateX + 'px', 0, 0, this.$.sliderKnob);
},
_trackEnd: function() {
- var s = this.$.sliderKnob.style;
- s.transform = s.webkitTransform = '';
+ var s = this.$.sliderKnob.style;
+
this.$.sliderKnob.classList.remove('dragging');
this._setDragging(false);
this._resetKnob();
this.value = this.immediateValue;
+
+ s.transform = s.webkitTransform = '';
+
this.fire('change');
},
- _knobdown: function(e) {
- e.preventDefault();
+ _knobdown: function(event) {
this._expandKnob();
+
+ // cancel selection
+ event.detail.sourceEvent.preventDefault();
+
+ // set the focus manually because we will called prevent default
+ this.focus();
},
- _bardown: function(e) {
- e.preventDefault();
- this._setTransiting(true);
+ _bardown: function(event) {
+ this.$.ink.hidden = true;
+
+ event.preventDefault();
+
this._w = this.$.sliderBar.offsetWidth;
var rect = this.$.sliderBar.getBoundingClientRect();
- var ratio = (e.detail.x - rect.left) / this._w;
+ var ratio = (event.detail.x - rect.left) / this._w;
+ var prevRatio = this.ratio;
+
+ this._setTransiting(true);
+
this._positionKnob(ratio);
- this._expandJob = this.debounce(this._expandJob, this._expandKnob, 60);
+
+ this.debounce('expandKnob', this._expandKnob, 60);
+
+ // if the ratio doesn't change, sliderKnob's animation won't start
+ // and `_knobTransitionEnd` won't be called
+ // Therefore, we need to manually update the `transiting` state
+
+ if (prevRatio === this.ratio) {
+ this._setTransiting(false);
+ }
this.async(function() {
this.fire('change');
});
+
+ // cancel selection
+ event.detail.sourceEvent.preventDefault();
},
- _knobTransitionEnd: function(e) {
- if (e.target === this.$.sliderKnob) {
+ _knobTransitionEnd: function(event) {
+ if (event.target === this.$.sliderKnob) {
this._setTransiting(false);
}
},
@@ -295,14 +341,14 @@
_getClassNames: function() {
var classes = {};
- classes['disabled'] = this.disabled;
- classes['pin'] = this.pin;
- classes['snaps'] = this.snaps;
- classes['ring'] = this.immediateValue <= this.min;
- classes['expand'] = this.expand;
- classes['dragging'] = this.dragging;
- classes['transiting'] = this.transiting;
- classes['editable'] = this.editable;
+ classes.disabled = this.disabled;
+ classes.pin = this.pin;
+ classes.snaps = this.snaps;
+ classes.ring = this.immediateValue <= this.min;
+ classes.expand = this.expand;
+ classes.dragging = this.dragging;
+ classes.transiting = this.transiting;
+ classes.editable = this.editable;
return Object.keys(classes).filter(
function(className) {
@@ -310,8 +356,8 @@
}).join(' ');
},
- _incrementKey: function(ev, keys) {
- if (keys.key === 'end') {
+ _incrementKey: function(event) {
+ if (event.detail.key === 'end') {
this.value = this.max;
} else {
this.increment();
@@ -319,8 +365,8 @@
this.fire('change');
},
- _decrementKey: function(ev, keys) {
- if (keys.key === 'home') {
+ _decrementKey: function(event) {
+ if (event.detail.key === 'home') {
this.value = this.min;
} else {
this.decrement();

Powered by Google App Engine
This is Rietveld 408576698