mirror of
https://github.com/placeAtlas/atlas.git
synced 2024-12-29 09:04:37 +01:00
Fixes and code cleanup
* Fixed cursor states * Disabled hover effects for side menu entries when selection locked
This commit is contained in:
mxdanger
parent
e438757d9a
commit
e1e9539371
5 changed files with 64 additions and 61 deletions
|
|
@ -238,12 +238,15 @@ #bottomBar {
|
|||
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 @@ @media (prefers-reduced-motion: reduce) {
|
|||
}
|
||||
}
|
||||
|
||||
#entriesList .card:hover {
|
||||
#entriesList:not(.disableHover) .card:hover {
|
||||
box-shadow: 0 0 0 .15rem rgba(var(--bs-primary-rgb), .75) !important;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 exportOverlay = document.getElementById("exportOverlay")
|
||||
const exportCloseButton = document.getElementById("exportCloseButton")
|
||||
const exportBackButton = document.getElementById("exportBackButton")
|
||||
const exportModal = new bootstrap.Modal(exportModalElement)
|
||||
|
||||
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')
|
||||
|
||||
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()
|
||||
bsOffcanvasDraw.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 => {
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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')
|
||||
showDraw.addEventListener('show.bs.offcanvas', function () {
|
||||
offcanvasDraw.addEventListener('show.bs.offcanvas', function () {
|
||||
wrapper.classList.remove('listHidden')
|
||||
wrapper.classList.add('listTransitioning')
|
||||
applyView()
|
||||
})
|
||||
|
||||
var shownDraw = document.getElementById('offcanvasDraw')
|
||||
shownDraw.addEventListener('shown.bs.offcanvas', function () {
|
||||
offcanvasDraw.addEventListener('shown.bs.offcanvas', function () {
|
||||
wrapper.classList.remove('listTransitioning')
|
||||
applyView()
|
||||
})
|
||||
|
||||
var hideDraw = document.getElementById('offcanvasDraw')
|
||||
hideDraw.addEventListener('hide.bs.offcanvas', function () {
|
||||
offcanvasDraw.addEventListener('hide.bs.offcanvas', function () {
|
||||
wrapper.classList.add('listHidden')
|
||||
wrapper.classList.add('listTransitioning')
|
||||
applyView()
|
||||
})
|
||||
|
||||
var hiddenDraw = document.getElementById('offcanvasDraw')
|
||||
hiddenDraw.addEventListener('hidden.bs.offcanvas', function () {
|
||||
offcanvasDraw.addEventListener('hidden.bs.offcanvas', function () {
|
||||
wrapper.classList.remove('listTransitioning')
|
||||
applyView()
|
||||
})
|
||||
|
||||
var showList = document.getElementById('offcanvasList')
|
||||
showList.addEventListener('show.bs.offcanvas', function (e) {
|
||||
offcanvasList.addEventListener('show.bs.offcanvas', function (e) {
|
||||
wrapper.classList.remove('listHidden')
|
||||
wrapper.classList.add('listTransitioning')
|
||||
applyView()
|
||||
})
|
||||
|
||||
var shownList = document.getElementById('offcanvasList')
|
||||
shownList.addEventListener('shown.bs.offcanvas', function (e) {
|
||||
offcanvasList.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')
|
||||
hideList.addEventListener('hide.bs.offcanvas', function (e) {
|
||||
offcanvasList.addEventListener('hide.bs.offcanvas', function () {
|
||||
wrapper.classList.add('listHidden')
|
||||
wrapper.classList.add('listTransitioning')
|
||||
applyView()
|
||||
})
|
||||
|
||||
var hiddenList = document.getElementById('offcanvasList')
|
||||
hiddenList.addEventListener('hidden.bs.offcanvas', function (e) {
|
||||
offcanvasList.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 (e) {
|
||||
objectsContainer.addEventListener("scroll", function () {
|
||||
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
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue