diff --git a/force-app/main/default/lwc/developmentPage/developmentPage.css b/force-app/main/default/lwc/developmentPage/developmentPage.css index 5074011..495a8f4 100644 --- a/force-app/main/default/lwc/developmentPage/developmentPage.css +++ b/force-app/main/default/lwc/developmentPage/developmentPage.css @@ -5,10 +5,12 @@ width: 100vw; height: 100vh; background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); - z-index: 9999; + z-index: 99999; overflow-y: auto; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color: #ffffff; + display: flex; + flex-direction: column; } .dev-header { @@ -46,30 +48,13 @@ letter-spacing: 1px; } -.close-dev-btn { - position: absolute; - top: 20px; - right: 20px; - background: #ff4757; - color: white; - border: none; - border-radius: 50%; - width: 40px; - height: 40px; - font-size: 1.5rem; - cursor: pointer; - transition: all 0.3s ease; -} - -.close-dev-btn:hover { - background: #ff3742; - transform: scale(1.1); -} .dev-content { padding: 30px; max-width: 1200px; margin: 0 auto; + flex: 1; + overflow-y: auto; } .dev-section { diff --git a/force-app/main/default/lwc/developmentPage/developmentPage.js b/force-app/main/default/lwc/developmentPage/developmentPage.js index c16ae58..f8a48a8 100644 --- a/force-app/main/default/lwc/developmentPage/developmentPage.js +++ b/force-app/main/default/lwc/developmentPage/developmentPage.js @@ -1,7 +1,7 @@ import { LightningElement, track } from 'lwc'; export default class DevelopmentPage extends LightningElement { - @track showDevPage = false; + @track showDevPage = true; // Always visible by default @track currentStep = 1; @track selectedTemplateId = ''; @track selectedPropertyId = ''; @@ -9,9 +9,9 @@ export default class DevelopmentPage extends LightningElement { @track currentTimestamp = ''; @track debugMode = false; - // V-key click counter - vKeyCount = 0; - vKeyTimeout = null; + // K-key click counter for closing development mode + kKeyCount = 0; + kKeyTimeout = null; connectedCallback() { this.updateTimestamp(); @@ -20,8 +20,8 @@ export default class DevelopmentPage extends LightningElement { disconnectedCallback() { this.removeKeyListener(); - if (this.vKeyTimeout) { - clearTimeout(this.vKeyTimeout); + if (this.kKeyTimeout) { + clearTimeout(this.kKeyTimeout); } } @@ -34,36 +34,28 @@ export default class DevelopmentPage extends LightningElement { } handleKeyPress(event) { - // Only listen for 'V' key (case insensitive) - if (event.key.toLowerCase() === 'v') { - this.vKeyCount++; + // Only listen for 'K' key (case insensitive) - completely silent + if (event.key.toLowerCase() === 'k') { + this.kKeyCount++; // Clear any existing timeout - if (this.vKeyTimeout) { - clearTimeout(this.vKeyTimeout); + if (this.kKeyTimeout) { + clearTimeout(this.kKeyTimeout); } // Reset counter after 3 seconds of inactivity - this.vKeyTimeout = setTimeout(() => { - this.vKeyCount = 0; + this.kKeyTimeout = setTimeout(() => { + this.kKeyCount = 0; }, 3000); - // Hide dev page after 4 V key presses - if (this.vKeyCount >= 4) { + // Close dev page after 5 K key presses (silent) + if (this.kKeyCount >= 5) { this.showDevPage = false; - this.vKeyCount = 0; // Reset counter + this.kKeyCount = 0; // Reset counter } } } - closeDevPage() { - this.showDevPage = false; - this.vKeyCount = 0; - if (this.vKeyTimeout) { - clearTimeout(this.vKeyTimeout); - } - } - updateTimestamp() { this.currentTimestamp = new Date().toLocaleString(); } diff --git a/force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.css b/force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.css index c3bf14c..cabd997 100644 --- a/force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.css +++ b/force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.css @@ -14015,4 +14015,198 @@ img[draggable="true"] { } } +/* ===== MODAL ANIMATIONS ===== */ +@keyframes fadeIn { + from { opacity: 0; } + to { opacity: 1; } +} + +@keyframes slideIn { + from { + opacity: 0; + transform: translateY(-20px) scale(0.95); + } + to { + opacity: 1; + transform: translateY(0) scale(1); + } +} + +.data-type-option:hover { + border-color: #007bff !important; + background: #f0f8ff !important; + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(0,123,255,0.15); +} + +.close-btn:hover { + background: #f5f5f5 !important; + color: #333 !important; +} + +.btn:hover:not(:disabled) { + transform: translateY(-1px); + box-shadow: 0 2px 8px rgba(0,0,0,0.15); +} + +/* ===== PDF GENERATION STYLING ===== */ +@media print { + .brochure-page { + page-break-before: always; + margin: 0; + padding: 0; + width: 210mm; + height: 297mm; + overflow: hidden; + display: flex !important; + flex-direction: column !important; + background: white !important; + box-shadow: 0 0 10px rgba(0,0,0,0.1) !important; + } + + /* Ensure newly added pages maintain A4 dimensions */ + .brochure-page.a4 { + width: 210mm !important; + height: 297mm !important; + margin: 0 !important; + padding: 0 !important; + overflow: hidden !important; + display: flex !important; + flex-direction: column !important; + background: white !important; + box-shadow: 0 0 10px rgba(0,0,0,0.1) !important; + } + + /* Ensure all brochure pages have consistent A4 dimensions */ + .brochure { + width: 210mm !important; + height: 297mm !important; + margin: 0 !important; + padding: 0 !important; + overflow: hidden !important; + display: flex !important; + flex-direction: column !important; + background: white !important; + box-shadow: 0 0 10px rgba(0,0,0,0.1) !important; + } + + /* Page break handling */ + .page-break { + page-break-before: always !important; + height: 0 !important; + margin: 0 !important; + padding: 0 !important; + } + + .brochure-page:first-child { + page-break-before: avoid; + } + + .page-header { + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important; + color: white !important; + padding: 20px !important; + margin-bottom: 20px !important; + border-radius: 10px !important; + text-align: center !important; + } + + .page-content { + padding: 20px !important; + background: white !important; + border-radius: 10px !important; + box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important; + margin-bottom: 20px !important; + } + + .page-footer { + background: #003366 !important; + color: white !important; + padding: 20px !important; + display: flex !important; + justify-content: space-between !important; + align-items: center !important; + margin-top: 20px !important; + position: absolute !important; + bottom: 0 !important; + left: 0 !important; + right: 0 !important; + } + + /* Template-specific footer colors for PDF */ + .brochure-page[data-template="modern-home-template"] .page-footer { + background: #003366 !important; + } + + .brochure-page[data-template="grand-oak-villa-template"] .page-footer { + background: #1a1a1a !important; + } + + .brochure-page[data-template="serenity-house-template"] .page-footer { + background: #1a1a1a !important; + } + + .brochure-page[data-template="luxury-mansion-template"] .page-footer { + background: #1a1a1a !important; + } + + .content-section h2 { + color: #495057 !important; + border-bottom: 2px solid #e9ecef !important; + padding-bottom: 10px !important; + margin-bottom: 20px !important; + } + + .content-section p { + color: #6c757d !important; + line-height: 1.6 !important; + margin-bottom: 15px !important; + } + + .features-grid { + display: grid !important; + grid-template-columns: repeat(2, 1fr) !important; + gap: 20px !important; + } + + .feature-item { + display: flex !important; + align-items: center !important; + padding: 10px 0 !important; + } + + .feature-item i { + color: #28a745 !important; + margin-right: 10px !important; + } + + .gallery-grid { + display: grid !important; + grid-template-columns: repeat(2, 1fr) !important; + gap: 15px !important; + } + + .gallery-item { + background: #f8f9fa !important; + border: 2px dashed #dee2e6 !important; + padding: 20px !important; + text-align: center !important; + color: #6c757d !important; + height: 100% !important; + min-height: 250px !important; + display: flex !important; + align-items: center !important; + justify-content: center !important; + break-inside: avoid !important; + page-break-inside: avoid !important; + } + + .gallery-item img { + width: 100% !important; + height: 100% !important; + object-fit: cover !important; + display: block !important; + } +} + /* ===== END OF STYLES ===== */ diff --git a/force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.html b/force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.html index b356776..148998b 100644 --- a/force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.html +++ b/force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.html @@ -1187,6 +1187,16 @@ Image +
+ + +
- -
- -
@@ -1307,6 +1304,22 @@ + + + @@ -1598,4 +1611,47 @@ + + +
+
+
+

