update file selection example

examples/forms/file_selection/js/example.js

@@ -11,7 +11,7 @@ Ox.load('UI', function() {
 
     var $elements = [
             /*
-            Ox.FileButton creates a simple button. It has the following options:
+            Ox.FileButton has the following options:
             <pre>
             disabled
                 If true, the button is disabled
@@ -40,9 +40,11 @@ Ox.load('UI', function() {
             <pre>
             $fileButton.bindEvent({
                 click: function(data) {
-                    Ox.print(data.files);
+                    data.files.forEach(function(file) {
+                        // ...
+                    });
                 }
-            })
+            });
             </pre>
             We create two image buttons and two text buttons: one of each to
             select a single file, one for multiple files.
@@ -66,10 +68,23 @@ Ox.load('UI', function() {
                 width: 128
             }),
             /*
-            ...
+            Ox.FileInput is a form element, so it has a value and fires a
+            `change` event. Its options are similar to Ox.FileButton, without
+            `image`, `title` and `type`, and we can bind to its `change` event
+            like this:
+            <pre>
+            $fileInput.bindEvent({
+                change: function(data) {
+                    data.value.forEach(function(file) {
+                        // ...
+                    });
+                }
+            });
+            </pre>
+            Again, we create one input to select a single file and one for
+            multiple files.
             */
             Ox.FileInput({
-                disabled: true,
                 maxFiles: 1,
                 maxSize: 1000000,
                 width: 256
@@ -80,9 +95,26 @@ Ox.load('UI', function() {
             })
         ],
         /*
-        A basic menu item looks like `{id: 'id', title: 'Title'}`. By adding a
+        File selection also works from a menu. A basic menu item looks like
-        `file` property (which takes the same `maxFiles`, `maxSize` and `width`
+        `{id: 'id', title: 'Title'}`, and its `click` event fires on click.
-        options as Ox.FileButton), ...
+        By adding a `file` property (which takes the same `maxFiles`, `maxSize`
+        and `width` options as Ox.FileButton), we enable file selection, and
+        the `click` event now fires once one or more files are selected. We can
+        bind to it like this:
+        <pre>
+        $mainMenu.bindEvent({
+            click: function(data) {
+                if (data.id == 'foo') {
+                    data.files.forEach(function(file) {
+                        // ...
+                    });
+                }
+            }
+        });
+        </pre>
+        Note that keyboard navigation works as well. Just like any other menu
+        item, it can be activated by pressing `enter`, which opens the file
+        selection dialog.
         */
         $menu = Ox.MainMenu({
                 menus: [
@@ -96,18 +128,30 @@ Ox.load('UI', function() {
                     ]}
                 ]
             })
+            /*
+            On click, we display the event data and open a dialog.
+            */
             .bindEvent({
                 click: function(data) {
                     showEvent(data);
                     openDialog(data);
                 }
             }),
+        /*
+        This is a container for our buttons and inputs.
+        */
         $main = Ox.Element(),
+        /*
+        This is the list that will display the event data.
+        */
         $list = Ox.TreeList({
             data: {},
             expanded: true,
             width: 256
         }),
+        /*
+        They both share a panel.
+        */
         $innerPanel = Ox.SplitPanel({
             elements: [
                 {element: $main},
@@ -115,6 +159,9 @@ Ox.load('UI', function() {
             ],
             orientation: 'horizontal'
         }),
+        /*
+        Menu and inner panel go into the outer panel.
+        */
         $outerPanel = Ox.SplitPanel({
             elements: [
                 {element: $menu, size: 20},
@@ -124,6 +171,11 @@ Ox.load('UI', function() {
         })
         .appendTo(Ox.$body);    
 
+    /*
+    Here, we append the buttons and inputs to the container. For each element,
+    we add an event handler (`click` event for buttons, `change` event for
+    inputs) to display the event data.
+    */
     $elements.forEach(function($element, i) {
         $element
             .css({top: 16 + 32 * i + 'px'})
@@ -133,9 +185,6 @@ Ox.load('UI', function() {
             .appendTo($main);
     });    
 
-    window.$elements = $elements;
-    window.$menu = $menu;
-
     function openDialog(data) {
         var $button = Ox.Button({
                     id: 'close',