mirror of
https://github.com/php-flasher/php-flasher.git
synced 2026-03-31 15:07:47 +01:00
Younes ENNAJI
e417105f7a
This refactoring improves code quality and reduces duplication: ## New Files - `themes/shared/icons.ts` - Centralized SVG icons (getIcon, getCloseIcon) - `themes/shared/accessibility.ts` - A11y helpers (getA11yString, getCloseButtonA11y) - `themes/shared/constants.ts` - Standard class names and default titles ## Design Tokens Added (index.scss) - Spacing scale: --fl-spacing-xs through --fl-spacing-2xl - Typography scale: --fl-font-size-xs through --fl-font-size-xl - Close button sizes: --fl-close-sm, --fl-close-md, --fl-close-lg - Border radius: --fl-radius-sm through --fl-radius-full - Shadow tokens: --fl-shadow-sm through --fl-shadow-lg - Animation: --fl-duration-*, --fl-easing-*, --fl-slide-* ## Mixins Updated - Added `close-button-sized($size)` with sm/md/lg support - Added `close-button-circular($size)` variant - Added `close-button-text` for text-style buttons - Updated existing mixins to use design tokens ## All 17 Themes Refactored Each theme now uses shared utilities instead of duplicating code: - Icon code: 20+ lines → 1 function call - Accessibility: 3 lines → 1 function call - Class names: via CLASS_NAMES constants Backwards compatible - no breaking changes.
70 lines
2.4 KiB
JavaScript
70 lines
2.4 KiB
JavaScript
/**
|
||
* @package PHPFlasher
|
||
* @author Younes ENNAJI
|
||
* @license MIT
|
||
*/
|
||
(function (global, factory) {
|
||
typeof exports === 'object' && typeof module !== 'undefined' ? factory(require('@flasher/flasher')) :
|
||
typeof define === 'function' && define.amd ? define(['@flasher/flasher'], factory) :
|
||
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.flasher));
|
||
})(this, (function (flasher) { 'use strict';
|
||
|
||
function getA11yAttributes(type) {
|
||
const isAlert = type === 'error' || type === 'warning';
|
||
return {
|
||
role: isAlert ? 'alert' : 'status',
|
||
ariaLive: isAlert ? 'assertive' : 'polite',
|
||
ariaAtomic: 'true',
|
||
};
|
||
}
|
||
function getA11yString(type) {
|
||
const attrs = getA11yAttributes(type);
|
||
return `role="${attrs.role}" aria-live="${attrs.ariaLive}" aria-atomic="${attrs.ariaAtomic}"`;
|
||
}
|
||
function getCloseButtonA11y(type) {
|
||
return `aria-label="Close ${type} message"`;
|
||
}
|
||
|
||
const CLASS_NAMES = {
|
||
container: 'fl-container',
|
||
wrapper: 'fl-wrapper',
|
||
content: 'fl-content',
|
||
message: 'fl-message',
|
||
title: 'fl-title',
|
||
text: 'fl-text',
|
||
icon: 'fl-icon',
|
||
iconWrapper: 'fl-icon-wrapper',
|
||
actions: 'fl-actions',
|
||
close: 'fl-close',
|
||
progressBar: 'fl-progress-bar',
|
||
progress: 'fl-progress',
|
||
show: 'fl-show',
|
||
sticky: 'fl-sticky',
|
||
rtl: 'fl-rtl',
|
||
type: (type) => `fl-${type}`,
|
||
theme: (name) => `fl-${name}`,
|
||
};
|
||
|
||
const amberTheme = {
|
||
render: (envelope) => {
|
||
const { type, message } = envelope;
|
||
return `
|
||
<div class="${CLASS_NAMES.theme('amber')} ${CLASS_NAMES.type(type)}" ${getA11yString(type)}>
|
||
<div class="${CLASS_NAMES.content}">
|
||
<div class="${CLASS_NAMES.icon}"></div>
|
||
<div class="${CLASS_NAMES.text}">
|
||
<div class="${CLASS_NAMES.message}">${message}</div>
|
||
</div>
|
||
<button class="${CLASS_NAMES.close}" ${getCloseButtonA11y(type)}>×</button>
|
||
</div>
|
||
<div class="${CLASS_NAMES.progressBar}">
|
||
<div class="${CLASS_NAMES.progress}"></div>
|
||
</div>
|
||
</div>`;
|
||
},
|
||
};
|
||
|
||
flasher.addTheme('amber', amberTheme);
|
||
|
||
}));
|