Fixes and code cleanup

* Fixed cursor states
* Disabled hover effects for side menu entries when selection locked

web/_css/style.css

@@ -238,12 +238,15 @@ body[data-init-done] .listTransitioning #innerContainer {
 	bottom: 0;
 	left: 0;
 	right: 0;
-	transition: left .3s ease-in-out, padding-left .3s linear;
 	padding-left: max(0.5rem, env(safe-area-inset-left)) !important;
 	padding-right: max(0.5rem, env(safe-area-inset-right)) !important;
 	padding-bottom: max(0.5rem, env(safe-area-inset-bottom)) !important;
 }
 
+#wrapper.listTransitioning #bottomBar {
+    transition: left .3s ease-in-out, padding-left .3s linear;
+}
+
 @media (prefers-reduced-motion: reduce) {
 	#bottomBar {
 		transition: none;
@@ -369,7 +372,7 @@ body[data-init-done] #timeControlsTooltip[data-force-visible] {
 	}
 }
 
-#entriesList .card:hover {
+#entriesList:not(.disableHover) .card:hover {
 	box-shadow: 0 0 0 .15rem rgba(var(--bs-primary-rgb), .75) !important;
 }
 

web/_js/draw.js

@@ -32,12 +32,8 @@ const periodsAdd = document.getElementById('periodsAdd')
 const exportButton = document.getElementById("exportButton")
 const cancelButton = document.getElementById("cancelButton")
 
-const exportModal = new bootstrap.Modal(document.getElementById("exportModal"))
 const exportModalElement = document.getElementById("exportModal")
-
+const exportModal = new bootstrap.Modal(exportModalElement)
-const exportOverlay = document.getElementById("exportOverlay")
-const exportCloseButton = document.getElementById("exportCloseButton")
-const exportBackButton = document.getElementById("exportBackButton")
 
 const nameField = document.getElementById("nameField")
 const descriptionField = document.getElementById("descriptionField")
@@ -63,7 +59,7 @@ let pathWithPeriods = []
 let periodGroupElements = []
 
 let disableDrawingOverride = false
-let drawing = true
+let drawing = false
 
 let undoHistory = []
 
