Merge branch 'master' of https://github.com/vitmalina/w2ui

demos/examples/fields-2.html

@@ -98,7 +98,7 @@ <h1>Date, Time & Datetime</h1>
 // US Format
 $('input[type=us-date]').w2field('date');
 $('input[type=us-dateA]').w2field('date', { format: 'm/d/yyyy', start:  month + '/5/' + year, end: month + '/25/' + year });
-$('input[type=us-dateB]').w2field('date', { format: 'm/d/yyyy', blocked: [ month+'/12/2014',month+'/13/2014',month+'/14/' + year]});
+$('input[type=us-dateB]').w2field('date', { format: 'm/d/yyyy', blocked: [ month+'/12/' + year,month+'/13/' + year,month+'/14/' + year]});
 $('input[type=us-date1]').w2field('date', { format: 'm/d/yyyy', end: $('input[type=us-date2]') });
 $('input[type=us-date2]').w2field('date', { format: 'm/d/yyyy', start: $('input[type=us-date1]') });
 $('input[type=us-time]').w2field('time',  { format: 'h12' });

docs/details/w2form.tabindexBase.html

@@ -0,0 +1,28 @@
+Indicates the tabindex base value for generated form fields.
+
+<div class="definition">
+    Integer, default = 0
+</div>
+
+Setting this value can be useful if you have multiple auto-generated forms on the same page.
+<br>
+The value of <span class="argument">.tabindexBase</span> will be added to the "normal" tabindex value of the generated field.
+<br>
+Note that setting the tabindex of a field in the field atribute still has priority over the genrated tabindex value.
+<br><br>
+In this example, the first field will have a tabindex value of 101:
+<textarea class="javascript">
+var form = $('#form').w2form({
+    name   : 'form',
+    header : 'Form with modified tabindex base',
+    tabindexBase: 100,
+    fields : [
+        { field: 'first_name', type: 'text', html: { caption: 'First Name',} },
+        { field: 'zip', type: 'int', html: { caption: 'Zip' } },
+        { field: 'short_bio', type: 'text', html: { caption: 'Short Bio' } },
+        // for talk_name tabindex "502" will be used instead of "104"
+        { field: 'talk_name', type: 'text', html: { caption: 'Talk Name', attr:'tabindex=502' } },
+        { field: 'description', type: 'text', html: { caption: 'Talk Description' } }
+    ]
+});
+</textarea>

docs/details/w2grid.columns.html

@@ -30,7 +30,7 @@
     caption        : '',     // column caption 
     field          : '',     // field name to map column to a record
     size           : null,   // size of column in px or %
-    min            : 15,     // minimum width of column in px
+    min            : 20,     // minimum width of column in px
     max            : null,   // maximum width of column in px
     gridMinWidth   : null,   // minimum width of the grid when column is visible
     sizeCorrected  : null,   // read only, corrected size (see explanation below)

docs/details/w2grid.onColumnOnOff.html

@@ -25,7 +25,7 @@
         { recid: 5, fname: 'Kelly', lname: 'Silver', email: '[email protected]', sdate: '4/3/2012' },
         { recid: 6, fname: 'Francis', lname: 'Gatos', email: '[email protected]', sdate: '2/5/2012' }
     ],
-    onColumnOnOf: function(event) {
+    onColumnOnOff: function(event) {
         console.log(event);
     }        
 });
@@ -43,4 +43,4 @@
 <span class="method">event.preventDefault()</span>. To perform an action 
 after the event is fully processed, define <span class="method">event.onComplete</span> function. 
 <div style="height: 10px;"></div>
-See <a href="utils/events">events</a> page in utilities for more details.
+See <a href="utils/events">events</a> page in utilities for more details.

docs/summary/w2form-props.php

@@ -1,4 +1,4 @@
-<link rel="stylesheet" type="text/css" href="../summary.css"/> 
+<link rel="stylesheet" type="text/css" href="../summary.css"/>
 <div class="container">
 <div class="obj-property">
     <a href="w2form.actions">actions</a> <span>- Object, default = {}</span>
@@ -39,7 +39,7 @@
     <a href="w2form.header">header</a> <span>- String, default = ''</span>
 </div>
 <div class="obj-property-desc">
-    The header of the form. 
+    The header of the form.
 </div>
 
 <div class="obj-property">
@@ -126,6 +126,13 @@
     Object with data for the route.
 </div>
 
+<div class="obj-property">
+    <a href="w2form.tabindexBase">tabindexBase</a> <span>- Integer, default = 0</span>
+</div>
+<div class="obj-property-desc">
+    Base tabindex for the generated form fields.
+</div>
+
 <div class="obj-property">
     <a href="w2form.tabs">tabs</a> <span>- Object, default = {}</span>
 </div>
