Changeset 143723 in webkit

Timestamp:

Feb 22, 2013 5:44:06 AM (11 years ago)

Author:

keishi@webkit.org

Message:

Add scroll view for new calendar picker
​https://bugs.webkit.org/show_bug.cgi?id=110137

Reviewed by Kent Tamura.

Adding a scroll view class as part of the new calendar picker (Bug 109439).

No new tests. Code not yet used.

• Resources/pagepopups/calendarPicker.js:

(View):
(View.prototype.offsetRelativeTo): Returns the offset position of this view relative to the given ancestor element.
(View.prototype.attachTo): Attaches view to a node or view.
(View.prototype.bindCallbackMethods): Binds all methods starting with "on" to this.
(ScrollView): A custom scroll view that can contain extremely long content. CSS values have a limit. This can go beyond that.
(ScrollView.prototype.setWidth): Sets the view width.
(ScrollView.prototype.width):
(ScrollView.prototype.setHeight):Sets the view height.
(ScrollView.prototype.height):
(ScrollView.prototype.onScrollAnimatorStep): Callback for scroll animator step.
(ScrollView.prototype.scrollTo): Scrolls to a certain offset.
(ScrollView.prototype.scrollBy): Scrolls by a certain amount.
(ScrollView.prototype.contentOffset): Current content offset.
(ScrollView.prototype.onMouseWheel): Scroll with the mouse wheel.
(ScrollView.prototype.setContentOffset): Sets the content offset.
(ScrollView.prototype.contentPositionForContentOffset): Returns where the content element should be positioned.

Location:

trunk/Source/WebCore

Files:

• ChangeLog (modified) (1 diff)
• Resources/pagepopups/calendarPicker.js (modified) (1 diff)

trunk/Source/WebCore/ChangeLog

@@ +1 @@
+2013-02-22  Keishi Hattori  <keishi@webkit.org>
+
+        Add scroll view for new calendar picker
+        https://bugs.webkit.org/show_bug.cgi?id=110137
+
+        Reviewed by Kent Tamura.
+
+        Adding a scroll view class as part of the new calendar picker (Bug 109439).
+
+        No new tests. Code not yet used.
+
+        * Resources/pagepopups/calendarPicker.js:
+        (View):
+        (View.prototype.offsetRelativeTo): Returns the offset position of this view relative to the given ancestor element.
+        (View.prototype.attachTo): Attaches view to a node or view.
+        (View.prototype.bindCallbackMethods): Binds all methods starting with "on" to this.
+        (ScrollView): A custom scroll view that can contain extremely long content. CSS values have a limit. This can go beyond that.
+        (ScrollView.prototype.setWidth): Sets the view width.
+        (ScrollView.prototype.width):
+        (ScrollView.prototype.setHeight):Sets the view height.
+        (ScrollView.prototype.height):
+        (ScrollView.prototype.onScrollAnimatorStep): Callback for scroll animator step.
+        (ScrollView.prototype.scrollTo): Scrolls to a certain offset.
+        (ScrollView.prototype.scrollBy): Scrolls by a certain amount.
+        (ScrollView.prototype.contentOffset): Current content offset.
+        (ScrollView.prototype.onMouseWheel): Scroll with the mouse wheel.
+        (ScrollView.prototype.setContentOffset): Sets the content offset.
+        (ScrollView.prototype.contentPositionForContentOffset): Returns where the content element should be positioned.
+
 2013-02-22  Alexander Pavlov  <apavlov@chromium.org>
 

trunk/Source/WebCore/Resources/pagepopups/calendarPicker.js

@@ -890 +890 @@
     this.step(this);
     this._lastStepTime = now;
