impr: added redraw on image loaded

Author: JohnnyTheTank

Gruntfile.js

@@ -3,6 +3,7 @@ module.exports = function(grunt) {
     var banner = '/**\n    @name: <%= pkg.name %> \n    @version: <%= pkg.version %> (<%= grunt.template.today("dd-mm-yyyy") %>) \n    @author: <%= pkg.author %> \n    @url: <%= pkg.homepage %> \n    @license: <%= pkg.license %>\n*/\n';
 
     var sources = [
+                        'node_modules/imagesloaded/imagesloaded.pkgd.js',
                         'src/angular-bricklayer.js'
                     ];
 

bower.json

@@ -29,6 +29,7 @@
     "angular": "^1.5.5"
   },
   "dependencies": {
-    "bricklayer": "^0.4.1"
+    "bricklayer": "^0.4.1",
+    "imagesloaded": "^4.1.0"
   }
 }

demo/index.html

@@ -66,7 +66,8 @@
 <!-- Bricklayer needs to have "bricklayer" class name. -->
 <div class="bricklayer">
     <div class="box" bricklayer-append ng-repeat="item in data" style="background-color: {{item.color}};">
-        <img ng-src="http://lorempixel.com/{{item.width}}/{{item.height}}">
+        <!--<img ng-src="http://lorempixel.com/{{item.width}}/{{item.height}}">-->
+        <img ng-src="http://placehold.it/{{item.width}}x{{item.height}}">
     </div>
 </div>
 

package.json

@@ -34,6 +34,7 @@
     "grunt-contrib-watch": "^0.6.1"
   },
   "dependencies": {
-    "bricklayer": "^0.4.1"
+    "bricklayer": "^0.4.1",
+    "imagesloaded": "^4.1.0"
   }
 }

src/angular-bricklayer.js

@@ -5,33 +5,44 @@ angular.module('jtt_bricklayer', [])
             link: function (scope, element, attrs) {
                 var bricklayer = new Bricklayer(element[0]);
 
+                imagesLoaded(element[0], function () {
+                    bricklayer.redraw();
+                });
+
                 $timeout(function () {
                     bricklayer.redraw();
                 });
 
-                scope.$on('bricklayer.append', function (event, element) {
-                    bricklayer.append(element);
+                scope.$on('bricklayer.append', function (event, selectedElement) {
+                    bricklayer.append(selectedElement[0]);
                     bricklayer.redraw();
+                    imagesLoaded(selectedElement, function () {
+                        bricklayer.redraw();
+                    });
                 });
 
-                scope.$on('bricklayer.prepend', function (event, element) {
-                    bricklayer.prepend(element);
+                scope.$on('bricklayer.prepend', function (event, selectedElement) {
+                    bricklayer.prepend(selectedElement[0]);
                     bricklayer.redraw();
+                    imagesLoaded(selectedElement, function () {
+                        bricklayer.redraw();
+                    });
                 });
 
                 scope.$on('bricklayer.redraw', function () {
                     bricklayer.redraw();
                 });
             },
-            controller: function ($scope) {}
+            controller: function ($scope) {
+            }
         }
     }])
     .directive('bricklayerAppend', function () {
         return {
             require: '^^bricklayer',
             restrict: 'ACE',
             link: function (scope, element, attrs) {
-                scope.$emit('bricklayer.append', element[0]);
+                scope.$emit('bricklayer.append', element);
             }
         }
     })
@@ -40,7 +51,7 @@ angular.module('jtt_bricklayer', [])
             require: '^^bricklayer',
             restrict: 'ACE',
             link: function (scope, element, attrs) {
-                scope.$emit('bricklayer.prepend', element[0]);
+                scope.$emit('bricklayer.prepend', element);
             }
         }
     });