├── README.md
├── bower.json
└── src
    └── angular-masonry-directive.js


/README.md:
--------------------------------------------------------------------------------
 1 | angular-masonry-directive
 2 | =========================
 3 | 
 4 | A very simple and 100% compatible masonry directive for AngularJS ... do you know how to use masonry? Good! You know how to use this
 5 | 
 6 | This directive is meant for the raw masonry lib and not the jQuery one.
 7 | 
 8 | # How to use
 9 | 
10 | > First you include it on your app
11 | 
12 | ```html
13 | <script src="angular-masonry-directive.js"></script>
14 | ```
15 | 
16 | > Then setup your app
17 | 
18 | ```javascript
19 | var myApp = angular.module('MyApp',['masonry']);
20 | ```
21 | 
22 | > And then just use it (note that the masonry directive uses the same pattern as the masonry directive uses http://masonry.desandro.com/
23 | 
24 | ```html
25 | <div masonry='{ "transitionDuration" : "0.4s" , "itemSelector" : ".tile"}'>
26 |   <!-- items -->
27 |   <div masonry-tile ng-repeat="item in items">
28 |         
29 |   </div>
30 | </div>
31 | ```
32 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "angular-masonry-directive",
 3 |   "version": "1.0.1",
 4 |   "main": "./src/angular-masonry-directive.js",
 5 |   "dependencies": {
 6 |     "angular": "",
 7 |     "masonry": "latest",
 8 |     "imagesloaded": "latest"
 9 |   }
10 | }
11 | 


--------------------------------------------------------------------------------
/src/angular-masonry-directive.js:
--------------------------------------------------------------------------------
 1 | (function() {
 2 |     "use strict";
 3 | 
 4 |     angular.module('masonry', ['ng']).directive('masonry', function($timeout) {
 5 |         return {
 6 |             restrict: 'AC',
 7 |             link: function(scope, elem, attrs) {
 8 |                 var container = elem[0];
 9 |                 var options = angular.extend({
10 |                     itemSelector: '.item'
11 |                 }, angular.fromJson(attrs.masonry));
12 | 
13 |                 var masonry = scope.masonry = new Masonry(container, options);
14 | 
15 |                 var debounceTimeout = 0;
16 |                 scope.update = function() {
17 |                     if (debounceTimeout) {
18 |                         $timeout.cancel(debounceTimeout);
19 |                     }
20 |                     debounceTimeout = $timeout(function() {
21 |                         debounceTimeout = 0;
22 | 
23 |                         masonry.reloadItems();
24 |                         masonry.layout();
25 |     
26 |                         elem.children(options.itemSelector).css('visibility', 'visible');
27 |                     }, 120);
28 |                 };
29 |                 
30 |                 scope.removeBrick = function() {
31 |                     $timeout(function() {
32 |                         masonry.reloadItems();
33 |                         masonry.layout();
34 |                    }, 500);
35 |                 };                
36 |                 
37 |                 scope.appendBricks = function(ele) {
38 |                     masonry.appended(ele);
39 |                 };                
40 |                 
41 |                 scope.$on('masonry.layout', function() {
42 |                     masonry.layout();                 
43 |                 });
44 |                 
45 |                 scope.update();
46 |             }
47 |         };
48 |     }).directive('masonryTile', function() {
49 |         return {
50 |             restrict: 'AC',
51 |             link: function(scope, elem) {
52 |                 elem.css('visibility', 'hidden');
53 |                 var master = elem.parent('*[masonry]:first').scope(),
54 |                     update = master.update,
55 |                     removeBrick = master.removeBrick,
56 |                     appendBricks = master.appendBricks;                    
57 |                 if (update) {
58 |                     imagesLoaded( elem.get(0), update);
59 |                     elem.ready(update);
60 |                 }
61 |                 if (appendBricks) {
62 |                     imagesLoaded( elem.get(0), appendBricks(elem));
63 |                 }                
64 |                 scope.$on('$destroy', function() {
65 |                     if (removeBrick) {
66 |                         removeBrick();
67 |                     }
68 |                 });                
69 |             }
70 |         };
71 |     });
72 | })();
73 | 


--------------------------------------------------------------------------------