126 lines
3.3 KiB
JavaScript
126 lines
3.3 KiB
JavaScript
'use strict';
|
|
|
|
/*@
|
|
Ox.FileButton <function> File Button
|
|
(options[, self]) -> <o> File Button
|
|
options <o> Options
|
|
self <o> Shared private variable
|
|
@*/
|
|
Ox.FileButton = function(options, self) {
|
|
|
|
self = self || {};
|
|
var that = Ox.Element({}, self)
|
|
.defaults({
|
|
disabled: false,
|
|
maxFiles: -1,
|
|
maxSize: -1,
|
|
style: 'default',
|
|
title: '',
|
|
type: 'text',
|
|
width: 256
|
|
})
|
|
.options(options || {})
|
|
.addClass('OxFileButton')
|
|
.css({width: self.options.width + 'px'});
|
|
|
|
self.files = [];
|
|
self.multiple = self.options.maxFiles != 1;
|
|
|
|
self.$button = Ox.Button({
|
|
disabled: self.options.disabled,
|
|
style: self.options.style,
|
|
title: self.options.title,
|
|
type: self.options.type,
|
|
width: self.options.width
|
|
})
|
|
.css({
|
|
float: 'left'
|
|
})
|
|
.appendTo(that);
|
|
|
|
self.$input = renderInput();
|
|
self.options.disabled && self.$input.hide();
|
|
|
|
function selectFiles(e) {
|
|
var filelist = e.target.files,
|
|
files = [];
|
|
self.files = [];
|
|
Ox.loop(filelist.length, function(i) {
|
|
files.push(filelist.item(i));
|
|
});
|
|
files.sort(self.options.maxSize == -1 ? function(a, b) {
|
|
a = a.name.toLowerCase();
|
|
b = b.name.toLowerCase();
|
|
return a < b ? -1 : a > b ? 1 : 0;
|
|
} : function(a, b) {
|
|
// if there's a max size,
|
|
// try to add small files first
|
|
return a.size - b.size;
|
|
}).forEach(function(file) {
|
|
if ((
|
|
self.options.maxFiles == -1
|
|
|| self.files.length < self.options.maxFiles
|
|
) && (
|
|
self.options.maxSize == -1
|
|
|| self.size + file.size < self.options.maxSize
|
|
)) {
|
|
self.files.push(file);
|
|
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});
|
|
self.$input[value ? 'hide' : 'show']();
|
|
} else if (key == title) {
|
|
self.$button.options({title: value});
|
|
}
|
|
}
|
|
|
|
/*@
|
|
blurButton <f> blurButton
|
|
@*/
|
|
that.blurButton = function() {
|
|
self.$input.blur();
|
|
}
|
|
|
|
/*@
|
|
focusButton <f> focusButton
|
|
@*/
|
|
that.focusButton = function() {
|
|
self.$input.focus();
|
|
};
|
|
|
|
return that;
|
|
|
|
}
|