oxjs/source/Ox.UI/js/Form/Ox.FileButton.js

'use strict';

/*@
Ox.FileButton <function> File Button
    (options[, self]) -> <o> File Button
    options <o> Options
    self <o> Shared private variable
@*/
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 = renderInput();
    self.options.disabled && self.$input.hide();

    function selectFiles(e) {
        var filelist = e.target.files,
            files = [];
        self.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.files.length < self.options.maxFiles
            ) && (
                self.options.maxSize == -1
                || self.size + file.size < self.options.maxSize
            )) {
                self.files.push(file);
                self.size += file.size;
            }
        });
        self.$input = renderInput();
        if (self.files.length) {
            that.triggerEvent('click', {files: self.files});
        }
    }

    function renderInput() {
        self.$input && self.$input.remove();
        return $('<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.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});
        }
    }

    /*@
    blurButton <f> blurButton
    @*/
    that.blurButton = function() {
        self.$input.blur();
    }

    /*@
    focusButton <f> focusButton
    @*/
    that.focusButton = function() {
        self.$input.focus();
    };

    return that;

}