feat(directive): allow to prepend bricks

provide method to add a brick document readme
zzxiang · Dec 1, 2015 · a5e73aa · a5e73aa
1 parent 92a77c9
commit a5e73aa
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 12 deletions.
diff --git a/README.md b/README.md
@@ -195,6 +195,19 @@ Equivalent to:
 </div>
 ```
 
+### `prepend`
+
+Bricks are appended by default. This behavior can be specified for each brick by
+providing the `prepend` attribute.
+
+*Example:*
+
+```html
+<div masonry>
+    <div class="masonry-brick" prepend="isPrepended()">...</div>
+</div>
+```
+
 ## Credits
 
 The directive is based on

diff --git a/src/angular-masonry.js b/src/angular-masonry.js
@@ -52,20 +52,20 @@
         $element.addClass('loaded');
       }
 
-      this.appendBrick = function appendBrick(element, id) {
+      this.addBrick = function addBrick(method, element, id) {
         if (destroyed) {
           return;
         }
 
-        function _append() {
+        function _add() {
           if (Object.keys(bricks).length === 0) {
             $element.masonry('resize');
           }
           if (bricks[id] === undefined) {
             // Keep track of added elements.
             bricks[id] = true;
             defaultLoaded(element);
-            $element.masonry('appended', element, true);
+            $element.masonry(method, element, true);
           }
         }
 
@@ -78,14 +78,14 @@
         }
 
         if (!self.loadImages){
-          _append();
+          _add();
           _layout();
         } else if (self.preserveOrder) {
-          _append();
+          _add();
           element.imagesLoaded(_layout);
         } else {
           element.imagesLoaded(function imagesLoaded() {
-            _append();
+            _add();
             _layout();
           });
         }
@@ -168,8 +168,10 @@
         link: {
           pre: function preLink(scope, element, attrs, ctrl) {
             var id = scope.$id, index;
+            var prependBrick = scope.$eval(attrs.prepend);
+            var method = prependBrick ? 'prepended' : 'appended';
 
-            ctrl.appendBrick(element, id);
+            ctrl.addBrick(method, element, id);
             element.on('$destroy', function () {
               ctrl.removeBrick(id, element);
             });

diff --git a/test/spec/directive.coffee b/test/spec/directive.coffee
@@ -110,21 +110,21 @@ describe 'angular-masonry', ->
 
     it 'should not add after destruction', =>
       @ctrl.destroy()
-      @ctrl.appendBrick()
+      @ctrl.addBrick()
 
       expect($.fn.masonry).not.toHaveBeenCalled()
 
 
   describe 'masonry-brick', =>
     beforeEach =>
       self = this
-      @appendBrick = sinon.spy()
+      @addBrick = sinon.spy()
       @removeBrick = sinon.spy()
       @scheduleMasonry = sinon.spy()
       @scheduleMasonryOnce = sinon.spy()
 
       controllerProvider.register('MasonryCtrl', ->
-        @appendBrick = self.appendBrick
+        @addBrick = self.addBrick
         @removeBrick = self.removeBrick
         @scheduleMasonry = self.scheduleMasonry
         @scheduleMasonryOnce = self.scheduleMasonryOnce
@@ -139,7 +139,7 @@ describe 'angular-masonry', ->
       '''
       element = $compile(element)(@scope)
 
-      expect(@appendBrick).toHaveBeenCalledOnce()
+      expect(@addBrick).toHaveBeenCalledOnce()
     )
 
     it 'should remove an element in the parent controller if destroyed', inject(($compile) =>
@@ -156,7 +156,7 @@ describe 'angular-masonry', ->
         @scope.bricks.splice(0, 1)
       )
 
-      expect(@appendBrick).toHaveBeenCalledThrice()
+      expect(@addBrick).toHaveBeenCalledThrice()
       expect(@removeBrick).toHaveBeenCalledOnce()
     )
 
@@ -181,6 +181,18 @@ describe 'angular-masonry', ->
       expect($.fn.masonry.callCount).toBe(2 + 3)
     )
 
+    it 'should prepend elements when specified by attribute', inject(($compile) =>
+      element = angular.element '''
+        <masonry>
+          <div class="masonry-brick" prepend="{{true}}"></div>
+        </masonry>
+      '''
+      element = $compile(element)(@scope)
+      @scope.$digest()
+
+      expect($.fn.masonry.calledWith('prepended', sinon.match.any, sinon.match.any)).toBe(true)
+    )
+
     it 'should append before imagesLoaded when preserve-order is set', inject(($compile) =>
       element = angular.element '''
         <masonry preserve-order>