@forcecalendar/interface 1.0.17 → 1.0.19

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;

package/src/renderers/MonthViewRenderer.js

@@ -0,0 +1,125 @@
+/**
+ * MonthViewRenderer - Renders month calendar grid
+ *
+ * Pure JavaScript renderer for month view, compatible with Salesforce Locker Service.
+ */
+
+import { BaseViewRenderer } from './BaseViewRenderer.js';
+
+export class MonthViewRenderer extends BaseViewRenderer {
+    constructor(container, stateManager) {
+        super(container, stateManager);
+        this.maxEventsToShow = 3;
+    }
+
+    render() {
+        if (!this.container || !this.stateManager) return;
+
+        const viewData = this.stateManager.getViewData();
+        if (!viewData || !viewData.weeks) {
+            this.container.innerHTML = '<div style="padding: 20px; text-align: center; color: #666;">No data available for month view.</div>';
+            return;
+        }
+
+        this.cleanup();
+        const config = this.stateManager.getState().config;
+        const html = this._renderMonthView(viewData, config);
+        this.container.innerHTML = html;
+        this._attachEventHandlers();
+    }
+
+    _renderMonthView(viewData, config) {
+        const weekStartsOn = config.weekStartsOn || 0;
+        const dayNames = this._getDayNames(weekStartsOn);
+
+        let html = `
+            <div class="fc-month-view" style="display: flex; flex-direction: column; height: 100%; min-height: 400px; background: #fff; border: 1px solid #e5e7eb;">
+                <div class="fc-month-header" style="display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid #e5e7eb; background: #f9fafb;">
+                    ${dayNames.map(d => `<div class="fc-month-header-cell" style="padding: 12px 8px; text-align: center; font-size: 11px; font-weight: 600; color: #6b7280; text-transform: uppercase;">${d}</div>`).join('')}
+                </div>
+                <div class="fc-month-body" style="display: flex; flex-direction: column; flex: 1;">
+        `;
+
+        viewData.weeks.forEach(week => {
+            html += this._renderWeek(week);
+        });
+
+        html += '</div></div>';
+        return html;
+    }
+
+    _getDayNames(weekStartsOn) {
+        const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+        const dayNames = [];
+        for (let i = 0; i < 7; i++) {
+            const dayIndex = (weekStartsOn + i) % 7;
+            dayNames.push(days[dayIndex]);
+        }
+        return dayNames;
+    }
+
+    _renderWeek(week) {
+        let html = '<div class="fc-month-week" style="display: grid; grid-template-columns: repeat(7, 1fr); flex: 1; min-height: 80px;">';
+
+        week.days.forEach(day => {
+            html += this._renderDay(day);
+        });
+
+        html += '</div>';
+        return html;
+    }
+
+    _renderDay(day) {
+        const isOtherMonth = !day.isCurrentMonth;
+        const isToday = day.isToday;
+
+        const dayBg = isOtherMonth ? '#f3f4f6' : '#fff';
+        const dayNumColor = isOtherMonth ? '#9ca3af' : '#111827';
+        const todayStyle = isToday
+            ? 'background: #2563eb; color: white; border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;'
+            : '';
+
+        const events = day.events || [];
+        const visibleEvents = events.slice(0, this.maxEventsToShow);
+        const moreCount = events.length - this.maxEventsToShow;
+
+        return `
+            <div class="fc-month-day" data-date="${day.date}"
+                 style="background: ${dayBg}; border-right: 1px solid #e5e7eb; border-bottom: 1px solid #e5e7eb; padding: 4px; min-height: 80px; cursor: pointer; display: flex; flex-direction: column;">
+                <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; flex: 1; overflow: hidden;">
+                    ${visibleEvents.map(evt => this._renderEvent(evt)).join('')}
+                    ${moreCount > 0 ? `<div class="fc-more-events" style="font-size: 10px; color: #6b7280; padding: 2px 4px; font-weight: 500;">+${moreCount} more</div>` : ''}
+                </div>
+            </div>
+        `;
+    }
+
+    _renderEvent(event) {
+        const color = event.backgroundColor || '#2563eb';
+        return `
+            <div class="fc-event" data-event-id="${this.escapeHTML(event.id)}"
+                 style="background-color: ${color}; font-size: 11px; padding: 2px 6px; border-radius: 3px; color: white; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;">
+                ${this.escapeHTML(event.title)}
+            </div>
+        `;
+    }
+
+    _attachEventHandlers() {
+        // Day click handlers
+        this.container.querySelectorAll('.fc-month-day').forEach(dayEl => {
+            this.addListener(dayEl, 'click', (e) => {
+                if (e.target.closest('.fc-event')) return;
+                const date = new Date(dayEl.dataset.date);
+                this.stateManager.selectDate(date);
+            });
+        });
+
+        // Common event handlers (event clicks)
+        this.attachCommonEventHandlers();
+    }
+}
+
+export default MonthViewRenderer;