angular-packery #

Angular module for the popular Packery library.


#### Requirements ####

* Packery

#### Optional ###

* Draggabilly

---

Example Usage ##

$3

By default, this module listens for an element or attribute call and instantiates with the options described in Packery's API. It looks to a self-created object, div.packery-sizer, to control the grid dimensions.

##### HTML #####

``



`

#### CSS ####

`
.packery-sizer, .packery-object {
width: 360px;
height: 500px;
}
`

$3

This module supports almost all of the Packery options in their intended form. As such, custom options can be set via attributes on the main packery element. Please refer to Packery's website for available options.

##### HTML #####

`



`

##### CSS #####
`
.card.single {
width: 300px;
height: 400px;
}

.card.double {
width: 620px;
height: 400px;
}

.card-header {
cursor: move;
}
`

---

CSS Classes / Animating ##

Two CSS classes are applied to the objects to show depth during dragging events, hovered and lifted. The classes are triggered by both mouse events and touch events.

Animation can be applied easily with CSS:

`
.card {
-webkit-transition: box-shadow 0.2s;
-moz-transition: box-shadow 0.2s;
transition: box-shadow 0.2s;
}

.card.hovered {
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

.card.lifted {
box-shadow: 0 13px 33px rgba(100,100,100,0.30), 0 8px 12px rgba(100,100,100,0.22);
z-index: 5;
}
`

---

Events ##

packeryInstantiated - Emits Packery obj. Fired when a new Packery container is created.

packeryObjectPacked - Emits element. Fired when an object is packed.

---

A note on ng-include and draggability ##

Due to how Angular builds ng-include templates, this module does not support using ng-include on your packery-object or custom handle elements. Doing so will cause draggability issues.

To ensure that your dynamic content packs and drags properly, please ensure that the objects and handles are built outside of any ng-include'd content.

Good:

`



`

`

Good:

`




`



`
The MIT License

Copyright (c) 2014 Sungard http://www.sungard.com

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
``
Packery is a product of Metafizzy LLC and is distributed under a separate license. Please refer to their website for information on Packery's license.