Fixes and code cleanup

* Fixed cursor states
* Disabled hover effects for side menu entries when selection locked
This commit is contained in:
mxdanger 2022-05-07 22:22:01 -07:00
parent e438757d9a
commit e1e9539371
5 changed files with 64 additions and 61 deletions

View file

@ -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;
}

View file

@ -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 => {

View file

@ -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()

View file

@ -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"
}

View file

@ -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
}