138 lines
4.3 KiB
JavaScript
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});
|
|
}
|
|
|
|
});
|