refactor(custom-fields): Update static Custom fields

core-web/libs/edit-content/src/lib/fields/dot-edit-content-custom-field/components/native-field/native-field.component.scss

@@ -0,0 +1,112 @@
+@use "variables" as *;
+@import "mixins";
+
+:host {
+    ::ng-deep {
+        input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not(
+                [type="submit"]
+            ):not([type="reset"]),
+        select,
+        textarea {
+            width: 100%;
+            background-color: $white;
+            height: $field-height-md;
+            border-radius: $field-border-radius;
+            border: $field-border-size solid $color-palette-gray-400;
+            padding: 0 $spacing-1;
+            color: $color-palette-gray-700;
+            font-size: $font-size-md;
+            font-family: $font-default;
+            outline: none;
+            transition:
+                border-color $basic-speed,
+                box-shadow $basic-speed;
+
+            &::placeholder {
+                color: $label-color;
+            }
+
+            &:enabled:hover,
+            &:hover {
+                border-color: $color-palette-primary-400;
+            }
+
+            &:enabled:active,
+            &:enabled:focus,
+            &:active,
+            &:focus {
+                border-color: $color-palette-primary-400;
+                @include field-focus;
+            }
+
+            &:disabled {
+                border-color: $color-palette-gray-200;
+                background: $color-palette-gray-100;
+                color: $color-palette-gray-500;
+                cursor: not-allowed;
+
+                &::placeholder {
+                    color: $color-palette-gray-500;
+                }
+            }
+
+            &.p-filled {
+                color: $black;
+            }
+        }
+
+        textarea {
+            padding: $spacing-1;
+            min-height: 4rem;
+            resize: vertical;
+        }
+
+        select {
+            cursor: pointer;
+            appearance: none;
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%237e7a86' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
+            background-repeat: no-repeat;
+            background-position: right $spacing-1 center;
+            padding-right: $spacing-6;
+        }
+
+        button:not(.p-button),
+        input[type="button"],
+        input[type="submit"],
+        input[type="reset"] {
+            border: none;
+            color: $white;
+            background-color: $color-palette-primary;
+            border-radius: $border-radius-md;
+            font-size: $font-size-md;
+            font-family: $font-default;
+            height: $field-height-md;
+            padding: 0 $spacing-3;
+            cursor: pointer;
+            transition:
+                background-color $basic-speed,
+                box-shadow $basic-speed;
+            text-transform: capitalize;
+            outline: none;
+
+            &:hover:not(:disabled) {
+                background-color: $color-palette-primary-600;
+            }
+
+            &:active:not(:disabled) {
+                background-color: $color-palette-primary-700;
+            }
+
+            &:focus:not(:disabled) {
+                background-color: $color-palette-primary;
+                @include field-focus;
+            }
+
+            &:disabled {
+                background-color: $color-palette-gray-200;
+                color: $color-palette-gray-500;
+                cursor: not-allowed;
+            }
+        }
+    }
+}

core-web/libs/edit-content/src/lib/fields/dot-edit-content-custom-field/components/native-field/native-field.component.ts

