Added section support

Anthropic · Anthropic · commit e2489c0f3363 · 2015-10-20T23:44:07.000+11:00
Basic section support to start working on flex grid
diff --git a/bower.json b/bower.json
@@ -20,7 +20,7 @@
   ],
   "dependencies": {
     "angular-schema-form": ">=0.8.6",
-    "angular": "1.4.0-beta.6",
+    "angular": "1.4.5",
     "angular-material": "master",
     "angular-animate": "1.4",
     "angular-sanitize": "1.4"
diff --git a/examples/data/autocomplete.json b/examples/data/autocomplete.json
@@ -5,11 +5,11 @@
     "properties": {
       "first": {
         "title": "What is your favourite Schwarzenegger movie?",
-        "type": "string"
+        "type": "object"
       },
       "second": {
         "title": "What is your favourite Schwarzenegger movie?",
-        "type": "string"
+        "type": "object"
       }
     }
   },
@@ -32,7 +32,7 @@
     },
     {
       "type": "help",
-      "helpvalue": "I need at least 4 characters"
+      "helpvalue": "I need at least 4 non-space characters"
     },
     {
       "type": "submit",
diff --git a/examples/material-example.html b/examples/material-example.html
@@ -110,7 +110,7 @@
 
 </style>
 </head>
-<body ng-app="test" ng-controller="TestCtrl" ng-cloak>
+<body ng-app="test" ng-controller="TestCtrl as ctrl" ng-cloak>
 
   <!--- nav hidden until we redo it in angular-material -->
   <nav ng-if="false" class="navbar navbar-default">
@@ -279,11 +279,11 @@ <h3>Schema</h3>
 app.controller('TestCtrl', function($scope, $http, $location, $timeout, $q) {
 
   $scope.tests = [
+    { name: "Material Flex Grid", data: 'data/grid.json' },
     { name: "Autocomplete", data: 'data/autocomplete.json' },
     { name: "Simple", data: 'data/simple.json' },
     { name: "Basic JSON Schema Type", data: 'data/types.json' },
     { name: "TitleMap Examples", data: 'data/titlemaps.json' },
-    /*{ name: "Material FLex Grid", data: 'data/grid.json' },*/
     /*{ name: "Complex Key Support", data: 'data/complex-keys.json' },*/
     /*{ name: "Array", data: 'data/array.json' },*/
     /*{ name: "Tab Array", data: 'data/tabarray.json' },*/
@@ -298,9 +298,6 @@ <h3>Schema</h3>
   $scope.searchText    = null;
   $scope.simulateQuery = false;
   $scope.querySearch   = querySearch;
-  $scope.info = function (t) {
-    console.info(t);
-  };
   /**
    * Search for arnieFlix... use $timeout to simulate
    * remote dataservice call.
diff --git a/material-decorator.js b/material-decorator.js
@@ -6,14 +6,14 @@ $templateCache.put("decorators/material/checkbox.html","<div class=\"checkbox sc
 $templateCache.put("decorators/material/checkboxes.html","<div sf-array=\"form\" sf-field-model=\"\" class=\"form-group schema-form-checkboxes {{form.htmlClass}}\" ng-class=\"{\'has-error\': hasError(), \'has-success\': hasSuccess()}\"><label class=\"control-label\" ng-show=\"showTitle()\">{{form.title}}</label><div class=\"checkbox\" ng-repeat=\"val in titleMapValues track by $index\"><md-checkbox ng-model=\"titleMapValues[$index]\" sf-changed=\"form\" ng-disabled=\"form.readonly\" name=\"{{form.key.slice(-1)[0]}}\" ng-true-value=\"true\" ng-false-value=\"false\" aria-label=\"{{form.title || form.key.slice(-1)[0]}}\"><span ng-bind-html=\"form.titleMap[$index].name\"></span></md-checkbox></div><div ng-messages=\"ngModel.$error\"><div sf-message=\"\" ng-message=\"\"></div></div></div>");
 $templateCache.put("decorators/material/chips.html","<div class=\"form-group schema-form-chips {{form.htmlClass}}\" ng-class=\"{\'has-error\': hasError(), \'has-success\': hasSuccess(), \'has-feedback\': form.feedback !== false}\"><md-chips sf-field-model=\"\" readonly=\"form.readonly\" flex=\"\" placeholder=\"{{form.title || form.key.slice(-1)[0]}}\"><md-chip-template><strong ng-if=\"!form.template\">{{$chip}}</strong></md-chip-template></md-chips><div ng-messages=\"ngModel.$error\"><div sf-message=\"\" ng-message=\"\"></div></div></div>");
 $templateCache.put("decorators/material/date.html","<md-input-container class=\"schema-form-date {{form.htmlClass}}\"><md-datepicker sf-field-model=\"\" sf-changed=\"form\" sf-type-parser=\"form.schema\" schema-validate=\"form\" id=\"{{form.key.slice(-1)[0]}}\" ng-show=\"form.key\" ng-class=\"form.fieldHtmlClass\" ng-disabled=\"form.readonly\" md-min-date=\"minDate\" md-max-date=\"maxDate\" md-placeholder=\"Enter date\"><label ng-show=\"showTitle()\" for=\"{{form.key.slice(-1)[0]}}\">{{form.title}}</label><div ng-messages=\"ngModel.$error\"><div sf-message=\"\" ng-message=\"\"></div></div></md-datepicker></md-input-container>");
-$templateCache.put("decorators/material/default.html","<md-input-container class=\"schema-form-{{form.type}} {{form.htmlClass}}\"><label ng-show=\"showTitle()\" for=\"{{form.key.slice(-1)[0]}}\">{{form.title}}</label><input sf-field-model=\"\" ng-show=\"form.key\" type=\"{{form.type}}\" step=\"any\" sf-changed=\"form\" placeholder=\"{{form.placeholder}}\" id=\"{{form.key.slice(-1)[0]}}\" ng-class=\"form.fieldHtmlClass\" ng-disabled=\"form.readonly\" name=\"{{form.key.slice(-1)[0]}}\" sf-type-parser=\"form.schema\" schema-validate=\"form\"><div ng-messages=\"ngModel.$error\"><div sf-message=\"\" ng-message=\"\"></div></div></md-input-container>");
+$templateCache.put("decorators/material/default.html","<md-input-container class=\"schema-form-{{form.type}} {{form.htmlClass}}\" sf-messages=\"\"><label ng-show=\"showTitle()\" for=\"{{form.key.slice(-1)[0]}}\">{{form.title}}</label><input sf-field-model=\"\" ng-show=\"form.key\" type=\"{{form.type}}\" step=\"any\" sf-changed=\"form\" placeholder=\"{{form.placeholder}}\" id=\"{{form.key.slice(-1)[0]}}\" ng-class=\"form.fieldHtmlClass\" sf-type-parser=\"form.schema\" ng-disabled=\"form.readonly\" schema-validate=\"form\" name=\"{{form.key.slice(-1)[0]}}\" aria-describedby=\"{{form.key.slice(-1)[0] + \'Status\'}}\"></md-input-container>");
 $templateCache.put("decorators/material/fieldset-trcl.html","<fieldset ng-disabled=\"form.readonly\" class=\"standard {{form.htmlClass}}\" flex=\"\"><legend ng-show=\"form.title\">{{ form.title }}</legend><div ng-transclude=\"\"></div></fieldset>");
 $templateCache.put("decorators/material/fieldset.html","<fieldset ng-disabled=\"form.readonly\" class=\"standard {{form.htmlClass}}\" flex=\"\"><legend ng-show=\"form.title\">{{ form.title }}</legend></fieldset>");
 $templateCache.put("decorators/material/help.html","<div class=\"helpvalue schema-form-helpvalue {{form.htmlClass}}\" ng-bind-html=\"form.helpvalue\"></div>");
 $templateCache.put("decorators/material/radio-buttons.html","<div class=\"form-group schema-form-radiobuttons {{form.htmlClass}}\" ng-class=\"{\'has-error\': hasError(), \'has-success\': hasSuccess()}\"><div><label class=\"control-label\" ng-show=\"showTitle()\">{{form.title}}</label></div><section layout=\"row\" layout-sm=\"column\" layout-align=\"center center\"><md-input-container ng-repeat=\"item in form.titleMap\"><md-button type=\"button\" class=\"group md-raised\" sf-field-model=\"replaceAll\" ng-model=\"$$value$$\" sf-changed=\"form\" ng-class=\"{\'md-primary\': ($$value$$ == item.value)}\" ng-disabled=\"form.readonly\" ng-model-options=\"form.ngModelOptions\" schema-validate=\"form\" ng-value=\"item.value\" ng-click=\"$$value$$ = item.value\" name=\"{{form.key.join(\'.\')}}\"><span ng-bind-html=\"item.name\"></span></md-button></md-input-container></section><div class=\"help-block\" sf-message=\"form.description\"></div></div>");
 $templateCache.put("decorators/material/radios-inline.html","<div class=\"form-group schema-form-radios-inline {{form.htmlClass}}\" ng-class=\"{\'has-error\': hasError(), \'has-success\': hasSuccess()}\"><label class=\"control-label\" ng-show=\"showTitle()\">{{form.title}}</label><md-radio-group layout=\"row\" sf-field-model=\"replaceAll\" ng-model=\"$$value$$\" class=\"{{form.fieldHtmlClass}}\" ng-class=\"{ active: item.value === $$value$$ }\" sf-changed=\"form\" schema-validate=\"form\" ng-disabled=\"form.readonly\" name=\"{{form.key.join(\'.\')}}\"><md-radio-button ng-repeat=\"item in form.titleMap\" ng-value=\"item.value\"><span ng-bind-html=\"item.name\"></span></md-radio-button></md-radio-group><div ng-messages=\"ngModel.$error\"><div sf-message=\"\" ng-message=\"\"></div></div></div>");
 $templateCache.put("decorators/material/radios.html","<div class=\"form-group schema-form-radios {{form.htmlClass}}\" ng-class=\"{\'has-error\': hasError(), \'has-success\': hasSuccess()}\"><label class=\"control-label\" ng-show=\"showTitle()\" aria-label=\"{{form.title}}\">{{form.title}} {{form.titleMap | json}}</label><md-radio-group sf-field-model=\"\" sf-changed=\"form\" ng-disabled=\"form.readonly\" name=\"{{form.key.join(\'.\')}}\"><md-radio-button ng-repeat=\"item in form.titleMap\" ng-value=\"item.value\" class=\"{{form.fieldHtmlClass}}\" sf-field-model=\"ng-class\" ng-class=\"{ active: item.value === $$value$$ }\"><span ng-bind-html=\"item.name\"></span></md-radio-button></md-radio-group><div ng-messages=\"ngModel.$error\"><div sf-message=\"\" ng-message=\"\"></div></div></div>");
-$templateCache.put("decorators/material/section.html","<div class=\"schema-form-section {{form.htmlClass}}\"><sf-decorator ng-repeat=\"item in form.items\" form=\"item\"></sf-decorator></div>");
+$templateCache.put("decorators/material/section.html","<div class=\"schema-form-section {{form.htmlClass}}\"></div>");
 $templateCache.put("decorators/material/select.html","<md-input-container class=\"form-group {{form.htmlClass}} schema-form-select\" ng-class=\"{\'has-error\': hasError(), \'has-success\': hasSuccess(), \'has-feedback\': form.feedback !== false}\"><label ng-show=\"showTitle()\">{{form.title}}</label><md-select sf-field-model=\"\"><md-optgroup ng-repeat-start=\"(key, opt) in form.titleMap | orderBy:\'group\' as optGroups\" ng-if=\"opt.group && opt.group != optGroups[key-1].group\" label=\"{{opt.group}}\"><md-option ng-repeat=\"(key, filtered) in form.titleMap | filter: {group: opt.group} | orderBy:\'name\' as opts\" ng-value=\"filtered.value\">{{filtered.name}}</md-option></md-optgroup><md-option ng-repeat-end=\"\" ng-if=\"!opt.group\" ng-value=\"opt.value\">{{opt.name}}</md-option></md-select><div ng-messages=\"ngModel.$error\"><div sf-message=\"\" ng-message=\"\"></div></div></md-input-container>");
 $templateCache.put("decorators/material/submit.html","<section class=\"schema-form-submit {{form.htmlClass}}\"><md-button class=\"md-raised {{ form.style || \'md-primary\' }} {{form.fieldHtmlClass}}\" ng-disabled=\"form.readonly\">{{form.title}}</md-button></section>");
 $templateCache.put("decorators/material/switch.html","<md-input-container class=\"schema-form-switch {{form.htmlClass}}\"><md-switch sf-field-model=\"\" sf-changed=\"form\" sf-type-parser=\"form.schema\" schema-validate=\"form\" id=\"{{form.key.slice(-1)[0]}}\" aria-label=\"{{form.title}}\" ng-true-value=\"\'yup\'\" ng-false-value=\"\'nope\'\" ng-show=\"form.key\" ng-class=\"form.fieldHtmlClass\" ng-disabled=\"form.readonly\"><label ng-show=\"showTitle()\" for=\"{{form.key.slice(-1)[0]}}\">{{form.title}}</label><div ng-messages=\"ngModel.$error\"><div sf-message=\"\" ng-message=\"\"></div></div></md-switch></md-input-container>");
@@ -32,14 +32,16 @@ angular.module('schemaForm')
       var condition          = sfBuilderProvider.builders.condition;
       var array              = sfBuilderProvider.builders.array;
 
+      var sfMessagesNode = (function() {
+        var html = '<div ng-if="ngModel.$invalid" ng-messages="ngModel.$error"><div sf-message ng-message></div></div>';
+        var div = document.createElement('div');
+        div.innerHTML = html;
+        return div.firstChild;
+      })();
       var sfMessages = function(args) {
         var messagesDiv = args.fieldFrag.querySelector('[sf-messages]');
-        if (messagesDiv) {
-          messagesDiv.setAttribute('ng-messages', 'ngModel.$error');
-          var child = document.createElement('div');
-          child.setAttribute('sf-message', '');
-          child.setAttribute('ng-message', '');
-          messagesDiv.appendChild(child);
+        if (messagesDiv && sfMessagesNode) {
+          messagesDiv.appendChild(sfMessagesNode);
         }
       };
 
@@ -141,6 +143,21 @@ angular.module('schemaForm')
         'item in evalExpr("this[\""+form.optionFilter+"\"](\""+searchText+"\")")');
     }
   }
+
+  .filter('autocompleteMovieTest', function() {
+    function autocompleteMovieTestFilter(array, input){
+      var current = input;
+      // You could also call multiple filters here using:
+      // current = $filter('filterName')(input)
+      if(typeof current === 'string') {
+        current = current.replace(' ','-').toLowerCase();
+      }
+      current = (!current) ? '_undefined' : current;
+      return current;
+    }
+
+    return externalOptionUriFilter;
+  })
 */
 
 /**
diff --git a/material-decorator.min.js b/material-decorator.min.js
diff --git a/package.json b/package.json
@@ -12,7 +12,7 @@
   "author": "David Jensen <david.lgj@gmail.com>",
   "license": "MIT",
   "devDependencies": {
-    "gulp": "^3.8.11",
+    "gulp": "^3.9.0",
     "gulp-angular-templatecache": "^1.6.0",
     "gulp-concat": "^2.5.2",
     "gulp-minify-html": "^1.0.2",
diff --git a/src/default.html b/src/default.html
@@ -1,7 +1,5 @@
-<md-input-container class="schema-form-{{form.type}} {{form.htmlClass}}">
+<md-input-container class="schema-form-{{form.type}} {{form.htmlClass}}" sf-messages>
   <label  ng-show="showTitle()" for="{{form.key.slice(-1)[0]}}">{{form.title}}</label>
-
-
 <!--
   <input ng-if="!form.fieldAddonLeft && !form.fieldAddonRight"
          ng-show="form.key"
@@ -18,7 +16,6 @@
          name="{{form.key.slice(-1)[0]}}"
          aria-describedby="{{form.key.slice(-1)[0] + 'Status'}}">
 -->
-
   <input sf-field-model
          ng-show="form.key"
          type="{{form.type}}"
@@ -27,15 +24,9 @@
          placeholder="{{form.placeholder}}"
          id="{{form.key.slice(-1)[0]}}"
          ng-class="form.fieldHtmlClass"
+         sf-type-parser="form.schema"
          ng-disabled="form.readonly"
+         schema-validate="form"
          name="{{form.key.slice(-1)[0]}}"
-         sf-type-parser="form.schema"
-         schema-validate="form" />
-  <div ng-messages="ngModel.$error">
-    <!--
-      This is a bit of a hack. sf-message does the work, but ng-messages and ng-message
-      is needed for the styling
-    -->
-    <div sf-message ng-message></div>
-  </div>
+         aria-describedby="{{form.key.slice(-1)[0] + 'Status'}}" />
 </md-input-container>
diff --git a/src/material-decorator.js b/src/material-decorator.js
@@ -10,14 +10,16 @@ angular.module('schemaForm')
       var condition          = sfBuilderProvider.builders.condition;
       var array              = sfBuilderProvider.builders.array;
 
+      var sfMessagesNode = (function() {
+        var html = '<div ng-if="ngModel.$invalid" ng-messages="ngModel.$error"><div sf-message ng-message></div></div>';
+        var div = document.createElement('div');
+        div.innerHTML = html;
+        return div.firstChild;
+      })();
       var sfMessages = function(args) {
         var messagesDiv = args.fieldFrag.querySelector('[sf-messages]');
-        if (messagesDiv) {
-          messagesDiv.setAttribute('ng-messages', 'ngModel.$error');
-          var child = document.createElement('div');
-          child.setAttribute('sf-message', '');
-          child.setAttribute('ng-message', '');
-          messagesDiv.appendChild(child);
+        if (messagesDiv && sfMessagesNode) {
+          messagesDiv.appendChild(sfMessagesNode);
         }
       };
 
@@ -119,4 +121,19 @@ angular.module('schemaForm')
         'item in evalExpr("this[\""+form.optionFilter+"\"](\""+searchText+"\")")');
     }
   }
+
+  .filter('autocompleteMovieTest', function() {
+    function autocompleteMovieTestFilter(array, input){
+      var current = input;
+      // You could also call multiple filters here using:
+      // current = $filter('filterName')(input)
+      if(typeof current === 'string') {
+        current = current.replace(' ','-').toLowerCase();
+      }
+      current = (!current) ? '_undefined' : current;
+      return current;
+    }
+
+    return externalOptionUriFilter;
+  })
 */
diff --git a/src/section.html b/src/section.html
@@ -1,3 +1,2 @@
 <div class="schema-form-section {{form.htmlClass}}">
-  <sf-decorator ng-repeat="item in form.items" form="item"></sf-decorator>
 </div>

Original file line number	Diff line number	Diff line change
`@@ -5,11 +5,11 @@`
`5`	`5`	`"properties": {`
`6`	`6`	`"first": {`
`7`	`7`	`"title": "What is your favourite Schwarzenegger movie?",`
`8`		`- "type": "string"`
	`8`	`+ "type": "object"`
`9`	`9`	`},`
`10`	`10`	`"second": {`
`11`	`11`	`"title": "What is your favourite Schwarzenegger movie?",`
`12`		`- "type": "string"`
	`12`	`+ "type": "object"`
`13`	`13`	`}`
`14`	`14`	`}`
`15`	`15`	`},`
`@@ -32,7 +32,7 @@`
`32`	`32`	`},`
`33`	`33`	`{`
`34`	`34`	`"type": "help",`
`35`		`- "helpvalue": "I need at least 4 characters"`
	`35`	`+ "helpvalue": "I need at least 4 non-space characters"`
`36`	`36`	`},`
`37`	`37`	`{`
`38`	`38`	`"type": "submit",`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,2 @@`
`1`	`1`	`<div class="schema-form-section {{form.htmlClass}}">`
`2`		`- <sf-decorator ng-repeat="item in form.items" form="item"></sf-decorator>`
`3`	`2`	`</div>`