feat(rating): add individual icons and colors instead of fixed star &…

… heart only
fomantic · Dec 17, 2018 · 67f3b70 · 67f3b70
1 parent 574830e
commit 67f3b70
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 172 deletions.
diff --git a/src/definitions/modules/rating.js b/src/definitions/modules/rating.js
@@ -107,7 +107,8 @@ $.fn.rating = function(parameters) {
           layout: function() {
             var
               maxRating = module.get.maxRating(),
-              html      = $.fn.rating.settings.templates.icon(maxRating)
+              icon      = module.get.icon(),
+              html      = $.fn.rating.settings.templates.icon(maxRating, icon)
             ;
             module.debug('Generating icon html dynamically');
             $module
@@ -215,6 +216,13 @@ $.fn.rating = function(parameters) {
         },
 
         get: {
+          icon: function(){
+            var icon = $module.data(metadata.icon);
+            if (icon) {
+              $module.removeData(metadata.icon);
+            }
+            return icon || settings.icon;
+          },
           initialRating: function() {
             if($module.data(metadata.rating) !== undefined) {
               $module.removeData(metadata.rating);
@@ -460,7 +468,9 @@ $.fn.rating.settings = {
   name          : 'Rating',
   namespace     : 'rating',
 
-  slent         : false,
+  icon          : 'star',
+
+  silent        : false,
   debug         : false,
   verbose       : false,
   performance   : true,
@@ -482,7 +492,8 @@ $.fn.rating.settings = {
 
   metadata: {
     rating    : 'rating',
-    maxRating : 'maxRating'
+    maxRating : 'maxRating',
+    icon      : 'icon'
   },
 
   className : {
@@ -497,13 +508,13 @@ $.fn.rating.settings = {
   },
 
   templates: {
-    icon: function(maxRating) {
+    icon: function(maxRating, iconClass) {
       var
         icon = 1,
         html = ''
       ;
       while(icon <= maxRating) {
-        html += '<i class="icon"></i>';
+        html += '<i class="'+iconClass+' icon"></i>';
         icon++;
       }
       return html;

diff --git a/src/definitions/modules/rating.less b/src/definitions/modules/rating.less
@@ -75,61 +75,45 @@
 }
 
 
-/*-------------------
-        Star
---------------------*/
-
-/* Inactive */
-.ui.star.rating .icon {
-  width: @starIconWidth;
-  height: @starIconHeight;
-  background: @starInactiveBackground;
-  color: @starInactiveColor;
-  text-shadow: @starInactiveTextShadow;
-}
-
-/* Active Star */
-.ui.star.rating .active.icon {
-  background: @starActiveBackground !important;
-  color: @starActiveColor !important;
-  text-shadow: @starActiveTextShadow !important;
-}
-
-/* Selected Star */
-.ui.star.rating .icon.selected,
-.ui.star.rating .icon.selected.active {
-  background: @starSelectedBackground !important;
-  color: @starSelectedColor !important;
-  text-shadow: @starSelectedTextShadow !important;
-}
-
-
-/*-------------------
-        Heart
---------------------*/
-
-.ui.heart.rating .icon {
-  width: @heartIconWidth;
-  height: @heartIconHeight;
-  background: @heartInactiveBackground;
-  color: @heartInactiveColor;
-  text-shadow: @heartInactiveTextShadow !important;
-}
-
-/* Active Heart */
-.ui.heart.rating .active.icon {
-  background: @heartActiveBackground !important;
-  color: @heartActiveColor !important;
-  text-shadow: @heartActiveTextShadow !important;
-}
-
-/* Selected Heart */
-.ui.heart.rating .icon.selected,
-.ui.heart.rating .icon.selected.active {
-  background: @heartSelectedBackground !important;
-  color: @heartSelectedColor !important;
-  text-shadow: @heartSelectedTextShadow !important;
-}
+/*--------------
+     Colors
+-------------- */
+
+.ratingColor(@color; @lightColor;) {
+  @_ratingActiveShadow: "@{color}";
+  @_ratingActive: "@{lightColor}";
+  @_ratingSelectedShadow: "@{color}Hover";
+  @_ratingSelected: "@{lightColor}Hover";
+  .ui.@{color}.rating .active.icon {
+    color: @@_ratingActive;
+    text-shadow: 0px -@shadowWidth 0px @@_ratingActiveShadow,
+                 -@shadowWidth 0px 0px @@_ratingActiveShadow,
+                 0px @shadowWidth 0px @@_ratingActiveShadow,
+                 @shadowWidth 0px 0px @@_ratingActiveShadow;
+  }
+  .ui.@{color}.rating .icon.selected,
+  .ui.@{color}.rating .icon.selected.active {
+    color: @@_ratingSelected;
+    text-shadow: 0px -@shadowWidth 0px @@_ratingSelectedShadow,
+                 -@shadowWidth 0px 0px @@_ratingSelectedShadow,
+                 0px @shadowWidth 0px @@_ratingSelectedShadow,
+                 @shadowWidth 0px 0px @@_ratingSelectedShadow;
+  }
+}
+
+.ratingColor(~'red',~'lightRed');
+.ratingColor(~'orange',~'lightOrange');
+.ratingColor(~'yellow',~'lightYellow');
+.ratingColor(~'olive',~'lightOlive');
+.ratingColor(~'green',~'lightGreen');
+.ratingColor(~'teal',~'lightTeal');
+.ratingColor(~'blue',~'lightBlue');
+.ratingColor(~'violet',~'lightViolet');
+.ratingColor(~'purple',~'lightPurple');
+.ratingColor(~'pink',~'lightPink');
+.ratingColor(~'brown',~'lightBrown');
+.ratingColor(~'grey',~'lightGrey');
+.ratingColor(~'black',~'lightBlack');
 
 
 /*******************************