Daniel J. Summers
16603bbcaf
- Render chapter if present (#5) - Render transcript if present (#8) - Require transcript type if URL entered (#8)
313 lines
9.3 KiB
JavaScript
313 lines
9.3 KiB
JavaScript
const Admin = {
|
|
/** The next index for a metadata item */
|
|
nextMetaIndex : 0,
|
|
|
|
/** The next index for a permalink */
|
|
nextPermalink : 0,
|
|
|
|
/**
|
|
* Set the next meta item index
|
|
* @param idx The index to set
|
|
*/
|
|
setNextMetaIndex(idx) {
|
|
this.nextMetaIndex = idx
|
|
},
|
|
|
|
/**
|
|
* Set the next permalink index
|
|
* @param idx The index to set
|
|
*/
|
|
setPermalinkIndex(idx) {
|
|
this.nextPermalink = idx
|
|
},
|
|
|
|
/**
|
|
* Create a metadata remove button
|
|
* @returns {HTMLDivElement} The column with the remove button
|
|
*/
|
|
createMetaRemoveColumn() {
|
|
const removeBtn = document.createElement("button")
|
|
removeBtn.type = "button"
|
|
removeBtn.className = "btn btn-sm btn-danger"
|
|
removeBtn.innerHTML = "−"
|
|
removeBtn.setAttribute("onclick", `Admin.removeMetaItem(${this.nextMetaIndex})`)
|
|
|
|
const removeCol = document.createElement("div")
|
|
removeCol.className = "col-1 text-center align-self-center"
|
|
removeCol.appendChild(removeBtn)
|
|
|
|
return removeCol
|
|
},
|
|
|
|
/**
|
|
* Create a metadata name field
|
|
* @returns {HTMLInputElement} The name input element
|
|
*/
|
|
createMetaNameField() {
|
|
const nameField = document.createElement("input")
|
|
|
|
nameField.type = "text"
|
|
nameField.name = "metaNames"
|
|
nameField.id = `metaNames_${this.nextMetaIndex}`
|
|
nameField.className = "form-control"
|
|
nameField.placeholder = "Name"
|
|
|
|
return nameField
|
|
},
|
|
|
|
/**
|
|
* Create a metadata name column using the given name input field
|
|
* @param {HTMLInputElement} field The name field for the column
|
|
* @returns {HTMLDivElement} The name column
|
|
*/
|
|
createMetaNameColumn(field) {
|
|
const nameLabel = document.createElement("label")
|
|
nameLabel.htmlFor = field.id
|
|
nameLabel.innerText = field.placeholder
|
|
|
|
const nameFloat = document.createElement("div")
|
|
nameFloat.className = "form-floating"
|
|
nameFloat.appendChild(field)
|
|
nameFloat.appendChild(nameLabel)
|
|
|
|
const nameCol = document.createElement("div")
|
|
nameCol.className = "col-3"
|
|
nameCol.appendChild(nameFloat)
|
|
|
|
return nameCol
|
|
},
|
|
|
|
/**
|
|
* Create a metadata value field
|
|
* @returns {HTMLInputElement} The metadata value field
|
|
*/
|
|
createMetaValueField() {
|
|
const valueField = document.createElement("input")
|
|
|
|
valueField.type = "text"
|
|
valueField.name = "metaValues"
|
|
valueField.id = `metaValues_${this.nextMetaIndex}`
|
|
valueField.className = "form-control"
|
|
valueField.placeholder = "Value"
|
|
|
|
return valueField
|
|
},
|
|
|
|
/**
|
|
* Create a metadata value column using the given input field
|
|
* @param {HTMLInputElement} field The metadata value input field
|
|
* @param {string|undefined} hintText Text to be added below the field
|
|
* @returns {HTMLDivElement} The value column
|
|
*/
|
|
createMetaValueColumn(field, hintText) {
|
|
const valueLabel = document.createElement("label")
|
|
valueLabel.htmlFor = field.id
|
|
valueLabel.innerText = field.placeholder
|
|
|
|
const valueFloat = document.createElement("div")
|
|
valueFloat.className = "form-floating"
|
|
valueFloat.appendChild(field)
|
|
valueFloat.appendChild(valueLabel)
|
|
|
|
if (hintText) {
|
|
const valueHint = document.createElement("div")
|
|
valueHint.className = "form-text"
|
|
valueHint.innerText = hintText
|
|
valueFloat.appendChild(valueHint)
|
|
}
|
|
|
|
const valueCol = document.createElement("div")
|
|
valueCol.className = "col-8"
|
|
valueCol.appendChild(valueFloat)
|
|
|
|
return valueCol
|
|
},
|
|
|
|
/**
|
|
* Construct and add a metadata item row
|
|
* @param {HTMLDivElement} removeCol The column with the remove button
|
|
* @param {HTMLDivElement} nameCol The column with the name field
|
|
* @param {HTMLDivElement} valueCol The column with the value field
|
|
*/
|
|
createMetaRow(removeCol, nameCol, valueCol) {
|
|
const newRow = document.createElement("div")
|
|
newRow.className = "row mb-3"
|
|
newRow.id = `meta_${this.nextMetaIndex}`
|
|
newRow.appendChild(removeCol)
|
|
newRow.appendChild(nameCol)
|
|
newRow.appendChild(valueCol)
|
|
|
|
document.getElementById("metaItems").appendChild(newRow)
|
|
this.nextMetaIndex++
|
|
},
|
|
|
|
/**
|
|
* Add a new row for metadata entry
|
|
*/
|
|
addMetaItem() {
|
|
const nameField = this.createMetaNameField()
|
|
|
|
this.createMetaRow(
|
|
this.createMetaRemoveColumn(),
|
|
this.createMetaNameColumn(nameField),
|
|
this.createMetaValueColumn(this.createMetaValueField(), undefined))
|
|
|
|
document.getElementById(nameField.id).focus()
|
|
},
|
|
|
|
/**
|
|
* Add a new row for a permalink
|
|
*/
|
|
addPermalink() {
|
|
// Remove button
|
|
const removeBtn = document.createElement("button")
|
|
removeBtn.type = "button"
|
|
removeBtn.className = "btn btn-sm btn-danger"
|
|
removeBtn.innerHTML = "−"
|
|
removeBtn.setAttribute("onclick", `Admin.removePermalink(${this.nextPermalink})`)
|
|
|
|
const removeCol = document.createElement("div")
|
|
removeCol.className = "col-1 text-center align-self-center"
|
|
removeCol.appendChild(removeBtn)
|
|
|
|
// Link
|
|
const linkField = document.createElement("input")
|
|
linkField.type = "text"
|
|
linkField.name = "prior"
|
|
linkField.id = `prior_${this.nextPermalink}`
|
|
linkField.className = "form-control"
|
|
linkField.placeholder = "Link"
|
|
|
|
const linkLabel = document.createElement("label")
|
|
linkLabel.htmlFor = linkField.id
|
|
linkLabel.innerText = linkField.placeholder
|
|
|
|
const linkFloat = document.createElement("div")
|
|
linkFloat.className = "form-floating"
|
|
linkFloat.appendChild(linkField)
|
|
linkFloat.appendChild(linkLabel)
|
|
|
|
const linkCol = document.createElement("div")
|
|
linkCol.className = "col-11"
|
|
linkCol.appendChild(linkFloat)
|
|
|
|
// Put it all together
|
|
const newRow = document.createElement("div")
|
|
newRow.className = "row mb-3"
|
|
newRow.id = `meta_${this.nextPermalink}`
|
|
newRow.appendChild(removeCol)
|
|
newRow.appendChild(linkCol)
|
|
|
|
document.getElementById("permalinks").appendChild(newRow)
|
|
document.getElementById(linkField.id).focus()
|
|
this.nextPermalink++
|
|
},
|
|
|
|
/**
|
|
* Enable or disable podcast fields
|
|
*/
|
|
toggleEpisodeFields() {
|
|
const disabled = !document.getElementById("isEpisode").checked
|
|
;[ "media", "mediaType", "length", "duration", "subtitle", "imageUrl", "explicit", "chapterFile", "chapterType",
|
|
"transcriptUrl", "transcriptType", "transcriptLang", "transcriptCaptions", "seasonNumber", "seasonDescription",
|
|
"episodeNumber", "episodeDescription"
|
|
].forEach(it => document.getElementById(it).disabled = disabled)
|
|
},
|
|
|
|
/**
|
|
* Check to enable or disable podcast fields
|
|
*/
|
|
checkPodcast() {
|
|
document.getElementById("podcastFields").disabled = !document.getElementById("isPodcast").checked
|
|
},
|
|
|
|
/**
|
|
* Toggle the source of a custom RSS feed
|
|
* @param source The source that was selected
|
|
*/
|
|
customFeedBy(source) {
|
|
const categoryInput = document.getElementById("sourceValueCat")
|
|
const tagInput = document.getElementById("sourceValueTag")
|
|
if (source === "category") {
|
|
tagInput.value = ""
|
|
tagInput.disabled = true
|
|
categoryInput.disabled = false
|
|
} else {
|
|
categoryInput.selectedIndex = -1
|
|
categoryInput.disabled = true
|
|
tagInput.disabled = false
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Remove a metadata item
|
|
* @param idx The index of the metadata item to remove
|
|
*/
|
|
removeMetaItem(idx) {
|
|
document.getElementById(`meta_${idx}`).remove()
|
|
},
|
|
|
|
/**
|
|
* Remove a permalink
|
|
* @param idx The index of the permalink to remove
|
|
*/
|
|
removePermalink(idx) {
|
|
document.getElementById(`link_${idx}`).remove()
|
|
},
|
|
|
|
/**
|
|
* Require transcript type if transcript URL is present
|
|
*/
|
|
requireTranscriptType() {
|
|
document.getElementById("transcriptType").required = document.getElementById("transcriptUrl").value.trim() !== ""
|
|
},
|
|
|
|
/**
|
|
* Show messages that may have come with an htmx response
|
|
* @param messages The messages from the response
|
|
*/
|
|
showMessage(messages) {
|
|
const msgs = messages.split(", ")
|
|
msgs.forEach(msg => {
|
|
const parts = msg.split("|||")
|
|
if (parts.length < 2) return
|
|
|
|
const msgDiv = document.createElement("div")
|
|
msgDiv.className = `alert alert-${parts[0]} alert-dismissible fade show`
|
|
msgDiv.setAttribute("role", "alert")
|
|
msgDiv.innerHTML = parts[1]
|
|
|
|
const closeBtn = document.createElement("button")
|
|
closeBtn.type = "button"
|
|
closeBtn.className = "btn-close"
|
|
closeBtn.setAttribute("data-bs-dismiss", "alert")
|
|
closeBtn.setAttribute("aria-label", "Close")
|
|
msgDiv.appendChild(closeBtn)
|
|
|
|
if (parts.length === 3) {
|
|
msgDiv.innerHTML += `<hr>${parts[2]}`
|
|
}
|
|
document.getElementById("msgContainer").appendChild(msgDiv)
|
|
})
|
|
},
|
|
|
|
/**
|
|
* Set all "success" alerts to close after 4 seconds
|
|
*/
|
|
dismissSuccesses() {
|
|
[...document.querySelectorAll(".alert-success")].forEach(alert => {
|
|
setTimeout(() => {
|
|
(bootstrap.Alert.getInstance(alert) ?? new bootstrap.Alert(alert)).close()
|
|
}, 4000)
|
|
})
|
|
}
|
|
}
|
|
|
|
htmx.on("htmx:afterOnLoad", function (evt) {
|
|
const hdrs = evt.detail.xhr.getAllResponseHeaders()
|
|
// Show messages if there were any in the response
|
|
if (hdrs.indexOf("x-message") >= 0) {
|
|
Admin.showMessage(evt.detail.xhr.getResponseHeader("x-message"))
|
|
Admin.dismissSuccesses()
|
|
}
|
|
}) |