Updates to release v4.1.0 fix #210 fix #211 fix #212

CHANGE.md

@@ -1,6 +1,14 @@
 Change Log: `bootstrap-star-rating`
 ===================================
 
+## Version 4.1.0
+
+**Date:** _under development_
+
+- (enh #212): Enhance caption badge styles.
+- (enh #211): Correct keyboard arrow keys behavior for RTL oriented inputs.
+- (enh #210): Revamp themes - set default theme to Krajee SVG.
+
 ## Version 4.0.9
 
 **Date:** 21-May-2021

README.md

@@ -57,10 +57,11 @@ at Krajee JQuery plugins.
 - **BC Breaking Change**: The `symbol`, `glyphicon`, `ratingClass` properties have been removed. The functionality is replaced with the `theme` property (and can also be complemented or implemented separately using the `containerClass` property).
 - New property `theme` will assign a CSS class with the `rating-<theme-name>` to the rating container.
     - Themes included
-        - The default (blank) theme (for displaying bootstrap glyphicons)
-        - `krajee-svg` (for displaying svg icons)
-        - `krajee-uni` (for displaying unicode symbols as stars)
-        - `krajee-fa` (for displaying font awesome icons)
+        - `krajee-svg` (for displaying svg icons) - default theme since v4.1.0
+        - `krajee-uni` (for displaying Krajee unicode symbols as stars)
+        - `krajee-fas` (for displaying font awesome 5.x icons)
+        - `krajee-fa` (for displaying font awesome 4.x icons)
+        - `krajee-gly` (for displaying bootstrap 3.x glyphicons)
     - Add ability to override and add one's own themes
 - Stars now have a better padding and spacing that can be configured via CSS and themes
 - New property `filledStar` - will allow one to set the markup for `filledStar` - will default to 
@@ -115,20 +116,20 @@ Step 1: Load the following assets in your header.
 ```html
 <!-- default styles -->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
-<link href="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-star-rating@4.0.9/css/star-rating.min.css" media="all" rel="stylesheet" type="text/css" />
+<link href="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-star-rating@4.1.0/css/star-rating.min.css" media="all" rel="stylesheet" type="text/css" />
 
-<!-- optionally if you need to use a theme, then include the theme CSS file as mentioned below -->
-<link href="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-star-rating@4.0.9/themes/krajee-svg/theme.css" media="all" rel="stylesheet" type="text/css" />
+<!-- with v4.1.0 Krajee SVG theme is used as default (and must be loaded as below) - include any of the other theme CSS files as mentioned below (and change the theme property of the plugin) -->
+<link href="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-star-rating@4.1.0/themes/krajee-svg/theme.css" media="all" rel="stylesheet" type="text/css" />
 
 <!-- important mandatory libraries -->
 <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
-<script src="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-star-rating@4.0.9/js/star-rating.min.js" type="text/javascript"></script>
+<script src="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-star-rating@4.1.0/js/star-rating.min.js" type="text/javascript"></script>
 
-<!-- optionally if you need to use a theme, then include the theme JS file as mentioned below -->
-<script src="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-star-rating@4.0.9/themes/krajee-svg/theme.js"></script>
+<!-- with v4.1.0 Krajee SVG theme is used as default (and must be loaded as below) - include any of the other theme JS files as mentioned below (and change the theme property of the plugin) -->
+<script src="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-star-rating@4.1.0/themes/krajee-svg/theme.js"></script>
 
 <!-- optionally if you need translation for your language then include locale file as mentioned below (replace LANG.js with your own locale file) -->
-<script src="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-star-rating@4.0.9/js/locales/LANG.js"></script>
+<script src="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-star-rating@4.1.0/js/locales/LANG.js"></script>
 ```
 
 If you noticed, you need to load the `jquery.min.js` and `bootstrap.min.css` in addition to the `star-rating.min.css` and `star-rating.min.js` for

bower.json

@@ -1,6 +1,6 @@
 {
     "name": "bootstrap-star-rating",
-    "version": "4.0.9",
+    "version": "4.1.0",
     "homepage": "https://github.com/kartik-v/bootstrap-star-rating",
     "authors": [
         "Kartik Visweswaran <kartikv2@gmail.com>"

composer.json

@@ -21,7 +21,7 @@
     ],
     "extra": {
         "branch-alias": {
-            "dev-master": "4.0.x-dev"
+            "dev-master": "4.1.x-dev"
         }
     }
 }

css/star-rating.css

@@ -1,5 +1,5 @@
 /*!
- * bootstrap-star-rating v4.0.9
+ * bootstrap-star-rating v4.1.0
  * http://plugins.krajee.com/star-rating
  *
  * Author: Kartik Visweswaran
@@ -222,27 +222,27 @@
 }
 
 .caption-secondary {
-    background-color: #6c757d !important;
+    background-color: #6c757d;
 }
 
 .caption-danger {
-    background-color: #dc3545 !important;
+    background-color: #dc3545;
 }
 
 .caption-warning {
-    background-color: #ffc107 !important;
-    color: #212529 !important;
+    background-color: #ffc107;
+    color: #212529;
 }
 
 .caption-info {
-    background-color: #0dcaf0 !important;
-    color: #212529 !important;
+    background-color: #0dcaf0;
+    color: #212529;
 }
 
 .caption-primary {
-    background-color: #0d6efd !important;
+    background-color: #0d6efd;
 }
 
 .caption-success {
-    background-color: #198754 !important;
+    background-color: #198754;
 }

examples/index.html

@@ -7,10 +7,12 @@
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
     <link href="../css/star-rating.css" media="all" rel="stylesheet" type="text/css"/>
     <link href="../themes/krajee-fas/theme.css" media="all" rel="stylesheet" type="text/css"/>
+    <link href="../themes/krajee-svg/theme.css" media="all" rel="stylesheet" type="text/css"/>
     <!--suppress JSUnresolvedLibraryURL -->
     <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
     <script src="../js/star-rating.js" type="text/javascript"></script>
     <script src="../themes/krajee-fas/theme.js" type="text/javascript"></script>
+    <script src="../themes/krajee-svg/theme.js" type="text/javascript"></script>
 
 <body>
 <div class="container">
@@ -51,7 +53,7 @@ <h2>Bootstrap Star Rating Examples
         <input id="kartik" class="rating" data-stars="5" data-step="0.1" title=""/>
         <div class="form-group" style="margin-top:10px">
             <button type="submit" class="btn btn-primary">Submit</button>
-            <button type="reset" class="btn btn-default">Reset</button>
+            <button type="reset" class="btn btn-default btn-secondary">Reset</button>
             <button type="button" class="btn btn-danger">Destroy</button>
             <button type="button" class="btn btn-success">Create</button>
         </div>

js/star-rating.js

@@ -1,5 +1,5 @@
 /*!
- * bootstrap-star-rating v4.0.9
+ * bootstrap-star-rating v4.1.0
  * http://plugins.krajee.com/star-rating
  *
  * Author: Kartik Visweswaran
@@ -423,13 +423,13 @@
                         return;
                     }
                     var $el = self.$element, v = $el.val(), isUpdated = false, step = parseFloat(self.step),
-                        precision = $h.getDecimalPlaces(self.step),
+                        precision = $h.getDecimalPlaces(step), upKey = self.rtl ? 37 : 39, dnKey = self.rtl ? 39 : 37,
                         val = v ? parseFloat(v) : 0, key = parseInt(e.which || e.keyCode || 0, 10);
-                    if (key === 39 && val < self.max) { // key right (increase)
+                    if (key === upKey && val < self.max) { // key right (increase)
                         val += step;
                         isUpdated = true;
                     }
-                    if (key === 37 && val > self.minThreshold) { // key left (decrease)
+                    if (key === dnKey && val > self.minThreshold) { // key left (decrease)
                         val -= step;
                         isUpdated = true
                     }
@@ -632,14 +632,12 @@
     };
 
     $.fn.rating.defaults = {
-        theme: '',
+        theme: 'krajee-svg',
         language: 'en',
         stars: 5,
         tabindex: 0,
         keyboardEnabled: true,
         mouseEnabled: true,
-        filledStar: '<i class="glyphicon glyphicon-star"></i>',
-        emptyStar: '<i class="glyphicon glyphicon-star-empty"></i>',
         containerClass: '',
         size: 'md',
         animate: true,
@@ -659,7 +657,9 @@
             4.5: 'caption-badge caption-success',
             5: 'caption-badge caption-success'
         },
-        clearButton: '<i class="glyphicon glyphicon-minus-sign"></i>',
+        filledStar: '<span class="krajee-icon krajee-icon-star"></span>', // krajee-svg theme
+        emptyStar: '<span class="krajee-icon krajee-icon-star"></span>',  // krajee-svg theme
+        clearButton: '<span class="krajee-icon-clear"></span>',           // krajee-svg theme
         clearButtonBaseClass: 'clear-rating',
         clearButtonActiveClass: 'clear-rating-active',
         clearCaptionClass: 'caption-badge caption-secondary',