Skip to content
This repository was archived by the owner on Dec 30, 2018. It is now read-only.

fix(directive): check for existing elements before appending #167

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

fix(directive): check for existing elements before appending #167

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
defe390
fix(directive): check for existing elements before appending
JeffreyATW Feb 17, 2016
6e5572a
perf(directive): avoid O(n^2) iteration by setting existing elements …
JeffreyATW Feb 19, 2016
ff61b38
fix(directive): use angular.element instead of $
JeffreyATW Feb 19, 2016
2d8532b
fix(spec): change specs to reflect use of ng-repeat
JeffreyATW Feb 24, 2016
141a66e
refactor(spec): undo unnecessary change to mock file
JeffreyATW Feb 24, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion src/angular-masonry.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,10 @@
// Keep track of added elements.
bricks[id] = true;
defaultLoaded(element);
$element.masonry(method, element, true);
// Don't add element to Masonry if it already has it.
if (element.data('angularMasonryStatic') !== true) {
$element.masonry(method, element, true);
}
}
}

Expand Down Expand Up @@ -131,6 +134,9 @@
columnWidth: parseInt(attrs.columnWidth, 10) || attrs.columnWidth
}, attrOptions || {});
element.masonry(options);
element.children().each(function () {
angular.element(this).data('angularMasonryStatic', true);
});
scope.masonryContainer = element[0];
var loadImages = scope.$eval(attrs.loadImages);
ctrl.loadImages = loadImages !== false;
Expand Down
33 changes: 23 additions & 10 deletions test/spec/directive.coffee
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,12 +132,14 @@ describe 'angular-masonry', ->
)

it 'should register an element in the parent controller', inject(($compile) =>
@scope.bricks = [1]
element = angular.element '''
<masonry>
<div class="masonry-brick"></div>
<div class="masonry-brick" ng-repeat="brick in bricks"></div>
</masonry>
'''
element = $compile(element)(@scope)
@scope.$digest() # Needed for initial ng-repeat

expect(@addBrick).toHaveBeenCalledOnce()
)
Expand All @@ -161,18 +163,18 @@ describe 'angular-masonry', ->
)

describe 'masonry-brick internals', =>
beforeEach ->
beforeEach =>
$.fn.imagesLoaded = (cb) -> cb()
@scope.bricks = [1]

afterEach ->
delete $.fn.imagesLoaded

it 'should append three elements to the controller', inject(($compile) =>
@scope.bricks = [1, 2, 3]
element = angular.element '''
<masonry>
<div class="masonry-brick"></div>
<div class="masonry-brick"></div>
<div class="masonry-brick"></div>
<div class="masonry-brick" ng-repeat="brick in bricks"></div>
</masonry>
'''
element = $compile(element)(@scope)
Expand All @@ -184,7 +186,7 @@ describe 'angular-masonry', ->
it 'should prepend elements when specified by attribute', inject(($compile) =>
element = angular.element '''
<masonry>
<div class="masonry-brick" prepend="{{true}}"></div>
<div class="masonry-brick" prepend="{{true}}" ng-repeat="brick in bricks"></div>
</masonry>
'''
element = $compile(element)(@scope)
Expand All @@ -196,7 +198,7 @@ describe 'angular-masonry', ->
it 'should append before imagesLoaded when preserve-order is set', inject(($compile) =>
element = angular.element '''
<masonry preserve-order>
<div class="masonry-brick"></div>
<div class="masonry-brick" ng-repeat="brick in bricks"></div>
</masonry>
'''
imagesLoadedCb = undefined
Expand All @@ -209,7 +211,7 @@ describe 'angular-masonry', ->
it 'should call layout after imagesLoaded when preserve-order is set', inject(($compile, $timeout) =>
element = angular.element '''
<masonry preserve-order>
<div class="masonry-brick"></div>
<div class="masonry-brick" ng-repeat="brick in bricks"></div>
</masonry>
'''
imagesLoadedCb = undefined
Expand All @@ -225,7 +227,7 @@ describe 'angular-masonry', ->
it 'should append before imagesLoaded when load-images is set to "false"', inject(($compile) =>
element = angular.element '''
<masonry load-images="false">
<div class="masonry-brick"></div>
<div class="masonry-brick" ng-repeat="brick in bricks"></div>
</masonry>
'''
imagesLoadedCb = undefined
Expand All @@ -238,7 +240,7 @@ describe 'angular-masonry', ->
it 'should call layout before imagesLoaded when load-images is set to "false"', inject(($compile, $timeout) =>
element = angular.element '''
<masonry load-images="false">
<div class="masonry-brick"></div>
<div class="masonry-brick" ng-repeat="brick in bricks"></div>
</masonry>
'''
imagesLoadedCb = undefined
Expand All @@ -248,3 +250,14 @@ describe 'angular-masonry', ->
$timeout.flush()
expect($.fn.masonry.calledWith('layout', sinon.match.any, sinon.match.any)).toBe(true)
)

it 'should not append if masonry already has the element', inject(($compile) =>
element = angular.element '''
<masonry load-images="false">
<div class="masonry-brick"></div>
</masonry>
'''
element = $compile(element)(@scope)
@scope.$digest()
expect($.fn.masonry.calledWith('appended', sinon.match.any, sinon.match.any)).toBe(false)
)