Changeset 143901 in webkit

Timestamp:

Feb 25, 2013 3:31:09 AM (11 years ago)

Author:

keishi@webkit.org

Message:

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

Reviewed by Kent Tamura.

Adding list view class to be used in the new calendar picker (Bug 109439).

No new tests. Code is not yet used.

• Resources/pagepopups/calendarPicker.js:

(ListCell): One row inside the list view. We reuse
list cells to avoid animation hiccups caused by memory allocation.
(ListCell.prototype._recycleBin): Returns array to
store thrown away list cells so we can reuse them.
(ListCell.prototype.throwAway): Hides the cell and puts it in the recycle bin.
(ListCell.prototype.show):
(ListCell.prototype.hide): Hide the cell when we don't need the cell any more.
(ListCell.prototype.width):
(ListCell.prototype.setWidth):
(ListCell.prototype.position):
(ListCell.prototype.setPosition): Sets the CSS transform to position the cell.
(ListCell.prototype.setSelected): Adds selected CSS class.
(ListView): Shows a scrolling list.
(ListView.prototype.onAnimationFrameWillFinish): Calls updateCells if the cells need to be updated.
(ListView.prototype.setNeedsUpdateCells): Mark the cells as need to be updated.
(ListView.prototype.cellAtRow): Returns the cell at a given row. If the cell is not visible and doesn't exist, returns undefined.
(ListView.prototype.rowAtScrollOffset): The row that is displayed at the given scroll offset.
(ListView.prototype.scrollOffsetForRow): The scroll offset for the top of a given row.
(ListView.prototype.addCellIfNecessary): Adds the cell for a given row.
(ListView.prototype.prepareNewCell): Prepares a new or recycled cell for a given row.
(ListView.prototype.throwAwayCell): Throws a way a cell.
(ListView.prototype.firstVisibleRow): The first visible row at the top of the view.
(ListView.prototype.lastVisibleRow): The last visible row at the bottom of the view.
(ListView.prototype.scrollViewDidChangeContentOffset):
(ListView.prototype.scrollViewDidChangeHeight):
(ListView.prototype.scrollViewDidChangePartition):
(ListView.prototype.updateCells): Updates all the cells that are visible.
(ListView.prototype.width):
(ListView.prototype.setWidth):
(ListView.prototype.height):
(ListView.prototype.setHeight):
(ListView.prototype.onClick): Clicking on a row selects it.
(ListView.prototype.select):
(ListView.prototype.deselect):
(ListView.prototype.scrollToRow): Scrolls to a given row.

Location:

trunk/Source/WebCore

Files:

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

trunk/Source/WebCore/ChangeLog

