40 | ![A masonry brick]()
41 |
42 | 
A directive to use masonry with AngularJS.
27 | 28 | 31 | 32 | 35 | 36 | 39 |bower install --save
45 | angular-masonryangular-masonry.js.wu.masonry to you app modules.masonry directive.<div masonry load-images="true">
73 | <div class="masonry-brick" ng-repeat="brick in bricks">
74 | <img ng-src="{{ brick.src }}" alt="A masonry brick">
75 | </div>
76 | </div>
77 | 
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
124 |
125 |
126 |
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | require('./angular-masonry');
2 | module.exports = 'wu.masonry';
3 |
--------------------------------------------------------------------------------
/karma.conf.js:
--------------------------------------------------------------------------------
1 | module.exports = function (config) {
2 | 'use strict';
3 |
4 | config.set({
5 | basePath: '',
6 | frameworks: ['jasmine'],
7 | files: [
8 | 'bower_components/masonry/dist/masonry.pkgd.js',
9 | 'bower_components/jquery/dist/jquery.js',
10 | 'bower_components/sinonjs/sinon.js',
11 | 'bower_components/jasmine-sinon/lib/jasmine-sinon.js',
12 | 'bower_components/angular/angular.js',
13 | 'bower_components/angular-mocks/angular-mocks.js',
14 | 'src/angular-masonry.js',
15 | 'test/**/*.coffee'
16 | ],
17 | preprocessors: {
18 | '**/*.coffee': ['coffee']
19 | },
20 | coffeePreprocessor: {
21 | // options passed to the coffee compiler
22 | options: {
23 | bare: true,
24 | sourceMap: false
25 | },
26 | // transforming the filenames
27 | transformPath: function (path) {
28 | return path.replace(/\.coffee$/, '.js');
29 | }
30 | },
31 | exclude: [],
32 | reporters: ['dots'],
33 | autoWatch: false,
34 | browsers: ['Chrome'],
35 | captureTimeout: 5000,
36 | singleRun: true,
37 | reportSlowerThan: 100
38 | });
39 | };
40 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "angular-masonry",
3 | "version": "0.17.0",
4 | "main": "index.js",
5 | "devDependencies": {
6 | "grunt": "^0.4.1",
7 | "grunt-cli": "^0.1.13",
8 | "grunt-contrib-concat": "^1.0.0",
9 | "grunt-contrib-connect": "^0.11.2",
10 | "grunt-contrib-uglify": "^0.11.0",
11 | "grunt-contrib-watch": "^0.6.1",
12 | "grunt-conventional-changelog": "^6.1.0",
13 | "grunt-karma": "^0.12.0",
14 | "grunt-ng-annotate": "^1.0.1",
15 | "jasmine-core": "^2.2.0",
16 | "karma": "^0.13.21",
17 | "karma-coffee-preprocessor": "^0.3.0",
18 | "karma-jasmine": "^0.3.5",
19 | "karma-phantomjs-launcher": "^1.0.0",
20 | "load-grunt-tasks": "^3.1.0",
21 | "phantomjs": "^2.1.3",
22 | "phantomjs-prebuilt": "^2.1.4"
23 | },
24 | "repository": "https://github.com/passy/angular-masonry.git",
25 | "license": "MIT",
26 | "scripts": {
27 | "test": "grunt test"
28 | },
29 | "dependencies": {
30 | "angular": "^1.6.0",
31 | "imagesloaded": "^4.1.0",
32 | "jquery-bridget": "^2.0.0",
33 | "masonry-layout": "^4.0.0"
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/src/angular-masonry.js:
--------------------------------------------------------------------------------
1 | /**
2 | * angular-masonry
3 | *
4 | * @external 'angular.module'
5 | * @version <%= pkg.version %>
6 | * @author {@link https://passy.me/|Pascal Hartig}
7 | * @license: MIT
8 | */
9 | (function () {
10 | 'use strict';
11 |
12 | angular.module('wu.masonry', [])
13 | .controller('MasonryCtrl', function controller($scope, $element, $timeout) {
14 | var bricks = {};
15 | var schedule = [];
16 | var destroyed = false;
17 | var self = this;
18 | var timeout = null;
19 |
20 | this.preserveOrder = false;
21 | this.loadImages = false;
22 |
23 | this.scheduleMasonryOnce = function scheduleMasonryOnce() {
24 | var args = arguments;
25 | var found = schedule.filter(function filterFn(item) {
26 | return item[0] === args[0];
27 | }).length > 0;
28 |
29 | if (!found) {
30 | this.scheduleMasonry.apply(null, arguments);
31 | }
32 | };
33 |
34 | // Make sure it's only executed once within a reasonable time-frame in
35 | // case multiple elements are removed or added at once.
36 | this.scheduleMasonry = function scheduleMasonry() {
37 | if (timeout) {
38 | $timeout.cancel(timeout);
39 | }
40 |
41 | schedule.push([].slice.call(arguments));
42 |
43 | timeout = $timeout(function runMasonry() {
44 | if (destroyed) {
45 | return;
46 | }
47 | schedule.forEach(function scheduleForEach(args) {
48 | var method = args[0];
49 | args = args.slice(1);
50 |
51 | self.masonry[method].apply(self.masonry, args);
52 | });
53 | schedule = [];
54 | }, 30);
55 | };
56 |
57 | function defaultLoaded($element) {
58 | $element.addClass('loaded');
59 | }
60 |
61 | this.addBrick = function addBrick(method, element, id) {
62 | if (destroyed) {
63 | return;
64 | }
65 |
66 | function _add() {
67 | if (Object.keys(bricks).length === 0) {
68 | self.masonry.resize();
69 | }
70 | if (bricks[id] === undefined) {
71 | // Keep track of added elements.
72 | bricks[id] = true;
73 | defaultLoaded(element);
74 | self.masonry[method](element, true);
75 | }
76 | }
77 |
78 | function _layout() {
79 | // I wanted to make this dynamic but ran into huuuge memory leaks
80 | // that I couldn't fix. If you know how to dynamically add a
81 | // callback so one could say