PHP Classes
elePHPant
Icontem

File: js/input-file/jquery-filestyle.js

Recommend this page to a friend!
  Classes of Saro Carvello  >  PHP Web MVC Framework  >  js/input-file/jquery-filestyle.js  >  Download  
File: js/input-file/jquery-filestyle.js
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: PHP Web MVC Framework
MVC framework providing autogenerated MySQL models
Author: By
Last change:
Date: 9 months ago
Size: 9,385 bytes
 

Contents

Class file image Download
/*
 * jquery-filestyle
 * doc: http://markusslima.github.io/jquery-filestyle/
 * github: https://github.com/markusslima/jquery-filestyle
 *
 * Copyright (c) 2015 Markus Vinicius da Silva Lima
 * Version 1.5.1
 * Licensed under the MIT license.
 */
(function ($) {
    "use strict";
    
    var nextId = 0;
    
    var JFilestyle = function (element, options) {
        this.options = options;
        this.$elementjFilestyle = [];
        this.$element = $(element);
    };

    JFilestyle.prototype = {
        clear: function () {
            this.$element.val('');
            this.$elementjFilestyle.find(':text').val('');
        },

        destroy: function () {
            this.$element
                .removeAttr('style')
                .removeData('jfilestyle')
                .val('');
            this.$elementjFilestyle.remove();
        },
        
        disabled : function(value) {
			if (value === true) {
				if (!this.options.disabled) {
					this.$element.attr('disabled', 'true');
					this.$elementjFilestyle.find('label').attr('disabled', 'true');
					this.options.disabled = true;
				}
			} else if (value === false) {
				if (this.options.disabled) {
					this.$element.removeAttr('disabled');
					this.$elementjFilestyle.find('label').removeAttr('disabled');
					this.options.disabled = false;
				}
			} else {
				return this.options.disabled;
			}
		},
		
		buttonBefore : function(value) {
			if (value === true) {
				if (!this.options.buttonBefore) {
					this.options.buttonBefore = true;
					if (this.options.input) {
						this.$elementjFilestyle.remove();
						this.constructor();
						this.pushNameFiles();
					}
				}
			} else if (value === false) {
				if (this.options.buttonBefore) {
					this.options.buttonBefore = false;
					if (this.options.input) {
						this.$elementjFilestyle.remove();
						this.constructor();
						this.pushNameFiles();
					}
				}
			} else {
				return this.options.buttonBefore;
			}
		},

        input: function (value) {
            if (value === true) {
                if (!this.options.input) {
                    this.options.input = true;
                    this.$elementjFilestyle.prepend(this.htmlInput());

                    this.$elementjFilestyle.find('.count-jfilestyle').remove();

					this.pushNameFiles();
                }
            } else if (value === false) {
                if (this.options.input) {
                    this.options.input = false;
                    this.$elementjFilestyle.find(':text').remove();
                    var files = this.pushNameFiles();
					if (files.length > 0) {
						this.$elementjFilestyle.find('label').append(' <span class="count-jfilestyle">' + files.length + '</span>');
					}
                }
            } else {
                return this.options.input;
            }
        },

        buttonText: function (value) {
            if (value !== undefined) {
                this.options.buttonText = value;
                this.$elementjFilestyle.find('label span').html(this.options.buttonText);
            } else {
                return this.options.buttonText;
            }
        },
        
        inputSize: function (value) {
            if (value !== undefined) {
                this.options.inputSize = value;
                this.$elementjFilestyle.find(':text').css('width', this.options.inputSize);
            } else {
                return this.options.inputSize;
            }
        },
        
		placeholder : function(value) {
			if (value !== undefined) {
				this.options.placeholder = value;
				this.$elementjFilestyle.find(':text').attr('placeholder', value);
			} else {
				return this.options.placeholder;
			}
		},

        htmlInput: function () {
            if (this.options.input) {
                return '<input type="text" style="width:'+this.options.inputSize+'" placeholder="'+ this.options.placeholder +'" disabled> ';
            } else {
                return '';
            }
        },
        
        // puts the name of the input files
        // return files
		pushNameFiles : function() {
			var content = '', files = [];
			if (this.$element[0].files === undefined) {
				files[0] = {
					'name' : this.$element.value
				};
			} else {
				files = this.$element[0].files;
			}

			for (var i = 0; i < files.length; i++) {
				content += files[i].name.split("\\").pop() + ', ';
			}

			if (content !== '') {
				this.$elementjFilestyle.find(':text').val(content.replace(/\, $/g, ''));
			} else {
				this.$elementjFilestyle.find(':text').val('');
			}
			
			return files;
		},

        constructor: function () {
            var _self = this,
                html = '',
                id = _self.$element.attr('id'),
                $label,
                files = [];

            if (id === '' || !id) {
                id = 'jfilestyle-' + nextId;
                _self.$element.attr({'id': id});
                nextId++;
            }
            
            html = '<span class="focus-jfilestyle">'+
                     '<label for="'+id+'" ' + (_self.options.disabled ? 'disabled="true"' : '') + '>'+
                       '<span>'+_self.options.buttonText+'</span>'+
                     '</label>'+
                   '</span>';
            
            if (_self.options.buttonBefore === true) {
	            html = html + _self.htmlInput();
            } else {
	            html = _self.htmlInput() + html;
            }

            _self.$elementjFilestyle = $('<div class="jfilestyle ' + (_self.options.input?'jfilestyle-corner':'') + ' ' + (this.options.buttonBefore ? ' jfilestyle-buttonbefore' : '') + '">'+html+'</div>');
            _self.$elementjFilestyle.find('.focus-jfilestyle')
                .attr('tabindex', "0")
                .keypress(function (e) {
                    if (e.keyCode === 13 || e.charCode === 32) {
                        _self.$elementjFilestyle.find('label').click();
                        return false;
                    }
                });

            // hidding input file and add filestyle
            _self.$element
                .css({'position': 'absolute', 'clip': 'rect(0px 0px 0px 0px)'})
                .attr('tabindex', "-1")
                .after(_self.$elementjFilestyle);
			
			if (_self.options.disabled) {
				_self.$element.attr('disabled', 'true');
			}
			
            // Getting input file value
            _self.$element.change(function () {
            	var files = _self.pushNameFiles();
            	
            	if (_self.options.input == false) {
					if (_self.$elementjFilestyle.find('.count-jfilestyle').length == 0) {
						_self.$elementjFilestyle.find('label').append(' <span class="count-jfilestyle">' + files.length + '</span>');
					} else if (files.length == 0) {
						_self.$elementjFilestyle.find('.count-jfilestyle').remove();
					} else {
						_self.$elementjFilestyle.find('.count-jfilestyle').html(files.length);
					}
				} else {
					_self.$elementjFilestyle.find('.count-jfilestyle').remove();
				}
            });

            // Check if browser is Firefox
            if (window.navigator.userAgent.search(/firefox/i) > -1) {
                // Simulating choose file for firefox
                this.$elementjFilestyle.find('label').click(function () {
                    _self.$element.click();
                    return false;
                });
            }
        }
    };

    var old = $.fn.jfilestyle;

    $.fn.jfilestyle = function (option, value) {
        var get = '',
            element = this.each(function () {
                if ($(this).attr('type') === 'file') {
                    var $this = $(this),
                        data = $this.data('jfilestyle'),
                        options = $.extend({}, $.fn.jfilestyle.defaults, option, typeof option === 'object' && option);

                    if (!data) {
                        $this.data('jfilestyle', (data = new JFilestyle(this, options)));
                        data.constructor();
                    }

                    if (typeof option === 'string') {
                        get = data[option](value);
                    }
                }
            });

        if (typeof get !== undefined) {
            return get;
        } else {
            return element;
        }
    };

    $.fn.jfilestyle.defaults = {
        'buttonText': 'Choose file',
        'input': true,
        'disabled': false,
        'buttonBefore': false,
        'inputSize': '200px',
        'placeholder': ''
    };

    $.fn.jfilestyle.noConflict = function () {
        $.fn.jfilestyle = old;
        return this;
    };

    $(function() {
        // Data attributes register
        $('.jfilestyle').each(function () {
            var $this = $(this),
                options = {
                    'buttonText': $this.attr('data-buttonText'),
                    'input': $this.attr('data-input') === 'false' ? false : true,
                    'disabled': $this.attr('data-disabled') === 'true' ? true : false,
                    'buttonBefore': $this.attr('data-buttonBefore') === 'true' ? true : false,
                    'inputSize': $this.attr('data-inputSize'),
                    'placeholder': $this.attr('data-placeholder')
                };
    
            $this.jfilestyle(options);
        });
    });
})(window.jQuery);