mapbox-gl-compare/dist/mapbox-gl-compare.js

Swipe and sync between two maps

!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):((t="undefined"!=typeof globalThis?globalThis:t||self).mapboxgl=t.mapboxgl||{},t.mapboxgl.Compare=e())}(this,function(){"use strict";function t(t){return t&&t.__esModule&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t}var e,n;var o=(n||(n=1,e=function(){var t,e=arguments.length;if(1===e)t=arguments[0];else{t=[];for(var n=0;n<e;n++)t.push(arguments[n])}var o=[];function i(){t.forEach(function(t,e){t.on("move",o[e])})}function s(){t.forEach(function(t,e){t.off("move",o[e])})}function r(t,e){s(),function(t,e){var n=t.getCenter(),o=t.getZoom(),i=t.getBearing(),s=t.getPitch();e.forEach(function(t){t.jumpTo({center:n,zoom:o,bearing:i,pitch:s})})}(t,e),i()}return t.forEach(function(e,n){o[n]=r.bind(null,e,t.filter(function(t,e){return e!==n}))}),i(),function(){s(),o=[],t=[]}}),e),i=t(o);class s{constructor(){this._listeners={}}on(t,e){return(this._listeners[t]=this._listeners[t]||[]).push(e),this}removeListener(t,e){return this._listeners[t]=(this._listeners[t]||[]).filter(t=>t!==e),this}emit(t,e){(this._listeners[t]||[]).forEach(t=>t(e))}}function r(t,e,n,o){if(this.options=o||{},this._mapA=t,this._mapB=e,this._horizontal="horizontal"===this.options.orientation,this._onDown=this._onDown.bind(this),this._onMove=this._onMove.bind(this),this._onMouseUp=this._onMouseUp.bind(this),this._onTouchEnd=this._onTouchEnd.bind(this),this._ev=new s,this._swiper=document.createElement("div"),this._swiper.className=this._horizontal?"compare-swiper-horizontal":"compare-swiper-vertical",this._controlContainer=document.createElement("div"),this._controlContainer.className=this._horizontal?"mapboxgl-compare mapboxgl-compare-horizontal":"mapboxgl-compare",this._controlContainer.className=this._controlContainer.className,this._controlContainer.appendChild(this._swiper),"string"==typeof n&&document.body.querySelectorAll){var r=document.body.querySelectorAll(n)[0];if(!r)throw new Error("Cannot find element with specified container selector.");r.appendChild(this._controlContainer)}else{if(!(n instanceof Element&&n.appendChild))throw new Error("Invalid container specified. Must be CSS selector or HTML element.");n.appendChild(this._controlContainer)}this._bounds=e.getContainer().getBoundingClientRect();var h=(this._horizontal?this._bounds.height:this._bounds.width)/2;this._setPosition(h),this._clearSync=i(t,e),this._onResize=function(){this._bounds=e.getContainer().getBoundingClientRect(),this.currentPosition&&this._setPosition(this.currentPosition)}.bind(this),e.on("resize",this._onResize),this.options&&this.options.mousemove&&(t.getContainer().addEventListener("mousemove",this._onMove),e.getContainer().addEventListener("mousemove",this._onMove)),this._swiper.addEventListener("mousedown",this._onDown),this._swiper.addEventListener("touchstart",this._onDown)}return r.prototype={_setPointerEvents:function(t){this._controlContainer.style.pointerEvents=t,this._swiper.style.pointerEvents=t},_onDown:function(t){t.preventDefault(),t.touches?(document.addEventListener("touchmove",this._onMove),document.addEventListener("touchend",this._onTouchEnd)):(document.addEventListener("mousemove",this._onMove),document.addEventListener("mouseup",this._onMouseUp))},_setPosition:function(t){t=Math.min(t,this._horizontal?this._bounds.height:this._bounds.width);var e=this._horizontal?"translate(0, "+t+"px)":"translate("+t+"px, 0)";this._controlContainer.style.transform=e,this._controlContainer.style.WebkitTransform=e;var n=this._horizontal?"rect(0, 999em, "+t+"px, 0)":"rect(0, "+t+"px, "+this._bounds.height+"px, 0)",o=this._horizontal?"rect("+t+"px, 999em, "+this._bounds.height+"px,0)":"rect(0, 999em, "+this._bounds.height+"px,"+t+"px)";this._mapA.getContainer().style.clip=n,this._mapB.getContainer().style.clip=o,this.currentPosition=t},_onMove:function(t){this.options&&this.options.mousemove&&this._setPointerEvents(t.touches?"auto":"none"),this._horizontal?this._setPosition(this._getY(t)):this._setPosition(this._getX(t))},_onMouseUp:function(){document.removeEventListener("mousemove",this._onMove),document.removeEventListener("mouseup",this._onMouseUp),this.fire("slideend",{currentPosition:this.currentPosition})},_onTouchEnd:function(){document.removeEventListener("touchmove",this._onMove),document.removeEventListener("touchend",this._onTouchEnd),this.fire("slideend",{currentPosition:this.currentPosition})},_getX:function(t){var e=(t=t.touches?t.touches[0]:t).clientX-this._bounds.left;return e<0&&(e=0),e>this._bounds.width&&(e=this._bounds.width),e},_getY:function(t){var e=(t=t.touches?t.touches[0]:t).clientY-this._bounds.top;return e<0&&(e=0),e>this._bounds.height&&(e=this._bounds.height),e},setSlider:function(t){this._setPosition(t)},on:function(t,e){return this._ev.on(t,e),this},fire:function(t,e){return this._ev.emit(t,e),this},off:function(t,e){return this._ev.removeListener(t,e),this},remove:function(){this._clearSync(),this._mapB.off("resize",this._onResize);var t=this._mapA.getContainer();t&&(t.style.clip=null,t.removeEventListener("mousemove",this._onMove));var e=this._mapB.getContainer();e&&(e.style.clip=null,e.removeEventListener("mousemove",this._onMove)),this._swiper.removeEventListener("mousedown",this._onDown),this._swiper.removeEventListener("touchstart",this._onDown),this._controlContainer.remove()}},r});