Switch to side-by-side view

--- a
+++ b/src/krang-dataset-loaders.js
@@ -0,0 +1,162 @@
+//Branch improve-map-script, TODO:
+//Separate loader scripts from map tools scripts
+//Remake tools on cuts viewer to match tools in deepzoom-viewer
+//Think about storing marker data outside the scripts (in JSON files individual for every image)
+
+//thumbnails page
+const thumbnailsListLink = "https://storage.yandexcloud.net/krang-dataset?list-type=2&prefix=thumbnails/"
+const thumbnailsPattern = /[0-9a-f]{12}-preview.jpg/
+
+async function insertThumbnails() {
+	try {
+		const filenames = await createList(thumbnailsListLink, thumbnailsPattern);
+		const cutsList = await createList(cutsListLink, cutsPattern);
+
+		let cutsIcon = (data) => {
+			let resultText = data ? "есть фрагменты" : "нет фрагментов";
+			resultStyle = data ? 'green' : 'lightcoral';
+			result = {
+				resultText,
+				resultStyle
+			}
+			return result
+		}
+		const cardTemplate = data => `
+		<div>
+		<a href='deepzoom.html#${data.id}' class='preview-card' style='background-image: url(${data.url})'>
+			<p class='slide-id'>${data.id}</p>
+		</a>
+		<p class='preview-info' style="color: ${cutsIcon(data.hasCuts).resultStyle};">${cutsIcon(data.hasCuts).resultText}</p>
+		</div>`;
+
+		$(document).ready(() => {
+			const overviewRoot = $("#overview")
+			list.forEach(data => overviewRoot.append(cardTemplate(data)));
+			;
+		});
+
+		let prefix = "https://krang-dataset.website.yandexcloud.net/"
+		const list = filenames.map(filename => {
+			return {
+				url: prefix + filename,
+				id: filename.slice(11, 23),
+				hasCuts: false
+			}
+		})
+		compareLists(list, cutsList)
+	}
+	catch (e) {
+		document.body.insertAdjacentHTML('beforeend', `<h2 style="color: darkred">Не могу загрузить список слайдов!</h2>`)
+		console.error("Can't load list of files: ", e);
+	}
+}
+function compareLists(to, from) {
+	for (cut of from) {
+		cutId = cut.slice(0, 12)
+		for (iter of to) {
+			if (cutId == iter.id){iter.hasCuts = true}
+		}
+}
+}
+
+//cuts page
+const cutsListLink = "https://storage.yandexcloud.net/krang-dataset?list-type=2"
+const cutsPattern = /^[0-9a-f]{12}-cut__.*/
+
+async function insertCuts() {
+	try {
+		const filenames = await createList(cutsListLink, cutsPattern);
+		listTarget = document.getElementById("cuts_list");
+		filenames.forEach((filename) => {
+			const fragmentId = filename.slice(0,53);
+			listTarget.insertAdjacentHTML('beforeend', `<li><a href="/${filename}">${fragmentId}.tiff</a> (<a href="cut.html#${fragmentId}">просмотреть</a>)</li>`)
+		});
+	} catch (e) {
+		document.body.insertAdjacentHTML('beforeend', `<h2 style="color: darkred">Не могу загрузить список фрагментов!</h2>`)
+		console.error("Can't load list of files: ", e);
+	}
+}
+//general
+function traverseXmlDoc(rootTag, maxDeepness, tagCallback, path = "") {
+	if(!rootTag.tagName) return;
+	var myPath = path + "." + rootTag.tagName;
+	tagCallback(myPath, rootTag);
+	if(maxDeepness > 0) {
+		rootTag.childNodes.forEach((child) => {traverseXmlDoc(child, maxDeepness-1, tagCallback, myPath)})
+	}
+}
+
+async function createList(link, pattern){
+	try {
+		let response = await fetch(link)
+		let text = await response.text()
+		console.log("response", response)
+		let parser = new DOMParser()
+		let doc = await parser.parseFromString(text, "text/xml")
+		const filenames = []
+		const previewPattern = pattern
+		traverseXmlDoc(doc.documentElement, 5, (path, tag)=>{
+			if(path == ".ListBucketResult.Contents.Key"){
+				//console.log("filename", tag.textContent)
+				if(previewPattern.test(tag.textContent)){
+					filenames.push(tag.textContent);
+				}
+			}
+		});
+		//console.log("filenames", filenames);
+		return filenames
+	} catch(e) {
+		console.error("Error while loading list of previews", e)
+		return null;
+	}
+}
+
+//deepzoom page
+// Init Leaflet
+//bounds = {topLeft, bottomRight}
+//var bounds = [[0, 0], [-1500, 1000]];
+var map = L.map('map', {
+	crs: L.CRS.Simple,
+	//maxBounds: bounds
+});
+L.tileLayer('http://krang-dataset.website.yandexcloud.net/deepzoom/{id}/{z}/{y}/{x}.jpg', {
+	id: createSlideId(),
+	minZoom: 0,
+	maxZoom: 8,
+	minNativeZoom: 0,
+	maxNativeZoom: 7,
+	tileSize: 2048,
+	noWrap: true,
+	attributionControl: false,
+	//bounds: bounds
+}).addTo(map);
+
+map.setView([0, 0], 0)
+
+function createSlideId() {
+	const slideId = document.URL.slice(-12);
+	console.log('slideID: ' + slideId)
+	return slideId;
+}
+function openDeepzoom() {
+	let slideId = createSlideId();
+	$(document).ready(() => {
+		$('.slideId').append(slideId)
+		$('#downloadslide').append(`<a href="https://krang-dataset.website.yandexcloud.net/${slideId}.tiff">Скачать слайд ${slideId}.tiff</a>`);
+	});
+}
+async function insertCutsDeepzoom() {
+	try {
+		let slideId = createSlideId()
+		let cutsPatternDeepzoom = new RegExp(`${slideId}-cut.*`)
+		const filenames = await createList(cutsListLink, cutsPatternDeepzoom);
+		let listTarget = document.getElementById("display-cuts");
+		filenames.forEach((filename) => {
+				listTarget.insertAdjacentHTML('beforeend', `<p>Просмотреть фрагмент: <a href="/krang-dataset-viewer/cut.html#${filename.slice(0, -5)}">${filename.slice(0, -5)}</a></p>`)
+			});
+		if (filenames.length == 0){listTarget.remove()}
+	}
+	catch (e) {
+		console.error("Can't load list of files: ", e);
+	}
+}
\ No newline at end of file