0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

add Ox.FileButton

Browse source
This commit is contained in:
rlx 2012-03-23 17:57:12 +00:00
parent 162c0f118b
commit 17d92a3ff7
3 changed files with 152 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
demos/fileinput/js/fileinput.js
View file

@ -11,16 +11,32 @@ Ox.load('UI', function() {
left: '16px', left: '16px',
top: '16px' top: '16px'
}) })
.appendTo(Ox.UI.$body); .appendTo(Ox.$body);
Ox.FileInput({ Ox.FileButton({
title: 'Select Files...',
width: 256 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({ .css({
position: 'absolute', position: 'absolute',
left: '16px', left: '16px',
top: '48px' top: '48px'
}) })
.appendTo(Ox.UI.$body); .appendTo(Ox.$body);
}); });

99
source/Ox.UI/js/Form/Ox.FileButton.js Normal file
View file

@ -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 = $('<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;
}

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

@ -16,13 +16,20 @@ Ox.FileInput = function(options, self) {
.css({width: self.options.width + 'px'}); .css({width: self.options.width + 'px'});
self.multiple = self.options.maxFiles != 1; self.multiple = self.options.maxFiles != 1;
self.size = 0; self.size = getSize();
self.$bar = Ox.Bar({size: 14}) 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); .appendTo(that);
self.$text = $('<div>') self.$title = $('<div>')
.css({ .css({
float: 'left', float: 'left',
width: self.options.width - 102 + 'px', width: self.options.width - 102 + 'px',
@ -30,7 +37,7 @@ Ox.FileInput = function(options, self) {
overflow: 'hidden', overflow: 'hidden',
textOverflow: 'ellipsis' textOverflow: 'ellipsis'
}) })
.html(getText()) .html(getTitleText())
.appendTo(self.$bar); .appendTo(self.$bar);
self.$size = $('<div>') self.$size = $('<div>')
@ -41,6 +48,7 @@ Ox.FileInput = function(options, self) {
paddingRight: '16px', paddingRight: '16px',
textAlign: 'right' textAlign: 'right'
}) })
.html(getSizeText())
.appendTo(self.$bar); .appendTo(self.$bar);
self.$button = Ox.Button({ self.$button = Ox.Button({
@ -88,8 +96,8 @@ Ox.FileInput = function(options, self) {
width: self.options.width - 2 + 'px', width: self.options.width - 2 + 'px',
height: getHeight() height: getHeight()
}) })
.hide()
.appendTo(that); .appendTo(that);
self.options.value.length == 0 && self.$files.hide();
self.$list = Ox.TextList({ self.$list = Ox.TextList({
columns: [ columns: [
{ {
@ -134,7 +142,7 @@ Ox.FileInput = function(options, self) {
width: 28 width: 28
} }
], ],
items: [], items: getItems(),
sort: [{key: 'name', operator: '+'}] sort: [{key: 'name', operator: '+'}]
}) })
.css({ .css({
@ -157,11 +165,6 @@ Ox.FileInput = function(options, self) {
Ox.loop(filelist.length, function(i) { Ox.loop(filelist.length, function(i) {
files.push(filelist.item(i)); files.push(filelist.item(i));
}); });
if (self.options.maxSize != -1) {
files.sort(function(a, b) {
return a.size - b.size;
});
}
files.sort(self.options.maxSize == -1 ? function(a, b) { files.sort(self.options.maxSize == -1 ? function(a, b) {
a = a.name.toLowerCase(); a = a.name.toLowerCase();
b = b.name.toLowerCase(); b = b.name.toLowerCase();
@ -174,18 +177,16 @@ Ox.FileInput = function(options, self) {
if (!exists(file) && ( if (!exists(file) && (
self.options.maxFiles == -1 self.options.maxFiles == -1
|| self.options.value.length < self.options.maxFiles || self.options.value.length < self.options.maxFiles
) && (
self.options.maxSize == -1
|| self.size + file.size < self.options.maxSize
)) { )) {
if ( self.options.value.push(file);
self.options.maxSize == -1 self.size += file.size;
|| self.size + file.size < self.options.maxSize
) {
self.options.value.push(file);
self.size += file.size;
}
} }
}); });
self.$text.html(getText()); self.$title.html(getTitleText());
self.$size.html(getSize()); self.$size.html(getSizeText());
if (self.multiple) { if (self.multiple) {
self.$bar.css({ self.$bar.css({
borderBottomLeftRadius: 0, borderBottomLeftRadius: 0,
@ -209,8 +210,8 @@ Ox.FileInput = function(options, self) {
function clearFile() { function clearFile() {
self.options.value = []; self.options.value = [];
self.size = 0; self.size = 0;
self.$text.html(getText()); self.$title.html(getTitleText());
self.$size.html(getSize()); self.$size.html(getSizeText());
self.$button.options({title: 'add'}).attr({title: ''}); self.$button.options({title: 'add'}).attr({title: ''});
self.$input.show(); self.$input.show();
that.triggerEvent('change', {value: self.options.value}); that.triggerEvent('change', {value: self.options.value});
@ -239,15 +240,21 @@ Ox.FileInput = function(options, self) {
} }
function getSize() { function getSize() {
return self.options.value.reduce(function(prev, curr) {
return prev + curr.size;
}, 0);
}
function getSizeText() {
return self.size ? Ox.formatValue(self.size, 'B') : ''; return self.size ? Ox.formatValue(self.size, 'B') : '';
} }
function getText() { function getTitleText() {
var length = self.options.value.length var length = self.options.value.length
return length == 0 return length == 0
? 'No file' + (self.multiple ? 's' : '') + ' selected' ? 'No file' + (self.multiple ? 's' : '') + ' selected'
: self.multiple : self.multiple
? length + ' file' + (length == 1 ? '' : 's') + ' selected' ? length + ' file' + (length == 1 ? '' : 's')
: self.options.value[0].name; : self.options.value[0].name;
} }
@ -255,9 +262,7 @@ Ox.FileInput = function(options, self) {
self.options.value = self.options.value.filter(function(v, i) { self.options.value = self.options.value.filter(function(v, i) {
return ids.indexOf(i) == -1; return ids.indexOf(i) == -1;
}); });
self.size = self.options.value.reduce(function(prev, curr) { self.size = getSize();
return prev + curr.size;
}, 0);
if (self.options.value.length == 0) { if (self.options.value.length == 0) {
self.$bar.css({ self.$bar.css({
borderBottomLeftRadius: '8px', borderBottomLeftRadius: '8px',
@ -265,8 +270,8 @@ Ox.FileInput = function(options, self) {
}); });
self.$files.hide(); self.$files.hide();
} }
self.$text.html(getText()); self.$title.html(getTitleText());
self.$size.html(getSize()); self.$size.html(getSizeText());
self.$list.options({items: getItems(), selected: []}); self.$list.options({items: getItems(), selected: []});
self.$files.css({height: getHeight()}); self.$files.css({height: getHeight()});
that.triggerEvent('change', {value: self.options.value}); that.triggerEvent('change', {value: self.options.value});