comparison-slider - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

dist/comparison-slider.js

@@ -14,3 +14,3 @@ /*!
 	var $style = document.createElement('style');
-	$style.innerHTML = "\n.ComparisonSlider {\n\tposition: relative;\n\toverflow: hidden;\n}\n.ComparisonSlider__Before,\n.ComparisonSlider__After {\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n\tdisplay: block;\n\twidth: 100%;\n\theight: 100%;\n\tbackground-position: 50% 50%;\n\tbackground-size: cover;\n}\n.ComparisonSlider__Handle {\n\tcursor: col-resize;\n\tposition: absolute;\n\tbox-sizing: border-box;\n\ttop: 50%;\n\twidth: 44px;\n\theight: 44px;\n\tborder: 3px solid #fff;\n\tborder-radius: 100px;\n\tbox-shadow: 0px 0px 12px rgba( 51, 51, 51, 0.5 );\n\tbackground: url(\"data:image/svg+xml,%3Csvg%20fill=%22%23fff%22%20preserveAspectRatio=%22none%22%20viewBox=%220%200%2046%2046%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath%20d=%22m39.808%2023-10%208v-16z%22/%3E%3Cpath%20d=%22m6.192%2023%2010-8v16z%22/%3E%3C/svg%3E\" ) 50% 50% / 100% 100%;\n}\n@supports (filter: drop-shadow( 0 0 0 #000 )) {\n\t.ComparisonSlider__Handle {\n\t\tbox-shadow: none;\n\t\tfilter: drop-shadow( 0 0 12px rgba( 51, 51, 51, 0.5 ) );\n\t}\n}\n.ComparisonSlider__Handle::before,\n.ComparisonSlider__Handle::after {\n\tcontent: \"\";\n\tposition: absolute;\n\tleft: 50%;\n\tdisplay: block;\n\twidth: 3px;\n\theight: 1024px;\n\tmargin-left: -1.5px;\n\tbackground-color: #fff;\n}\n.ComparisonSlider__Handle::before {\n\tbottom: 50%;\n\tmargin-bottom: 22px;\n\tbox-shadow: 0 3px 0 #fff, 0px 0px 12px rgba( 51, 51, 51, 0.5 );\n}\n\n.ComparisonSlider__Handle::after {\n\ttop: 50%;\n\tmargin-top: 22px;\n\tbox-shadow: 0 -3px 0 #fff, 0px 0px 12px rgba( 51, 51, 51, 0.5 );\n}\n\n@supports (filter: drop-shadow( 0 0 0 #000 )) {\n\t.ComparisonSlider__Handle::before,\n\t.ComparisonSlider__Handle::after {\n\t\tbox-shadow: none;\n\t}\n}\n";
+	$style.innerHTML = "\n.ComparisonSlider {\n\tposition: relative;\n\toverflow: hidden;\n}\n.ComparisonSlider.-auto,\n.ComparisonSlider.-dragging {\n\tcursor: col-resize;\n}\n.ComparisonSlider__Before,\n.ComparisonSlider__After {\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n\tdisplay: block;\n\twidth: 100%;\n\theight: 100%;\n\tbackground-position: 50% 50%;\n\tbackground-size: cover;\n}\n.ComparisonSlider__Handle {\n\tcursor: col-resize;\n\tposition: absolute;\n\tbox-sizing: border-box;\n\ttop: 50%;\n\twidth: 44px;\n\theight: 44px;\n\tborder: 3px solid #fff;\n\tborder-radius: 100px;\n\tbox-shadow: 0px 0px 12px rgba( 51, 51, 51, 0.5 );\n\tbackground: url(\"data:image/svg+xml,%3Csvg%20fill=%22%23fff%22%20preserveAspectRatio=%22none%22%20viewBox=%220%200%2046%2046%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath%20d=%22m39.808%2023-10%208v-16z%22/%3E%3Cpath%20d=%22m6.192%2023%2010-8v16z%22/%3E%3C/svg%3E\" ) 50% 50% / 100% 100%;\n}\n@supports (filter: drop-shadow( 0 0 0 #000 )) {\n\t.ComparisonSlider__Handle {\n\t\tbox-shadow: none;\n\t\tfilter: drop-shadow( 0 0 12px rgba( 51, 51, 51, 0.5 ) );\n\t}\n}\n.ComparisonSlider__Handle::before,\n.ComparisonSlider__Handle::after {\n\tcontent: \"\";\n\tposition: absolute;\n\tleft: 50%;\n\tdisplay: block;\n\twidth: 3px;\n\theight: 1024px;\n\tmargin-left: -1.5px;\n\tbackground-color: #fff;\n}\n.ComparisonSlider__Handle::before {\n\tbottom: 50%;\n\tmargin-bottom: 22px;\n\tbox-shadow: 0 3px 0 #fff, 0px 0px 12px rgba( 51, 51, 51, 0.5 );\n}\n.ComparisonSlider__Handle::after {\n\ttop: 50%;\n\tmargin-top: 22px;\n\tbox-shadow: 0 -3px 0 #fff, 0px 0px 12px rgba( 51, 51, 51, 0.5 );\n}\n@supports (filter: drop-shadow( 0 0 0 #000 )) {\n\t.ComparisonSlider__Handle::before,\n\t.ComparisonSlider__Handle::after {\n\t\tbox-shadow: none;\n\t}\n}\n";
 	document.head.insertBefore($style, document.head.firstChild);
@@ -76,2 +76,3 @@
 	            var $autoArea = options.autoArea || this.$el;
+	            this.$el.classList.add('-auto');
 	            $autoArea.addEventListener('mousemove', dragging);
@@ -88,3 +89,3 @@ $autoArea.addEventListener('touchmove', dragging);
 	            _this.draw();
-	        }, 200);
+	        }, 60);
 	        window.addEventListener('resize', onWindowResize);
@@ -91,0 +92,0 @@ function onMouseDown(event) {

dist/comparison-slider.min.js

@@ -7,2 +7,2 @@ /*!
  */
