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

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;
};