Title: [143723] trunk/Source/WebCore
- Revision
- 143723
- Author
- [email protected]
- Date
- 2013-02-22 05:44:06 -0800 (Fri, 22 Feb 2013)
Log 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.
Modified Paths
Diff
Modified: trunk/Source/WebCore/ChangeLog (143722 => 143723)
--- trunk/Source/WebCore/ChangeLog 2013-02-22 13:42:18 UTC (rev 143722)
+++ trunk/Source/WebCore/ChangeLog 2013-02-22 13:44:06 UTC (rev 143723)
@@ -1,3 +1,32 @@
+2013-02-22 Keishi Hattori <[email protected]>
+
+ 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 <[email protected]>
Web Inspector: InspectorPageAgent::disable() should not update view metrics regardless of the override state
Modified: trunk/Source/WebCore/Resources/pagepopups/calendarPicker.js (143722 => 143723)
--- trunk/Source/WebCore/Resources/pagepopups/calendarPicker.js 2013-02-22 13:42:18 UTC (rev 143722)
+++ trunk/Source/WebCore/Resources/pagepopups/calendarPicker.js 2013-02-22 13:44:06 UTC (rev 143723)
@@ -893,6 +893,247 @@
/**
* @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;
+};
+
+/**
+ * @constructor
* @param {!Element} element
* @param {!Object} config
*/
_______________________________________________
webkit-changes mailing list
[email protected]
https://lists.webkit.org/mailman/listinfo/webkit-changes