+};
+
+/**
+ * @constructor
+ * @extends EventEmitter
+ * @param {?Element} element
+ * View adds itself as a property on the element so we can access it from Event.target.
+ */
+function View(element) {
+    EventEmitter.call(this);
+    /**
+     * @type {Element}
+     * @const
+     */
+    this.element = element || createElement("div");
+    this.element.$view = this;
+    this.bindCallbackMethods();
+}
+
+View.prototype = Object.create(EventEmitter.prototype);
+
+/**
+ * @param {!Element} ancestorElement
+ * @return {?Object}
+ */
+View.prototype.offsetRelativeTo = function(ancestorElement) {
+    var x = 0;
+    var y = 0;
+    var element = this.element;
+    while (element) {
+        x += element.offsetLeft  || 0;
+        y += element.offsetTop || 0;
+        element = element.offsetParent;
+        if (element === ancestorElement)
+            return {x: x, y: y};
+    }
+    return null;
+};
+
+/**
+ * @param {!View|Node} parent
+ * @param {?View|Node=} before
+ */
+View.prototype.attachTo = function(parent, before) {
+    if (parent instanceof View)
+        return this.attachTo(parent.element, before);
+    if (typeof before === "undefined")
+        before = null;
+    if (before instanceof View)
+        before = before.element;
+    parent.insertBefore(this.element, before);
+};
+
+View.prototype.bindCallbackMethods = function() {
+    for (var methodName in this) {
+        if (!/^on[A-Z]/.test(methodName))
+            continue;
+        if (this.hasOwnProperty(methodName))
+            continue;
+        var method = this[methodName];
+        if (!(method instanceof Function))
+            continue;
+        this[methodName] = method.bind(this);
+    }
+};
+
+/**
+ * @constructor
+ * @extends View
+ */
+function ScrollView() {
+    View.call(this, createElement("div", ScrollView.ClassNameScrollView));
+    /**
+     * @type {Element}
+     * @const
+     */
+    this.contentElement = createElement("div", ScrollView.ClassNameScrollViewContent);
+    this.element.appendChild(this.contentElement);
+    /**
+     * @type {number}
+     */
+    this.minimumContentOffset = -Infinity;
+    /**
+     * @type {number}
+     */
+    this.maximumContentOffset = Infinity;
+    /**
+     * @type {number}
+     * @protected
+     */
+    this._contentOffset = 0;
+    /**
+     * @type {number}
+     * @protected
+     */
+    this._width = 0;
+    /**
+     * @type {number}
+     * @protected
+     */
+    this._height = 0;
+    /**
+     * @type {Animator}
+     * @protected
+     */
+    this._scrollAnimator = new Animator();
+    this._scrollAnimator.step = this.onScrollAnimatorStep;
+
+    /**
+     * @type {?Object}
+     */
+    this.delegate = null;
+
+    this.element.addEventListener("mousewheel", this.onMouseWheel, false);
+
+    /**
+     * The content offset is partitioned so the it can go beyond the CSS limit
+     * of 33554433px.
+     * @type {number}
+     * @protected
+     */
+    this._partitionNumber = 0;
+}
+
+ScrollView.prototype = Object.create(View.prototype);
+
+ScrollView.PartitionHeight = 100000;
+ScrollView.ClassNameScrollView = "scroll-view";
+ScrollView.ClassNameScrollViewContent = "scroll-view-content";
+
+/**
+ * @param {!number} width
+ */
+ScrollView.prototype.setWidth = function(width) {
+    console.assert(isFinite(width));
+    if (this._width === width)
+        return;
+    this._width = width;
+    this.element.style.width = this._width + "px";
+};
+
+/**
+ * @return {!number}
+ */
+ScrollView.prototype.width = function() {
+    return this._width;
+};
+
+/**
+ * @param {!number} height
+ */
+ScrollView.prototype.setHeight = function(height) {
+    console.assert(isFinite(height));
+    if (this._height === height)
+        return;
+    this._height = height;
+    this.element.style.height = height + "px";
+    if (this.delegate)
+        this.delegate.scrollViewDidChangeHeight(this);
+};
+
+/**
+ * @return {!number}
+ */
+ScrollView.prototype.height = function() {
+    return this._height;
+};
+
+/**
+ * @param {!Animator} animator
+ */
+ScrollView.prototype.onScrollAnimatorStep = function(animator) {
+    this.setContentOffset(animator.currentValue);
+};
+
+/**
+ * @param {!number} offset
+ * @param {?boolean} animate
+ */
+ScrollView.prototype.scrollTo = function(offset, animate) {
+    console.assert(isFinite(offset));
+    if (!animate) {
+        this.setContentOffset(offset);
+        return;
+    }
+    this._scrollAnimator.setFrom(this._contentOffset);
+    this._scrollAnimator.setTo(offset);
+    this._scrollAnimator.duration = 300;
+    this._scrollAnimator.start();
+};
+
+/**
+ * @param {!number} offset
+ * @param {?boolean} animate
+ */
+ScrollView.prototype.scrollBy = function(offset, animate) {
+    this.scrollTo(this._contentOffset + offset, animate);
+};
+
+/**
+ * @return {!number}
+ */
+ScrollView.prototype.contentOffset = function() {
+    return this._contentOffset;
+};
+
+/**
+ * @param {?Event} event
+ */
+ScrollView.prototype.onMouseWheel = function(event) {
+    this.setContentOffset(this._contentOffset - event.wheelDelta / 30);
+    event.stopPropagation();
+    event.preventDefault();
+};
+
+
+/**
+ * @param {!number} value
+ */
+ScrollView.prototype.setContentOffset = function(value) {
+    console.assert(isFinite(value));
+    value = Math.min(this.maximumContentOffset - this._height, Math.max(this.minimumContentOffset, Math.floor(value)));
+    if (this._contentOffset === value)
+        return;
+    var newPartitionNumber = Math.floor(value / ScrollView.PartitionHeight);    
+    var partitionChanged = this._partitionNumber !== newPartitionNumber;
+    this._partitionNumber = newPartitionNumber;
+    this._contentOffset = value;
+    this.contentElement.style.webkitTransform = "translate(0, " + (-this.contentPositionForContentOffset(this._contentOffset)) + "px)";
+    if (this.delegate) {
+        this.delegate.scrollViewDidChangeContentOffset(this);
+        if (partitionChanged)
+            this.delegate.scrollViewDidChangePartition(this);
+    }
+};
+
+/**
+ * @param {!number} offset
+ */
+ScrollView.prototype.contentPositionForContentOffset = function(offset) {
+    return offset - this._partitionNumber * ScrollView.PartitionHeight;
 };