diff --git a/web/_js/draw.js b/web/_js/draw.js
index 7761b6c2..7498195c 100644
--- a/web/_js/draw.js
+++ b/web/_js/draw.js
@@ -843,7 +843,11 @@ function initPeriodGroups() {
startPeriodEl.max = variationsConfig[variation].drawablePeriods[1]
endPeriodEl.max = variationsConfig[variation].drawablePeriods[1]
startPeriodEl.value = start
+ if (startPeriodEl.value == startPeriodEl.min) startPeriodLeftEl.disabled = true
+ if (startPeriodEl.value == startPeriodEl.max) startPeriodRightEl.disabled = true
endPeriodEl.value = end
+ if (endPeriodEl.value == endPeriodEl.min) endPeriodLeftEl.disabled = true
+ if (endPeriodEl.value == endPeriodEl.max) endPeriodRightEl.disabled = true
// Adds tick marks to assit in preventing overlap
startPeriodListEl.innerHTML = ''
@@ -880,7 +884,7 @@ function initPeriodGroups() {
timelineSlider.value = parseInt(value)
updateTime(parseInt(value), variation)
- // Set disabled states
+ // Set start incremental button disabled states
if (startPeriodEl.value == startPeriodEl.min) {
startPeriodLeftEl.disabled = true
startPeriodRightEl.disabled = false
@@ -916,7 +920,7 @@ function initPeriodGroups() {
timelineSlider.value = parseInt(value)
updateTime(parseInt(value), variation)
- // Set disabled states
+ // Set end incremental button disabled states
if (endPeriodEl.value == endPeriodEl.min) {
endPeriodLeftEl.disabled = true
endPeriodRightEl.disabled = false
@@ -961,16 +965,12 @@ function initPeriodGroups() {
event.target.innerHTML = ' End'
periodClipboard.index = index
periodClipboard.path = [...pathWithPeriods[index][1]]
- startPeriodEl.disabled = true
- endPeriodEl.disabled = true
updatePeriodGroups()
} else if (event.target.textContent === " End") {
event.target.className = "period-copy btn btn-secondary btn-sm flex-fill"
event.target.innerHTML = ' Copy'
periodClipboard.index = null
periodClipboard.path = null
- startPeriodEl.disabled = false
- endPeriodEl.disabled = false
updatePeriodGroups()
} else if (event.target.textContent === " Paste") {
pathWithPeriods[index][1] = [...periodClipboard.path]
@@ -994,9 +994,16 @@ function initPeriodGroups() {
periodGroupElements.push({
periodGroupEl,
startPeriodEl,
+ startPeriodLeftEl,
+ startPeriodRightEl,
+ startPeriodViewEl,
endPeriodEl,
+ endPeriodLeftEl,
+ endPeriodRightEl,
+ endPeriodViewEl,
periodVariationEl,
periodCopyEl,
+ periodDeleteEl,
periodStatusEl
})
})
@@ -1014,10 +1021,14 @@ function updatePeriodGroups() {
const {
periodGroupEl,
startPeriodEl,
+ startPeriodLeftEl,
+ startPeriodRightEl,
endPeriodEl,
+ endPeriodLeftEl,
+ endPeriodRightEl,
periodVariationEl,
periodCopyEl,
- periodStatusEl
+ periodDeleteEl
} = elements
if (periodGroupEl.dataset.active === "true") lastActivePathIndex = index
@@ -1046,19 +1057,60 @@ function updatePeriodGroups() {
if (index !== periodClipboard.index) {
periodCopyEl.innerHTML = ' Paste'
if (JSON.stringify(pathWithPeriods[index][1]) === JSON.stringify(periodClipboard.path)) {
+ // If contents are identical prevent pasting
periodCopyEl.innerHTML = ' Paste'
periodCopyEl.disabled = true
} else {
+ // Ready to paste
periodCopyEl.innerHTML = ' Paste'
periodCopyEl.disabled = false
}
} else {
+ // Stop paste
periodCopyEl.className = "period-copy btn btn-primary btn-sm flex-fill"
periodCopyEl.innerHTML = ' End'
+ periodDeleteEl.disabled = true
+ startPeriodEl.disabled = true
+ startPeriodLeftEl.disabled = true
+ startPeriodRightEl.disabled = true
+ endPeriodEl.disabled = true
+ endPeriodLeftEl.disabled = true
+ endPeriodRightEl.disabled = true
}
} else {
+ // Default state
periodCopyEl.innerHTML = ' Copy'
periodCopyEl.disabled = false
+ startPeriodEl.disabled = false
+ endPeriodEl.disabled = false
+
+ // If one period disable delete
+ if (pathWithPeriods.length === 1) periodDeleteEl.disabled = true
+ else periodDeleteEl.disabled = false
+
+ // Set start incremental button disabled states
+ if (startPeriodEl.value == startPeriodEl.min) {
+ startPeriodLeftEl.disabled = true
+ startPeriodRightEl.disabled = false
+ } else if (startPeriodEl.value == startPeriodEl.max) {
+ startPeriodLeftEl.disabled = false
+ startPeriodRightEl.disabled = true
+ } else {
+ startPeriodLeftEl.disabled = false
+ startPeriodRightEl.disabled = false
+ }
+
+ // Set end incremental button disabled states
+ if (endPeriodEl.value == endPeriodEl.min) {
+ endPeriodLeftEl.disabled = true
+ endPeriodRightEl.disabled = false
+ } else if (endPeriodEl.value == endPeriodEl.max) {
+ endPeriodLeftEl.disabled = false
+ endPeriodRightEl.disabled = true
+ } else {
+ endPeriodLeftEl.disabled = false
+ endPeriodRightEl.disabled = false
+ }
}
})
@@ -1118,7 +1170,7 @@ function updateErrors() {
// console.log(conflicts, invalidPaths, allErrors)
periodGroupElements.forEach((el, index) => {
- const { periodStatusEl, periodGroupEl } = el
+ const { periodStatusEl, startPeriodViewEl, endPeriodViewEl, periodGroupEl } = el
periodStatusEl.textContent = ""
periodStatusEl.classList.add("d-none")
if (conflicts[index] !== undefined) {
@@ -1126,6 +1178,11 @@ function updateErrors() {
}
if (insufficientPaths[index] !== undefined) {
periodStatusEl.textContent += `Insufficient paths. Got ${insufficientPaths[index]}, need at least 3.\n`
+ startPeriodViewEl.disabled = true
+ endPeriodViewEl.disabled = true
+ } else {
+ startPeriodViewEl.disabled = false
+ endPeriodViewEl.disabled = false
}
if (periodStatusEl.textContent !== "") {
periodStatusEl.classList.remove("d-none")