Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Grid Support #168

Merged
merged 13 commits into from
Apr 19, 2016
Merged

Add Grid Support #168

Changes from 1 commit
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
d6f5949
Add grid mode functionality
jshcrowthe Feb 3, 2016
19bb005
Improve demo for grid layout
Apr 18, 2016
5fdd67f
Remove empty line
Apr 18, 2016
5781cc8
Remove empty line
Apr 18, 2016
b4ac9d3
Fix font sizes in the demo
Apr 18, 2016
b22d964
Fix compiler issue
Apr 18, 2016
50e0b66
https:// -> //
Apr 18, 2016
f07e623
2015 -> 2016
Apr 18, 2016
8dddd1f
Move mixin
Apr 18, 2016
21e25c8
Add subpixel rendering fix (@westbrook), and scrollToIndex positionin…
jshcrowthe Apr 18, 2016
bee7dd3
Use static flicker's _n size suffix (saves 1.3MB first page download)
jshcrowthe Apr 18, 2016
c65aa3d
Minor changes
Apr 18, 2016
21fb477
pidx -> vidx
Apr 19, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 18 additions & 16 deletions iron-list.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -454,12 +454,12 @@
/**
* The width of each grid item
*/
_itemWidth: null,
_itemWidth: 0,

/**
* The width of each grid item
* The height of the row in grid layout.
*/
_rowHeight: null,
_rowHeight: 0,

/**
* The bottom of the physical content.
Expand Down Expand Up @@ -1138,6 +1138,12 @@
}
},

/**
* Returns the virtual index for a given physical index
*
* @param {number} pidx Physical index
* @return {number}
*/
_computeVidx: function(pidx) {
if (pidx >= this._physicalStart) {
return this._virtualStart + (pidx - this._physicalStart);
Expand Down Expand Up @@ -1212,13 +1218,10 @@

_updateGridMetrics: function() {
this._viewportWidth = this._scrollTargetWidth;

// Set item width to the value of the _physicalItems offsetWidth
this._itemWidth = this._physicalCount > 0 ? this._physicalItems[0].offsetWidth : DEFAULT_GRID_SIZE;

// Set row height ot the value of the _physicalItems offsetHeight
// Set row height to the value of the _physicalItems offsetHeight
this._rowHeight = this._physicalCount > 0 ? this._physicalItems[0].offsetHeight : DEFAULT_GRID_SIZE;

// If in grid mode compute how many items with exist in each row
this._itemsPerRow = this._itemWidth ? Math.floor(this._viewportWidth / this._itemWidth) : this._itemsPerRow;
},
Expand All @@ -1230,7 +1233,6 @@
this._adjustScrollPosition();

var y = this._physicalTop;

var totalItemWidth = this._itemsPerRow * this._itemWidth;
var rowOffset = (this._viewportWidth - totalItemWidth) / 2;

Expand All @@ -1239,23 +1241,22 @@
var modulus = vidx % this._itemsPerRow;
var x = Math.floor((modulus * this._itemWidth) + rowOffset);
this.translate3d(x + 'px', y + 'px', 0, this._physicalItems[pidx]);

if (this._shouldRenderNextRow(pidx)) {
y += this._rowHeight;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jshcrowthe question: why were you using the vidx instead of pidx in grid mode?

Copy link
Contributor Author

@jshcrowthe jshcrowthe Apr 19, 2016 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great question!

When iterating through the list from the beginning the value of pidx accurately represents the row breaks in grid mode. However based on the size of the screen the row breaks (as computed by pidx) can occur at the wrong points in the actual list itself. This can result in stacked items. By computing based on vidx we ensure that we are always attempting to move to the next row at the proper "row breaks."

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

that makes sense. sweet!

}
} else {
this.translate3d(0, y + 'px', 0, this._physicalItems[pidx]);
}

if (this._shouldRenderNextRow(this.grid ? vidx : pidx)) {
var increment = parseInt(this.grid ? this._rowHeight : this._physicalSizes[pidx]);
y += isNaN(increment) ? 0 : increment;
y += this._physicalSizes[pidx];
}
});
},

_getPhysicalSizeIncrement: function(pidx, incrementAtEndOfRow) {
_getPhysicalSizeIncrement: function(pidx) {
if (!this.grid) {
return this._physicalSizes[pidx];
}
var vidx = this._computeVidx(pidx);
if (vidx % this._itemsPerRow !== (this._itemsPerRow - 1)) {
if (this._computeVidx(pidx) % this._itemsPerRow !== this._itemsPerRow - 1) {
return 0;
}
return this._rowHeight;
Expand All @@ -1266,6 +1267,7 @@
* whether or not the next index will need
* to be rendered on a new row.
*
* @param {number} pidx Physical index
* @return {boolean}
*/
_shouldRenderNextRow: function(pidx) {
Expand Down