${el.layerNameExplanation}
`\n : \"\";\n li.innerHTML = `\n \n \n ${explanation}\n `;\n ul.appendChild(li);\n });\n checkboxWrapper.appendChild(ul);\n document.querySelector(\"#opacitySliderWrapper\").prepend(checkboxWrapper);\n\n /* Add visibility toggle functionality */\n document\n .querySelectorAll(\"[data-osdos='visibility-checkbox']\")\n .forEach((el) => {\n el.addEventListener(\"click\", (event) => {\n toggleVisibility(event, options);\n });\n });\n }\n\n /**\n * Builds the markup for the sliders.\n * @param {Object} options - The options-object given at plugin-setup\n */\n function buildMarkup(options) {\n let orderedLayerInformation = getLayerOrder(options);\n let opacitySliderWrapper = document.getElementById(\n \"opacitySliderWrapperContent\"\n );\n opacitySliderWrapper.innerHTML = \"\"; //reset\n\n orderedLayerInformation.forEach((el, index) => {\n const sliderWrapper = document.createElement(\"div\");\n sliderWrapper.className = \"osdos-layer-slider\";\n sliderWrapper.setAttribute(\"data-osd-index\", index);\n const layerControlsWrapper = document.createElement(\"div\");\n layerControlsWrapper.className = \"osdos-layer-controls-wrapper\";\n\n /* Remove button markup */\n if (options.showRemove || options.showRemove === undefined) {\n let removeButton = document.createElement(\"button\");\n removeButton.setAttribute(\"data-osdos\", \"remove-button\");\n removeButton.classList.add(\"osdos-layer-slider-remove-button\");\n removeButton.innerHTML = ``;\n removeButton.addEventListener(\"click\", () =>\n removeLayer(el.source, options)\n );\n layerControlsWrapper.appendChild(removeButton);\n }\n\n /* Up- and down-button markup */\n if (options.sortable || options.sortable === undefined) {\n const buttonWrapper = document.createElement(\"div\");\n buttonWrapper.className = \"osdos-position-controls-wrapper\";\n\n /* Up button markup */\n let buttonUp = document.createElement(\"button\");\n buttonUp.setAttribute(\"data-osdos\", \"up-button\");\n buttonUp.classList.add(\"osdos-layer-slider-up-button\");\n buttonUp.innerHTML = ``;\n buttonUp.addEventListener(\"click\", () =>\n layerForward(el.source, options)\n );\n buttonWrapper.appendChild(buttonUp);\n\n /* Down button markup */\n let buttonDown = document.createElement(\"button\");\n buttonDown.setAttribute(\"data-osdos\", \"down-button\");\n buttonDown.classList.add(\"osdos-layer-slider-down-button\");\n buttonDown.innerHTML = ``;\n buttonDown.addEventListener(\"click\", () =>\n layerBackward(el.source, options)\n );\n buttonWrapper.appendChild(buttonDown);\n layerControlsWrapper.appendChild(buttonWrapper);\n }\n\n /* Layername markup */\n let layerName = document.createElement(\"span\");\n layerName.innerHTML = el.layerName;\n layerName.classList.add(\"osodos-layer-name-wrapper\");\n layerControlsWrapper.appendChild(layerName);\n\n /* Element for the opacitycontrols */\n let opacityControlsWrapper = document.createElement(\"div\");\n opacityControlsWrapper.classList.add(\"osodos-opacity-controls-wrapper\");\n sliderWrapper.appendChild(layerControlsWrapper);\n\n /* Opacity rangeslider markup */\n if (options.showRangeSlider || options.showRangeSlider === undefined) {\n let layerOpacitySlider = document.createElement(\"input\");\n const attributes = {\n \"data-osdos\": \"layer-opacity-slider\",\n type: \"range\",\n min: \"0\",\n max: \"100\",\n name: \"opacity-slider\",\n class: \"osdos-layer-slider-range-input\",\n };\n Object.keys(attributes).forEach((attr) => {\n layerOpacitySlider.setAttribute(attr, attributes[attr]);\n });\n opacityControlsWrapper.appendChild(layerOpacitySlider);\n }\n\n /* Opacity numberinput markup */\n if (options.showNumberInput || options.showNumberInput === undefined) {\n let layerOpacitySliderValue = document.createElement(\"input\");\n const attributes = {\n \"data-osdos\": \"layer-opacity-slider-value\",\n type: \"number\",\n min: \"0\",\n max: \"100\",\n name: \"opacity-slider-value\",\n class: \"osdos-layer-slider-number-input\",\n };\n Object.keys(attributes).forEach((attr) => {\n layerOpacitySliderValue.setAttribute(attr, attributes[attr]);\n });\n opacityControlsWrapper.appendChild(layerOpacitySliderValue);\n }\n\n sliderWrapper.appendChild(opacityControlsWrapper);\n\n let currentIndex = findIndexBySource(el.source, options);\n if (options.viewer.world.getItemAt(currentIndex).osdosHidden) {\n sliderWrapper.style = \"display: none;\";\n setOpacity(currentIndex, 0, options);\n }\n opacitySliderWrapper.appendChild(sliderWrapper);\n });\n\n document\n .querySelector(\"#opacitySliderWrapper\")\n .appendChild(opacitySliderWrapper);\n\n /* Add opacity functionality to the rangeslider */\n document\n .querySelectorAll(\"[data-osdos='layer-opacity-slider']\")\n .forEach((el, index) => {\n el.setAttribute(\"data-osd-index\", index);\n [\"change\", \"input\"].forEach((eventName) => {\n el.addEventListener(eventName, (event) => {\n setOpacity(index, event.target.value / 100, options);\n if (\n options.showNumberInput ||\n options.showNumberInput === undefined\n ) {\n document.querySelector(\n `[data-osdos='layer-opacity-slider-value'][data-osd-index='${index}']`\n ).value = event.target.value;\n }\n });\n });\n });\n\n /* Add opacity functionality to the numberinput */\n document\n .querySelectorAll(\"[data-osdos='layer-opacity-slider-value']\")\n .forEach((el, index) => {\n el.setAttribute(\"data-osd-index\", index);\n el.addEventListener(\"input\", (event) => {\n setOpacity(index, event.target.value / 100, options);\n if (\n options.showRangeSlider ||\n options.showRangeSlider === undefined\n ) {\n document.querySelector(\n `[data-osdos='layer-opacity-slider'][data-osd-index='${index}']`\n ).value = event.target.value;\n }\n });\n });\n\n /* Set opacity in slider and input based on the current OSD layer opacity */\n orderedLayerInformation.forEach((el, index) => {\n let currentOpacity = options.viewer.world.getItemAt(index).getOpacity();\n if (options.showNumberInput || options.showNumberInput === undefined) {\n document.querySelector(\n `[data-osdos='layer-opacity-slider-value'][data-osd-index='${index}']`\n ).value = currentOpacity * 100;\n }\n if (options.showRangeSlider || options.showRangeSlider === undefined) {\n document.querySelector(\n `[data-osdos='layer-opacity-slider'][data-osd-index='${index}']`\n ).value = currentOpacity * 100;\n }\n });\n\n /* Add layerpicker toggle button */\n if (options.showLayerPicker || options.showLayerPicker === undefined) {\n const checkboxToggleButton = document.createElement(\"button\");\n checkboxToggleButton.className = \"osdos-layer-picker-button\";\n checkboxToggleButton.innerHTML =\n options.layerPickerButtonText || \"Layer Picker\";\n checkboxToggleButton.addEventListener(\n \"click\",\n toggleLayerPickerVisibility\n );\n opacitySliderWrapper.appendChild(checkboxToggleButton);\n }\n\n /* Disable first up- and last down-button */\n disableButtons(options);\n }\n\n /**\n * Toggles the visibility of the layerpicker\n */\n function toggleLayerPickerVisibility() {\n let picker = document.getElementById(\"checkboxWrapperContent\");\n picker.style.display = picker.style.display === \"block\" ? \"none\" : \"block\";\n }\n\n /**\n * Orders the layers in options object as they are ordered in OSD\n * @param {Object} options - The options-object given at plugin-setup\n * @returns {Array} - Orderd array with all layers\n */\n function getLayerOrder(options) {\n let itemAmount = options.viewer.world.getItemCount();\n let tempLayerInformation = [];\n for (let i = 0; i < itemAmount; i++) {\n /*\n * An Openseadragon tile stores only the tilesUrl, not the .dzi Url.\n * Therefore we have to map these to compare and reorder our layerInformation Array.\n * Every tileUrl ends with _files -> cut and replace it with .dzi and we have the providet source\n * If no tileUrl is given we have a simple image, therefor we only use .url\n */\n let currentOsdItem = options.viewer.world.getItemAt(i);\n let itemUrl = currentOsdItem.source.tilesUrl\n ? `${currentOsdItem.source.tilesUrl.slice(0, -7)}.dzi`\n : currentOsdItem.source.url;\n let temp = options.layerInformation.filter((el) => el.source === itemUrl);\n tempLayerInformation[i] = temp[0];\n }\n return tempLayerInformation;\n }\n\n /**\n * Finds the Index of an image by the given source\n * @param {String} source - The sourcepath of a layer\n * @param {Object} options - The options-object given at plugin-setup\n * @returns {number} - Index of the layer\n */\n function findIndexBySource(source, options) {\n let itemAmount = options.viewer.world.getItemCount();\n for (let i = 0; i < itemAmount; i++) {\n let currentOsdItem = options.viewer.world.getItemAt(i);\n let itemUrl = currentOsdItem.source.tilesUrl\n ? `${currentOsdItem.source.tilesUrl.slice(0, -7)}.dzi`\n : currentOsdItem.source.url;\n if (source === itemUrl) return i;\n }\n return -1;\n }\n\n /**\n * Changes the opacity to the given value based of the index\n * @param {number} index - Index of the layer which will get the new opacity\n * @param {number} opacity - New opacity for the layer\n * @param {Object} options - The options-object given at plugin-setup\n */\n function setOpacity(index, opacity, options) {\n options.viewer.world.getItemAt(index).setOpacity(opacity);\n }\n\n /**\n * Moves the image by the given values based of the index\n * @param {number} index - Index of the layer which will get moved\n * @param {number} x - Delta of the movement in x-direction\n * @param {number} y - Delta of the movement in y-direction\n */\n function moveLayer(index, x, y) {\n let currentPos = viewer.world.getItemAt(index).getBounds();\n viewer.world\n .getItemAt(index)\n .setPosition(\n new OpenSeadragon.Point(currentPos.x + x, currentPos.y + y),\n true\n );\n // TODO: Rebuild the movement Tool\n }\n\n /**\n * Moves the layer backwards if possible\n * @param {String} source - The sourcepath of the layer\n * @param {Object} options - The options-object given at plugin-setup\n */\n function layerBackward(source, options) {\n let currentIndex = findIndexBySource(source, options);\n if (currentIndex !== 0) {\n options.viewer.world.setItemIndex(\n options.viewer.world.getItemAt(currentIndex),\n currentIndex - 1\n );\n buildMarkup(options);\n // Call this function again when the switched item is hidden\n if (options.viewer.world.getItemAt(currentIndex).osdosHidden) {\n layerBackward(source, options);\n }\n }\n }\n\n /**\n * Moves the layer forward if possible\n * @param {String} source - The sourcepath of the layer\n * @param {Object} options - The options-object given at plugin-setup\n */\n function layerForward(source, options) {\n let currentIndex = findIndexBySource(source, options);\n if (options.viewer.world.getItemCount() > currentIndex + 1) {\n options.viewer.world.setItemIndex(\n options.viewer.world.getItemAt(currentIndex),\n currentIndex + 1\n );\n buildMarkup(options);\n // Call this function again when the switched item is hidden\n if (options.viewer.world.getItemAt(currentIndex).osdosHidden) {\n layerForward(source, options);\n }\n }\n }\n\n /**\n * Remove a layer, by setting the opacity to zero and therefore not rendering the corresponding markup\n * @param {String} source - The sourcepath of the layer\n * @param {Object} options - The options-object given at plugin-setup\n */\n function removeLayer(source, options) {\n let currentIndex = findIndexBySource(source, options);\n setOpacity(currentIndex, 0, options);\n options.viewer.world.getItemAt(currentIndex).osdosHidden = true;\n buildMarkup(options);\n if (options.showLayerPicker || options.showLayerPicker === undefined) {\n document.querySelector(`[data-osdos-source=\"${source}\"]`).checked = false;\n }\n }\n\n /**\n * Adding a layer, by setting the opacity to max(1)\n * @param {String} source - The sourcepath of the layer\n * @param {Object} options - The options-object given at plugin-setup\n */\n function addLayer(source, options) {\n let currentIndex = findIndexBySource(source, options);\n setOpacity(currentIndex, 1, options);\n options.viewer.world.getItemAt(currentIndex).osdosHidden = false;\n buildMarkup(options);\n document.querySelector(`[data-osdos-source=\"${source}\"]`).checked = true;\n }\n\n /**\n * Toggles the visibility of a layer based on a given event\n * @param {Event} event - The clickevent of a checkbox\n * @param {Object} options - The options-object given at plugin-setup\n */\n function toggleVisibility(event, options) {\n let index = findIndexBySource(\n event.target.getAttribute(\"data-osdos-source\"),\n options\n );\n if (event.target.checked && index != -1) {\n addLayer(event.target.getAttribute(\"data-osdos-source\"), options);\n } else if (!event.target.checked && index != -1) {\n removeLayer(event.target.getAttribute(\"data-osdos-source\"), options);\n }\n }\n\n /**\n * Sets the disabled class for the first up-button and the last down button\n * @param {Object} options - The options-object given at plugin-setup\n */\n function disableButtons(options) {\n // Get all disabled buttons and remove disabled\n document.querySelectorAll(\".opacity-slider-disabled\").forEach((el) => {\n el.classList.remove(\"osdos-curser-not-allowed\");\n el.disabled = false;\n });\n // Get last down button and set disabled\n let firstElement = document.querySelector(\n \"[data-osd-index='0'] [data-osdos='down-button']\"\n );\n if (firstElement !== null) {\n firstElement.classList.add(\"osdos-curser-not-allowed\");\n firstElement.disabled = true;\n }\n // Get first up button and set disabled\n let lastElement = document.querySelector(\n `[data-osd-index='${\n options.viewer.world.getItemCount() - 1\n }'] [data-osdos='up-button']`\n );\n if (lastElement !== null) {\n lastElement.classList.add(\"osdos-curser-not-allowed\");\n lastElement.disabled = true;\n }\n }\n})(OpenSeadragon);\n"]}