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 .OxFileButton,
.OxSplitPanel .OxFileInput { .OxSplitPanel .OxFileInput {
position: absolute; position: absolute;

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

@ -5,7 +5,7 @@ in Ox.UI.
'use strict'; 'use strict';
/* /*
Load the UI module. Load the `UI` module.
*/ */
Ox.load('UI', function() { Ox.load('UI', function() {
@ -40,9 +40,8 @@ Ox.load('UI', function() {
<pre> <pre>
$fileButton.bindEvent({ $fileButton.bindEvent({
click: function(data) { click: function(data) {
data.files.forEach(function(file) { // Print array of files
// ... Ox.print(data.files);
});
} }
}); });
</pre> </pre>
@ -68,16 +67,15 @@ Ox.load('UI', function() {
width: 128 width: 128
}), }),
/* /*
Ox.FileInput is a form element, so it has a value and fires a Ox.FileInput is a form element, so it has a value option and fires a
`change` event. Its options are similar to Ox.FileButton, without `change` event. Its other options are similar to Ox.FileButton,
`image`, `title` and `type`, and we can bind to its `change` event without `image`, `title` and `type`, and we can bind to its `change`
like this: event like this:
<pre> <pre>
$fileInput.bindEvent({ $fileInput.bindEvent({
change: function(data) { change: function(data) {
data.value.forEach(function(file) { // Print array of files
// ... Ox.print(data.value);
});
} }
}); });
</pre> </pre>
@ -105,9 +103,8 @@ Ox.load('UI', function() {
$mainMenu.bindEvent({ $mainMenu.bindEvent({
click: function(data) { click: function(data) {
if (data.id == 'foo') { 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); .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) { function openDialog(data) {
var $button = Ox.Button({ var $button = Ox.Button({
id: 'close', id: 'close',
@ -195,27 +196,20 @@ Ox.load('UI', function() {
$dialog.close(); $dialog.close();
} }
}), }),
$content = Ox.Element() $content = Ox.Element().css(getContentCSS(data)),
.css(getContentCSS(data)) $input = Ox.FileInput({
.append( maxFiles: data.id == 'file' ? 1 : -1,
Ox.FileInput({ value: data.files,
maxFiles: data.id == 'file' ? 1 : -1, width: 256
value: data.files, })
width: 256 .css({top: '16px', marginBottom: '16px'})
}) .bindEvent({
.css({ change: function(data) {
position: 'absolute', showEvent(data);
left: '16px', $content.css(getContentCSS(data));
top: '16px', }
marginBottom: '16px' })
}) .appendTo($content),
.bindEvent({
change: function(data) {
showEvent(data);
$content.css(getContentCSS(data));
}
})
),
$dialog = Ox.Dialog({ $dialog = Ox.Dialog({
buttons: [$button], buttons: [$button],
content: $content, 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) { function showEvent(data) {
var key = data.files ? 'files' : 'value'; var key = data.files ? 'files' : 'value';
data[key] = data[key].map(function(file) { data[key] = data[key].map(function(file) {