Merge pull request kevinchappell#120 from kevinchappell/chore/updateDocs

Update documentation, remove fieldOrder from sessionStorage when option disabled

demo/assets/js/form-builder.js

@@ -1026,7 +1026,15 @@ function formBuilderHelpersFn(opts, formBuilder) {
    * @return {Array}
    */
   _helpers.orderFields = function (frmbFields) {
-    var fieldOrder = window.sessionStorage ? window.sessionStorage.getItem('fieldOrder') : false;
+    var fieldOrder = false;
+
+    if (window.sessionStorage) {
+      if (opts.sortableControls) {
+        fieldOrder = window.sessionStorage.getItem('fieldOrder');
+      } else {
+        window.sessionStorage.removeItem('fieldOrder');
+      }
+    }
 
     if (!fieldOrder) {
       fieldOrder = opts.controlOrder.unique();

dist/form-builder.js

@@ -1026,7 +1026,15 @@ function formBuilderHelpersFn(opts, formBuilder) {
    * @return {Array}
    */
   _helpers.orderFields = function (frmbFields) {
-    var fieldOrder = window.sessionStorage ? window.sessionStorage.getItem('fieldOrder') : false;
+    var fieldOrder = false;
+
+    if (window.sessionStorage) {
+      if (opts.sortableControls) {
+        fieldOrder = window.sessionStorage.getItem('fieldOrder');
+      } else {
+        window.sessionStorage.removeItem('fieldOrder');
+      }
+    }
 
     if (!fieldOrder) {
       fieldOrder = opts.controlOrder.unique();

docs/options.md

@@ -5,6 +5,21 @@ Nearly every site and app will use formBuilder in a different way and to accommo
 <pre><code class="js">
 var defaults = {
   controlPosition: 'right',
+  controlOrder: [
+    'autocomplete',
+    'button',
+    'checkbox',
+    'checkbox-group',
+    'date',
+    'file',
+    'header',
+    'hidden',
+    'paragraph',
+    'radio-group',
+    'select',
+    'text',
+    'textarea'
+  ],
   dataType: 'xml',
   disableFields: ['autocomplete', 'hidden'],
   append: false,

docs/options/appendPrepend.md

@@ -0,0 +1,15 @@
+# append, prepend
+`append` and `prepend` allows you to define a block of arbitrary html to appear in the editor. This html is not editable and serves to provide a more accurate representation of what their form will look like in relation to items they cannot edit.
+
+## Usage
+```javascript
+var options = {
+      prepend: '<h1>Profile for Miss Marple.</h1>',
+      append: '<h2>All information is confidential.</h2>'
+    };
+$(template).formBuilder(options);
+```
+
+
+## See it in Action
+<p data-height="494" data-theme-id="22927" data-slug-hash="XXYdvv" data-default-tab="result" data-user="kevinchappell" class="codepen">See the Pen <a href="http://codepen.io/kevinchappell/pen/XXYdvv">formBuilder: append, prepend</a> by Kevin Chappell (<a href="http://codepen.io/kevinchappell">@kevinchappell</a>) on <a href="http://codepen.io">CodePen</a>.</p>

docs/options/controlOrder.md

@@ -0,0 +1,17 @@
+# controlOrder
+`controlOrder` allows you to define a new order for the elements in the control bar.
+
+## Usage
+```javascript
+var options = {
+      controlOrder: [
+        'text',
+        'textarea'
+      ]
+    };
+$(template).formBuilder(options);
+```
+
+
+## See it in Action
+<p data-height="494" data-theme-id="22927" data-slug-hash="rezdaa" data-default-tab="result" data-user="kevinchappell" class="codepen">See the Pen <a href="http://codepen.io/kevinchappell/pen/rezdaa">formBuilder: controlOrder</a> by Kevin Chappell (<a href="http://codepen.io/kevinchappell">@kevinchappell</a>) on <a href="http://codepen.io">CodePen</a>.</p>

docs/options/controlPosition.md

@@ -0,0 +1,14 @@
+# controlPosition
+`controlPosition` allows you to set the elements to be dropped on the stage to either the left or right side.
+
+## Usage
+```javascript
+var options = {
+      controlPosition: 'left'
+    };
+$(template).formBuilder(options);
+```
+
+
+## See it in Action
+<p data-height="494" data-theme-id="22927" data-slug-hash="bpRBVL" data-default-tab="result" data-user="kevinchappell" class="codepen">See the Pen <a href="http://codepen.io/kevinchappell/pen/bpRBVL">formBuilder: controlPosition</a> by Kevin Chappell (<a href="http://codepen.io/kevinchappell">@kevinchappell</a>) on <a href="http://codepen.io">CodePen</a>.</p>

docs/options/disableFields.md

@@ -11,4 +11,4 @@ $(template).formBuilder(options);
 
 
 ## See it in Action
-<p data-height="494" data-theme-id="22927" data-slug-hash="NNdbVx" data-default-tab="result" data-user="kevinchappell" class="codepen">See the Pen <a href="http://codepen.io/kevinchappell/pen/NNdbVx/">formBuilder: disableFields</a> by Kevin Chappell (<a href="http://codepen.io/kevinchappell">@kevinchappell</a>) on <a href="http://codepen.io">CodePen</a>.</p>
+<p data-height="494" data-theme-id="22927" data-slug-hash="NNdbVx" data-default-tab="result" data-user="kevinchappell" class="codepen">See the Pen <a href="http://codepen.io/kevinchappell/pen/NNdbVx">formBuilder: disableFields</a> by Kevin Chappell (<a href="http://codepen.io/kevinchappell">@kevinchappell</a>) on <a href="http://codepen.io">CodePen</a>.</p>

docs/options/fieldRemoveWarn.md

@@ -0,0 +1,14 @@
+# fieldRemoveWarn
+`fieldRemoveWarn` warn user's if before the remove a field from the stage.
+
+## Usage
+```javascript
+var options = {
+      fieldRemoveWarn: true // defaults to false
+    };
+$(template).formBuilder(options);
+```
+
+
+## See it in Action
+<p data-height="494" data-theme-id="22927" data-slug-hash="aNyGdq" data-default-tab="result" data-user="kevinchappell" class="codepen">See the Pen <a href="http://codepen.io/kevinchappell/pen/aNyGdq">formBuilder: fieldRemoveWarn</a> by Kevin Chappell (<a href="http://codepen.io/kevinchappell">@kevinchappell</a>) on <a href="http://codepen.io">CodePen</a>.</p>

docs/options/messages.md

@@ -0,0 +1,17 @@
+# messages
+`messages` Pass a language object as an option to make formBuilder translatable.
+
+## Usage
+```javascript
+var options = {
+      messages: {
+        select: 'Fabulous Dropdown'
+      }
+    };
+$(template).formBuilder(options);
+```
+
+## See it in Action
+<p data-height="494" data-theme-id="22927" data-slug-hash="BjxNKZ" data-default-tab="result" data-user="kevinchappell" class="codepen">See the Pen <a href="http://codepen.io/kevinchappell/pen/BjxNKZ">formBuilder: messages</a> by Kevin Chappell (<a href="http://codepen.io/kevinchappell">@kevinchappell</a>) on <a href="http://codepen.io">CodePen</a>.</p>
+
+For a more advanced example see: [Demos->Translation](/demos/translation/)

docs/options/notify.md

@@ -0,0 +1,23 @@
+# notify
+`notify` Use your existing notifications.
+
+## Usage
+```javascript
+var options = {
+      notify: {
+        error: function(message) {
+          return console.error(message);
+        },
+        success: function(message) {
+          return console.log(message);
+        },
+        warning: function(message) {
+          return console.warn(message);
+        }
+      }
+    };
+$(template).formBuilder(options);
+```
+
+## See it in Action
+<p data-height="494" data-theme-id="22927" data-slug-hash="xVrOVr" data-default-tab="result" data-user="kevinchappell" class="codepen">See the Pen <a href="http://codepen.io/kevinchappell/pen/xVrOVr">formBuilder: notify</a> by Kevin Chappell (<a href="http://codepen.io/kevinchappell">@kevinchappell</a>) on <a href="http://codepen.io">CodePen</a>.</p>

docs/options/sortableControls.md

@@ -0,0 +1,13 @@
+# sortableControls
+`sortableControls` Allows user's to reorder the controls to their liking. Positions are saved to `window.sessionStorage`.
+
+## Usage
+```javascript
+var options = {
+      sortableControls: true // defaults to false
+    };
+$(template).formBuilder(options);
+```
+
+## See it in Action
+<p data-height="494" data-theme-id="22927" data-slug-hash="eZErvG" data-default-tab="result" data-user="kevinchappell" class="codepen">See the Pen <a href="http://codepen.io/kevinchappell/pen/eZErvG">formBuilder: sortableControls</a> by Kevin Chappell (<a href="http://codepen.io/kevinchappell">@kevinchappell</a>) on <a href="http://codepen.io">CodePen</a>.</p>

mkdocs.yml

@@ -17,7 +17,14 @@ pages:
   - Translating: demos/translation.md
 - Options:
     - Overview: options.md
+    - append/prepend: options/appendPrepend.md
+    - controlPosition: options/controlPosition.md
+    - controlOrder: options/controlOrder.md
     - disableFields: options/disableFields.md
+    - fieldRemoveWarn: options/fieldRemoveWarn.md
+    - messages: options/messages.md
+    - notify: options/notify.md
+    - sortableControls: options/sortableControls.md
 - Contributing: contributing.md
 - About:
   - License: license.md

src/js/helpers.js

@@ -824,7 +824,15 @@ function formBuilderHelpersFn(opts, formBuilder) {
    * @return {Array}
    */
   _helpers.orderFields = function(frmbFields) {
-    var fieldOrder = window.sessionStorage ? window.sessionStorage.getItem('fieldOrder') : false;
+    var fieldOrder = false;
+
+    if (window.sessionStorage) {
+      if (opts.sortableControls) {
+        fieldOrder = window.sessionStorage.getItem('fieldOrder');
+      } else {
+        window.sessionStorage.removeItem('fieldOrder');
+      }
+    }
 
     if (!fieldOrder) {
       fieldOrder = opts.controlOrder.unique();