Updates to release v4.0.8 fixes #209

kartik-v · May 20, 2021 · aa22130 · aa22130
1 parent 48fbe1b
commit aa22130
Show file tree

Hide file tree

Showing 9 changed files with 87 additions and 35 deletions.
diff --git a/CHANGE.md b/CHANGE.md
@@ -1,6 +1,12 @@
 Change Log: `bootstrap-star-rating`
 ===================================
 
+## Version 4.0.8
+
+**Date:** 21-May-2021
+
+- (enh #209): Enhancements to support BS 5.x (and 4.x/3.x).
+
 ## Version 4.0.7
 
 **Date:** 20-May-2021

diff --git a/README.md b/README.md
@@ -1,5 +1,5 @@
 <h1 align="center">
-    <a href="http://plugins.krajee.com" title="Krajee Plugins" target="_blank">
+    <a href="https://plugins.krajee.com" title="Krajee Plugins" target="_blank">
         <img src="https://kartik-v.github.io/bootstrap-fileinput-samples/samples/krajee-logo-b.png" alt="Krajee Logo"/>
     </a>
     <br>
@@ -115,20 +115,20 @@ Step 1: Load the following assets in your header.
 ```html
 <!-- default styles -->
 <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/[email protected].7/css/star-rating.min.css" media="all" rel="stylesheet" type="text/css" />
+<link href="https://cdn.jsdelivr.net/gh/kartik-v/[email protected].8/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/[email protected].7/themes/krajee-svg/theme.css" media="all" rel="stylesheet" type="text/css" />
+<link href="https://cdn.jsdelivr.net/gh/kartik-v/[email protected].8/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/[email protected].7/js/star-rating.min.js" type="text/javascript"></script>
+<script src="https://cdn.jsdelivr.net/gh/kartik-v/[email protected].8/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/[email protected].7/themes/krajee-svg/theme.js"></script>
+<script src="https://cdn.jsdelivr.net/gh/kartik-v/[email protected].8/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/[email protected].7/js/locales/LANG.js"></script>
+<script src="https://cdn.jsdelivr.net/gh/kartik-v/[email protected].8/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

diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
     "name": "bootstrap-star-rating",
-    "version": "4.0.7",
+    "version": "4.0.8",
     "homepage": "https://github.com/kartik-v/bootstrap-star-rating",
     "authors": [
         "Kartik Visweswaran <[email protected]>"

diff --git a/css/star-rating.css b/css/star-rating.css
@@ -1,5 +1,5 @@
 /*!
- * bootstrap-star-rating v4.0.7
+ * bootstrap-star-rating v4.0.8
  * http://plugins.krajee.com/star-rating
  *
  * Author: Kartik Visweswaran
@@ -203,3 +203,46 @@
 .rating-xs .caption {
     font-size: 12px;
 }
+
+/**
+ * Caption
+ */
+.caption-badge {
+    font-family: Arial, Helvetica, sans-serif;
+    display: inline-block;
+    padding: .35em .65em;
+    font-size: .75em;
+    font-weight: 700;
+    line-height: 1;
+    color: #fff;
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: baseline;
+    border-radius: .25rem;
+}
+
+.caption-secondary {
+    background-color: #6c757d !important;
+}
+
+.caption-danger {
+    background-color: #dc3545 !important;
+}
+
+.caption-warning {
+    background-color: #ffc107 !important;
+    color: #212529 !important;
+}
+
+.caption-info {
+    background-color: #0dcaf0 !important;
+    color: #212529 !important;
+}
+
+.caption-primary {
+    background-color: #0d6efd !important;
+}
+
+.caption-success {
+    background-color: #198754 !important;
+}
diff --git a/css/star-rating.min.css b/css/star-rating.min.css
diff --git a/examples/index.html b/examples/index.html
@@ -3,12 +3,15 @@
 <head>
     <meta charset="UTF-8"/>
     <title>Krajee JQuery Plugins - &copy; Kartik</title>
-    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
-    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
+    <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"/>
     <!--suppress JSUnresolvedLibraryURL -->
-    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
+    <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>
+
 <body>
 <div class="container">
     <div class="page-header">
@@ -18,25 +21,25 @@ <h2>Bootstrap Star Rating Examples
     </div>
 
     <form>
-        <input id="input-21b" value="4" type="text" class="rating" data-min=0 data-max=5 data-step=0.2 data-size="lg"
+        <input id="input-21b" value="4" type="text" class="rating" data-theme="krajee-fas" data-min=0 data-max=5 data-step=0.2 data-size="lg"
                required title="">
         <div class="clearfix"></div>
         <hr>
         <input required id="input-21c" value="" type="text" title="">
         <div class="clearfix"></div>
         <hr>
-        <input id="input-21d" value="2" type="text" class="rating" data-min=0 data-max=5 data-step=0.5 data-size="sm"
+        <input id="input-21d" value="2" type="text" class="rating" data-theme="krajee-fas" data-min=0 data-max=5 data-step=0.5 data-size="sm"
                title="">
         <hr>
-        <input id="input-21e" value="0" type="text" class="rating" data-min=0 data-max=5 data-step=0.5 data-size="xs"
+        <input id="input-21e" value="0" type="text" class="rating" data-theme="krajee-fas" data-min=0 data-max=5 data-step=0.5 data-size="xs"
                title="">
         <hr>
-        <input id="input-21f" value="0" type="text" data-min=0 data-max=5 data-step=0.1 data-size="md" title="">
+        <input id="input-21f" value="0" type="text"  data-theme="krajee-fas" data-min=0 data-max=5 data-step=0.1 data-size="md" title="">
         <hr>
-        <input id="input-2ba" type="text" class="rating" data-min="0" data-max="5" data-step="0.5" data-stars=5
+        <input id="input-2ba" type="text" class="rating" data-theme="krajee-fas" data-min="0" data-max="5" data-step="0.5" data-stars=5
                data-symbol="&#xe005;" data-default-caption="{rating} hearts" data-star-captions="{}" title="">
         <hr>
-        <input id="input-22" value="0" type="text" class="rating" data-min=0 data-max=5 data-step=0.5 data-rtl=1
+        <input id="input-22" value="0" type="text" class="rating" data-theme="krajee-fas" data-min=0 data-max=5 data-step=0.5 data-rtl=1
                data-container-class='text-right' data-glyphicon=0 title="">
         <div class="clearfix"></div>
         <hr>

diff --git a/js/star-rating.js b/js/star-rating.js
@@ -1,5 +1,5 @@
 /*!
- * bootstrap-star-rating v4.0.7
+ * bootstrap-star-rating v4.0.8
  * http://plugins.krajee.com/star-rating
  *
  * Author: Kartik Visweswaran
@@ -649,21 +649,21 @@
         showClear: true,
         showCaption: true,
         starCaptionClasses: {
-            0.5: 'label label-danger badge-danger',
-            1: 'label label-danger badge-danger',
-            1.5: 'label label-warning badge-warning',
-            2: 'label label-warning badge-warning',
-            2.5: 'label label-info badge-info',
-            3: 'label label-info badge-info',
-            3.5: 'label label-primary badge-primary',
-            4: 'label label-primary badge-primary',
-            4.5: 'label label-success badge-success',
-            5: 'label label-success badge-success'
+            0.5: 'caption-badge caption-danger',
+            1: 'caption-badge caption-danger',
+            1.5: 'caption-badge caption-warning',
+            2: 'caption-badge caption-warning',
+            2.5: 'caption-badge caption-info',
+            3: 'caption-badge caption-info',
+            3.5: 'caption-badge caption-primary',
+            4: 'caption-badge caption-primary',
+            4.5: 'caption-badge caption-success',
+            5: 'caption-badge caption-success'
         },
         clearButton: '<i class="glyphicon glyphicon-minus-sign"></i>',
         clearButtonBaseClass: 'clear-rating',
         clearButtonActiveClass: 'clear-rating-active',
-        clearCaptionClass: 'label label-default badge-secondary',
+        clearCaptionClass: 'caption-badge caption-secondary',
         clearValue: null,
         captionElement: null,
         clearElement: null,
@@ -711,4 +711,4 @@
             $input.removeClass('rating-loading').addClass('rating-loading').rating();
         }
     });
-}));
+}));