Sorry, was not able to create a demo for this, since did not find CDN with the latest version of this lib, and jsfiddle, jsbin and others seems not to support js file upload.
But basically it boils down to this:
var item = { text: 'abc' }, item2 = { text: 'xyz' };
$scope.bricks = [item]; // can be several items
$timeout(function() {
$scope.bricks = [item2]; // we reassign array to another one. Real use case is items search, where we get them from server
})
Expected: new items appear without any UI issues
Actual: there is a glitch, at first item2 appears on the left (as a second item), then, after about 30ms first item disappears. This glitch exists at least when masonry's transitionDuration is set to 0 (no transition)
============================= Solution ===============================
There are two variants actually:
a) Easiest one is to allow to set timeout delay (in scheduleMasonry) as a param, by user. If set to 0, this problem disappears. Also would help with other issues like #103, and in general, imho, such values should not be hard-coded. I can push a PR if needed
or
b) A bit more complex one. If we schedule addBrick as well - issue is resolved as well. Some problems are:
1) It seems to be not possible to schedule removeBrick, since UI elm is removed before scheduled task is run, and there is an error in console from masonry that no such elm exists. But if we schedule only addBrick, without removeBrick, it is possible that brick is added, and then before timeout runs out it is removed. Can be solved by checking bricks[brickId] in scheduleMasonry() as well, but not sure which way is better to pass the brickId to this function, since it is a scope.$id
2) 'resize' and 'layout' commands should be run after all 'append'/'prepend' commands. This one is done, after timeout it checks scheduled items for such commands and if they exist, puts tem to the bottom of the list
b) 2. is possible to do e.g. via element.data().
It is better to do it via passing a function to array, but this would require refactoring of many methods, not to pass all args to masonry
Sorry, was not able to create a demo for this, since did not find CDN with the latest version of this lib, and jsfiddle, jsbin and others seems not to support js file upload.
But basically it boils down to this:
Expected: new items appear without any UI issues Actual: there is a glitch, at first item2 appears on the left (as a second item), then, after about 30ms first item disappears. This glitch exists at least when masonry's transitionDuration is set to 0 (no transition)
============================= Solution =============================== There are two variants actually: a) Easiest one is to allow to set timeout delay (in scheduleMasonry) as a param, by user. If set to 0, this problem disappears. Also would help with other issues like #103, and in general, imho, such values should not be hard-coded. I can push a PR if needed
or
b) A bit more complex one. If we schedule addBrick as well - issue is resolved as well. Some problems are: 1) It seems to be not possible to schedule removeBrick, since UI elm is removed before scheduled task is run, and there is an error in console from masonry that no such elm exists. But if we schedule only addBrick, without removeBrick, it is possible that brick is added, and then before timeout runs out it is removed. Can be solved by checking
bricks[brickId]
inscheduleMasonry()
as well, but not sure which way is better to pass the brickId to this function, since it is a scope.$id2) 'resize' and 'layout' commands should be run after all 'append'/'prepend' commands. This one is done, after timeout it checks scheduled items for such commands and if they exist, puts tem to the bottom of the list