{"version":3,"file":"index.umd.cjs","sources":["../src/icons.ts","../src/index.ts"],"sourcesContent":["// https://materialdesignicons.com/\nexport const pauseSvg =\n\t'<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><title>pause</title><path d=\"M14,19H18V5H14M6,19H10V5H6V19Z\" /></svg>';\nexport const playSvg =\n\t'<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><title>play</title><path d=\"M8,5.14V19.14L19,12.14L8,5.14Z\" /></svg>';\nexport const reloadSvg =\n\t'<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><title>reload</title><path d=\"M2 12C2 16.97 6.03 21 11 21C13.39 21 15.68 20.06 17.4 18.4L15.9 16.9C14.63 18.25 12.86 19 11 19C4.76 19 1.64 11.46 6.05 7.05C10.46 2.64 18 5.77 18 12H15L19 16H19.1L23 12H20C20 7.03 15.97 3 11 3C6.03 3 2 7.03 2 12Z\" /></svg>';\nexport const skipBackwardSvg =\n\t'<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><title>skip-backward</title><path d=\"M20,5V19L13,12M6,5V19H4V5M13,5V19L6,12\" /></svg>';\nexport const skipForwardSvg =\n\t'<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><title>skip-forward</title><path d=\"M4,5V19L11,12M18,5V19H20V5M11,5V19L18,12\" /></svg>';\n","import type {\n\tIControl,\n\tMap,\n\tLayerSpecification,\n\tControlPosition,\n} from 'maplibre-gl';\n\nimport {\n\tplaySvg,\n\tpauseSvg,\n\treloadSvg,\n\tskipBackwardSvg,\n\tskipForwardSvg,\n} from './icons';\n\nconst ACTIVE_BUTTON_COLOR = 'rgb(204, 204, 204)';\n\ntype ContainerOptions = {\n\tlength: number;\n\tinterval: number;\n\tonSliderValueChange: () => void;\n};\n\nconst makeImg = (svg: string): HTMLImageElement => {\n\tconst img = document.createElement('img');\n\timg.src = `data:image/svg+xml,${encodeURIComponent(svg)}`;\n\timg.style.width = '24px';\n\timg.style.height = '24px';\n\treturn img;\n};\n\nlet timerId: number | undefined;\n\nconst makeContainer = ({\n\tlength,\n\tinterval,\n\tonSliderValueChange,\n}: ContainerOptions) => {\n\t// outest div\n\tconst container = document.createElement('div');\n\tcontainer.classList.add('maplibregl-ctrl');\n\tcontainer.classList.add('maplibregl-ctrl-group');\n\tcontainer.style.width = '240px';\n\tcontainer.style.height = '84px';\n\tcontainer.style.backgroundColor = '#fff';\n\tcontainer.style.textAlign = 'center';\n\n\tconst titleDiv = document.createElement('div');\n\ttitleDiv.innerHTML = '<br />';\n\ttitleDiv.style.marginTop = '4px';\n\tcontainer.appendChild(titleDiv);\n\n\t// temporal slider\n\tconst slider = document.createElement('input');\n\tslider.type = 'range';\n\tslider.value = '0';\n\tslider.min = '0';\n\tslider.max = String(length - 1);\n\tslider.addEventListener('input', () => {\n\t\tonSliderValueChange();\n\t});\n\tslider.style.width = '80%';\n\tslider.style.margin = '4px 0';\n\tcontainer.appendChild(slider);\n\n\t// buttons div\n\t// loop, prev, pause, play, next\n\tconst buttonsDiv = document.createElement('div');\n\tbuttonsDiv.style.display = 'flex';\n\tbuttonsDiv.style.justifyContent = 'center';\n\tbuttonsDiv.style.margin = '4px 0 0 0';\n\n\t// loop button\n\tconst setLoopEnabled = (enabled: boolean) => {\n\t\tloopButton.style.backgroundColor = enabled ? ACTIVE_BUTTON_COLOR : '';\n\t};\n\tconst isLoopEnabled = () =>\n\t\tloopButton.style.backgroundColor === ACTIVE_BUTTON_COLOR;\n\tconst loopButton = document.createElement('button');\n\tloopButton.appendChild(makeImg(reloadSvg));\n\tloopButton.style.border = '0';\n\tloopButton.style.borderRadius = '0';\n\tloopButton.style.marginRight = '16px';\n\tloopButton.style.height = '24px';\n\tloopButton.style.borderRadius = '4px';\n\tloopButton.onclick = () => setLoopEnabled(!isLoopEnabled());\n\tbuttonsDiv.appendChild(loopButton);\n\n\tconst decrement = () => {\n\t\tslider.value = String(Math.max(0, Number(slider.value) - 1));\n\t\tonSliderValueChange();\n\t\treturn Number(slider.min) < Number(slider.value);\n\t};\n\tconst increment = () => {\n\t\tif (\n\t\t\tloopButton.style.backgroundColor !== '' &&\n\t\t\tNumber(slider.value) == Number(slider.max)\n\t\t) {\n\t\t\twhile (decrement()) {}\n\t\t} else {\n\t\t\tslider.value = String(\n\t\t\t\tMath.min(Number(slider.max), Number(slider.value) + 1),\n\t\t\t);\n\t\t}\n\t\tonSliderValueChange();\n\t\treturn Number(slider.value) < Number(slider.max);\n\t};\n\n\t// prev button\n\tconst prevButton = document.createElement('button');\n\tprevButton.appendChild(makeImg(skipBackwardSvg));\n\tprevButton.onclick = decrement;\n\tprevButton.style.border = '0';\n\tprevButton.style.height = '24px';\n\tprevButton.style.borderRadius = '4px';\n\n\t// pause button\n\tconst pause = () => {\n\t\tif (timerId === undefined) return;\n\t\tclearInterval(timerId);\n\t\ttimerId = undefined;\n\t\tpauseButton.onclick = null;\n\t\tplayButton.style.backgroundColor = '';\n\t};\n\tconst pauseButton = document.createElement('button');\n\tpauseButton.appendChild(makeImg(pauseSvg));\n\tpauseButton.style.border = '0';\n\tpauseButton.style.height = '24px';\n\tpauseButton.style.borderRadius = '4px';\n\tpauseButton.onclick = pause;\n\n\t// play button\n\tconst isPlaying = () =>\n\t\tplayButton.style.backgroundColor === ACTIVE_BUTTON_COLOR;\n\tconst play = () => {\n\t\tif (isPlaying()) return;\n\t\tplayButton.style.backgroundColor = ACTIVE_BUTTON_COLOR;\n\t\ttimerId = setInterval(() => {\n\t\t\tincrement();\n\t\t}, interval);\n\t};\n\n\tconst playButton = document.createElement('button');\n\tplayButton.appendChild(makeImg(playSvg));\n\tplayButton.style.border = '0';\n\tplayButton.style.height = '24px';\n\tplayButton.style.borderRadius = '4px';\n\tplayButton.onclick = play;\n\n\t// next button\n\tconst nextButton = document.createElement('button');\n\tnextButton.appendChild(makeImg(skipForwardSvg));\n\tnextButton.style.border = '0';\n\tnextButton.style.height = '24px';\n\tnextButton.style.borderRadius = '4px';\n\tnextButton.onclick = increment;\n\n\tbuttonsDiv.appendChild(prevButton);\n\tbuttonsDiv.appendChild(pauseButton);\n\tbuttonsDiv.appendChild(playButton);\n\tbuttonsDiv.appendChild(nextButton);\n\n\tcontainer.appendChild(buttonsDiv);\n\n\treturn {\n\t\tcontainer,\n\t\ttitleDiv,\n\t\tslider,\n\t\tincrement,\n\t\tdecrement,\n\t\tisPlaying,\n\t\tplay,\n\t\tpause,\n\t\tisLoopEnabled,\n\t\tsetLoopEnabled,\n\t};\n};\n\ntype Position = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';\n\ntype TemporalFrame = {\n\ttitle: string;\n\tlayers: LayerSpecification[];\n};\n\ntype Options = {\n\tposition?: Position;\n\tinterval?: number;\n\tperformance?: boolean;\n};\n\nexport default class TemporalControl implements IControl {\n\tprivate map: Map | undefined;\n\tprivate options: Options;\n\n\tprivate container: HTMLDivElement;\n\tprivate containerTitle!: HTMLDivElement;\n\tprivate temporalSlider!: HTMLInputElement;\n\tprivate temporalFrames: TemporalFrame[];\n\n\tnext: () => boolean;\n\tprev: () => boolean;\n\tplay: () => void;\n\tpause: () => void;\n\tisPlaying: () => boolean;\n\tisLoopEnabled: () => boolean;\n\tsetLoopEnabled: (enabled: boolean) => void;\n\tgoto: (index: number) => void;\n\n\tconstructor(temporalFrames: TemporalFrame[], options: Options = {}) {\n\t\tthis.temporalFrames = temporalFrames;\n\t\tthis.options = options;\n\n\t\tconst containerOptions: ContainerOptions = {\n\t\t\tlength: this.temporalFrames.length,\n\t\t\tinterval: this.options.interval || 500,\n\t\t\tonSliderValueChange: () => this.refresh(),\n\t\t};\n\n\t\tconst {\n\t\t\tcontainer,\n\t\t\ttitleDiv,\n\t\t\tslider,\n\t\t\tincrement,\n\t\t\tdecrement,\n\t\t\tplay,\n\t\t\tpause,\n\t\t\tisPlaying,\n\t\t\tisLoopEnabled,\n\t\t\tsetLoopEnabled,\n\t\t} = makeContainer(containerOptions);\n\n\t\tthis.container = container;\n\t\tthis.containerTitle = titleDiv;\n\t\tthis.temporalSlider = slider;\n\t\tthis.next = increment;\n\t\tthis.prev = decrement;\n\t\tthis.play = play;\n\t\tthis.pause = pause;\n\t\tthis.isPlaying = isPlaying;\n\t\tthis.isLoopEnabled = isLoopEnabled;\n\t\tthis.setLoopEnabled = setLoopEnabled;\n\t\tthis.goto = (idx: number) => {\n\t\t\tslider.value = String(\n\t\t\t\tMath.min(this.temporalFrames.length - 1, Math.max(0, idx)),\n\t\t\t);\n\t\t\tthis.refresh();\n\t\t};\n\t}\n\n\tonAdd(map: Map) {\n\t\tthis.map = map;\n\t\tmap.getContainer().appendChild(this.container);\n\n\t\tthis.map.once('styledata', () => {\n\t\t\tthis.refresh();\n\t\t});\n\n\t\treturn this.container;\n\t}\n\n\tonRemove() {\n\t\tthis.container.parentNode?.removeChild(this.container);\n\t\tthis.map = undefined;\n\t}\n\n\tgetDefaultPosition(): ControlPosition {\n\t\treturn 'bottom-left';\n\t}\n\n\trefresh() {\n\t\tconst sliderValue = Number(this.temporalSlider.value);\n\t\tthis.containerTitle.innerHTML = this.temporalFrames[sliderValue].title;\n\t\tconst visibleLayerIds = this.temporalFrames[sliderValue].layers.map(\n\t\t\t(layer) => layer.id,\n\t\t);\n\t\tthis.temporalFrames.forEach((temporalFrame) => {\n\t\t\ttemporalFrame.layers.forEach((layer) =>\n\t\t\t\tthis.setVisible(layer, visibleLayerIds.includes(layer.id)),\n\t\t\t);\n\t\t});\n\t}\n\n\tprivate setVisible(layer: LayerSpecification, isVisible = true) {\n\t\tif (\n\t\t\tlayer.type === 'raster' ||\n\t\t\tlayer.type === 'fill' ||\n\t\t\tlayer.type === 'circle' ||\n\t\t\tlayer.type === 'line'\n\t\t) {\n\t\t\tif (layer.type === 'raster') {\n\t\t\t\t// when raster, set opacity as visibility for background loading\n\t\t\t\tthis.map?.setPaintProperty(\n\t\t\t\t\tlayer.id,\n\t\t\t\t\t`${layer.type}-opacity-transition`,\n\t\t\t\t\t{\n\t\t\t\t\t\t// set disable fade-in transition\n\t\t\t\t\t\tduration: 0,\n\t\t\t\t\t},\n\t\t\t\t);\n\t\t\t}\n\t\t\tlet opacity;\n\t\t\tif (isVisible) {\n\t\t\t\t// @ts-ignore\n\t\t\t\topacity = layer.paint?.[`${layer.type}-opacity`] || 1;\n\t\t\t} else {\n\t\t\t\topacity = this.options.performance ? 0.000000000000000000001 : 0;\n\t\t\t}\n\n\t\t\tthis.map?.setPaintProperty(layer.id, `${layer.type}-opacity`, opacity);\n\t\t} else {\n\t\t\tthis.map?.setLayoutProperty(\n\t\t\t\tlayer.id,\n\t\t\t\t'visibility',\n\t\t\t\tisVisible ? 'visible' : 'none',\n\t\t\t);\n\t\t}\n\t}\n}\n"],"names":["pauseSvg","playSvg","reloadSvg","skipBackwardSvg","skipForwardSvg","ACTIVE_BUTTON_COLOR","makeImg","svg","img","timerId","makeContainer","length","interval","onSliderValueChange","container","titleDiv","slider","buttonsDiv","setLoopEnabled","enabled","loopButton","isLoopEnabled","decrement","increment","prevButton","pause","pauseButton","playButton","isPlaying","play","nextButton","TemporalControl","temporalFrames","options","__publicField","containerOptions","idx","map","_a","sliderValue","visibleLayerIds","layer","temporalFrame","isVisible","opacity","_b","_c","_d"],"mappings":"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"}