add Ox.FileButton

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