Added period range tick marks

Updated drawable range
Added placeholder streamerless in variations config
This commit is contained in:
mxdanger 2022-05-04 23:56:09 -07:00
parent d90c269179
commit cdd80a2b51
3 changed files with 31 additions and 3 deletions

View file

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

View file

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