Skip to content

Commit e841f81

Browse files
widmoserwidmoser
committed
Fix bug were not enough items were displayed in horizontal mode
1 parent 927a8fc commit e841f81

3 files changed

Lines changed: 29 additions & 27 deletions

File tree

‎dist/tileview.js‎

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -81,11 +81,14 @@
8181
console.error('Template url not found: ' + templateUrl);
8282
}
8383
});
84+
var sizeDimension;
8485
scope.$watch('options.alignHorizontal', function (alignHorizontal) {
8586
if (alignHorizontal) {
87+
sizeDimension = 'width';
8688
elem.children().addClass('horizontal');
8789
}
8890
else {
91+
sizeDimension = 'height';
8992
elem.children().removeClass('horizontal');
9093
}
9194
placeholderStart.css({
@@ -118,16 +121,16 @@
118121
return Math.max(Math.min(value, max), min);
119122
}
120123
var rect = elem[0].getBoundingClientRect();
121-
var itemHeight = scope.options.tileSize.height;
122-
var maxScrollPosition = rowCount * itemHeight - rect.height;
124+
var itemSize = scope.options.tileSize[sizeDimension];
125+
var maxScrollPosition = rowCount * itemSize - rect[sizeDimension];
123126
var scrollDimension = scope.options.alignHorizontal ? 'scrollLeft' : 'scrollTop';
124127
container[0][scrollDimension] = clamp(container[0][scrollDimension], 0, maxScrollPosition);
125128
var scrollPosition = container[0][scrollDimension];
126-
var scrollEndThreshold = maxScrollPosition - scope.options.scrollEndOffset * itemHeight;
129+
var scrollEndThreshold = maxScrollPosition - scope.options.scrollEndOffset * itemSize;
127130
if (scrollPosition >= scrollEndThreshold && !(lastScrollPosition >= scrollEndThreshold) && scope.scrollEnd !== undefined) {
128131
scope.scrollEnd();
129132
}
130-
startRow = clamp(Math.floor(scrollPosition / itemHeight), 0, rowCount - cachedRowCount);
133+
startRow = clamp(Math.floor(scrollPosition / itemSize), 0, rowCount - cachedRowCount);
131134
endRow = startRow + cachedRowCount;
132135
lastScrollPosition = scrollPosition;
133136
}
@@ -147,11 +150,10 @@
147150
}
148151
}
149152
function setPlaceholder() {
150-
heightStart = Math.max(startRow * scope.options.tileSize.height, 0);
151-
heightEnd = Math.max((rowCount - endRow) * scope.options.tileSize.height, 0);
152-
var placeHolderDimension = scope.options.alignHorizontal ? 'width' : 'height';
153-
placeholderStart.css(placeHolderDimension, heightStart + 'px');
154-
placeholderEnd.css(placeHolderDimension, heightEnd + 'px');
153+
heightStart = Math.max(startRow * scope.options.tileSize[sizeDimension], 0);
154+
heightEnd = Math.max((rowCount - endRow) * scope.options.tileSize[sizeDimension], 0);
155+
placeholderStart.css(sizeDimension, heightStart + 'px');
156+
placeholderEnd.css(sizeDimension, heightEnd + 'px');
155157
}
156158
function createElements(diff) {
157159
updateVisibleRows();
@@ -184,13 +186,12 @@
184186
}
185187
function layout() {
186188
if (linkFunction !== undefined && scope.items !== undefined) {
187-
var itemHeight = scope.options.tileSize.height;
188189
var itemWidth = scope.options.tileSize.width;
189-
var width = ((scope.options.alignHorizontal) ? itemContainer[0] : elem[0]).getBoundingClientRect().width;
190-
var height = elem[0].getBoundingClientRect().height;
190+
var width = itemContainer[0].getBoundingClientRect().width;
191+
var size = elem[0].getBoundingClientRect()[sizeDimension];
191192
itemsPerRow = (scope.options.alignHorizontal) ? 1 : Math.floor(width / itemWidth);
192193
rowCount = Math.ceil(scope.items.length / itemsPerRow);
193-
cachedRowCount = Math.ceil(height / itemHeight) + scope.options.overflow;
194+
cachedRowCount = Math.ceil(size / scope.options.tileSize[sizeDimension]) + scope.options.overflow;
194195
createElements(itemsPerRow * cachedRowCount - itemElementCount());
195196
setPlaceholder();
196197
}

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "angular-tileview",
3-
"version": "0.3.0",
3+
"version": "0.3.1",
44
"description": "A tileview for angular",
55
"main": "gulpfile.js",
66
"scripts": {

‎src/tileview.ts‎

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -91,10 +91,13 @@ declare const angular: any;
9191
console.error('Template url not found: ' + templateUrl);
9292
}
9393
});
94+
var sizeDimension;
9495
scope.$watch('options.alignHorizontal', (alignHorizontal) => {
9596
if (alignHorizontal) {
97+
sizeDimension = 'width';
9698
elem.children().addClass('horizontal');
9799
} else {
100+
sizeDimension = 'height';
98101
elem.children().removeClass('horizontal');
99102
}
100103
placeholderStart.css({
@@ -133,20 +136,20 @@ declare const angular: any;
133136
}
134137

135138
const rect = elem[0].getBoundingClientRect();
136-
const itemHeight = scope.options.tileSize.height;
139+
const itemSize = scope.options.tileSize[sizeDimension];
137140

138-
const maxScrollPosition = rowCount*itemHeight - rect.height;
141+
const maxScrollPosition = rowCount*itemSize - rect[sizeDimension];
139142

140143
const scrollDimension = scope.options.alignHorizontal ? 'scrollLeft' : 'scrollTop';
141144
container[0][scrollDimension] = clamp(container[0][scrollDimension], 0, maxScrollPosition);
142145
const scrollPosition = container[0][scrollDimension];
143146

144-
const scrollEndThreshold = maxScrollPosition - scope.options.scrollEndOffset*itemHeight;
147+
const scrollEndThreshold = maxScrollPosition - scope.options.scrollEndOffset*itemSize;
145148
if (scrollPosition >= scrollEndThreshold && !(lastScrollPosition >= scrollEndThreshold) && scope.scrollEnd !== undefined) {
146149
scope.scrollEnd();
147150
}
148151

149-
startRow = clamp(Math.floor(scrollPosition / itemHeight), 0, rowCount - cachedRowCount);
152+
startRow = clamp(Math.floor(scrollPosition / itemSize), 0, rowCount - cachedRowCount);
150153
endRow = startRow + cachedRowCount;
151154
lastScrollPosition = scrollPosition;
152155
}
@@ -167,11 +170,10 @@ declare const angular: any;
167170
}
168171

169172
function setPlaceholder() {
170-
heightStart = Math.max(startRow * scope.options.tileSize.height, 0);
171-
heightEnd = Math.max((rowCount - endRow) * scope.options.tileSize.height, 0);
172-
const placeHolderDimension = scope.options.alignHorizontal ? 'width' : 'height';
173-
placeholderStart.css(placeHolderDimension, heightStart + 'px');
174-
placeholderEnd.css(placeHolderDimension, heightEnd + 'px');
173+
heightStart = Math.max(startRow * scope.options.tileSize[sizeDimension], 0);
174+
heightEnd = Math.max((rowCount - endRow) * scope.options.tileSize[sizeDimension], 0);
175+
placeholderStart.css(sizeDimension, heightStart + 'px');
176+
placeholderEnd.css(sizeDimension, heightEnd + 'px');
175177
}
176178

177179
function createElements(diff) {
@@ -211,14 +213,13 @@ declare const angular: any;
211213

212214
function layout() {
213215
if (linkFunction !== undefined && scope.items !== undefined) {
214-
const itemHeight = scope.options.tileSize.height;
215216
const itemWidth = scope.options.tileSize.width;
216-
const width = ((scope.options.alignHorizontal) ? itemContainer[0] : elem[0]).getBoundingClientRect().width;
217-
const height = elem[0].getBoundingClientRect().height;
217+
const width = itemContainer[0].getBoundingClientRect().width;
218+
const size = elem[0].getBoundingClientRect()[sizeDimension];
218219

219220
itemsPerRow = (scope.options.alignHorizontal) ? 1 : Math.floor(width / itemWidth);
220221
rowCount = Math.ceil(scope.items.length / itemsPerRow);
221-
cachedRowCount = Math.ceil(height / itemHeight) + scope.options.overflow;
222+
cachedRowCount = Math.ceil(size / scope.options.tileSize[sizeDimension]) + scope.options.overflow;
222223

223224
createElements(itemsPerRow*cachedRowCount - itemElementCount());
224225
setPlaceholder();

0 commit comments

Comments
 (0)