updated w2form docs and demos, improved w2form.applyFocus, Recompiled JS

rtco2020 · May 27, 2021 · f38c8f0 · f38c8f0
1 parent 4d98cee
commit f38c8f0
Show file tree

Hide file tree

Showing 60 changed files with 1,984 additions and 1,557 deletions.
diff --git a/demos/examples/form/16.html b/demos/examples/form/16.html
@@ -3,9 +3,7 @@
         <h1>Enable/Disable Fields</h1>
         Multiple fields can be enabled/disabled at once.
     </div>
-    <div id="example_view">
-        See <a href="http://w2ui.com/web/docs/w2form.fields" target="_blank">options</a> for more information
-    </div>
+    <div id="example_view"></div>
     <div id="example_code"></div>
 </div>
 

diff --git a/demos/examples/form/17.html b/demos/examples/form/17.html
@@ -0,0 +1,67 @@
+<div class="content">
+    <div id="example_title">
+        <h1>Apply Focus</h1>
+        w2form<a class="argument" href="http://w2ui.com/web/docs/w2form.focus">.focus</a> can be either a string (field id) or an integer and there's
+        also the new method w2form<a class="argument" href="http://w2ui.com/web/docs/w2form.applyFocus">.applyFocus()</a> that takes either
+        a string or an integer as an argument.<br>
+        Keep in mind that integer values are zero-indexed.
+    </div>
+    <div id="example_view"></div>
+    <div id="example_code"></div>
+</div>
+
+<!--CODE-->
+<div id="form" style="width: 750px;"></div>
+<br>
+<button class="w2ui-btn" onClick="w2ui.form.applyFocus(0)">Focus 1st field</button>
+<button class="w2ui-btn" onClick="w2ui.form.applyFocus(5)">Focus 6th field</button>
+<button class="w2ui-btn" onClick="w2ui.form.applyFocus('comments')">Focus 'comments' field</button>
+<button class="w2ui-btn" onClick="w2ui.form.applyFocus()">Focus original focus field</button>
+
+<!--CODE-->
+<script>
+$(function () {
+    $('#form').w2form({
+        name   : 'form',
+        header : 'Auto-Generated Form',
+        url    : 'server/post',
+        focus  : 'last_name',
+        fields : [
+            { field: 'first_name', type: 'text', required: true,
+                html: { label: 'First Name', attr: 'style="width: 200px"' }
+            },
+            { field: 'last_name',  type: 'text', required: true,
+                html: { label: 'Last Name', attr: 'style="width: 200px"' }
+            },
+            { field: 'comments', type: 'textarea',
+                html: { label: 'Comments', attr: 'style="width: 200px; height: 60px"' }
+            },
+            { field: 'city', type: 'text',
+                html: { label: 'City', attr: 'style="width: 200px"', column: 2, }
+            },
+            { field: 'zip', type: 'text',
+                html: { label: 'Zip Code', attr: 'style="width: 100px"', column: 2, }
+            },
+            { field: 'street', type: 'text',
+                html: { label: 'Street', attr: 'style="width: 200px"', column: 2, }
+            },
+        ],
+        actions: {
+            'Reset': function (event) {
+                this.clear();
+            },
+            'Save': function (event) {
+                if (w2ui.form.validate().length == 0) {
+                    w2popup.open({
+                        title: 'Form Data',
+                        with: 600,
+                        height: 550,
+                        body: `<pre>${JSON.stringify(this.getCleanRecord(), null, 4)}</pre>`,
+                        buttons: '<button class="w2ui-btn" onclick="w2popup.close()">Ok</button>'
+                    })
+                }
+            }
+        }
+    });
+});
+</script>
diff --git a/demos/examples/form/3.html b/demos/examples/form/3.html
@@ -20,7 +20,7 @@ <h1>Field Types</h1>
         record: {
             simple: {
                 text: 'default text value',
-                alpha: '',
+                alpha: 'ABC123',
                 int: 0,
                 float: 0
             },
@@ -30,19 +30,19 @@ <h1>Field Types</h1>
             }
         },
         fields: [
-            { field: 'simple.text', type: 'text', required: true,
+            { field: 'simple.alpha', type: 'alphaNumeric',
                 html: {
-                    label: 'Text',
+                    label: 'Alpha Numeric',
                     attr: 'style="width: 300px"'
                 }
             },
-            { field: 'simple.alpha', type: 'alphaNumeric',
+            { field: 'simple.text', type: 'text',
                 html: {
-                    label: 'Alpha Numeric',
+                    label: 'Text',
                     attr: 'style="width: 300px"'
                 }
             },
-            { field: 'simple.int', type: 'int', required: true,
+            { field: 'simple.int', type: 'int',
                 html: {
                     label: 'Integer',
                     attr: 'style="width: 60px"'
@@ -81,6 +81,11 @@ <h1>Field Types</h1>
                     attr: 'style="width: 90px"'
                 }
             },
+            { field: 'date.datetime', type: 'datetime',
+                html: {
+                    label: 'Date &amp; Time',
+                }
+            },
             { field: 'list', type: 'list',
                 html: {
                     label: 'List'

diff --git a/demos/examples/form/8.html b/demos/examples/form/8.html
@@ -35,7 +35,7 @@ <h1>Form in a Popup</h1>
             }
         });
     }
-    $().w2popup('open', {
+    w2popup.open({
         title   : 'Form in a Popup',
         body    : '<div id="form" style="width: 100%; height: 100%;"></div>',
         style   : 'padding: 15px 0px 0px 0px',

diff --git a/demos/index.js b/demos/index.js
@@ -203,7 +203,12 @@ $(function () {
                         { id: 'form/13', text: 'Anchored Fields (1.5+)', icon: 'fa fa-pencil-square-o' },
                         { id: 'form/14', text: 'Maps and Arrays (1.5+)', icon: 'fa fa-pencil-square-o' },
                         { id: 'form/15', text: 'Custom Fields (1.5+)', icon: 'fa fa-pencil-square-o' },
-                        { id: 'form/16', text: 'Enable/Disable Fields (1.5+)', icon: 'fa fa-pencil-square-o' }
+                        { id: 'form/16', text: 'Enable/Disable Fields (1.5+)', icon: 'fa fa-pencil-square-o' },
+                    ]
+                },
+                { id: 'forms-2.0', text: 'Features 2.0+', img: 'icon-folder', group: true, expanded: true, hidden: true,
+                    nodes: [
+                        { id: 'form/17', text: 'Apply Focus (2.0+)', icon: 'fa fa-pencil-square-o' },
                     ]
                 },
                 { id: 'fields', text: 'Fields Basic', img: 'icon-folder', group: true, expanded: true, hidden: true,