Merge remote-tracking branch 'upstream/master'

Conflicts: dist/w2ui-fields.min.js dist/w2ui.min.js
loxiw · Jan 9, 2016 · 8bf1f92 · 8bf1f92
2 parents 866b24b + 6f4dbd5
commit 8bf1f92
Show file tree

Hide file tree

Showing 180 changed files with 6,098 additions and 3,110 deletions.
diff --git a/.gitignore b/.gitignore
@@ -4,4 +4,5 @@ node_modules/
 .idea
 *.iml
 *.ipr
-*.iws
+*.iws
+/npm-debug.log
diff --git a/demos/examples/popup-10.html b/demos/examples/popup-10.html
@@ -0,0 +1,30 @@
+<div class="content">
+    <div id="example_title">
+        <h1>Improoved Keyboard Support (new in 1.5)</h1>
+        Since the content behind popup is locked it is logical to keep keyboard focus inside the popup. If user clicks tab key, it will loop through the input controls inside popup and not come outside of it.
+    </div>
+    <div id="example_view"></div>
+    <div id="example_code"></div>
+</div>
+
+<!--CODE-->
+<button class="w2ui-btn" onclick="popup()">Open Popup</button>
+
+<!--CODE-->
+<script>
+function popup() {
+    w2popup.open({
+        width   : 580,
+        height  : 350,
+        title   : 'Title',
+        body    : '<div class="w2ui-centered" style="line-height: 1.8">'+
+                  '     Use tab key to loop through the input contols. <br>The focus will not leave popup. <br><br>'+
+                  '     Text 1: <input class="w2ui-input" style="margin-bottom: 5px"><br>'+
+                  '     Text 2: <input class="w2ui-input" style="margin-bottom: 5px"><br>'+
+                  '     Text 3: <input class="w2ui-input" style="margin-bottom: 5px"><br>'+
+                  '</div>',
+        buttons : '<button class="w2ui-btn" onclick="w2popup.close()">Ok</button>'+
+                  '<button class="w2ui-btn" onclick="w2popup.close()">Cancel</button>'
+    });
+}
+</script>
diff --git a/demos/examples/popup-11.html b/demos/examples/popup-11.html
@@ -0,0 +1,39 @@
+<div class="content">
+    <div id="example_title">
+        <h1>Alert and Confirm inside Popup (new in 1.5)</h1>
+        When popup is open, you can also use w2alert(), w2confirm() or stack messages on top of it.
+    </div>
+    <div id="example_view"></div>
+    <div id="example_code"></div>
+</div>
+
+<!--CODE-->
+<button class="w2ui-btn" onclick="popup()">Open Popup</button>
+
+<!--CODE-->
+<script>
+var counter;
+function popup() {
+    w2popup.open({
+        width   : 580,
+        height  : 350,
+        title   : 'Title',
+        body    : '<div class="w2ui-centered">This is text inside the popup</div>',
+        buttons : '<button class="w2ui-btn" onclick="w2alert(\'alert\')">Alert</button>'+
+                  '<button class="w2ui-btn" onclick="w2confirm(\'confirm\')">Confirm</button>'+
+                  '<button class="w2ui-btn" onclick="counter = 0; show();">Message</button>',
+        showMax : true
+    });
+}
+
+function show() {
+    w2popup.message({
+        width   : 350,
+        height  : 170,
+        body    : '<div class="w2ui-centered">Are you sure (click No). ' + (counter || '') + '</div>',
+        buttons : '<button class="w2ui-btn" onclick="w2popup.message()">Ok</button>'+
+                  '<button class="w2ui-btn" onclick="show()">More</button>'
+    });
+    counter++;
+}
+</script>
diff --git a/demos/examples/sidebar-1.html b/demos/examples/sidebar-1.html
@@ -1,7 +1,7 @@
 <div class="content">
     <div id="example_title">
         <h1>Simple Sidebar</h1>
-        The w2sidebar object provides a quick solution for a vertical menu. The example below demonstrates a sample sidebar with 
+        The w2sidebar object provides a quick solution for a vertical menu. The example below demonstrates a sample sidebar with
         multiple items. Some of the items are nested. The very same object can be used to create tree structures.
     </div>
     <div id="example_view"></div>
