Merge pull request #352 from kuoruan/filestyle

Add file input styles

index.html

@@ -26,6 +26,7 @@
   <script src="js/libs/angular.min.js"></script>
 
   <script src="js/libs/angularui-bootstrap-tpls.min.js"></script>
+  <script src="js/libs/bootstrap-filestyle.js"></script>
 
   <script src="js/libs/jquery.flot.min.js"></script>
   <script src="js/libs/jquery.flot.time.min.js"></script>
@@ -907,7 +908,7 @@
       <div class="form-horizontal form-group">
         <label class="control-label" style="text-align: left;"><b>{{ 'Select a Torrent' | translate }}:</b></label>
         <div class="controls">
-          <input type="file" class="input-xlarge" fselect="getTorrents.files" multiple/>
+          <input type="file" fselect="getTorrents.files" multiple />
         </div>
       </div>
       <br />
@@ -976,7 +977,7 @@
       <div class="form-horizontal form-group">
         <label class="control-label" style="text-align: left;"><b>{{ 'Select a Metalink' | translate }}:</b></label>
         <div class="controls">
-          <input type="file" class="input-xlarge" fselect="getMetalinks.files" multiple/>
+          <input type="file" fselect="getMetalinks.files" multiple />
         </div>
       </div>
       <br />

js/directives/fselect.js

@@ -7,6 +7,9 @@ angular
     var setfiles = parse(attrs.fselect || attrs.files).assign;
     elem.bind('change', function() {
       setfiles(scope, elem[0].files);
+    }).filestyle({
+        placeholder : 'No file selected',
+        iconName : 'fa fa-folder-open',
     });
   };
 }]);

js/libs/bootstrap-filestyle.js