Select Page Type

+ +
+
+
+
+
📝
+
Text Page
+
Add a text-focused page for detailed content
+
+
+
🖼️
+
Gallery Page
+
Add an image gallery page
+
+
+
✨
+
Features Page
+
Add a features and amenities page
+
+
+
📞
+
Contact Page
+
Add a contact information page
+
+
+
📄
+
Blank Page
+
Add a blank page for custom content
+
+
+
+
+ + +
+
+
\ No newline at end of file diff --git a/force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.js b/force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.js index 070815c..a06eab8 100644 --- a/force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.js +++ b/force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.js @@ -113,6 +113,41 @@ export default class PropertyTemplateSelector extends LightningElement { }; } + // Validate A4 page height compliance + validateA4HeightCompliance() { + const dimensions = this.getPageDimensions(); + const maxHeight = dimensions.heightPx; // 1123px for A4 + + // Check if content exceeds A4 height + const contentHeight = this.estimateContentHeight(); + + if (contentHeight > maxHeight) { + console.warn(`Content height (${contentHeight}px) exceeds A4 height (${maxHeight}px)`); + return false; + } + + return true; + } + + // Estimate content height for validation + estimateContentHeight() { + // Hero section: 90mm (approximately 340px at 96 DPI) - half height + const heroHeight = 340; + + // Content section: estimated based on description length + const description = this.propertyData?.Description_English__c || + this.propertyData?.descriptionEnglish || + this.propertyData?.description || ""; + const descriptionLines = Math.ceil(description.length / 80); // Approximate chars per line + const contentHeight = Math.min(descriptionLines * 20 + 100, 400); // Increased max for more content space + + // Footer: 60px + const footerHeight = 60; + + return heroHeight + contentHeight + footerHeight; + } + + // Image review properties @track showImageReview = false; @track selectedCategory = "Interior"; // Will be updated when images load @@ -3003,25 +3038,21 @@ export default class PropertyTemplateSelector extends LightningElement { // First, ensure we have template content loaded let htmlContent = ""; - // Check if preview frame has content - get from all editor elements - const previewFrames = this.template.querySelectorAll( + // Get content from the main editor frame + const editorFrame = this.template.querySelector( ".enhanced-editor-content" ); - if (!previewFrames || previewFrames.length === 0) { + if (!editorFrame) { throw new Error("Editor content not found"); } - // Combine content from all editor frames - htmlContent = ""; - previewFrames.forEach((frame, index) => { - if (frame.innerHTML && frame.innerHTML.trim()) { - if (htmlContent) { - htmlContent += `
${frame.innerHTML}`; - } else { - htmlContent = frame.innerHTML; - } - } - }); + // Get the HTML content from the editor + htmlContent = editorFrame.innerHTML; + + // Ensure we have content + if (!htmlContent || htmlContent.trim() === "") { + throw new Error("No content found in editor"); + } // Debug: Check if draggable elements are present before cleaning const tempDiv = document.createElement("div"); @@ -3060,7 +3091,7 @@ export default class PropertyTemplateSelector extends LightningElement { htmlContent = this.createCompleteTemplateHTML(); // Load it into the preview frame so user can see it - previewFrame.innerHTML = htmlContent; + editorFrame.innerHTML = htmlContent; } else { throw new Error("No template or property selected"); } @@ -4753,6 +4784,11 @@ export default class PropertyTemplateSelector extends LightningElement { const data = this.propertyData || {}; const dimensions = this.getPageDimensions(); console.log("data-----------", data); + + // Validate A4 height compliance + if (!this.validateA4HeightCompliance()) { + console.warn("Content may exceed A4 page height. Consider reducing description length."); + } const propertyName = data.Name || data.propertyName; const propertyType = data.Property_Type__c || data.propertyType; const location = data.Address__c || data.location; @@ -4787,12 +4823,18 @@ export default class PropertyTemplateSelector extends LightningElement { const bathrooms = data.Bathrooms__c || data.bathrooms; const area = data.Square_Feet__c || data.area; - const description = this.formatDescriptionForPDF( - data.Description_English__c || - data.descriptionEnglish || - data.description || - "This beautiful property offers exceptional value and modern amenities. Located in a prime area, it represents an excellent investment opportunity." - ); + // Get description and format it dynamically + const rawDescription = data.Description_English__c || + data.descriptionEnglish || + data.description || + "This beautiful property offers exceptional value and modern amenities. Located in a prime area, it represents an excellent investment opportunity."; + + const description = this.formatDescriptionForPDF(rawDescription); + + // Add dynamic class based on description length for CSS targeting + const descriptionLength = rawDescription.length; + const descriptionClass = descriptionLength > 500 ? 'description-long' : + descriptionLength > 200 ? 'description-medium' : 'description-short'; const referenceId = data.pcrm__Title_English__c || data.Name || data.propertyName || ""; @@ -4862,7 +4904,7 @@ export default class PropertyTemplateSelector extends LightningElement { const allImages = Array.isArray(this.realPropertyImages) ? this.realPropertyImages : []; - const imagesPerPage = 6; // Optimal for A4 with 2x3 grid + const imagesPerPage = 8; // 2x4 grid for better space utilization let galleryPagesHTML = ""; if (allImages.length > 0) { for (let i = 0; i < allImages.length; i += imagesPerPage) { @@ -4882,20 +4924,26 @@ export default class PropertyTemplateSelector extends LightningElement { img.url ? `https://salesforce.tech4biz.io${img.url}` : 'https://via.placeholder.com/400x200?text=No+Image'; - return `
- ${title} + // First image gets half height, others get standard height + const imageHeight = idx === 0 ? '100px' : '150px'; + + return `
+ ${title}
`; }) .join(""); galleryPagesHTML += ` -
-
-
+
+
+
+

