Merge pull request #13 from elad/master

Add support for icon-hover class
melloc01 · Aug 22, 2015 · 20e9c5a · 20e9c5a
2 parents 5517f36 + 0396e11
commit 20e9c5a
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 7 deletions.
diff --git a/angular-input-stars.css b/angular-input-stars.css
@@ -25,4 +25,8 @@
 		color: #FDE35E;
 		text-shadow: black 0 0 1px, 0 0 1px ;	
 
+}
+
+.angular-input-stars > li .active.angular-input-stars-hover {
+	text-shadow: black 0 0 3px;
 }
diff --git a/angular-input-stars.js b/angular-input-stars.js
@@ -7,7 +7,7 @@ angular.module('angular-input-stars', [])
             restrict: 'EA',
             replace: true,
             template: '<ul ng-class="listClass">' +
-            '<li ng-touch="paintStars($index)" ng-mouseenter="paintStars($index)" ng-mouseleave="unpaintStars($index)" ng-repeat="item in items track by $index">' +
+            '<li ng-touch="paintStars($index)" ng-mouseenter="paintStars($index, true)" ng-mouseleave="unpaintStars($index, false)" ng-repeat="item in items track by $index">' +
             '<i  ng-class="getClass($index)" ng-click="setValue($index, $event)"></i>' +
             '</li>' +
             '</ul>',
@@ -25,6 +25,7 @@ angular.module('angular-input-stars', [])
             scope.items = new Array(+attrs.max);
 
             var emptyIcon = attrs.iconEmpty || 'fa-star-o';
+            var iconHover = attrs.iconHover || 'angular-input-stars-hover';
             var fullIcon = attrs.iconFull || 'fa-star';
             var iconBase = attrs.iconBase || 'fa fa-fw';
             scope.listClass = attrs.listClass || 'angular-input-stars';
@@ -42,13 +43,13 @@ angular.module('angular-input-stars', [])
 
             };
 
-            scope.unpaintStars = function () {
+            scope.unpaintStars = function ($index, hover) {
 
-                scope.paintStars(scope.last_value - 1);
+                scope.paintStars(scope.last_value - 1, hover);
 
             };
 
-            scope.paintStars = function ($index) {
+            scope.paintStars = function ($index, hover) {
 
                 //ignore painting, if readonly
                 if (scope.readonly) {
@@ -65,16 +66,20 @@ angular.module('angular-input-stars', [])
                         $star.removeClass(emptyIcon);
                         $star.addClass(fullIcon);
                         $star.addClass('active');
+                        $star.addClass(iconHover);
 
                     } else {
 
                         $star.removeClass(fullIcon);
                         $star.removeClass('active');
+                        $star.removeClass(iconHover);
                         $star.addClass(emptyIcon);
 
                     }
                 }
 
+                !hover && items.removeClass(iconHover);
+
             };
 
             scope.setValue = function (index, e) {

diff --git a/readme.md b/readme.md
@@ -21,11 +21,11 @@ Inject it
 	<input-stars max="5" ng-model="YourCtrl.property"></input-stars>
 ```
 
-You can customize the **full**, **empty** and **base** icon classes via attributes
+You can customize the **base**, **empty**, **hover**, and **full** and  icon classes via attributes
 ```html
-	<input-stars max="5" icon-full="fa-circle" icon-base="fa fa-fw" icon-empty="fa-circle-o" ng-model="YourCtrl.property"></input-stars>
+	<input-stars max="5" icon-base="fa fa-fw" icon-empty="fa-circle-o" icon-hover="hover" icon-full="fa-circle" ng-model="YourCtrl.property"></input-stars>
 ```
-> Unlike icon-base, on icon-full and icon-empty you must specify only one class, but that is all you need : ]
+> Unlike icon-base, on icon-full, icon-hover and icon-empty you must specify only one class, but that is all you need : ]
 
 You can customize the **list class** to whatever you want
 ```html