comparison-slider - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

dist/comparison-slider.d.ts

@@ -16,10 +16,10 @@ import './style';
     handleOnlyControl: boolean;
-    destory: () => void;
+    destroy: () => void;
     private _left;
     private _width;
-    private _height;
     private _offset;
     private _auto;
     constructor($el?: HTMLElement | string, options?: Options);
-    offset: number;
+    set offset(offset: number);
+    get offset(): number;
     update(): void;
@@ -26,0 +26,0 @@ draw(): void;

dist/comparison-slider.js

@@ -11,11 +11,67 @@ /*!
 	(global = global || self, global.ComparisonSlider = factory());
-}(this, function () { 'use strict';
+}(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";
+	const $style = document.createElement('style');
+	$style.innerHTML = /* css */ `
+.ComparisonSlider {
+	position: relative;
+	overflow: hidden;
+}
+.ComparisonSlider.-auto,
+.ComparisonSlider.-dragging {
+	cursor: col-resize;
+}
+.ComparisonSlider__Before,
+.ComparisonSlider__After {
+	position: absolute;
+	top: 0;
+	left: 0;
+	display: block;
+	width: 100%;
+	height: 100%;
+	background-position: 50% 50%;
+	background-size: cover;
+}
+.ComparisonSlider__Before > img,
+.ComparisonSlider__After > img {
+	display: block;
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+}
+.ComparisonSlider__Handle {
+	cursor: col-resize;
+	position: absolute;
+	box-sizing: border-box;
+	top: 50%;
+	width: 44px;
+	height: 44px;
+	border: 3px solid #fff;
+	border-radius: 100px;
+	filter: drop-shadow( 0 0 12px rgba( 51, 51, 51, 0.5 ) );
+	background: 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%;
+}
+.ComparisonSlider__Handle::before,
+.ComparisonSlider__Handle::after {
+	content: "";
+	position: absolute;
+	left: 50%;
+	display: block;
+	width: 3px;
+	height: 1024px;
+	margin-left: -1.5px;
+	background-color: #fff;
+}
+.ComparisonSlider__Handle::before {
+	bottom: 50%;
+	margin-bottom: 22px;
+}
+.ComparisonSlider__Handle::after {
+	top: 50%;
+	margin-top: 22px;
+}
+`;
 	document.head.insertBefore($style, document.head.firstChild);
 
-	function clamp(value, min, max) {
-	    if (min === void 0) { min = 0; }
-	    if (max === void 0) { max = 1; }
+	function clamp(value, min = 0, max = 1) {
 	    return Math.max(min, Math.min(max, value));
@@ -28,3 +84,3 @@ }
 	    }
