diff --git a/demos/fileinput/js/fileinput.js b/demos/fileinput/js/fileinput.js index 64e6eced..1e184de4 100644 --- a/demos/fileinput/js/fileinput.js +++ b/demos/fileinput/js/fileinput.js @@ -11,16 +11,32 @@ Ox.load('UI', function() { left: '16px', top: '16px' }) - .appendTo(Ox.UI.$body); + .appendTo(Ox.$body); - Ox.FileInput({ + Ox.FileButton({ + title: 'Select Files...', width: 256 }) + .bindEvent({ + click: function(data) { + this.options({disabled: true}); + 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.UI.$body); + .appendTo(Ox.$body); }); \ No newline at end of file diff --git a/source/Ox.UI/js/Form/Ox.FileButton.js b/source/Ox.UI/js/Form/Ox.FileButton.js new file mode 100644 index 00000000..3307d135 --- /dev/null +++ b/source/Ox.UI/js/Form/Ox.FileButton.js @@ -0,0 +1,99 @@ +'use strict'; + +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 = $('') + .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.options.disabled && self.$input.hide(); + + function selectFiles(e) { + var filelist = e.target.files, + 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.options.value.length < self.options.maxFiles + ) && ( + self.options.maxSize == -1 + || self.size + file.size < self.options.maxSize + )) { + self.files.push(file); + self.size += file.size; + } + }); + if (self.files.length) { + that.triggerEvent('click', {files: self.files}); + } + } + + 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}); + } + } + + return that; + +} \ No newline at end of file diff --git a/source/Ox.UI/js/Form/Ox.FileInput.js b/source/Ox.UI/js/Form/Ox.FileInput.js index 7936fed4..6500291f 100644 --- a/source/Ox.UI/js/Form/Ox.FileInput.js +++ b/source/Ox.UI/js/Form/Ox.FileInput.js @@ -16,13 +16,20 @@ Ox.FileInput = function(options, self) { .css({width: self.options.width + 'px'}); self.multiple = self.options.maxFiles != 1; - self.size = 0; + self.size = getSize(); self.$bar = Ox.Bar({size: 14}) - .css({width: self.options.width - 2 + 'px'}) + .css( + Ox.extend({ + width: self.options.width - 2 + 'px' + }, self.multiple && self.options.value.length ? { + borderBottomLeftRadius: 0, + borderBottomRightRadius: 0 + } : {}) + ) .appendTo(that); - self.$text = $('