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',
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);
});

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