-	    var element = ($parent || document).querySelector(selectorOrHTMLElement);
+	    const element = ($parent || document).querySelector(selectorOrHTMLElement);
 	    if (element instanceof HTMLElement) {
@@ -46,27 +102,18 @@ return element;
 
-	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];
-	        }
+	function debounce(func, wait = 200) {
+	    let timeoutID;
+	    return function (...args) {
 	        clearTimeout(timeoutID);
-	        var context = this;
-	        timeoutID = window.setTimeout(function () { return func.apply(context, args); }, wait);
+	        const context = this;
+	        timeoutID = window.setTimeout(() => 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;
+	class ComparisonSlider {
+	    constructor($el = '.ComparisonSlider', options = {}) {
 	        this._left = 0;
 	        this._width = 0;
-	        this._height = 0;
 	        this._offset = 0.5;
 	        this._auto = false;
-	        var scope = this;
+	        const scope = this;
 	        this.$el = selectorToElement($el);
@@ -86,5 +133,6 @@ this.$before = selectorToElement(options.$before || '.ComparisonSlider__Before', this.$el);
 	        this.draw();
-	        var dragStartX = 0;
+	        // mouse events
+	        let dragStartX = 0;
 	        if (this._auto) {
-	            var $autoArea = options.autoArea || this.$el;
+	            const $autoArea = options.autoArea || this.$el;
 	            this.$el.classList.add('-auto');
@@ -99,5 +147,5 @@ $autoArea.addEventListener('mousemove', dragging);
 	        this.$el.addEventListener('contextmenu', onContextMenu);
-	        var onWindowResize = debounce(function () {
-	            _this.update();
-	            _this.draw();
+	        const onWindowResize = debounce(() => {
+	            this.update();
+	            this.draw();
 	        }, 60);
@@ -125,3 +173,3 @@ window.addEventListener('resize', onWindowResize);
 	            scope.update();
-	            var _event = normalizePointerEvent(event);
+	            const _event = normalizePointerEvent(event);
 	            dragStartX = _event.pageX;
@@ -137,3 +185,3 @@ scope.offset = (_event.pageX - scope._left) / scope._width;
 	        function dragging(event) {
-	            var _event = normalizePointerEvent(event);
+	            const _event = normalizePointerEvent(event);
 	            scope.offset = (_event.pageX - scope._left) / scope._width;
@@ -151,8 +199,9 @@ if (Math.abs(dragStartX - _event.pageX) > 5) {
 	        }
-	        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);
+	        //
+	        this.destroy = () => {
+	            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) {
@@ -169,28 +218,24 @@ options.autoArea.addEventListener('mousemove', dragging);
 	    }
-	    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();
+	    set offset(offset) {
+	        const _offset = clamp(offset, 0, 1);
+	        if (_offset === this._offset)
+	            return;
+	        this._offset = _offset;
+	        this.draw();
+	    }
+	    get offset() {
+	        return this._offset;
+	    }
+	    update() {
+	        const 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) {
+	    }
+	    draw() {
+	        const left = clamp(this._width * this.offset, 0, this._width);
+	        this.$handle.style.transform = `translateX( ${left}px ) translateX( -50% ) translateY( -50% )`;
+	        this.$before.style.clipPath = `inset(0 ${(1 - this.offset) * 100}% 0 0)`;
+	        this.$after.style.clipPath = `inset(0 0 0 ${this.offset * 100}%)`;
+	    }
+	    _toggleClassNames(enabled) {
 	        if (enabled) {
@@ -202,4 +247,4 @@ this.$el.classList.add('-dragging');
 	        }
-	    };
-	    ComparisonSlider.prototype._toggleTransitionMode = function (enabled) {
+	    }
+	    _toggleTransitionMode(enabled) {
 	        if (enabled) {
@@ -213,14 +258,13 @@ this.$after.style.transition = 'clip .2s';
 	        }
-	    };
-	    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); });
-	});
+	document.addEventListener('DOMContentLoaded', () => {
+	    Array.prototype.forEach.call(document.querySelectorAll('[data-comparison-slider-auto]'), ($el) => new ComparisonSlider($el));
+	}, { once: true });
 
 	return ComparisonSlider;
 
-}));
+})));

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.-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 matches(el,selector){if(!!Element.prototype.matches){return el.matches(selector)}if(!!Element.prototype.msMatchesSelector){return el.msMatchesSelector(selector)}return false}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.handleOnlyControl=options.handleOnlyControl||false;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();if(scope.handleOnlyControl){if(!matches(event.target,".ComparisonSlider__Handle"))return;startDragging(event)}else{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";const $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__Before > img,\n.ComparisonSlider__After > img {\n\tdisplay: block;\n\twidth: 100%;\n\theight: 100%;\n\tobject-fit: 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\tfilter: drop-shadow( 0 0 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.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}\n.ComparisonSlider__Handle::after {\n\ttop: 50%;\n\tmargin-top: 22px;\n}\n`;document.head.insertBefore($style,document.head.firstChild);function clamp(value,min=0,max=1){return Math.max(min,Math.min(max,value))}function selectorToElement(selectorOrHTMLElement,$parent){if(selectorOrHTMLElement instanceof HTMLElement){return selectorOrHTMLElement}const element=($parent||document).querySelector(selectorOrHTMLElement);if(element instanceof HTMLElement){return element}return document.createElement("div")}function matches(el,selector){if(!!Element.prototype.matches){return el.matches(selector)}if(!!Element.prototype.msMatchesSelector){return el.msMatchesSelector(selector)}return false}function debounce(func,wait=200){let timeoutID;return function(...args){clearTimeout(timeoutID);const context=this;timeoutID=window.setTimeout(()=>func.apply(context,args),wait)}}class ComparisonSlider{constructor($el=".ComparisonSlider",options={}){this._left=0;this._width=0;this._offset=.5;this._auto=false;const 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.handleOnlyControl=options.handleOnlyControl||false;this._auto=options.auto||false;this.update();this.draw();let dragStartX=0;if(this._auto){const $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);const onWindowResize=debounce(()=>{this.update();this.draw()},60);window.addEventListener("resize",onWindowResize);function onMouseDown(event){event.preventDefault();if(scope.handleOnlyControl){if(!matches(event.target,".ComparisonSlider__Handle"))return;startDragging(event)}else{startDragging(event)}}function onTouchStart(event){event.preventDefault();startDragging(event)}function onContextMenu(event){event.preventDefault()}function startDragging(event){scope.update();const _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){const _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.destroy=(()=>{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)})}set offset(offset){const _offset=clamp(offset,0,1);if(_offset===this._offset)return;this._offset=_offset;this.draw()}get offset(){return this._offset}update(){const rect=this.$el.getBoundingClientRect();this._left=rect.left;this._width=rect.width}draw(){const left=clamp(this._width*this.offset,0,this._width);this.$handle.style.transform=`translateX( ${left}px ) translateX( -50% ) translateY( -50% )`;this.$before.style.clipPath=`inset(0 ${(1-this.offset)*100}% 0 0)`;this.$after.style.clipPath=`inset(0 0 0 ${this.offset*100}%)`}_toggleClassNames(enabled){if(enabled){this.$el.classList.add("-dragging")}else{this.$el.classList.remove("-dragging")}}_toggleTransitionMode(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"}}}function normalizePointerEvent(event){return"ontouchstart"in window&&event instanceof TouchEvent?event.touches[0]:event}document.addEventListener("DOMContentLoaded",()=>{Array.prototype.forEach.call(document.querySelectorAll("[data-comparison-slider-auto]"),$el=>new ComparisonSlider($el))},{once:true});return ComparisonSlider});

