Updated demos

demos/README.md

@@ -0,0 +1,20 @@
+# Demos
+
+This folder has demo files that can run as standalone app in here, as well as website demos.
+
+## Uploading Demos
+
+To deploy demos to w2ui.com from `w2ui-website` repository run
+
+```
+gulp deploy
+```
+
+To just copy demos from `w2ui` main repository run
+```
+gulp copy
+```
+
+It will
+- copy denos `../w2ui/demos` into here
+- rename `index-side.html` -> `index.html`

demos/examples/popup/10.html

@@ -1,7 +1,7 @@
 <div class="content">
     <div id="example_title">
-        <h1>Promises (new in 1.5)</h1>
-        Open, load, and message function will now return a promise which is resolved when popup is inserted into the DOM and ready (though still opening).
+        <h1>Actions (new in 1.5)</h1>
+        There is an easier way to define popup actions now. Which can be triggered with w2popu.action('action-name') method.
     </div>
     <div id="example_view"></div>
     <div id="example_code"></div>
@@ -14,15 +14,31 @@ <h1>Promises (new in 1.5)</h1>
 <script>
 function popup() {
     w2popup.open({
-        width: 400,
+        width: 500,
         height: 250,
         title: 'Title',
         body: '<div class="w2ui-centered" style="line-height: 1.8"><div class="text"></div></div>',
-        buttons: '<button class="w2ui-btn" onclick="w2popup.close()">Ok</button>'+
-          '<button class="w2ui-btn" onclick="w2popup.close()">Cancel</button>'
+        actions: {
+            // function name is used for button text
+            Ok(event) {
+                // do something
+                w2popup.close()
+            },
+            Cancel(event) {
+                w2popup.close()
+            },
+            // custom button, when you can define text and class
+            custom: {
+                text: "Other Button",
+                class: "w2ui-btn-blue",
+                onClick(event) {
+                    console.log('button clickced')
+                }
+            }
+        },
+        onOpen(event) {
+            $('#w2ui-popup .text').html("Popup ready")
+        }
     })
-    .then(() => {
-        $('#w2ui-popup .text').html("Popup ready")
-    });
 }
 </script>

demos/examples/popup/11.html

@@ -1,7 +1,7 @@
 <div class="content">
     <div id="example_title">
-        <h1>Actions (new in 1.5)</h1>
-        There is an easier way to define popup actions now. Which can be triggered with w2popu.action('action-name') method.
+        <h1>Promises (new in 2.0)</h1>
+        Open, load, and message function will now return a promise which is resolved when popup is inserted into the DOM and ready (though still opening).
     </div>
     <div id="example_view"></div>
     <div id="example_code"></div>
