feat(directive): add reload-on-resize option

Add a `$watch` to detect when `masonry` is resized and call `ctrl.reload()`.

Author: tomersimis

README.md

@@ -118,6 +118,24 @@ hidden it may not render properly when shown again.
 
 When `showList` changes from falsey to truthy `ctrl.reload` will be called.
 
+
+### `reload-on-resize`
+
+The `reload-on-resize` attribute triggers a reload when the masonry element changes
+its width, useful when only the parent element is resized (and not the window) and 
+you want the elements to be rearranged. Without this if the parent is resized then 
+some blank space may be left on the sides.
+
+*Example:*
+
+```html
+<masonry reload-on-resize>
+    <div class="masonry-brick">...</div>
+    <div class="masonry-brick">...</div>
+</masonry>
+```
+
+
 ### `masonry-options`
 
 You can provide [additional options](http://masonry.desandro.com/options.html)

src/angular-masonry.js

@@ -145,6 +145,16 @@
                 }
               });
             }
+            var reloadOnResize = scope.$eval(attrs.reloadOnResize);
+            if (reloadOnResize !== false && attrs.reloadOnResize !== undefined) {
+              scope.$watch(function () {
+                return element.prop('offsetWidth');
+              }, function (newWidth, oldWidth) {
+                if (newWidth != oldWidth) {
+                  ctrl.reload();
+                }
+              });
+            }
 
             scope.$emit('masonry.created', element);
             scope.$on('$destroy', ctrl.destroy);

test/spec/directive.coffee

@@ -77,6 +77,22 @@ describe 'angular-masonry', ->
     expect(@scope.$watch).not.toHaveBeenCalled()
   )
 
+  it 'should setup a $watch when the reload-on-resize is present', inject(($compile) =>
+    sinon.spy(@scope, '$watch')
+    element = angular.element '<masonry reload-on-resize></masonry>'
+    element = $compile(element)(@scope)
+
+    expect(@scope.$watch).toHaveBeenCalled()
+  )
+
+  it 'should not setup a $watch when the reload-on-resize is missing', inject(($compile) =>
+    sinon.spy(@scope, '$watch')
+    element = angular.element '<masonry></masonry>'
+    element = $compile(element)(@scope)
+
+    expect(@scope.$watch).not.toHaveBeenCalled()
+  )
+
   describe 'MasonryCtrl', =>
     beforeEach inject(($controller, $compile) =>
       @element = angular.element '<div></div>'