196 lines
6 KiB
JavaScript
196 lines
6 KiB
JavaScript
/*
|
|
This examples shows how to do file selection — usually for upload —
|
|
in Ox.UI.
|
|
*/
|
|
'use strict';
|
|
|
|
/*
|
|
Load the UI module.
|
|
*/
|
|
Ox.load('UI', function() {
|
|
|
|
var $elements = [
|
|
/*
|
|
Ox.FileButton creates a simple button. It has the following options:
|
|
<pre>
|
|
disabled
|
|
If true, the button is disabled
|
|
image
|
|
Symbol name (if type is 'image'),
|
|
default is 'file' or 'files'
|
|
(depending on maxFiles)
|
|
maxFiles
|
|
Maximum number of files,
|
|
default is -1 (unlimited)
|
|
maxSize
|
|
Maximum total size in bytes,
|
|
default is -1 (unlimited)
|
|
title
|
|
Button title (if type is 'text')
|
|
and tooltip text
|
|
type
|
|
Type, either 'text' or 'image',
|
|
default is 'text'
|
|
width
|
|
Width in px (if type is 'text')
|
|
</pre>
|
|
Ox.FileButton fires a `click` event (not on click, like Ox.Button,
|
|
but once the user has selected one or more files) that we can bind
|
|
to like this:
|
|
<pre>
|
|
$fileButton.bindEvent({
|
|
click: function(data) {
|
|
Ox.print(data.files);
|
|
}
|
|
})
|
|
</pre>
|
|
We create two image buttons and two text buttons: one of each to
|
|
select a single file, one for multiple files.
|
|
*/
|
|
Ox.FileButton({
|
|
maxFiles: 1,
|
|
title: 'Select File...',
|
|
type: 'image'
|
|
}),
|
|
Ox.FileButton({
|
|
title: 'Select Files...',
|
|
type: 'image'
|
|
}),
|
|
Ox.FileButton({
|
|
maxFiles: 1,
|
|
title: 'Select File...',
|
|
width: 128
|
|
}),
|
|
Ox.FileButton({
|
|
title: 'Select Files...',
|
|
width: 128
|
|
}),
|
|
/*
|
|
...
|
|
*/
|
|
Ox.FileInput({
|
|
disabled: true,
|
|
maxFiles: 1,
|
|
maxSize: 1000000,
|
|
width: 256
|
|
}),
|
|
Ox.FileInput({
|
|
maxSize: 1000000,
|
|
width: 256
|
|
})
|
|
],
|
|
/*
|
|
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), ...
|
|
*/
|
|
$menu = Ox.MainMenu({
|
|
menus: [
|
|
{id: 'file', title: 'File', items: [
|
|
{id: 'file', title: 'Select File...', file: {
|
|
maxFiles: 1, width: 80
|
|
}},
|
|
{id: 'files', title: 'Select Files...', file: {
|
|
width: 80
|
|
}}
|
|
]}
|
|
]
|
|
})
|
|
.bindEvent({
|
|
click: function(data) {
|
|
showEvent(data);
|
|
openDialog(data);
|
|
}
|
|
}),
|
|
$main = Ox.Element(),
|
|
$list = Ox.TreeList({
|
|
data: {},
|
|
expanded: true,
|
|
width: 256
|
|
}),
|
|
$innerPanel = Ox.SplitPanel({
|
|
elements: [
|
|
{element: $main},
|
|
{element: $list, resizable: true, resize: [256], size: 256}
|
|
],
|
|
orientation: 'horizontal'
|
|
}),
|
|
$outerPanel = Ox.SplitPanel({
|
|
elements: [
|
|
{element: $menu, size: 20},
|
|
{element: $innerPanel}
|
|
],
|
|
orientation: 'vertical'
|
|
})
|
|
.appendTo(Ox.$body);
|
|
|
|
$elements.forEach(function($element, i) {
|
|
$element
|
|
.css({top: 16 + 32 * i + 'px'})
|
|
.bindEvent(
|
|
$element.is('.OxFileButton') ? 'click' : 'change', showEvent
|
|
)
|
|
.appendTo($main);
|
|
});
|
|
|
|
window.$elements = $elements;
|
|
window.$menu = $menu;
|
|
|
|
function openDialog(data) {
|
|
var $button = Ox.Button({
|
|
id: 'close',
|
|
title: 'Close'
|
|
})
|
|
.bindEvent({
|
|
click: 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));
|
|
}
|
|
})
|
|
),
|
|
$dialog = Ox.Dialog({
|
|
buttons: [$button],
|
|
content: $content,
|
|
height: 129,
|
|
keys: {escape: 'close'},
|
|
title: data.title.replace('...', ''),
|
|
width: 288 + (data.id == 'file' ? 0 : Ox.UI.SCROLLBAR_SIZE)
|
|
})
|
|
.open();
|
|
function getContentCSS(data) {
|
|
return {height: 49 + (data.files || data.value).length * 16 + 'px'};
|
|
}
|
|
}
|
|
|
|
function showEvent(data) {
|
|
var key = data.files ? 'files' : 'value';
|
|
data[key] = data[key].map(function(file) {
|
|
var object = {};
|
|
Object.keys(file).forEach(function(key) {
|
|
object[key] = file[key];
|
|
});
|
|
return object;
|
|
});
|
|
$list.options({data: data});
|
|
}
|
|
|
|
});
|