Title: [143911] trunk/Source/WebCore
- Revision
- 143911
- Author
- [email protected]
- Date
- 2013-02-25 05:20:09 -0800 (Mon, 25 Feb 2013)
Log Message
Add a scrollbar class for the new calendar picker
https://bugs.webkit.org/show_bug.cgi?id=110589
Reviewed by Kent Tamura.
Adding a scrollbar to be used in the new calendar picker (Bug 109439).
No new tests. Code is not used yet.
* Resources/pagepopups/calendarPicker.js:
(ScrubbyScrollBar):
(ScrubbyScrollBar.prototype.height):
(ScrubbyScrollBar.prototype.setHeight):
(ScrubbyScrollBar.prototype.setThumbHeight): Sets the height of the scroll bar thumb.
(ScrubbyScrollBar.prototype._setThumbPositionFromEvent): Sets the thumb position from a mouse event.
(ScrubbyScrollBar.prototype.onMouseDown):
(ScrubbyScrollBar.prototype.onWindowMouseMove):
(ScrubbyScrollBar.prototype.onWindowMouseUp):
(ScrubbyScrollBar.prototype.onThumbStyleTopAnimationStep): Animates the thumb back to the center position.
(ScrubbyScrollBar.prototype.onScrollTimer): Fires repeatedly while the thumb is being dragged.
Modified Paths
Diff
Modified: trunk/Source/WebCore/ChangeLog (143910 => 143911)
--- trunk/Source/WebCore/ChangeLog 2013-02-25 13:16:00 UTC (rev 143910)
+++ trunk/Source/WebCore/ChangeLog 2013-02-25 13:20:09 UTC (rev 143911)
@@ -1,3 +1,26 @@
+2013-02-25 Keishi Hattori <[email protected]>
+
+ Add a scrollbar class for the new calendar picker
+ https://bugs.webkit.org/show_bug.cgi?id=110589
+
+ Reviewed by Kent Tamura.
+
+ Adding a scrollbar to be used in the new calendar picker (Bug 109439).
+
+ No new tests. Code is not used yet.
+
+ * Resources/pagepopups/calendarPicker.js:
+ (ScrubbyScrollBar):
+ (ScrubbyScrollBar.prototype.height):
+ (ScrubbyScrollBar.prototype.setHeight):
+ (ScrubbyScrollBar.prototype.setThumbHeight): Sets the height of the scroll bar thumb.
+ (ScrubbyScrollBar.prototype._setThumbPositionFromEvent): Sets the thumb position from a mouse event.
+ (ScrubbyScrollBar.prototype.onMouseDown):
+ (ScrubbyScrollBar.prototype.onWindowMouseMove):
+ (ScrubbyScrollBar.prototype.onWindowMouseUp):
+ (ScrubbyScrollBar.prototype.onThumbStyleTopAnimationStep): Animates the thumb back to the center position.
+ (ScrubbyScrollBar.prototype.onScrollTimer): Fires repeatedly while the thumb is being dragged.
+
2013-02-25 Ilya Tikhonovsky <[email protected]>
Unreviewed. Fix of closure type annotations.
Modified: trunk/Source/WebCore/Resources/pagepopups/calendarPicker.js (143910 => 143911)
--- trunk/Source/WebCore/Resources/pagepopups/calendarPicker.js 2013-02-25 13:16:00 UTC (rev 143910)
+++ trunk/Source/WebCore/Resources/pagepopups/calendarPicker.js 2013-02-25 13:20:09 UTC (rev 143911)
@@ -1722,6 +1722,165 @@
/**
* @constructor
+ * @extends View
+ * @param {!ScrollView} scrollView
+ */
+function ScrubbyScrollBar(scrollView) {
+ View.call(this, createElement("div", ScrubbyScrollBar.ClassNameScrubbyScrollBar));
+
+ /**
+ * @type {!Element}
+ * @const
+ */
+ this.thumb = createElement("div", ScrubbyScrollBar.ClassNameScrubbyScrollThumb);
+ this.element.appendChild(this.thumb);
+
+ /**
+ * @type {!ScrollView}
+ * @const
+ */
+ this.scrollView = scrollView;
+
+ /**
+ * @type {!number}
+ * @protected
+ */
+ this._height = 0;
+ /**
+ * @type {!number}
+ * @protected
+ */
+ this._thumbHeight = 0;
+ /**
+ * @type {!number}
+ * @protected
+ */
+ this._thumbPosition = 0;
+
+ this.setHeight(0);
+ this.setThumbHeight(ScrubbyScrollBar.ThumbHeight);
+
+ /**
+ * @type {?Animator}
+ * @protected
+ */
+ this._thumbStyleTopAnimator = null;
+
+ /**
+ * @type {?number}
+ * @protected
+ */
+ this._timer = null;
+
+ this.element.addEventListener("mousedown", this.onMouseDown, false);
+}
+
+ScrubbyScrollBar.prototype = Object.create(View.prototype);
+
+ScrubbyScrollBar.ScrollInterval = 16;
+ScrubbyScrollBar.ThumbMargin = 2;
+ScrubbyScrollBar.ThumbHeight = 30;
+ScrubbyScrollBar.ClassNameScrubbyScrollBar = "scrubby-scroll-bar";
+ScrubbyScrollBar.ClassNameScrubbyScrollThumb = "scrubby-scroll-thumb";
+
+/**
+ * @return {!number} Height of the view in pixels.
+ */
+ScrubbyScrollBar.prototype.height = function() {
+ return this._height;
+};
+
+/**
+ * @param {!number} height Height of the view in pixels.
+ */
+ScrubbyScrollBar.prototype.setHeight = function(height) {
+ if (this._height === height)
+ return;
+ this._height = height;
+ this.element.style.height = this._height + "px";
+ this.thumb.style.top = ((this._height - this._thumbHeight) / 2) + "px";
+ this._thumbPosition = 0;
+};
+
+/**
+ * @param {!number} height Height of the scroll bar thumb in pixels.
+ */
+ScrubbyScrollBar.prototype.setThumbHeight = function(height) {
+ if (this._thumbHeight === height)
+ return;
+ this._thumbHeight = height;
+ this.thumb.style.height = this._thumbHeight + "px";
+ this.thumb.style.top = ((this._height - this._thumbHeight) / 2) + "px";
+ this._thumbPosition = 0;
+};
+
+/**
+ * @param {?Event} event
+ */
+ScrubbyScrollBar.prototype._setThumbPositionFromEvent = function(event) {
+ var thumbMin = ScrubbyScrollBar.ThumbMargin;
+ var thumbMax = this._height - this._thumbHeight - ScrubbyScrollBar.ThumbMargin * 2;
+ var y = event.clientY - this.element.getBoundingClientRect().top - this.element.clientTop + this.element.scrollTop;
+ var thumbPosition = y - this._thumbHeight / 2;
+ thumbPosition = Math.max(thumbPosition, thumbMin);
+ thumbPosition = Math.min(thumbPosition, thumbMax);
+ this.thumb.style.top = thumbPosition + "px";
+ this._thumbPosition = 1.0 - (thumbPosition - thumbMin) / (thumbMax - thumbMin) * 2;
+};
+
+/**
+ * @param {?Event} event
+ */
+ScrubbyScrollBar.prototype._onMouseDown_ = function(event) {
+ this._setThumbPositionFromEvent(event);
+
+ window.addEventListener("mousemove", this.onWindowMouseMove, false);
+ window.addEventListener("mouseup", this.onWindowMouseUp, false);
+ if (this._thumbStyleTopAnimator)
+ this._thumbStyleTopAnimator.stop();
+ this._timer = setInterval(this.onScrollTimer, ScrubbyScrollBar.ScrollInterval);
+};
+
+/**
+ * @param {?Event} event
+ */
+ScrubbyScrollBar.prototype._onWindowMouseMove_ = function(event) {
+ this._setThumbPositionFromEvent(event);
+};
+
+/**
+ * @param {?Event} event
+ */
+ScrubbyScrollBar.prototype._onWindowMouseUp_ = function(event) {
+ this._thumbStyleTopAnimator = new Animator();
+ this._thumbStyleTopAnimator.step = this.onThumbStyleTopAnimationStep;
+ this._thumbStyleTopAnimator.setFrom(this.thumb.offsetTop);
+ this._thumbStyleTopAnimator.setTo((this._height - this._thumbHeight) / 2);
+ this._thumbStyleTopAnimator.timingFunction = AnimationTimingFunction.EaseInOut;
+ this._thumbStyleTopAnimator.duration = 100;
+ this._thumbStyleTopAnimator.start();
+
+ window.removeEventListener("mousemove", this.onWindowMouseMove, false);
+ window.removeEventListener("mouseup", this.onWindowMouseUp, false);
+ clearInterval(this._timer);
+};
+
+/**
+ * @param {!Animator} animator
+ */
+ScrubbyScrollBar.prototype._onThumbStyleTopAnimationStep_ = function(animator) {
+ this.thumb.style.top = animator.currentValue + "px";
+};
+
+ScrubbyScrollBar.prototype._onScrollTimer_ = function() {
+ var scrollAmount = Math.pow(this._thumbPosition, 2) * 10;
+ if (this._thumbPosition > 0)
+ scrollAmount = -scrollAmount;
+ this.scrollView.scrollBy(scrollAmount, false);
+};
+
+/**
+ * @constructor
* @param {!Element} element
* @param {!Object} config
*/
_______________________________________________
webkit-changes mailing list
[email protected]
https://lists.webkit.org/mailman/listinfo/webkit-changes
