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',