-(function(global,factory){typeof exports==="object"&&typeof module!=="undefined"?module.exports=factory():typeof define==="function"&&define.amd?define(factory):(global=global||self,global.ComparisonSlider=factory())})(this,function(){"use strict";var $style=document.createElement("style");$style.innerHTML='\n.ComparisonSlider {\n\tposition: relative;\n\toverflow: hidden;\n}\n.ComparisonSlider__Before,\n.ComparisonSlider__After {\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n\tdisplay: block;\n\twidth: 100%;\n\theight: 100%;\n\tbackground-position: 50% 50%;\n\tbackground-size: cover;\n}\n.ComparisonSlider__Handle {\n\tcursor: col-resize;\n\tposition: absolute;\n\tbox-sizing: border-box;\n\ttop: 50%;\n\twidth: 44px;\n\theight: 44px;\n\tborder: 3px solid #fff;\n\tborder-radius: 100px;\n\tbox-shadow: 0px 0px 12px rgba( 51, 51, 51, 0.5 );\n\tbackground: url("data:image/svg+xml,%3Csvg%20fill=%22%23fff%22%20preserveAspectRatio=%22none%22%20viewBox=%220%200%2046%2046%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath%20d=%22m39.808%2023-10%208v-16z%22/%3E%3Cpath%20d=%22m6.192%2023%2010-8v16z%22/%3E%3C/svg%3E" ) 50% 50% / 100% 100%;\n}\n@supports (filter: drop-shadow( 0 0 0 #000 )) {\n\t.ComparisonSlider__Handle {\n\t\tbox-shadow: none;\n\t\tfilter: drop-shadow( 0 0 12px rgba( 51, 51, 51, 0.5 ) );\n\t}\n}\n.ComparisonSlider__Handle::before,\n.ComparisonSlider__Handle::after {\n\tcontent: "";\n\tposition: absolute;\n\tleft: 50%;\n\tdisplay: block;\n\twidth: 3px;\n\theight: 1024px;\n\tmargin-left: -1.5px;\n\tbackground-color: #fff;\n}\n.ComparisonSlider__Handle::before {\n\tbottom: 50%;\n\tmargin-bottom: 22px;\n\tbox-shadow: 0 3px 0 #fff, 0px 0px 12px rgba( 51, 51, 51, 0.5 );\n}\n\n.ComparisonSlider__Handle::after {\n\ttop: 50%;\n\tmargin-top: 22px;\n\tbox-shadow: 0 -3px 0 #fff, 0px 0px 12px rgba( 51, 51, 51, 0.5 );\n}\n\n@supports (filter: drop-shadow( 0 0 0 #000 )) {\n\t.ComparisonSlider__Handle::before,\n\t.ComparisonSlider__Handle::after {\n\t\tbox-shadow: none;\n\t}\n}\n';document.head.insertBefore($style,document.head.firstChild);function clamp(value,min,max){if(min===void 0){min=0}if(max===void 0){max=1}return Math.max(min,Math.min(max,value))}function selectorToElement(selectorOrHTMLElement,$parent){if(selectorOrHTMLElement instanceof HTMLElement){return selectorOrHTMLElement}var element=($parent||document).querySelector(selectorOrHTMLElement);if(element instanceof HTMLElement){return element}return document.createElement("div")}function debounce(func,wait){if(wait===void 0){wait=200}var timeoutID;return function(){var args=[];for(var _i=0;_i<arguments.length;_i++){args[_i]=arguments[_i]}clearTimeout(timeoutID);var context=this;timeoutID=window.setTimeout(function(){return func.apply(context,args)},wait)}}var ComparisonSlider=function(){function ComparisonSlider($el,options){if($el===void 0){$el=".ComparisonSlider"}if(options===void 0){options={}}var _this=this;this._left=0;this._width=0;this._height=0;this._offset=.5;this._auto=false;var scope=this;this.$el=selectorToElement($el);this.$before=selectorToElement(options.$before||".ComparisonSlider__Before",this.$el);this.$after=selectorToElement(options.$after||".ComparisonSlider__After",this.$el);this.$handle=selectorToElement(options.$handle||".ComparisonSlider__Handle",this.$el);this.$before.classList.add("ComparisonSlider__Before");this.$after.classList.add("ComparisonSlider__After");this.$handle.classList.add("ComparisonSlider__Handle");this.$el.appendChild(this.$before);this.$el.appendChild(this.$after);this.$el.appendChild(this.$handle);this._auto=options.auto||false;this.update();this.draw();var dragStartX=0;if(this._auto){var $autoArea=options.autoArea||this.$el;$autoArea.addEventListener("mousemove",dragging);$autoArea.addEventListener("touchmove",dragging)}else{this.$el.addEventListener("mousedown",onMouseDown);this.$el.addEventListener("touchstart",onTouchStart)}this.$el.addEventListener("contextmenu",onContextMenu);var onWindowResize=debounce(function(){_this.update();_this.draw()},200);window.addEventListener("resize",onWindowResize);function onMouseDown(event){event.preventDefault();startDragging(event)}function onTouchStart(event){event.preventDefault();startDragging(event)}function onContextMenu(event){event.preventDefault()}function startDragging(event){scope.update();var _event=normalizePointerEvent(event);dragStartX=_event.pageX;scope.offset=(_event.pageX-scope._left)/scope._width;scope._toggleClassNames(true);scope._toggleTransitionMode(true);document.addEventListener("mousemove",dragging);document.addEventListener("touchmove",dragging);document.addEventListener("mouseup",endDragging);document.addEventListener("touchend",endDragging)}function dragging(event){var _event=normalizePointerEvent(event);scope.offset=(_event.pageX-scope._left)/scope._width;if(Math.abs(dragStartX-_event.pageX)>5){scope._toggleTransitionMode(false)}}function endDragging(){scope._toggleClassNames(false);document.removeEventListener("mousemove",dragging);document.removeEventListener("touchmove",dragging);document.removeEventListener("mouseup",endDragging);document.removeEventListener("touchend",endDragging)}this.destory=function(){_this.$el.removeEventListener("mousedown",onMouseDown);_this.$el.removeEventListener("touchstart",onTouchStart);_this.$el.removeEventListener("contextmenu",onContextMenu);_this.$el.addEventListener("mousemove",dragging);_this.$el.addEventListener("touchmove",dragging);if(!!options.autoArea){options.autoArea.addEventListener("mousemove",dragging);options.autoArea.addEventListener("touchmove",dragging)}document.removeEventListener("mousemove",dragging);document.removeEventListener("touchmove",dragging);document.removeEventListener("mouseup",endDragging);document.removeEventListener("touchend",endDragging);window.removeEventListener("resize",onWindowResize)}}Object.defineProperty(ComparisonSlider.prototype,"offset",{get:function(){return this._offset},set:function(offset){var _offset=clamp(offset,0,1);if(_offset===this._offset)return;this._offset=_offset;this.draw()},enumerable:true,configurable:true});ComparisonSlider.prototype.update=function(){var rect=this.$el.getBoundingClientRect();this._left=rect.left;this._width=rect.width;this._height=rect.height};ComparisonSlider.prototype.draw=function(){var left=clamp(this._width*this.offset,0,this._width);this.$handle.style.transform="translateX( "+left+"px ) translateX( -50% ) translateY( -50% )";this.$after.style.clip="rect(0px, "+this._width+"px, "+this._height+"px, "+left+"px)"};ComparisonSlider.prototype._toggleClassNames=function(enabled){if(enabled){this.$el.classList.add("-dragging")}else{this.$el.classList.remove("-dragging")}};ComparisonSlider.prototype._toggleTransitionMode=function(enabled){if(enabled){this.$after.style.transition="clip .2s";this.$handle.style.transition="transform .2s"}else{this.$after.style.transition="none";this.$handle.style.transition="none"}};return ComparisonSlider}();function normalizePointerEvent(event){return"ontouchstart"in window&&event instanceof TouchEvent?event.touches[0]:event}document.addEventListener("DOMContentLoaded",function(){Array.prototype.forEach.call(document.querySelectorAll("[data-comparison-slider-auto]"),function($el){return new ComparisonSlider($el)})});return ComparisonSlider});
+(function(global,factory){typeof exports==="object"&&typeof module!=="undefined"?module.exports=factory():typeof define==="function"&&define.amd?define(factory):(global=global||self,global.ComparisonSlider=factory())})(this,function(){"use strict";var $style=document.createElement("style");$style.innerHTML='\n.ComparisonSlider {\n\tposition: relative;\n\toverflow: hidden;\n}\n.ComparisonSlider.-auto,\n.ComparisonSlider.-dragging {\n\tcursor: col-resize;\n}\n.ComparisonSlider__Before,\n.ComparisonSlider__After {\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n\tdisplay: block;\n\twidth: 100%;\n\theight: 100%;\n\tbackground-position: 50% 50%;\n\tbackground-size: cover;\n}\n.ComparisonSlider__Handle {\n\tcursor: col-resize;\n\tposition: absolute;\n\tbox-sizing: border-box;\n\ttop: 50%;\n\twidth: 44px;\n\theight: 44px;\n\tborder: 3px solid #fff;\n\tborder-radius: 100px;\n\tbox-shadow: 0px 0px 12px rgba( 51, 51, 51, 0.5 );\n\tbackground: url("data:image/svg+xml,%3Csvg%20fill=%22%23fff%22%20preserveAspectRatio=%22none%22%20viewBox=%220%200%2046%2046%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath%20d=%22m39.808%2023-10%208v-16z%22/%3E%3Cpath%20d=%22m6.192%2023%2010-8v16z%22/%3E%3C/svg%3E" ) 50% 50% / 100% 100%;\n}\n@supports (filter: drop-shadow( 0 0 0 #000 )) {\n\t.ComparisonSlider__Handle {\n\t\tbox-shadow: none;\n\t\tfilter: drop-shadow( 0 0 12px rgba( 51, 51, 51, 0.5 ) );\n\t}\n}\n.ComparisonSlider__Handle::before,\n.ComparisonSlider__Handle::after {\n\tcontent: "";\n\tposition: absolute;\n\tleft: 50%;\n\tdisplay: block;\n\twidth: 3px;\n\theight: 1024px;\n\tmargin-left: -1.5px;\n\tbackground-color: #fff;\n}\n.ComparisonSlider__Handle::before {\n\tbottom: 50%;\n\tmargin-bottom: 22px;\n\tbox-shadow: 0 3px 0 #fff, 0px 0px 12px rgba( 51, 51, 51, 0.5 );\n}\n.ComparisonSlider__Handle::after {\n\ttop: 50%;\n\tmargin-top: 22px;\n\tbox-shadow: 0 -3px 0 #fff, 0px 0px 12px rgba( 51, 51, 51, 0.5 );\n}\n@supports (filter: drop-shadow( 0 0 0 #000 )) {\n\t.ComparisonSlider__Handle::before,\n\t.ComparisonSlider__Handle::after {\n\t\tbox-shadow: none;\n\t}\n}\n';document.head.insertBefore($style,document.head.firstChild);function clamp(value,min,max){if(min===void 0){min=0}if(max===void 0){max=1}return Math.max(min,Math.min(max,value))}function selectorToElement(selectorOrHTMLElement,$parent){if(selectorOrHTMLElement instanceof HTMLElement){return selectorOrHTMLElement}var element=($parent||document).querySelector(selectorOrHTMLElement);if(element instanceof HTMLElement){return element}return document.createElement("div")}function debounce(func,wait){if(wait===void 0){wait=200}var timeoutID;return function(){var args=[];for(var _i=0;_i<arguments.length;_i++){args[_i]=arguments[_i]}clearTimeout(timeoutID);var context=this;timeoutID=window.setTimeout(function(){return func.apply(context,args)},wait)}}var ComparisonSlider=function(){function ComparisonSlider($el,options){if($el===void 0){$el=".ComparisonSlider"}if(options===void 0){options={}}var _this=this;this._left=0;this._width=0;this._height=0;this._offset=.5;this._auto=false;var scope=this;this.$el=selectorToElement($el);this.$before=selectorToElement(options.$before||".ComparisonSlider__Before",this.$el);this.$after=selectorToElement(options.$after||".ComparisonSlider__After",this.$el);this.$handle=selectorToElement(options.$handle||".ComparisonSlider__Handle",this.$el);this.$before.classList.add("ComparisonSlider__Before");this.$after.classList.add("ComparisonSlider__After");this.$handle.classList.add("ComparisonSlider__Handle");this.$el.appendChild(this.$before);this.$el.appendChild(this.$after);this.$el.appendChild(this.$handle);this._auto=options.auto||false;this.update();this.draw();var dragStartX=0;if(this._auto){var $autoArea=options.autoArea||this.$el;this.$el.classList.add("-auto");$autoArea.addEventListener("mousemove",dragging);$autoArea.addEventListener("touchmove",dragging)}else{this.$el.addEventListener("mousedown",onMouseDown);this.$el.addEventListener("touchstart",onTouchStart)}this.$el.addEventListener("contextmenu",onContextMenu);var onWindowResize=debounce(function(){_this.update();_this.draw()},60);window.addEventListener("resize",onWindowResize);function onMouseDown(event){event.preventDefault();startDragging(event)}function onTouchStart(event){event.preventDefault();startDragging(event)}function onContextMenu(event){event.preventDefault()}function startDragging(event){scope.update();var _event=normalizePointerEvent(event);dragStartX=_event.pageX;scope.offset=(_event.pageX-scope._left)/scope._width;scope._toggleClassNames(true);scope._toggleTransitionMode(true);document.addEventListener("mousemove",dragging);document.addEventListener("touchmove",dragging);document.addEventListener("mouseup",endDragging);document.addEventListener("touchend",endDragging)}function dragging(event){var _event=normalizePointerEvent(event);scope.offset=(_event.pageX-scope._left)/scope._width;if(Math.abs(dragStartX-_event.pageX)>5){scope._toggleTransitionMode(false)}}function endDragging(){scope._toggleClassNames(false);document.removeEventListener("mousemove",dragging);document.removeEventListener("touchmove",dragging);document.removeEventListener("mouseup",endDragging);document.removeEventListener("touchend",endDragging)}this.destory=function(){_this.$el.removeEventListener("mousedown",onMouseDown);_this.$el.removeEventListener("touchstart",onTouchStart);_this.$el.removeEventListener("contextmenu",onContextMenu);_this.$el.addEventListener("mousemove",dragging);_this.$el.addEventListener("touchmove",dragging);if(!!options.autoArea){options.autoArea.addEventListener("mousemove",dragging);options.autoArea.addEventListener("touchmove",dragging)}document.removeEventListener("mousemove",dragging);document.removeEventListener("touchmove",dragging);document.removeEventListener("mouseup",endDragging);document.removeEventListener("touchend",endDragging);window.removeEventListener("resize",onWindowResize)}}Object.defineProperty(ComparisonSlider.prototype,"offset",{get:function(){return this._offset},set:function(offset){var _offset=clamp(offset,0,1);if(_offset===this._offset)return;this._offset=_offset;this.draw()},enumerable:true,configurable:true});ComparisonSlider.prototype.update=function(){var rect=this.$el.getBoundingClientRect();this._left=rect.left;this._width=rect.width;this._height=rect.height};ComparisonSlider.prototype.draw=function(){var left=clamp(this._width*this.offset,0,this._width);this.$handle.style.transform="translateX( "+left+"px ) translateX( -50% ) translateY( -50% )";this.$after.style.clip="rect(0px, "+this._width+"px, "+this._height+"px, "+left+"px)"};ComparisonSlider.prototype._toggleClassNames=function(enabled){if(enabled){this.$el.classList.add("-dragging")}else{this.$el.classList.remove("-dragging")}};ComparisonSlider.prototype._toggleTransitionMode=function(enabled){if(enabled){this.$after.style.transition="clip .2s";this.$handle.style.transition="transform .2s"}else{this.$after.style.transition="none";this.$handle.style.transition="none"}};return ComparisonSlider}();function normalizePointerEvent(event){return"ontouchstart"in window&&event instanceof TouchEvent?event.touches[0]:event}document.addEventListener("DOMContentLoaded",function(){Array.prototype.forEach.call(document.querySelectorAll("[data-comparison-slider-auto]"),function($el){return new ComparisonSlider($el)})});return ComparisonSlider});

