Update Documentation (#197)

kevinchappell · Jul 16, 2016 · 953ff3f · 953ff3f
1 parent ddab558
commit 953ff3f
Show file tree

Hide file tree

Showing 31 changed files with 94 additions and 141 deletions.
diff --git a/docs/demos/basic-formRender.md b/docs/demos/basic-formRender.md
diff --git a/docs/demos/formRender-options.md b/docs/demos/formRender-options.md
diff --git a/docs/demos/preview-popup.md b/docs/demos/preview-popup.md
diff --git a/docs/demos/translation.md b/docs/demos/translation.md
diff --git a/docs/editing-fonts.md b/docs/editing-fonts.md
@@ -1,13 +1,13 @@
 # Fonts
-SVG icons may be all the [rage](https://github.com/blog/2112-delivering-octicons-with-svg), but for now formBuilder still uses an icon font generated with Fontello and Gulp. Fontello makes it easy for developers to collaborate by providing an API we can incorporate with our normal build processes.
+SVG icons uses an icon font generated with Fontello and Gulp. Fontello makes it easy for developers to collaborate by providing an API we can incorporate with our normal build processes.
 
 ### Editing
 To edit the current icon font, open terminal and run:
 ```
 gulp font-edit
 ```
 
-This will open create a new session on fontello.com where you can choose new icons or upload your own. 
+This will open create a new session on fontello.com where you can choose new icons or upload your own.
 
 ### Saving
 When finished, click the Save Session button and return to the terminal and type:

diff --git a/docs/demos/basic.md → docs/formBuilder/demos/basic.md b/docs/demos/basic.md → docs/formBuilder/demos/basic.md
diff --git a/docs/demos/get-data.md → docs/formBuilder/demos/data.md b/docs/demos/get-data.md → docs/formBuilder/demos/data.md
@@ -6,9 +6,13 @@ var fbTemplate = document.getElementById('fb-template'),
     formData = fbTemplate.value;
 ```
 
-There is also a jQuery data method to grab the data as demonstrated here:
-<p data-height="580" data-theme-id="22927" data-slug-hash="bpRowv" data-default-tab="js,result" data-user="kevinchappell" data-embed-version="2" class="codepen">See the Pen <a href="http://codepen.io/kevinchappell/pen/bpRowv/">formBuilder: getData</a> by Kevin Chappell (<a href="http://codepen.io/kevinchappell">@kevinchappell</a>) on <a href="http://codepen.io">CodePen</a>.</p>
+There is also a jQuery data way to grab the data as demonstrated here:
+<p data-height="580" data-theme-id="22927" data-slug-hash="bpRowv" data-default-tab="js,result" data-user="kevinchappell" data-embed-version="2" class="codepen"></p>
+
+## Saving/Load Data
+This example demonstrates saving and loading data to/from `window.sessionStorage`.
+<p data-height="550" data-theme-id="0" data-slug-hash="Vedrqr" data-default-tab="result" data-user="kevinchappell" class="codepen"></p>
 
 ## Where's my HTML
 There are some cases where you would want the HTML instead of a rendered form. This can be accomplished by calling formRender and setting the `render` option to false:
-<p data-height="300" data-theme-id="22927" data-slug-hash="wWvyaM" data-default-tab="result" data-user="kevinchappell" data-embed-version="2" class="codepen">See the Pen <a href="http://codepen.io/kevinchappell/pen/wWvyaM/">formRender: return markup</a> by Kevin Chappell (<a href="http://codepen.io/kevinchappell">@kevinchappell</a>) on <a href="http://codepen.io">CodePen</a>.</p>
+<p data-height="300" data-theme-id="22927" data-slug-hash="wWvyaM" data-default-tab="result" data-user="kevinchappell" data-embed-version="2" class="codepen"></p>
diff --git a/docs/demos/toggle-builder.md → docs/formBuilder/demos/toggle-builder.md b/docs/demos/toggle-builder.md → docs/formBuilder/demos/toggle-builder.md
@@ -2,4 +2,4 @@
 formBuidler and formRender ship as separate plugins because in most cases formBuilder will be used for the admin part of a website and the form it generates will be displayed in another area. In some cases the functionality of both needs to be combined, below you'll find a basic example of how to do that.
 
 ## Demo 
-<p data-height="535" data-theme-id="22927" data-slug-hash="obyeya" data-default-tab="result" data-user="kevinchappell" class="codepen">See the Pen <a href="http://codepen.io/kevinchappell/pen/obyeya/">formBuilder: Toggle Edit</a> by Kevin Chappell (<a href="http://codepen.io/kevinchappell">@kevinchappell</a>) on <a href="http://codepen.io">CodePen</a>.</p>
+<p data-height="535" data-theme-id="22927" data-slug-hash="obyeya" data-default-tab="result" data-user="kevinchappell" class="codepen"></p>
diff --git a/docs/formBuilder/demos/translation.md b/docs/formBuilder/demos/translation.md
@@ -0,0 +1,4 @@
+# Translation
+
+Translate formBuilder to any language through the configuration property `messages`.
+<p data-height="580" data-theme-id="22927" data-slug-hash="PNZZmw" data-default-tab="result" data-user="kevinchappell" class="codepen"></p>
diff --git a/docs/options.md → docs/formBuilder/options.md b/docs/options.md → docs/formBuilder/options.md
diff --git a/docs/options/appendPrepend.md → docs/formBuilder/options/appendPrepend.md b/docs/options/appendPrepend.md → docs/formBuilder/options/appendPrepend.md
diff --git a/docs/options/controlOrder.md → docs/formBuilder/options/controlOrder.md b/docs/options/controlOrder.md → docs/formBuilder/options/controlOrder.md
diff --git a/docs/options/controlPosition.md → docs/formBuilder/options/controlPosition.md b/docs/options/controlPosition.md → docs/formBuilder/options/controlPosition.md
diff --git a/docs/options/disableFields.md → docs/formBuilder/options/disableFields.md b/docs/options/disableFields.md → docs/formBuilder/options/disableFields.md
diff --git a/docs/options/editOnAdd.md → docs/formBuilder/options/editOnAdd.md b/docs/options/editOnAdd.md → docs/formBuilder/options/editOnAdd.md
diff --git a/docs/options/fieldRemoveWarn.md → docs/formBuilder/options/fieldRemoveWarn.md b/docs/options/fieldRemoveWarn.md → docs/formBuilder/options/fieldRemoveWarn.md
diff --git a/docs/options/messages.md → docs/formBuilder/options/messages.md b/docs/options/messages.md → docs/formBuilder/options/messages.md
diff --git a/docs/options/notify.md → docs/formBuilder/options/notify.md b/docs/options/notify.md → docs/formBuilder/options/notify.md
diff --git a/docs/options/sortableControls.md → docs/formBuilder/options/sortableControls.md b/docs/options/sortableControls.md → docs/formBuilder/options/sortableControls.md
diff --git a/docs/options/stickyControls.md → docs/formBuilder/options/stickyControls.md b/docs/options/stickyControls.md → docs/formBuilder/options/stickyControls.md
diff --git a/docs/formRender/demos/basic.md b/docs/formRender/demos/basic.md
@@ -0,0 +1,4 @@
+# Basic formRender usage
+
+Render your formData with no options:
+<p data-height="300" data-theme-id="22927" data-slug-hash="vGBWxO" data-default-tab="js,result" data-user="kevinchappell" data-embed-version="2" class="codepen"></p>
diff --git a/docs/formRender/demos/preview-popup.md b/docs/formRender/demos/preview-popup.md
@@ -0,0 +1,4 @@
+# formRender Preview Popup
+
+Display the form preview in a popup on save:
+<p data-height="545" data-theme-id="22927" data-slug-hash="mPQMYZ" data-default-tab="result" data-user="kevinchappell" data-embed-version="2" class="codepen"></p>
diff --git a/docs/formRender/options.md b/docs/formRender/options.md
@@ -0,0 +1,26 @@
+# Options
+
+<pre><code class="js">
+var defaults = {
+  container: false,
+  formData: false,
+  label: {
+    formRendered: 'Form Rendered',
+    noFormData: 'No form data.',
+    other: 'Other',
+    selectColor: 'Select Color'
+  },
+  render: true,
+  notify: {
+    error: function(message) {
+      return console.error(message);
+    },
+    success: function(message) {
+      return console.log(message);
+    },
+    warning: function(message) {
+      return console.warn(message);
+    }
+  }
+}
+</code></pre>
diff --git a/docs/demos/formRender-columns.md → docs/formRender/options/columns.md b/docs/demos/formRender-columns.md → docs/formRender/options/columns.md
@@ -1,4 +1,4 @@
 # formRender Columns
 
 I hesitated even putting this in the Docs but some found it useful. It possible to render columns by field type, however I would recommend writing some additional JS to work as an addon in the editing to give your users control over which fields should be rendered as columns.
-<p data-height="300" data-theme-id="22927" data-slug-hash="MKXybG" data-default-tab="html,result" data-user="kevinchappell" data-embed-version="2" class="codepen">See the Pen <a href="http://codepen.io/kevinchappell/pen/MKXybG/">formRender Columns</a> by Kevin Chappell (<a href="http://codepen.io/kevinchappell">@kevinchappell</a>) on <a href="http://codepen.io">CodePen</a>.</p>
+<p data-height="300" data-theme-id="22927" data-slug-hash="MKXybG" data-default-tab="result" data-user="kevinchappell" data-embed-version="2" class="codepen"></p>
diff --git a/docs/formRender/options/container.md b/docs/formRender/options/container.md
@@ -0,0 +1,4 @@
+# formRender `container` option
+
+Here we are defining and output container for our rendered form:
+<p data-height="360" data-theme-id="22927" data-slug-hash="vKpPbz" data-default-tab="js,result" data-user="kevinchappell" data-embed-version="2" class="codepen"></p>
diff --git a/docs/formRender/options/formData.md b/docs/formRender/options/formData.md
@@ -0,0 +1,4 @@
+# formRender `formData` option
+
+Pass formData to formRender through a configuration Object:
+<p data-height="360" data-theme-id="22927" data-slug-hash="bprXzw" data-default-tab="js,result" data-user="kevinchappell" data-embed-version="2" class="codepen"></p>
diff --git a/docs/formRender/options/render.md b/docs/formRender/options/render.md
@@ -0,0 +1,9 @@
+# formRender `render` option
+
+Setting render to false prevents formRender from making any changes to the DOM. From there we can choose to print our markup or return it.
+
+Print:
+<p data-height="360" data-theme-id="22927" data-slug-hash="wWvyaM" data-default-tab="js" data-user="kevinchappell" data-embed-version="2" class="codepen"></p>
+
+Return:
+<p data-height="360" data-theme-id="22927" data-slug-hash="bZarNd" data-default-tab="js" data-user="kevinchappell" data-embed-version="2" class="codepen"></p>
diff --git a/docs/index.md b/docs/index.md
@@ -1,7 +1,7 @@
 # jQuery formBuilder
 Drag and drop form creation for your app.
 
-<p data-height="550" data-theme-id="0" data-slug-hash="vLjOLL" data-default-tab="result" data-user="kevinchappell" class="codepen"></p>
+<p data-height="570" data-theme-id="0" data-slug-hash="vLjOLL" data-default-tab="result" data-user="kevinchappell" class="codepen"></p>
 
 ## Introduction
 jQuery formBuilder is a 100% client-side plugin that gives users the power to create forms using an intuitive drag and drop interface. FormBuilder supports a number of form fields and some html tags. See: [Field Types]()

diff --git a/docs/js/ei.js b/docs/js/ei.js
diff --git a/docs/js/scripts.js b/docs/js/scripts.js
@@ -1,100 +1,5 @@
 'use strict';
 
-var isSite = (window.location.href.indexOf('kevinchappell.github.io') !== -1 || window.location.href.indexOf('kevinchappell.github.io') !== -1);
-
 ((window.gitter = {}).chat = {}).options = {
   room: 'kevinchappell/formBuilder'
 };
-
-var getStyles = function() {
-  var styles = [];
-  var extStyles = [
-    '//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.2.0/styles/monokai-sublime.min.css',
-  ];
-  for (var i = extStyles.length - 1; i >= 0; i--) {
-    var style = document.createElement('link');
-    style.appendChild(document.createTextNode(''));
-    style.setAttribute('href', extStyles[i]);
-    style.setAttribute('rel', 'stylesheet');
-    style.setAttribute('type', 'text/css');
-    document.head.appendChild(style);
-    styles.push(style);
-  }
-  return styles;
-};
-
-var getScripts = function() {
-  var scripts = [];
-  var extScripts = [
-    // '//formbuilder.online/assets/js/form-render.min.js',
-    // '//formbuilder.online/assets/js/form-builder.min.js',
-    // '//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.2.0/highlight.min.js',
-    '//assets.codepen.io/assets/embed/ei.js',
-    '//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js',
-    '//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js',
-    '//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js'
-  ];
-
-  if (isSite) {
-    extScripts = extScripts.push('//sidecar.gitter.im/dist/sidecar.v1.js');
-  }
-
-  var i = (extScripts.length - 1);
-
-  function readyState() {
-    var script = this;
-    if (!script.readyState || script.readyState === 'loaded' || script.readyState === 'complete') {
-      script.onload = script.onreadystatechange = null;
-      i--;
-      if (i === -1) {
-        // remove script after added
-        for (i = scripts.length - 1; i >= 0; i--) {
-          scripts[i].remove();
-        }
-      } else {
-        getScript(i);
-      }
-    }
-  }
-
-  function getScript(i) {
-    var script = document.createElement('script');
-    script.appendChild(document.createTextNode(''));
-    script.setAttribute('src', extScripts[i]);
-    script.setAttribute('type', 'text/javascript');
-    script.async = true;
-    // Attach handlers for all browsers
-    script.onload = script.onreadystatechange = readyState;
-    // siteScript.parentNode.insertBefore(script, siteScript.nextSibling);
-    scripts.push(script);
-    document.head.appendChild(script);
-  }
-
-  getScript(i);
-
-};
-
-getStyles();
-getScripts();
-
-document.addEventListener('viewData', function() {
-  var code = document.querySelector('.data-dialog code');
-  window.hljs.highlightBlock(code);
-}, false);
-
-if (isSite) {
-  (function(i, s, o, g, r, a, m) {
-    i['GoogleAnalyticsObject'] = r;
-    i[r] = i[r] || function() {
-      (i[r].q = i[r].q || []).push(arguments);
-    }, i[r].l = 1 * new Date();
-    a = s.createElement(o),
-      m = s.getElementsByTagName(o)[0];
-    a.async = 1;
-    a.src = g;
-    m.parentNode.insertBefore(a, m);
-  })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
-
-  ga('create', 'UA-4784386-21', 'auto');
-  ga('send', 'pageview');
-}
diff --git a/mkdocs.yml b/mkdocs.yml
@@ -12,31 +12,37 @@ pages:
   - Overview: development.md
   - Icon Font: editing-fonts.md
 - formBuilder Demos:
-  - Basic: demos/basic.md
-  - Toggle formBuilder: demos/toggle-builder.md
-  - Translating: demos/translation.md
-  - Data: demos/get-data.md
+  - Basic: formBuilder/demos/basic.md
+  - Toggle formBuilder: formBuilder/demos/toggle-builder.md
+  - Translating: formBuilder/demos/translation.md
+  - Data: formBuilder/demos/data.md
+- formBuilder Options:
+  - Overview: formBuilder/options.md
+  - append/prepend: formBuilder/options/appendPrepend.md
+  - controlPosition: formBuilder/options/controlPosition.md
+  - controlOrder: formBuilder/options/controlOrder.md
+  - disableFields: formBuilder/options/disableFields.md
+  - editOnAdd: formBuilder/options/editOnAdd.md
+  - fieldRemoveWarn: formBuilder/options/fieldRemoveWarn.md
+  - messages: formBuilder/options/messages.md
+  - notify: formBuilder/options/notify.md
+  - sortableControls: formBuilder/options/sortableControls.md
+  - stickyControls: formBuilder/options/stickyControls.md
 - formRender Demos:
-  - Basic: demos/basic-formRender.md
-  - Container: demos/formRender-options.md
-  - Preview popup: demos/preview-popup.md
-  - Columns: demos/formRender-columns.md
-- Options:
-  - Overview: options.md
-  - append/prepend: options/appendPrepend.md
-  - controlPosition: options/controlPosition.md
-  - controlOrder: options/controlOrder.md
-  - disableFields: options/disableFields.md
-  - editOnAdd: options/editOnAdd.md
-  - fieldRemoveWarn: options/fieldRemoveWarn.md
-  - messages: options/messages.md
-  - notify: options/notify.md
-  - sortableControls: options/sortableControls.md
-  - stickyControls: options/stickyControls.md
+  - Basic: formRender/demos/basic.md
+  - Preview popup: formRender/demos/preview-popup.md
+- formRender Options:
+  - Overview: formRender/options.md
+  - container: formRender/options/container.md
+  - formData: formRender/options/formData.md
+  - render: formRender/options/render.md
 - Contributing: contributing.md
 - About:
   - License: license.md
 extra_css:
   - 'css/site.css'
+  - '//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.2.0/styles/monokai-sublime.min.css'
 extra_javascript:
-- 'js/scripts.js'
+  - 'js/scripts.js'
+  - '//assets.codepen.io/assets/embed/ei.js'
+  - '//sidecar.gitter.im/dist/sidecar.v1.js'