oxjs/examples/forms/file_selection/js/example.js
2012-06-22 09:54:38 +02:00

138 lines
4.3 KiB
JavaScript

/*
...
*/
Ox.load('UI', function() {
var $menu = Ox.MainMenu({
menus: [
{id: 'file', title: 'File', items: [
{id: 'file', title: 'Select File...', file: {
maxFiles: 1, width: 96
}},
{id: 'files', title: 'Select Files...', file: {
width: 96
}}
]}
]
})
.bindEvent({
click: function(data) {
showEvent(data);
openDialog(data);
}
}),
$main = Ox.Element()
.append(
Ox.FileButton({
maxFiles: 1,
title: 'Select File...',
width: 128
})
.css({position: 'absolute', left: '16px', top: '16px'})
.bindEvent({click: showEvent})
)
.append(
Ox.FileButton({
title: 'Select Files...',
width: 128
})
.css({position: 'absolute', left: '16px', top: '48px'})
.bindEvent({click: showEvent})
)
.append(
Ox.FileInput({
maxFiles: 1,
maxSize: 1000000,
width: 256
})
.css({position: 'absolute', left: '16px', top: '80px'})
.bindEvent({click: showEvent})
)
.append(
Ox.FileInput({
maxSize: 1000000,
width: 256
})
.css({position: 'absolute', left: '16px', top: '112px'})
.bindEvent({click: showEvent})
),
$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);
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});
}
});