@@ +1 @@
+2013-02-25  Keishi Hattori  <keishi@webkit.org>
+
+        Add list view for new calendar picker
+        https://bugs.webkit.org/show_bug.cgi?id=110140
+
+        Reviewed by Kent Tamura.
+
+        Adding list view class to be used in the new calendar picker (Bug 109439).
+
+        No new tests. Code is not yet used.
+
+        * Resources/pagepopups/calendarPicker.js:
+        (ListCell): One row inside the list view. We reuse
+        list cells to avoid animation hiccups caused by memory allocation.
+        (ListCell.prototype._recycleBin): Returns array to
+        store thrown away list cells so we can reuse them.
+        (ListCell.prototype.throwAway): Hides the cell and puts it in the recycle bin.
+        (ListCell.prototype.show):
+        (ListCell.prototype.hide): Hide the cell when we don't need the cell any more.
+        (ListCell.prototype.width):
+        (ListCell.prototype.setWidth):
+        (ListCell.prototype.position):
+        (ListCell.prototype.setPosition): Sets the CSS transform to position the cell.
+        (ListCell.prototype.setSelected): Adds selected CSS class.
+        (ListView): Shows a scrolling list.
+        (ListView.prototype.onAnimationFrameWillFinish): Calls updateCells if the cells need to be updated.
+        (ListView.prototype.setNeedsUpdateCells): Mark the cells as need to be updated.
+        (ListView.prototype.cellAtRow): Returns the cell at a given row. If the cell is not visible and doesn't exist, returns undefined.
+        (ListView.prototype.rowAtScrollOffset): The row that is displayed at the given scroll offset.
+        (ListView.prototype.scrollOffsetForRow): The scroll offset for the top of a given row.
+        (ListView.prototype.addCellIfNecessary): Adds the cell for a given row.
+        (ListView.prototype.prepareNewCell): Prepares a new or recycled cell for a given row.
+        (ListView.prototype.throwAwayCell): Throws a way a cell.
+        (ListView.prototype.firstVisibleRow): The first visible row at the top of the view.
+        (ListView.prototype.lastVisibleRow): The last visible row at the bottom of the view.
+        (ListView.prototype.scrollViewDidChangeContentOffset):
+        (ListView.prototype.scrollViewDidChangeHeight):
+        (ListView.prototype.scrollViewDidChangePartition):
+        (ListView.prototype.updateCells): Updates all the cells that are visible.
+        (ListView.prototype.width):
+        (ListView.prototype.setWidth):
+        (ListView.prototype.height):
+        (ListView.prototype.setHeight):
+        (ListView.prototype.onClick): Clicking on a row selects it.
+        (ListView.prototype.select):
+        (ListView.prototype.deselect):
+        (ListView.prototype.scrollToRow): Scrolls to a given row.
+
 2013-02-25  Alexei Filippov  <alph@chromium.org>
 

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

