Available from
${this.propertyData.rentAvailableFrom}
Rent Available To
${this.propertyData.rentAvailableTo}
@@ -15527,9 +15532,9 @@ ${galleryPagesHTML}
console.log("Clicked image:", clickedImage);
console.log("Event:", event);
- // Disable 3-click functionality for modern home template
- if (this.isModernHomeTemplateSelected) {
- console.log("❌ 3-click functionality disabled for modern home template");
+ // Disable 3-click functionality for modern home template, serenity house template, and luxury mansion template
+ if (this.isModernHomeTemplateSelected || this.isSerenityHouseTemplateSelected || this.isLuxuryMansionTemplateSelected) {
+ console.log("❌ 3-click functionality disabled for modern home template, serenity house template, and luxury mansion template");
return;
}
@@ -16959,7 +16964,20 @@ ${galleryPagesHTML}
// Add pencil icon to hero section (page 1)
console.log('Looking for hero section...');
- const heroSection = editorContent.querySelector('.hero');
+ let heroSection = editorContent.querySelector('.hero');
+
+ // For serenity house template, look for .p1-image-side instead
+ if (!heroSection && (this.selectedTemplateId === 'serenity-house-template' || this.selectedTemplateId === 'serenity-house-a3-template')) {
+ console.log('Looking for serenity house template first image section...');
+ heroSection = editorContent.querySelector('.p1-image-side');
+ }
+
+ // For luxury mansion template, look for .cover-page instead
+ if (!heroSection && (this.selectedTemplateId === 'luxury-mansion-template' || this.selectedTemplateId === 'luxury-mansion-a3-template')) {
+ console.log('Looking for luxury mansion template cover page...');
+ heroSection = editorContent.querySelector('.cover-page');
+ }
+
if (heroSection) {
console.log('Hero section found');
if (!heroSection.querySelector('.hero-edit-icon')) {
@@ -17012,6 +17030,36 @@ ${galleryPagesHTML}
} else {
console.log('Visual header not found in editor content');
}
+
+ // Add pencil icon to floor plans section for luxury mansion template
+ if (this.selectedTemplateId === 'luxury-mansion-template' || this.selectedTemplateId === 'luxury-mansion-a3-template') {
+ console.log('Looking for luxury mansion floor plans section...');
+ const floorplanImage = editorContent.querySelector('.floorplan-image-p5');
+ if (floorplanImage) {
+ console.log('Floor plans image found');
+ if (!floorplanImage.querySelector('.hero-edit-icon')) {
+ console.log('Creating pencil icon for floor plans image...');
+ // Create pencil icon element
+ const pencilIcon = document.createElement('div');
+ pencilIcon.className = 'hero-edit-icon';
+ pencilIcon.innerHTML = '
';
+ pencilIcon.title = 'Replace Floor Plans Image';
+ pencilIcon.onclick = () => {
+ console.log('Floor plans pencil icon clicked');
+ // Trigger image replacement for floor plans
+ this.handleFloorPlansImageReplacement();
+ };
+
+ // Add the pencil icon to the floor plans image
+ floorplanImage.appendChild(pencilIcon);
+ console.log('Pencil icon added to floor plans image successfully');
+ } else {
+ console.log('Floor plans pencil icon already exists');
+ }
+ } else {
+ console.log('Floor plans image not found in editor content');
+ }
+ }
} else {
console.log('Enhanced editor content not found');
}
@@ -17023,7 +17071,20 @@ ${galleryPagesHTML}
// Find the hero section background image
const editorContent = this.template.querySelector('.enhanced-editor-content');
if (editorContent) {
- const heroSection = editorContent.querySelector('.hero');
+ let heroSection = editorContent.querySelector('.hero');
+
+ // For serenity house template, look for .p1-image-side instead
+ if (!heroSection && (this.selectedTemplateId === 'serenity-house-template' || this.selectedTemplateId === 'serenity-house-a3-template')) {
+ console.log('Looking for serenity house template first image section for replacement...');
+ heroSection = editorContent.querySelector('.p1-image-side');
+ }
+
+ // For luxury mansion template, look for .cover-page instead
+ if (!heroSection && (this.selectedTemplateId === 'luxury-mansion-template' || this.selectedTemplateId === 'luxury-mansion-a3-template')) {
+ console.log('Looking for luxury mansion template cover page for replacement...');
+ heroSection = editorContent.querySelector('.cover-page');
+ }
+
if (heroSection) {
// Get the computed background image
const computedStyle = window.getComputedStyle(heroSection);
@@ -17080,6 +17141,37 @@ ${galleryPagesHTML}
}
}
+ // Handle floor plans image replacement for luxury mansion template
+ handleFloorPlansImageReplacement() {
+ // Find the floor plans background image
+ const editorContent = this.template.querySelector('.enhanced-editor-content');
+ if (editorContent) {
+ const floorplanImage = editorContent.querySelector('.floorplan-image-p5');
+ if (floorplanImage) {
+ // Get the computed background image
+ const computedStyle = window.getComputedStyle(floorplanImage);
+ const backgroundImage = computedStyle.backgroundImage;
+
+ if (backgroundImage && backgroundImage !== 'none') {
+ // Create a virtual image element for the floor plans background
+ const virtualImg = document.createElement('img');
+ virtualImg.src = backgroundImage.replace(/url\(['"]?(.+?)['"]?\)/, '$1');
+ virtualImg.isBackgroundImage = true;
+ virtualImg.originalElement = floorplanImage;
+
+ // Open image replacement for this virtual image
+ this.openImageReplacement(virtualImg);
+ } else {
+ console.log('No background image found on floor plans image');
+ }
+ } else {
+ console.log('Floor plans image not found');
+ }
+ } else {
+ console.log('Enhanced editor content not found');
+ }
+ }
+
// Method to replace background-image URLs in CSS at runtime
replaceBackgroundImagesInHTML(htmlContent) {
if (!this.realPropertyImages || this.realPropertyImages.length === 0) {