Fix compatibility mode

pryley · Jan 23, 2021 · 89ddddc · 89ddddc
1 parent db72e86
commit 89ddddc
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 18 deletions.
diff --git a/README.md b/README.md
@@ -105,7 +105,7 @@ The maximum number of stars allowed in a star rating.
 
 Type: `Function`
 
-This can be used to add a SVG image to each value instead of using a background image for the stars.
+This can be used to add a SVG image to each star value instead of using the background images in the CSS.
 
 ### tooltip:
 

diff --git a/index.html b/index.html
@@ -149,7 +149,7 @@ <h4>maxStars</h4>
             <h4>stars</h4>
             <blockquote>
                 <p>Type: <code>Function</code></p>
-                <p>This can be used to add a SVG image to each value instead of using a background image for the stars.</p>
+                <p>This can be used to add a SVG image to each star value instead of using the background images in the CSS.</p>
             </blockquote>
             <h4>tooltip</h4>
             <blockquote>

diff --git a/src/index.css b/src/index.css
@@ -1,6 +1,6 @@
 /**
  * Star Rating
- * @version: 4.0.1
+ * @version: 4.0.2
  * @author: Paul Ryley (http://geminilabs.io)
  * @url: https://github.com/pryley/star-rating.js
  * @license: MIT
@@ -142,21 +142,21 @@
 }
 
 /* Compatibilty with v3 */
-.gl-star-rating.gl-compat .gl-star-rating--stars > span {
+.gl-star-rating .gl-star-rating--stars[class*=" s"] > span {
     background-image: var(--gl-star-empty);
     background-position: center;
     background-repeat: no-repeat;
     background-size: 90%;
 }
-.gl-star-rating.gl-compat .gl-star-rating--stars.s10 > span:nth-child(1),
-.gl-star-rating.gl-compat .gl-star-rating--stars.s20 > span:nth-child(-1n+2),
-.gl-star-rating.gl-compat .gl-star-rating--stars.s30 > span:nth-child(-1n+3),
-.gl-star-rating.gl-compat .gl-star-rating--stars.s40 > span:nth-child(-1n+4),
-.gl-star-rating.gl-compat .gl-star-rating--stars.s50 > span:nth-child(-1n+5),
-.gl-star-rating.gl-compat .gl-star-rating--stars.s60 > span:nth-child(-1n+6),
-.gl-star-rating.gl-compat .gl-star-rating--stars.s70 > span:nth-child(-1n+7),
-.gl-star-rating.gl-compat .gl-star-rating--stars.s80 > span:nth-child(-1n+8),
-.gl-star-rating.gl-compat .gl-star-rating--stars.s90 > span:nth-child(-1n+9),
-.gl-star-rating.gl-compat .gl-star-rating--stars.s100 > span {
+.gl-star-rating .gl-star-rating--stars.s10 > span:nth-child(1),
+.gl-star-rating .gl-star-rating--stars.s20 > span:nth-child(-1n+2),
+.gl-star-rating .gl-star-rating--stars.s30 > span:nth-child(-1n+3),
+.gl-star-rating .gl-star-rating--stars.s40 > span:nth-child(-1n+4),
+.gl-star-rating .gl-star-rating--stars.s50 > span:nth-child(-1n+5),
+.gl-star-rating .gl-star-rating--stars.s60 > span:nth-child(-1n+6),
+.gl-star-rating .gl-star-rating--stars.s70 > span:nth-child(-1n+7),
+.gl-star-rating .gl-star-rating--stars.s80 > span:nth-child(-1n+8),
+.gl-star-rating .gl-star-rating--stars.s90 > span:nth-child(-1n+9),
+.gl-star-rating .gl-star-rating--stars.s100 > span {
     background-image: var(--gl-star-full);
 }
diff --git a/src/widget.js b/src/widget.js
@@ -45,8 +45,6 @@ export class Widget {
             const el = createSpanEl({ 'data-index': index, 'data-value': item.value });
             if ('function' === typeof this.props.stars) {
                 this.props.stars.call(this, el, item, index);
-            } else {
-                parentEl.classList.add('gl-compat'); // @v3 compat
             }
             [].forEach.call(el.children, el => el.style.pointerEvents = 'none');
             widgetEl.innerHTML += el.outerHTML;
@@ -63,8 +61,10 @@ export class Widget {
                 addRemoveClass(el, i <= index, this.props.classNames.active);
                 addRemoveClass(el, i === this.indexSelected, this.props.classNames.selected);
             });
-            this.widgetEl.classList.remove('s' + (10 * (this.indexActive + 1))); // @v3 compat
-            this.widgetEl.classList.add('s' + (10 * (index + 1))); // @v3 compat
+            if ('function' !== typeof this.props.stars) { // @v3 compat
+                this.widgetEl.classList.remove('s' + (10 * (this.indexActive + 1)));
+                this.widgetEl.classList.add('s' + (10 * (index + 1)));
+            }
             if (this.props.tooltip) {
                 const label = index < 0 ? this.props.tooltip : this.values[index].text;
                 this.widgetEl.setAttribute('aria-label', label);