diff --git a/angular-input-stars.css b/angular-input-stars.css index b13c013..dbc17b9 100644 --- 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; } \ No newline at end of file diff --git a/angular-input-stars.js b/angular-input-stars.js index 6d6aa3e..fb13348 100644 --- a/angular-input-stars.js +++ b/angular-input-stars.js @@ -7,7 +7,7 @@ angular.module('angular-input-stars', []) restrict: 'EA', replace: true, template: '', @@ -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 index bb1cd57..5dc85b8 100644 --- a/readme.md +++ b/readme.md @@ -21,11 +21,11 @@ Inject it ``` -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 - + ``` -> 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