rangetouch - npm Package Compare versions

Comparing version 0.0.5 to 0.0.8

changelog.md

 # Changelog
 
+## v0.0.8
+- Bug fix for zoomed input
+
+## v0.0.7
+- Triggering `input` and `change` events 
+
+## v0.0.6
+- Bug fix for min attrubute
+
 ## v0.0.5
@@ -4,0 +13,0 @@ - Bug fix for breaking other touches

dist/rangetouch.js

@@ -1,1 +0,1 @@
-!function(t,e){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=e(t,document):"function"==typeof define&&define.amd?define(null,function(){e(t,document)}):t.rangetouch=e(t,document)}("undefined"!=typeof window?window:this,function(t,e){"use strict";function n(t,e,n){t.addEventListener(e,n,!1)}function o(t,e){if(1>e){var n=parseInt(e).getDecimalCount();return parseFloat(t.toFixed(n))}return Math.round(t/e)*e}function r(t){var e,n=t.target,r=t.changedTouches[0],u=parseFloat(n.getAttribute("min"))||0,i=parseFloat(n.getAttribute("max"))||100,c=parseFloat(n.getAttribute("step"))||1,d=i-u,s=n.getBoundingClientRect(),l=100/s.width*(a.thumbWidth/2)/100;return e=100/s.width*(r.pageX-s.left),0>e?e=0:e>100&&(e=100),50>e?e-=(100-2*e)*l:e>50&&(e+=2*(e-50)*l),o(d*(e/100),c)}function u(t){a.enabled&&"range"===t.target.type&&(t.preventDefault(),t.target.value=r(t))}function i(){n(e.body,a.events.start,u),n(e.body,a.events.move,u)}var a={enabled:!0,selectors:{range:'[type="range"]'},thumbWidth:15,events:{start:"touchstart",move:"touchmove"}};return function(){if("ontouchstart"in e.documentElement){for(var t=e.querySelectorAll(a.selectors.range),n=t.length-1;n>=0;n--)t[n].style.touchAction="manipulation";i()}}(),{set:function(t,e){a[t]=e}}});
+!function(t,e){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=e(t,document):"function"==typeof define&&define.amd?define(null,function(){e(t,document)}):t.rangetouch=e(t,document)}("undefined"!=typeof window?window:this,function(t,e){"use strict";function n(t,e,n){t.addEventListener(e,n,!1)}function o(t){var e=(""+t).match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);return e?Math.max(0,(e[1]?e[1].length:0)-(e[2]?+e[2]:0)):0}function u(t,e){if(1>e){var n=o(parseInt(e));return parseFloat(t.toFixed(n))}return Math.round(t/e)*e}function r(t){var e,n=t.target,o=t.changedTouches[0],r=parseFloat(n.getAttribute("min"))||0,i=parseFloat(n.getAttribute("max"))||100,a=parseFloat(n.getAttribute("step"))||1,c=i-r,s=n.getBoundingClientRect(),l=100/s.width*(d.thumbWidth/2)/100;return e=100/s.width*(o.clientX-s.left),0>e?e=0:e>100&&(e=100),50>e?e-=(100-2*e)*l:e>50&&(e+=2*(e-50)*l),r+u(c*(e/100),a)}function i(t){d.enabled&&"range"===t.target.type&&(t.preventDefault(),t.target.value=r(t),c(t.target,t.type===d.events.end?"change":"input"))}function a(){n(e.body,d.events.start,i),n(e.body,d.events.move,i),n(e.body,d.events.end,i)}function c(t,e,n){t.dispatchEvent(new CustomEvent(e,n))}var d={enabled:!0,selectors:{range:'[type="range"]'},thumbWidth:15,events:{start:"touchstart",move:"touchmove",end:"touchend"}};return function(){if("ontouchstart"in e.documentElement){for(var t=e.querySelectorAll(d.selectors.range),n=t.length-1;n>=0;n--)t[n].style.touchAction="manipulation",t[n].style.webkitUserSelect="none";a()}}(),{set:function(t,e){d[t]=e}}}),function(){"use strict";function t(t,e){e=e||{bubbles:!1,cancelable:!1,detail:void 0};var n=document.createEvent("CustomEvent");return n.initCustomEvent(t,e.bubbles,e.cancelable,e.detail),n}return"function"==typeof window.CustomEvent?!1:(t.prototype=window.Event.prototype,void(window.CustomEvent=t))}();