@@ -16,7 +16,7 @@ <h1>Simple Sidebar</h1>
 $(function () {
     $('#sidebar').w2sidebar({
         name: 'sidebar',
-        nodes: [ 
+        nodes: [
             { id: 'level-1', text: 'Level 1', img: 'icon-folder', expanded: true, group: true,
               nodes: [ { id: 'level-1-1', text: 'Level 1.1', icon: 'fa-home' },
                        { id: 'level-1-2', text: 'Level 1.2', icon: 'fa-star' },

diff --git a/demos/examples/sidebar-10.html b/demos/examples/sidebar-10.html
@@ -0,0 +1,53 @@
+<div class="content">
+    <div id="example_title">
+        <h1>In/Out of Focus (new in 1.5)</h1>
+        Keyborad navigation is an important feature of w2ui and it plays a role for the sidebar. Sidebar can be in focus and receive all input
+        from the mouse or focus can be somewhere else.
+    </div>
+    <div id="example_view"></div>
+    <div id="example_code"></div>
+</div>
+
+<!--CODE-->
+<div id="sidebar" style="height: 300px; width: 200px; float: left"></div>
+<div style="margin-left: 220px;">
+  <span id="hasFocus"></span>
+</div>
+<div style="clear: both"/>
+
+<!--CODE-->
+<script>
+$(function () {
+    $('#sidebar').w2sidebar({
+        name : 'sidebar',
+        nodes: [
+            { id: 'level-1', text: 'Level 1', img: 'icon-folder', expanded: true, group: true,
+              nodes: [ { id: 'level-1-1', text: 'Level 1.1', icon: 'fa-home' },
+                       { id: 'level-1-2', text: 'Level 1.2', icon: 'fa-coffee' },
+                       { id: 'level-1-3', text: 'Level 1.3', icon: 'fa-comment-alt' }
+                     ]
+            },
+            { id: 'level-2', text: 'Level 2', img: 'icon-folder', group: true,
+              nodes: [ { id: 'level-2-1', text: 'Level 2.1', icon: 'fa-star-empty' },
+                       { id: 'level-2-2', text: 'Level 2.2', icon: 'fa-star-empty' },
+                       { id: 'level-2-3', text: 'Level 2.3', icon: 'fa-star-empty' }
+                     ]
+            },
+            { id: 'level-3', text: 'Level 3', img: 'icon-folder', group: true,
+              nodes: [ { id: 'level-3-1', text: 'Level 3.1', icon: 'fa-star-empty' },
+                       { id: 'level-3-2', text: 'Level 3.2', icon: 'fa-star-empty' },
+                       { id: 'level-3-3', text: 'Level 3.3', icon: 'fa-star-empty' }
+                     ]
+            }
+        ],
+        onFocus: function (event) {
+          console.log('focus', event);
+          $('#hasFocus').html('<span style="background-color: #eee; padding: 5px; border-radius: 3px;">HAS FOCUS</span>');
+        },
+        onBlur: function (event) {
+          console.log('blur', event);
+          $('#hasFocus').html('');
+        }
+    });
+});
+</script>
diff --git a/demos/examples/sidebar-2.html b/demos/examples/sidebar-2.html
@@ -9,8 +9,8 @@ <h1>Add/Remove Items</h1>
 </div>
 
 <!--CODE-->
-<div id="sidebar" style="height: 300px; width: 180px; float: left"></div>
-<div style="margin-left: 200px;">
+<div id="sidebar" style="height: 300px; width: 200px; float: left"></div>
+<div style="margin-left: 220px;">
     <button class="w2ui-btn" onclick="addItems()">Add Items</button>
     <button class="w2ui-btn" onclick="insertItems()">Insert Items</button>
     <button class="w2ui-btn" onclick="removeItem()">Remove Inserted Items</button>
@@ -22,7 +22,7 @@ <h1>Add/Remove Items</h1>
 $(function () {
     $('#sidebar').w2sidebar({
         name: 'sidebar',
-        nodes: [ 
+        nodes: [
             { id: 'level-1', text: 'Level 1', img: 'icon-folder', expanded: true, group: true,
               nodes: [ { id: 'level-1-1', text: 'Level 1.1', icon: 'fa-star-empty' },
                        { id: 'level-1-2', text: 'Level 1.2', icon: 'fa-star-empty' },

diff --git a/demos/examples/sidebar-3.html b/demos/examples/sidebar-3.html
@@ -9,10 +9,10 @@ <h1>Show/Hide Items</h1>
 </div>
 
 <!--CODE-->
-<div id="sidebar" style="height: 300px; width: 180px; float: left"></div>
-<div style="margin-left: 200px;">
-    <button class="w2ui-btn" onclick="w2ui.sidebar.hide('level-1-1', 'level-1-3')">Hide Some</button> 
-    <button class="w2ui-btn" onclick="w2ui.sidebar.show('level-1-1', 'level-1-3')">Show All</button> 
+<div id="sidebar" style="height: 300px; width: 200px; float: left"></div>
+<div style="margin-left: 220px;">
+    <button class="w2ui-btn" onclick="w2ui.sidebar.hide('level-1-1', 'level-1-3')">Hide Some</button>
+    <button class="w2ui-btn" onclick="w2ui.sidebar.show('level-1-1', 'level-1-3')">Show All</button>
 </div>
 <div style="clear: both"/>
 
@@ -22,7 +22,7 @@ <h1>Show/Hide Items</h1>
     $('#sidebar').w2sidebar({
         name: 'sidebar',
         img: null,
-        nodes: [ 
+        nodes: [
             { id: 'level-1', text: 'Level 1', img: 'icon-folder', expanded: true, group: true,
               nodes: [ { id: 'level-1-1', text: 'Level 1.1', icon: 'fa-star-empty' },
                        { id: 'level-1-2', text: 'Level 1.2', icon: 'fa-star-empty' },

diff --git a/demos/examples/sidebar-4.html b/demos/examples/sidebar-4.html
@@ -9,8 +9,8 @@ <h1>Enable/Disable Items</h1>
 </div>
 
 <!--CODE-->
-<div id="sidebar" style="height: 300px; width: 180px; float: left"></div>
-<div style="margin-left: 200px;">
+<div id="sidebar" style="height: 300px; width: 200px; float: left"></div>
+<div style="margin-left: 220px;">
     <button class="w2ui-btn" onclick="w2ui.sidebar.disable('level-1-2')"> Disable Level 1.2 </button>
     <button class="w2ui-btn" onclick="w2ui.sidebar.enable('level-1-2')"> Enable Level 1.2 </button>
 </div>
@@ -21,7 +21,7 @@ <h1>Enable/Disable Items</h1>
 $(function () {
     $('#sidebar').w2sidebar({
         name: 'sidebar',
-        nodes: [ 
+        nodes: [
             { id: 'level-1', text: 'Level 1', img: 'icon-folder', expanded: true, group: true,
               nodes: [ { id: 'level-1-1', text: 'Level 1.1', icon: 'fa-star-empty' },
                        { id: 'level-1-2', text: 'Level 1.2', icon: 'fa-star-empty' },

diff --git a/demos/examples/sidebar-5.html b/demos/examples/sidebar-5.html
@@ -9,8 +9,8 @@ <h1>Expand/Collapse Items</h1>
 </div>
 
 <!--CODE-->
-<div id="sidebar" style="height: 300px; width: 180px; float: left"></div>
-<div style="margin-left: 200px;">
+<div id="sidebar" style="height: 300px; width: 200px; float: left"></div>
+<div style="margin-left: 220px;">
     <button class="w2ui-btn" onclick="w2ui.sidebar.collapse('level-1')"> Collapse Level 1 </button>
     <button class="w2ui-btn" onclick="w2ui.sidebar.expand('level-1')"> Expand Level 1 </button>
 </div>
@@ -21,7 +21,7 @@ <h1>Expand/Collapse Items</h1>
 $(function () {
     $('#sidebar').w2sidebar({
         name: 'sidebar',
-        nodes: [ 
+        nodes: [
             { id: 'level-1', text: 'Level 1', img: 'icon-folder', expanded: true, group: true,
               nodes: [ { id: 'level-1-1', text: 'Level 1.1', icon: 'fa-star-empty' },
                        { id: 'level-1-2', text: 'Level 1.2', icon: 'fa-star-empty' },

diff --git a/demos/examples/sidebar-6.html b/demos/examples/sidebar-6.html
@@ -9,8 +9,8 @@ <h1>Select/Unselect</h1>
 </div>
 
 <!--CODE-->
-<div id="sidebar" style="height: 300px; width: 180px; float: left"></div>
-<div style="margin-left: 200px;">
+<div id="sidebar" style="height: 300px; width: 200px; float: left"></div>
+<div style="margin-left: 220px;">
     <button class="w2ui-btn" onclick="w2ui.sidebar.select('level-1-2')"> Select Level 1.2 </button>
     <button class="w2ui-btn" onclick="w2ui.sidebar.unselect('level-1-2')"> Unselect Level 1.2 </button>
     <button class="w2ui-btn" onclick="w2ui.sidebar.click('level-1-2')"> Emulate Click on Level 1.2 </button>
@@ -22,7 +22,7 @@ <h1>Select/Unselect</h1>
 $(document).ready(function () {
     $('#sidebar').w2sidebar({
         name: 'sidebar',
-        nodes: [ 
+        nodes: [
             { id: 'level-1', text: 'Level 1', img: 'icon-folder', expanded: true, group: true,
               nodes: [ { id: 'level-1-1', text: 'Level 1.1', icon: 'fa-star-empty' },
                        { id: 'level-1-2', text: 'Level 1.2', icon: 'fa-star-empty' },

diff --git a/demos/examples/sidebar-7.html b/demos/examples/sidebar-7.html
@@ -9,14 +9,18 @@ <h1>Events</h1>
 </div>
 
 <!--CODE-->
-<div id="sidebar" style="height: 300px; width: 200px;"></div>
+<div id="sidebar" style="height: 300px; width: 200px; float: left"></div>
+<div style="margin-left: 220px;">
+    <span id="event"></span>
+</div>
+<div style="clear: both"/>
 
 <!--CODE-->
 <script>
 $(function () {
     $('#sidebar').w2sidebar({
         name: 'sidebar',
-        nodes: [ 
+        nodes: [
             { id: 'level-1', text: 'Level 1', img: 'icon-folder', expanded: true, group: true,
               nodes: [ { id: 'level-1-1', text: 'Level 1.1', icon: 'fa-home' },
                        { id: 'level-1-2', text: 'Level 1.2', icon: 'fa-comment-alt' },
@@ -32,7 +36,8 @@ <h1>Events</h1>
         ]
     });
     w2ui.sidebar.on('*', function (event) {
-        console.log('Event: ' + event.type + ' Target: ' + event.target);
+        $('#event').html('<span style="color: #999">Event</span>: ' + event.type + ' &nbsp;&nbsp;&nbsp;<span style="color: #999">Target</span>: ' + event.target);
+        console.log('Last Event: ' + event.type + ' Target: ' + event.target);
         console.log(event);
     });
 });

diff --git a/demos/examples/sidebar-8.html b/demos/examples/sidebar-8.html
@@ -17,7 +17,7 @@ <h1>Top &amp; Bottom HTML</h1>
         name       : 'sidebar',
         topHTML    : '<div style="background-color: #eee; padding: 10px 5px; border-bottom: 1px solid silver">Some HTML</div>',
         bottomHTML : '<div style="background-color: #eee; padding: 10px 5px; border-top: 1px solid silver">Some HTML</div>',
-        nodes : [ 
+        nodes : [
             { id: 'level-1', text: 'Level 1', img: 'icon-folder', expanded: true, group: true,
               nodes: [ { id: 'level-1-1', text: 'Level 1.1', icon: 'fa-home' },
                        { id: 'level-1-2', text: 'Level 1.2', icon: 'fa-coffee' },

diff --git a/demos/examples/sidebar-9.html b/demos/examples/sidebar-9.html
@@ -0,0 +1,42 @@
+<div class="content">
+    <div id="example_title">
+        <h1>Flat Sidebar (new in 1.5)</h1>
+        Often it is useful to collapse sibebar into a single line. To do that set flatButton to true and on the flat event adjust sidebar container's width.
+    </div>
+    <div id="example_view"></div>
+    <div id="example_code"></div>
+</div>
+
+<!--CODE-->
+<div id="sidebar" style="height: 300px; width: 200px; float: left"></div>
+<div style="margin-left: 220px;">
+    <button class="w2ui-btn" onclick="w2ui.sidebar.goFlat()">Go Flat</button>
+</div>
+<div style="clear: both"/>
+
+<!--CODE-->
+<script>
+$(function () {
+    $('#sidebar').w2sidebar({
+        name : 'sidebar',
+        flatButton: true,
+        nodes: [
+            { id: 'level-1', text: 'Level 1', img: 'icon-folder', expanded: true, group: true, groupShowHide: false,
+              nodes: [ { id: 'level-1-1', text: 'Level 1.1', icon: 'fa-home' },
+                       { id: 'level-1-2', text: 'Level 1.2', icon: 'fa-coffee' },
+                       { id: 'level-1-3', text: 'Level 1.3', icon: 'fa-comment-alt' }
+                     ]
+            },
+            { id: 'level-2', text: 'Level 2', img: 'icon-folder', group: true,
+              nodes: [ { id: 'level-2-1', text: 'Level 2.1', icon: 'fa-star-empty' },
+                       { id: 'level-2-2', text: 'Level 2.2', icon: 'fa-star-empty' },
+                       { id: 'level-2-3', text: 'Level 2.3', icon: 'fa-star-empty' }
+                     ]
+            }
+        ],
+        onFlat: function (event) {
+            $('#sidebar').css('width', (event.goFlat ? '35px' : '200px'));
+        }
+    });
+});
+</script>
diff --git a/demos/examples/tabs-1.html b/demos/examples/tabs-1.html
@@ -18,10 +18,10 @@ <h1>Simple Tabs</h1>
         name: 'tabs',
         active: 'tab1',
         tabs: [
-            { id: 'tab1', caption: 'Tab 1' },
-            { id: 'tab2', caption: 'Tab 2' },
-            { id: 'tab3', caption: 'Tab 3' },
-            { id: 'tab4', caption: 'Tab 4' }
+            { id: 'tab1', text: 'Tab 1' },
+            { id: 'tab2', text: 'Tab 2' },
+            { id: 'tab3', text: 'Tab 3' },
+            { id: 'tab4', text: 'Tab 4' }
         ],
         onClick: function (event) {
             $('#selected-tab').html(event.target);

diff --git a/demos/examples/tabs-2.html b/demos/examples/tabs-2.html
@@ -21,10 +21,10 @@ <h1>Set a Tab Active</h1>
         name: 'tabs',
         active: 'tab2',
         tabs: [
-            { id: 'tab1', caption: 'Tab 1' },
-            { id: 'tab2', caption: 'Tab 2' },
-            { id: 'tab3', caption: 'Tab 3' },
-            { id: 'tab4', caption: 'Tab 4' }
+            { id: 'tab1', text: 'Tab 1' },
+            { id: 'tab2', text: 'Tab 2' },
+            { id: 'tab3', text: 'Tab 3' },
+            { id: 'tab4', text: 'Tab 4' }
         ]
     });
 });

diff --git a/demos/examples/tabs-3.html b/demos/examples/tabs-3.html
@@ -17,14 +17,14 @@ <h1>Closable Tabs</h1>
         name: 'tabs',
         active: 'tab1',
         tabs: [
-            { id: 'tab1', caption: 'Tab 1' },
-            { id: 'tab2', caption: 'Tab 2', closable: true },
-            { id: 'tab3', caption: 'Tab 3', closable: true },
-            { id: 'tab4', caption: 'Tab 4', closable: true },
-            { id: 'tab5', caption: 'Tab 5', closable: true },
-            { id: 'tab6', caption: 'Tab 6', closable: true },
-            { id: 'tab7', caption: 'Tab 7', closable: true },
-            { id: 'tab8', caption: 'Tab 8', closable: true }
+            { id: 'tab1', text: 'Tab 1' },
+            { id: 'tab2', text: 'Tab 2', closable: true },
+            { id: 'tab3', text: 'Tab 3', closable: true },
+            { id: 'tab4', text: 'Tab 4', closable: true },
+            { id: 'tab5', text: 'Tab 5', closable: true },
+            { id: 'tab6', text: 'Tab 6', closable: true },
+            { id: 'tab7', text: 'Tab 7', closable: true },
+            { id: 'tab8', text: 'Tab 8', closable: true }
         ]
     });
 });
-Original file line number
+Diff line change
@@ Expand Up / @@ -4,4 +4,5 @@ node_modules/ @@
     .idea
     *.iml
     *.ipr
-    *.iws
+    *.iws
+    /npm-debug.log