From 7374440621da10b46d5e808059aae6e5339f463f Mon Sep 17 00:00:00 2001 From: "Daniel J. Summers" Date: Sun, 3 Aug 2025 22:03:07 -0400 Subject: [PATCH] WIP on OpenGraph form; first cut done (#52) --- src/MyWebLog/Views/Helpers.fs | 39 +++++++++++++++++-- src/admin-theme/wwwroot/admin.js | 66 +++++++++++++++++++++++--------- 2 files changed, 82 insertions(+), 23 deletions(-) diff --git a/src/MyWebLog/Views/Helpers.fs b/src/MyWebLog/Views/Helpers.fs index 09be1ad..c23adfa 100644 --- a/src/MyWebLog/Views/Helpers.fs +++ b/src/MyWebLog/Views/Helpers.fs @@ -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 [] [ diff --git a/src/admin-theme/wwwroot/admin.js b/src/admin-theme/wwwroot/admin.js index b4af123..df9a0d7 100644 --- a/src/admin-theme/wwwroot/admin.js +++ b/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() }, /**