mirror of
https://github.com/placeAtlas/atlas.git
synced 2024-11-15 14:33:36 +01:00
Added period range tick marks
Updated drawable range Added placeholder streamerless in variations config
This commit is contained in:
parent
d90c269179
commit
cdd80a2b51
3 changed files with 31 additions and 3 deletions
|
@ -791,7 +791,9 @@ function initPeriodGroups() {
|
|||
periodGroupEl.id = "periodGroup" + index
|
||||
|
||||
const startPeriodEl = periodGroupEl.querySelector('.period-start')
|
||||
const startPeriodListEl = periodGroupEl.querySelector('#periodStartList')
|
||||
const endPeriodEl = periodGroupEl.querySelector('.period-end')
|
||||
const endPeriodListEl = periodGroupEl.querySelector('#periodEndList')
|
||||
const periodDeleteEl = periodGroupEl.querySelector('.period-delete')
|
||||
const periodDuplicateEl = periodGroupEl.querySelector('.period-duplicate')
|
||||
const periodVariationEl = periodGroupEl.querySelector('.period-variation')
|
||||
|
@ -802,8 +804,12 @@ function initPeriodGroups() {
|
|||
|
||||
startPeriodEl.id = "periodStart" + index
|
||||
startPeriodEl.previousElementSibling.htmlFor = startPeriodEl.id
|
||||
startPeriodListEl.id = "periodStartList" + index
|
||||
startPeriodEl.setAttribute("list", startPeriodListEl.id)
|
||||
endPeriodEl.id = "periodEnd" + index
|
||||
endPeriodEl.previousElementSibling.htmlFor = endPeriodEl.id
|
||||
endPeriodListEl.id = "periodEndList" + index
|
||||
endPeriodEl.setAttribute("list", endPeriodListEl.id)
|
||||
periodVariationEl.id = "periodVariation" + index
|
||||
periodCopyEl.id = "periodCopy" + index
|
||||
periodStatusEl.id = "periodStatus" + index
|
||||
|
@ -814,15 +820,21 @@ function initPeriodGroups() {
|
|||
endPeriodEl.max = variationsConfig[variation].drawablePeriods[1]
|
||||
startPeriodEl.value = start
|
||||
endPeriodEl.value = end
|
||||
// Adds tick marks to assit in preventing overlap
|
||||
startPeriodListEl.innerHTML = '<option value="' + (end - 1) + '"></option>'
|
||||
endPeriodListEl.innerHTML = '<option value="' + (start + 1) + '"></option>'
|
||||
|
||||
if (startPeriodEl.max == 0) periodGroupEl.classList.add('no-time-slider')
|
||||
else periodGroupEl.classList.remove('no-time-slider')
|
||||
if (pathWithPeriods.length === 1) periodDeleteEl.disabled = true;
|
||||
|
||||
startPeriodEl.addEventListener('input', event => {
|
||||
endPeriodListEl.innerHTML = '<option value="' + (parseInt(event.target.value) + 1) + '"></option>'
|
||||
timelineSlider.value = parseInt(event.target.value)
|
||||
updateTime(parseInt(event.target.value), variation)
|
||||
})
|
||||
endPeriodEl.addEventListener('input', event => {
|
||||
startPeriodListEl.innerHTML = '<option value="' + (parseInt(event.target.value) - 1) + '"></option>'
|
||||
timelineSlider.value = parseInt(event.target.value)
|
||||
updateTime(parseInt(event.target.value), variation)
|
||||
})
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -406,9 +406,11 @@ <h5 class="modal-title" id="donateModalLabel">Donation Links</h5>
|
|||
<div class="card-body">
|
||||
<div class="period-status alert alert-danger small py-2" role="alert"></div>
|
||||
<label for="period-start" class="form-label">Start Period</label>
|
||||
<input type="range" class="period-start form-range" id="period-start" min="0">
|
||||
<input type="range" class="period-start form-range" id="period-start" min="0" list="periodStartList">
|
||||
<datalist id="periodStartList"></datalist>
|
||||
<label for="period-end" class="form-label">End Period</label>
|
||||
<input type="range" class="period-end form-range mb-2" id="period-end" min="0">
|
||||
<input type="range" class="period-end form-range mb-2" id="period-end" min="0" list="periodEndList">
|
||||
<datalist id="periodEndList"></datalist>
|
||||
<div class="d-flex flex-wrap gap-2 mb-2">
|
||||
<button type="button" class="period-copy btn btn-secondary btn-sm flex-fill" id="period-copy">
|
||||
<i class="bi bi-clipboard" aria-hidden="true"></i>
|
||||
|
|
Loading…
Reference in a new issue