@@ -33,6 +33,7 @@ import { WINDOW } from '@dotcms/utils';
 @Component({
     selector: 'dot-native-field',
     template: '<div #container></div>',
+    styleUrls: ['./native-field.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
     viewProviders: [
         {

dotCMS/src/main/webapp/WEB-INF/velocity/static/htmlpage_assets/cachettl_custom_field.vtl

@@ -1,17 +1,5 @@
-<script type="application/javascript">
-dojo.ready(function() {
-	var currentValue=dojo.byId('cachettl').value;
-	if(currentValue==="") {
-		currentValue=$config.getIntProperty("DEFAULT_PAGE_CACHE_SECONDS",15);
-		dojo.byId('cachettl').value=currentValue;
-	}
-	new dijit.form.TextBox({
-		name: "cachettlbox",
-		value: currentValue,
-		onChange: function() {
-			dojo.byId('cachettl').value=this.get('value');
-		}
-	},"cachettlbox");
-});
-</script>
-<input id="cachettlbox"/>
+#if( $structures.isNewEditModeEnabled() )
+	#parse('/static/htmlpage_assets/cachettl_custom_field_new.vtl')
+#else
+	#parse('/static/htmlpage_assets/cachettl_custom_field_old.vtl')
+#end

dotCMS/src/main/webapp/WEB-INF/velocity/static/htmlpage_assets/cachettl_custom_field_new.vtl

@@ -0,0 +1,19 @@
+<script type="application/javascript">
+	DotCustomFieldApi.ready(() => {
+		const cachettlField = DotCustomFieldApi.getField('cachettl');
+		const cachettlbox = document.getElementById('cachettlbox');
+
+		let currentValue = cachettlField.getValue() || '';
+		if(currentValue === '') {
+			currentValue = $config.getIntProperty("DEFAULT_PAGE_CACHE_SECONDS",15);
+			cachettlField.setValue(currentValue);
+		}
+
+		cachettlbox.value = currentValue;
+
+		cachettlbox.addEventListener('change', () => {
+			cachettlField.setValue(cachettlbox.value);
+		});
+	});
+</script>
+<input type="text" id="cachettlbox"/>

dotCMS/src/main/webapp/WEB-INF/velocity/static/htmlpage_assets/cachettl_custom_field_old.vtl

@@ -0,0 +1,17 @@
+<script type="application/javascript">
+	dojo.ready(function() {
+		var currentValue=dojo.byId('cachettl').value;
+		if(currentValue==="") {
+			currentValue=$config.getIntProperty("DEFAULT_PAGE_CACHE_SECONDS",15);
+			dojo.byId('cachettl').value=currentValue;
+		}
+		new dijit.form.TextBox({
+			name: "cachettlbox",
+			value: currentValue,
+			onChange: function() {
+				dojo.byId('cachettl').value=this.get('value');
+			}
+		},"cachettlbox");
+	});
+</script>
+<input id="cachettlbox"/>

dotCMS/src/main/webapp/WEB-INF/velocity/static/htmlpage_assets/og_preview.vtl

@@ -0,0 +1,5 @@
+#if( $structures.isNewEditModeEnabled() )
+	#parse('/static/htmlpage_assets/og_preview_new.vtl')
+#else
+	#parse('/static/htmlpage_assets/og_preview_old.vtl')
+#end

dotCMS/src/main/webapp/WEB-INF/velocity/static/htmlpage_assets/og_preview_new.vtl

@@ -0,0 +1,161 @@
+<style>
+    #ogPreview_tag {display: none;}
+
+    .card-wrapper {
+        width: 600px;
+        height: 395px;
+        border: solid 1px #d3d3d3;
+        overflow: hidden;
+    }
+    .img-wrapper {
+        height: 313px;
+        overflow: hidden;
+    }
+    #cardImage {
+        object-fit: cover;
+        object-position: center center;
+        width: 600px;
+        height: 313px;
+    }
+    .text-wrapper {
+        text-align: left;
+        padding: 10px 12px;
+        background-color: #f2f3f5;
+        line-height: 16.8px;
+        height: 83px;
+    }
+    #cardHost {
+        text-transform: uppercase;
+        margin: 0;
+        color: #606770;
+        font-size: 12px;
+        width: 100%;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        line-height: 16px;
+        margin-bottom: 2px;
+    }
+    #cardTitle {
+        font-weight: bold;
+        margin: 0 0 0.15em;
+        font-size: 16px;
+        color: #1d2129;
+        line-height: 20px;
+        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
+    }
+    #cardDescription {
+        color: #606770;
+        font-size: 14px;
+        line-height: 20px;
+        word-break: break-word;
+    }
+
+    /* Dialog styles */
+    #ogPreview {
+        border: none;
+        border-radius: 4px;
+        padding: 0;
+        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
+    }
+    #ogPreview::backdrop {
+        background-color: rgba(0, 0, 0, 0.5);
+    }
+    .dialog-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 12px 16px;
+        border-bottom: 1px solid #d3d3d3;
+        background-color: #fff;
+    }
+    .dialog-title {
+        margin: 0;
+        font-size: 18px;
+        font-weight: bold;
+        color: #1877f2;
+    }
+    .dialog-close-btn {
+        background: none;
+        border: none;
+        font-size: 24px;
+        cursor: pointer;
+        color: #606770;
+        padding: 0;
+        line-height: 1;
+    }
+    .dialog-close-btn:hover {
+        color: #1d2129;
+    }
+</style>
+
+<button id="ogPreviewButton">Preview</button>
+
+<dialog id="ogPreview">
+    <div class="dialog-header">
+        <h2 class="dialog-title">Facebook</h2>
+        <button id="ogPreviewCloseBtn" class="dialog-close-btn">&times;</button>
+    </div>
+    <div class="card-wrapper">
+        <div class="img-wrapper"><img id="cardImage" src=""></div>
+        <div class="text-wrapper">
+            <div id="cardHost">$!{host.map.aliases}</div>
+            <div id="cardTitle"></div>
+            <div id="cardDescription"></div>
+        </div>
+    </div>
+</dialog>
+
+<script>
+    function truncateDescription(text, maxLength) {
+        if (text.length > maxLength) {
+            return text.substring(0, maxLength) + "...";
+        }
+        return text;
+    }
+
+    DotCustomFieldApi.ready(() => {
+        const ogTitleField = DotCustomFieldApi.getField('ogTitle');
+        const ogDescriptionField = DotCustomFieldApi.getField('ogDescription');
+        const ogImageField = DotCustomFieldApi.getField('ogImage');
+
+        const dialog = document.getElementById('ogPreview');
+        const previewButton = document.getElementById('ogPreviewButton');
+        const closeButton = document.getElementById('ogPreviewCloseBtn');
+        const cardImage = document.getElementById('cardImage');
+        const cardTitle = document.getElementById('cardTitle');
+        const cardDescription = document.getElementById('cardDescription');
+
+        // Open dialog and populate preview
+        previewButton.addEventListener('click', () => {
+            const ogTitle = ogTitleField.getValue() || '';
+            const ogDescription = ogDescriptionField.getValue() || '';
+
+            // Get image from ogImage field container
+            const imgInode = ogImageField.getValue() || '';
+            const imgUrl = imgInode ? `/dA/${imgInode}/asset/500w/50q/` : '';
+
+            // Truncate description to 92 characters
+            const truncatedDescription = truncateDescription(ogDescription, 92);
+
+            // Update preview card
+            cardImage.src = imgUrl;
+            cardTitle.textContent = ogTitle;
+            cardDescription.textContent = truncatedDescription;
+
+            dialog.showModal();
+        });
+
+        // Close dialog
+        closeButton.addEventListener('click', () => {
+            dialog.close();
+        });
+
+        // Close dialog when clicking outside
+        dialog.addEventListener('click', (e) => {
+            if (e.target === dialog) {
+                dialog.close();
+            }
+        });
+    });
+</script>