Skip to content

Commit

Permalink
Send layout event
Browse files Browse the repository at this point in the history
  • Loading branch information
@widmoser
widmoser committed Jun 3, 2016
1 parent 0f8e083 commit 470f728
Show file tree
Hide file tree
Showing 3 changed files with 72 additions and 45 deletions.
5 changes: 5 additions & 0 deletions demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,6 +116,11 @@
$scope.remove = function(item) {
$scope.data.splice($scope.data.indexOf(item), 1);
};

$scope.$on('td.tileview.layout', function() {
console.log('layout');
console.trace();
});
}]);
</script>
<script type="text/ng-template" id="SimpleCell">
Expand Down
45 changes: 28 additions & 17 deletions dist/tileview.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,15 +102,15 @@
if (options === currentOptions || options.alignHorizontal !== currentOptions.alignHorizontal) {
handleAlignHorizontalChange();
}
layout();
layout(true);
if (options === currentOptions || options.tileSize.width !== currentOptions.tileSize.width || options.tileSize.height !== currentOptions.tileSize.height) {
handleTileSizeChange();
}
}, true);
var sizeDimension, orthogonalDimension;
scope.$watchCollection('items', function () {
lastScrollPosition = Number.NEGATIVE_INFINITY;
layout();
layout(true);
});
scope.$on('td.tileview.resize', resize);
angular.element($window).on('resize', onResize);
Expand Down Expand Up @@ -249,31 +249,42 @@
function resize(withDigest) {
var newComponentSize = container[0].getBoundingClientRect();
if (newComponentSize.width !== componentWidth || newComponentSize.height !== componentHeight) {
layout();
if (withDigest === true) {
if (layout(false) && withDigest === true) {
forEachElement(function (el) { return el.scope().$digest(); });
}
}
}
function onResize() {
resize(true);
}
function measure() {
var rect = container[0].getBoundingClientRect();
componentWidth = rect.width;
componentHeight = rect.height;
var itemWidth = scope.options.tileSize.width;
var width = rect.width;
var size = rect[sizeDimension];
var newItemsPerRow = (scope.options.alignHorizontal) ? 1 : Math.floor(width / itemWidth);
var newCachedRowCount = Math.ceil(size / scope.options.tileSize[sizeDimension]) + scope.options.overflow * 2;
var changes = newItemsPerRow !== itemsPerRow || newCachedRowCount !== cachedRowCount;
itemsPerRow = newItemsPerRow;
cachedRowCount = newCachedRowCount;
rowCount = Math.ceil(scope.items.length / itemsPerRow);
return changes;
}
var componentWidth = 0, componentHeight = 0;
function layout() {
function layout(alwaysLayout) {
if (linkFunction !== undefined && scope.items !== undefined && sizeDimension !== undefined) {
var rect = container[0].getBoundingClientRect();
componentWidth = rect.width;
componentHeight = rect.height;
var itemWidth = scope.options.tileSize.width;
var width = container[0].getBoundingClientRect().width;
var size = rect[sizeDimension];
itemsPerRow = (scope.options.alignHorizontal) ? 1 : Math.floor(width / itemWidth);
rowCount = Math.ceil(scope.items.length / itemsPerRow);
cachedRowCount = Math.ceil(size / scope.options.tileSize[sizeDimension]) + scope.options.overflow * 2;
createElements(cachedRowCount);
itemContainer.css(sizeDimension, rowCount * scope.options.tileSize[sizeDimension] + 'px');
itemContainer.css(orthogonalDimension, '100%');
if (measure() || alwaysLayout) {
createElements(cachedRowCount);
itemContainer.css(sizeDimension, rowCount * scope.options.tileSize[sizeDimension] + 'px');
itemContainer.css(orthogonalDimension, '100%');
//setPlaceholder();
scope.$parent.$broadcast('td.tileview.layout');
return true;
}
}
return false;
}
function update() {
animationFrameRequested = false;
Expand Down
67 changes: 39 additions & 28 deletions src/tileview.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,14 +73,14 @@ declare const angular: any;
let cachedRowCount;

let virtualRows = [];

function handleTileSizeChange() {
forEachElement((el, i) => {
el.css('width', scope.options.tileSize.width + 'px');
el.css('height', scope.options.tileSize.height + 'px');
});
}

function handleTemplateUrlChange() {
const template = $templateCache.get(scope.options.templateUrl);
if (template !== undefined) {
Expand All @@ -90,7 +90,7 @@ declare const angular: any;
console.error('Template url not found: ' + scope.options.templateUrl);
}
}

function handleAlignHorizontalChange() {
if (scope.options.alignHorizontal) {
sizeDimension = 'width';
Expand All @@ -109,14 +109,14 @@ declare const angular: any;
options.overflow = def(options.overflow, 2);
options.debounce = def(options.debounce, 0);
options.afterScrollDelay = def(options.afterScrollDelay, 100);

if (options === currentOptions || options.templateUrl !== currentOptions.templateUrl) {
handleTemplateUrlChange();
}
if (options === currentOptions || options.alignHorizontal !== currentOptions.alignHorizontal) {
handleAlignHorizontalChange();
}
layout();
layout(true);
if (options === currentOptions || options.tileSize.width !== currentOptions.tileSize.width || options.tileSize.height !== currentOptions.tileSize.height) {
handleTileSizeChange();
}
Expand All @@ -125,7 +125,7 @@ declare const angular: any;
var sizeDimension, orthogonalDimension;
scope.$watchCollection('items', () => {
lastScrollPosition = Number.NEGATIVE_INFINITY;
layout();
layout(true);
});
scope.$on('td.tileview.resize', resize);

Expand Down Expand Up @@ -226,7 +226,7 @@ declare const angular: any;
itemContainer.append(row);
return row;
}

function removeRow() {
itemContainer.children().eq(-1).remove();
}
Expand Down Expand Up @@ -263,7 +263,7 @@ declare const angular: any;
function createElements(numRows) {
updateVisibleRows();
const currentRowCount = itemContainer.children().length;

if (currentRowCount < numRows) {
for (let i = currentRowCount; i < numRows; ++i) {
addRow();
Expand All @@ -273,7 +273,7 @@ declare const angular: any;
removeRow();
}
}

forEachRow(fillRow);

virtualRows = [];
Expand All @@ -287,8 +287,7 @@ declare const angular: any;
function resize(withDigest) {
const newComponentSize = container[0].getBoundingClientRect();
if (newComponentSize.width !== componentWidth || newComponentSize.height !== componentHeight) {
layout();
if (withDigest === true) {
if (layout(false) && withDigest === true) {
forEachElement(el => el.scope().$digest());
}
}
Expand All @@ -298,26 +297,38 @@ declare const angular: any;
resize(true);
}

function measure() {
const rect = container[0].getBoundingClientRect();
componentWidth = rect.width;
componentHeight = rect.height;
const itemWidth = scope.options.tileSize.width;
const width = rect.width;
const size = rect[sizeDimension];

const newItemsPerRow = (scope.options.alignHorizontal) ? 1 : Math.floor(width / itemWidth);
const newCachedRowCount = Math.ceil(size / scope.options.tileSize[sizeDimension]) + scope.options.overflow * 2;

const changes = newItemsPerRow !== itemsPerRow || newCachedRowCount !== cachedRowCount;
itemsPerRow = newItemsPerRow;
cachedRowCount = newCachedRowCount;
rowCount = Math.ceil(scope.items.length / itemsPerRow);
return changes;
}

let componentWidth = 0, componentHeight = 0;
function layout() {
function layout(alwaysLayout) {
if (linkFunction !== undefined && scope.items !== undefined && sizeDimension !== undefined) {
const rect = container[0].getBoundingClientRect();
componentWidth = rect.width;
componentHeight = rect.height;
const itemWidth = scope.options.tileSize.width;
const width = container[0].getBoundingClientRect().width;
const size = rect[sizeDimension];

itemsPerRow = (scope.options.alignHorizontal) ? 1 : Math.floor(width / itemWidth);
rowCount = Math.ceil(scope.items.length / itemsPerRow);
cachedRowCount = Math.ceil(size / scope.options.tileSize[sizeDimension]) + scope.options.overflow * 2;

createElements(cachedRowCount);

itemContainer.css(sizeDimension, rowCount * scope.options.tileSize[sizeDimension] + 'px');
itemContainer.css(orthogonalDimension, '100%');
//setPlaceholder();
if (measure() || alwaysLayout) {
createElements(cachedRowCount);

itemContainer.css(sizeDimension, rowCount * scope.options.tileSize[sizeDimension] + 'px');
itemContainer.css(orthogonalDimension, '100%');
//setPlaceholder();
scope.$parent.$broadcast('td.tileview.layout');
return true;
}
}
return false;
}

function update() {
Expand Down

0 comments on commit 470f728

Please sign in to comment.