index.html

<div id="output" style="font-size: small;"></div>
<div id="seadragon-viewer"
	style="position: absolute; left: 0; top: 30px; right: 0; bottom: 0;"></div>
<script src="openseadragon.min.js"></script>
<script type="text/javascript">

    const BUCKET = getUrlParamValue('bucket');
    const COLLECTION_MODE = getUrlParamValue('collectionMode');
    const COLLECTION_ROWS = getUrlParamValue('collectionRows');
    const LIMIT = getUrlParamValue('limit');

    if (!BUCKET) alert("No bucket provided");

    let headers = new Headers();
    headers.append("Accept", "application/json");

    let path = BUCKET;
    if (path.endsWith('/')) path = path.slice(0, -1);
    
    let ifDataProxy = (new URL(path).host) === "data-proxy.ebrains.eu"; 
    console.log("data-proxy.ebrains.eu? " + ifDataProxy);
    
    console.log(path + "?delimiter=/");
    
    fetch(path + "?delimiter=/" + (LIMIT ? "&limit=" + LIMIT : ""), {headers})
    .then(response => response.json())
    .then(value => {
        var dzis = [];
        //Data Proxy has it in "objects" array
        for (let dir of ((ifDataProxy) ? value.objects : value)) {
            dir = dir.subdir;
            if (dir) {
                let name = dir.substring(0, dir.lastIndexOf("."));
                let url = path + "/" + dir + name + ".dzi";
                console.log(url);
                dzis.push(url);
            }
        }
        
        //console.log("dzis: " + dzis); 

        var viewer = OpenSeadragon({
            id: "seadragon-viewer",
            prefixUrl: "images/",
            sequenceMode: (!COLLECTION_MODE),
            showReferenceStrip: (!COLLECTION_MODE),
            collectionMode: COLLECTION_MODE,
            collectionRows: COLLECTION_ROWS,
            tileSources: dzis
        });
        
        var helpButton = new OpenSeadragon.Button({
        	tooltip: 'Open help in a new window',
        	srcRest: 'images/question_rest.png',
        	srcGroup: 'images/question_grouphover.png',
        	srcHover: 'images/question_hover.png',
        	srcDown: 'images/question_pressed.png',
        	onClick: openHelpWindow
    	});
        
        //viewer.addControl(helpButton.element, { anchor: OpenSeadragon.ControlAnchor.TOP_LEFT });
        viewer.buttons.buttons.push(helpButton);
		viewer.buttons.element.appendChild(helpButton.element);

        
        if (viewer.sequenceMode) {
        	viewer.addHandler('open', function() {
        		document.getElementById("output").innerHTML = dzis[viewer.currentPage()];
          	});
        } else {
        	
        	var hitTest = function(position) {
            	
                var box;
                var count = viewer.world.getItemCount();
                for (var i = 0; i < count; i++) {
                    box = viewer.world.getItemAt(i).getBounds();
                    if (position.x > box.x &&
                            position.y > box.y && 
                            position.x < box.x + box.width &&
                            position.y < box.y + box.height) return i;
                }

                return -1;
            };
    		
            var viewerElement = document.getElementById("seadragon-viewer");
            viewerElement.addEventListener('mousemove', function(event) {
            	var pixel = new OpenSeadragon.Point(event.clientX, event.clientY);
                pixel.y -= viewerElement.offsetTop;
                var index = hitTest(viewer.viewport.pointFromPixel(pixel));
                var outputElement = document.getElementById("output");
                outputElement.innerHTML = (index === -1 ? '' : dzis[index]);
            });

    /*         viewer.addHandler('canvas-click', function(event) {
            	if (!event.quick) return;

                var index = hitTest(viewer.viewport.pointFromPixel(event.position));   
                if (index !== -1) {
                    viewer.viewport.fitBounds(viewer.world.getItemAt(index).getBounds());
                }
            }); */
        }
        
    });
       
    function getUrlParamValue(paramName) {
        return (new URL(window.location)).searchParams.get(paramName);
    }
    
    function openHelpWindow() {
    	window.open('https://wiki.uio.no/projects/navigator3/index.php/Multi-Image_OpenSeadragon_Viewer_Help', '_blank')
    }

</script>