Add methoed color

markusslima · Aug 14, 2015 · a2fc821 · a2fc821
1 parent 61f1a64
commit a2fc821
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 4 deletions.
diff --git a/src/jquery-filestyle.css b/src/jquery-filestyle.css
@@ -74,8 +74,8 @@ div.jfilestyle label[disabled] {
 }
 
 div.jfilestyle label:hover {
-	background: #f4f4f4;
 	cursor: pointer;
+	opacity: 0.9;
 }
 
 div.jfilestyle .count-jfilestyle {

diff --git a/src/jquery-filestyle.js b/src/jquery-filestyle.js
@@ -123,6 +123,18 @@
 			} else {
 				return this.options.placeholder;
 			}
+		},
+
+        color : function(value) {
+            if (typeof value !== 'object') {
+                window.console.error('color option not object');
+                return false;
+            } else if (value !== undefined) {
+				this.options.color = value;
+				this.$elementjFilestyle.find('label').css(value);
+			} else {
+				return this.options.color;
+			}
 		},	
 
         htmlInput: function () {
@@ -193,6 +205,10 @@
                     }
                 });
 
+            if (typeof _self.options.color === 'object') {
+                _self.$elementjFilestyle.find('label').css(_self.options.color);
+            }
+
             // hidding input file and add filestyle
             _self.$element
                 .css({'position': 'absolute', 'clip': 'rect(0px 0px 0px 0px)'})
@@ -266,7 +282,8 @@
         'buttonBefore': false,
         'inputSize': '200px',
         'theme': '',
-        'placeholder': ''
+        'placeholder': '',
+        'color': 'default'
     };
 
     $.fn.jfilestyle.noConflict = function () {
@@ -285,7 +302,8 @@
                     'buttonBefore': $this.attr('data-buttonBefore') === 'true' ? true : false,
                     'inputSize': $this.attr('data-inputSize'),
                     'theme': $this.attr('data-theme'),
-                    'placeholder': $this.attr('data-placeholder')
+                    'placeholder': $this.attr('data-placeholder'),
+                    'color': $this.attr('data-color')
                 };
 
             $this.jfilestyle(options);

diff --git a/test/index.html b/test/index.html
@@ -35,6 +35,10 @@ <h2>Options</h2>
 			<label for="input03">No text field</label>
 			<input type="file" id="input03">
 			<br>
+
+			<label for="input04">Color button</label>
+			<input type="file" id="input04">
+			<br>
 
 			<label for="input06">Input size</label>
 			<input type="file" id="input06">
@@ -99,7 +103,7 @@ <h2>Data attributes</h2>
 			<br>
 			<input type="file" class="jfilestyle" data-size="300px">
 			<br>
-			<input type="file" class="jfilestyle" data-buttonText="Open" data-iconName="icon-plus" data-theme="orange">
+			<input type="file" class="jfilestyle" data-buttonText="Open">
 		</form>
 		<br>
 		<br>
@@ -118,6 +122,10 @@ <h2>Data attributes</h2>
 				input : false
 			});
 
+			$('#input04').jfilestyle({
+				color : {'background': '#555555', 'color': '#fff', 'border-color': '#000'}
+			});
+
 			$('#input06').jfilestyle({
 				inputSize : '100px'
 			});