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

Grid list: Handle tile order and length changes #962

Merged
merged 5 commits into from
Jul 24, 2018
Merged

Grid list: Handle tile order and length changes #962

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
7c0f8ea
Add failing tests for tile order and length changes
Subtletree Sep 11, 2017
c5e5a62
Expose didUpdate callback on grid-list update
Subtletree Sep 19, 2017
1f2e31f
remove layout-padding remnant
Subtletree Sep 19, 2017
559a658
Sort tiles by dom order on grid-list didUpdate
Subtletree Sep 19, 2017
de67fee
Add tests for basic grid-list attributes
Subtletree Sep 19, 2017
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
42 changes: 26 additions & 16 deletions addon/components/paper-grid-list.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,9 +47,11 @@ export default Component.extend(ParentMixin, {
this._installMediaListener();
},

didUpdateAttrs() {
didUpdate() {
this._super(...arguments);
this.updateGrid();

// Debounces until the next run loop
run.debounce(this, this.updateGrid, 0);
},

willDestroyElement() {
Expand All @@ -66,13 +68,14 @@ export default Component.extend(ParentMixin, {

// Sets mediaList to a property so removeListener can access it
this.set(`${listenerName}List`, mediaList);

// Creates a function based on mediaName so that removeListener can remove it.
this.set(listenerName, run.bind(this, (result) => {
this._mediaDidChange(mediaName, result.matches);
}));

// Calls '_mediaDidChange' once
this[listenerName](mediaList);
// Trigger initial grid calculations
this._mediaDidChange(mediaName, mediaList.matches);

mediaList.addListener(this[listenerName]);
}
Expand All @@ -88,23 +91,23 @@ export default Component.extend(ParentMixin, {

_mediaDidChange(mediaName, matches) {
this.set(mediaName, matches);
run.debounce(this, this._updateCurrentMedia, 50);

// Debounces until the next run loop
run.debounce(this, this._updateCurrentMedia, 0);
},

_updateCurrentMedia() {
let mediaPriorities = this.get('constants.MEDIA_PRIORITY');
let currentMedia = mediaPriorities.filter((mediaName) => {
return this.get(mediaName);
});
let currentMedia = mediaPriorities.filter((mediaName) => this.get(mediaName));
this.set('currentMedia', currentMedia);
this.updateGrid();
},

// Updates styles and triggers onUpdate callbacks
updateGrid() {
this.$().css(this._gridStyle());
this.get('tiles').forEach((tile) => {
tile.$().css(tile._tileStyle());
});
this.get('tiles').forEach((tile) => tile.updateTile());
this.sendAction('onUpdate');
},

_gridStyle() {
Expand Down Expand Up @@ -135,7 +138,8 @@ export default Component.extend(ParentMixin, {
break;
}
case 'fit': {
// noop, as the height is user set
// rowHeight is container height
style.height = '100%';
break;
}
}
Expand All @@ -145,16 +149,22 @@ export default Component.extend(ParentMixin, {

// Calculates tile positions
_setTileLayout() {
let tiles = this.get('tiles');
let tiles = this.orderedTiles();
let layoutInfo = gridLayout(this.get('currentCols'), tiles);

tiles.forEach((tile, i) => {
tile.set('position', layoutInfo.positions[i]);
});
tiles.forEach((tile, i) => tile.set('position', layoutInfo.positions[i]));

this.set('rowCount', layoutInfo.rowCount);
},

// Sorts tiles by their order in the dom
orderedTiles() {
let domTiles = this.$('md-grid-tile').toArray();
return this.get('tiles').sort((a, b) => {
return domTiles.indexOf(a.get('element')) > domTiles.indexOf(b.get('element')) ? 1 : -1;
});
},

// Parses attribute string and returns hash of media sizes
_extractResponsiveSizes(string, regex = mediaRegex) {
let matches = {};
Expand Down
9 changes: 6 additions & 3 deletions addon/components/paper-grid-tile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,12 +33,15 @@ export default Component.extend(ChildMixin, {

didUpdateAttrs() {
this._super(...arguments);
this.updateTile();
let gridList = this.get('gridList');

// Debounces until the next run loop
run.debounce(gridList, gridList.updateGrid, 0);
},

updateTile() {
let gridList = this.get('gridList');
run.debounce(gridList, gridList.updateGrid, 50);
this.$().css(this._tileStyle());
this.sendAction('onUpdate');
},

colspanMedia: computed('colspan', function() {
Expand Down
2 changes: 1 addition & 1 deletion tests/dummy/app/templates/demo/grid-list.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@

<h2>Responsive and Animated Usage</h2>
{{! BEGIN-SNIPPET grid-list.responsive }}
{{#paper-content class="md-whiteframe-z1 grid-list-demo-responsiveTiles" layout-padding=''}}
{{#paper-content class="md-whiteframe-z1 grid-list-demo-responsiveTiles"}}

{{#paper-grid-list
cols="3 md-8 gt-md-12"
Expand Down
Loading