Masonry bugfix: the containerStyle value must be an object.

Author: jcbrand

src/pat/masonry/documentation.md

@@ -12,15 +12,15 @@ fitting stones in a wall. You’ve probably seen it in use all over the Internet
 
 | Property            | Default Value                               | Description           |
 |---------------------|---------------------------------------------|---------------------- |
-| column-width		  | `240`                                         | The width of a column of a horizontal grid  |
-| container-style	  | `{ position: 'relative' }`                  | CSS styles to be applied to the container element  |
+| column-width		  | `240`                                       | The width of a column of a horizontal grid  |
+| container-style	  | `{ "position": "relative" }`                | CSS styles to be applied to the container element. Note, Masonry expects an object to be passed in as value, but Patterns' property values are strings. This means that the passed in string must be in valid JSON format, so that it can be parsed and converted to an object before it's passed on to Masonry.  |
 | gutter		      | `10`                                        | Horizontal space between item elements  |
 | hidden-style		  | `{ opacity: 0, transform: 'scale(0.001)' }` | Style applied to hide elements   |
-| is-fit-width		  | `false`                                  | Set the width of the element to fit the available number of columns  |
-| is-origin-left	  | `true`                                   | Controls the horizontal flow of the layout. By default, item elements start positioning at |the left.  |
-| is-origin-top		  | `true`                                   | Controls the vertical flow of the layout. By default, item elements start positioning at the top.  |
-| item-selector		  | `.item`                                 | Specifies the child elements to be used as item elements.   |
+| is-fit-width		  | `false`                                     | Set the width of the element to fit the available number of columns  |
+| is-origin-left	  | `true`                                      | Controls the horizontal flow of the layout. By default, item elements start positioning at |the left.  |
+| is-origin-top		  | `true`                                      | Controls the vertical flow of the layout. By default, item elements start positioning at the top.  |
+| item-selector		  | `.item`                                     | Specifies the child elements to be used as item elements.   |
 | stamp		          | ""                                          | Specifies which elements are stamped (fixed) within the layout.  |
-| transition-duration | `0.4s`                                     | Length of time during which elements change layout.  |
+| transition-duration | `0.4s`                                      | Length of time during which elements change layout.  |
 | visible-style		  | `{ opacity: 1, transform: 'scale(1)' }`     | Style applied to reveal hidden elements.  |
 

src/pat/masonry/masonry.js

@@ -7,6 +7,7 @@
     if (typeof define === "function" && define.amd) {
         define([
             "jquery",
+            "pat-logger",
             "pat-registry",
             "pat-parser",
             "pat-base",
@@ -19,11 +20,12 @@
     } else {
         factory(root.$, root.patterns, root.patterns.Parser, root.Base, root.Masonry, root.imagesLoaded);
     }
-}(this, function($, registry, Parser, Base, utils, Masonry, imagesLoaded) {
+}(this, function($, logger, registry, Parser, Base, utils, Masonry, imagesLoaded) {
     "use strict";
+    var log = logger.getLogger("pat.masonry");
     var parser = new Parser("masonry");
     parser.addArgument("column-width");
-    parser.addArgument("container-style", "{ position: 'relative' }");
+    parser.addArgument("container-style", '{ "position": "relative" }');
     parser.addArgument("gutter");
     parser.addArgument("hidden-style", "{ opacity: 0, transform: 'scale(0.001)' }");
     parser.addArgument("is-fit-width", false);
@@ -50,9 +52,19 @@
         },
 
         initMasonry: function () {
+            var containerStyle;
+            try {
+                containerStyle = JSON.parse(this.options.containerStyle);
+            } catch (e) {
+                containerStyle = { "position": "relative" };
+                log.warn(
+                    "Invalid value passed in as containerStyle. Needs to "+
+                    "be valid JSON so that it can be converted to an object for Masonry."
+                );
+            }
             this.msnry = new Masonry(this.$el[0], {
                 columnWidth:         this.getTypeCastedValue(this.options.columnWidth),
-                containerStyle:      this.options.containerStyle,
+                containerStyle:      containerStyle,
                 gutter:              this.getTypeCastedValue(this.options.gutter),
                 hiddenStyle:         this.options.hiddenStyle,
                 isFitWidth:          this.options.is["fit-width"],