@@ -1362 +1362 @@
 ScrollView.prototype.contentPositionForContentOffset = function(offset) {
     return offset - this._partitionNumber * ScrollView.PartitionHeight;
+};
+
+/**
+ * @constructor
+ * @extends View
+ */
+function ListCell() {
+    View.call(this, createElement("div", ListCell.ClassNameListCell));
+    
+    /**
+     * @type {!number}
+     */
+    this.row = NaN;
+    /**
+     * @type {!number}
+     */
+    this._width = 0;
+    /**
+     * @type {!number}
+     */
+    this._position = 0;
+}
+
+ListCell.prototype = Object.create(View.prototype);
+
+ListCell.DefaultRecycleBinLimit = 64;
+ListCell.ClassNameListCell = "list-cell";
+ListCell.ClassNameHidden = "hidden";
+
+/**
+ * @return {!Array} An array to keep thrown away cells.
+ */
+ListCell.prototype._recycleBin = function() {
+    console.assert(false, "NOT REACHED: ListCell.prototype._recycleBin needs to be overridden.");
+    return [];
+};
+
+ListCell.prototype.throwAway = function() {
+    this.hide();
+    var limit = typeof this.constructor.RecycleBinLimit === "undefined" ? ListCell.DefaultRecycleBinLimit : this.constructor.RecycleBinLimit;
+    var recycleBin = this._recycleBin();
+    if (recycleBin.length < limit)
+        recycleBin.push(this);
+};
+
+ListCell.prototype.show = function() {
+    this.element.classList.remove(ListCell.ClassNameHidden);
+};
+
+ListCell.prototype.hide = function() {
+    this.element.classList.add(ListCell.ClassNameHidden);
+};
+
+/**
+ * @return {!number} Width in pixels.
+ */
+ListCell.prototype.width = function(){
+    return this._width;
+};
+
+/**
+ * @param {!number} width Width in pixels.
+ */
+ListCell.prototype.setWidth = function(width){
+    if (this._width === width)
+        return;
+    this._width = width;
+    this.element.style.width = this._width + "px";
+};
+
+/**
+ * @return {!number} Position in pixels.
+ */
+ListCell.prototype.position = function(){
+    return this._position;
+};
+
+/**
+ * @param {!number} y Position in pixels.
+ */
+ListCell.prototype.setPosition = function(y) {
+    if (this._position === y)
+        return;
+    this._position = y;
+    this.element.style.webkitTransform = "translate(0, " + this._position + "px)";
+};
+
+/**
+ * @param {!boolean} selected
+ */
+ListCell.prototype.setSelected = function(selected) {
+    if (this._selected === selected)
+        return;
+    this._selected = selected;
+    if (this._selected)
+        this.element.classList.add("selected");
+    else
+        this.element.classList.remove("selected");
+};
+
+/**
+ * @constructor
+ * @extends View
+ */
+function ListView() {
+    View.call(this, createElement("div", ListView.ClassNameListView));
+    this.element.tabIndex = 0;
+
+    /**
+     * @type {!number}
+     * @private
+     */
+    this._width = 0;
+    /**
+     * @type {!Object}
+     * @private
+     */
+    this._cells = {};
+
+    /**
+     * @type {!number}
+     */
+    this.selectedRow = ListView.NoSelection;
+
+    /**
+     * @type {!ScrollView}
+     */
+    this.scrollView = new ScrollView();
+    this.scrollView.delegate = this;
+    this.scrollView.minimumContentOffset = 0;
+    this.scrollView.setWidth(0);
+    this.scrollView.setHeight(0);
+    this.scrollView.attachTo(this);
+
+    this.element.addEventListener("click", this.onClick, false);
+
+    /**
+     * @type {!boolean}
+     * @private
+     */
+    this._needsUpdateCells = false;
+}
+
+ListView.prototype = Object.create(View.prototype);
+
+ListView.NoSelection = -1;
+ListView.ClassNameListView = "list-view";
+
+ListView.prototype.onAnimationFrameWillFinish = function() {
+    if (this._needsUpdateCells)
+        this.updateCells();
+};
+
+/**
+ * @param {!boolean} needsUpdateCells
+ */
+ListView.prototype.setNeedsUpdateCells = function(needsUpdateCells) {
+    if (this._needsUpdateCells === needsUpdateCells)
+        return;
+    this._needsUpdateCells = needsUpdateCells;
+    if (this._needsUpdateCells)
+        AnimationManager.shared.on(AnimationManager.EventTypeAnimationFrameWillFinish, this.onAnimationFrameWillFinish);
+    else
+        AnimationManager.shared.removeListener(AnimationManager.EventTypeAnimationFrameWillFinish, this.onAnimationFrameWillFinish);
+};
+
+/**
+ * @param {!number} row
+ * @return {?ListCell}
+ */
+ListView.prototype.cellAtRow = function(row) {
+    return this._cells[row];
+};
+
+/**
+ * @param {!number} offset Scroll offset in pixels.
+ * @return {!number}
+ */
+ListView.prototype.rowAtScrollOffset = function(offset) {
+    console.assert(false, "NOT REACHED: ListView.prototype.rowAtScrollOffset needs to be overridden.");
+    return 0;
+};
+
+/**
+ * @param {!number} row
+ * @return {!number} Scroll offset in pixels.
+ */
+ListView.prototype.scrollOffsetForRow = function(row) {
+    console.assert(false, "NOT REACHED: ListView.prototype.scrollOffsetForRow needs to be overridden.");
+    return 0;
+};
+
+/**
+ * @param {!number} row
+ * @return {!ListCell}
+ */
+ListView.prototype.addCellIfNecessary = function(row) {
+    var cell = this._cells[row];
+    if (cell)
+        return cell;
+    cell = this.prepareNewCell(row);
+    cell.attachTo(this.scrollView.contentElement);
+    cell.setWidth(this._width);
+    cell.setPosition(this.scrollView.contentPositionForContentOffset(this.scrollOffsetForRow(row)));
+    this._cells[row] = cell;
+    return cell;
+};
+
+/**
+ * @param {!number} row
+ * @return {!ListCell}
+ */
+ListView.prototype.prepareNewCell = function(row) {
+    console.assert(false, "NOT REACHED: ListView.prototype.prepareNewCell should be overridden.");
+    return new ListCell();
+};
+
+/**
+ * @param {!ListCell} cell
+ */
+ListView.prototype.throwAwayCell = function(cell) {
+    delete this._cells[cell.row];
+    cell.throwAway();
+};
+
+/**
+ * @return {!number}
+ */
+ListView.prototype.firstVisibleRow = function() {
+    return this.rowAtScrollOffset(this.scrollView.contentOffset());
+};
+
+/**
+ * @return {!number}
+ */
+ListView.prototype.lastVisibleRow = function() {
+    return this.rowAtScrollOffset(this.scrollView.contentOffset() + this.scrollView.height() - 1);
+};
+
+/**
+ * @param {!ScrollView} scrollView
+ */
+ListView.prototype.scrollViewDidChangeContentOffset = function(scrollView) {
+    this.setNeedsUpdateCells(true);
+};
+
+/**
+ * @param {!ScrollView} scrollView
+ */
+ListView.prototype.scrollViewDidChangeHeight = function(scrollView) {
+    this.setNeedsUpdateCells(true);
+};
+
+/**
+ * @param {!ScrollView} scrollView
+ */
+ListView.prototype.scrollViewDidChangePartition = function(scrollView) {
+    this.setNeedsUpdateCells(true);
+};
+
+ListView.prototype.updateCells = function() {
+    var firstVisibleRow = this.firstVisibleRow();
+    var lastVisibleRow = this.lastVisibleRow();
+    console.assert(firstVisibleRow <= lastVisibleRow);
+    for (var c in this._cells) {
+        var cell = this._cells[c];
+        if (cell.row < firstVisibleRow || cell.row > lastVisibleRow)
+            this.throwAwayCell(cell);
+    }
+    for (var i = firstVisibleRow; i <= lastVisibleRow; ++i) {
+        var cell = this._cells[i];
+        if (cell)
+            cell.setPosition(this.scrollView.contentPositionForContentOffset(this.scrollOffsetForRow(cell.row)));
+        else
+            this.addCellIfNecessary(i);
+    }
+    this.setNeedsUpdateCells(false);
+};
+
+/**
+ * @return {!number} Width in pixels.
+ */
+ListView.prototype.width = function() {
+    return this._width;
+};
+
+/**
+ * @param {!number} width Width in pixels.
+ */
+ListView.prototype.setWidth = function(width) {
+    if (this._width === width)
+        return;
+    this._width = width;
+    this.scrollView.setWidth(this._width);
+    for (var c in this._cells) {
+        this._cells[c].setWidth(this._width);
+    }
+    this.element.style.width = this._width + "px";
+    this.setNeedsUpdateCells(true);
+};
+
+/**
+ * @return {!number} Height in pixels.
+ */
+ListView.prototype.height = function() {
+    return this.scrollView.height();
+};
+
+/**
+ * @param {!number} height Height in pixels.
+ */
+ListView.prototype.setHeight = function(height) {
+    this.scrollView.setHeight(height);
+};
+
+/**
+ * @param {?Event} event
+ */
+ListView.prototype.onClick = function(event) {
+    var clickedCellElement = enclosingNodeOrSelfWithClass(event.target, ListCell.ClassNameListCell);
+    if (!clickedCellElement)
+        return;
+    var clickedCell = clickedCellElement.$view;
+    if (clickedCell.row !== this.selectedRow)
+        this.select(clickedCell.row);
+};
+
+/**
+ * @param {!number} row
+ */
+ListView.prototype.select = function(row) {
+    if (this.selectedRow === row)
+        return;
+    this.deselect();
+    if (row === ListView.NoSelection)
+        return;
+    this.selectedRow = row;
+    var selectedCell = this._cells[this.selectedRow];
+    if (selectedCell)
+        selectedCell.setSelected(true);
+};
+
+ListView.prototype.deselect = function() {
+    if (this.selectedRow === ListView.NoSelection)
+        return;
+    var selectedCell = this._cells[this.selectedRow];
+    if (selectedCell)
+        selectedCell.setSelected(false);
+    this.selectedRow = ListView.NoSelection;
+};
+
+/**
+ * @param {!number} row
+ * @param {!boolean} animate
+ */
+ListView.prototype.scrollToRow = function(row, animate) {
+    this.scrollView.scrollTo(this.scrollOffsetForRow(row), animate);
 };