WIP on OpenGraph form; first cut done (#52)

src/admin-theme/wwwroot/admin.js

@@ -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()
   },
 
   /**