diff --git a/examples/forms/file_selection/js/example.js b/examples/forms/file_selection/js/example.js index 15bcbc3f..ab67b8a0 100644 --- a/examples/forms/file_selection/js/example.js +++ b/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:
             disabled
                 If true, the button is disabled
@@ -40,9 +40,11 @@ Ox.load('UI', function() {
             
             $fileButton.bindEvent({
                 click: function(data) {
-                    Ox.print(data.files);
+                    data.files.forEach(function(file) {
+                        // ...
+                    });
                 }
-            })
+            });
             
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: +
+            $fileInput.bindEvent({
+                change: function(data) {
+                    data.value.forEach(function(file) {
+                        // ...
+                    });
+                }
+            });
+            
+ 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` property (which takes the same `maxFiles`, `maxSize` and `width` - options as Ox.FileButton), ... + File selection also works from a menu. A basic menu item looks like + `{id: 'id', title: 'Title'}`, and its `click` event fires on click. + 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: +
+        $mainMenu.bindEvent({
+            click: function(data) {
+                if (data.id == 'foo') {
+                    data.files.forEach(function(file) {
+                        // ...
+                    });
+                }
+            }
+        });
+        
+ 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',