forked from 0x2620/oxjs
allow menu item to trigger native file dialog (see demo, fixes #691)
This commit is contained in:
rlx
parent
1c3e257bc8
commit
df03bf1841
6 changed files with 246 additions and 97 deletions
|
|
@ -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});
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
@*/
|
||||
|
|
|
|||
|
|
@ -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(
|
||||
Ox.isString(self.options.title[0])
|
||||
? self.options.title[0]
|
||||
: $('<div>').html(self.options.title[0]).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')
|
||||
)
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue