Basic grid support and Textarea max length

Author: Anthropic

bower.json

@@ -30,6 +30,7 @@
     "moment": "~2.10.6"
   },
   "resolutions": {
-    "angular": "1.4.4"
+    "angular": "^1.4.8",
+    "angular-material": "~1.0.1"
   }
 }

examples/data/grid.json

@@ -52,23 +52,19 @@
     },
     {
       "type": "section",
-      "grid": {
-        "layout": "column"
-      },
+      "grid": { "layout": "column" },
       "items": [
         {
           "type": "section",
-          "grid": {
-            "layout": "row"
-          },
+          "grid": { "layout": "row" },
           "items": [
             {
               "key": "firstname",
-              "grid": { "flex": 50, "layout": "column" }
+              "grid": { "flex": 50 }
             },
             {
               "key": "lastname",
-              "grid": { "flex": 50, "layout": "column" }
+              "grid": { "flex": "" }
             }
           ]
         },
@@ -82,30 +78,26 @@
         },
         {
           "type": "section",
-          "grid": {
-            "layout": "row"
-          },
+          "grid": { "layout": "row" },
           "items": [
             {
               "key": "city",
-              "grid": { "flex": 50, "layout": "column" }
+              "grid": { "flex": 33, "layout": "column" }
             },
             {
               "key": "state",
               "type":"select",
-              "grid": { "state": 25, "layout": "column" }
+              "grid": { "flex": 33, "layout": "column" }
             },
             {
               "key": "postcode",
-              "grid": { "postcode": 25, "layout": "column" }
+              "grid": { "flex": 33, "layout": "column" }
             }
           ]
         },
         {
           "type": "section",
-          "grid": {
-            "layout": "row"
-          },
+          "grid": { "layout": "row" },
           "items": ["email"]
         }
       ]

material-decorator.js

@@ -45,15 +45,17 @@ $templateCache.put("decorators/material/textarea.html","<md-input-container clas
     var condition          = sfBuilderProvider.builders.condition;
     var array              = sfBuilderProvider.builders.array;
 
+    var sfLayout           = sfLayout;
     var sfMessagesNode     = sfMessagesNodeHandler();
     var sfMessages         = sfMessagesBuilder;
     var sfOptions          = sfOptionsBuilder;
     var mdAutocomplete     = mdAutocompleteBuilder;
     var mdSwitch           = mdSwitchBuilder;
     var mdDatepicker       = mdDatepickerBuilder;
     var mdTabs             = mdTabsBuilder;
+    var textarea           = textareaBuilder;
 
-    var core = [ sfField, ngModel, ngModelOptions, condition ];
+    var core = [ sfField, ngModel, ngModelOptions, condition, sfLayout ];
     var defaults = core.concat(sfMessages);
     var arrays = core.concat(array);
 
@@ -76,15 +78,25 @@ $templateCache.put("decorators/material/textarea.html","<md-input-container clas
       radios: { template: base + 'radios.html', builder: defaults },
       'radios-inline': { template: base + 'radios-inline.html', builder: defaults },
       radiobuttons: { template: base + 'radio-buttons.html', builder: defaults },
-      section: { template: base + 'section.html', builder: [ sfField, simpleTransclusion, condition ] },
+      section: { template: base + 'section.html', builder: [ sfField, simpleTransclusion, condition, sfLayout ] },
       select: { template: base + 'select.html', builder: defaults.concat(sfOptions) },
       submit: { template: base + 'submit.html', builder: defaults },
       tabs: { template: base + 'tabs.html', builder: [ sfField, mdTabs, condition ] },
       tabarray: { template: base + 'tabarray.html', builder: arrays },
-      textarea: { template: base + 'textarea.html', builder: defaults },
+      textarea: { template: base + 'textarea.html', builder: defaults.concat(textarea) },
       switch: { template: base + 'switch.html', builder: defaults.concat(mdSwitch) }
     });
 
+    function sfLayout(args) {
+      var layoutDiv = args.fieldFrag.querySelector('[sf-layout]');
+
+      if (args.form.grid) {
+        Object.getOwnPropertyNames(args.form.grid).forEach(function(property, idx, array) {
+          layoutDiv.setAttribute(property, args.form.grid[property]);
+        });
+      };
+    };
+
     function sfMessagesNodeHandler() {
       var html = '<div ng-if="ngModel.$invalid" ng-messages="ngModel.$error"><div sf-message ng-message></div></div>';
       var div = document.createElement('div');
@@ -100,6 +112,14 @@ $templateCache.put("decorators/material/textarea.html","<md-input-container clas
       }
     };
 
+    function textareaBuilder(args) {
+      var textareaFrag = args.fieldFrag.querySelector('textarea');
+      var maxLength = args.form.maxlength || false;
+      if (textareaFrag && maxLength) {
+        textareaFrag.setAttribute('md-maxlength', maxLength);
+      };
+    };
+
     function mdAutocompleteBuilder(args) {
       var mdAutocompleteFrag = args.fieldFrag.querySelector('md-autocomplete');
       var minLength = args.form.minLength || 1;
@@ -130,9 +150,6 @@ $templateCache.put("decorators/material/textarea.html","<md-input-container clas
         mdSwitchFrag.setAttribute('ng-true-value', args.form.schema.titleMap.true);
         mdSwitchFrag.setAttribute('ng-false-value', args.form.schema.titleMap.false);
       }
-      if (args.form.schema.ink) {
-        mdSwitchFrag.setIdAttribute('md-no-ink', args.form.schema.ink);
-      }
     };
 
     function sfOptionsBuilder(args) {
@@ -156,11 +173,6 @@ $templateCache.put("decorators/material/textarea.html","<md-input-container clas
             // TODO enable filter to allow processing results
             // args.form.optionSource = link.href.replace(related, '$1$1 model.$2 | _externalOptionUri $3$3');
             args.form.optionSource = link.href.replace(related, '$1$1 model.$2 $3$3');
-            // args.form.watchList = [];
-            // matched = args.form.optionSource.match(source);
-            // while ((matched = source.exec(args.form.optionSource)) !== null) {
-            //   args.form.watchList.push(matched);
-            // };
           };
         };
 
@@ -169,19 +181,6 @@ $templateCache.put("decorators/material/textarea.html","<md-input-container clas
       else {
         args.form.selectOptions = sfOptionsProcessor(args.form);
       };
-
-      // TODO implement $watch for remote data loading after the page loads
-      function getOptionsHandler(form, evalExpr) {
-        if (form.optionData) {
-          return evalExpr(form.optionData);
-        };
-
-        if (form.selectOptions) {
-          return form.selectOptions;
-        };
-
-        return [];
-      };
     };
 
     function mdDatepickerBuilder(args) {
@@ -232,6 +231,18 @@ $templateCache.put("decorators/material/textarea.html","<md-input-container clas
     };
   };
 
+  function getOptionsHandler(form, evalExpr) {
+    if (form.optionData) {
+      return evalExpr(form.optionData);
+    };
+
+    if (form.selectOptions) {
+      return form.selectOptions;
+    };
+
+    return [];
+  };
+
   function sfOptionsProcessor(data) {
     var enumTitleMap = [];