审查视图

WebRoot/bower_components/jquery-ui-bootstrap/third-party/jQuery-UI-FileInput/js/fileinput.jquery.js 5.1 KB
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139
/**
 * --------------------------------------------------------------------
 * jQuery customfileinput plugin
 * Author: Scott Jehl, scott@filamentgroup.com
 * Copyright (c) 2009 Filament Group. Updated 2012.
 * licensed under MIT (filamentgroup.com/examples/mit-license.txt)
 * --------------------------------------------------------------------
 */

/**
 * All credits go to the Author of this file, some additional customization was
 * done for theme compat. purposes.
 *
 * Additional bugfixes/changes by smurfy
 */
!function ($) {

    "use strict"; // jshint ;_;

    /* FILEINPUT CLASS DEFINITION
     * ====================== */

    var CustomFileInput = function (content, options) {
        var self = this;
        this.$element = $(content);

        this.options = $.extend({
            classes	: (this.$element.attr('class') ? this.$element.attr('class') : ''),
        }, options);

        //create custom control container
        this.$upload = $('<div class="input-' + (('right' === this.options.button_position)?'append':'prepend') + ' customfile">');
        //create custom control feedback
        this.$uploadFeedback = $('<input type="text" readonly="readonly" class="customfile-feedback ' + this.options.classes + '" aria-hidden="true" value="' + this.options.feedback_text + '"/>').appendTo(this.$upload);
        //create custom control button
        this.$uploadButton = $('<span class="add-on customfile-button" aria-hidden="true">' + this.options.button_text + '</span>').css({ float : this.options.button_position });

        this.$element
            .addClass('customfile-input') //add class for CSS
            .on('focus', $.proxy(this.onFocus, this))
            .on('blur', $.proxy(this.onBlur, this))
            .on('disable', $.proxy(this.onDisable, this))
            .on('enable', $.proxy(this.onEnable, this))
            .on('checkChange', $.proxy(this.onCheckChange, this))
            .on('change', $.proxy(this.onChange, this))
            .on('click', $.proxy(this.onClick, this));

        if ('right' === this.options.button_position) {
            this.$uploadButton.insertAfter(this.$uploadFeedback);
        } else {
            this.$uploadButton.insertBefore(this.$uploadFeedback);
        }

        //match disabled state
        if (this.$element.is('[disabled]')) {
            this.$element.trigger('disable');
        } else {
            this.$upload.on('click', function () { self.$element.trigger('click'); });
        }

        //insert original input file in dom, css if hide it outside of screen
        this.$upload.insertAfter(this.$element);
        this.$element.insertAfter(this.$upload);
    };

    CustomFileInput.prototype = {
        constructor: CustomFileInput,

        onClick : function() {
            var self = this;
            this.$element.data('val', this.$element.val());
            setTimeout(function(){
                self.$element.trigger('checkChange');
            } ,100);
        },

        onCheckChange: function() {
            if(this.$element.val() && this.$element.val() != this.$element.data('val')){
                this.$element.trigger('change');
            }
        },

        onEnable: function() {
            this.$element.removeAttr('disabled');
            this.$upload.removeClass('customfile-disabled');
        },

        onDisable: function() {
            this.$element.attr('disabled',true);
            this.$upload.addClass('customfile-disabled');
        },

        onFocus: function() {
            this.$upload.addClass('customfile-focus');
            this.$element.data('val', this.$element.val());
        },

        onBlur: function() {
            this.$upload.removeClass('customfile-focus');
            this.$element.trigger('checkChange');
        },

        onChange : function() {
            //get file name
            var fileName = this.$element.val().split(/\\/).pop();
            if (!fileName) {
                this.$uploadFeedback
                    .val(this.options.feedback_text) //set feedback text to filename
                    .removeClass('customfile-feedback-populated'); //add class to show populated state
                this.$uploadButton.text(this.options.button_text);
            } else {
                this.$uploadFeedback
                    .val(fileName) //set feedback text to filename
                    .addClass('customfile-feedback-populated'); //add class to show populated state
                this.$uploadButton.text(this.options.button_change_text);
            }
        }
    };

    $.fn.customFileInput = function(option){
        return this.each(function () {
            var $this = $(this);
            var data = $this.data('customFileInput')
            var options = $.extend({}, $.fn.customFileInput.defaults, $this.data(), typeof option == 'object' && option);
            if (!data) {
                $this.data('customFileInput', (data = new CustomFileInput(this, options)));
            }
        })
    };

    $.fn.customFileInput.defaults = {
        button_position 	: 'right',
        feedback_text		: 'No file selected...',
        button_text			: 'Browse',
        button_change_text	: 'Change'
    }

}(window.jQuery);