Fix #33: Enhance touch methods for compatibility across more wider mo…

…bile device browsers.
kartik-v · Nov 17, 2014 · 15831b3 · 15831b3
1 parent 0df7922
commit 15831b3
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 53 deletions.
diff --git a/CHANGE.md b/CHANGE.md
@@ -1,8 +1,9 @@
 version 3.3.0
 =============
-**Date:** 14-Nov-2014
+**Date:** 17-Nov-2014
 
 1. (bug #32): Prevent invalid star ratings if cursor is close to left/right edge of star array.
+2. (enh #33): Enhance touch methods for compatibility across more wider mobile device browsers.
 
 version 3.2.0
 =============

diff --git a/examples/index.html b/examples/index.html
@@ -8,40 +8,43 @@
     <link href="../css/star-rating.css" media="all" rel="stylesheet" type="text/css"/>
     <script src="../js/star-rating.js" type="text/javascript"></script>
 <body>
-<h1>Bootstrap Star Rating Example</h1>
 <div class="container">
+<div class="page-header">
+<h2>Bootstrap Star Rating Examples <small>&copy; Kartik Visweswaran, Krajee.com</small></h2>
+</div>
 <form>
     <input id="input-2b" type="number" class="rating" min="0" max="5" step="0.5" data-size="xl"
     data-symbol="&#xe005;" data-default-caption="{rating} hearts" data-star-captions="{}">
-    <br>
+    <hr>
     <input id="input-21a" value="0" type="number" class="rating" data-symbol="*" min=0 max=5 step=0.5 data-size="xl" >
-    <br>
+    <hr>
     <input id="input-21b" value="4" type="number" class="rating" min=0 max=5 step=0.2 data-size="lg">
-    <br>
+    <hr>
     <input id="input-21c" value="0" type="number" class="rating" min=0 max=8 step=0.5 data-size="xl" data-stars="8">
-    <br>
+    <hr>
     <input id="input-21d" value="2" type="number" class="rating" min=0 max=5 step=0.5 data-size="sm">
-    <br>
+    <hr>
     <input id="input-21e" value="0" type="number" class="rating" min=0 max=5 step=0.5 data-size="xs" >
-    <br>
+    <hr>
     <input id="input-21f" value="0" type="number" min=0 max=5 step=0.1 data-size="md" >
-    <br>
+    <hr>
     <input id="input-2ba" type="number" class="rating" min="0" max="5" step="0.5" data-stars=5
     data-symbol="&#xe005;" data-default-caption="{rating} hearts" data-star-captions="{}">
-    <br>
+    <hr>
     <input id="input-22"  value="0" type="number" class="rating" min=0 max=5 step=0.5 data-rtl=1 data-container-class='text-right' data-glyphicon=0>
     <div class="clearfix"></div>
+    <hr>   
+    <input id="rating-input" type="number" />
+    <button id="btn-rating-input" type="button" class="btn btn-primary">Toggle Disable</button>
+    <hr>    
+    <input class="rb-rating">
+    <hr>
     <div class="form-group">
     <button type="submit" class="btn btn-primary">Submit</button>
     <button type="reset" class="btn btn-default">Reset</button>
     </div>
-
-    <input id="rating-input" type="number" />
-    <button id="btn-rating-input" type="button" class="btn btn-primary">Toggle Disable</button>
-
-    <input class="rb-rating">
 </form>
-<br>
+<hr>
 <script>
     jQuery(document).ready(function () {
         $("#input-21f").rating({
@@ -83,7 +86,6 @@ <h1>Bootstrap Star Rating Example</h1>
         $('.rb-rating').rating({'showCaption':true, 'stars':'3', 'min':'0', 'max':'3', 'step':'1', 'size':'xs', 'starCaptions': {0:'status:nix', 1:'status:wackelt', 2:'status:geht', 3:'status:laeuft'}});
     });
 </script>
-
 </div>  
 </body>
 </html>
diff --git a/js/star-rating.js b/js/star-rating.js
@@ -136,7 +136,9 @@
             if (!isTouchCapable || self.inactive) {
                 return;
             }
-            var pos = e.originalEvent.touches[0].pageX - self.$rating.offset().left;
+            var ev = e.originalEvent,
+                touches = ev.touches.length > 0 ? ev.touches : ev.changedTouches,
+                pos = touches[0].pageX - self.$rating.offset().left;
             if (update === true) {
                 self.setStars(pos);
                 self.$element.trigger('change');
@@ -346,20 +348,12 @@
         },
         getValueFromPosition: function (pos) {
             var self = this, precision = getDecimalPlaces(self.step),
-                percentage, val, maxWidth = self.$rating.width();
-            percentage = (pos / maxWidth);
-            if (self.rtl) {
-                val = (self.min + Math.floor(self.diff * percentage / self.step) * self.step);
-            }
-            else {
-                val = (self.min + Math.ceil(self.diff * percentage / self.step) * self.step);
-            }
-            val = applyPrecision(parseFloat(val), precision);
+                val, factor, maxWidth = self.$rating.width();
+            factor = (self.diff * pos) / (maxWidth * self.step);
+            factor = self.rtl ? Math.floor(factor) : Math.ceil(factor);
+            val = applyPrecision(parseFloat(self.min + factor * self.step), precision);
             val = Math.max(Math.min(val, self.max), self.min);
-            if (self.rtl) {
-                val = self.max - val;
-            }
-            return val;
+            return self.rtl ? (self.max - val) : val;
         },
         toggleHover: function(out) {
             var self = this;
@@ -408,32 +402,24 @@
             self.$element.trigger('rating.reset');
         },
         update: function (val) {
-            if (arguments.length > 0) {
-                var self = this;
-                self.$element.val(val);
-                self.setStars();
+            var self = this;
+            if (!arguments.length) {
+                return;
             }
+            self.$element.val(val);
+            self.setStars();
         },
         refresh: function (options) {
             var self = this;
-            if (arguments.length) {
-                self.$rating.off();
-                self.$clear.off();
-                self.init($.extend(self.options, options));
-                if (self.showClear) {
-                    self.$clear.show();
-                }
-                else {
-                    self.$clear.hide();
-                }
-                if (self.showCaption) {
-                    self.$caption.show();
-                }
-                else {
-                    self.$caption.hide();
-                }
-                self.$element.trigger('rating.refresh');
+            if (!arguments.length) {
+                return;
             }
+            self.$rating.off();
+            self.$clear.off();
+            self.init($.extend(self.options, options));
+            self.showClear ? self.$clear.show() : self.$clear.hide();
+            self.showCaption ? self.$caption.show() : self.$caption.hide();
+            self.$element.trigger('rating.refresh');
         }
     };