sanj/oxjs
1
0
Fork 0
forked from 0x2620/oxjs
Code Pull requests Activity

allow menu item to trigger native file dialog (see demo, fixes #691)

Browse source
This commit is contained in:
rlx 2012-03-24 10:13:33 +00:00
commit df03bf1841
6 changed files with 246 additions and 97 deletions
Download patch file Download diff file Expand all files Collapse all files

183
demos/fileinput/js/fileinput.js
View file

@ -1,42 +1,155 @@
Ox.load('UI', function() {
//Ox.Theme('modern');
var files,
Ox.FileInput({
maxFiles: 1,
width: 256
})
.css({
position: 'absolute',
left: '16px',
top: '16px'
})
.appendTo(Ox.$body);
$menu = Ox.MainMenu({
menus: [
{
id: 'file', title: 'File', items: [
{id: 'mount', title: 'Mount Volume...', icon: Ox.UI.getImageURL('symbolMount'), checked: true, disabled: true, keyboard: 'control m'},
{id: 'select', title: 'Select Files...', icon: Ox.UI.getImageURL('symbolVolume'), file: {maxFiles: -1, maxSize: -1, width: 96}, keyboard: 'control f'},
{id: 'unmount', title: 'Unmount Volume', icon: Ox.UI.getImageURL('symbolUnmount'), keyboard: 'control u'}
]
}
]
})
.bindEvent({
click: function(data) {
if (data.id == 'select') {
files = data.files;
openDialog();
}
}
}),
Ox.FileButton({
title: 'Select Files...',
width: 256
})
.bindEvent({
click: function(data) {
this.options({disabled: true});
$main = Ox.Element()
.append(
Ox.Label({
textAlign: 'center',
title: 'File Button',
width: 128
})
.css({
position: 'absolute',
left: '16px',
top: '16px'
})
)
.append(
Ox.FileButton({
maxFiles: 1,
title: 'Select File...',
width: 128
})
.css({
position: 'absolute',
left: '160px',
top: '16px'
})
)
.append(
Ox.Label({
textAlign: 'center',
title: 'File Input',
width: 128
})
.css({
position: 'absolute',
left: '16px',
top: '48px'
})
)
.append(
Ox.FileInput({
value: data.files,
width: 256
})
.css({
position: 'absolute',
left: '16px',
top: '80px'
})
.appendTo(Ox.$body);
}
})
.css({
position: 'absolute',
left: '16px',
top: '48px'
})
.appendTo(Ox.$body);
maxFiles: 1,
width: 256
})
.css({
position: 'absolute',
left: '160px',
top: '48px'
})
)
.append(
Ox.FileInput({
width: 256
})
.css({
position: 'absolute',
left: '160px',
top: '80px'
})
),
$panel = Ox.SplitPanel({
elements: [
{
element: $menu,
size: 20
},
{
element: $main
}
],
orientation: 'vertical'
})
.appendTo(Ox.$body);
function openDialog() {
var $content,
$dialog = Ox.Dialog({
buttons: [
Ox.Button({
id: 'cancel',
title: 'Cancel'
})
.bindEvent({
click: function() {
$dialog.close();
}
}),
Ox.Button({
id: 'upload',
title: 'Upload'
})
.bindEvent({
click: function() {
$dialog.close();
}
})
],
content: $content = Ox.Element()
.css(getContentCSS())
.append(
Ox.FileInput({
value: files,
width: 256
})
.css({
position: 'absolute',
left: '16px',
top: '16px',
marginBottom: '16px'
})
.bindEvent({
change: function(data) {
files = data.value;
$content.css(getContentCSS())
}
})
),
title: 'Files',
width: 288 + Ox.UI.SCROLLBAR_SIZE,
height: 129
})
.open();
}
function getContentCSS() {
return {height: 49 + files.length * 16 + 'px'}
}
});