dist/comparison-slider.module.js

@@ -7,9 +7,65 @@ /*!
  */
-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";
+const $style = document.createElement('style');
+$style.innerHTML = /* css */ `
+.ComparisonSlider {
+	position: relative;
+	overflow: hidden;
+}
+.ComparisonSlider.-auto,
+.ComparisonSlider.-dragging {
+	cursor: col-resize;
+}
+.ComparisonSlider__Before,
+.ComparisonSlider__After {
+	position: absolute;
+	top: 0;
+	left: 0;
+	display: block;
+	width: 100%;
+	height: 100%;
+	background-position: 50% 50%;
+	background-size: cover;
+}
+.ComparisonSlider__Before > img,
+.ComparisonSlider__After > img {
+	display: block;
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+}
+.ComparisonSlider__Handle {
+	cursor: col-resize;
+	position: absolute;
+	box-sizing: border-box;
+	top: 50%;
+	width: 44px;
+	height: 44px;
+	border: 3px solid #fff;
+	border-radius: 100px;
+	filter: drop-shadow( 0 0 12px rgba( 51, 51, 51, 0.5 ) );
+	background: 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%;
+}
+.ComparisonSlider__Handle::before,
+.ComparisonSlider__Handle::after {
+	content: "";
+	position: absolute;
+	left: 50%;
+	display: block;
+	width: 3px;
+	height: 1024px;
+	margin-left: -1.5px;
+	background-color: #fff;
+}
+.ComparisonSlider__Handle::before {
+	bottom: 50%;
+	margin-bottom: 22px;
+}
+.ComparisonSlider__Handle::after {
+	top: 50%;
+	margin-top: 22px;
+}
+`;
 document.head.insertBefore($style, document.head.firstChild);
 
