完整的應用程式生命週期管理，包含初始化流程、事件監聽器設置、範例頁面生成、高度報告機制和全域事件處理，確保應用程式穩定運行。
Complete application lifecycle management including initialization process, event listener setup, example page generation, height reporting mechanism, and global event handling to ensure stable application operation.
/**
* 應用程式初始化與事件管理模組
* Application Initialization & Event Management Module
*
* 功能：生命週期管理、事件處理、範例生成、高度報告
* Function: Lifecycle management, event handling, example generation, height reporting
*/
/**
* 設置範例頁面
* Setup examples page
*/
setupExamples() {
// 預定義的顏色範例 / Predefined color examples
const examples = {
hex: [
{ color: '#FF5733', name: '珊瑚紅' },
{ color: '#33FF57', name: '霓虹綠' },
{ color: '#3357FF', name: '鈷藍' },
{ color: '#FF33F5', name: '洋紅' },
{ color: '#F5FF33', name: '檸檬黃' },
{ color: '#33FFF5', name: '青綠' },
{ color: '#FF8C00', name: '深橙' },
{ color: '#8A2BE2', name: '藍紫' }
],
rgb: [
{ color: 'rgb(255, 87, 51)', name: '珊瑚紅' },
{ color: 'rgb(51, 255, 87)', name: '霓虹綠' },
{ color: 'rgb(51, 87, 255)', name: '鈷藍' },
{ color: 'rgb(255, 51, 245)', name: '洋紅' },
{ color: 'rgb(245, 255, 51)', name: '檸檬黃' },
{ color: 'rgb(51, 255, 245)', name: '青綠' },
{ color: 'rgb(255, 140, 0)', name: '深橙' },
{ color: 'rgb(138, 43, 226)', name: '藍紫' }
],
hsl: [
{ color: 'hsl(11, 100%, 60%)', name: '珊瑚紅' },
{ color: 'hsl(131, 100%, 60%)', name: '霓虹綠' },
{ color: 'hsl(229, 100%, 60%)', name: '鈷藍' },
{ color: 'hsl(303, 100%, 60%)', name: '洋紅' },
{ color: 'hsl(63, 100%, 60%)', name: '檸檬黃' },
{ color: 'hsl(177, 100%, 60%)', name: '青綠' },
{ color: 'hsl(33, 100%, 50%)', name: '深橙' },
{ color: 'hsl(271, 76%, 53%)', name: '藍紫' }
],
cmyk: [
{ color: 'cmyk(0%, 66%, 80%, 0%)', name: '珊瑚紅' },
{ color: 'cmyk(80%, 0%, 66%, 0%)', name: '霓虹綠' },
{ color: 'cmyk(80%, 66%, 0%, 0%)', name: '鈷藍' },
{ color: 'cmyk(0%, 80%, 4%, 0%)', name: '洋紅' },
{ color: 'cmyk(4%, 0%, 80%, 0%)', name: '檸檬黃' },
{ color: 'cmyk(80%, 0%, 4%, 0%)', name: '青綠' },
{ color: 'cmyk(0%, 45%, 100%, 0%)', name: '深橙' },
{ color: 'cmyk(39%, 81%, 0%, 11%)', name: '藍紫' }
],
names: [
'red', 'green', 'blue', 'yellow', 'orange', 'purple',
'pink', 'brown', 'gray', 'black', 'white', 'cyan',
'magenta', 'lime', 'indigo', 'violet', 'gold', 'silver',
'maroon', 'navy', 'teal', 'olive', 'coral', 'salmon',
'khaki', 'lavender', 'plum', 'tan', 'crimson', 'azure'
]
};
// 生成各格式範例 / Generate examples for each format
this.generateHexExamples(examples.hex);
this.generateRgbExamples(examples.rgb);
this.generateHslExamples(examples.hsl);
this.generateCmykExamples(examples.cmyk);
this.generateNameExamples(examples.names);
}
/**
* 生成 HEX 範例
* Generate HEX examples
*/
generateHexExamples(examples) {
const container = document.getElementById('hexExamples');
container.innerHTML = '';
examples.forEach(ex => {
container.appendChild(this.createExampleItem(ex.color, ex.name, ex.color));
});
}
/**
* 創建範例項目
* Create example item
*/
createExampleItem(code, name, displayColor) {
const item = document.createElement('div');
item.className = 'example-item';
item.innerHTML = `
${code}
`;
// 添加點擊事件 / Add click event
item.onclick = () => this.useExample(code);
// 添加懸停效果 / Add hover effect
item.addEventListener('mouseenter', () => {
item.style.transform = 'translateX(5px) scale(1.02)';
item.style.boxShadow = '0 4px 8px rgba(102, 126, 234, 0.2)';
});
item.addEventListener('mouseleave', () => {
item.style.transform = '';
item.style.boxShadow = '';
});
return item;
}
/**
* 使用範例色彩
* Use example color
*/
useExample(colorValue) {
// 切換到主工具頁面 / Switch to main tool page
this.showSection('main');
const mainNavLink = document.querySelector('.color-shower-standalone .nav-link[data-section="main"]');
if (mainNavLink) {
mainNavLink.click();
}
// 填入顏色值並解析 / Fill color value and parse
const colorInput = document.getElementById('colorInput');
if (colorInput) {
colorInput.value = colorValue;
colorInput.focus();
// 延遲解析以確保頁面切換完成 / Delayed parsing to ensure page switch completion
setTimeout(() => this.parseColor(), 100);
}
}
/**
* 設置高度報告機制
* Setup height reporting mechanism
*/
setupHeightReporting() {
// 初始報告 / Initial report
setTimeout(() => this.reportHeight(), 100);
// 監聽窗口大小變化 / Listen to window size changes
window.addEventListener('resize', () => {
this.debounceReportHeight();
});
// 監聽圖片載入等事件 / Listen to image load events
document.addEventListener('load', () => this.reportHeight(), true);
// 監聽內容變化 / Listen to content changes
const observer = new MutationObserver(() => {
this.debounceReportHeight();
});
observer.observe(document.body, {
childList: true,
subtree: true,
attributes: true,
attributeFilter: ['style', 'class']
});
}
/**
* 防抖高度報告
* Debounced height reporting
*/
debounceReportHeight() {
clearTimeout(this.heightReportTimeout);
this.heightReportTimeout = setTimeout(() => {
this.reportHeight();
}, 100);
}
/**
* 報告當前高度
* Report current height
*/
reportHeight() {
try {
const container = document.querySelector('.color-shower-standalone');
if (!container) return;
const rect = container.getBoundingClientRect();
const height = Math.ceil(rect.height);
// 檢查高度是否有顯著變化 / Check if height has significant change
if (Math.abs(height - (this.lastReportedHeight || 0)) > 10) {
this.lastReportedHeight = height;
// 發送高度資訊給父頁面（如果在 iframe 中）/ Send height info to parent page (if in iframe)
if (window.parent !== window) {
window.parent.postMessage({
type: 'resize',
height: height,
source: 'color-shower-tool'
}, '*');
}
}
} catch (error) {
console.error('Height reporting error:', error);
}
}
/**
* 全域事件處理
* Global event handling
*/
setupGlobalEventHandlers() {
// 監聽來自父頁面的消息 / Listen to messages from parent page
window.addEventListener('message', (event) => {
if (event.data.type === 'init' || event.data.type === 'checkHeight') {
this.reportHeight();
}
if (event.data.type === 'languageChange') {
this.currentLanguage = event.data.language;
this.updateLanguage();
}
});
// 鍵盤快捷鍵 / Keyboard shortcuts
document.addEventListener('keydown', (e) => {
// Escape 鍵清除錯誤訊息 / Escape key to clear error messages
if (e.key === 'Escape') {
const errorDiv = document.getElementById('errorMessage');
const suggestionsDiv = document.getElementById('suggestions');
if (errorDiv) errorDiv.style.display = 'none';
if (suggestionsDiv) suggestionsDiv.style.display = 'none';
}
// F5 重新生成配色 / F5 to regenerate palette
if (e.key === 'F5' && this.currentSection === 'palette') {
e.preventDefault();
this.generatePalette();
}
});
}
// 創建全域應用程式實例 / Create global application instance
const colorShowerApp = new ColorShowerApp();
// 應用程式就緒後設置額外事件處理 / Setup additional event handling after app is ready
document.addEventListener('DOMContentLoaded', () => {
colorShowerApp.setupGlobalEventHandlers();
});