@@ -0,0 +1,357 @@
+/*
+ * bootstrap-filestyle
+ * doc: http://markusslima.github.io/bootstrap-filestyle/
+ * github: https://github.com/markusslima/bootstrap-filestyle
+ *
+ * Copyright (c) 2014 Markus Vinicius da Silva Lima
+ * Version 1.2.1
+ * Licensed under the MIT license.
+ */
+(function($) {"use strict";
+
+    var nextId = 0;
+
+	var Filestyle = function(element, options) {
+		this.options = options;
+		this.$elementFilestyle = [];
+		this.$element = $(element);
+	};
+
+	Filestyle.prototype = {
+		clear : function() {
+			this.$element.val('');
+			this.$elementFilestyle.find(':text').val('');
+			this.$elementFilestyle.find('.badge').remove();
+		},
+
+		destroy : function() {
+			this.$element.removeAttr('style').removeData('filestyle');
+			this.$elementFilestyle.remove();
+		},
+
+		disabled : function(value) {
+			if (value === true) {
+				if (!this.options.disabled) {
+					this.$element.attr('disabled', 'true');
+					this.$elementFilestyle.find('label').attr('disabled', 'true');
+					this.options.disabled = true;
+				}
+			} else if (value === false) {
+				if (this.options.disabled) {
+					this.$element.removeAttr('disabled');
+					this.$elementFilestyle.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.$elementFilestyle.remove();
+						this.constructor();
+						this.pushNameFiles();
+					}
+				}
+			} else if (value === false) {
+				if (this.options.buttonBefore) {
+					this.options.buttonBefore = false;
+					if (this.options.input) {
+						this.$elementFilestyle.remove();
+						this.constructor();
+						this.pushNameFiles();
+					}
+				}
+			} else {
+				return this.options.buttonBefore;
+			}
+		},
+
+		icon : function(value) {
+			if (value === true) {
+				if (!this.options.icon) {
+					this.options.icon = true;
+					this.$elementFilestyle.find('label').prepend(this.htmlIcon());
+				}
+			} else if (value === false) {
+				if (this.options.icon) {
+					this.options.icon = false;
+					this.$elementFilestyle.find('.icon-span-filestyle').remove();
+				}
+			} else {
+				return this.options.icon;
+			}
+		},
+
+		input : function(value) {
+			if (value === true) {
+				if (!this.options.input) {
+					this.options.input = true;
+
+					if (this.options.buttonBefore) {
+						this.$elementFilestyle.append(this.htmlInput());
+					} else {
+						this.$elementFilestyle.prepend(this.htmlInput());
+					}
+
+					this.$elementFilestyle.find('.badge').remove();
+
+					this.pushNameFiles();
+
+					this.$elementFilestyle.find('.group-span-filestyle').addClass('input-group-btn');
+				}
+			} else if (value === false) {
+				if (this.options.input) {
+					this.options.input = false;
+					this.$elementFilestyle.find(':text').remove();
+					var files = this.pushNameFiles();
+					if (files.length > 0 && this.options.badge) {
+						this.$elementFilestyle.find('label').append(' <span class="badge">' + files.length + '</span>');
+					}
+					this.$elementFilestyle.find('.group-span-filestyle').removeClass('input-group-btn');
+				}
+			} else {
+				return this.options.input;
+			}
+		},
+
+		size : function(value) {
+			if (value !== undefined) {
+				var btn = this.$elementFilestyle.find('label'), input = this.$elementFilestyle.find('input');
+
+				btn.removeClass('btn-lg btn-sm');
+				input.removeClass('input-lg input-sm');
+				if (value != 'nr') {
+					btn.addClass('btn-' + value);
+					input.addClass('input-' + value);
+				}
+			} else {
+				return this.options.size;
+			}
+		},
+
+		placeholder : function(value) {
+			if (value !== undefined) {
+				this.options.placeholder = value;
+				this.$elementFilestyle.find('input').attr('placeholder', value);
+			} else {
+				return this.options.placeholder;
+			}
+		},
+
+		buttonText : function(value) {
+			if (value !== undefined) {
+				this.options.buttonText = value;
+				this.$elementFilestyle.find('label .buttonText').html(this.options.buttonText);
+			} else {
+				return this.options.buttonText;
+			}
+		},
+
+		buttonName : function(value) {
+			if (value !== undefined) {
+				this.options.buttonName = value;
+				this.$elementFilestyle.find('label').attr({
+					'class' : 'btn ' + this.options.buttonName
+				});
+			} else {
+				return this.options.buttonName;
+			}
+		},
+
+		iconName : function(value) {
+			if (value !== undefined) {
+				this.$elementFilestyle.find('.icon-span-filestyle').attr({
+					'class' : 'icon-span-filestyle ' + this.options.iconName
+				});
+			} else {
+				return this.options.iconName;
+			}
+		},
+
+		htmlIcon : function() {
+			if (this.options.icon) {
+				return '<span class="icon-span-filestyle ' + this.options.iconName + '"></span> ';
+			} else {
+				return '';
+			}
+		},
+
+		htmlInput : function() {
+			if (this.options.input) {
+				return '<input type="text" class="form-control ' + (this.options.size == 'nr' ? '' : 'input-' + this.options.size) + '" 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[0] && this.$element[0].value
+				};
+			} else {
+				files = this.$element[0].files;
+			}
+
+			for (var i = 0; i < files.length; i++) {
+				content += files[i].name.split("\\").pop() + ', ';
+			}
+
+			if (content !== '') {
+				this.$elementFilestyle.find(':text').val(content.replace(/\, $/g, ''));
+			} else {
+				this.$elementFilestyle.find(':text').val('');
+			}
+
+			return files;
+		},
+
+		constructor : function() {
+			var _self = this,
+				html = '',
+				id = _self.$element.attr('id'),
+				files = [],
+				btn = '',
+				clear = '',
+				$label;
+
+			if (id === '' || !id) {
+				id = 'filestyle-' + nextId;
+				_self.$element.attr({
+					'id' : id
+				});
+				nextId++;
+			}
+
+			html = '<div class="group-span-filestyle ' + (_self.options.input ? 'input-group-btn' :
+			'btn-group') + '">';
+			btn = '<label for="' + id + '" class="btn ' + _self.options.buttonName + ' ' +
+			(_self.options.size == 'nr' ? '' : 'btn-' + _self.options.size) + '" ' +
+			(_self.options.disabled || _self.$element.attr('disabled') ? 'disabled="true"' : '') + '>' +
+			_self.htmlIcon() + '<span class="buttonText">' + _self.options.buttonText + '</span>' +
+			  '</label>'
+			clear = '<button id="' +  id + '-clear" class="btn btn-default" aria-label="Clear">' +
+			  '<i class="fa fa-times"></i></span></button>'
+
+			html = _self.options.buttonBefore ? html + btn + clear + '</div>' + _self.htmlInput() : _self.htmlInput() + html + clear + btn + '</div>';
+
+			_self.$elementFilestyle = $('<div class="bootstrap-filestyle input-group">' + html + '</div>');
+			_self.$elementFilestyle.find('.group-span-filestyle').attr('tabindex', "0").keypress(function(e) {
+			if (e.keyCode === 13 || e.charCode === 32) {
+				_self.$elementFilestyle.find('label').click();
+					return false;
+				}
+			});
+			_self.$elementFilestyle.find('#' + id + '-clear').click(function(e) {
+				_self.clear();
+			});
+
+			// hidding input file and add filestyle
+			_self.$element.css({
+				'position' : 'absolute',
+				'clip' : 'rect(0px 0px 0px 0px)' // using 0px for work in IE8
+			}).attr('tabindex', "-1").after(_self.$elementFilestyle);
+
+			if (_self.options.disabled || _self.$element.attr('disabled')) {
+				_self.$element.attr('disabled', 'true');
+			}
+
+			// Getting input file value
+			_self.$element.change(function() {
+				var files = _self.pushNameFiles();
+
+				if (_self.options.input == false && _self.options.badge) {
+					if (_self.$elementFilestyle.find('.badge').length == 0) {
+						_self.$elementFilestyle.find('label').append(' <span class="badge">' + files.length + '</span>');
+					} else if (files.length == 0) {
+						_self.$elementFilestyle.find('.badge').remove();
+					} else {
+						_self.$elementFilestyle.find('.badge').html(files.length);
+					}
+				} else {
+					_self.$elementFilestyle.find('.badge').remove();
+				}
+			});
+
+			// Check if browser is Firefox
+			if (window.navigator.userAgent.search(/firefox/i) > -1) {
+				// Simulating choose file for firefox
+				_self.$elementFilestyle.find('label').click(function() {
+					_self.$element.click();
+					return false;
+				});
+			}
+		}
+	};
+
+	var old = $.fn.filestyle;
+
+	$.fn.filestyle = function(option, value) {
+		var get = '', element = this.each(function() {
+			if ($(this).attr('type') === 'file') {
+				var $this = $(this), data = $this.data('filestyle'), options = $.extend({}, $.fn.filestyle.defaults, option, typeof option === 'object' && option);
+
+				if (!data) {
+					$this.data('filestyle', ( data = new Filestyle(this, options)));
+					data.constructor();
+				}
+
+				if ( typeof option === 'string') {
+					get = data[option](value);
+				}
+			}
+		});
+
+		if ( typeof get !== undefined) {
+			return get;
+		} else {
+			return element;
+		}
+	};
+
+	$.fn.filestyle.defaults = {
+		'buttonText' : 'Choose file',
+		'iconName' : 'glyphicon glyphicon-folder-open',
+		'buttonName' : 'btn-default',
+		'size' : 'nr',
+		'input' : true,
+		'badge' : true,
+		'icon' : true,
+		'buttonBefore' : false,
+		'disabled' : false,
+		'placeholder': ''
+	};
+
+	$.fn.filestyle.noConflict = function() {
+		$.fn.filestyle = old;
+		return this;
+	};
+
+	$(function() {
+		$('.filestyle').each(function() {
+			var $this = $(this), options = {
+
+				'input' : $this.attr('data-input') !== 'false',
+				'icon' : $this.attr('data-icon') !== 'false',
+				'buttonBefore' : $this.attr('data-buttonBefore') === 'true',
+				'disabled' : $this.attr('data-disabled') === 'true',
+				'size' : $this.attr('data-size'),
+				'buttonText' : $this.attr('data-buttonText'),
+				'buttonName' : $this.attr('data-buttonName'),
+				'iconName' : $this.attr('data-iconName'),
+				'badge' : $this.attr('data-badge') !== 'false',
+				'placeholder': $this.attr('data-placeholder')
+			};
+
+			$this.filestyle(options);
+		});
+	});
+})(window.jQuery);