Item14121: use svg in jquery.stars rating

JQueryPlugin/lib/Foswiki/Plugins/JQueryPlugin/STARS.pm

@@ -28,7 +28,7 @@ sub new {
     my $this = bless(
         $class->SUPER::new(
             name       => 'Stars',
-            version    => '1.10',
+            version    => '2.00',
             author     => 'Michael Daum',
             homepage   => 'http://foswiki.org/Extensions/JQueryPlugin',
             css        => [ 'jquery.stars.css', ],

JQueryPlugin/pub/System/JQueryPlugin/plugins/stars/jquery.stars.uncompressed.css

@@ -1,31 +1,34 @@
 .jqStars {
   white-space:nowrap;
-}
-.jqStarsContainer {
   display:inline-block;
-  background-image:url(star.png);
-  background-repeat:repeat-x;
   height:16px;
-  vertical-align:text-bottom;
+  line-height:16px;
 }
-.jqStarsLabel {
-  display:inline-block;
-  margin-left:0.5em;
-}
-.jqStarsOn {
-  display:inline-block;
-  background-image:url(star.png);
+.jqStarsLabel,
+.jqStarsContainer,
+.jqStarsOn,
+.jqStarsDelete {
+  background-position:0 0;
+  background-size:16px;
   background-repeat:repeat-x;
+  display:inline-block;
   height:16px;
+  line-height:16px;
+  vertical-align:bottom;
+}
+.jqStarsOn,
+.jqStarsContainer {
+  background-image:url(stars.svg);
+}
+.jqStarsLabel {
+  margin-left:0.3em;
 }
 .jqStarsDelete {
-  display:inline-block;
-  vertical-align:text-bottom;
-  background-image:url(delete.gif);
+  margin-right:0.5em;
+  background-image:url(delete.svg);
   background-repeat:no-repeat;
+  background-position:0 1px;
   width:16px;
-  height:16px;
-  margin-right:3px;
 }
 .jqStarsDelete:hover {
   background-position:0 -16px;

JQueryPlugin/pub/System/JQueryPlugin/plugins/stars/jquery.stars.uncompressed.js

@@ -1,5 +1,5 @@
 /*
- * jQuery Stars plugin 1.10
+ * jQuery Stars plugin 2.00
  *
  * Copyright (c) 2014-2016 Foswiki Contributors http://foswiki.org
  *
@@ -14,8 +14,7 @@
   // Create the defaults once 
   var defaults = {
     split: 1,
-    numStars: 5,
-    widthStar: 16
+    numStars: 5
   };
 
   // plugin constructor 
@@ -73,7 +72,6 @@
       self.opts.split = 1;
     } 
 
-    self.width = self.opts.numStars * self.opts.widthStar;
 
     self._prec = 0;
     if (self.opts.split > 1) {
@@ -89,11 +87,16 @@
     self.blockMouseMove = false;
     self.timeoutId = undefined;
 
-    self.elem.attr("type", "hidden");
-    self.container = $("<div />").addClass("jqStarsContainer").insertAfter(self.elem).width(self.width);
+    self.elem.hide();
+    self.container = $("<div />").addClass("jqStarsContainer").insertAfter(self.elem); 
     self.labelElem = $("<span />").addClass("jqStarsLabel").insertAfter(self.container);
     self.onElem = $("<div />").addClass("jqStarsOn").appendTo(self.container);
 
+    self.widthStar = parseInt(self.container.css("background-size"), 10);
+    self.width = self.opts.numStars * self.widthStar;
+
+    self.container.width(self.width);
+
     if (self.elem.is(":disabled")) {
       self.container.addClass("jqStarsReadOnly");
     } else {
@@ -102,7 +105,7 @@
       // event handler
       self.container.on("mousemove", function(ev) {
         if (!self.blockMouseMove) {
-          self.displayAtIndex((ev.clientX - self.container.position().left) / self.opts.widthStar);
+          self.displayAtIndex((ev.clientX - self.container.position().left) / self.widthStar);
         }
       });
 
@@ -125,7 +128,7 @@
       });
 
       self.container.on("click", function(ev) {
-        self.displayAtIndex((ev.clientX - self.container.position().left) / self.opts.widthStar);
+        self.displayAtIndex((ev.clientX - self.container.position().left) / self.widthStar);
         self.container.addClass("jqStarsSelected");
         self.blockMouseMove = true;
         self.selectAtIndex(self._tmpIndex);
@@ -192,7 +195,7 @@
       index = Math.ceil(index * self.opts.split) / self.opts.split;
       index = self._toFixed(index);
 
-      width = self.opts.widthStar * index;
+      width = self.widthStar * index;
       label = self.getDisplayVal(index);
     }