@@ -81,16 +77,13 @@ const periodClipboard = {
 
 window.initDraw = initDraw
 function initDraw() {
+	// Adds exit draw button and removes list button
+	showListButton.insertAdjacentHTML("afterend", '<button class="btn btn-outline-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDraw" aria-controls="offcanvasDraw">Menu</button><a id="drawBackButton" class="btn btn-outline-primary" href="./">Exit Draw Mode</a>')
+	showListButton.remove()
 
+	// Opens draw menu
 	wrapper.classList.remove('listHidden')
-
+	bsOffcanvasDraw.show()
-	var backButton = document.getElementById("showListButton")
-	backButton.insertAdjacentHTML("afterend", '<button class="btn btn-outline-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDraw" aria-controls="offcanvasDraw">Menu</button><a id="drawBackButton" class="btn btn-outline-primary" href="./">Exit Draw Mode</a>')
-	backButton.remove()
-
-	var myOffcanvas = document.getElementById("offcanvasDraw")
-	var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
-	bsOffcanvas.show()
 
 	window.render = render
 	window.renderBackground = renderBackground
@@ -144,7 +137,6 @@ function initDraw() {
 
 	container.addEventListener("mouseup", function (e) {
 
-
 		if (Math.abs(lastPos[0] - e.clientX) + Math.abs(lastPos[1] - e.clientY) <= 4 && drawing) {
 
 			const coords = getCanvasCoords(e.clientX, e.clientY)
@@ -339,6 +331,7 @@ function initDraw() {
 		updatePath()
 		drawing = false
 		disableDrawingOverride = true
+		container.style.cursor = "default"
 		objectInfoBody.classList.remove("d-none")
 		drawControlsBody.classList.add("d-none")
 		;[...document.querySelectorAll("#objectInfo textarea")].forEach(el => {
@@ -397,6 +390,7 @@ function initDraw() {
 	function back() {
 		drawing = true
 		disableDrawingOverride = false
+		container.style.cursor = "crosshair"
 		updatePath()
 		objectInfoBody.classList.add("d-none")
 		drawControlsBody.classList.remove("d-none")
@@ -498,16 +492,13 @@ function initDraw() {
 
 
 	function addFieldButton(inputButton, inputGroup, array, index, name) {
-		console.log("add button fired")
 		if (inputButton.title == "Remove " + name) {
-			console.log("add (now remove) button fired")
 			removeFieldButton(inputGroup, array, index)
 			return
 		}
 		inputButton.className = "btn btn-outline-secondary"
 		inputButton.title = "Remove " + name
 		inputButton.innerHTML = '<i class="bi bi-trash-fill" aria-hidden="true"></i>'
-		console.log(array)
 		if (name == "website") {
 			addWebsiteFields(null, array.length, array)
 		} else if (name == "subreddit") {
@@ -520,10 +511,8 @@ function initDraw() {
 	}
 
 	function removeFieldButton(inputGroup, array, index) {
-		console.log("remove button fired")
 		delete array[index]
 		inputGroup.remove()
-		console.log(array)
 	}
 
 	function addWebsiteFields(link, index, array) {
@@ -703,7 +692,9 @@ function initDraw() {
 	}
 
 	if (params.has('id')) {
-		const entry = getEntry(params.get('id'))
+		entryId = params.get('id')
+		const entry = getEntry(entryId)
+
 		nameField.value = entry.name
 		descriptionField.value = entry.description
 
@@ -737,7 +728,6 @@ function initDraw() {
 		}
 		redoButton.disabled = true
 		undoButton.disabled = false
-		entryId = params.get('id')
 
 		Object.entries(entry.path).forEach(([period, path]) => {
 			period.split(", ").forEach(period => {

web/_js/infoblock.js

@@ -41,7 +41,7 @@ function createInfoBlock(entry, isPreview) {
 	linkElement.className = "text-decoration-none d-flex justify-content-between text-body"
 	if (isPreview) linkElement.href = "#"
 	else {
-		let targetPeriod = formatPeriod(currentPeriod, currentPeriod, currentVariation)
+		const targetPeriod = formatPeriod(currentPeriod, currentPeriod, currentVariation)
 		linkElement.href = "#" + entry.id
 		if (targetPeriod && targetPeriod != defaultPeriod) linkElement.href += "/" + targetPeriod
 	}
@@ -50,7 +50,7 @@ function createInfoBlock(entry, isPreview) {
 	linkNameElement.textContent = entry.name
 	headerElement.appendChild(linkElement)
 	linkElement.appendChild(linkNameElement)
-	linkElement.insertAdjacentHTML("beforeend", '<i class="bi bi-link-45deg align-self-center link-primary" aria-hidden="true"></i>');// '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-link-45deg ms-1 align-self-center flex-shrink-0" viewBox="0 0 16 16"><path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z"/><path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z"/></svg>')
+	linkElement.insertAdjacentHTML("beforeend", '<i class="bi bi-link-45deg align-self-center link-primary" aria-hidden="true"></i>')
 	element.appendChild(headerElement)
 
 	const bodyElement = document.createElement("div")
@@ -60,6 +60,7 @@ function createInfoBlock(entry, isPreview) {
 	if (entry.description) {
 		const descElement = document.createElement("div")
 		descElement.id = "objectDescription"
+		// Formats single line break as  br and two line breaks as a new paragraph
 		let formattedDesc = entry.description.replace(/\n{2}/g, '</p><p>')
 		formattedDesc = formattedDesc.replace(/\n/g, '<br>')
 		descElement.innerHTML = '<p>' + formattedDesc + '</p>'
@@ -75,7 +76,7 @@ function createInfoBlock(entry, isPreview) {
 	element.appendChild(listElement)
 
 	if (entry.diff) {
-		let diffElement = createInfoListItem("Diff: ", entry.diff)
+		const diffElement = createInfoListItem("Diff: ", entry.diff)
 		if (entry.diff == "add") {
 			diffElement.className = "list-group-item list-group-item-success"
 		} else if (entry.diff == "edit") {
@@ -86,6 +87,7 @@ function createInfoBlock(entry, isPreview) {
 		listElement.appendChild(diffElement)
 	}
 
+	// Enetry data submitted to preview does not include center or path
 	if (!isPreview) {
 		const [x, y] = entry.center
 		listElement.appendChild(createInfoListItem("Position: ", `${Math.floor(x)}, ${Math.floor(y)}`))
@@ -174,15 +176,16 @@ function createInfoBlock(entry, isPreview) {
 		})
 	}
 
+	// Adds id footer
 	const idElement = document.createElement("div")
 	idElement.className = "py-1"
 	createLabel("ID: ", entry.id, idElement)
-
 	const idElementContainer = document.createElement("div")
 	idElementContainer.className = "card-footer d-flex justify-content-between align-items-center"
 	idElementContainer.appendChild(idElement)
 	element.appendChild(idElementContainer)
 
+	// Adds edit button only if element is not deleted
 	if (!isPreview && (!entry.diff || entry.diff !== "delete")) {
 		const editElement = document.createElement("a")
 		editElement.textContent = "Edit"
@@ -192,6 +195,7 @@ function createInfoBlock(entry, isPreview) {
 		idElementContainer.appendChild(editElement)
 	}
 
+	// Removes empty elements
 	if (!bodyElement.hasChildNodes()) bodyElement.remove()
 	if (!linkListElement.hasChildNodes()) linkListElement.remove()
 	if (!listElement.hasChildNodes()) listElement.remove()

web/_js/main.js

@@ -475,6 +475,8 @@ async function init() {
 	window.addEventListener("mouseup", function (e) {
 		if (hovered.length > 0) {
 			container.style.cursor = "pointer"
+		} else if (drawing == true) {
+			container.style.cursor = "crosshair"
 		} else {
 			container.style.cursor = "default"
 		}

web/_js/view.js

@@ -27,6 +27,13 @@ const backgroundContext = backgroundCanvas.getContext("2d")
 
 const wrapper = document.getElementById("wrapper")
 
+const showListButton = document.getElementById("showListButton")
+const offcanvasList = document.getElementById("offcanvasList")
+const bsOffcanvasList = new bootstrap.Offcanvas(offcanvasList)
+
+const offcanvasDraw = document.getElementById("offcanvasDraw")
+const bsOffcanvasDraw = new bootstrap.Offcanvas(offcanvasDraw)
+
 const objectsContainer = document.getElementById("objectsList")
 const closeObjectsListButton = document.getElementById("closeObjectsListButton")
 const objectsListOverflowNotice = document.getElementById("objectsListOverflowNotice")
@@ -34,7 +41,7 @@ const objectsListOverflowNotice = document.getElementById("objectsListOverflowNo
 const filterInput = document.getElementById("searchList")
 
 const entriesList = document.getElementById("entriesList")
-const hideListButton = document.getElementById("hideListButton")
+
 let entriesListShown = false
 
 let sortedAtlas
@@ -61,9 +68,9 @@ let lastPos = [0, 0]
 
 let fixed = false; // Fix hovered items in place, so that clicking on links is possible
 
-filterInput.addEventListener("input", function (e) {
+filterInput.addEventListener("input", function () {
 	entriesOffset = 0
-	entriesList.innerHTML = ""
+	entriesList.replaceChildren()
 	entriesList.appendChild(moreEntriesButton)
 
 	if (this.value === "") {
@@ -77,50 +84,42 @@ filterInput.addEventListener("input", function (e) {
 
 })
 
-document.getElementById("sort").addEventListener("input", function (e) {
+document.getElementById("sort").addEventListener("input", function () {
 	if (this.value != "relevant") {
 		defaultSort = this.value
 	}
-
 	resetEntriesList(filterInput.value.toLowerCase(), this.value)
-
 })
 
-var showDraw = document.getElementById('offcanvasDraw')
+offcanvasDraw.addEventListener('show.bs.offcanvas', function () {
-showDraw.addEventListener('show.bs.offcanvas', function () {
 	wrapper.classList.remove('listHidden')
 	wrapper.classList.add('listTransitioning')
 	applyView()
 })
 
-var shownDraw = document.getElementById('offcanvasDraw')
+offcanvasDraw.addEventListener('shown.bs.offcanvas', function () {
-shownDraw.addEventListener('shown.bs.offcanvas', function () {
 	wrapper.classList.remove('listTransitioning')
 	applyView()
 })
 
-var hideDraw = document.getElementById('offcanvasDraw')
+offcanvasDraw.addEventListener('hide.bs.offcanvas', function () {
-hideDraw.addEventListener('hide.bs.offcanvas', function () {
 	wrapper.classList.add('listHidden')
 	wrapper.classList.add('listTransitioning')
 	applyView()
 })
 
-var hiddenDraw = document.getElementById('offcanvasDraw')
+offcanvasDraw.addEventListener('hidden.bs.offcanvas', function () {
-hiddenDraw.addEventListener('hidden.bs.offcanvas', function () {
 	wrapper.classList.remove('listTransitioning')
 	applyView()
 })
 
-var showList = document.getElementById('offcanvasList')
+offcanvasList.addEventListener('show.bs.offcanvas', function (e) {
-showList.addEventListener('show.bs.offcanvas', function (e) {
 	wrapper.classList.remove('listHidden')
 	wrapper.classList.add('listTransitioning')
 	applyView()
 })
 
-var shownList = document.getElementById('offcanvasList')
+offcanvasList.addEventListener('shown.bs.offcanvas', function (e) {
-shownList.addEventListener('shown.bs.offcanvas', function (e) {
 	entriesListShown = true
 	wrapper.classList.remove('listTransitioning')
 	updateHovering(e)
@@ -129,15 +128,13 @@ shownList.addEventListener('shown.bs.offcanvas', function (e) {
 	updateLines()
 })
 
-var hideList = document.getElementById('offcanvasList')
+offcanvasList.addEventListener('hide.bs.offcanvas', function () {
-hideList.addEventListener('hide.bs.offcanvas', function (e) {
 	wrapper.classList.add('listHidden')
 	wrapper.classList.add('listTransitioning')
 	applyView()
 })
 
-var hiddenList = document.getElementById('offcanvasList')
+offcanvasList.addEventListener('hidden.bs.offcanvas', function (e) {
-hiddenList.addEventListener('hidden.bs.offcanvas', function (e) {
 	entriesListShown = false
 	wrapper.classList.remove('listTransitioning')
 	updateHovering(e)
@@ -147,11 +144,12 @@ hiddenList.addEventListener('hidden.bs.offcanvas', function (e) {
 })
 
 closeObjectsListButton.addEventListener("click", function () {
+	closeObjectsListButton.classList.add("d-none")
+	objectsListOverflowNotice.classList.add("d-none")
+	entriesList.classList.remove("disableHover")
 	hovered = []
 	objectsContainer.replaceChildren()
 	updateLines()
-	closeObjectsListButton.classList.add("d-none")
-	objectsListOverflowNotice.classList.add("d-none")
 	fixed = false
 	render()
 })
@@ -159,6 +157,7 @@ closeObjectsListButton.addEventListener("click", function () {
 
 function toggleFixed(e, tapped) {
 	if (!fixed && hovered.length == 0) {
+		entriesList.classList.remove("disableHover")
 		return 0
 	}
 	fixed = !fixed
@@ -166,6 +165,7 @@ function toggleFixed(e, tapped) {
 		updateHovering(e, tapped)
 		render()
 	}
+	entriesList.classList.add("disableHover")
 	objectsListOverflowNotice.classList.add("d-none")
 }
 
@@ -174,14 +174,14 @@ window.addEventListener("mousemove", updateLines)
 window.addEventListener("dblClick", updateLines)
 window.addEventListener("wheel", updateLines)
 
-
+objectsContainer.addEventListener("scroll", function () {
-objectsContainer.addEventListener("scroll", function (e) {
 	updateLines()
 })
 
 window.addEventListener("resize", function (e) {
 	//console.log(document.documentElement.clientWidth, document.documentElement.clientHeight)
 
+	// Legacy code
 	let viewportWidth = document.documentElement.clientWidth
 
 	if (document.documentElement.clientWidth > 2000 && viewportWidth <= 2000) {
@@ -490,10 +490,13 @@ function buildObjectsList(filter = null, sort = null) {
 				previousScaleZoomOrigin = [scaleZoomOrigin[0], scaleZoomOrigin[1]]
 				applyView()
 			}
-			if (document.documentElement.clientWidth < 500) {
+			// Legacy code
+			/*if (document.documentElement.clientWidth < 500) {
 				objectsContainer.replaceChildren()
 
 				entriesListShown = false
+				
+				bsOffcanvasList.hide()
 				wrapper.classList.add("listHidden")
 
 				zoom = 4
@@ -523,11 +526,10 @@ function buildObjectsList(filter = null, sort = null) {
 				render()
 				updateLines()
 
-			}
+			}*/
-
 		})
 
-		element.addEventListener("mouseleave", function (e) {
+		element.addEventListener("mouseleave", function () {
 			if (!fixed && !dragging) {
 				zoomOrigin = [previousScaleZoomOrigin[0] * zoom, previousScaleZoomOrigin[1] * zoom]
 				scaleZoomOrigin = [previousScaleZoomOrigin[0], previousScaleZoomOrigin[1]]
@@ -738,8 +740,8 @@ function updateHovering(e, tapped) {
 				} else {
 					closeObjectsListButton.classList.add("d-none")
 					objectsListOverflowNotice.classList.add("d-none")
+					entriesList.classList.remove("disableHover")
 				}
-
 				render()
 			}
 		}
@@ -782,7 +784,7 @@ function highlightEntryFromUrl() {
 					objectEditNav.innerText = "Edit"
 					objectEditNav.href = "./?mode=draw&id=" + id
 					objectEditNav.title = "Edit " + entry.name
-					document.getElementById("showListButton").parentElement.appendChild(objectEditNav)
+					showListButton.parentElement.appendChild(objectEditNav)
 				}
 			} else if (entry.diff == "delete" && document.getElementById("objectEditNav")) {
 				document.getElementById("objectEditNav").remove()
@@ -811,11 +813,13 @@ function highlightEntryFromUrl() {
 
 			//console.log(zoomOrigin)
 
+			closeObjectsListButton.classList.remove("d-none")
+			entriesList.classList.add("disableHover")
+
 			applyView()
 			hovered = [entry]
 			render()
 			hovered[0].element = infoElement
-			closeObjectsListButton.classList.remove("d-none")
 			updateLines()
 			fixed = true
 		}