@@ -14,28 +14,12 @@ <h1>Actions (new in 1.5)</h1>
 <script>
 function popup() {
     w2popup.open({
-        width: 500,
+        width: 400,
         height: 250,
         title: 'Title',
         body: '<div class="w2ui-centered" style="line-height: 1.8"><div class="text"></div></div>',
-        actions: {
-            // function name is used for button text
-            Ok(event) {
-                // do something
-                w2popup.close()
-            },
-            Cancel(event) {
-                w2popup.close()
-            },
-            // custom button, when you can define text and class
-            custom: {
-                text: "Other Button",
-                class: "w2ui-btn-blue",
-                onClick(event) {
-                    console.log('button clickced')
-                }
-            }
-        }
+        buttons: '<button class="w2ui-btn" onclick="w2popup.close()">Ok</button>'+
+          '<button class="w2ui-btn" onclick="w2popup.close()">Cancel</button>'
     })
     .then(() => {
         $('#w2ui-popup .text').html("Popup ready")

demos/examples/popup/3.html

@@ -15,7 +15,7 @@ <h1>Popup Content</h1>
 <!--CODE-->
 <button class="w2ui-btn" onclick="w2popup.open({ title:'Popup', body: 'from JSON structure' })">From JSON</button>
 <button class="w2ui-btn" onclick="$('#popup1').w2popup()">From HTML</button>
-<button class="w2ui-btn" onclick="w2popup.load('data/popup1.html')">From File</button>
+<button class="w2ui-btn" onclick="w2popup.load({ url: 'data/popup1.html' })">From File</button>
 <button class="w2ui-btn" onclick="w2popup.load({ url: 'data/popup1.html', showMax: true })">From File with options</button>
 
 <div id="popup1" style="display: none; width: 600px; height: 400px; overflow: hidden">

demos/examples/popup/6.html

@@ -9,7 +9,7 @@ <h1>Transitions</h1>
 </div>
 
 <!--CODE-->
-<button class="w2ui-btn" onclick="w2popup.load('data/popup3.html')">Open Popup</button>
+<button class="w2ui-btn" onclick="w2popup.load({ url: 'data/popup3.html' })">Open Popup</button>
 <script>
     var last_index, last_trans;
     if (typeof last_trans == 'undefined') {

demos/index-dev.html

@@ -22,6 +22,6 @@
     <script type="text/javascript" src="index.js"></script>
 </head>
 <body>
-    <div id="main_layout"></div>
+    <div id="demo_layout"></div>
 </body>
 </html>

demos/index-site.html

@@ -12,6 +12,6 @@
     <script type="text/javascript" src="index.js"></script>
 </head>
 <body>
-    <div id="main_layout"></div>
+    <div id="demo_layout"></div>
 </body>
 </html>

demos/index.css

@@ -11,13 +11,15 @@ body {
 }
 
 h1 {
-    margin: 15px 0px;
+    margin: 4px 0 15px 0px;
     font-size: 20px;
+    color: #000;
 }
 
 h2 {
-    margin: 8px 0px;
-    font-size: 13px;
+    margin: 20px 0px;
+    font-size: 14px;
+    color: #444;
 }
 
 ul {
@@ -32,14 +34,17 @@ input[type=text] {
     padding: 4px !important;
 }
 
-#main_layout {
+#demo_layout {
     position: absolute;
     width: 100%;
     height: 100%;
 }
 
 #example_title {
-    margin-bottom: 20px;
+    font-size: 16px;
+    color: #666;
+    line-height: 1.6;
+    margin-bottom: 35px;
 }
 
 #example_view {
@@ -124,3 +129,42 @@ table.list td {
     border: 1px solid #d1d1d1;
     padding: 3px 10px !important;
 }
+
+#demo_toolbar {
+    position: absolute;
+    top: 10px;
+    left: 233px;
+    width: 880px;
+    height: 38px;
+    padding: 4px;
+    background-color: transparent;
+}
+
+/* -- Demo Toolbar -- */
+
+#demo_toolbar.w2ui-toolbar table td {
+    padding: 1px 2px !important;
+}
+
+#demo_toolbar .w2ui-button:hover {
+    border: 1px solid #fff !important;
+    background-color: #f5f5f5 !important;
+
+}
+
+#demo_toolbar .w2ui-button.checked {
+    border: 1px solid #a7afd6 !important;
+    background-color: #f3f5ff !important;
+}
+
+#demo_toolbar.w2ui-toolbar table.w2ui-button .w2ui-tb-text {
+    border-right: 6px solid transparent !important;
+}
+
+#layout_demo_layout_panel_left .w2ui-sidebar .w2ui-sidebar-body .w2ui-selected {
+    background-color: #f3f5ff !important;
+    border: 1px solid #a7afd6 !important;
+}
+.w2ui-sidebar .w2ui-sidebar-body .w2ui-node-group {
+    color: #a18d9e
+}

demos/index.html

@@ -3,15 +3,15 @@
 <head>
     <title>w2ui Demos</title>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-    <link rel="stylesheet" type="text/css" media="screen" href="../dist/w2ui.min.css" id="mainCSS" />
+    <link rel="stylesheet" type="text/css" media="screen" href="../dist/w2ui-1.5.min.css" id="mainCSS" />
     <link rel="stylesheet" type="text/css" media="screen" href="../libs/font-awesome/css/font-awesome.css" />
     <link rel="stylesheet" type="text/css" media="screen" href="index.css"/>
     <script type="text/javascript" src="../libs/jquery/jquery-3.5.1.js"></script>
-    <script type="text/javascript" src="../dist/w2ui.js"></script>
+    <script type="text/javascript" src="../dist/w2ui-1.5.js"></script>
     <script type="text/javascript" src="code-mirror.js"></script>
     <script type="text/javascript" src="index.js"></script>
 </head>
 <body>
-    <div id="main_layout"></div>
+    <div id="demo_layout"></div>
 </body>
 </html>