-function clamp(value, min, max) {
-    if (min === void 0) { min = 0; }
-    if (max === void 0) { max = 1; }
+function clamp(value, min = 0, max = 1) {
     return Math.max(min, Math.min(max, value));
@@ -22,3 +78,3 @@ }
     }
-    var element = ($parent || document).querySelector(selectorOrHTMLElement);
+    const element = ($parent || document).querySelector(selectorOrHTMLElement);
     if (element instanceof HTMLElement) {
@@ -40,27 +96,18 @@ return element;
 
-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];
-        }
+function debounce(func, wait = 200) {
+    let timeoutID;
+    return function (...args) {
         clearTimeout(timeoutID);
-        var context = this;
-        timeoutID = window.setTimeout(function () { return func.apply(context, args); }, wait);
+        const context = this;
+        timeoutID = window.setTimeout(() => 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;
+class ComparisonSlider {
+    constructor($el = '.ComparisonSlider', options = {}) {
         this._left = 0;
         this._width = 0;
-        this._height = 0;
         this._offset = 0.5;
         this._auto = false;
-        var scope = this;
+        const scope = this;
         this.$el = selectorToElement($el);
@@ -80,5 +127,6 @@ this.$before = selectorToElement(options.$before || '.ComparisonSlider__Before', this.$el);
         this.draw();
-        var dragStartX = 0;
+        // mouse events
+        let dragStartX = 0;
         if (this._auto) {
-            var $autoArea = options.autoArea || this.$el;
+            const $autoArea = options.autoArea || this.$el;
             this.$el.classList.add('-auto');
@@ -93,5 +141,5 @@ $autoArea.addEventListener('mousemove', dragging);
         this.$el.addEventListener('contextmenu', onContextMenu);
-        var onWindowResize = debounce(function () {
-            _this.update();
-            _this.draw();
+        const onWindowResize = debounce(() => {
+            this.update();
+            this.draw();
         }, 60);
@@ -119,3 +167,3 @@ window.addEventListener('resize', onWindowResize);
             scope.update();
-            var _event = normalizePointerEvent(event);
+            const _event = normalizePointerEvent(event);
             dragStartX = _event.pageX;
@@ -131,3 +179,3 @@ scope.offset = (_event.pageX - scope._left) / scope._width;
         function dragging(event) {
-            var _event = normalizePointerEvent(event);
+            const _event = normalizePointerEvent(event);
             scope.offset = (_event.pageX - scope._left) / scope._width;
@@ -145,8 +193,9 @@ if (Math.abs(dragStartX - _event.pageX) > 5) {
         }
-        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);
+        //
+        this.destroy = () => {
+            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) {
@@ -163,28 +212,24 @@ options.autoArea.addEventListener('mousemove', dragging);
     }
-    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();
+    set offset(offset) {
+        const _offset = clamp(offset, 0, 1);
+        if (_offset === this._offset)
+            return;
+        this._offset = _offset;
+        this.draw();
+    }
+    get offset() {
+        return this._offset;
+    }
+    update() {
+        const 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) {
+    }
+    draw() {
+        const left = clamp(this._width * this.offset, 0, this._width);
+        this.$handle.style.transform = `translateX( ${left}px ) translateX( -50% ) translateY( -50% )`;
+        this.$before.style.clipPath = `inset(0 ${(1 - this.offset) * 100}% 0 0)`;
+        this.$after.style.clipPath = `inset(0 0 0 ${this.offset * 100}%)`;
+    }
+    _toggleClassNames(enabled) {
         if (enabled) {
@@ -196,4 +241,4 @@ this.$el.classList.add('-dragging');
         }
-    };
-    ComparisonSlider.prototype._toggleTransitionMode = function (enabled) {
+    }
+    _toggleTransitionMode(enabled) {
         if (enabled) {
@@ -207,12 +252,11 @@ this.$after.style.transition = 'clip .2s';
         }
-    };
-    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); });
-});
+document.addEventListener('DOMContentLoaded', () => {
+    Array.prototype.forEach.call(document.querySelectorAll('[data-comparison-slider-auto]'), ($el) => new ComparisonSlider($el));
+}, { once: true });
 
 export default ComparisonSlider;

package.json

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

src/comparison-slider.ts

@@ -23,7 +23,6 @@ import './style';
 	handleOnlyControl: boolean;
-	destory: () => void;
+	destroy: () => void;
 
 	private _left: number = 0;
 	private _width: number = 0;
-	private _height: number = 0;
 	private _offset: number = 0.5;
@@ -72,3 +71,3 @@ private _auto: boolean = false;
 		}
-		
+
 		this.$el.addEventListener( 'contextmenu', onContextMenu );
@@ -156,3 +155,3 @@
 		//
-		this.destory = () => {
+		this.destroy = () => {
 
@@ -205,3 +204,2 @@ this.$el.removeEventListener( 'mousedown', onMouseDown );
 		this._width = rect.width;
-		this._height = rect.height;
 
@@ -214,3 +212,4 @@ }
 		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)`;
+		this.$before.style.clipPath = `inset(0 ${ ( 1 - this.offset ) * 100 }% 0 0)`;
+		this.$after.style.clipPath = `inset(0 0 0 ${ this.offset * 100 }%)`;
 
@@ -264,2 +263,2 @@ }
 
-} );
+}, { once: true } );

src/style.ts

 const $style = document.createElement( 'style' );
-$style.innerHTML = `
+$style.innerHTML = /* css */`
 .ComparisonSlider {
@@ -22,2 +22,9 @@ position: relative;
 }
+.ComparisonSlider__Before > img,
+.ComparisonSlider__After > img {
+	display: block;
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+}
 .ComparisonSlider__Handle {
@@ -32,11 +39,5 @@ cursor: col-resize;
 	border-radius: 100px;
-	box-shadow: 0px 0px 12px rgba( 51, 51, 51, 0.5 );
+	filter: drop-shadow( 0 0 12px rgba( 51, 51, 51, 0.5 ) );
 	background: 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%;
 }
-@supports (filter: drop-shadow( 0 0 0 #000 )) {
-	.ComparisonSlider__Handle {
-		box-shadow: none;
-		filter: drop-shadow( 0 0 12px rgba( 51, 51, 51, 0.5 ) );
-	}
-}
 .ComparisonSlider__Handle::before,
@@ -56,3 +57,2 @@ .ComparisonSlider__Handle::after {
 	margin-bottom: 22px;
-	box-shadow: 0 3px 0 #fff, 0px 0px 12px rgba( 51, 51, 51, 0.5 );
 }
@@ -62,11 +62,4 @@ .ComparisonSlider__Handle::after {
 	margin-top: 22px;
-	box-shadow: 0 -3px 0 #fff, 0px 0px 12px rgba( 51, 51, 51, 0.5 );
 }
-@supports (filter: drop-shadow( 0 0 0 #000 )) {
-	.ComparisonSlider__Handle::before,
-	.ComparisonSlider__Handle::after {
-		box-shadow: none;
-	}
-}
 `;
 document.head.insertBefore( $style, document.head.firstChild );

tsconfig.json

 {
   "compilerOptions": {
+    "baseUrl": "src",
+    "outDir": "./dist",
     "declaration": true,
     "declarationDir": "./dist",
-    "outDir": "./dist",
-    "baseUrl": "src",
-    "target": "es5",
+    "target": "es2017",
     "strict": true,
-    "removeComments": true,
+    "removeComments": false,
+    "experimentalDecorators": true,
+    "noImplicitAny": true,
+    "noImplicitThis": true,
+    "noImplicitReturns": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true,
-    "experimentalDecorators": true
+    "strictNullChecks": true,
+    "strictFunctionTypes": true,
+    "noFallthroughCasesInSwitch": true
   },
-  "include": [
-    "src/**/*"
-  ],
+  "include": ["src/**/*"],
   "exclude": ["node_modules"]
 }

No alert changes

Improved metrics

Lines of code

857

increased by9.17%

Worsened metrics

Total package byte prevSize

39668

decreased by-7.4%

No dependency changes