dist/comparison-slider.module.js

@@ -8,3 +8,3 @@ /*!
 var $style = document.createElement('style');
-$style.innerHTML = "\n.ComparisonSlider {\n\tposition: relative;\n\toverflow: hidden;\n}\n.ComparisonSlider__Before,\n.ComparisonSlider__After {\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n\tdisplay: block;\n\twidth: 100%;\n\theight: 100%;\n\tbackground-position: 50% 50%;\n\tbackground-size: cover;\n}\n.ComparisonSlider__Handle {\n\tcursor: col-resize;\n\tposition: absolute;\n\tbox-sizing: border-box;\n\ttop: 50%;\n\twidth: 44px;\n\theight: 44px;\n\tborder: 3px solid #fff;\n\tborder-radius: 100px;\n\tbox-shadow: 0px 0px 12px rgba( 51, 51, 51, 0.5 );\n\tbackground: url(\"data:image/svg+xml,%3Csvg%20fill=%22%23fff%22%20preserveAspectRatio=%22none%22%20viewBox=%220%200%2046%2046%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath%20d=%22m39.808%2023-10%208v-16z%22/%3E%3Cpath%20d=%22m6.192%2023%2010-8v16z%22/%3E%3C/svg%3E\" ) 50% 50% / 100% 100%;\n}\n@supports (filter: drop-shadow( 0 0 0 #000 )) {\n\t.ComparisonSlider__Handle {\n\t\tbox-shadow: none;\n\t\tfilter: drop-shadow( 0 0 12px rgba( 51, 51, 51, 0.5 ) );\n\t}\n}\n.ComparisonSlider__Handle::before,\n.ComparisonSlider__Handle::after {\n\tcontent: \"\";\n\tposition: absolute;\n\tleft: 50%;\n\tdisplay: block;\n\twidth: 3px;\n\theight: 1024px;\n\tmargin-left: -1.5px;\n\tbackground-color: #fff;\n}\n.ComparisonSlider__Handle::before {\n\tbottom: 50%;\n\tmargin-bottom: 22px;\n\tbox-shadow: 0 3px 0 #fff, 0px 0px 12px rgba( 51, 51, 51, 0.5 );\n}\n\n.ComparisonSlider__Handle::after {\n\ttop: 50%;\n\tmargin-top: 22px;\n\tbox-shadow: 0 -3px 0 #fff, 0px 0px 12px rgba( 51, 51, 51, 0.5 );\n}\n\n@supports (filter: drop-shadow( 0 0 0 #000 )) {\n\t.ComparisonSlider__Handle::before,\n\t.ComparisonSlider__Handle::after {\n\t\tbox-shadow: none;\n\t}\n}\n";
+$style.innerHTML = "\n.ComparisonSlider {\n\tposition: relative;\n\toverflow: hidden;\n}\n.ComparisonSlider.-auto,\n.ComparisonSlider.-dragging {\n\tcursor: col-resize;\n}\n.ComparisonSlider__Before,\n.ComparisonSlider__After {\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n\tdisplay: block;\n\twidth: 100%;\n\theight: 100%;\n\tbackground-position: 50% 50%;\n\tbackground-size: cover;\n}\n.ComparisonSlider__Handle {\n\tcursor: col-resize;\n\tposition: absolute;\n\tbox-sizing: border-box;\n\ttop: 50%;\n\twidth: 44px;\n\theight: 44px;\n\tborder: 3px solid #fff;\n\tborder-radius: 100px;\n\tbox-shadow: 0px 0px 12px rgba( 51, 51, 51, 0.5 );\n\tbackground: url(\"data:image/svg+xml,%3Csvg%20fill=%22%23fff%22%20preserveAspectRatio=%22none%22%20viewBox=%220%200%2046%2046%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath%20d=%22m39.808%2023-10%208v-16z%22/%3E%3Cpath%20d=%22m6.192%2023%2010-8v16z%22/%3E%3C/svg%3E\" ) 50% 50% / 100% 100%;\n}\n@supports (filter: drop-shadow( 0 0 0 #000 )) {\n\t.ComparisonSlider__Handle {\n\t\tbox-shadow: none;\n\t\tfilter: drop-shadow( 0 0 12px rgba( 51, 51, 51, 0.5 ) );\n\t}\n}\n.ComparisonSlider__Handle::before,\n.ComparisonSlider__Handle::after {\n\tcontent: \"\";\n\tposition: absolute;\n\tleft: 50%;\n\tdisplay: block;\n\twidth: 3px;\n\theight: 1024px;\n\tmargin-left: -1.5px;\n\tbackground-color: #fff;\n}\n.ComparisonSlider__Handle::before {\n\tbottom: 50%;\n\tmargin-bottom: 22px;\n\tbox-shadow: 0 3px 0 #fff, 0px 0px 12px rgba( 51, 51, 51, 0.5 );\n}\n.ComparisonSlider__Handle::after {\n\ttop: 50%;\n\tmargin-top: 22px;\n\tbox-shadow: 0 -3px 0 #fff, 0px 0px 12px rgba( 51, 51, 51, 0.5 );\n}\n@supports (filter: drop-shadow( 0 0 0 #000 )) {\n\t.ComparisonSlider__Handle::before,\n\t.ComparisonSlider__Handle::after {\n\t\tbox-shadow: none;\n\t}\n}\n";
 document.head.insertBefore($style, document.head.firstChild);
@@ -70,2 +70,3 @@
             var $autoArea = options.autoArea || this.$el;
+            this.$el.classList.add('-auto');
             $autoArea.addEventListener('mousemove', dragging);
@@ -82,3 +83,3 @@ $autoArea.addEventListener('touchmove', dragging);
             _this.draw();
-        }, 200);
+        }, 60);
         window.addEventListener('resize', onWindowResize);
@@ -85,0 +86,0 @@ function onMouseDown(event) {

package.json

 {
   "name": "comparison-slider",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "author": "Yomotsu",
@@ -5,0 +5,0 @@ "license": "MIT",

src/comparison-slider.ts

@@ -57,2 +57,3 @@ import './style';
 			const $autoArea = options.autoArea || this.$el;
+			this.$el.classList.add( '-auto' );
 			$autoArea.addEventListener( 'mousemove', dragging );
@@ -75,3 +76,3 @@ $autoArea.addEventListener( 'touchmove', dragging );
 
-		}, 200 );
+		}, 60 );
 		window.addEventListener( 'resize', onWindowResize );
@@ -245,2 +246,2 @@
 
-} )
+} );

src/functions/debounce.ts

@@ -1,6 +0,6 @@
-export function debounce<F extends Function>( func: F, wait: number = 200 ):F {
+export function debounce<F extends Function>( func: F, wait: number = 200 ): F {
 
 	let timeoutID: number;
 
-	return <F><any>function( this: any, ...args: any[] ) {
+	return <F> <any> function( this: any, ...args: any[] ) {
 
@@ -7,0 +7,0 @@ clearTimeout(timeoutID);

src/style.ts

@@ -7,2 +7,6 @@ const $style = document.createElement( 'style' );
 }
+.ComparisonSlider.-auto,
+.ComparisonSlider.-dragging {
+	cursor: col-resize;
+}
 .ComparisonSlider__Before,
@@ -53,3 +57,2 @@ .ComparisonSlider__After {
 }
-
 .ComparisonSlider__Handle::after {
@@ -60,3 +63,2 @@ top: 50%;
 }
-
 @supports (filter: drop-shadow( 0 0 0 #000 )) {
@@ -63,0 +65,0 @@ .ComparisonSlider__Handle::before,

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

40364

increased by0.99%

Lines of code

720

increased by0.84%

Worsened metrics

Number of package files

18

decreased by-5.26%

No dependency changes