@@ -147,4 +154,4 @@
     URL to the remote data source.
 </div>
 
-</div>
+</div>

readme.md

@@ -1,26 +1,28 @@
 ## W2UI 1.5 - MIT License
 
-W2UI is modern, intuitive JavaScript UI library for building rich data-driven web application. The library has
-a small footprint and only jQuery (1.9+) as a dependency. The library has the following widgets:
-
-* w2layout
-* w2grid
-* w2toolbar
-* w2sidebar
-* w2tabs
-* w2form
-* w2fields
-* w2popup
-* w2utils
+**[`w2ui`](http://w2ui.com)** is a modern and intuitive JavaScript UI library for building rich data-driven web applications. The library has
+a small footprint and requires only jQuery (1.9+) as a dependency. 
+
+The library implements the following highly usable widgets:
+
+* **[w2layout](http://w2ui.com/web/docs/1.5/layout)** - a Layout component - *[demo](http://w2ui.com/web/demo/layout)*
+* **[w2grid](http://w2ui.com/web/docs/1.5/layout/grid)** - an advanced Grid component - *[demo](http://w2ui.com/web/demo/grid)*
+* **[w2toolbar](http://w2ui.com/web/docs/1.5/toolbar)** - a Toolbar component - *[demo](http://w2ui.com/web/demo/toolbar)*
+* **[w2sidebar](http://w2ui.com/web/docs/1.5/sidebar)** - a Tree/Sidebar component - *[demo](http://w2ui.com/web/demo/sidebar)*
+* **[w2tabs](http://w2ui.com/web/docs/1.5/tabs)** - Tabs - *[demo](http://w2ui.com/web/demo/tabs)*
+* **[w2form](http://w2ui.com/web/docs/1.5/form)** - Forms - *[demo](http://w2ui.com/web/demo/form)*
+* **[w2fields](http://w2ui.com/web/docs/1.5/fields)** - various Fields - *[demo](http://w2ui.com/web/demo/fields)*
+* **[w2popup](http://w2ui.com/web/docs/1.5/popup)** - a Popup component - *[demo](http://w2ui.com/web/demo/popup)*
+* **[w2utils](http://w2ui.com/web/docs/1.5/utils)** - various utilities - *[demo](http://w2ui.com/web/demo/utils)*
 
 The complete library is only **69Kb** (minified & gzipped)
 
 
-## Who Uses It
+## Who is Using It
 
-If you're using w2ui I'd love to hear about it, please email to [email protected] name of your project and a link to a public website or demo and I will add it to the list.
+[List of projects that use **`w2ui`**](https://github.com/vitmalina/w2ui/wiki/Projects-that-use-w2ui)!
 
-[List of projects that use w2ui](https://github.com/vitmalina/w2ui/wiki/Projects-that-use-w2ui)
+If you're using **`w2ui`**, I'd love to hear about it, please email to `vitmalina@gmail.com` the name of your project and a link to a public website or demo, and I will add it to the list.
 
 ## Quick Start
 
@@ -29,11 +31,15 @@ Current development version is 1.5.rc1.
 
 You can:
 - Download from here: [http://w2ui.com](http://w2ui.com)
-- Install using bower
+- Install using bower:
 
 ```
 bower install w2ui
 ```
+- or install using npm:
+```
+npm install w2ui
+```
 
 To start using the library you need to include into your page:
 
@@ -44,7 +50,8 @@ All the widgets and their css classes are defined inside of these two files. The
 are embedded into CSS file.
 
 There is no requirement for a server side language. Node, Java, PHP, ASP, Perl or .NET all will work, as long as you can
-return JSON format from the server (or write a converter into JSON format on the client).
+return JSON format from the server (or write a converter into JSON format on the client). Some server side example implementations
+can be found [here](https://github.com/vitmalina/w2ui/tree/master/server). 
 
 [Getting Started Guide](http://w2ui.com/web/get-started)
 
@@ -54,7 +61,7 @@ return JSON format from the server (or write a converter into JSON format on the
 You can find documentation and demos here:
 
 * [http://w2ui.com/web/docs](http://w2ui.com/web/docs) - documentation
-* [http://w2ui.com/web/demos](http://w2ui.com/web/demos) - demos
+* [http://w2ui.com/web/demos](http://w2ui.com/web/demos) - detailed demos
 
 
 ## Bug Tracking

server/java/src/com/w2ui/servlets/W2uiGridData.java

@@ -45,6 +45,11 @@ protected void logException(Exception ex) {
 		// overridable for logging
 	}
 
+	protected void processCommand(String cmd, JSONObject reqParams) throws Exception {
+		// overridable to manage other commands
+		throw new Exception("Unknown command ["+cmd+"]");
+	}
+
 	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 		JSONObject jsobj = new JSONObject();
 		try {
@@ -70,7 +75,8 @@ protected void doPost(HttpServletRequest request, HttpServletResponse response)
 				JSONObject record = processGetRecord(reqParams);
 				jsobj.put("record", record);
 			} else {
-				throw new Exception("Unknown command ["+cmd+"]");
+				// normally this causes an exception but the processCommand can be overridden
+				processCommand(cmd, reqParams);
 			}
 			jsobj.put("status", "success");
 		} catch (Exception ex) {

server/node/db2/readme.md

@@ -8,7 +8,7 @@ The example uses Users and positions to demonstrate
 Note that a user can only be at one posision, but there might be posisions without locataions
 
 The example is not yet finnished but can serve as a starting point and example.
-I have tried to reuse and look at the postgress node implementation foud here,
+I have tried to reuse and look at the postgress node implementation found here,
 http://w2ui.com/kickstart/
 
 ## Installation
@@ -19,7 +19,7 @@ To run the server with example client public/index.html
 
 npm install
 
-node server.js
+node start.js
 
 http://localhost:8080
 
@@ -49,7 +49,5 @@ In the top part you can generate users and later use them in the
 
 When you have entered some data you can test the api with,
 
-http://localhost:8080/api/enum/position
-
 http://localhost:8080/api/enum/user
 

server/node/db2/w2ui.js

@@ -1,5 +1,5 @@
 /**
-*  Module that helps wo work with W2UI
+*  Module that helps to work with W2UI & db2
 *
 *  DEPENDENCIES: underscore
 */
@@ -201,8 +201,6 @@ function serveDB2(req, res, collectionName)
                     var val = obj[key];
                     fields.push(key);
                     values.push(val);
-                    // use val
-                    console.log("Olle", key, val);
                 });
 
                 sql = sql + '(' ;
@@ -249,8 +247,8 @@ function serveDB2(req, res, collectionName)
             break;
         default:
             {
-                  console.log("Unknown cmd",evaluated.cmd)
-                  var err_response = {
+                console.log("Unknown cmd",evaluated.cmd)
+                var err_response = {
                                         status: "error",
                                         message: "Command not recognized"
                                      };
@@ -461,6 +459,11 @@ function getRecords (sql, req, res, options) {
                         if (master == null) master = record[options.master];
                         delete record[options.master];
                     }
+                    if (record.RECID) {
+                        record.recid = record.RECID
+                        delete record.RECID;
+                        console.log(record.recid)                        
+                    }
                     data.push(record);
                 }
                 var ret = {

site/pages/blog/art-2.php

@@ -1,4 +1,4 @@
-<? $theme->assign("page-name", "Spearch Bubble in Pure CSS"); ?>
+<? $theme->assign("page-name", "Speech Bubble in Pure CSS"); ?>
 
 <h2>Speech Bubble in Pure CSS</h2>
 <div class="date">June 2, 2012</div>
@@ -163,10 +163,10 @@
 some more examples:
 
 <div style="margin: 20px 0px;">
-	<div class="my-tooltip left-top">Multiline tooltop<br> Has two lines</div>
-	<div class="my-tooltip left-bottom">Multiline tooltop<br> Has two lines</div>
-	<div class="my-tooltip top">Multiline tooltop<br> Has two lines</div>
-	<div class="my-tooltip bottom">Multiline tooltop<br> Has two lines</div>
+	<div class="my-tooltip left-top">Multiline tooltip<br> Has two lines</div>
+	<div class="my-tooltip left-bottom">Multiline tooltip<br> Has two lines</div>
+	<div class="my-tooltip top">Multiline tooltip<br> Has two lines</div>
+	<div class="my-tooltip bottom">Multiline tooltip<br> Has two lines</div>
 </div>
 
 To achieve the corner effect, is uses border trick. What will happen if you define a border for TOP as a 5px solid line and border for LEFT

site/pages/blog/art-5.php

@@ -6,7 +6,7 @@
 <? require("blog-social.php"); ?>
 
 Finally, after many sleepless nights and lots of re-writes and re-thinking the w2ui 1.1 is out. This is an 
-important milestone for me. I am releasing a JavaScript UI library that is very small, hight quality and I believe
+important milestone for me. I am releasing a JavaScript UI library that is very small, high quality and I believe
 it is simply amazing. 37Kb of pure poetry!
 <div class="spacer10"></div>
 

site/pages/blog/art-code-quality.php

@@ -9,14 +9,14 @@
 - easy to maintain
 - easy to expand
 
-It should be maintaninable.
+It should be maintainable.
 
 I am not talking about testable, error resistabnce, etc.
 
 1. The code should be readable. The code itself, not comments, should clearly state the intent. To make code readable, it is
 very important to adopt a good coding style and follow it consistently.
 
-2. Give short, consize names to methods and properties. Naming is hard.
+2. Give short, concise names to methods and properties. Naming is hard.
 - think of context where variable or property is defined?
 - name important variables meaningfully
 - do not use redundant names

site/pages/blog/art-css-selectors.php

@@ -1,7 +1,7 @@
 True or Fiction: Long CSS Rules make CSS slow
 
 How do you measure css rendering style. If you render some HTML structure of without, you will see that with or without CSS it would give you same
-performance. However, with a naked eye you can see that with CSS it takes a bit longer for document to appar.
+performance. However, with a naked eye you can see that with CSS it takes a bit longer for document to appear.
 
 search: css selectors performance
 https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficient_CSS

site/pages/blog/art-mysql.php

@@ -2,7 +2,7 @@
 
 I foresee this pots will be very unpopular with some developer community, but here goes nothing.
 
-1. Created a table with VC(65535) or 100 columns of VC(600) because mysql support comulative number of vc size to be 65525
+1. Created a table with VC(65535) or 100 columns of VC(600) because mysql support cumulative number of vc size to be 65525
 
 --- 
 Error Code: 1118. Row size too large. The maximum row size for the used table type, not counting BLOBs, is 65535. You have to change some columns to TEXT or BLOBs

site/pages/demo/demo-grid.php

@@ -84,7 +84,7 @@
 	<div class="row">
 		<div class="span4">
 			<h3>JavaScript APIs</h3>
-			All functionality can be accessed from JavaScript in short, human-readble commands. Clicks, double clicks and other events can
+			All functionality can be accessed from JavaScript in short, human-readable commands. Clicks, double clicks and other events can
 			be emulated.
 		</div>
 		<div class="span4">

site/pages/demo/demo-layout.php

@@ -42,7 +42,7 @@
 		</div>
 		<div class="span4">
 			<h3>Nested</h3>
-			If 6 default panels is not enought for you, you can nest them. A layout panel can contain another layout with 6 more panels. There is no limit
+			If 6 default panels is not enough for you, you can nest them. A layout panel can contain another layout with 6 more panels. There is no limit
 			how many layouts you can nest.
 		</div>
 	</div>
@@ -52,7 +52,7 @@
 	<div class="row">
 		<div class="span4">
 			<h3>JavaScript Control</h3>
-			A widget is good when it has clean APIs and can be manupulated from JavaScript. 
+			A widget is good when it has clean APIs and can be manipulated from JavaScript.
 		</div>
 		<div class="span4">
 			<h3>Clean Syntax</h3>

site/pages/demo/demo-popup.php

@@ -8,7 +8,7 @@
 		<div class="span10">
 			<h2>Popups and Overlays</h2>
 			Popups and overlays are popular UI elements of modern web applications. If used right, it can significantly enhance user interaction, provide 
-			clearity and improve navigation of your application. The w2ui library has both popups and overlays. A popup blocks the content of the 
+			clarity and improve navigation of your application. The w2ui library has both popups and overlays. A popup blocks the content of the
 			application for the duration of user interaction. An overlay, in turn, is non-blocking UI solutions that displays additional information.
 		</div>
 		<div class="span2">

site/pages/demo/demo-sidebar.php

@@ -35,7 +35,7 @@
 		</div>
 		<div class="span4">
 			<h3>Nested</h3>
-			Sidebar allows to create nested menues in case you need one.
+			Sidebar allows to create nested menus in case you need one.
 		</div>
 		<div class="span4">
 			<h3>Integrated</h3>
@@ -48,15 +48,15 @@
 	<div class="row">
 		<div class="span4">
 			<h3>JavaScript APIs</h3>
-			All functionality can be accessed from JavaScript in short, human-readble commands. 
+			All functionality can be accessed from JavaScript in short, human-readable commands.
 		</div>
 		<div class="span4">
 			<h3>Clean Syntax</h3>
 			If it is easy to define a widget, it is easier to avoid mistakes. The code is clean and easy to read, as you can see below.
 		</div>
 		<div class="span4">
 			<h3>Customizable</h3>
-			If you are not satisfied with a node, you can specidy any HTML text instead of it.
+			If you are not satisfied with a node, you can specify any HTML text instead of it.
 		</div>
 	</div>