Skip to content
This repository was archived by the owner on Dec 30, 2018. It is now read-only.
This repository was archived by the owner on Dec 30, 2018. It is now read-only.

Glitch on ng-repeat array reassignment #201

Open
@DmitryGonchar

Description

@DmitryGonchar

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions