Hello,

First, thank you for your work!

I have some troubles with my use case, I have elements with images of different heights and packery doesn't seem to pack it right. It packs my elements with the same height.
Do you have any clue to make it work?

Thank you,
Martin

I am looking for an angular port of packery but it looks like this is no longer being maintained. Is there any plans for this or has it been dropped?

Hi, first of thanks for this module, it's really useful to me.
Anyway I was wondering if the attribute draggable is meant to be used ?
It isn't mentioned in the ReadMe however I looked at the source and found that a draggable attribute is provided for the directive. I tried to set it to false but nothing happened.

I would like to do something like this:
<packery draggable="{{isDrag}}"> with isDrag being a variable in my controller.
Basically I just want to enable and disable drag and drop with a click of a button.

Then I found this line: https://github.com/SunGard-Labs/angular-packery/blob/master/src/packery.js#L195
The problem is that scope.draggable will always be true either because of the config boolean or because any variable set in scope.draggable will be a string therefore true.

Anyway after doing a little type check:

if(typeof scope.draggable === "string")
  scope.draggable = (scope.draggable === "true");

I managed to disable drag at launch. But if I change isDrag later for example with a click of a button, of course the draggability won't update.

Is it possible to add this behaviour ? There is a method to enable/disable drag in the Draggabillly module.

David can be used to track dependencies to ensure the repo supports the latest. While badges are provided by David, integrating David into the Grunt process will allow more granular control and input.

Not-supporting the latest updates should cause a CI build failure and should be considered priority #1 on bug-fixes.

Issue #27 brings to light the fact that there's no default sizing set for the Packery grid.

The problem is that this repository is purely JavaScript, but the grid that Packery is built over relies on a base grid size being set via the .packery-sizer CSS class or the row-height and column-width attributes. If no sizing is found, there is currently no default and the grid will get, well, wonky.

Ideally, a 1 pixel height and width would be ideal defaults if no sizing is found, however how can we determine properly if there is no sizing? Currently the default of the repository is to look toward .packery-sizer, and with no way of determining whether this element has sizing attributes set in an external CSS file, I'm at a loss of how to provide a default fallback.

Firstly, It's a great angular module which can fulfill the packery packing functions in angular fashion.
However, when using this module, I find some defects:

1. Can not remove packery item when the relative data object deleted from collection. We often change our data model collection, say, add data items or remove data items, and angular will adjust the DOM nodes correspondingly. As you known, even if DOM nodes removed, the packery will keep them in the layout until we manually call packery.remove() function or packery.reloadItems() before packery.layout().
2. $emit "packeryInstantiated" without hash to identify with which $scope this instance should be associated. I think the purpose you $emit "packeryInstantiated" event is giving outer $scope a chance to capture the packery instance for later using, say, invoking packery.layout() to re-layout as necessary. However if the app have multiple packery instances, the outer scope can not identify which $scope it should associated in the event handler. To resolve the issue, we can bind a predefined hash to the "packery" directive, and once the $rootScope capture the "packeryInstantiated" event, the outer $scope can measure whether this instance is the associated one.

This idea stems from 2 use cases:

• Angular renders static markup faster than dynamic markup, such as markup generated via ng-repeat. When generating static and dynamic objects, Packery will append the dynamic after the static despite their original source order.
• A need to maintain user preferred order and/or positions of Packery objects. For instance, in a dashboard view with multiple widgets, a user may re-order widgets and wish to maintain this preference through later sessions.

Adding support to manage object order and/or positions could potentially address both issues. However, as Packery supports any grid size (down to 1x1 pixel), managing order would also require managing positions.

I'm not sure if this is something that should be added on a project basis, to fit individual needs, or via this modules where I believe it could potentially introduce a larger amount of fringe case bugs.

I'm opening this issue to come back to at a later time and hopefully get some feedback from others.

@Virtual-Dev brought up the idea of allowing the enabling and disabling of dragging functionality. Since Packery relies on Draggabilly, we should allow the exposing of the Draggabilly object after creation so users can create their own functionality around Draggabilly's native methods.

See comment string in issue #11 for more info.