package.json

 {
   "name": "rangetouch",
-  "version": "0.0.5",
+  "version": "0.0.8",
   "description": "A super tiny library to make input type='range' sliders work better on touch devices",
@@ -5,0 +5,0 @@ "homepage": "https://rangetouch.com",

readme.md

@@ -11,3 +11,3 @@ # RangeTouch
 - No setup required, just include the script
-- Less than 700 bytes minified and gzipped
+- Less than 1KB minified and gzipped
 - No dependencies (written in "vanilla" JavaScript)
@@ -25,3 +25,3 @@
 ```html
-<script src="https://cdn.rangetouch.com/0.0.5/rangetouch.js"></script>
+<script src="https://cdn.rangetouch.com/0.0.8/rangetouch.js"></script>
 ```
@@ -28,0 +28,0 @@

src/js/rangetouch.js

 // ==========================================================================
-// rangetouch.js v0.0.5
+// rangetouch.js v0.0.8
 // Making <input type="range"> work on touch devices
@@ -34,3 +34,4 @@ // https://github.com/selz/rangetouch
             start:      'touchstart',
-            move:       'touchmove'
+            move:       'touchmove',
+            end:        'touchend'
         }
@@ -44,6 +45,21 @@ };
 
+    // Get the number of decimal places
+    function getDecimalPlaces(value) {
+        var match = ('' + value).match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);
+
+        if (!match) { return 0; }
+
+        return Math.max(
+            0,
+            // Number of digits right of decimal point.
+            (match[1] ? match[1].length : 0) -
+            // Adjust for scientific notation.
+            (match[2] ? +match[2] : 0)
+        );
+    }
+
     // Round to the nearest step
     function roundToStep(number, step) {
         if(step < 1) {
-            var places = parseInt(step).getDecimalCount();
+            var places = getDecimalPlaces(parseInt(step));
             return parseFloat(number.toFixed(places));
@@ -69,3 +85,3 @@ }
         // Determine left percentage
-        percent = ((100 / clientRect.width) * (touch.pageX - clientRect.left));
+        percent = ((100 / clientRect.width) * (touch.clientX - clientRect.left));
 
@@ -85,3 +101,3 @@ // Don't allow outside bounds
         // Find the closest step to the mouse position
-        return roundToStep(delta * (percent / 100), step);
+        return min + roundToStep(delta * (percent / 100), step);
     }
@@ -92,6 +108,8 @@
         // If not enabled, bail
-        if(!settings.enabled || event.target.type !== 'range') {
+        if (!settings.enabled || event.target.type !== 'range') {
             return;
         }
 
+        //console.log(event);
+
         // Prevent text highlight on iOS
@@ -102,2 +120,5 @@ event.preventDefault();
         event.target.value = getValue(event);
+
+        // Trigger input event
+        _triggerEvent(event.target, (event.type === settings.events.end ? 'change' : 'input'));
     }
@@ -109,4 +130,10 @@
         _on(document.body, settings.events.move, setValue);
+        _on(document.body, settings.events.end, setValue);
     }
 
+    // Trigger event
+    function _triggerEvent(element, eventName, properties) {
+        element.dispatchEvent(new CustomEvent(eventName, properties));
+    }
+
     // Expose setup function
@@ -125,2 +152,3 @@ (function() {
             inputs[i].style.touchAction = 'manipulation';
+            inputs[i].style.webkitUserSelect = 'none';
         }
@@ -138,1 +166,23 @@
 }));
+
+// Custom event polyfill
+// ---------------------------------
+// https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent
+(function () {
+    'use strict';
+    
+    if (typeof window.CustomEvent === 'function') {
+        return false;
+    }
+
+    function CustomEvent (event, params) {
+        params = params || { bubbles: false, cancelable: false, detail: undefined };
+        var evt = document.createEvent('CustomEvent');
+        evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
+        return evt;
+    }
+
+    CustomEvent.prototype = window.Event.prototype;
+
+    window.CustomEvent = CustomEvent;
+})();

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

64207

increased by3.69%

Lines of code

701

increased by5.89%

No dependency changes