Property Gallery

+
+
${chunkHTML}
-
+
Agent: ${agentName} | ${agentEmail} | ${agentPhone}
@@ -4996,7 +5044,9 @@ export default class PropertyTemplateSelector extends LightningElement { /* --- Page 1: Front Page Styles --- */ .hero { - height: 60%; + height: 90mm; /* Half height for first section (30% of 297mm) */ + min-height: 80mm; + max-height: 100mm; background-image: url('https://images.unsplash.com/photo-1568605114967-8130f3a36994?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&w=1600&h=1066'); background-size: cover; background-position: center; @@ -5008,7 +5058,6 @@ export default class PropertyTemplateSelector extends LightningElement { flex-direction: column; justify-content: flex-end; overflow: hidden; - min-height: 400px; } .hero-overlay { background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.1) 100%); @@ -5053,7 +5102,9 @@ export default class PropertyTemplateSelector extends LightningElement { flex-grow: 1; display: flex; flex-direction: column; - justify-content: space-between; + justify-content: flex-start; + max-height: calc(297mm - 90mm - 60px); /* A4 height minus hero (now 90mm) and footer */ + overflow: visible; /* Allow content to flow naturally */ } .description h2 { font-size: 24px; @@ -5062,14 +5113,41 @@ export default class PropertyTemplateSelector extends LightningElement { margin-top: 0; margin-bottom: 5px; } + .description { + flex: 1; + display: flex; + flex-direction: column; + justify-content: flex-start; + min-height: 0; /* Allow flex shrinking */ + } .description p { color: var(--color-text-muted); - margin: 0; - font-size: clamp(0.528rem, 0.66rem + 0.3vw, 0.792rem); /* 10% increase from previous */ - line-height: clamp(0.792, 0.924 + 0.12vw, 1.056); /* 10% increase from previous */ - max-height: none; /* Remove height restriction to allow full content */ - overflow: visible; /* Allow content to flow naturally */ - padding: 10px 0; /* Add some padding for better spacing */ + margin: 0 0 8px 0; /* Add small margin between paragraphs */ + font-size: clamp(0.4rem, 0.5rem + 0.2vw, 0.7rem); /* Dynamic font sizing */ + line-height: clamp(1.2, 1.3 + 0.1vw, 1.4); /* Dynamic line height */ + padding: 10px 0; /* Restore padding for better spacing */ + word-wrap: break-word; + hyphens: auto; + text-align: justify; + overflow-wrap: break-word; + /* Remove fixed height constraints to allow dynamic sizing */ + } + .description p:last-child { + margin-bottom: 0; /* Remove margin from last paragraph */ + } + + /* Dynamic description sizing based on content length */ + .description-short p { + font-size: clamp(0.5rem, 0.6rem + 0.2vw, 0.8rem); + line-height: 1.3; + } + .description-medium p { + font-size: clamp(0.4rem, 0.5rem + 0.2vw, 0.7rem); + line-height: 1.25; + } + .description-long p { + font-size: clamp(0.35rem, 0.45rem + 0.15vw, 0.6rem); + line-height: 1.2; } .agent-footer { border-top: 4px solid var(--color-accent); @@ -5145,7 +5223,7 @@ export default class PropertyTemplateSelector extends LightningElement { flex-grow: 1; display: grid; grid-template-columns: 1fr 1.2fr; - gap: 40px; + gap: 20px; } .spec-list { font-size: 15px; @@ -5203,7 +5281,7 @@ export default class PropertyTemplateSelector extends LightningElement { .location-section { display: grid; grid-template-columns: 1fr 1fr; - gap: 30px; + gap: 20px; padding: 40px; background-color: var(--color-background-light); flex: 1.5; @@ -5228,7 +5306,7 @@ export default class PropertyTemplateSelector extends LightningElement { align-items: flex-start; justify-content: flex-start; gap: 15px; - padding: 10px; + padding: 10px 0; margin-bottom: 5px; border-radius: 4px; transition: background-color 0.2s ease-in-out; @@ -5290,6 +5368,9 @@ export default class PropertyTemplateSelector extends LightningElement { justify-content: space-between; align-items: center; font-size: 14px; + height: 60px; /* Fixed footer height for A4 compliance */ + min-height: 60px; + max-height: 60px; } .page-footer strong, .p1-footer strong, .gallery-page footer strong { color: var(--color-accent); @@ -5324,6 +5405,33 @@ export default class PropertyTemplateSelector extends LightningElement { color: var(--color-primary); font-weight: 700; } + + /* --- Gallery Page Specific Styles --- */ + .gallery-item { + position: relative; + overflow: hidden; + border-radius: 8px; + box-shadow: 0 2px 8px rgba(0,0,0,0.1); + display: flex; + align-items: center; + justify-content: center; + } + .gallery-item img { + width: 100%; + height: 100%; + object-fit: cover; + display: block; + break-inside: avoid; + page-break-inside: avoid; + } + .gallery-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 8px; + height: 100%; + align-content: start; + overflow: hidden; + } @@ -5345,7 +5453,7 @@ export default class PropertyTemplateSelector extends LightningElement {
-
+

About this Property

${description}
@@ -5585,7 +5693,7 @@ ${galleryPagesHTML} const allImages = Array.isArray(this.realPropertyImages) ? this.realPropertyImages : []; - const imagesPerPage = 6; // Optimal for A4 with 2x3 grid + const imagesPerPage = 8; // 2x4 grid for better space utilization let galleryPagesHTML = ""; if (allImages.length > 0) { for (let i = 0; i < allImages.length; i += imagesPerPage) { @@ -5605,8 +5713,8 @@ ${galleryPagesHTML} img.url ? `https://salesforce.tech4biz.io${img.url}` : 'https://via.placeholder.com/400x200?text=No+Image'; - return `
- ${title} + return `
+ ${title}
`; }) @@ -5617,10 +5725,9 @@ ${galleryPagesHTML}

Property Gallery

- ${propertyName}
-
${chunkHTML}
+
${chunkHTML}