@forcecalendar/interface 1.0.13 → 1.0.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@forcecalendar/interface",
-  "version": "1.0.13",
+  "version": "1.0.15",
   "type": "module",
   "description": "Official interface layer for forceCalendar Core - Enterprise calendar components",
   "main": "dist/force-calendar-interface.umd.js",
@@ -44,7 +44,7 @@
   },
   "homepage": "https://interface.forcecalendar.org",
   "dependencies": {
-    "@forcecalendar/core": "^1.0.0"
+    "@forcecalendar/core": "^2.1.1"
   },
   "devDependencies": {
     "@babel/core": "^7.28.5",

package/src/components/ForceCalendar.js

@@ -9,6 +9,7 @@ import StateManager from '../core/StateManager.js';
 import eventBus from '../core/EventBus.js';
 import { StyleUtils } from '../utils/StyleUtils.js';
 import { DateUtils } from '../utils/DateUtils.js';
+import { DOMUtils } from '../utils/DOMUtils.js';
 
 // Import view components
 import { MonthView } from './views/MonthView.js';
@@ -38,6 +39,8 @@ export class ForceCalendar extends BaseComponent {
         super();
         this.stateManager = null;
         this.currentView = null;
+        this._hasRendered = false;  // Track if initial render is complete
+        this._cachedStyles = null;  // Cache styles to avoid recreation
     }
 
     initialize() {
@@ -82,13 +85,105 @@ export class ForceCalendar extends BaseComponent {
     }
 
     handleStateChange(newState, oldState) {
+        // If not yet rendered, do nothing (mount will handle initial render)
+        if (!this._hasRendered) {
+            return;
+        }
+
+        // Check what changed
+        const viewChanged = newState.view !== oldState?.view;
+        const dateChanged = newState.currentDate?.getTime() !== oldState?.currentDate?.getTime();
+        const eventsChanged = newState.events !== oldState?.events;
+        const loadingChanged = newState.loading !== oldState?.loading;
+        const errorChanged = newState.error !== oldState?.error;
+
+        // For loading/error state changes, do full re-render (rare)
+        if (loadingChanged || errorChanged) {
+            this.render();
+            return;
+        }
+
         // Update local view reference if needed
-        if (newState.view !== oldState?.view) {
+        if (viewChanged) {
             this.currentView = newState.view;
         }
 
-        // Re-render to update header title, active buttons, and child view
-        this.render();
+        // Targeted updates based on what changed
+        if (viewChanged) {
+            // View changed: update title, buttons, and switch view
+            this._updateTitle();
+            this._updateViewButtons();
+            this._switchView();
+        } else if (dateChanged) {
+            // Date changed: update title and re-render view
+            this._updateTitle();
+            this._updateViewContent();
+        } else if (eventsChanged) {
+            // Events changed: only re-render view content
+            this._updateViewContent();
+        }
+        // Selection changes are handled by the view internally, no action needed here
+    }
+
+    /**
+     * Update only the title text (no DOM recreation)
+     */
+    _updateTitle() {
+        const titleEl = this.$('.fc-title');
+        if (titleEl) {
+            const state = this.stateManager.getState();
+            titleEl.textContent = this.getTitle(state.currentDate, state.view);
+        }
+    }
+
+    /**
+     * Update view button active states (no DOM recreation)
+     */
+    _updateViewButtons() {
+        const state = this.stateManager.getState();
+        this.$$('[data-view]').forEach(button => {
+            const isActive = button.dataset.view === state.view;
+            button.classList.toggle('active', isActive);
+        });
+    }
+
+    /**
+     * Switch to a different view type
+     */
+    _switchView() {
+        const container = this.$('#calendar-view-container');
+        if (!container) return;
+
+        // Clean up previous view
+        if (this._currentViewInstance) {
+            if (this._currentViewInstance.cleanup) {
+                this._currentViewInstance.cleanup();
+            }
+        }
+
+        // Create new view
+        try {
+            const viewRenderer = this._createViewRenderer(this.currentView);
+            if (viewRenderer) {
+                viewRenderer._viewType = this.currentView;
+                this._currentViewInstance = viewRenderer;
+                viewRenderer.stateManager = this.stateManager;
+                viewRenderer.container = container;
+                viewRenderer.render();
+                // Note: No subscription - handleStateChange manages all view updates
+            }
+        } catch (err) {
+            console.error('[ForceCalendar] Error switching view:', err);
+        }
+    }
+
+    /**
+     * Re-render only the view content (not header)
+     */
+    _updateViewContent() {
+        if (this._currentViewInstance && this._currentViewInstance.render) {
+            this._currentViewInstance.render();
+        }
     }
 
     mount() {
@@ -501,7 +596,7 @@ export class ForceCalendar extends BaseComponent {
             return `
                 <div class="force-calendar">
                     <div class="fc-error">
-                        <p><strong>Error:</strong> ${error.message || 'An error occurred'}</p>
+                        <p><strong>Error:</strong> ${DOMUtils.escapeHTML(error.message || 'An error occurred')}</p>
                     </div>
                 </div>
             `;
@@ -570,13 +665,11 @@ export class ForceCalendar extends BaseComponent {
     afterRender() {
         // Manually instantiate and mount view component (bypasses Locker Service)
         const container = this.$('#calendar-view-container');
-        console.log('[ForceCalendar] afterRender - container:', !!container, 'stateManager:', !!this.stateManager, 'currentView:', this.currentView);
 
         // Only create view once per view type change
         if (container && this.stateManager && this.currentView) {
             // Check if container actually has content (render() clears shadow DOM)
             if (this._currentViewInstance && this._currentViewInstance._viewType === this.currentView && container.children.length > 0) {
-                console.log('[ForceCalendar] View already exists with content, skipping creation');
                 return;
             }
 
@@ -591,8 +684,6 @@ export class ForceCalendar extends BaseComponent {
                 }
             }
 
-            console.log('[ForceCalendar] Creating view for:', this.currentView);
-
             // Create a simple view renderer that doesn't use custom elements
             try {
                 const viewRenderer = this._createViewRenderer(this.currentView);
@@ -601,21 +692,9 @@ export class ForceCalendar extends BaseComponent {
                     this._currentViewInstance = viewRenderer;
                     viewRenderer.stateManager = this.stateManager;
                     viewRenderer.container = container;
-
-                    console.log('[ForceCalendar] Calling viewRenderer.render()');
                     viewRenderer.render();
-                    console.log('[ForceCalendar] viewRenderer.render() completed');
-
-                    // Subscribe to state changes (store unsubscribe function)
-                    this._viewUnsubscribe = this.stateManager.subscribe((newState, oldState) => {
-                        // Only re-render on data changes, not view changes
-                        if (newState.events !== oldState?.events ||
-                            newState.currentDate !== oldState?.currentDate) {
-                            if (viewRenderer && viewRenderer.render) {
-                                viewRenderer.render();
-                            }
-                        }
-                    });
+                    // Note: No subscription here - handleStateChange manages all view updates
+                    // via _updateViewContent(), _switchView(), or full re-render
                 }
             } catch (err) {
                 console.error('[ForceCalendar] Error creating/rendering view:', err);
@@ -663,6 +742,9 @@ export class ForceCalendar extends BaseComponent {
                 });
             });
         }
+
+        // Mark initial render as complete for targeted updates
+        this._hasRendered = true;
     }
 
     _createViewRenderer(viewName) {
@@ -677,6 +759,11 @@ export class ForceCalendar extends BaseComponent {
             _listeners: [],
             _scrolled: false,
 
+            _escapeHTML(str) {
+                if (str == null) return '';
+                return DOMUtils.escapeHTML(String(str));
+            },
+
             cleanup() {
                 this._listeners.forEach(({ element, event, handler }) => {
                     element.removeEventListener(event, handler);
@@ -758,8 +845,8 @@ export class ForceCalendar extends BaseComponent {
                                 <div class="fc-day-number" style="font-size: 13px; font-weight: 500; color: ${dayNumColor}; padding: 2px 4px; margin-bottom: 4px; ${todayStyle}">${day.dayOfMonth}</div>
                                 <div class="fc-day-events" style="display: flex; flex-direction: column; gap: 2px;">
                                     ${visibleEvents.map(evt => `
-                                        <div class="fc-event" data-event-id="${evt.id}" style="background-color: ${evt.backgroundColor || '#2563eb'}; font-size: 11px; padding: 2px 6px; border-radius: 3px; color: white; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;">
-                                            ${evt.title}
+                                        <div class="fc-event" data-event-id="${this._escapeHTML(evt.id)}" style="background-color: ${evt.backgroundColor || '#2563eb'}; font-size: 11px; padding: 2px 6px; border-radius: 3px; color: white; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;">
+                                            ${this._escapeHTML(evt.title)}
                                         </div>
                                     `).join('')}
                                     ${moreCount > 0 ? `<div class="fc-more-events" style="font-size: 10px; color: #6b7280; padding: 2px 4px; font-weight: 500;">+${moreCount} more</div>` : ''}
@@ -818,8 +905,8 @@ export class ForceCalendar extends BaseComponent {
                             ${processedDays.map(day => `
                                 <div style="border-right: 1px solid #e5e7eb; padding: 4px; display: flex; flex-direction: column; gap: 2px;">
                                     ${day.allDayEvents.map(evt => `
-                                        <div class="fc-event" data-event-id="${evt.id}" style="background-color: ${evt.backgroundColor || '#2563eb'}; font-size: 10px; padding: 2px 4px; border-radius: 2px; color: white; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
-                                            ${evt.title}
+                                        <div class="fc-event" data-event-id="${this._escapeHTML(evt.id)}" style="background-color: ${evt.backgroundColor || '#2563eb'}; font-size: 10px; padding: 2px 4px; border-radius: 2px; color: white; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
+                                            ${this._escapeHTML(evt.title)}
                                         </div>
                                     `).join('')}
                                 </div>
@@ -919,8 +1006,8 @@ export class ForceCalendar extends BaseComponent {
                             <div style="font-size: 9px; color: #6b7280; display: flex; align-items: center; justify-content: center; border-right: 1px solid #e5e7eb; text-transform: uppercase; font-weight: 700;">All day</div>
                             <div style="padding: 6px 12px; display: flex; flex-wrap: wrap; gap: 4px;">
                                 ${allDayEvents.map(evt => `
-                                    <div class="fc-event" data-event-id="${evt.id}" style="background-color: ${evt.backgroundColor || '#2563eb'}; font-size: 12px; padding: 4px 8px; border-radius: 4px; color: white; cursor: pointer; font-weight: 500;">
-                                        ${evt.title}
+                                    <div class="fc-event" data-event-id="${this._escapeHTML(evt.id)}" style="background-color: ${evt.backgroundColor || '#2563eb'}; font-size: 12px; padding: 4px 8px; border-radius: 4px; color: white; cursor: pointer; font-weight: 500;">
+                                        ${this._escapeHTML(evt.title)}
                                     </div>
                                 `).join('')}
                             </div>
@@ -965,12 +1052,12 @@ export class ForceCalendar extends BaseComponent {
                 const color = event.backgroundColor || '#2563eb';
 
                 return `
-                    <div class="fc-event" data-event-id="${event.id}"
+                    <div class="fc-event" data-event-id="${this._escapeHTML(event.id)}"
                          style="position: absolute; top: ${startMinutes}px; height: ${durationMinutes}px; left: 2px; right: 2px;
                                 background-color: ${color}; border-radius: 4px; padding: 4px 8px; font-size: 11px;
                                 font-weight: 500; color: white; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,0.1);
                                 cursor: pointer; z-index: 5;">
-                        <div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">${event.title}</div>
+                        <div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">${this._escapeHTML(event.title)}</div>
                         <div style="font-size: 10px; opacity: 0.9;">${this._formatTime(start)}</div>
                     </div>
                 `;
@@ -984,12 +1071,12 @@ export class ForceCalendar extends BaseComponent {
                 const color = event.backgroundColor || '#2563eb';
 
                 return `
-                    <div class="fc-event" data-event-id="${event.id}"
+                    <div class="fc-event" data-event-id="${this._escapeHTML(event.id)}"
                          style="position: absolute; top: ${startMinutes}px; height: ${durationMinutes}px; left: 12px; right: 24px;
                                 background-color: ${color}; border-radius: 6px; padding: 8px 12px; font-size: 13px;
                                 font-weight: 500; color: white; overflow: hidden; box-shadow: 0 2px 4px rgba(0,0,0,0.1);
                                 cursor: pointer; z-index: 5;">
-                        <div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">${event.title}</div>
+                        <div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">${this._escapeHTML(event.title)}</div>
                         <div style="font-size: 11px; opacity: 0.9;">${this._formatTime(start)} - ${this._formatTime(end)}</div>
                     </div>
                 `;