comparison-slider - npm Package Compare versions

Comparing version 0.1.1 to 0.1.2

dist/comparison-slider.d.ts

@@ -7,2 +7,3 @@ import './style';
     auto?: boolean;
+    autoArea?: HTMLElement;
 }
@@ -9,0 +10,0 @@ export default class ComparisonSlider {

dist/comparison-slider.js

@@ -74,4 +74,5 @@ /*!
 	        if (this._auto) {
-	            this.$el.addEventListener('mousemove', dragging, { passive: false });
-	            this.$el.addEventListener('touchmove', dragging, { passive: false });
+	            var $autoArea = options.autoArea || this.$el;
+	            $autoArea.addEventListener('mousemove', dragging, { passive: false });
+	            $autoArea.addEventListener('touchmove', dragging, { passive: false });
 	        }
@@ -104,4 +105,4 @@ this.$el.addEventListener('mousedown', onMouseDown);
 	            scope._toggleTransitionMode(true);
-	            document.addEventListener('mousemove', dragging, { passive: false });
-	            document.addEventListener('touchmove', dragging, { passive: false });
+	            document.addEventListener('mousemove', dragging);
+	            document.addEventListener('touchmove', dragging);
 	            document.addEventListener('mouseup', endDragging);
@@ -130,2 +131,6 @@ document.addEventListener('touchend', endDragging);
 	            _this.$el.addEventListener('touchmove', dragging);
+	            if (!!options.autoArea) {
+	                options.autoArea.addEventListener('mousemove', dragging, { passive: false });
+	                options.autoArea.addEventListener('touchmove', dragging, { passive: false });
+	            }
 	            document.removeEventListener('mousemove', dragging);
@@ -160,3 +165,3 @@ document.removeEventListener('touchmove', dragging);
 	        var left = clamp(this._width * this.offset, 0, this._width);
-	        this.$handle.style.transform = "translateX( " + left + "px ) translate( -50%, -50% )";
+	        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)";
@@ -163,0 +168,0 @@ };

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){this.$el.addEventListener("mousemove",dragging,{passive:false});this.$el.addEventListener("touchmove",dragging,{passive:false})}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,{passive:false});document.addEventListener("touchmove",dragging,{passive:false});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);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 ) translate( -50%, -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__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,{passive:false});$autoArea.addEventListener("touchmove",dragging,{passive:false})}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,{passive:false});options.autoArea.addEventListener("touchmove",dragging,{passive:false})}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

@@ -68,4 +68,5 @@ /*!
         if (this._auto) {
-            this.$el.addEventListener('mousemove', dragging, { passive: false });
-            this.$el.addEventListener('touchmove', dragging, { passive: false });
+            var $autoArea = options.autoArea || this.$el;
+            $autoArea.addEventListener('mousemove', dragging, { passive: false });
+            $autoArea.addEventListener('touchmove', dragging, { passive: false });
         }
@@ -98,4 +99,4 @@ this.$el.addEventListener('mousedown', onMouseDown);
             scope._toggleTransitionMode(true);
-            document.addEventListener('mousemove', dragging, { passive: false });
-            document.addEventListener('touchmove', dragging, { passive: false });
+            document.addEventListener('mousemove', dragging);
+            document.addEventListener('touchmove', dragging);
             document.addEventListener('mouseup', endDragging);
@@ -124,2 +125,6 @@ document.addEventListener('touchend', endDragging);
             _this.$el.addEventListener('touchmove', dragging);
+            if (!!options.autoArea) {
+                options.autoArea.addEventListener('mousemove', dragging, { passive: false });
+                options.autoArea.addEventListener('touchmove', dragging, { passive: false });
+            }
             document.removeEventListener('mousemove', dragging);
@@ -154,3 +159,3 @@ document.removeEventListener('touchmove', dragging);
         var left = clamp(this._width * this.offset, 0, this._width);
-        this.$handle.style.transform = "translateX( " + left + "px ) translate( -50%, -50% )";
+        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)";
@@ -157,0 +162,0 @@ };

package.json

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

src/comparison-slider.ts

@@ -11,2 +11,3 @@ import './style';
 	auto?: boolean;
+	autoArea?: HTMLElement;
 }
@@ -56,4 +57,5 @@
 
-			this.$el.addEventListener( 'mousemove', dragging, { passive: false } );
-			this.$el.addEventListener( 'touchmove', dragging, { passive: false } );
+			const $autoArea = options.autoArea || this.$el;
+			$autoArea.addEventListener( 'mousemove', dragging, { passive: false } );
+			$autoArea.addEventListener( 'touchmove', dragging, { passive: false } );
 
@@ -103,4 +105,4 @@ }
 
-			document.addEventListener( 'mousemove', dragging, { passive: false } );
-			document.addEventListener( 'touchmove', dragging, { passive: false } );
+			document.addEventListener( 'mousemove', dragging );
+			document.addEventListener( 'touchmove', dragging );
 			document.addEventListener( 'mouseup', endDragging );
@@ -144,2 +146,7 @@ document.addEventListener( 'touchend', endDragging );
 
+			if ( !! options.autoArea ) {
+				options.autoArea.addEventListener( 'mousemove', dragging, { passive: false } );
+				options.autoArea.addEventListener( 'touchmove', dragging, { passive: false } );
+			}
+
 			document.removeEventListener( 'mousemove', dragging );
@@ -185,3 +192,3 @@ document.removeEventListener( 'touchmove', dragging );
 		const left = clamp( this._width * this.offset, 0, this._width );
-		this.$handle.style.transform = `translateX( ${ left }px ) translate( -50%, -50% )`;
+		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)`;
@@ -188,0 +195,0 @@

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

40170

increased by2.68%

Lines of code

709

increased by2.46%

No dependency changes