5. Page components

Headers and scripts

<script type="text/javascript" src="node_modules/lightbox2/dist/js/lightbox.min.js?2.11.5"></script>
<link href="node_modules/lightbox2/dist/css/lightbox.min.css?2.11.5" rel="stylesheet" type="text/css">

<style type="text/css">
#NB_DATA_COMPONENTPREVIEW, 
.mergedField .tableImages a:last-of-type {
    display: none;
}
</style>

<script type="text/javascript">
const MEDIA_SAGID = 5
const COMPONENT_SAGID = 4


function checkField(fname) { 
    if (getValue("COMPONENTTAGS").includes(fname)) {
        showField(fname)
        $("#VB_DATA_" + fname + "_MERGE").show()
    } else {
        hideField(fname) 
        $("#VB_DATA_" + fname + "_MERGE").hide()
    }
}
function handleTags() {
    setValueFromLookup(COMPONENT_SAGID, $("#DATA_COMPONENTTYPE").val(), "TAGS", "COMPONENTTAGS")
    setTimeout(setFieldVisibility, 500)
}
function setFieldVisibility() {
    checkField("TITLE")
    checkField("TEXT1")
    checkField("TEXT2")
    checkField("TEXT3")
    checkField("TEXT4")
    checkField("IMAGE1")
    checkField("IMAGE2")
    //checkField("IMAGE3")
    //checkField("IMAGE4")
    //checkField("VIDEO1")
    checkField("CODEUNIT")
    checkField("CACHEOUTPUT")
}
</script>

// Skjul systemfelter
hideField("COMPONENTTAGS")
hideField("COMPONENTTEMPLATE")
hideField("IMAGE1PATH")
hideField("IMAGE1ALT")
hideField("IMAGE2PATH")
hideField("IMAGE2ALT")

// Preview billeder
let setupPreview = field => {
    $("#DATA_" + field).on("change", () => {
        preview(field)
    })
    preview(field);
}
let preview = field => {
    if ($("#DATA_" + field + " option:selected").val() == "") {
        setValue(field + "PREVIEW", "")
        return
    }
    setValueFromLookup(MEDIA_SAGID, $("#DATA_" + field + " option:selected").val(), "IMAGE", field + "PREVIEW")
}
setupPreview("IMAGE1")
setupPreview("IMAGE2")

// Preview component
let setupPreviewType = field => {
    $("#DATA_COMPONENTTYPE").on("change", () => {
        previewType(field)
    })
    previewType(field)
}
let previewType = field => {
    if ($("#DATA_COMPONENTTYPE option:selected").val() == "") {
        setValue("COMPONENTPREVIEW", "")
        return
    }
    setValueFromLookup(COMPONENT_SAGID, $("#DATA_COMPONENTTYPE option:selected").val(), "PREVIEW", "COMPONENTPREVIEW")
}
setupPreviewType()

// Handle tags
$("#DATA_COMPONENTTYPE").on('change', () => {
   handleTags()
})
handleTags()