0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

update file selection example

Browse source
This commit is contained in:
rolux 2012-06-27 14:56:16 +02:00
parent bbd80ccf4f
commit 83776fec5d
2 changed files with 37 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
examples/forms/file_selection/css/example.css
View file

@ -1,3 +1,5 @@
.OxDialog .OxFileButton,
.OxDialog .OxFileInput,
.OxSplitPanel .OxFileButton,
.OxSplitPanel .OxFileInput {
position: absolute;

70
examples/forms/file_selection/js/example.js
View file

@ -5,7 +5,7 @@ in Ox.UI.
'use strict';
/*
Load the UI module.
Load the `UI` module.
*/
Ox.load('UI', function() {
@ -40,9 +40,8 @@ Ox.load('UI', function() {
<pre>
$fileButton.bindEvent({
click: function(data) {
data.files.forEach(function(file) {
// ...
});
// Print array of files
Ox.print(data.files);
}
});
</pre>
@ -68,16 +67,15 @@ 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:
Ox.FileInput is a form element, so it has a value option and fires a
`change` event. Its other 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) {
// ...
});
// Print array of files
Ox.print(data.value);
}
});
</pre>
@ -105,9 +103,8 @@ Ox.load('UI', function() {
$mainMenu.bindEvent({
click: function(data) {
if (data.id == 'foo') {
data.files.forEach(function(file) {
// ...
});
// Print array of files
Ox.print(data.files);
}
}
});
@ -185,6 +182,10 @@ Ox.load('UI', function() {
.appendTo($main);
});
/*
When the user selects one or more files via the menu, we open a dialog. This
dialog contains an Ox.FileInput that is populated with the selected file(s).
*/
function openDialog(data) {
var $button = Ox.Button({
id: 'close',
@ -195,27 +196,20 @@ Ox.load('UI', function() {
$dialog.close();
}
}),
$content = Ox.Element()
.css(getContentCSS(data))
.append(
Ox.FileInput({
maxFiles: data.id == 'file' ? 1 : -1,
value: data.files,
width: 256
})
.css({
position: 'absolute',
left: '16px',
top: '16px',
marginBottom: '16px'
})
.bindEvent({
change: function(data) {
showEvent(data);
$content.css(getContentCSS(data));
}
})
),
$content = Ox.Element().css(getContentCSS(data)),
$input = Ox.FileInput({
maxFiles: data.id == 'file' ? 1 : -1,
value: data.files,
width: 256
})
.css({top: '16px', marginBottom: '16px'})
.bindEvent({
change: function(data) {
showEvent(data);
$content.css(getContentCSS(data));
}
})
.appendTo($content),
$dialog = Ox.Dialog({
buttons: [$button],
content: $content,
@ -230,6 +224,12 @@ Ox.load('UI', function() {
}
}
/*
Whenever any of our FileButtons fires a `click` event, or any of our
FileInputs fires a `change` event, we display the event data. Note that we
have to transform the file object to a regular object before we can pass it
to the list.
*/
function showEvent(data) {
var key = data.files ? 'files' : 'value';
data[key] = data[key].map(function(file) {