WIP on OpenGraph form; first cut done (#52)
This commit is contained in:
parent
60a22747ac
commit
7374440621
@ -523,8 +523,38 @@ let commonOpenGraph (model: EditCommonModel) =
|
||||
]
|
||||
]
|
||||
]
|
||||
// member val OpenGraphExtraNames: string array = [||] with get, set
|
||||
// member val OpenGraphExtraValues: string array = [||] with get, set
|
||||
fieldset [] [
|
||||
legend [] [ raw "Extra Properties" ]
|
||||
let items = Array.zip model.OpenGraphExtraNames model.OpenGraphExtraValues
|
||||
let extraDetail idx (name, value) =
|
||||
div [ _id $"og_extra_%i{idx}"; _class "row mb-3" ] [
|
||||
div [ _class "col-1 text-center align-self-center" ] [
|
||||
button [ _type "button"; _class "btn btn-sm btn-danger"
|
||||
_onclick $"Admin.removeMetaItem('og_extra', {idx})" ] [
|
||||
raw "−"
|
||||
]
|
||||
]
|
||||
div [ _class "col-3" ] [
|
||||
textField [ _id $"{nameof model.OpenGraphExtraNames}_{idx}" ]
|
||||
(nameof model.OpenGraphExtraNames) "Name" name []
|
||||
]
|
||||
div [ _class "col-8" ] [
|
||||
textField [ _id $"{nameof model.OpenGraphExtraValues}_{idx}" ]
|
||||
(nameof model.OpenGraphExtraValues) "Value" value []
|
||||
]
|
||||
]
|
||||
div [] [
|
||||
div [ _id "og_extra_items"; _class "container p-0" ] (items |> Array.mapi extraDetail |> List.ofArray)
|
||||
button [ _type "button"; _class "btn btn-sm btn-secondary"
|
||||
_onclick "Admin.addMetaItem('og_extra')" ] [
|
||||
raw "Add an Extra Property"
|
||||
]
|
||||
script [] [
|
||||
raw """document.addEventListener("DOMContentLoaded", """
|
||||
raw $"() => Admin.setNextExtraIndex({items.Length}))"
|
||||
]
|
||||
]
|
||||
]
|
||||
]
|
||||
]
|
||||
|
||||
@ -536,7 +566,8 @@ let commonMetaItems (model: EditCommonModel) =
|
||||
let metaDetail idx (name, value) =
|
||||
div [ _id $"meta_%i{idx}"; _class "row mb-3" ] [
|
||||
div [ _class "col-1 text-center align-self-center" ] [
|
||||
button [ _type "button"; _class "btn btn-sm btn-danger"; _onclick $"Admin.removeMetaItem({idx})" ] [
|
||||
button [ _type "button"; _class "btn btn-sm btn-danger"
|
||||
_onclick $"Admin.removeMetaItem('meta', {idx})" ] [
|
||||
raw "−"
|
||||
]
|
||||
]
|
||||
@ -554,7 +585,7 @@ let commonMetaItems (model: EditCommonModel) =
|
||||
]
|
||||
div [ _id "meta_item_container"; _class "collapse" ] [
|
||||
div [ _id "meta_items"; _class "container" ] (items |> Array.mapi metaDetail |> List.ofArray)
|
||||
button [ _type "button"; _class "btn btn-sm btn-secondary"; _onclick "Admin.addMetaItem()" ] [
|
||||
button [ _type "button"; _class "btn btn-sm btn-secondary"; _onclick "Admin.addMetaItem('meta')" ] [
|
||||
raw "Add an Item"
|
||||
]
|
||||
script [] [
|
||||
|
||||
@ -2,6 +2,12 @@
|
||||
* Support functions for the administrative UI
|
||||
*/
|
||||
this.Admin = {
|
||||
/**
|
||||
* The next index for an OpenGraph extra property item
|
||||
* @type {number}
|
||||
*/
|
||||
nextExtraIndex : 0,
|
||||
|
||||
/**
|
||||
* The next index for a metadata item
|
||||
* @type {number}
|
||||
@ -14,6 +20,14 @@ this.Admin = {
|
||||
*/
|
||||
nextPermalink : 0,
|
||||
|
||||
/**
|
||||
* Set the next OpenGraph extra propery index
|
||||
* @param {number} idx The index to set
|
||||
*/
|
||||
setNextExtraIndex(idx) {
|
||||
this.nextExtraIndex = idx
|
||||
},
|
||||
|
||||
/**
|
||||
* Set the next meta item index
|
||||
* @param {number} idx The index to set
|
||||
@ -32,14 +46,16 @@ this.Admin = {
|
||||
|
||||
/**
|
||||
* Create a metadata remove button
|
||||
* @param {string} prefix The prefix of the row to be removed
|
||||
* @returns {HTMLDivElement} The column with the remove button
|
||||
*/
|
||||
createMetaRemoveColumn() {
|
||||
createMetaRemoveColumn(prefix) {
|
||||
const removeBtn = document.createElement("button")
|
||||
removeBtn.type = "button"
|
||||
removeBtn.className = "btn btn-sm btn-danger"
|
||||
removeBtn.innerHTML = "−"
|
||||
removeBtn.setAttribute("onclick", `Admin.removeMetaItem(${this.nextMetaIndex})`)
|
||||
removeBtn.setAttribute("onclick",
|
||||
`Admin.removeMetaItem('${prefix}', ${prefix === "og_extra" ? this.nextExtraIndex : this.nextMetaIndex})`)
|
||||
|
||||
const removeCol = document.createElement("div")
|
||||
removeCol.className = "col-1 text-center align-self-center"
|
||||
@ -50,14 +66,16 @@ this.Admin = {
|
||||
|
||||
/**
|
||||
* Create a metadata name field
|
||||
* @param {string} prefix The prefix for the element
|
||||
* @returns {HTMLInputElement} The name input element
|
||||
*/
|
||||
createMetaNameField() {
|
||||
createMetaNameField(prefix) {
|
||||
const namePfx = prefix === "og_extra" ? "OpenGraphExtra" : "Meta"
|
||||
const nameField = document.createElement("input")
|
||||
|
||||
nameField.type = "text"
|
||||
nameField.name = "MetaNames"
|
||||
nameField.id = `metaNames_${this.nextMetaIndex}`
|
||||
nameField.name = `${namePfx}Names`
|
||||
nameField.id = `${namePfx}Names_${prefix === "og_extra" ? this.nextExtraIndex : this.nextMetaIndex}`
|
||||
nameField.className = "form-control"
|
||||
nameField.placeholder = "Name"
|
||||
|
||||
@ -88,14 +106,16 @@ this.Admin = {
|
||||
|
||||
/**
|
||||
* Create a metadata value field
|
||||
* @param {string} prefix The prefix for the field being created
|
||||
* @returns {HTMLInputElement} The metadata value field
|
||||
*/
|
||||
createMetaValueField() {
|
||||
createMetaValueField(prefix) {
|
||||
const namePfx = prefix === "og_extra" ? "OpenGraphExtra" : "Meta"
|
||||
const valueField = document.createElement("input")
|
||||
|
||||
valueField.type = "text"
|
||||
valueField.name = "MetaValues"
|
||||
valueField.id = `metaValues_${this.nextMetaIndex}`
|
||||
valueField.name = `${namePfx}Values`
|
||||
valueField.id = `${namePfx}Values_${prefix === "og_extra" ? this.nextExtraIndex : this.nextMetaIndex}`
|
||||
valueField.className = "form-control"
|
||||
valueField.placeholder = "Value"
|
||||
|
||||
@ -134,32 +154,39 @@ this.Admin = {
|
||||
|
||||
/**
|
||||
* Construct and add a metadata item row
|
||||
* @param {string} prefix The prefix of the row being added
|
||||
* @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) {
|
||||
createMetaRow(prefix, removeCol, nameCol, valueCol) {
|
||||
const newRow = document.createElement("div")
|
||||
newRow.className = "row mb-3"
|
||||
newRow.id = `meta_${this.nextMetaIndex}`
|
||||
newRow.id = `${prefix}_${prefix === "og_extra" ? this.nextExtraIndex : this.nextMetaIndex}`
|
||||
newRow.appendChild(removeCol)
|
||||
newRow.appendChild(nameCol)
|
||||
newRow.appendChild(valueCol)
|
||||
|
||||
document.getElementById("meta_items").appendChild(newRow)
|
||||
this.nextMetaIndex++
|
||||
document.getElementById(`${prefix}_items`).appendChild(newRow)
|
||||
if (prefix === "og_extra") {
|
||||
this.nextExtraIndex++
|
||||
} else {
|
||||
this.nextMetaIndex++
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Add a new row for metadata entry
|
||||
* @param {string} prefix The prefix for the field being created
|
||||
*/
|
||||
addMetaItem() {
|
||||
const nameField = this.createMetaNameField()
|
||||
addMetaItem(prefix) {
|
||||
const nameField = this.createMetaNameField(prefix)
|
||||
|
||||
this.createMetaRow(
|
||||
this.createMetaRemoveColumn(),
|
||||
prefix,
|
||||
this.createMetaRemoveColumn(prefix),
|
||||
this.createMetaNameColumn(nameField),
|
||||
this.createMetaValueColumn(this.createMetaValueField(), undefined))
|
||||
this.createMetaValueColumn(this.createMetaValueField(prefix), undefined))
|
||||
|
||||
document.getElementById(nameField.id).focus()
|
||||
},
|
||||
@ -312,10 +339,11 @@ this.Admin = {
|
||||
|
||||
/**
|
||||
* Remove a metadata item
|
||||
* @param {number} idx The index of the metadata item to remove
|
||||
* @param {string} id The ID prefix of the item to remove
|
||||
* @param {number} idx The index of the item to remove
|
||||
*/
|
||||
removeMetaItem(idx) {
|
||||
document.getElementById(`meta_${idx}`).remove()
|
||||
removeMetaItem(id, idx) {
|
||||
document.getElementById(`${id}_${idx}`).remove()
|
||||
},
|
||||
|
||||
/**
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user