Merge branch 'feature/optimizeinserts' into development

Author: davidlgj

docs/index.md

@@ -25,6 +25,7 @@ Documentation
     1. [array](#array)
     1. [tabarray](#tabarray)
 1. [Post process function](#post-process-function)
+1. [Manual field insertion](#manual-field-insertion)
 1. [Extending Schema Form](extending.md)
 
 Basic Usage
@@ -1010,3 +1011,38 @@ angular.module('myModule', ['schemaForm']).config(function(schemaFormProvider){
 
 });
 ```
+
+
+
+### Manual field insertion
+There is a limited feature for controlling manually where a generated field should go so you can
+,as an example, wrap it in custom html. Consider the feature experimental.
+
+It has a number of drawbacks though.
+
+1. You can only insert fields that are in the root level of your form definition, i.e. not inside fieldset, arrays etc.
+1. Generated fields are always last in the form so if you don't supply slots for all of your top level fields the rest goes below.
+1. To match "keys" of forms we match against the internal array format, hence the key "name" becomes "['name']" and "foo.bar" becomes "['foo']['bar']"
+
+Define "slots" for the generated field by adding an element with the attribute `sf-insert-field`
+
+ex.
+```js
+$scope.form = [
+  "name",
+  "email",
+  "comment"
+]
+```
+
+```html
+<form sf-model="model"
+      sf-form="form"
+      sf-schema="schema">
+  <em>before</em>
+  <div sf-insert-field="['email']"></div>
+  <em>after</em>
+
+  <!-- the rest of the form, i.e. name and comment will be generated here -->
+</form>
+```

src/directives/schema-form.js

@@ -5,8 +5,8 @@ FIXME: real documentation
 
 angular.module('schemaForm')
        .directive('sfSchema',
-['$compile', 'schemaForm', 'schemaFormDecorators', 'sfSelect',
-  function($compile,  schemaForm,  schemaFormDecorators, sfSelect) {
+['$compile', 'schemaForm', 'schemaFormDecorators', 'sfSelect', 'sfPath',
+  function($compile,  schemaForm,  schemaFormDecorators, sfSelect, sfPath) {
 
     var SNAKE_CASE_REGEXP = /[A-Z]/g;
     var snakeCase = function(name, separator) {
@@ -83,23 +83,35 @@ angular.module('schemaForm')
             //clean all but pre existing html.
             element.children(':not(.schema-form-ignore)').remove();
 
+            // Find all slots.
+            var slots = {};
+            var slotsFound = element[0].querySelectorAll('*[sf-insert-field]');
+
+            for (var i = 0; i < slotsFound.length; i++) {
+              slots[slotsFound[i].getAttribute('sf-insert-field')] = slotsFound[i];
+            }
+
             //Create directives from the form definition
-            angular.forEach(merged,function(obj,i){
-              var n = document.createElement(attrs.sfDecorator || snakeCase(schemaFormDecorators.defaultDecorator,'-'));
+            angular.forEach(merged, function(obj, i) {
+              var n = document.createElement(attrs.sfDecorator ||
+                                             snakeCase(schemaFormDecorators.defaultDecorator, '-'));
               n.setAttribute('form','schemaForm.form['+i+']');
-              var slot;
-              try {
-                slot = element[0].querySelector('*[sf-insert-field="' + obj.key + '"]');
-              } catch(err) {
-                // field insertion not supported for complex keys
-                slot = null;
-              }
-              if(slot) {
-                slot.innerHTML = "";
-                slot.appendChild(n);  
-              } else {
-                frag.appendChild(n);
+
+              // Check if there is a slot to put this in...
+              if (obj.key) {
+                var slot = slots[sfPath.stringify(obj.key)];
+                if (slot) {
+                  while (slot.firstChild) {
+                    slot.removeChild(slot.firstChild);
+                  }
+                  slot.appendChild(n);
+                  return;
+                }
               }
+
+              // ...otherwise add it to the frag
+              frag.appendChild(n);
+
             });
 
             element[0].appendChild(frag);

test/directives/schema-form-test.js

@@ -173,17 +173,17 @@ describe('directive',function(){
     });
   });
 
-  it('should preserve existing html and insert fields in matching slots',function(){
+  it('should preserve existing html and insert fields in matching slots', function() {
 
-    inject(function($compile,$rootScope){
+    inject(function($compile, $rootScope){
       var scope = $rootScope.$new();
       scope.person = {};
 
       scope.schema = exampleSchema;
 
-      scope.form = ["*"];
+      scope.form = ['*'];
 
-      var tmpl = angular.element('<form sf-schema="schema" sf-form="form" sf-model="person"><ul><li sf-insert-field="name"></li></ul></form>');
+      var tmpl = angular.element('<form sf-schema="schema" sf-form="form" sf-model="person"><ul><li sf-insert-field="[\'name\']"></li></ul></form>');
 
       $compile(tmpl)(scope);
       $rootScope.$apply();
@@ -192,7 +192,7 @@ describe('directive',function(){
       tmpl.children().eq(0).find('input').attr('ng-model').should.be.equal('model[\'name\']');
     });
   });
-  
+
 
   it('should handle submit buttons',function(){
 
@@ -592,7 +592,7 @@ describe('directive',function(){
 
     });
   });
-  
+
   it('should handle schema form default in deep structure',function(){
 
     inject(function($compile,$rootScope){
@@ -1725,8 +1725,8 @@ describe('directive',function(){
       tmpl.children().eq(0).find('select').eq(0).find('option').eq(2).text().trim().should.be.eq('The A');
     });
   });
-  
-  
+
+
   it('should update array form on model array ref change',function(){
 
     inject(function($compile,$rootScope){
@@ -1772,7 +1772,7 @@ describe('directive',function(){
       $rootScope.$apply();
 
       tmpl.children().eq(0).find('ol').children().length.should.be.eq(2);
-      
+
       var new_names = [
           {
             firstname: 'Bill',
@@ -1789,11 +1789,11 @@ describe('directive',function(){
             lastname: 'Buster'
           }
         ];
-        
+
       scope.person.names = new_names;
-      
+
       $rootScope.$apply();
-      
+
       tmpl.children().eq(0).find('ol').children().length.should.be.eq(4);
     });
   });