ratings.diff

--- ratings1	2017-08-10 14:05:53.000000000 -0500
+++ ratings2	2017-08-10 14:07:24.000000000 -0500
@@ -5,14 +5,17 @@
     clearSelector = '.' + clearClass,
     hiddenClass = 'hidden',
     DEFAULTS = {
-      'min': 1,
-      'max': 5,
-      'empty-value': 0,
+      'min': 20,
+      'max': 100,
+      'step': 20,
+      'title': ["Terrible", "Bad", "Average", "Good", "Extraordinary"],
+      'empty-value': null,
       'iconLib': 'glyphicon',
       'activeIcon': 'glyphicon-star',
       'inactiveIcon': 'glyphicon-star-empty',
-      'clearable': false,
-      'clearableIcon': 'glyphicon-remove',
+      'color': '#DAA520',
+      'clearable': true,
+      'clearableIcon': 'glyphicon-minus-sign',
       'clearableRemain': false,
       'inline': false,
       'readonly': false
@@ -32,11 +35,6 @@
     var data = $.extend({}, DEFAULTS, $input.data(), options);
     data.inline = data.inline === '' || data.inline;
     data.readonly = data.readonly === '' || data.readonly;
-    if (data.clearable === false) {
-      data.clearableLabel = '';
-    } else {
-      data.clearableLabel = data.clearable;
-    }
     data.clearable = data.clearable === '' || data.clearable;
     return data;
   }
@@ -54,16 +52,15 @@
     $ratingEl.removeClass('rating');

     // Render rating icons
-    for (var i = options.min; i <= options.max; i++) {
-      $ratingEl.append('<i class="' + options.iconLib + '" data-value="' + i + '"></i>');
+    for (var i = options.min; i <= options.max; i += options.step) {
+      $ratingEl.append('<i class="' + options.iconLib + '" data-value="' + i + '" title="' + options.title[i/20-1] + '" style="color:' + options.color + '"></i>');
     }

     // Render clear link
     if (options.clearable && !options.readonly) {
       $ratingEl.append('&nbsp;').append(
         '<a class="' + clearClass + '">' +
-          '<i class="' + options.iconLib + ' ' + options.clearableIcon + '"/>' +
-          options.clearableLabel +
+          '<i class="' + options.iconLib + ' ' + options.clearableIcon + '" />' +
         '</a>'
       );
     }