0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki 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
parent 1c3e257bc8
commit df03bf1841
6 changed files with 246 additions and 97 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

151
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
$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();
}
}
}),
$main = Ox.Element()
.append(
Ox.Label({
textAlign: 'center',
title: 'File Button',
width: 128
})
.css({
position: 'absolute',
left: '16px',
top: '16px'
})
.appendTo(Ox.$body);
)
.append(
Ox.FileButton({
title: 'Select Files...',
width: 256
})
.bindEvent({
click: function(data) {
this.options({disabled: true});
Ox.FileInput({
value: data.files,
width: 256
maxFiles: 1,
title: 'Select File...',
width: 128
})
.css({
position: 'absolute',
left: '16px',
top: '80px'
left: '160px',
top: '16px'
})
.appendTo(Ox.$body);
}
)
.append(
Ox.Label({
textAlign: 'center',
title: 'File Input',
width: 128
})
.css({
position: 'absolute',
left: '16px',
top: '48px'
})
)
.append(
Ox.FileInput({
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'}
}
});

12
source/Ox.UI/css/Ox.UI.css
View file

@ -733,6 +733,18 @@ input.OxCheckbox {
}
/*
--------------------------------------------------------------------------------
OxFileButton
--------------------------------------------------------------------------------
*/
.OxMenu .OxFileButton > .OxButton {
height: 16px;
margin: -1px 0 0 -6px;
border-width: 0;
background: transparent;
text-align: left;
}
/*
--------------------------------------------------------------------------------
OxFileInput
--------------------------------------------------------------------------------
*/

48
source/Ox.UI/js/Form/Ox.FileButton.js
View file

@ -32,26 +32,7 @@ Ox.FileButton = function(options, self) {
})
.appendTo(that);
self.$input = $('<input>')
.attr(
Ox.extend({
title: self.multiple ? 'Add Files' : 'Select File',
type: 'file'
}, self.multiple ? {
multiple: true
} : {})
)
.css({
float: 'left',
width: self.options.width + 'px',
height: '16px',
marginLeft: -self.options.width + 'px',
opacity: 0
})
.bind({
change: selectFiles
})
.appendTo(that);
self.$input = renderInput();
self.options.disabled && self.$input.hide();
function selectFiles(e) {
@ -71,7 +52,7 @@ Ox.FileButton = function(options, self) {
}).forEach(function(file) {
if ((
self.options.maxFiles == -1
|| self.options.value.length < self.options.maxFiles
|| self.files.length < self.options.maxFiles
) && (
self.options.maxSize == -1
|| self.size + file.size < self.options.maxSize
@ -80,11 +61,36 @@ Ox.FileButton = function(options, self) {
self.size += file.size;
}
});
self.$input = renderInput();
if (self.files.length) {
that.triggerEvent('click', {files: self.files});
}
}
function renderInput() {
self.$input && self.$input.remove();
return $('<input>')
.attr(
Ox.extend({
title: self.multiple ? 'Add Files' : 'Select File',
type: 'file'
}, self.multiple ? {
multiple: true
} : {})
)
.css({
float: 'left',
width: self.options.width + 'px',
height: '16px',
marginLeft: -self.options.width + 'px',
opacity: 0
})
.bind({
change: selectFiles
})
.appendTo(that);
}
self.setOption = function(key, value) {
if (key == 'disabled') {
self.$button.options({disabled: value});

59
source/Ox.UI/js/Form/Ox.FileInput.js
View file

@ -65,29 +65,7 @@ Ox.FileInput = function(options, self) {
})
.appendTo(self.$bar);
self.$input = Ox.Element({
element: '<input>'
//tooltip: self.multiple ? 'Add Files' : 'Select File'
})
.attr(
Ox.extend({
title: self.multiple ? 'Add Files' : 'Select File',
type: 'file'
}, self.multiple ? {
multiple: true
} : {})
)
.css({
float: 'left',
width: '16px',
height: '14px',
margin: '-1px -7px 0 -16px',
opacity: 0
})
.bind({
change: addFiles
})
.appendTo(self.$bar);
self.$input = renderInput();
if (self.multiple) {
self.$files = $('<div>')
@ -128,11 +106,6 @@ Ox.FileInput = function(options, self) {
click: function() {
self.$list.options({selected: [value]});
removeFiles([value]);
/*
setTimeout(function() {
self.$list.options({selected: []});
}, 25);
*/
}
});
},
@ -174,6 +147,7 @@ Ox.FileInput = function(options, self) {
// try to add small files first
return a.size - b.size;
}).forEach(function(file) {
Ox.print('::', file, exists(file), self.options.value)
if (!exists(file) && (
self.options.maxFiles == -1
|| self.options.value.length < self.options.maxFiles
@ -200,9 +174,10 @@ Ox.FileInput = function(options, self) {
) {
self.$button.options({disabled: true});
}
self.$input = renderInput();
} else {
self.$button.options({title: 'close'}).attr({title: 'Clear'});
self.$input.hide();
self.$input.remove();
}
that.triggerEvent('change', {value: self.options.value});
}
@ -213,7 +188,7 @@ Ox.FileInput = function(options, self) {
self.$title.html(getTitleText());
self.$size.html(getSizeText());
self.$button.options({title: 'add'}).attr({title: ''});
self.$input.show();
self.$input = renderInput();
that.triggerEvent('change', {value: self.options.value});
}
@ -277,5 +252,29 @@ Ox.FileInput = function(options, self) {
that.triggerEvent('change', {value: self.options.value});
}
function renderInput() {
self.$input && self.$input.remove();
return $('<input>')
.attr(
Ox.extend({
title: self.multiple ? 'Add Files' : 'Select File',
type: 'file'
}, self.multiple ? {
multiple: true
} : {})
)
.css({
float: 'left',
width: '16px',
height: '14px',
margin: '-1px -7px 0 -16px',
opacity: 0
})
.bind({
change: addFiles
})
.appendTo(self.$bar);
}
return that;
};

16
source/Ox.UI/js/Menu/Ox.Menu.js
View file

@ -116,7 +116,7 @@ Ox.Menu = function(options, self) {
}
}
function clickItem(position) {
function clickItem(position, files) {
var item = that.items[position],
group = item.options('group'),
menu = self.options.mainmenu || self.options.parent || that,
@ -156,10 +156,10 @@ Ox.Menu = function(options, self) {
});
}
} else {
menu.triggerEvent('click', {
menu.triggerEvent('click', Ox.extend({
id: item.options('id'),
title: Ox.stripTags(item.options('title')[0])
});
}, files ? {files: files} : {}));
}
if (item.options('title').length == 2) {
item.toggleTitle();
@ -236,10 +236,14 @@ Ox.Menu = function(options, self) {
var item,
position,
$target = $(event.target),
$parent = $target.parent();
$parent = $target.parent(),
$grandparent = $parent.parent();
if ($parent.is('.OxCell')) {
$target = $parent;
$parent = $target.parent();
} else if ($grandparent.is('.OxCell')) {
$target = $grandparent;
$parent = $target.parent();
}
if ($target.is('.OxCell')) {
position = $parent.data('position');
@ -617,6 +621,10 @@ Ox.Menu = function(options, self) {
}
};
that.clickItem = function(position, files) {
clickItem(position, files);
};
/*@
getItem <f>
@*/

19
source/Ox.UI/js/Menu/Ox.MenuItem.js
View file

@ -28,7 +28,6 @@ Ox.MenuItem = function(options, self) {
bind: [], // fixme: what's this?
checked: null,
disabled: false,
file: false,
group: '',
icon: '',
id: '',
@ -38,6 +37,7 @@ Ox.MenuItem = function(options, self) {
menu: null, // fixme: is passing the menu to 100s of menu items really memory-neutral?
position: 0,
title: [],
type: ''
})
.options(Ox.extend(Ox.clone(options), {
keyboard: parseKeyboard(options.keyboard || self.defaults.keyboard),
@ -55,7 +55,6 @@ Ox.MenuItem = function(options, self) {
self.options.checked = false;
}
// construct
that.append(
that.$status = $('<td>')
.addClass('OxCell OxStatus')
@ -79,13 +78,25 @@ Ox.MenuItem = function(options, self) {
: {}
)
.html(
self.options.file
?
Ox.FileButton(Ox.extend(Ox.clone(self.options.file), {
title: self.options.title[0],
width: self.options.file.width
})).bindEvent({
click: function(data) {
self.options.menu.clickItem(self.options.position, data.files);
}
})
: (
Ox.isString(self.options.title[0])
? self.options.title[0]
: $('<div>').html(self.options.title[0]).html()
)
)
)
.append(
$('<td>')
that.$modifiers = $('<td>')
.addClass('OxCell OxModifiers')
.html(
self.options.keyboard.modifiers.map(function(modifier) {
@ -94,7 +105,7 @@ Ox.MenuItem = function(options, self) {
)
)
.append(
$('<td>')
that.$key = $('<td>')
.addClass(
'OxCell Ox' + (self.options.items.length ? 'Submenu' : 'Key')
)