Updates to release v4.0.7 fix #110 fix #111 fix #129 fix #145 fix #208

CHANGE.md

@@ -1,6 +1,38 @@
 Change Log: `bootstrap-star-rating`
 ===================================
 
+## Version 4.0.7
+
+**Date:** 20-May-2021
+
+- (enh #208): Corrected positioning of the base input on which the rating is triggered.
+- (enh #205): Add Dutch Translations.
+- (enh #200): Activate Open Collective.
+- (enh #199): Add Greek Translations.
+- (enh #145): Minimum value threshold validation.
+    - New property `minThreshold` which allows a star rated with minimum value always. The initial value
+      of the rating is set to `minThreshold` if it has a value undefined or a value less than `minThreshold`
+    - The `minThreshold` value must be a value between the `min` and `max` values 
+    - If `minThreshold` is set to less than `min` the plugin will default `minThreshold` to the `min` value
+    - If `minThreshold` is set to greater than `max` the plugin will default `minThreshold` to the `max` value
+- (enh #129): Enhance accessibility & make the  stars keyboard focusable.
+    - New property `keyboardEnabled` - defaults to `true`
+        - allow use of `tab` keyboard button to navigate to the rating
+        - allow use of arrow `right` and arrow `left` keyboard buttons to change the rating value
+    - New property `mouseEnabled` - defaults to `true` 
+        - when set to false - the mouse cannot be used to change the ratings
+- (enh #111): Add titles to individual star elements.
+  - New config property `starTitles` (can be set as object or function) - will set the title for each star
+- (enh #110): Hover events reworked. New events added `rating:mouseenter` and `rating:mouseleave`
+```
+$('#ratingInput').on('rating:mouseenter rating:mouseleave', function(e, index, status, $star) {
+    console.log(index); // the index number of the star where the event was triggered
+    console.log(status); // whether the mouse event was triggered on `empty-star` or `filled-star`
+    console.log($star); // the current star jquery object where event was triggered 
+    console.log($star.attr('title')); // can get properties of the star object
+}); 
+```  
+
 ## Version 4.0.6
 
 **Date:** 25-May-2019
@@ -10,7 +42,7 @@ Change Log: `bootstrap-star-rating`
 - (enh #190): Update German Translations.
 - Implement stale bot.
 
-## Version 4.0.6
+## Version 4.0.5
 
 **Date:** 04-Oct-2018
 

LICENSE.md

@@ -1,4 +1,4 @@
-Copyright (c) 2013 - 2019, Kartik Visweswaran   
+Copyright (c) 2013 - 2021, Kartik Visweswaran   
 Krajee.com  
 All rights reserved.  
 

README.md

@@ -1,13 +1,13 @@
 <h1 align="center">
     <a href="http://plugins.krajee.com" title="Krajee Plugins" target="_blank">
-        <img src="http://kartik-v.github.io/bootstrap-fileinput-samples/samples/krajee-logo-b.png" alt="Krajee Logo"/>
+        <img src="https://kartik-v.github.io/bootstrap-fileinput-samples/samples/krajee-logo-b.png" alt="Krajee Logo"/>
     </a>
     <br>
     bootstrap-star-rating
     <hr>
     <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=DTP3NZQ6G2AYU"
        title="Donate via Paypal" target="_blank">
-        <img src="http://kartik-v.github.io/bootstrap-fileinput-samples/samples/donate.png" alt="Donate"/>
+        <img src="https://kartik-v.github.io/bootstrap-fileinput-samples/samples/donate.png" alt="Donate"/>
     </a>
 </h1>
 
@@ -25,7 +25,7 @@ at Krajee JQuery plugins.
 
 > NOTE: Release v4.0 is a modified rewrite with various new enhancements and BC breaking features. It allows rendering richer markup for star symbols and offers theming support.
 
-![Star Rating Screenshot](https://lh3.googleusercontent.com/puCbNL9LlBMty8DmaZxAq0yM8teuhM_hEvox-NuJ2x7xWedNhs8nwSk1Zo8FISFAsyt8=w1366-h768-rw-no)
+![Star Rating Screenshot](https://cdn.jsdelivr.net/gh/kartik-v/[email protected]/samples/star-rating-screenshot.png)
 
 ## Features  
 
@@ -38,7 +38,7 @@ at Krajee JQuery plugins.
   icons for consistent display across devices. Optionally one can use the Unicode character set to override symbols.
 - Use any of your favorite font icon frameworks to render your star symbols (for example you can easily use the icons from the FontAwesome library).
 - Render and display fractional star ratings. Configure number of stars, min, max, step, and theoretically  support any fractional rating.
-- Uses Bootstrap 3.x styles & glyphs by default. But this can be overridden with plugin parameters and your own CSS styles.
+- Uses Bootstrap 5.x, 4.x, 3.x styles & Bootstrap 3.x glyphicons by default. But this can be overridden with plugin parameters and your own CSS styles.
 - Support for RIGHT TO LEFT (RTL) input. Automatically changes star styling for RTL.
 - Ability to clear values and options for the stars. Control where the clear button element can be shown.
 - Reset star rating to the initial value when the form is reset.
@@ -79,7 +79,7 @@ View the [plugin documentation](http://plugins.krajee.com/star-rating) and [plug
 
 ## Pre-requisites  
 
-1. [Bootstrap 3.x](http://getbootstrap.com/)
+1. [Bootstrap 5.x, 4.x, 3.x](http://getbootstrap.com/)
 2. Latest [JQuery](http://jquery.com/)
 3. Most browsers supporting CSS3 & JQuery. 
 
@@ -114,21 +114,21 @@ Step 1: Load the following assets in your header.
 
 ```html
 <!-- default styles -->
-<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" rel="stylesheet">
-<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-star-rating/4.0.6/css/star-rating.min.css" media="all" rel="stylesheet" type="text/css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
+<link href="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-star-rating@4.0.7/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://cdnjs.cloudflare.com/ajax/libs/bootstrap-star-rating/4.0.6/themes/krajee-svg/theme.css" media="all" rel="stylesheet" type="text/css" />
+<link href="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-star-rating@4.0.7/themes/krajee-svg/theme.css" media="all" rel="stylesheet" type="text/css" />
 
 <!-- important mandatory libraries -->
-<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-star-rating/4.0.6/js/star-rating.min.js" type="text/javascript"></script>
+<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.7/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://cdnjs.cloudflare.com/ajax/libs/bootstrap-star-rating/4.0.6/themes/krajee-svg/theme.js"></script>
+<script src="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-star-rating@4.0.7/themes/krajee-svg/theme.js"></script>
 
-<!-- optionally if you need translation for your language then include locale file as mentioned below -->
-<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-star-rating/4.0.6/js/locales/<lang>.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.7/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.6",
+    "version": "4.0.7",
     "homepage": "https://github.com/kartik-v/bootstrap-star-rating",
     "authors": [
         "Kartik Visweswaran <[email protected]>"

css/star-rating.css

@@ -1,9 +1,9 @@
 /*!
- * bootstrap-star-rating v4.0.6
+ * bootstrap-star-rating v4.0.7
  * http://plugins.krajee.com/star-rating
  *
  * Author: Kartik Visweswaran
- * Copyright: 2013 - 2019, Kartik Visweswaran, Krajee.com
+ * Copyright: 2013 - 2021, Kartik Visweswaran, Krajee.com
  *
  * Licensed under the BSD 3-Clause
  * https://github.com/kartik-v/bootstrap-star-rating/blob/master/LICENSE.md
@@ -29,8 +29,12 @@
     white-space: nowrap;
 }
 
-.rating-container .rating-input {
-    position: absolute;
+.rating-container .rating-stars:focus {
+    outline: 1px dotted;
+}
+
+.rating-input {
+    display: absolute;
     cursor: pointer;
     width: 100%;
     height: 1px;
@@ -44,12 +48,11 @@
     margin: 0;
 }
 
-.rating-container.is-display-only .rating-input,
 .rating-container.is-display-only .rating-stars {
     cursor: default;
 }
 
-.rating-disabled .rating-input, .rating-disabled .rating-stars {
+.rating-disabled .rating-stars {
     cursor: not-allowed;
 }
 
@@ -165,34 +168,38 @@
 /**
  * Sizes
  */
-.rating-xl  {
+.rating-xl {
     font-size: 48px;
 }
-.rating-lg  {
+.rating-lg {
     font-size: 40px;
 }
-.rating-md  {
+.rating-md {
     font-size: 32px;
 }
-.rating-sm  {
+.rating-sm {
     font-size: 24px;
 }
-.rating-xs  {
+.rating-xs {
     font-size: 16px;
 }
 
 .rating-xl .caption {
     font-size: 20px;
 }
+
 .rating-lg .caption {
     font-size: 18px;
 }
+
 .rating-md .caption {
     font-size: 16px;
 }
+
 .rating-sm .caption {
     font-size: 14px;
 }
+
 .rating-xs .caption {
     font-size: 12px;
 }