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

src/MyWebLog/Views/Helpers.fs

@@ -523,8 +523,38 @@ let commonOpenGraph (model: EditCommonModel) =
                     ]
                 ]
             ]
-                // member val OpenGraphExtraNames: string array = [||] with get, set
+            fieldset [] [
-                // member val OpenGraphExtraValues: string array = [||] with get, set
+                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 [] [

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.name        = `${namePfx}Names`
-    nameField.id          = `metaNames_${this.nextMetaIndex}`
+    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.name        = `${namePfx}Values`
-    valueField.id          = `metaValues_${this.nextMetaIndex}`
+    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)
+    document.getElementById(`${prefix}_items`).appendChild(newRow)
-    this.nextMetaIndex++
+    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() {
+  addMetaItem(prefix) {
-    const nameField = this.createMetaNameField()
+    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) {
+  removeMetaItem(id, idx) {
-    document.getElementById(`meta_${idx}`).remove()
+    document.getElementById(`${id}_${idx}`).remove()
   },
 
   /**