Updates to release v4.0.4 fix #177 fix #179

CHANGE.md

@@ -1,6 +1,17 @@
 Change Log: `bootstrap-star-rating`
 ===================================
 
+## Version 4.0.4
+
+**Date:** 15-Sep-2018
+
+- Enhancements to support Bootstrap v4.x.
+- Enhance styling of stars for all rating sizes and themes.
+- (enh #187): Add Kazakh translations.
+- (enh #182): New Krajee Font Awesome 5.x `fas` theme.
+- (bug #177, enh #179): New property `showCaptionAsTitle`
+    - Useful for caption to be displayed as title for readonly ratings. 
+
 ## Version 4.0.3
 
 **Date:** 03-Nov-2017

LICENSE.md

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

README.md

@@ -145,4 +145,4 @@ Alternatively, you can directly call the plugin options by setting data attribut
 
 ## License
 
-**bootstrap-star-rating** is released under the BSD 3-Clause License. See the bundled `LICENSE.md` for details.
+**bootstrap-star-rating** is released under the BSD-3-Clause License. See the bundled `LICENSE.md` for details.

bower.json

@@ -1,6 +1,6 @@
 {
     "name": "bootstrap-star-rating",
-    "version": "4.0.3",
+    "version": "4.0.4",
     "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.3
+ * bootstrap-star-rating v4.0.4
  * http://plugins.krajee.com/star-rating
  *
  * Author: Kartik Visweswaran
- * Copyright: 2013 - 2017, Kartik Visweswaran, Krajee.com
+ * Copyright: 2013 - 2018, Kartik Visweswaran, Krajee.com
  *
  * Licensed under the BSD 3-Clause
  * https://github.com/kartik-v/bootstrap-star-rating/blob/master/LICENSE.md
@@ -43,13 +43,18 @@
     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 {
     cursor: not-allowed;
 }
 
 .rating-container .star {
     display: inline-block;
-    margin: 0 3px;
+    margin: 0 2px;
     text-align: center;
 }
 
@@ -75,18 +80,14 @@
 
 .rating-animate .filled-stars {
     transition: width 0.25s ease;
-    -o-transition: width 0.25s ease;
-    -moz-transition: width 0.25s ease;
-    -webkit-transition: width 0.25s ease;
 }
 
 .rating-rtl .filled-stars {
     left: auto;
     right: 0;
-    -moz-transform: matrix(-1, 0, 0, 1, 0, 0) translate3d(0, 0, 0);
-    -webkit-transform: matrix(-1, 0, 0, 1, 0, 0) translate3d(0, 0, 0);
-    -o-transform: matrix(-1, 0, 0, 1, 0, 0) translate3d(0, 0, 0);
-    transform: matrix(-1, 0, 0, 1, 0, 0) translate3d(0, 0, 0);
+    transition: none;
+    -webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
+    transform: matrix(-1, 0, 0, 1, 0, 0);
 }
 
 .rating-rtl.is-star .filled-stars {
@@ -97,33 +98,6 @@
     margin-right: 0.07em;
 }
 
-/**
- * Sizes
- */
-.rating-xl {
-    font-size: 4.89em;
-}
-
-.rating-lg {
-    font-size: 3.91em;
-}
-
-.rating-md {
-    font-size: 3.13em;
-}
-
-.rating-sm {
-    font-size: 2.5em;
-}
-
-.rating-xs {
-    font-size: 2em;
-}
-
-.rating-xl {
-    font-size: 4.89em;
-}
-
 /**
  * Clear
  */
@@ -165,8 +139,7 @@
     color: #999;
     display: inline-block;
     vertical-align: middle;
-    font-size: 60%;
-    margin-top: -0.6em;
+    line-height: 1;
 }
 
 .rating-container .caption {
@@ -186,4 +159,39 @@
     .rating-container .clear-rating {
         display: none;
     }
-}
+}
+
+/**
+ * Sizes
+ */
+.rating-xl  {
+    font-size: 48px;
+}
+.rating-lg  {
+    font-size: 40px;
+}
+.rating-md  {
+    font-size: 32px;
+}
+.rating-sm  {
+    font-size: 24px;
+}
+.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;
+}

js/star-rating.js

@@ -1,9 +1,9 @@
 /*!
- * bootstrap-star-rating v4.0.3
+ * bootstrap-star-rating v4.0.4
  * http://plugins.krajee.com/star-rating
  *
  * Author: Kartik Visweswaran
- * Copyright: 2013 - 2017, Kartik Visweswaran, Krajee.com
+ * Copyright: 2013 - 2018, Kartik Visweswaran, Krajee.com
  *
  * Licensed under the BSD 3-Clause
  * https://github.com/kartik-v/bootstrap-star-rating/blob/master/LICENSE.md
@@ -139,7 +139,9 @@
                 $h.getCss(self.size, 'rating-' + self.size) +
                 $h.getCss(self.animate, 'rating-animate') +
                 $h.getCss(self.disabled || self.readonly, 'rating-disabled') +
-                $h.getCss(self.containerClass, self.containerClass);
+                $h.getCss(self.containerClass, self.containerClass) +
+                (self.displayOnly ? ' is-display-only' : '');
+
         },
         _checkDisabled: function () {
             var self = this, $el = self.$element, opts = self.options;
@@ -167,6 +169,7 @@
             self._renderCaption();
             self._renderClear();
             self._initHighlight();
+            self._initCaptionTitle();
             $container.append($el);
             if (self.rtl) {
                 w = Math.max(self.$emptyStars.outerWidth(), self.$filledStars.outerWidth());
@@ -262,6 +265,18 @@
             $el.val(v);
             return $el.removeClass('rating-loading');
         },
+        _initCaptionTitle: function() {
+            var self = this, caption;
+            if (self.showCaptionAsTitle) {
+                caption = self.fetchCaption(self.$element.val());
+                self.$rating.attr('title', $(caption).text());
+            }
+        },
+        _trigChange: function(params) {
+            var self = this;
+            self._initCaptionTitle();
+            self.$element.trigger('change').trigger('rating:change', params);
+        },
         _initEvents: function () {
             var self = this;
             self.events = {
@@ -297,7 +312,7 @@
                     if (e.type === "touchend") {
                         self._setStars(pos);
                         params = [self.$element.val(), self._getCaption()];
-                        self.$element.trigger('change').trigger('rating:change', params);
+                        self._trigChange(params);
                         self.starClicked = true;
                     } else {
                         out = self.calculate(pos);
@@ -317,7 +332,7 @@
                         pos = self.events._getTouchPosition(ev);
                         self._setStars(pos);
                         params = [self.$element.val(), self._getCaption()];
-                        self.$element.trigger('change').trigger('rating:change', params);
+                        self._trigChange(params);
                         self.starClicked = true;
                     });
                 },
@@ -417,6 +432,7 @@
         showStars: function (val) {
             var self = this, v = self._parseValue(val);
             self.$element.val(v);
+            self._initCaptionTitle();
             return self._setStars();
         },
         calculate: function (pos) {
@@ -454,6 +470,7 @@
             }
             cssVal = typeof vCss === "function" ? vCss(val) : vCss[val];
             capVal = typeof vCap === "function" ? vCap(val) : vCap[val];
+            // noinspection RegExpRedundantEscape
             cap = $h.isEmpty(capVal) ? self.defaultCaption.replace(/\{rating}/g, val) : capVal;
             css = $h.isEmpty(cssVal) ? self.clearCaptionClass : cssVal;
             caption = (val === self.clearValue) ? self.clearCaption : cap;
@@ -556,10 +573,11 @@
         clearButton: '<i class="glyphicon glyphicon-minus-sign"></i>',
         clearButtonBaseClass: 'clear-rating',
         clearButtonActiveClass: 'clear-rating-active',
-        clearCaptionClass: 'label label-default',
+        clearCaptionClass: 'label label-default badge-secondary',
         clearValue: null,
         captionElement: null,
         clearElement: null,
+        showCaptionAsTitle: true,
         hoverEnabled: true,
         hoverChangeCaption: true,
         hoverChangeStars: true,