Available from
${this.propertyData.rentAvailableFrom}
Rent Available To
${this.propertyData.rentAvailableTo}
@@ -16930,14 +16952,14 @@ ${galleryPagesHTML}
style.textContent = `
.hero-edit-icon, .visual-header-edit-icon {
position: absolute;
- top: 20px;
- right: 20px;
+ top: 10px;
+ right: 10px;
z-index: 1000;
background: rgba(0,0,0,0.7);
color: white;
border-radius: 50%;
- width: 40px;
- height: 40px;
+ width: 35px;
+ height: 35px;
display: flex;
align-items: center;
justify-content: center;
@@ -16978,6 +17000,12 @@ ${galleryPagesHTML}
heroSection = editorContent.querySelector('.cover-page');
}
+ // For grand oak villa template, look for .cover-page instead
+ if (!heroSection && (this.selectedTemplateId === 'grand-oak-villa-template' || this.selectedTemplateId === 'grand-oak-villa-a3-template')) {
+ console.log('Looking for grand oak villa template cover page...');
+ heroSection = editorContent.querySelector('.cover-page');
+ }
+
if (heroSection) {
console.log('Hero section found');
if (!heroSection.querySelector('.hero-edit-icon')) {
@@ -17003,32 +17031,39 @@ ${galleryPagesHTML}
console.log('Hero section not found in editor content');
}
- // Add pencil icon to visual header (page 2)
- console.log('Looking for visual header...');
- const visualHeader = editorContent.querySelector('.visual-header');
+ // Add pencil icon to visual header (page 2) or location map container (page 3 for Grand Oak Villa)
+ console.log('Looking for visual header or location map container...');
+ let visualHeader = editorContent.querySelector('.visual-header');
+
+ // For Grand Oak Villa template, look for location map container instead
+ if (!visualHeader && (this.selectedTemplateId === 'grand-oak-villa-template' || this.selectedTemplateId === 'grand-oak-villa-a3-template')) {
+ console.log('Looking for Grand Oak Villa location map container...');
+ visualHeader = editorContent.querySelector('.location-map-container');
+ }
+
if (visualHeader) {
- console.log('Visual header found');
+ console.log('Visual header or location map container found');
if (!visualHeader.querySelector('.visual-header-edit-icon')) {
- console.log('Creating pencil icon for visual header...');
+ console.log('Creating pencil icon for visual header or location map container...');
// Create pencil icon element
const pencilIcon = document.createElement('div');
pencilIcon.className = 'visual-header-edit-icon';
pencilIcon.innerHTML = '
';
pencilIcon.title = 'Replace Page 2 Image';
pencilIcon.onclick = () => {
- console.log('Visual header pencil icon clicked');
- // Trigger image replacement for visual header
+ console.log('Visual header or location map pencil icon clicked');
+ // Trigger image replacement for visual header or location map
this.handleVisualHeaderImageReplacement();
};
- // Add the pencil icon to the visual header
+ // Add the pencil icon to the visual header or location map container
visualHeader.appendChild(pencilIcon);
- console.log('Pencil icon added to visual header successfully');
+ console.log('Pencil icon added to visual header or location map container successfully');
} else {
- console.log('Visual header pencil icon already exists');
+ console.log('Visual header or location map container pencil icon already exists');
}
} else {
- console.log('Visual header not found in editor content');
+ console.log('Visual header or location map container not found in editor content');
}
// Add pencil icon to floor plans section for luxury mansion template
@@ -17085,6 +17120,12 @@ ${galleryPagesHTML}
heroSection = editorContent.querySelector('.cover-page');
}
+ // For grand oak villa template, look for .cover-page instead
+ if (!heroSection && (this.selectedTemplateId === 'grand-oak-villa-template' || this.selectedTemplateId === 'grand-oak-villa-a3-template')) {
+ console.log('Looking for grand oak villa template cover page for replacement...');
+ heroSection = editorContent.querySelector('.cover-page');
+ }
+
if (heroSection) {
// Get the computed background image
const computedStyle = window.getComputedStyle(heroSection);
@@ -17110,19 +17151,26 @@ ${galleryPagesHTML}
}
}
- // Handle visual header image replacement (page 2)
+ // Handle visual header image replacement (page 2) or location map container (page 3 for Grand Oak Villa)
handleVisualHeaderImageReplacement() {
- // Find the visual header background image
+ // Find the visual header background image or location map container
const editorContent = this.template.querySelector('.enhanced-editor-content');
if (editorContent) {
- const visualHeader = editorContent.querySelector('.visual-header');
+ let visualHeader = editorContent.querySelector('.visual-header');
+
+ // For Grand Oak Villa template, look for location map container instead
+ if (!visualHeader && (this.selectedTemplateId === 'grand-oak-villa-template' || this.selectedTemplateId === 'grand-oak-villa-a3-template')) {
+ console.log('Looking for Grand Oak Villa location map container for replacement...');
+ visualHeader = editorContent.querySelector('.location-map-container');
+ }
+
if (visualHeader) {
// Get the computed background image
const computedStyle = window.getComputedStyle(visualHeader);
const backgroundImage = computedStyle.backgroundImage;
if (backgroundImage && backgroundImage !== 'none') {
- // Create a virtual image element for the visual header background
+ // Create a virtual image element for the visual header or location map background
const virtualImg = document.createElement('img');
virtualImg.src = backgroundImage.replace(/url\(['"]?(.+?)['"]?\)/, '$1');
virtualImg.isBackgroundImage = true;
@@ -17131,10 +17179,10 @@ ${galleryPagesHTML}
// Open image replacement for this virtual image
this.openImageReplacement(virtualImg);
} else {
- console.log('No background image found on visual header');
+ console.log('No background image found on visual header or location map container');
}
} else {
- console.log('Visual header not found');
+ console.log('Visual header or location map container not found');
}
} else {
console.log('Enhanced editor content not found');
@@ -17421,39 +17469,47 @@ ${galleryPagesHTML}
// Generate Property Gallery HTML for uncategorized images
generatePropertyGalleryHTML() {
if (!this.realPropertyImages || this.realPropertyImages.length === 0) {
- return "";
+ return `
`.repeat(6);
}
let galleryHTML = "";
this.realPropertyImages.forEach((image, index) => {
- const title =
- image.title || image.pcrm__Title__c || `Property Image ${index + 1}`;
- galleryHTML += `
-
-
- ${title}
-
+ const title = this.escapeHtml(image.title || image.pcrm__Title__c || `Property Image ${index + 1}`);
+ const imageUrl = this.escapeHtml(image.url || '');
+ galleryHTML += `
+
Image not available
'"/>
`;
});
+ // Fill remaining slots with placeholders if needed (6 images per page)
+ const remainingSlots = 6 - this.realPropertyImages.length;
+ for (let i = 0; i < remainingSlots; i++) {
+ galleryHTML += `
`;
+ }
+
return galleryHTML;
}
// Generate gallery HTML for a provided subset of images
generatePropertyGalleryHTMLForImages(imagesSubset) {
if (!imagesSubset || imagesSubset.length === 0) {
- return "";
+ return `
`.repeat(6);
}
+
let galleryHTML = "";
imagesSubset.forEach((image, index) => {
- const title =
- image.title || image.pcrm__Title__c || `Property Image ${index + 1}`;
- galleryHTML += `
-
-
- ${title}
-
+ const title = this.escapeHtml(image.title || image.pcrm__Title__c || `Property Image ${index + 1}`);
+ const imageUrl = this.escapeHtml(image.url || '');
+ galleryHTML += `
+
Image not available
'"/>
`;
});
+
+ // Fill remaining slots with placeholders if needed (6 images per page)
+ const remainingSlots = 6 - imagesSubset.length;
+ for (let i = 0; i < remainingSlots; i++) {
+ galleryHTML += `
`;
+ }
+
return galleryHTML;
}