auto reload packery on collection change

[parliament718]

Can you please add functionality to auto-reload packery (I believe that would be "reloadItems" method) when the ng-repeat collection changes (in the spirit of angular)?

<packery>
        <packery-object ng-repeat="tile in vm.tiles" >

        </packery-object>
    </packery>

[joshuahiggins]

This is addressed in the README file.

https://github.com/SunGard-Labs/angular-packery#a-note-on-ng-include-and-draggability

[parliament718]

@joshuahiggins Not sure what you're talking about but this is not addressed anywhere. The simple snippet I posted above does not automatically refresh the tiles when I change the vm.tiles collection. I'm not using ng-include.

[joshuahiggins]

I'm sorry, I misread your original comment.

What are you attempting to accomplish? Items added via an ng-repeat are added as they are built. They have already been collected by Packery individually. I'm not sure what recollecting the items would accomplish?

[parliament718]

Thanks for prompt response. Ok so imagine I want to filter that collection so I remove or add some objects. In the spirit of angular, packery should automatically filter the tiles when I change this data-binded collection.

Think http://stackexchange.com/sites

See the categories at the top, you can click to filter? I'm trying to accomplish this effect.

[joshuahiggins]

Oh! I understand what you mean now. That's a great idea. I'll definitely poke around with that for v1.1.

[joshuahiggins]

This actually somewhat relates to issue #3, allowing for destroying packed items. After those items are removed, the whole layout would need to be refreshed, just as with filtering items.

[parliament718]

Awesome thank you! When do you plan to release 1.1?

[joshuahiggins]

No set date, but there's a few features that we plan to add for the v1.1 release:

https://github.com/SunGard-Labs/angular-packery/milestones/1.1

[dotlouis]

+1 would definitely like this feature

[joncaris]

+1 Working on a site right now and was looking for this same functionality. The idea would be to be able to type into a filter input and when the items are filtered/unfiltered, packery would refresh the layout.

[dotlouis]

Does anybody have a temporary workaround for this ?
angular-packery does not handle refreshing the layout on DOM/Model changes.
However is it possible to trigger the reload manually ?
I know packery has a .layout() method but I don't know how to get the packery instance from a controller ? Is it possible to get a reference to the instance angular-packery created ?
Thanks for the work and waiting for 1.1

[joshuahiggins]

I haven't been able to test this yet, but I do believe that the returned Packery object can be added as a data object on the wrapper element via Angular's jqLite. Referencing this stored data should allow access to Packery methods directly.

And yes, this is most definitely a required feature for v1.1. I was hoping to have that finished up by the end of the month, but it may be a week or two into March now.

[dotlouis]

I'm not sure I understand, do you mean it's possible to do something like

<packery id="container" data-packery="packeryObject"> 

Where data-packery is an attribute (in this case which one?) and that it could bind the directive's packery object to $scope.packeryObject ?
And then in my controller I would be able to do $scope.packeryObject.layout()?

Sorry if I misunderstood your explanation. Could you illustrate a bit more please.
Thanks for the v1.1 ETA

[parliament718]

may I please get updated ETA? I'm launching soon therefore debating whether to wait for this fix or revert to using packery at the jquery level.

[joshuahiggins]

Sorry, I don't have an ETA now. With Packery / Draggabilly updating versions and introducing breaking changes, we realized we need to work backwards to introduce a TDD method to mitigate future issues. We'll be introducing testing and bugfixes to support the latest Packery / Draggabilly / jQuery UI builds before new functionality.

[d3volv3d]

+1 on this, please. The 'fit' method would be a groovy bonus, as well.

[tshi0912]

I've created a pull request to resolve the unpackery object function.
#35

[Lotbert]

@dot-louis a workaround im currently using is to call layout() from http://packery.metafizzy.co/methods.html#layout manually (f.e. in your angular-controller with a custom filter)

you can retrieve the packery object via the $rootScope:

$rootScope.$on('packeryInstantiated', function (event, args) {
    pckry = args;
});

and then call layout() on it when needed:

pckry.layout();

[rhclayto]

I'm using the workaround mentioned by Lotbert as well. I have not been able to get the packery object that joshuahiggins mentioned is available on the packery container element. A couple notes:

1. You also have access to all the other packery methods beyond layout() (http://packery.metafizzy.co/methods.html).
2. To use the pckry object outside of the $rootScope.$on listener function (somewhere else in your controller for instance), you have to wrap it in something that returns a promise. See my question at stackoverflow for more details: https://stackoverflow.com/questions/36573570/rootscope-on-event-listener-function-not-changing-variable-values