add Ox.FileButton

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

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

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 = $('<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
-            )) {
+            ) && (
-                if (
                 self.options.maxSize == -1
                 || 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) {
             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.$title.html(getTitleText());
-        self.$size.html(getSize());
+        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) {
+        self.size = getSize();
-            return prev + curr.size;
-        }, 0);
         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.$title.html(getTitleText());
-        self.$size.html(getSize());
+        self.$size.html(getSizeText());
         self.$list.options({items: getItems(), selected: []});
         self.$files.css({height: getHeight()});
         that.triggerEvent('change', {value: self.options.value});