@forcecalendar/interface 1.0.16 → 1.0.18

package/src/core/EventBus.js

@@ -58,6 +58,17 @@ class EventBus {
      * Unsubscribe from an event
      */
     off(eventName, handler) {
+        // Handle wildcard pattern removal
+        if (eventName.includes('*')) {
+            for (const sub of this.wildcardHandlers) {
+                if (sub.pattern === eventName && sub.handler === handler) {
+                    this.wildcardHandlers.delete(sub);
+                    return;
+                }
+            }
+            return;
+        }
+
         if (!this.events.has(eventName)) return;
 
         const handlers = this.events.get(eventName);
@@ -71,6 +82,43 @@ class EventBus {
         }
     }
 
+    /**
+     * Remove all wildcard handlers matching a pattern
+     * @param {string} pattern - Pattern to match (e.g., 'event:*')
+     */
+    offWildcard(pattern) {
+        for (const sub of [...this.wildcardHandlers]) {
+            if (sub.pattern === pattern) {
+                this.wildcardHandlers.delete(sub);
+            }
+        }
+    }
+
+    /**
+     * Remove all handlers (regular and wildcard) for a specific handler function
+     * Useful for cleanup when a component is destroyed
+     * @param {Function} handler - Handler function to remove
+     */
+    offAll(handler) {
+        // Remove from regular events
+        for (const [eventName, handlers] of this.events) {
+            const index = handlers.findIndex(sub => sub.handler === handler);
+            if (index > -1) {
+                handlers.splice(index, 1);
+            }
+            if (handlers.length === 0) {
+                this.events.delete(eventName);
+            }
+        }
+
+        // Remove from wildcard handlers
+        for (const sub of [...this.wildcardHandlers]) {
+            if (sub.handler === handler) {
+                this.wildcardHandlers.delete(sub);
+            }
+        }
+    }
+
     /**
      * Emit an event
      * @param {string} eventName - Event name
@@ -157,6 +205,24 @@ class EventBus {
     getHandlerCount(eventName) {
         return this.events.has(eventName) ? this.events.get(eventName).length : 0;
     }
+
+    /**
+     * Get wildcard handler count
+     */
+    getWildcardHandlerCount() {
+        return this.wildcardHandlers.size;
+    }
+
+    /**
+     * Get total handler count (for debugging/monitoring)
+     */
+    getTotalHandlerCount() {
+        let count = this.wildcardHandlers.size;
+        for (const handlers of this.events.values()) {
+            count += handlers.length;
+        }
+        return count;
+    }
 }
 
 // Create singleton instance

package/src/core/StateManager.js

@@ -85,13 +85,50 @@ class StateManager {
         return this.state;
     }
 
