From e78f13363c9623262c74b2a9241c337810a2ae07 Mon Sep 17 00:00:00 2001 From: Blake Rego Date: Sun, 12 Mar 2017 19:29:40 -0400 Subject: [PATCH] fix(masonry.restrict): change directive restriction to attribute-only The masonry directive does not properly create columns when used as an element. To avoid confusion, I updated the directive code to restrict usage to attribute mode only (this could always be changed back, if a subsequent fix was made to fix element loading). I have also updated the repository README documentation to provide a more accurate account of how the masonry directive currently works. This issue was first brought up here: https://github.com/passy/angular-masonry/issues/169 This will invalidate uses of this directive as an element. However, these uses are likely already --- README.md | 28 +++++++++++------------ src/angular-masonry.js | 2 +- test/directive.coffee | 50 +++++++++++++++++++++--------------------- 3 files changed, 40 insertions(+), 40 deletions(-) diff --git a/README.md b/README.md index c0f3e4d..9dc23d1 100644 --- a/README.md +++ b/README.md @@ -66,10 +66,10 @@ directive. *Example:* ```html - +
Unicorns
Sparkles
- +
``` ### `column-width` @@ -81,9 +81,9 @@ not set, Masonry will use the outer width of the first element. *Example:* ```html - +
This will be 200px wide max.
- +
``` ### `preserve-order` @@ -96,10 +96,10 @@ elements isn't set at the time they are inserted. *Example:* ```html - +
Will always be shown 1st
Will always be shown 2nd
- +
``` ### `load-images` @@ -109,10 +109,10 @@ Allows usage of `imagesLoaded` plugin. Defaults to `false`. *Example:* ```html - +
image
image
- +
``` ### `reload-on-show` @@ -125,10 +125,10 @@ hidden it may not render properly when shown again. *Example:* ```html - +
...
...
- +
``` When `showList` changes from falsey to truthy `ctrl.reload` will be called. @@ -144,10 +144,10 @@ some blank space may be left on the sides. *Example:* ```html - +
...
...
- +
``` @@ -159,8 +159,8 @@ as expression either as `masonry` or `masonry-options` attribute. *Example:* ```html - - +
+
``` Equivalent to: diff --git a/src/angular-masonry.js b/src/angular-masonry.js index 33ecf4b..2441fb5 100755 --- a/src/angular-masonry.js +++ b/src/angular-masonry.js @@ -127,7 +127,7 @@ }).directive('masonry', function masonryDirective() { return { - restrict: 'AE', + restrict: 'A', controller: 'MasonryCtrl', controllerAs: 'msnry', link: { diff --git a/test/directive.coffee b/test/directive.coffee index 93f0bed..1ee59f3 100644 --- a/test/directive.coffee +++ b/test/directive.coffee @@ -22,28 +22,28 @@ describe 'angular-masonry', -> window.Masonry = @Masonry it 'should initialize', => - @compile('')(@scope) + @compile('
')(@scope) it 'should call masonry on init', => @compile('
')(@scope) expect(window.Masonry).toHaveBeenCalled() it 'should pass on the column-width attribute', => - @compile('')(@scope) + @compile('
')(@scope) expect(window.Masonry).toHaveBeenCalledOnce() call = window.Masonry.firstCall expect(call.args[1].columnWidth).toBe 200 it 'should pass on the item-selector attribute', => - @compile('')(@scope) + @compile('
')(@scope) expect(window.Masonry).toHaveBeenCalled() call = window.Masonry.firstCall expect(call.args[1].itemSelector).toBe '.mybrick' it 'should pass on any options provided via `masonry-options`', => - @compile('')(@scope) + @compile('
')(@scope) expect(window.Masonry).toHaveBeenCalled() call = window.Masonry.firstCall @@ -61,24 +61,24 @@ describe 'angular-masonry', -> sinon.spy(@scope, '$watch') it 'should setup a $watch when the reload-on-show is present', => - @compile('')(@scope) + @compile('
')(@scope) expect(@scope.$watch).toHaveBeenCalled() it 'should not setup a $watch when the reload-on-show is missing', => - @compile('')(@scope) + @compile('
')(@scope) expect(@scope.$watch).not.toHaveBeenCalled() it 'should setup a $watch when the reload-on-resize is present', => - @compile('')(@scope) + @compile('
')(@scope) expect(@scope.$watch).toHaveBeenCalledWith('masonryContainer.offsetWidth', sinon.match.func); it 'should not setup a $watch when the reload-on-resize is missing', => - @compile('')(@scope) + @compile('
')(@scope) expect(@scope.$watch).not.toHaveBeenCalledWith('masonryContainer.offsetWidth', sinon.match.func); describe 'MasonryCtrl', => beforeEach => - @compile('')(@scope) + @compile('
')(@scope) @ctrl = @scope.msnry @ctrl.destroy() @@ -107,9 +107,9 @@ describe 'angular-masonry', -> it 'should register an element in the parent controller', => @compile(''' - +
- +
''')(@scope) expect(@scope.msnry.addBrick).toHaveBeenCalledOnce() @@ -118,9 +118,9 @@ describe 'angular-masonry', -> @scope.bricks = [1, 2, 3] @compile(''' - +
- +
''')(@scope) @scope.$digest() # Needed for initial ng-repeat @@ -141,29 +141,29 @@ describe 'angular-masonry', -> it 'should append three elements to the controller', => @compile(''' - +
- +
''')(@scope) expect(@scope.msnry.addBrick.callCount).toBe 3 it 'should prepend elements when specified by attribute', => @compile(''' - +
- +
''')(@scope) expect(@scope.msnry.addBrick).toHaveBeenCalledWith 'prepended' it 'should append before imagesLoaded when preserve-order is set', => @compile(''' - +
- +
''')(@scope) expect(@scope.msnry.addBrick).toHaveBeenCalledWith 'appended' @@ -178,9 +178,9 @@ describe 'angular-masonry', -> @spy = sinon.spy(window.Masonry.prototype, 'layout') @compile(''' - +
- +
''')(@scope) @scope.$digest() @@ -197,9 +197,9 @@ describe 'angular-masonry', -> @spy = sinon.spy(window.Masonry.prototype, 'appended') @compile(''' - +
- +
''')(@scope) expect(@spy).toHaveBeenCalledOnce() @@ -210,9 +210,9 @@ describe 'angular-masonry', -> @spy = sinon.spy(window.Masonry.prototype, 'layout'); @compile(''' - +
- +
''')(@scope) @scope.$digest()