Merge pull request #25 from SunGard-Labs/dev

v1.0.3

.gitignore

@@ -2,4 +2,5 @@ app/
 node_modules/
 bower_components/
 .sass-cache/
-_includes/
+_includes/
+_site/

.jshintrc

@@ -21,5 +21,5 @@
     "angular": true,
     "Packery": true,
     "Draggabilly": true
-  }  
-}
+  }
+}

.travis.yml

@@ -0,0 +1,3 @@
+language: node_js
+node_js:
+  - "0.12"

Gruntfile.js

@@ -65,4 +65,8 @@ module.exports = function( grunt ) {
     'usebanner'
   ]);
 
-};
+  grunt.registerTask( 'test', [
+    'jshint'
+  ]);
+
+};

LICENSE

@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.
+THE SOFTWARE.

README.MD

@@ -2,6 +2,8 @@
 
 Angular module for the popular Packery library.
 
+![Travis CI](https://api.travis-ci.org/sungard-labs/angular-packery.png)
+
 
 #### Requirements ####
 
@@ -20,7 +22,7 @@ Angular module for the popular Packery library.
 By default, this module listens for an element or attribute call and instantiates with the options described in [Packery's API](http://packery.metafizzy.co/options.html). It looks to a self-created object, `div.packery-sizer`, to control the grid dimensions.
 
 ##### HTML #####
- 
+
 ```
 <packery ng-init="objects = [{id:'1'},{id:'2'},{id:'3'}]">
 
@@ -48,7 +50,7 @@ By default, this module listens for an element or attribute call and instantiate
 
 </packery>
 ```
-  
+
 #### CSS ####
 
 ```
@@ -119,7 +121,7 @@ This module supports almost all of the Packery options in their intended form. A
 
 ## CSS Classes / Animating ##
 
-Two CSS classes are applied to the objects to show depth during dragging events, `hovered` and `lifted`. The classes are triggered by both mouse events and touch events. 
+Two CSS classes are applied to the objects to show depth during dragging events, `hovered` and `lifted`. The classes are triggered by both mouse events and touch events.
 
 Animation can be applied easily with CSS:
 

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-packery",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "author": "http://github.com/sungard-labs/angular-packery/graphs/contributors",
   "homepage": "http://github.com/sungard-labs/angular-packery",
   "repository": {

dist/packery.js

@@ -1,7 +1,7 @@
 /*!
  * angular-packery
  * http://github.com/sungard-labs/angular-packery
- * Version: 1.0.2
+ * Version: 1.0.3
  * License: MIT
  */
 
@@ -61,11 +61,12 @@
             id: hash,
             packery: packeryObj
           });
+          el.data('Packery', packeryObj);
           $rootScope.$emit('packeryInstantiated', packeryObj);
           return packeryObj;
         } else {
           var interval = $interval(function(){
-            if (packeryObj !== undefined) { 
+            if (packeryObj !== undefined) {
               $interval.cancel(interval);
               deferred.resolve(packeryObj);
             }
@@ -75,7 +76,7 @@
             $interval.cancel(interval);
             deferred.reject(false);
           }, config.timeout);
-          
+
           return deferred.promise;
         }
       }
@@ -93,7 +94,7 @@
     self.packery = {};
 
     this.bindDragEvents = function(el) {
-      var handleSelector, handle, draggabilly;   
+      var handleSelector, handle, draggabilly;
 
       handleSelector = self.dragHandle;
 
@@ -104,14 +105,14 @@
         draggabilly = new Draggabilly(el[0], {
           handle: handleSelector
         });
-        handle = el.querySelectorAll(handleSelector);
+        handle = el[0].querySelectorAll(handleSelector);
       }
 
       // Init Draggabilly events
       self.packery.bindDraggabillyEvents(draggabilly);
 
       // Bind animate events for touch
-      handle.on('mouseenter', function(){
+      angular.element(handle).on('mouseenter', function(){
         el.addClass('hovered');
       }).
       on('mouseleave', function(){
@@ -156,7 +157,7 @@
 
         el.css('visibility','visible');
         $rootScope.$emit('packeryObjectPacked', el[0]);
-      });    
+      });
     };
 
     this.setDraggable = function (handle) {
@@ -166,14 +167,15 @@
   };
 
   var packeryDirective = function (config, service) {
+
     return {
       restrict: 'EAC',
       controller: 'PackeryController',
       transclude: true,
       replace: true,
       templateUrl: 'template/packery/packery.html',
       scope: {
-        containerStyle: '@?', // Type: Object, null
+        containerStyle: '=?', // Type: Object, null
         columnWidth: '@?', // Type: Number, Selector String
         gutter: '@?', // Type: Number, Selector String
         isHorizontal: '@?', // Type: Boolean
@@ -189,7 +191,7 @@
         handle: '@?' // Type: Boolean
 
         // Let's come back to this one...
-        // stamp: '@?', 
+        // stamp: '@?',
       },
       link: function (scope, element, attrs, controller) {
 
@@ -211,6 +213,9 @@
         if (scope.isOriginTop === 'false') { scope.isOriginTop = false; }
         if (scope.isResizeBound === 'false') { scope.isResizeBound = false; }
 
+        // Creates JS Object for passing CSS styles into Packery
+        if (scope.containerStyle && (typeof scope.containerStyle === 'object' )) { scope.containerStyle = scope.containerStyle; }
+
         // Set global draggability
         if (scope.draggable) { controller.setDraggable(scope.handle); }
 
@@ -247,15 +252,15 @@
         element.css('visibility','hidden');
 
         // Packs individual objects
-        controller.packObject(element);    
+        controller.packObject(element);
       }
     };
   };
 
   var packeryTemplates = function ($templateCache) {
     $templateCache
       .put('template/packery/packery.html', [
-        '<div>', 
+        '<div class="packery-wrapper">',
           '<div class="packery-sizer"></div>',
           '<div class="packery-container" ng-transclude></div>',
         '</div>'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-packery",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "author": "http://github.com/sungard-labs/angular-packery/graphs/contributors",
   "homepage": "http://github.com/sungard-labs/angular-packery",
   "repository": {
@@ -29,7 +29,8 @@
     "grunt-banner": "~0.2.3"
   },
   "scripts": {
-    "postinstall": "bower install"
+    "postinstall": "bower install",
+    "test": "grunt test --verbose"
   },
   "license": "MIT"
 }

src/packery.js

@@ -59,7 +59,7 @@
           return packeryObj;
         } else {
           var interval = $interval(function(){
-            if (packeryObj !== undefined) { 
+            if (packeryObj !== undefined) {
               $interval.cancel(interval);
               deferred.resolve(packeryObj);
             }
@@ -69,7 +69,7 @@
             $interval.cancel(interval);
             deferred.reject(false);
           }, config.timeout);
-          
+
           return deferred.promise;
         }
       }
@@ -87,7 +87,7 @@
     self.packery = {};
 
     this.bindDragEvents = function(el) {
-      var handleSelector, handle, draggabilly;   
+      var handleSelector, handle, draggabilly;
 
       handleSelector = self.dragHandle;
 
@@ -150,7 +150,7 @@
 
         el.css('visibility','visible');
         $rootScope.$emit('packeryObjectPacked', el[0]);
-      });    
+      });
     };
 
     this.setDraggable = function (handle) {
@@ -160,17 +160,6 @@
   };
 
   var packeryDirective = function (config, service) {
-
-    var createObject = function (str) {
-      try {
-        var obj = JSON.parse(JSON.stringify(eval('('+str+')')));
-        if (obj && typeof obj === "object") {
-          return obj;
-        }
-      }
-      catch (e) {}
-      return false;
-    };
 
     return {
       restrict: 'EAC',
@@ -179,7 +168,7 @@
       replace: true,
       templateUrl: 'template/packery/packery.html',
       scope: {
-        containerStyle: '@?', // Type: Object, null
+        containerStyle: '=?', // Type: Object, null
         columnWidth: '@?', // Type: Number, Selector String
         gutter: '@?', // Type: Number, Selector String
         isHorizontal: '@?', // Type: Boolean
@@ -195,7 +184,7 @@
         handle: '@?' // Type: Boolean
 
         // Let's come back to this one...
-        // stamp: '@?', 
+        // stamp: '@?',
       },
       link: function (scope, element, attrs, controller) {
 
@@ -218,7 +207,7 @@
         if (scope.isResizeBound === 'false') { scope.isResizeBound = false; }
 
         // Creates JS Object for passing CSS styles into Packery
-        if (scope.containerStyle) { scope.containerStyle = createObject(scope.containerStyle) };
+        if (scope.containerStyle && (typeof scope.containerStyle === 'object' )) { scope.containerStyle = scope.containerStyle; }
 
         // Set global draggability
         if (scope.draggable) { controller.setDraggable(scope.handle); }
@@ -256,15 +245,15 @@
         element.css('visibility','hidden');
 
         // Packs individual objects
-        controller.packObject(element);    
+        controller.packObject(element);
       }
     };
   };
 
   var packeryTemplates = function ($templateCache) {
     $templateCache
       .put('template/packery/packery.html', [
-        '<div class="packery-wrapper">', 
+        '<div class="packery-wrapper">',
           '<div class="packery-sizer"></div>',
           '<div class="packery-container" ng-transclude></div>',
         '</div>'