This repo is owned by the SunGard-Labs GitHub group, which is associated with FIS (formerly SunGard). Until now, I have been 1 of 2 admins associated with the repo, although the second admin is unknown to me. Additionally, I have not been an employee of SunGard / FIS for a while.

As an admin (and not owner), I have restricted access to maintain the repo itself due to it's ownership by the SunGard-Labs user group. Only the official "owner", in the GitHub sense of the term, is able to associate user groups, approve 3rd party integrations (like Travis, Coveralls, or Slack), and many other common tasks.

As there has been activity in this repo as of late, and the ability to manage the repo is limited, there's a couple options to move forward:

1. An active employee of FIS can petition the company to add new users to the SunGard-Labs group. At that point I can associate these users as admins and I can remove myself from the SunGard-Labs team. This will still result in limited ability to update the repo due to ownership existing outside of the maintainer's reach.
2. The repo can be forked under the MIT license it's distributed with and given a much needed update, managed by the active maintainers.

There is some confusion with the naming of the distributed files, as it matches Packery itself. Files contained in /src and /dist should reflect the name of the repository, angular-packery.

As this is a breaking change, this should align to a minor release.

Hi,

I'm using angular-packery in a project, and we have an element that changes size (as we post some data there). This causes a problem as packery is not relocating other elements to allow for that.

I see there's a fit method in the Packery API but the only place I find in angular-packery to access the object directly is a broadcast on rootscope.

Is there a better way to bind this object and use fit? Or is this maybe something on the roadmap, such as the support for stamp?

The issue: If a project calls for multiple angular-packery instances with different drag handles, adding a common class of cursor: move; would require you to style each drag handle individually.

When creating a handle, angular-packery should add a class of .packery-handle to the element to allow for general CSS styles that are unaware of each individual handle.

Whoops.

Packery provides a "stamp" method that allows an object to remain static while objects pack around it. This functionality is not present in angular-packery currently and should be added.

Hi,

it is not possible center the items in packery like this:
http://codepen.io/desandro/pen/xEzKo

How can I change this?

I'm a bit confused as to how to call shiftLayout on the packery instance. I have a listener on the dragStart and dragEnd events of Draggabilly to shrink the height of all elements to make them easier to drag and then once it's done bring the heights back to full. But when this happens I need to have packery shift the layout like their animation example so that everything shifts up to one another. How am I supposed to call this on the instance?

I have the packery data set to a scope property like so

$scope.packeryInstance = angular.element('.packery-wrapper').data('Packery');
$($scope.packeryInstance.element).on('dragStart',dragStartListener);
$($scope.packeryInstance.element).on('dragEnd',dragEndListener);

But in my listeners I can't figure out what the proper way to call the shiftLayout method is.

This should be high up on the list after v1.1. This repo needs automated testing.

This was discovered via issue #7, but there are other boolean attributes that have the same issue, such as draggable. All current attributes should be checked to ensure that all allowed values perform as expected.

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>

Hi,
I am getting the error "ReferenceError: Packery is not defined" when I try to load the module with webpack.
Please suggest

Travis CI should be added to support #20. Until testing is available, it should at least check that pull requests and commits meet the jshint.

When angular packery objects take up more space than the viewport has visible they objects trail off the end of the page instead of wrapping.

Packery accepts both Draggabilly and jQuery UI support. Currently, angular-packery only allows for Draggabilly support.

One thought is that the draggable attribute should be reworked to accept the following values: boolean jquery draggabilly as opposed to the current boolean only method. We'd need to take this into consideration when addressing issue #13.

I also think that the draggable option should default to false and Draggabilly should be removed from the Bower dependencies.

It seems the recent update to Packery 1.3.x has caused some issues with this repo. As a temporary workaround, the bower should be updated to only pull 1.2.x versions as we add support.

Quite possibly an issue with my code or with how I installed it but trying to use the example code gives the following errors:
ReferenceError: Packery is not defined
at Object.Packery

I had to install it by putting this in the bower file:
"angular-packery" : "1.0.3"
and running bower install

I've added 'angular-packery' to the module list, but do I need to include any other dependencies?

Thanks

Currently, there are only functions for adding and packing new objects, but no support for removing, unpacking, and/or destroying objects.