bit-badger/myWebLog
1
0
Fork 0
Code Issues 4 Pull Requests Packages Projects Releases 11 Activity

WIP on OpenGraph form; add media files (#52)

Browse Source
This commit is contained in:
Daniel J. Summers 2025-08-03 21:08:34 -04:00
parent 9b295263f9
commit 60a22747ac
2 changed files with 112 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

104
src/MyWebLog/Views/Helpers.fs
View File

@ -431,20 +431,100 @@ let commonOpenGraph (model: EditCommonModel) =
[]
]
]
// member val OpenGraphImageUrl = "" with get, set
// member val OpenGraphImageType = "" with get, set
// member val OpenGraphImageWidth = "" with get, set
// member val OpenGraphImageHeight = "" with get, set
// member val OpenGraphImageAlt = "" with get, set
// member val OpenGraphAudioUrl = "" with get, set
// member val OpenGraphAudioType = "" with get, set
// member val OpenGraphVideoUrl = "" with get, set
// member val OpenGraphVideoType = "" with get, set
// member val OpenGraphVideoWidth = "" with get, set
// member val OpenGraphVideoHeight = "" with get, set
]
fieldset [ _id "og_image" ] [
legend [] [ raw "Image" ]
div [ _class "row p-0" ] [
let syncJS = $"Admin.pathOrFile('{nameof model.OpenGraphImageUrl}', 'OpenGraphImageFile')"
div [ _class "mb-3 col-12" ] [
textField [ _onkeyup syncJS ] (nameof model.OpenGraphImageUrl) "Existing Image URL"
model.OpenGraphImageUrl []
]
div [ _class "mb-3 col-12" ] [
if model.OpenGraphImageUrl = "" then
div [ _class "form-floating" ] [
input [ _type "file"; _id "OpenGraphImageFile"; _name "OpenGraphImageFile"
_class "form-control"; _accept "image/*"; _oninput syncJS ]
label [ _for "OpenGraphImageFile" ] [ raw "Upload Image File" ]
]
else
input [ _type "hidden"; _id "OpenGraphImageFile"; _name "OpenGraphImageFile" ]
]
div [ _class "mb-3 col-12" ] [
textField [] (nameof model.OpenGraphImageAlt) "Alternate Text" model.OpenGraphImageAlt []
]
div [ _class "mb-3 col-6" ] [
textField [] (nameof model.OpenGraphImageType) "MIME Type" model.OpenGraphImageType
[ span [ _class "form-text" ] [ raw "Leave blank to derive type from extension" ] ]
]
div [ _class "mb-3 col-3" ] [
numberField [] (nameof model.OpenGraphImageWidth) "Width" model.OpenGraphImageWidth
[ span [ _class "form-text" ] [ raw "px" ] ]
]
div [ _class "mb-3 col-3" ] [
numberField [] (nameof model.OpenGraphImageHeight) "Height" model.OpenGraphImageHeight
[ span [ _class "form-text" ] [ raw "px" ] ]
]
]
]
fieldset [ _id "og_audio" ] [
legend [] [ raw "Audio" ]
div [ _class "row p-0" ] [
let syncJS = $"Admin.pathOrFile('{nameof model.OpenGraphAudioUrl}', 'OpenGraphAudioFile')"
div [ _class "mb-3 col-12" ] [
textField [ _onkeyup syncJS ] (nameof model.OpenGraphAudioUrl) "Existing Audio URL"
model.OpenGraphAudioUrl []
]
div [ _class "mb-3 col-12" ] [
if model.OpenGraphAudioUrl = "" then
div [ _class "form-floating" ] [
input [ _type "file"; _id "OpenGraphAudioFile"; _name "OpenGraphAudioFile"
_class "form-control"; _accept "image/*"; _oninput syncJS ]
label [ _for "OpenGraphAudioFile" ] [ raw "Upload Audio File" ]
]
else
input [ _type "hidden"; _id "OpenGraphAudioFile"; _name "OpenGraphAudioFile" ]
]
div [ _class "mb-3 col-6" ] [
textField [] (nameof model.OpenGraphAudioType) "MIME Type" model.OpenGraphAudioType
[ span [ _class "form-text" ] [ raw "Leave blank to derive type from extension" ] ]
]
]
]
fieldset [ _id "og_video" ] [
legend [] [ raw "Video" ]
div [ _class "row p-0" ] [
let syncJS = $"Admin.pathOrFile('{nameof model.OpenGraphVideoUrl}', 'OpenGraphVideoFile')"
div [ _class "mb-3 col-12" ] [
textField [ _onkeyup syncJS ] (nameof model.OpenGraphVideoUrl) "Existing Video URL"
model.OpenGraphVideoUrl []
]
div [ _class "mb-3 col-12" ] [
if model.OpenGraphVideoUrl = "" then
div [ _class "form-floating" ] [
input [ _type "file"; _id "OpenGraphVideoFile"; _name "OpenGraphVideoFile"
_class "form-control"; _accept "image/*"; _oninput syncJS ]
label [ _for "OpenGraphVideoFile" ] [ raw "Upload Video File" ]
]
else
input [ _type "hidden"; _id "OpenGraphVideoFile"; _name "OpenGraphVideoFile" ]
]
div [ _class "mb-3 col-6" ] [
textField [] (nameof model.OpenGraphVideoType) "MIME Type" model.OpenGraphVideoType
[ span [ _class "form-text" ] [ raw "Leave blank to derive type from extension" ] ]
]
div [ _class "mb-3 col-3" ] [
numberField [] (nameof model.OpenGraphVideoWidth) "Width" model.OpenGraphVideoWidth
[ span [ _class "form-text" ] [ raw "px" ] ]
]
div [ _class "mb-3 col-3" ] [
numberField [] (nameof model.OpenGraphVideoHeight) "Height" model.OpenGraphVideoHeight
[ span [ _class "form-text" ] [ raw "px" ] ]
]
]
]
// member val OpenGraphExtraNames: string array = [||] with get, set
// member val OpenGraphExtraValues: string array = [||] with get, set
]
]
]

21
src/admin-theme/wwwroot/admin.js
View File

@ -232,10 +232,29 @@ this.Admin = {
*/
toggleOpenGraphFields() {
const disabled = !document.getElementById("AssignOpenGraph").checked
let fieldsets = ["og_item"]
let fieldsets = ["og_item", "og_image", "og_audio", "og_video"]
fieldsets.forEach(it => document.getElementById(it).disabled = disabled)
},
/**
* Disable the file upload or path field if the other is entered
* @param {string} pathElt The path element to check
* @param {string} fileElt The file element to check
*/
pathOrFile(pathElt, fileElt) {
/** @type {HTMLInputElement} */
const path = document.getElementById(pathElt)
/** @type {HTMLInputElement} */
const file = document.getElementById(fileElt)
if (path.value.length > 0) {
file.disabled = true
} else if (file.value.length > 0) {
path.disabled = true
} else {
file.disabled = path.disabled = false
}
},
/**
* Enable or disable podcast fields
*/