-    subscribe(callback) {
+    subscribe(callback, subscriberId = null) {
         this.subscribers.add(callback);
-        return () => this.unsubscribe(callback);
+
+        // Track subscriber ID for debugging/cleanup
+        if (subscriberId) {
+            if (!this._subscriberIds) {
+                this._subscriberIds = new Map();
+            }
+            this._subscriberIds.set(subscriberId, callback);
+        }
+
+        return () => this.unsubscribe(callback, subscriberId);
     }
 
-    unsubscribe(callback) {
+    unsubscribe(callback, subscriberId = null) {
         this.subscribers.delete(callback);
+
+        // Clean up ID tracking
+        if (subscriberId && this._subscriberIds) {
+            this._subscriberIds.delete(subscriberId);
+        }
+    }
+
+    /**
+     * Unsubscribe by subscriber ID
+     * @param {string} subscriberId - ID used when subscribing
+     */
+    unsubscribeById(subscriberId) {
+        if (!this._subscriberIds) return false;
+
+        const callback = this._subscriberIds.get(subscriberId);
+        if (callback) {
+            this.subscribers.delete(callback);
+            this._subscriberIds.delete(subscriberId);
+            return true;
+        }
+        return false;
+    }
+
+    /**
+     * Get subscriber count (for debugging/monitoring)
+     */
+    getSubscriberCount() {
+        return this.subscribers.size;
     }
 
     notifySubscribers(oldState, newState) {
@@ -362,6 +399,10 @@ class StateManager {
     // Destroy
     destroy() {
         this.subscribers.clear();
+        if (this._subscriberIds) {
+            this._subscriberIds.clear();
+            this._subscriberIds = null;
+        }
         this.state = null;
         this.calendar = null;
     }

package/src/index.js

@@ -15,11 +15,17 @@ export { DateUtils } from './utils/DateUtils.js';
 export { DOMUtils } from './utils/DOMUtils.js';
 export { StyleUtils } from './utils/StyleUtils.js';
 
+// View Renderers (pure JS classes, Locker Service compatible)
+export { BaseViewRenderer } from './renderers/BaseViewRenderer.js';
+export { MonthViewRenderer } from './renderers/MonthViewRenderer.js';
+export { WeekViewRenderer } from './renderers/WeekViewRenderer.js';
+export { DayViewRenderer } from './renderers/DayViewRenderer.js';
+
 // Components
 import './components/ForceCalendar.js';
 export { ForceCalendar } from './components/ForceCalendar.js';
 
-// Views
+// Views (Web Components - for non-Salesforce usage)
 export { MonthView } from './components/views/MonthView.js';
 export { WeekView } from './components/views/WeekView.js';
 export { DayView } from './components/views/DayView.js';

package/src/renderers/BaseViewRenderer.js

@@ -0,0 +1,219 @@
+/**
+ * BaseViewRenderer - Foundation for all view renderers
+ *
+ * Pure JavaScript class (no Web Components) for Salesforce Locker Service compatibility.
+ * Provides common functionality for rendering calendar views.
+ */
+
+import { DOMUtils } from '../utils/DOMUtils.js';
+import { DateUtils } from '../utils/DateUtils.js';
+import { StyleUtils } from '../utils/StyleUtils.js';
+
+export class BaseViewRenderer {
+    /**
+     * @param {HTMLElement} container - The DOM element to render into
+     * @param {StateManager} stateManager - The state manager instance
+     */
+    constructor(container, stateManager) {
+        this.container = container;
+        this.stateManager = stateManager;
+        this._listeners = [];
+        this._scrolled = false;
+    }
+
+    /**
+     * Render the view into the container
+     * Must be implemented by subclasses
+     */
+    render() {
+        throw new Error('render() must be implemented by subclass');
+    }
+
+    /**
+     * Clean up event listeners
+     */
+    cleanup() {
+        this._listeners.forEach(({ element, event, handler }) => {
+            element.removeEventListener(event, handler);
+        });
+        this._listeners = [];
+    }
+
+    /**
+     * Add an event listener with automatic cleanup tracking
+     * @param {HTMLElement} element
+     * @param {string} event
+     * @param {Function} handler
+     */
+    addListener(element, event, handler) {
+        const boundHandler = handler.bind(this);
+        element.addEventListener(event, boundHandler);
+        this._listeners.push({ element, event, handler: boundHandler });
+    }
+
+    /**
+     * Escape HTML to prevent XSS
+     * @param {string} str
+     * @returns {string}
+     */
+    escapeHTML(str) {
+        if (str == null) return '';
+        return DOMUtils.escapeHTML(String(str));
+    }
+
+    /**
+     * Check if a date is today
+     * @param {Date} date
+     * @returns {boolean}
+     */
+    isToday(date) {
+        const today = new Date();
+        return date.getDate() === today.getDate() &&
+               date.getMonth() === today.getMonth() &&
+               date.getFullYear() === today.getFullYear();
+    }
+
+    /**
+     * Check if two dates are the same day
+     * @param {Date} date1
+     * @param {Date} date2
+     * @returns {boolean}
+     */
+    isSameDay(date1, date2) {
+        return date1.getDate() === date2.getDate() &&
+               date1.getMonth() === date2.getMonth() &&
+               date1.getFullYear() === date2.getFullYear();
+    }
+
+    /**
+     * Format hour for display (e.g., "9 AM", "2 PM")
+     * @param {number} hour - Hour in 24-hour format (0-23)
+     * @returns {string}
+     */
+    formatHour(hour) {
+        const period = hour >= 12 ? 'PM' : 'AM';
+        const displayHour = hour % 12 || 12;
+        return `${displayHour} ${period}`;
+    }
+
+    /**
+     * Format time for display (e.g., "9 AM", "2:30 PM")
+     * @param {Date} date
+     * @returns {string}
+     */
+    formatTime(date) {
+        const hours = date.getHours();
+        const minutes = date.getMinutes();
+        const period = hours >= 12 ? 'PM' : 'AM';
+        const displayHour = hours % 12 || 12;
+        return minutes === 0
+            ? `${displayHour} ${period}`
+            : `${displayHour}:${minutes.toString().padStart(2, '0')} ${period}`;
+    }
+
+    /**
+     * Get contrasting text color for a background color
+     * Uses WCAG luminance formula
+     * @param {string} bgColor - Hex color string
+     * @returns {string} 'black' or 'white'
+     */
+    getContrastingTextColor(bgColor) {
+        if (!bgColor || typeof bgColor !== 'string') return 'white';
+
+        const color = (bgColor.charAt(0) === '#') ? bgColor.substring(1) : bgColor;
+
+        if (!/^[0-9A-Fa-f]{3}$|^[0-9A-Fa-f]{6}$/.test(color)) {
+            return 'white';
+        }
+
+        const fullColor = color.length === 3
+            ? color[0] + color[0] + color[1] + color[1] + color[2] + color[2]
+            : color;
+
+        const r = parseInt(fullColor.substring(0, 2), 16);
+        const g = parseInt(fullColor.substring(2, 4), 16);
+        const b = parseInt(fullColor.substring(4, 6), 16);
+
+        if (isNaN(r) || isNaN(g) || isNaN(b)) {
+            return 'white';
+        }
+
+        const uicolors = [r / 255, g / 255, b / 255];
+        const c = uicolors.map((col) => {
+            if (col <= 0.03928) {
+                return col / 12.92;
+            }
+            return Math.pow((col + 0.055) / 1.055, 2.4);
+        });
+        const L = (0.2126 * c[0]) + (0.7152 * c[1]) + (0.0722 * c[2]);
+        return (L > 0.179) ? 'black' : 'white';
+    }
+
+    /**
+     * Render the "now" indicator line for time-based views
+     * @returns {string} HTML string
+     */
+    renderNowIndicator() {
+        const now = new Date();
+        const minutes = now.getHours() * 60 + now.getMinutes();
+        return `<div class="fc-now-indicator" style="position: absolute; left: 0; right: 0; top: ${minutes}px; height: 2px; background: #dc2626; z-index: 15; pointer-events: none;"></div>`;
+    }
+
+    /**
+     * Render a timed event block
+     * @param {Object} event - Event object
+     * @param {Object} options - Rendering options
+     * @returns {string} HTML string
+     */
+    renderTimedEvent(event, options = {}) {
+        const { compact = true } = options;
+        const start = new Date(event.start);
+        const end = new Date(event.end);
+        const startMinutes = start.getHours() * 60 + start.getMinutes();
+        const durationMinutes = Math.max((end - start) / (1000 * 60), compact ? 20 : 30);
+        const color = event.backgroundColor || '#2563eb';
+
+        const padding = compact ? '4px 8px' : '8px 12px';
+        const fontSize = compact ? '11px' : '13px';
+        const margin = compact ? '2px' : '12px';
+        const rightMargin = compact ? '2px' : '24px';
+        const borderRadius = compact ? '4px' : '6px';
+
+        return `
+            <div class="fc-event fc-timed-event" data-event-id="${this.escapeHTML(event.id)}"
+                 style="position: absolute; top: ${startMinutes}px; height: ${durationMinutes}px;
+                        left: ${margin}; right: ${rightMargin};
+                        background-color: ${color}; border-radius: ${borderRadius};
+                        padding: ${padding}; font-size: ${fontSize};
+                        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;">
+                    ${this.escapeHTML(event.title)}
+                </div>
+                <div style="font-size: ${compact ? '10px' : '11px'}; opacity: 0.9;">
+                    ${this.formatTime(start)}${compact ? '' : ' - ' + this.formatTime(end)}
+                </div>
+            </div>
+        `;
+    }
+
+    /**
+     * Attach common event handlers for day/event clicks
+     */
+    attachCommonEventHandlers() {
+        // Event click handlers
+        this.container.querySelectorAll('.fc-event').forEach(eventEl => {
+            this.addListener(eventEl, 'click', (e) => {
+                e.stopPropagation();
+                const eventId = eventEl.dataset.eventId;
+                const event = this.stateManager.getEvents().find(ev => ev.id === eventId);
+                if (event) {
+                    this.stateManager.selectEvent(event);
+                }
+            });
+        });
+    }
+}
+
+export default BaseViewRenderer;

package/src/renderers/DayViewRenderer.js

@@ -0,0 +1,199 @@
+/**
+ * DayViewRenderer - Renders single day calendar view
+ *
+ * Pure JavaScript renderer for day view, compatible with Salesforce Locker Service.
+ */
+
+import { BaseViewRenderer } from './BaseViewRenderer.js';
+
+export class DayViewRenderer extends BaseViewRenderer {
+    constructor(container, stateManager) {
+        super(container, stateManager);
+        this.hourHeight = 60; // pixels per hour
+        this.totalHeight = 24 * this.hourHeight; // 1440px for 24 hours
+    }
+
+    render() {
+        if (!this.container || !this.stateManager) return;
+
+        const viewData = this.stateManager.getViewData();
+        if (!viewData) {
+            this.container.innerHTML = '<div style="padding: 20px; text-align: center; color: #666;">No data available for day view.</div>';
+            return;
+        }
+
+        this.cleanup();
+        const config = this.stateManager.getState().config;
+        const html = this._renderDayView(viewData, config);
+        this.container.innerHTML = html;
+        this._attachEventHandlers();
+        this._scrollToCurrentTime();
+    }
+
+    _renderDayView(viewData, config) {
+        const currentDate = this.stateManager?.getState()?.currentDate || new Date();
+        const dayData = this._extractDayData(viewData, currentDate);
+
+        if (!dayData) {
+            return '<div style="padding: 20px; text-align: center; color: #666;">No data available for day view.</div>';
+        }
+
+        const { dayDate, dayName, isToday, allDayEvents, timedEvents } = dayData;
+        const hours = Array.from({ length: 24 }, (_, i) => i);
+
+        return `
+            <div class="fc-day-view" style="display: flex; flex-direction: column; height: 100%; background: #fff; overflow: hidden;">
+                ${this._renderHeader(dayDate, dayName, isToday)}
+                ${this._renderAllDayRow(allDayEvents, dayDate)}
+                ${this._renderTimeGrid(timedEvents, isToday, dayDate, hours)}
+            </div>
+        `;
+    }
+
+    _extractDayData(viewData, currentDate) {
+        let dayDate, dayName, isToday, allDayEvents, timedEvents;
+        const dayNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+
+        if (viewData.type === 'day' && viewData.date) {
+            // Core day view structure
+            dayDate = new Date(viewData.date);
+            dayName = viewData.dayName || dayNames[dayDate.getDay()];
+            isToday = viewData.isToday !== undefined ? viewData.isToday : this.isToday(dayDate);
+            allDayEvents = viewData.allDayEvents || [];
+
+            // Extract timed events from hours array
+            if (viewData.hours && Array.isArray(viewData.hours)) {
+                const eventMap = new Map();
+                viewData.hours.forEach(hour => {
+                    (hour.events || []).forEach(evt => {
+                        if (!eventMap.has(evt.id)) {
+                            eventMap.set(evt.id, evt);
+                        }
+                    });
+                });
+                timedEvents = Array.from(eventMap.values());
+            } else {
+                timedEvents = [];
+            }
+        } else if (viewData.days && viewData.days.length > 0) {
+            // Enriched structure with days array
+            const dayDataItem = viewData.days.find(d => this.isSameDay(new Date(d.date), currentDate)) || viewData.days[0];
+            dayDate = new Date(dayDataItem.date);
+            dayName = dayNames[dayDate.getDay()];
+            isToday = this.isToday(dayDate);
+            const events = dayDataItem.events || [];
+            allDayEvents = events.filter(e => e.allDay);
+            timedEvents = events.filter(e => !e.allDay);
+        } else {
+            return null;
+        }
+
+        return { dayDate, dayName, isToday, allDayEvents, timedEvents };
+    }
+
+    _renderHeader(dayDate, dayName, isToday) {
+        return `
+            <div class="fc-day-header" style="display: grid; grid-template-columns: 60px 1fr; border-bottom: 1px solid #e5e7eb; background: #f9fafb; flex-shrink: 0;">
+                <div style="border-right: 1px solid #e5e7eb;"></div>
+                <div style="padding: 16px 24px;">
+                    <div style="font-size: 12px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 0.1em;">
+                        ${dayName}
+                    </div>
+                    <div style="font-size: 24px; font-weight: 600; margin-top: 4px; ${isToday ? 'color: #dc2626;' : 'color: #111827;'}">
+                        ${dayDate.getDate()}
+                    </div>
+                </div>
+            </div>
+        `;
+    }
+
+    _renderAllDayRow(allDayEvents, dayDate) {
+        return `
+            <div class="fc-all-day-row" style="display: grid; grid-template-columns: 60px 1fr; border-bottom: 1px solid #e5e7eb; background: #fafafa; min-height: 36px; flex-shrink: 0;">
+                <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 class="fc-all-day-cell" data-date="${dayDate.toISOString()}" style="padding: 6px 12px; display: flex; flex-wrap: wrap; gap: 4px;">
+                    ${allDayEvents.map(evt => `
+                        <div class="fc-event fc-all-day-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>
+            </div>
+        `;
+    }
+
+    _renderTimeGrid(timedEvents, isToday, dayDate, hours) {
+        return `
+            <div id="day-scroll-container" class="fc-time-grid-container" style="flex: 1; overflow-y: auto; overflow-x: hidden; position: relative;">
+                <div class="fc-time-grid" style="display: grid; grid-template-columns: 60px 1fr; position: relative; height: ${this.totalHeight}px;">
+                    ${this._renderTimeGutter(hours)}
+                    ${this._renderDayColumn(timedEvents, isToday, dayDate, hours)}
+                </div>
+            </div>
+        `;
+    }
+
+    _renderTimeGutter(hours) {
+        return `
+            <div class="fc-time-gutter" style="border-right: 1px solid #e5e7eb; background: #fafafa;">
+                ${hours.map(h => `
+                    <div style="height: ${this.hourHeight}px; font-size: 11px; color: #6b7280; text-align: right; padding-right: 12px; font-weight: 500;">
+                        ${h === 0 ? '' : this.formatHour(h)}
+                    </div>
+                `).join('')}
+            </div>
+        `;
+    }
+
+    _renderDayColumn(timedEvents, isToday, dayDate, hours) {
+        return `
+            <div class="fc-day-column" data-date="${dayDate.toISOString()}" style="position: relative; cursor: pointer;">
+                <!-- Hour grid lines -->
+                ${hours.map(() => `<div style="height: ${this.hourHeight}px; border-bottom: 1px solid #f3f4f6;"></div>`).join('')}
+
+                <!-- Now indicator for today -->
+                ${isToday ? this.renderNowIndicator() : ''}
+
+                <!-- Timed events -->
+                ${timedEvents.map(evt => this.renderTimedEvent(evt, { compact: false })).join('')}
+            </div>
+        `;
+    }
+
+    _attachEventHandlers() {
+        // Day column click handler
+        this.container.querySelectorAll('.fc-day-column').forEach(dayEl => {
+            this.addListener(dayEl, 'click', (e) => {
+                if (e.target.closest('.fc-event')) return;
+
+                const date = new Date(dayEl.dataset.date);
+                const rect = dayEl.getBoundingClientRect();
+                const scrollContainer = this.container.querySelector('#day-scroll-container');
+                const y = e.clientY - rect.top + (scrollContainer ? scrollContainer.scrollTop : 0);
+
+                // Calculate time from click position
+                date.setHours(Math.floor(y / this.hourHeight), Math.floor((y % this.hourHeight) / (this.hourHeight / 60)), 0, 0);
+                this.stateManager.selectDate(date);
+            });
+        });
+
+        // Common event handlers (event clicks)
+        this.attachCommonEventHandlers();
+    }
+
+    _scrollToCurrentTime() {
+        if (this._scrolled) return;
+
+        const scrollContainer = this.container.querySelector('#day-scroll-container');
+        if (scrollContainer) {
+            // Scroll to 8 AM, minus some offset for visibility
+            scrollContainer.scrollTop = 8 * this.hourHeight - 50;
+            this._scrolled = true;
+        }
+    }
+}
+
+export default DayViewRenderer;