|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Toast Notification Playground</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
.toast-container { |
|
|
position: fixed; |
|
|
z-index: 9999; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.toast-container.top-right { |
|
|
top: 20px; |
|
|
right: 20px; |
|
|
} |
|
|
.toast-container.top-left { |
|
|
top: 20px; |
|
|
left: 20px; |
|
|
} |
|
|
.toast-container.bottom-right { |
|
|
bottom: 20px; |
|
|
right: 20px; |
|
|
} |
|
|
.toast-container.bottom-left { |
|
|
bottom: 20px; |
|
|
left: 20px; |
|
|
} |
|
|
.toast-container.center { |
|
|
top: 50%; |
|
|
left: 50%; |
|
|
transform: translate(-50%, -50%); |
|
|
} |
|
|
.toast { |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
margin-bottom: 10px; |
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); |
|
|
transition: all 0.3s ease; |
|
|
opacity: 0; |
|
|
transform: translateY(20px); |
|
|
} |
|
|
.toast.show { |
|
|
opacity: 1; |
|
|
transform: translateY(0); |
|
|
} |
|
|
.toast.hide { |
|
|
opacity: 0; |
|
|
transform: translateY(-20px); |
|
|
} |
|
|
.toast-progress { |
|
|
position: absolute; |
|
|
bottom: 0; |
|
|
left: 0; |
|
|
height: 4px; |
|
|
background-color: rgba(255, 255, 255, 0.7); |
|
|
width: 100%; |
|
|
transform: scaleX(1); |
|
|
transform-origin: left; |
|
|
transition: transform linear; |
|
|
} |
|
|
.custom-font-preview { |
|
|
font-size: 1.2rem; |
|
|
padding: 10px; |
|
|
border: 1px dashed #ccc; |
|
|
margin-top: 5px; |
|
|
} |
|
|
.color-picker-container { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 10px; |
|
|
} |
|
|
.color-preview { |
|
|
width: 30px; |
|
|
height: 30px; |
|
|
border-radius: 4px; |
|
|
border: 1px solid #ccc; |
|
|
} |
|
|
.export-code { |
|
|
background-color: #f8f9fa; |
|
|
border: 1px solid #dee2e6; |
|
|
border-radius: 4px; |
|
|
padding: 15px; |
|
|
font-family: monospace; |
|
|
white-space: pre-wrap; |
|
|
max-height: 200px; |
|
|
overflow-y: auto; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-100 min-h-screen"> |
|
|
<div class="container mx-auto px-4 py-8"> |
|
|
<h1 class="text-4xl font-bold text-center mb-8 text-indigo-700">Toast Notification Playground</h1> |
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="bg-white rounded-lg shadow-lg p-6 col-span-1"> |
|
|
<h2 class="text-2xl font-semibold mb-6 text-gray-800 border-b pb-2">Configuration</h2> |
|
|
|
|
|
<div class="space-y-6"> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Message</label> |
|
|
<textarea id="message" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" rows="3">This is a toast notification!</textarea> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Type</label> |
|
|
<div class="grid grid-cols-4 gap-2"> |
|
|
<button data-type="info" class="toast-type-btn py-2 px-3 rounded-md bg-blue-100 text-blue-800 border border-blue-200 hover:bg-blue-200">Info</button> |
|
|
<button data-type="success" class="toast-type-btn py-2 px-3 rounded-md bg-green-100 text-green-800 border border-green-200 hover:bg-green-200">Success</button> |
|
|
<button data-type="warning" class="toast-type-btn py-2 px-3 rounded-md bg-yellow-100 text-yellow-800 border border-yellow-200 hover:bg-yellow-200">Warning</button> |
|
|
<button data-type="error" class="toast-type-btn py-2 px-3 rounded-md bg-red-100 text-red-800 border border-red-200 hover:bg-red-200">Error</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Position</label> |
|
|
<div class="grid grid-cols-3 gap-2"> |
|
|
<button data-position="top-left" class="position-btn py-2 px-3 rounded-md bg-gray-100 text-gray-800 border border-gray-200 hover:bg-gray-200">Top Left</button> |
|
|
<button data-position="top-right" class="position-btn py-2 px-3 rounded-md bg-gray-100 text-gray-800 border border-gray-200 hover:bg-gray-200">Top Right</button> |
|
|
<button data-position="center" class="position-btn py-2 px-3 rounded-md bg-gray-100 text-gray-800 border border-gray-200 hover:bg-gray-200">Center</button> |
|
|
<button data-position="bottom-left" class="position-btn py-2 px-3 rounded-md bg-gray-100 text-gray-800 border border-gray-200 hover:bg-gray-200">Bottom Left</button> |
|
|
<button data-position="bottom-right" class="position-btn py-2 px-3 rounded-md bg-gray-100 text-gray-800 border border-gray-200 hover:bg-gray-200">Bottom Right</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Duration (ms)</label> |
|
|
<input type="range" id="duration" min="1000" max="10000" step="500" value="5000" class="w-full"> |
|
|
<div class="flex justify-between text-xs text-gray-500"> |
|
|
<span>1s</span> |
|
|
<span>5s</span> |
|
|
<span>10s</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Animation</label> |
|
|
<select id="animation" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"> |
|
|
<option value="fade">Fade</option> |
|
|
<option value="slide">Slide</option> |
|
|
<option value="zoom">Zoom</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex items-center"> |
|
|
<input type="checkbox" id="progressBar" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"> |
|
|
<label for="progressBar" class="ml-2 block text-sm text-gray-700">Show Progress Bar</label> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex items-center"> |
|
|
<input type="checkbox" id="closeButton" checked class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"> |
|
|
<label for="closeButton" class="ml-2 block text-sm text-gray-700">Show Close Button</label> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex items-center"> |
|
|
<input type="checkbox" id="showIcon" checked class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"> |
|
|
<label for="showIcon" class="ml-2 block text-sm text-gray-700">Show Icon</label> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Custom Colors</label> |
|
|
<div class="space-y-2"> |
|
|
<div class="color-picker-container"> |
|
|
<span class="text-sm">Background:</span> |
|
|
<input type="color" id="bgColor" value="#4f46e5" class="h-8 w-8"> |
|
|
<div id="bgColorPreview" class="color-preview" style="background-color: #4f46e5;"></div> |
|
|
</div> |
|
|
<div class="color-picker-container"> |
|
|
<span class="text-sm">Text:</span> |
|
|
<input type="color" id="textColor" value="#ffffff" class="h-8 w-8"> |
|
|
<div id="textColorPreview" class="color-preview" style="background-color: #ffffff;"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Font Family</label> |
|
|
<select id="fontFamily" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"> |
|
|
<option value="sans-serif">Sans-serif</option> |
|
|
<option value="serif">Serif</option> |
|
|
<option value="monospace">Monospace</option> |
|
|
<option value="cursive">Cursive</option> |
|
|
<option value="fantasy">Fantasy</option> |
|
|
<option value="Arial">Arial</option> |
|
|
<option value="Verdana">Verdana</option> |
|
|
<option value="Georgia">Georgia</option> |
|
|
<option value="Courier New">Courier New</option> |
|
|
</select> |
|
|
<div id="fontPreview" class="custom-font-preview" style="font-family: sans-serif;">Font Preview</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Font Size (px)</label> |
|
|
<input type="range" id="fontSize" min="12" max="24" step="1" value="16" class="w-full"> |
|
|
<div class="flex justify-between text-xs text-gray-500"> |
|
|
<span>12px</span> |
|
|
<span>18px</span> |
|
|
<span>24px</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<button id="showToastBtn" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-4 rounded-md shadow-sm transition duration-150 ease-in-out"> |
|
|
Show Toast |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow-lg p-6 col-span-1"> |
|
|
<h2 class="text-2xl font-semibold mb-6 text-gray-800 border-b pb-2">Preview</h2> |
|
|
|
|
|
<div id="toastPreview" class="mb-6 p-4 rounded-md bg-indigo-600 text-white flex items-start"> |
|
|
<div class="mr-3"> |
|
|
<i class="fas fa-info-circle text-xl"></i> |
|
|
</div> |
|
|
<div class="flex-1"> |
|
|
<p class="font-medium">This is a toast notification!</p> |
|
|
</div> |
|
|
<button class="ml-3 text-white opacity-70 hover:opacity-100"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="mt-6"> |
|
|
<h3 class="text-lg font-medium text-gray-800 mb-2">Export Code</h3> |
|
|
<div class="mb-4"> |
|
|
<button id="copyCodeBtn" class="bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-1 px-3 rounded-md text-sm shadow-sm transition duration-150 ease-in-out"> |
|
|
Copy Code |
|
|
</button> |
|
|
<button id="downloadCodeBtn" class="ml-2 bg-green-600 hover:bg-green-700 text-white font-medium py-1 px-3 rounded-md text-sm shadow-sm transition duration-150 ease-in-out"> |
|
|
Download |
|
|
</button> |
|
|
</div> |
|
|
<div id="exportCode" class="export-code"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow-lg p-6 col-span-1 relative"> |
|
|
<h2 class="text-2xl font-semibold mb-6 text-gray-800 border-b pb-2">Live Demo</h2> |
|
|
|
|
|
<div class="flex flex-wrap gap-2 mb-6"> |
|
|
<button id="demoInfo" class="py-1 px-3 rounded-md bg-blue-100 text-blue-800 border border-blue-200 hover:bg-blue-200">Info</button> |
|
|
<button id="demoSuccess" class="py-1 px-3 rounded-md bg-green-100 text-green-800 border border-green-200 hover:bg-green-200">Success</button> |
|
|
<button id="demoWarning" class="py-1 px-3 rounded-md bg-yellow-100 text-yellow-800 border border-yellow-200 hover:bg-yellow-200">Warning</button> |
|
|
<button id="demoError" class="py-1 px-3 rounded-md bg-red-100 text-red-800 border border-red-200 hover:bg-red-200">Error</button> |
|
|
<button id="demoCustom" class="py-1 px-3 rounded-md bg-purple-100 text-purple-800 border border-purple-200 hover:bg-purple-200">Custom</button> |
|
|
<button id="clearAll" class="py-1 px-3 rounded-md bg-gray-100 text-gray-800 border border-gray-200 hover:bg-gray-200">Clear All</button> |
|
|
</div> |
|
|
|
|
|
<div id="toastContainer" class="toast-container top-right"></div> |
|
|
|
|
|
<div class="mt-6"> |
|
|
<h3 class="text-lg font-medium text-gray-800 mb-2">Recent Toasts</h3> |
|
|
<div id="toastHistory" class="space-y-2 max-h-60 overflow-y-auto"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
// Configuration variables |
|
|
let currentType = 'info'; |
|
|
let currentPosition = 'top-right'; |
|
|
let currentAnimation = 'fade'; |
|
|
let currentBgColor = '#4f46e5'; |
|
|
let currentTextColor = '#ffffff'; |
|
|
let currentFontFamily = 'sans-serif'; |
|
|
let currentFontSize = '16px'; |
|
|
|
|
|
// DOM Elements |
|
|
const toastContainer = document.getElementById('toastContainer'); |
|
|
const toastPreview = document.getElementById('toastPreview'); |
|
|
const exportCode = document.getElementById('exportCode'); |
|
|
|
|
|
// Initialize |
|
|
updatePreview(); |
|
|
generateExportCode(); |
|
|
|
|
|
// Event Listeners |
|
|
document.querySelectorAll('.toast-type-btn').forEach(btn => { |
|
|
btn.addEventListener('click', function() { |
|
|
currentType = this.dataset.type; |
|
|
updateTypeStyles(currentType); |
|
|
updatePreview(); |
|
|
generateExportCode(); |
|
|
}); |
|
|
}); |
|
|
|
|
|
document.querySelectorAll('.position-btn').forEach(btn => { |
|
|
btn.addEventListener('click', function() { |
|
|
currentPosition = this.dataset.position; |
|
|
toastContainer.className = `toast-container ${currentPosition}`; |
|
|
updatePreview(); |
|
|
generateExportCode(); |
|
|
}); |
|
|
}); |
|
|
|
|
|
document.getElementById('message').addEventListener('input', function() { |
|
|
updatePreview(); |
|
|
generateExportCode(); |
|
|
}); |
|
|
|
|
|
document.getElementById('duration').addEventListener('input', function() { |
|
|
generateExportCode(); |
|
|
}); |
|
|
|
|
|
document.getElementById('animation').addEventListener('change', function() { |
|
|
currentAnimation = this.value; |
|
|
generateExportCode(); |
|
|
}); |
|
|
|
|
|
document.getElementById('progressBar').addEventListener('change', function() { |
|
|
updatePreview(); |
|
|
generateExportCode(); |
|
|
}); |
|
|
|
|
|
document.getElementById('closeButton').addEventListener('change', function() { |
|
|
updatePreview(); |
|
|
generateExportCode(); |
|
|
}); |
|
|
|
|
|
document.getElementById('showIcon').addEventListener('change', function() { |
|
|
updatePreview(); |
|
|
generateExportCode(); |
|
|
}); |
|
|
|
|
|
document.getElementById('bgColor').addEventListener('input', function() { |
|
|
currentBgColor = this.value; |
|
|
document.getElementById('bgColorPreview').style.backgroundColor = currentBgColor; |
|
|
updatePreview(); |
|
|
generateExportCode(); |
|
|
}); |
|
|
|
|
|
document.getElementById('textColor').addEventListener('input', function() { |
|
|
currentTextColor = this.value; |
|
|
document.getElementById('textColorPreview').style.backgroundColor = currentTextColor; |
|
|
updatePreview(); |
|
|
generateExportCode(); |
|
|
}); |
|
|
|
|
|
document.getElementById('fontFamily').addEventListener('change', function() { |
|
|
currentFontFamily = this.value; |
|
|
document.getElementById('fontPreview').style.fontFamily = currentFontFamily; |
|
|
updatePreview(); |
|
|
generateExportCode(); |
|
|
}); |
|
|
|
|
|
document.getElementById('fontSize').addEventListener('input', function() { |
|
|
currentFontSize = `${this.value}px`; |
|
|
document.getElementById('fontPreview').style.fontSize = currentFontSize; |
|
|
updatePreview(); |
|
|
generateExportCode(); |
|
|
}); |
|
|
|
|
|
document.getElementById('showToastBtn').addEventListener('click', function() { |
|
|
showToast(); |
|
|
}); |
|
|
|
|
|
// Demo buttons |
|
|
document.getElementById('demoInfo').addEventListener('click', function() { |
|
|
showDemoToast('info', 'Information', 'This is an information toast.'); |
|
|
}); |
|
|
|
|
|
document.getElementById('demoSuccess').addEventListener('click', function() { |
|
|
showDemoToast('success', 'Success', 'Operation completed successfully!'); |
|
|
}); |
|
|
|
|
|
document.getElementById('demoWarning').addEventListener('click', function() { |
|
|
showDemoToast('warning', 'Warning', 'This is a warning message.'); |
|
|
}); |
|
|
|
|
|
document.getElementById('demoError').addEventListener('click', function() { |
|
|
showDemoToast('error', 'Error', 'Something went wrong!'); |
|
|
}); |
|
|
|
|
|
document.getElementById('demoCustom').addEventListener('click', function() { |
|
|
showDemoToast('custom', 'Custom', 'This is a custom styled toast.', { |
|
|
bgColor: '#8b5cf6', |
|
|
textColor: '#ffffff', |
|
|
icon: 'fas fa-star' |
|
|
}); |
|
|
}); |
|
|
|
|
|
document.getElementById('clearAll').addEventListener('click', function() { |
|
|
clearAllToasts(); |
|
|
}); |
|
|
|
|
|
// Copy and Download buttons |
|
|
document.getElementById('copyCodeBtn').addEventListener('click', function() { |
|
|
copyToClipboard(exportCode.textContent); |
|
|
showToast('success', 'Copied to clipboard!'); |
|
|
}); |
|
|
|
|
|
document.getElementById('downloadCodeBtn').addEventListener('click', function() { |
|
|
downloadCode(); |
|
|
}); |
|
|
|
|
|
// Functions |
|
|
function updateTypeStyles(type) { |
|
|
let bgColor, textColor, icon; |
|
|
|
|
|
switch(type) { |
|
|
case 'info': |
|
|
bgColor = '#3b82f6'; |
|
|
textColor = '#ffffff'; |
|
|
icon = 'fas fa-info-circle'; |
|
|
break; |
|
|
case 'success': |
|
|
bgColor = '#10b981'; |
|
|
textColor = '#ffffff'; |
|
|
icon = 'fas fa-check-circle'; |
|
|
break; |
|
|
case 'warning': |
|
|
bgColor = '#f59e0b'; |
|
|
textColor = '#ffffff'; |
|
|
icon = 'fas fa-exclamation-triangle'; |
|
|
break; |
|
|
case 'error': |
|
|
bgColor = '#ef4444'; |
|
|
textColor = '#ffffff'; |
|
|
icon = 'fas fa-times-circle'; |
|
|
break; |
|
|
default: |
|
|
bgColor = currentBgColor; |
|
|
textColor = currentTextColor; |
|
|
icon = 'fas fa-info-circle'; |
|
|
} |
|
|
|
|
|
document.getElementById('bgColor').value = bgColor; |
|
|
document.getElementById('textColor').value = textColor; |
|
|
document.getElementById('bgColorPreview').style.backgroundColor = bgColor; |
|
|
document.getElementById('textColorPreview').style.backgroundColor = textColor; |
|
|
|
|
|
currentBgColor = bgColor; |
|
|
currentTextColor = textColor; |
|
|
|
|
|
return { bgColor, textColor, icon }; |
|
|
} |
|
|
|
|
|
function updatePreview() { |
|
|
const message = document.getElementById('message').value; |
|
|
const showProgressBar = document.getElementById('progressBar').checked; |
|
|
const showCloseButton = document.getElementById('closeButton').checked; |
|
|
const showIcon = document.getElementById('showIcon').checked; |
|
|
|
|
|
const typeStyles = updateTypeStyles(currentType); |
|
|
|
|
|
// Update preview toast |
|
|
toastPreview.style.backgroundColor = typeStyles.bgColor; |
|
|
toastPreview.style.color = typeStyles.textColor; |
|
|
toastPreview.style.fontFamily = currentFontFamily; |
|
|
toastPreview.style.fontSize = currentFontSize; |
|
|
|
|
|
// Update message |
|
|
toastPreview.querySelector('p').textContent = message; |
|
|
|
|
|
// Update icon |
|
|
const iconElement = toastPreview.querySelector('i'); |
|
|
iconElement.className = `${typeStyles.icon} text-xl`; |
|
|
iconElement.style.display = showIcon ? 'block' : 'none'; |
|
|
|
|
|
// Update close button |
|
|
const closeBtn = toastPreview.querySelector('button'); |
|
|
closeBtn.style.display = showCloseButton ? 'block' : 'none'; |
|
|
|
|
|
// Add progress bar if needed |
|
|
let progressBar = toastPreview.querySelector('.toast-progress'); |
|
|
if (showProgressBar) { |
|
|
if (!progressBar) { |
|
|
progressBar = document.createElement('div'); |
|
|
progressBar.className = 'toast-progress'; |
|
|
toastPreview.appendChild(progressBar); |
|
|
} |
|
|
progressBar.style.backgroundColor = `rgba(255, 255, 255, 0.7)`; |
|
|
} else if (progressBar) { |
|
|
progressBar.remove(); |
|
|
} |
|
|
} |
|
|
|
|
|
function showToast(customType, customMessage) { |
|
|
const type = customType || currentType; |
|
|
const message = customMessage || document.getElementById('message').value; |
|
|
const duration = parseInt(document.getElementById('duration').value); |
|
|
const showProgressBar = document.getElementById('progressBar').checked; |
|
|
const showCloseButton = document.getElementById('closeButton').checked; |
|
|
const showIcon = document.getElementById('showIcon').checked; |
|
|
const animation = currentAnimation; |
|
|
|
|
|
const typeStyles = type === 'custom' ? |
|
|
{ bgColor: currentBgColor, textColor: currentTextColor, icon: 'fas fa-info-circle' } : |
|
|
updateTypeStyles(type); |
|
|
|
|
|
// Create toast element |
|
|
const toast = document.createElement('div'); |
|
|
toast.className = `toast ${animation}`; |
|
|
toast.style.backgroundColor = typeStyles.bgColor; |
|
|
toast.style.color = typeStyles.textColor; |
|
|
toast.style.fontFamily = currentFontFamily; |
|
|
toast.style.fontSize = currentFontSize; |
|
|
toast.style.borderRadius = '0.375rem'; |
|
|
toast.style.padding = '1rem'; |
|
|
toast.style.display = 'flex'; |
|
|
toast.style.alignItems = 'flex-start'; |
|
|
toast.style.maxWidth = '350px'; |
|
|
|
|
|
// Add icon |
|
|
if (showIcon) { |
|
|
const icon = document.createElement('div'); |
|
|
icon.className = 'mr-3'; |
|
|
const iconElement = document.createElement('i'); |
|
|
iconElement.className = `${typeStyles.icon} text-xl`; |
|
|
icon.appendChild(iconElement); |
|
|
toast.appendChild(icon); |
|
|
} |
|
|
|
|
|
// Add content |
|
|
const content = document.createElement('div'); |
|
|
content.className = 'flex-1'; |
|
|
const messageElement = document.createElement('p'); |
|
|
messageElement.className = 'font-medium'; |
|
|
messageElement.textContent = message; |
|
|
content.appendChild(messageElement); |
|
|
toast.appendChild(content); |
|
|
|
|
|
// Add close button |
|
|
if (showCloseButton) { |
|
|
const closeBtn = document.createElement('button'); |
|
|
closeBtn.className = 'ml-3 opacity-70 hover:opacity-100'; |
|
|
closeBtn.innerHTML = '<i class="fas fa-times"></i>'; |
|
|
closeBtn.addEventListener('click', function() { |
|
|
hideToast(toast); |
|
|
}); |
|
|
toast.appendChild(closeBtn); |
|
|
} |
|
|
|
|
|
// Add progress bar |
|
|
if (showProgressBar) { |
|
|
const progressBar = document.createElement('div'); |
|
|
progressBar.className = 'toast-progress'; |
|
|
progressBar.style.backgroundColor = `rgba(255, 255, 255, 0.7)`; |
|
|
toast.appendChild(progressBar); |
|
|
|
|
|
// Animate progress bar |
|
|
progressBar.style.transform = 'scaleX(1)'; |
|
|
progressBar.style.transition = `transform ${duration}ms linear`; |
|
|
setTimeout(() => { |
|
|
progressBar.style.transform = 'scaleX(0)'; |
|
|
}, 10); |
|
|
} |
|
|
|
|
|
// Add to container |
|
|
toastContainer.appendChild(toast); |
|
|
|
|
|
// Show toast with animation |
|
|
setTimeout(() => { |
|
|
toast.classList.add('show'); |
|
|
}, 10); |
|
|
|
|
|
// Auto hide after duration |
|
|
if (duration > 0) { |
|
|
setTimeout(() => { |
|
|
hideToast(toast); |
|
|
}, duration); |
|
|
} |
|
|
|
|
|
// Add to history |
|
|
addToHistory(type, message); |
|
|
|
|
|
return toast; |
|
|
} |
|
|
|
|
|
function showDemoToast(type, title, message, customStyles = {}) { |
|
|
const toast = showToast(type, message); |
|
|
|
|
|
if (customStyles.bgColor) { |
|
|
toast.style.backgroundColor = customStyles.bgColor; |
|
|
} |
|
|
if (customStyles.textColor) { |
|
|
toast.style.color = customStyles.textColor; |
|
|
} |
|
|
if (customStyles.icon) { |
|
|
const icon = toast.querySelector('i'); |
|
|
if (icon) { |
|
|
icon.className = `${customStyles.icon} text-xl`; |
|
|
} |
|
|
} |
|
|
|
|
|
// Update title if provided |
|
|
const content = toast.querySelector('.flex-1'); |
|
|
if (content && title) { |
|
|
const titleElement = document.createElement('p'); |
|
|
titleElement.className = 'font-bold'; |
|
|
titleElement.textContent = title; |
|
|
content.insertBefore(titleElement, content.firstChild); |
|
|
} |
|
|
} |
|
|
|
|
|
function hideToast(toast) { |
|
|
toast.classList.remove('show'); |
|
|
toast.classList.add('hide'); |
|
|
|
|
|
setTimeout(() => { |
|
|
toast.remove(); |
|
|
}, 300); |
|
|
} |
|
|
|
|
|
function clearAllToasts() { |
|
|
const toasts = toastContainer.querySelectorAll('.toast'); |
|
|
toasts.forEach(toast => { |
|
|
hideToast(toast); |
|
|
}); |
|
|
} |
|
|
|
|
|
function addToHistory(type, message) { |
|
|
const historyContainer = document.getElementById('toastHistory'); |
|
|
const historyItem = document.createElement('div'); |
|
|
historyItem.className = 'flex items-center p-2 bg-gray-50 rounded-md'; |
|
|
|
|
|
// Add type indicator |
|
|
const typeIndicator = document.createElement('div'); |
|
|
typeIndicator.className = `w-3 h-3 rounded-full mr-2 ${ |
|
|
type === 'info' ? 'bg-blue-500' : |
|
|
type === 'success' ? 'bg-green-500' : |
|
|
type === 'warning' ? 'bg-yellow-500' : |
|
|
type === 'error' ? 'bg-red-500' : 'bg-purple-500' |
|
|
}`; |
|
|
historyItem.appendChild(typeIndicator); |
|
|
|
|
|
// Add message |
|
|
const messageElement = document.createElement('span'); |
|
|
messageElement.className = 'text-sm text-gray-700'; |
|
|
messageElement.textContent = message.length > 50 ? message.substring(0, 50) + '...' : message; |
|
|
historyItem.appendChild(messageElement); |
|
|
|
|
|
// Add timestamp |
|
|
const timestamp = document.createElement('span'); |
|
|
timestamp.className = 'ml-auto text-xs text-gray-500'; |
|
|
timestamp.textContent = new Date().toLocaleTimeString(); |
|
|
historyItem.appendChild(timestamp); |
|
|
|
|
|
// Add to history |
|
|
historyContainer.insertBefore(historyItem, historyContainer.firstChild); |
|
|
|
|
|
// Limit history items |
|
|
if (historyContainer.children.length > 10) { |
|
|
historyContainer.removeChild(historyContainer.lastChild); |
|
|
} |
|
|
} |
|
|
|
|
|
function generateExportCode() { |
|
|
const message = document.getElementById('message').value; |
|
|
const duration = document.getElementById('duration').value; |
|
|
const showProgressBar = document.getElementById('progressBar').checked; |
|
|
const showCloseButton = document.getElementById('closeButton').checked; |
|
|
const showIcon = document.getElementById('showIcon').checked; |
|
|
|
|
|
const code = ` |
|
|
// Toast Configuration |
|
|
const toastConfig = { |
|
|
type: '${currentType}', |
|
|
message: '${message.replace(/'/g, "\\'")}', |
|
|
position: '${currentPosition}', |
|
|
duration: ${duration}, |
|
|
animation: '${currentAnimation}', |
|
|
showProgressBar: ${showProgressBar}, |
|
|
showCloseButton: ${showCloseButton}, |
|
|
showIcon: ${showIcon}, |
|
|
backgroundColor: '${currentBgColor}', |
|
|
textColor: '${currentTextColor}', |
|
|
fontFamily: '${currentFontFamily}', |
|
|
fontSize: '${currentFontSize}' |
|
|
}; |
|
|
|
|
|
// Function to show toast |
|
|
function showToast(config) { |
|
|
const toast = document.createElement('div'); |
|
|
toast.className = \`toast \${config.animation}\`; |
|
|
toast.style.backgroundColor = config.backgroundColor; |
|
|
toast.style.color = config.textColor; |
|
|
toast.style.fontFamily = config.fontFamily; |
|
|
toast.style.fontSize = config.fontSize; |
|
|
toast.style.borderRadius = '0.375rem'; |
|
|
toast.style.padding = '1rem'; |
|
|
toast.style.display = 'flex'; |
|
|
toast.style.alignItems = 'flex-start'; |
|
|
toast.style.maxWidth = '350px'; |
|
|
|
|
|
// Add icon |
|
|
if (config.showIcon) { |
|
|
const icon = document.createElement('div'); |
|
|
icon.className = 'mr-3'; |
|
|
const iconElement = document.createElement('i'); |
|
|
iconElement.className = \`\${getIconClass(config.type)} text-xl\`; |
|
|
icon.appendChild(iconElement); |
|
|
toast.appendChild(icon); |
|
|
} |
|
|
|
|
|
// Add content |
|
|
const content = document.createElement('div'); |
|
|
content.className = 'flex-1'; |
|
|
const messageElement = document.createElement('p'); |
|
|
messageElement.className = 'font-medium'; |
|
|
messageElement.textContent = config.message; |
|
|
content.appendChild(messageElement); |
|
|
toast.appendChild(content); |
|
|
|
|
|
// Add close button |
|
|
if (config.showCloseButton) { |
|
|
const closeBtn = document.createElement('button'); |
|
|
closeBtn.className = 'ml-3 opacity-70 hover:opacity-100'; |
|
|
closeBtn.innerHTML = '<i class="fas fa-times"></i>'; |
|
|
closeBtn.addEventListener('click', function() { |
|
|
hideToast(toast); |
|
|
}); |
|
|
toast.appendChild(closeBtn); |
|
|
} |
|
|
|
|
|
// Add progress bar |
|
|
if (config.showProgressBar) { |
|
|
const progressBar = document.createElement('div'); |
|
|
progressBar.className = 'toast-progress'; |
|
|
progressBar.style.backgroundColor = \`rgba(255, 255, 255, 0.7)\`; |
|
|
toast.appendChild(progressBar); |
|
|
|
|
|
// Animate progress bar |
|
|
progressBar.style.transform = 'scaleX(1)'; |
|
|
progressBar.style.transition = \`transform \${config.duration}ms linear\`; |
|
|
setTimeout(() => { |
|
|
progressBar.style.transform = 'scaleX(0)'; |
|
|
}, 10); |
|
|
} |
|
|
|
|
|
// Add to container |
|
|
const container = document.querySelector(\`.toast-container.\${config.position.replace(' ', '-')}\`); |
|
|
container.appendChild(toast); |
|
|
|
|
|
// Show toast with animation |
|
|
setTimeout(() => { |
|
|
toast.classList.add('show'); |
|
|
}, 10); |
|
|
|
|
|
// Auto hide after duration |
|
|
if (config.duration > 0) { |
|
|
setTimeout(() => { |
|
|
hideToast(toast); |
|
|
}, config.duration); |
|
|
} |
|
|
} |
|
|
|
|
|
// Helper function to get icon class |
|
|
function getIconClass(type) { |
|
|
switch(type) { |
|
|
case 'info': return 'fas fa-info-circle'; |
|
|
case 'success': return 'fas fa-check-circle'; |
|
|
case 'warning': return 'fas fa-exclamation-triangle'; |
|
|
case 'error': return 'fas fa-times-circle'; |
|
|
default: return 'fas fa-info-circle'; |
|
|
} |
|
|
} |
|
|
|
|
|
// Function to hide toast |
|
|
function hideToast(toast) { |
|
|
toast.classList.remove('show'); |
|
|
toast.classList.add('hide'); |
|
|
|
|
|
setTimeout(() => { |
|
|
toast.remove(); |
|
|
}, 300); |
|
|
} |
|
|
|
|
|
// Example usage |
|
|
showToast(toastConfig); |
|
|
`; |
|
|
|
|
|
exportCode.textContent = code; |
|
|
} |
|
|
|
|
|
function copyToClipboard(text) { |
|
|
const textarea = document.createElement('textarea'); |
|
|
textarea.value = text; |
|
|
document.body.appendChild(textarea); |
|
|
textarea.select(); |
|
|
document.execCommand('copy'); |
|
|
document.body.removeChild(textarea); |
|
|
} |
|
|
|
|
|
function downloadCode() { |
|
|
const code = exportCode.textContent; |
|
|
const blob = new Blob([code], { type: 'text/javascript' }); |
|
|
const url = URL.createObjectURL(blob); |
|
|
const a = document.createElement('a'); |
|
|
a.href = url; |
|
|
a.download = 'toast-notification.js'; |
|
|
document.body.appendChild(a); |
|
|
a.click(); |
|
|
document.body.removeChild(a); |
|
|
URL.revokeObjectURL(url); |
|
|
|
|
|
showToast('success', 'Code downloaded successfully!'); |
|
|
} |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
