diff --git a/CHANGELOG.md b/CHANGELOG.md index 8b3de8c..723a8a0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,16 @@ +## 4.1.1 - Released on 2025-05-14 + +### Reactor + +- JS DOC removed +- Themes refactored + +### Fixes + +- Fixed the effect of CSS variable `--pr-current-font` on content + +
+ ## 4.1.0 - Released on 2025-05-14 It's done! I found time to finish this useful library! diff --git a/package.json b/package.json index b491211..29c0fcf 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "prismium-src", - "version": "4.1.0", + "version": "4.1.1", "description": "A modern JavaScript accordion library with smooth animations. Easily integrates with React, Vue, and vanilla JavaScript.", "type": "module", "scripts": { diff --git a/src/core/errors/PrismiumError.mjs b/src/core/errors/PrismiumError.mjs index 46461e6..8301635 100644 --- a/src/core/errors/PrismiumError.mjs +++ b/src/core/errors/PrismiumError.mjs @@ -1,12 +1,9 @@ /** * Class for handling Prismium errors - * @extends Error */ export class PrismiumError extends Error { /** * Creates a new Prismium error - * @param {string} message - Error message - * @param {Error} [originalError] - Original error that was caught */ constructor(message, originalError) { super(message); diff --git a/src/core/managers/DOMManager.mjs b/src/core/managers/DOMManager.mjs index 917af48..523e3d4 100644 --- a/src/core/managers/DOMManager.mjs +++ b/src/core/managers/DOMManager.mjs @@ -7,9 +7,6 @@ import { PrismiumError } from '../errors/PrismiumError.mjs'; export class DOMManager { /** * Set up the DOM manager with Prismium instance and element - * @param {import('../../types/core').default} instance - Prismium instance - * @param {HTMLElement} el - Root element - * @returns {DOMManager} The DOMManager instance */ setup(instance, el) { this.validateElement(el); @@ -23,8 +20,6 @@ export class DOMManager { /** * Validate that the element is valid for Prismium - * @param {Element} el - Element to validate - * @throws {PrismiumError} If the element is invalid */ validateElement(el) { if (!el) { @@ -42,8 +37,6 @@ export class DOMManager { /** * Create the accordion structure - * @param {HTMLElement} el - Root element - * @throws {Error} If required elements are not found */ createStructure(el) { const content = el.querySelector(this.instance.options.contentSelector); @@ -87,7 +80,6 @@ export class DOMManager { /** * Set CSS classes for elements - * @param {HTMLElement} el - Root element */ setClasses(el) { el.classList.add('prismium'); @@ -98,7 +90,6 @@ export class DOMManager { /** * Apply theme classes to the element - * @param {HTMLElement} el - Root element */ setTheme(el) { const { theme } = this.instance.options; @@ -117,7 +108,6 @@ export class DOMManager { /** * Handle the initial state of the accordion - * @param {HTMLElement} el - Root element */ handleInitialState(el) { if ( diff --git a/src/core/managers/EffectsManager.mjs b/src/core/managers/EffectsManager.mjs index e61e911..49a8438 100644 --- a/src/core/managers/EffectsManager.mjs +++ b/src/core/managers/EffectsManager.mjs @@ -5,9 +5,6 @@ export class EffectsManager { /** * Apply animation effect based on instance options - * @param {import('../../types/core').default} instance - Prismium instance - * @param {boolean} isOpening - Whether accordion is opening - * @private */ #applyEffect(instance, isOpening) { if (!instance.$content) return; @@ -30,7 +27,6 @@ export class EffectsManager { /** * Apply effects when opening the accordion - * @param {import('../../types/core').default} instance - Prismium instance */ applyOpenEffects(instance) { this.#applyEffect(instance, true); @@ -38,7 +34,6 @@ export class EffectsManager { /** * Apply effects when closing the accordion - * @param {import('../../types/core').default} instance - Prismium instance */ applyCloseEffects(instance) { this.#applyEffect(instance, false); @@ -46,9 +41,6 @@ export class EffectsManager { /** * Get filtered children elements for animation - * @param {import('../../types/core').default} instance - Prismium instance - * @returns {Element[]} Filtered child elements - * @private */ #getFilteredChildren(instance) { let childrenSelectors, ignoreSelectors; @@ -92,9 +84,6 @@ export class EffectsManager { /** * Apply line-by-line animation effect * Shows elements one by one with translation and opacity - * @param {import('../../types/core').default} instance - Prismium instance - * @param {boolean} isOpening - Whether accordion is opening - * @private */ #applyLineByLineEffect(instance, isOpening) { const defaults = { @@ -112,21 +101,21 @@ export class EffectsManager { if (!children.length) return; - // Обрабатываем options | Process options + // Process options if (typeof options.y === 'number') options.y = `${options.y}px`; if (typeof options.x === 'number') options.x = `${options.x}px`; - // Форсируем reflow | Force reflow + // Force reflow instance.$content.offsetHeight; if (isOpening) { - // Настраиваем начальное состояние | Setup initial state + // Setup initial state children.forEach((child) => { child.style.transform = `translate(${options.x}, ${options.y}) scale(${options.scale})`; child.style.opacity = options.opacity; }); - // Запускаем анимацию с задержкой | Start animation with delay + // Start animation with delay requestAnimationFrame(() => { children.forEach((child, i) => { child.style.transition = `transform ${options.speed}ms ${options.easing}, @@ -137,7 +126,7 @@ export class EffectsManager { }); }); } else { - // Анимация закрытия | Closing animation + // Closing animation children.forEach((child, i) => { const reverseIndex = children.length - 1 - i; child.style.transition = `transform ${options.speed}ms ${options.easing}, @@ -148,14 +137,14 @@ export class EffectsManager { }); } - // Очистка стилей после завершения | Cleanup styles after animation + // Cleanup styles after animation const maxDelay = options.delay * (children.length - 1) + options.speed; - // Очищаем предыдущий таймер если есть | Clear previous timer if exists + // Clear previous timer if exists instance.__cleanupTimer && instance.timerManager.clearTimeout(instance.__cleanupTimer); - // Устанавливаем новый таймер | Set new timer + // Set new timer instance.__cleanupTimer = instance.timerManager.setTimeout(() => { children.forEach((child) => { child.style.transition = ''; @@ -170,9 +159,6 @@ export class EffectsManager { /** * Apply fade-scale animation effect * Fades and scales elements simultaneously - * @param {import('../../types/core').default} instance - Prismium instance - * @param {boolean} isOpening - Whether accordion is opening - * @private */ #applyFadeScaleEffect(instance, isOpening) { const defaults = { @@ -186,7 +172,7 @@ export class EffectsManager { const children = this.#getFilteredChildren(instance); if (!children.length) return; - // Сбрасываем стили перед анимацией | Reset styles before animation + // Reset styles before animation children.forEach((child) => { child.style.transition = 'none'; child.style.transform = isOpening @@ -195,7 +181,7 @@ export class EffectsManager { child.style.opacity = isOpening ? options.opacity : '1'; }); - // Форсируем reflow | Force reflow + // Force reflow instance.$content.offsetHeight; children.forEach((child) => { @@ -219,9 +205,6 @@ export class EffectsManager { /** * Apply slide animation effect * Slides elements from a specified direction - * @param {import('../../types/core').default} instance - Prismium instance - * @param {boolean} isOpening - Whether accordion is opening - * @private */ #applySlideEffect(instance, isOpening) { const defaults = { @@ -236,11 +219,11 @@ export class EffectsManager { const children = this.#getFilteredChildren(instance); if (!children.length) return; - // Обрабатываем options | Process options + // Process options if (typeof options.distance === 'number') options.distance = `${options.distance}px`; - // Определяем трансформацию в зависимости от направления | Define transform based on direction + // Define transform based on direction const getTransform = (direction, distance) => { switch (direction) { case 'up': @@ -256,7 +239,7 @@ export class EffectsManager { } }; - // Сбрасываем стили перед анимацией | Reset styles before animation + // Reset styles before animation children.forEach((child) => { child.style.transition = 'none'; child.style.transform = isOpening @@ -265,7 +248,7 @@ export class EffectsManager { child.style.opacity = isOpening ? options.opacity : '1'; }); - // Форсируем reflow | Force reflow + // Force reflow instance.$content.offsetHeight; children.forEach((child) => { @@ -292,9 +275,6 @@ export class EffectsManager { /** * Apply stagger animation effect * Animates elements from different directions - * @param {import('../../types/core').default} instance - Prismium instance - * @param {boolean} isOpening - Whether accordion is opening - * @private */ #applyStaggerEffect(instance, isOpening) { const defaults = { @@ -310,11 +290,11 @@ export class EffectsManager { const children = this.#getFilteredChildren(instance); if (!children.length) return; - // Обрабатываем options | Process options + // Process options if (typeof options.distance === 'number') options.distance = `${options.distance}px`; - // Сбрасываем стили перед анимацией | Reset styles before animation + // Reset styles before animation children.forEach((child, i) => { const direction = options.directions[i % options.directions.length]; let transform; @@ -339,7 +319,7 @@ export class EffectsManager { child.style.opacity = isOpening ? options.opacity : '1'; }); - // Форсируем reflow | Force reflow + // Force reflow instance.$content.offsetHeight; children.forEach((child, i) => { @@ -382,9 +362,6 @@ export class EffectsManager { /** * Apply wave animation effect * Creates a wave-like animation pattern - * @param {import('../../types/core').default} instance - Prismium instance - * @param {boolean} isOpening - Whether accordion is opening - * @private */ #applyWaveEffect(instance, isOpening) { const defaults = { @@ -400,11 +377,11 @@ export class EffectsManager { const children = this.#getFilteredChildren(instance); if (!children.length) return; - // Обрабатываем options | Process options + // Process options if (typeof options.amplitude === 'number') options.amplitude = `${options.amplitude}px`; - // Сбрасываем стили перед анимацией | Reset styles before animation + // Reset styles before animation children.forEach((child, i) => { const phase = (i / children.length) * Math.PI * options.frequency; const y = Math.sin(phase) * parseInt(options.amplitude); @@ -416,7 +393,7 @@ export class EffectsManager { child.style.opacity = isOpening ? options.opacity : '1'; }); - // Форсируем reflow | Force reflow + // Force reflow instance.$content.offsetHeight; children.forEach((child, i) => { @@ -444,9 +421,6 @@ export class EffectsManager { /** * Apply flip animation effect * Flips elements in 3D space - * @param {import('../../types/core').default} instance - Prismium instance - * @param {boolean} isOpening - Whether accordion is opening - * @private */ #applyFlipEffect(instance, isOpening) { const defaults = { @@ -462,7 +436,7 @@ export class EffectsManager { const children = this.#getFilteredChildren(instance); if (!children.length) return; - // Обрабатываем options | Process options + // Process options if (typeof options.perspective === 'number') options.perspective = `${options.perspective}px`; @@ -471,7 +445,7 @@ export class EffectsManager { instance.$content.style.perspective = options.perspective; - // Сбрасываем стили перед анимацией | Reset styles before animation + // Reset styles before animation children.forEach((child, i) => { child.style.transition = 'none'; child.style.transform = isOpening @@ -480,7 +454,7 @@ export class EffectsManager { child.style.opacity = isOpening ? options.opacity : '1'; }); - // Форсируем reflow | Force reflow + // Force reflow instance.$content.offsetHeight; children.forEach((child, i) => { @@ -505,9 +479,6 @@ export class EffectsManager { /** * Apply zoom animation effect * Zooms elements from different origins - * @param {import('../../types/core').default} instance - Prismium instance - * @param {boolean} isOpening - Whether accordion is opening - * @private */ #applyZoomEffect(instance, isOpening) { const defaults = { @@ -560,9 +531,6 @@ export class EffectsManager { /** * Apply cascade animation effect * Creates a cascading animation with rotation - * @param {import('../../types/core').default} instance - Prismium instance - * @param {boolean} isOpening - Whether accordion is opening - * @private */ #applyCascadeEffect(instance, isOpening) { const defaults = { @@ -578,7 +546,7 @@ export class EffectsManager { const children = this.#getFilteredChildren(instance); if (!children.length) return; - // Обрабатываем options | Process options + // Process options if (typeof options.distance === 'number') options.distance = `${options.distance}px`; @@ -613,9 +581,6 @@ export class EffectsManager { /** * Apply custom animation effect * Allows for custom user-defined animations - * @param {import('../../types/core').default} instance - Prismium instance - * @param {boolean} isOpening - Whether accordion is opening - * @private */ #applyCustomEffect(instance, isOpening) { const defaults = { @@ -643,17 +608,17 @@ export class EffectsManager { if (!children.length) return; - // Применяем начальную настройку если есть | Apply setup if exists + // Apply setup if exists if (typeof options.setup === 'function') { children.forEach((child, i) => { options.setup(instance, child, i, children.length, isOpening); }); } - // Форсируем reflow | Force reflow + // Force reflow instance.$content.offsetHeight; - // Применяем анимацию | Apply animation + // Apply animation children.forEach((child, i) => { const animate = isOpening ? options.open : options.close; if (typeof animate === 'function') { @@ -663,7 +628,7 @@ export class EffectsManager { } }); - // Очистка после анимации | Cleanup after animation + // Cleanup after animation if (typeof options.cleanup === 'function') { const maxDelay = options.delay * (children.length - 1) + options.speed; @@ -679,8 +644,6 @@ export class EffectsManager { /** * Calculate total animation duration for the current effect - * @param {import('../../types/core').default} instance - Prismium instance - * @returns {number} Total animation duration in milliseconds */ getEffectsDuration(instance) { if (!instance.$content || !instance.options.effect) return 0; diff --git a/src/core/managers/IconManager.mjs b/src/core/managers/IconManager.mjs index 626d8cd..33ffd32 100644 --- a/src/core/managers/IconManager.mjs +++ b/src/core/managers/IconManager.mjs @@ -5,9 +5,6 @@ export class IconManager { /** * Set up the Icon manager with Prismium instance and current element - * @param {import('../../types/core').default} instance - Prismium instance - * @param {HTMLElement} $current - Current element where icon is placed - * @returns {IconManager} The IconManager instance */ setup(instance, $current) { this.instance = instance; @@ -24,7 +21,6 @@ export class IconManager { /** * Update icon based on accordion state - * @param {'open'|'close'} state - Current accordion state */ updateIcon(state) { if (!this.$icons || !this.icon) return; diff --git a/src/core/managers/TimerManager.mjs b/src/core/managers/TimerManager.mjs index fbcb16e..4794653 100644 --- a/src/core/managers/TimerManager.mjs +++ b/src/core/managers/TimerManager.mjs @@ -12,16 +12,11 @@ export class TimerManager { /** * Set of active timers - * @type {Set} - * @private */ #timers; /** * Set timeout for a function - * @param {Function} callback - Function to call - * @param {number} delay - Delay in milliseconds - * @returns {number} Timeout ID */ setTimeout(callback, delay) { const timer = setTimeout(() => { @@ -35,7 +30,6 @@ export class TimerManager { /** * Clear a timeout - * @param {number} timer - Timeout ID */ clearTimeout(timer) { if (timer) { diff --git "a/src/core/managers/\321\204" "b/src/core/managers/\321\204" deleted file mode 100644 index f4df4a1..0000000 --- "a/src/core/managers/\321\204" +++ /dev/null @@ -1,59 +0,0 @@ -document.addEventListener('DOMContentLoaded', () => { - const contentElement = document.getElementById('content'); - - // Создадим псевдо-объект instance с опциями для кастомного эффекта - const instance = { - // Опции, передаваемые в кастомный эффект - options: { - effectCustom: { - speed: 300, // продолжительность анимации в мс - delay: 100, // задержка между анимациями элементов - setup: (child: HTMLElement, index: number, total: number, isOpening: boolean) => { - // Начальная настройка: например, скрыть элемент - child.style.opacity = '0'; - console.log(`Setup ${index + 1}/${total} перед ${isOpening ? 'открытием' : 'закрытием'}`); - }, - open: (child: HTMLElement, index: number, total: number) => { - // Анимация открытия: плавное появление - child.style.transition = 'opacity 0.3s'; - child.style.opacity = '1'; - console.log(`Элемент ${index + 1}/${total} открывается`); - }, - close: (child: HTMLElement, index: number, total: number) => { - // Анимация закрытия: плавное исчезновение - child.style.transition = 'opacity 0.3s'; - child.style.opacity = '0'; - console.log(`Элемент ${index + 1}/${total} закрывается`); - }, - cleanup: (child: HTMLElement, index: number, total: number, isOpening: boolean) => { - // Очистка: удаление временных стилей - child.style.transition = ''; - console.log(`Очистка ${index + 1}/${total} после ${isOpening ? 'открытия' : 'закрытия'}`); - }, - } - }, - // Элемент, к которому прикрепляются дочерние элементы - $content: contentElement!, - // Простой менеджер таймеров, использующий глобальные функции - timerManager: { - setTimeout, - clearTimeout - } - }; - - // Допустим, контейнер содержит несколько
для применения эффекта. - // Пример разметки HTML: - //
- //
Первый элемент
- //
Второй элемент
- //
Третий элемент
- //
- // Пусть метод #getFilteredChildren ищет дочерние элементы внутри $content - - // Создаём экземпляр EffectsManager - const effectsManager = new EffectsManager(); - - // Допустим, EffectsManager имеет публичный метод applyEffect, который внутри вызывает #applyCustomEffect. - // Передаём instance и флаг (true - для открытия, false - для закрытия) - effectsManager.applyEffect(instance, true); -}); diff --git a/src/core/methods/actions.mjs b/src/core/methods/actions.mjs index b7934a8..8cf27c9 100644 --- a/src/core/methods/actions.mjs +++ b/src/core/methods/actions.mjs @@ -154,7 +154,7 @@ export default { instance.emit('beforeClose'); - // Установка скорости | Set the speed + // Set the speed instance.el.style.setProperty('--pr-speed', `${instance.speed.close}ms`); // If there is an effects manager and an effect is set, start the effect event diff --git a/src/modules/effects.mjs b/src/modules/effects.mjs index 0ec1b84..2b01b81 100644 --- a/src/modules/effects.mjs +++ b/src/modules/effects.mjs @@ -4,7 +4,6 @@ import { EffectsManager } from '../core/managers/EffectsManager.mjs'; /** * Effects module for Prismium * Adds animation effects to accordion content - * @type {import('../types/index').PrismiumModule} */ export default { /** @@ -18,20 +17,17 @@ export default { defaultOptions: { /** * Effect type to use - * @type {import('../types/index').PrismiumEffect|null} */ effect: null, /** * Selectors for elements to ignore when applying effects - * @type {string[]} */ effectIgnore: ['[data-effect-ignore]'], }, /** * Install the effects module - * @param {import('../types/core').default} instance - Prismium instance */ install(instance) { deepMerge({}, this.defaultOptions, instance.options); diff --git a/src/prismium.scss b/src/prismium.scss index f03429a..4590c39 100644 --- a/src/prismium.scss +++ b/src/prismium.scss @@ -11,8 +11,9 @@ --pr-anim-ease: cubic-bezier(0.36, 0.3, 0, 1); --pr-bg: transparent; --pr-bg-active: transparent; - --pr-bg-active-nested: transparent; --pr-bg-hover: transparent; + --pr-bg-nested: transparent; + --pr-bg-nested-active: transparent; --pr-border-color: transparent; --pr-border-radius: 0; --pr-border-width: 0; @@ -39,9 +40,6 @@ align-items: flex-start; justify-content: flex-start; - color: var(--pr-current-color); - font: var(--pr-current-font); - background-color: var(--pr-bg); border: solid var(--pr-border-width) var(--pr-border-color); border-radius: var(--pr-border-radius); @@ -70,8 +68,8 @@ justify-content: space-between; gap: var(--pr-current-gap); - color: inherit; - font: inherit; + color: var(--pr-current-color); + font: var(--pr-current-font); text-align: start; background-color: transparent; @@ -102,7 +100,8 @@ fill: var(--pr-icon-color); - transition: transform var(--pr-speed) var(--pr-anim-ease), + transition: transform var(--pr-speed, var(--pr-anim-duration)) + var(--pr-anim-ease), fill var(--pr-anim-duration) var(--pr-anim-ease); pointer-events: all; @@ -184,12 +183,16 @@ .prismium { margin-top: var(--pr-gap); + + background-color: var(--pr-bg-nested); } } &.prismium-active { + background-color: var(--pr-bg-active); + > .prismium__current { - > .prismium__icon { + .prismium__icon { transform: rotate(180deg); } } @@ -201,7 +204,7 @@ } .prismium-active { - background-color: var(--pr-bg-active-nested); + background-color: var(--pr-bg-nested-active); } } diff --git a/src/react/components/Prismium.mjs b/src/react/components/Prismium.mjs index 9e3bd51..d9e4cc0 100644 --- a/src/react/components/Prismium.mjs +++ b/src/react/components/Prismium.mjs @@ -5,26 +5,6 @@ import PrismiumCore from '../../core/core.mjs'; /** * Main Prismium React component * Provides an accordion UI component with animation effects - * - * @param {Object} props - Component props - * @param {import('../../types/options').PrismiumOptions} [props.options={}] - Configuration options for Prismium - * @param {import('../../types/index').PrismiumModule[]} [props.modules=[]] - Array of modules to use with Prismium - * @param {React.ReactNode} props.children - Child components - * @param {Function} [props.beforeInit] - Event handler for beforeInit event - * @param {Function} [props.init] - Event handler for init event - * @param {Function} [props.afterInit] - Event handler for afterInit event - * @param {Function} [props.beforeOpen] - Event handler for beforeOpen event - * @param {Function} [props.open] - Event handler for open event - * @param {Function} [props.afterOpen] - Event handler for afterOpen event - * @param {Function} [props.beforeClose] - Event handler for beforeClose event - * @param {Function} [props.close] - Event handler for close event - * @param {Function} [props.afterClose] - Event handler for afterClose event - * @param {Function} [props.beforeDestroy] - Event handler for beforeDestroy event - * @param {Function} [props.destroy] - Event handler for destroy event - * @param {Function} [props.afterDestroy] - Event handler for afterDestroy event - * @param {Function} [props.effectStart] - Event handler for effectStart event - * @param {Function} [props.effectEnd] - Event handler for effectEnd event - * @returns {React.ReactElement} Prismium component */ export const Prismium = ({ options = {}, diff --git a/src/react/components/PrismiumContent.mjs b/src/react/components/PrismiumContent.mjs index b19f4f4..ae7a48b 100644 --- a/src/react/components/PrismiumContent.mjs +++ b/src/react/components/PrismiumContent.mjs @@ -3,12 +3,6 @@ import React from 'react'; /** * Prismium Content component for React * Represents the collapsible content part of an accordion - * - * @param {Object} props - Component props - * @param {string} [props.selector='div'] - HTML tag to use for rendering - * @param {Object} [props.attributes={}] - Additional attributes to apply to the element - * @param {React.ReactNode} props.children - Child components - * @returns {React.ReactElement} PrismiumContent component */ export const PrismiumContent = ({ selector = 'div', diff --git a/src/react/components/PrismiumCurrent.mjs b/src/react/components/PrismiumCurrent.mjs index 6eb7f3b..495a1e3 100644 --- a/src/react/components/PrismiumCurrent.mjs +++ b/src/react/components/PrismiumCurrent.mjs @@ -3,12 +3,6 @@ import React from 'react'; /** * Prismium Current component for React * Represents the clickable header part of an accordion - * - * @param {Object} props - Component props - * @param {string} [props.selector='div'] - HTML tag to use for rendering - * @param {Object} [props.attributes={}] - Additional attributes to apply to the element - * @param {React.ReactNode} props.children - Child components - * @returns {React.ReactElement} PrismiumCurrent component */ export const PrismiumCurrent = ({ selector = 'div', diff --git a/src/themes/dark-contrast.scss b/src/themes/dark-contrast.scss index de71be8..bb05482 100644 --- a/src/themes/dark-contrast.scss +++ b/src/themes/dark-contrast.scss @@ -1,5 +1,4 @@ .prismium.prismium_dark-contrast { - --pr-anim-duration: 0.35s; --pr-bg: #000; --pr-bg-active: #0f0f0f; --pr-bg-hover: #1d1d1d; diff --git a/src/themes/dark.scss b/src/themes/dark.scss index 5180792..d80c503 100644 --- a/src/themes/dark.scss +++ b/src/themes/dark.scss @@ -1,22 +1,22 @@ .prismium.prismium_dark { - --pr-bg-active: #0f0f0f; - --pr-bg-active-nested: #FFF05; - --pr-bg-hover: #0e0e0e; - --pr-bg: #2b2b2b; + --pr-bg: #1c1c1c; + --pr-bg-active: var(--pr-bg); + --pr-bg-hover: #222222; + --pr-bg-nested: var(--pr-bg); + --pr-bg-nested-active: #ffffff05; --pr-border-color: #3a3a3a; - --pr-border-radius: 12px; + --pr-border-radius: 16px; --pr-border-width: 1px; + --pr-content-color: #f1f1f1; + --pr-content-font: 400 16px / 1.2 sans-serif; --pr-content-gap: 20px; --pr-content-offset: 20px; + --pr-current-color: #fafafa; + --pr-current-font: 500 20px / 1.2 sans-serif; --pr-current-gap: 20px; - --pr-anim-duration: 0.35s; - --pr-current-font: 500 20px/1.2 sans-serif; - --pr-content-font: 500 16px/1.2 sans-serif; --pr-gap: 10px; - --pr-icon-color-hover: #56e6de; --pr-icon-color: var(--pr-current-color); + --pr-icon-color-hover: #56e6de; --pr-icon-size: 24px; --pr-padding: 12px; - --pr-current-color: #dfdfdf; - --pr-content-color: #b3b3b3; } diff --git a/src/themes/forest.scss b/src/themes/forest.scss index 4561a7a..8375076 100644 --- a/src/themes/forest.scss +++ b/src/themes/forest.scss @@ -1,22 +1,22 @@ .prismium.prismium_forest { - --pr-bg-active: #d8eecc; - --pr-bg-active-nested: #61ff051c; - --pr-bg-hover: #e8f0e8; - --pr-bg: #f5faf5; - --pr-border-color: #7a917a; - --pr-border-radius: 2px; + --pr-bg: #f5f5dc; + --pr-bg-active: var(--pr-bg); + --pr-bg-hover: #eaeac5; + --pr-bg-nested: var(--pr-bg); + --pr-bg-nested-active: #d8d8a899; + --pr-border-color: #c0c090; + --pr-border-radius: 4px; --pr-border-width: 1px; + --pr-content-color: #191b0c; + --pr-content-font: 500 16px / 1.2 sans-serif; --pr-content-gap: 20px; --pr-content-offset: 20px; + --pr-current-color: #191b0c; + --pr-current-font: 500 20px / 1.2 sans-serif; --pr-current-gap: 20px; - --pr-anim-duration: 0.35s; - --pr-current-font: 500 20px/1.2 sans-serif; - --pr-content-font: 500 16px/1.2 sans-serif; --pr-gap: 10px; - --pr-icon-color-hover: #1b4d29; --pr-icon-color: var(--pr-current-color); + --pr-icon-color-hover: #8fbc8f; --pr-icon-size: 24px; --pr-padding: 12px; - --pr-current-color: #1a291e; - --pr-content-color: #415445; } diff --git a/src/themes/light.scss b/src/themes/light.scss index b26f6b5..e2f0216 100644 --- a/src/themes/light.scss +++ b/src/themes/light.scss @@ -1,22 +1,22 @@ .prismium.prismium_light { - --pr-bg-active: #f7fdfd; - --pr-bg-active-nested: #8efdff13; - --pr-bg-hover: #dfffff; - --pr-bg: #fcffff; - --pr-border-color: #c5c5c5; - --pr-border-radius: 12px; + --pr-bg: #ffffff; + --pr-bg-active: var(--pr-bg); + --pr-bg-hover: #f0f0f0; + --pr-bg-nested: var(--pr-bg); + --pr-bg-nested-active: #e0e0e099; + --pr-border-color: #d0d0d0; + --pr-border-radius: 20px; --pr-border-width: 1px; + --pr-content-color: #1f1f1f; + --pr-content-font: 500 16px / 1.2 sans-serif; --pr-content-gap: 20px; --pr-content-offset: 20px; + --pr-current-color: #1f1f1f; + --pr-current-font: 500 20px / 1.2 sans-serif; --pr-current-gap: 20px; - --pr-anim-duration: 0.35s; - --pr-current-font: 500 20px/1.2 sans-serif; - --pr-content-font: 500 16px/1.2 sans-serif; --pr-gap: 10px; - --pr-icon-color-hover: #3234b4; --pr-icon-color: var(--pr-current-color); + --pr-icon-color-hover: #56e6de; --pr-icon-size: 24px; --pr-padding: 12px; - --pr-current-color: #202020; - --pr-content-color: #4c4c4c; } diff --git a/src/themes/ocean.scss b/src/themes/ocean.scss index 3d7ef78..a0fd311 100644 --- a/src/themes/ocean.scss +++ b/src/themes/ocean.scss @@ -1,22 +1,22 @@ .prismium.prismium_ocean { - --pr-bg-active: #cce4ee; - --pr-bg-active-nested: #05a6ff1c; - --pr-bg-hover: #e8edf0; - --pr-bg: #f5f8fa; - --pr-border-color: #7a8891; - --pr-border-radius: 24px; + --pr-bg: #f0fbff; + --pr-bg-active: #d9f4fc; + --pr-bg-hover: #c2ecfa; + --pr-bg-nested: var(--pr-bg); + --pr-bg-nested-active: #cdfafa62; + --pr-border-color: #8a8a8a69; + --pr-border-radius: 22px; --pr-border-width: 1px; + --pr-content-color: #000000; + --pr-content-font: 500 16px / 1.2 sans-serif; --pr-content-gap: 20px; --pr-content-offset: 20px; + --pr-current-color: #000000; + --pr-current-font: 500 20px / 1.2 sans-serif; --pr-current-gap: 20px; - --pr-anim-duration: 0.35s; - --pr-current-font: 500 20px/1.2 sans-serif; - --pr-content-font: 500 16px/1.2 sans-serif; --pr-gap: 10px; - --pr-icon-color-hover: #1b374d; - --pr-icon-color: var(--pr-current-color); + --pr-icon-color: #000000; + --pr-icon-color-hover: #0e3644; --pr-icon-size: 24px; - --pr-padding: 16px; - --pr-current-color: #1a2229; - --pr-content-color: #414954; + --pr-padding: 12px; } diff --git a/src/themes/sunset.scss b/src/themes/sunset.scss index 9871d7b..254997c 100644 --- a/src/themes/sunset.scss +++ b/src/themes/sunset.scss @@ -1,22 +1,22 @@ .prismium.prismium_sunset { - --pr-bg-active: #ffe6cc; - --pr-bg-active-nested: #ffab4b11; - --pr-bg-hover: #fff0e8; - --pr-bg: #fff7f5; - --pr-border-color: #916f7a; - --pr-border-radius: 16px; + --pr-bg: #fdf6e3; + --pr-bg-active: #f5e8c7; + --pr-bg-hover: #f0e4bf; + --pr-bg-nested: var(--pr-bg); + --pr-bg-nested-active: #fae9bd70; + --pr-border-color: #d3c4a1; + --pr-border-radius: 12px; --pr-border-width: 1px; - --pr-content-gap: 20px; - --pr-content-offset: 20px; - --pr-current-gap: 20px; - --pr-anim-duration: 0.35s; - --pr-current-font: 500 20px/1.2 sans-serif; - --pr-content-font: 500 16px/1.2 sans-serif; - --pr-gap: 10px; - --pr-icon-color-hover: #963b1b; - --pr-icon-color: var(--pr-current-color); - --pr-icon-size: 24px; - --pr-padding: 12px; - --pr-current-color: #291f1a; - --pr-content-color: #544137; + --pr-content-color: #5b4636; + --pr-content-font: 500 16px / 1.5 'Georgia', serif; + --pr-content-gap: 16px; + --pr-content-offset: 16px; + --pr-current-color: #5b4636; + --pr-current-font: 600 18px / 1.5 'Georgia', serif; + --pr-current-gap: 16px; + --pr-gap: 8px; + --pr-icon-color: #5b4636; + --pr-icon-color-hover: #4e4835; + --pr-icon-size: 20px; + --pr-padding: 10px; } diff --git a/src/types/README.md b/src/types/README.md index 7e80a02..cb24dfa 100644 --- a/src/types/README.md +++ b/src/types/README.md @@ -29,24 +29,6 @@ const prismiumOptions: PrismiumOptions = { const accordion = new Prismium('.accordion', prismiumOptions); ``` -## Using with JavaScript + JSDoc - -```javascript -/** - * @typedef {import('prismium').PrismiumOptions} PrismiumOptions - */ - -/** - * @type {PrismiumOptions} - */ -const prismiumOptions = { - theme: 'dark', - effect: 'line-by-line', -}; - -const accordion = new Prismium('.accordion', prismiumOptions); -``` - ## React Components ```tsx diff --git a/src/utils/base.mjs b/src/utils/base.mjs index 52be6a0..0350168 100644 --- a/src/utils/base.mjs +++ b/src/utils/base.mjs @@ -1,30 +1,30 @@ -// Получить текущее время | Get current time +// Get current time function now() { return Date.now(); } -// Обработка аккордеонов | Process accordions +// Process accordions function processAccordions( nestedAccordions, rootAccordions, getInstance, open ) { - // Открываем вложенные мгновенно | Open nested accordions instantly + // Open nested accordions instantly nestedAccordions.forEach((el) => { const instance = getInstance(el); if (instance) { - // Сохраняем оригинальную скорость | Save original speed + // Save original speed const originalSpeed = { ...instance.speed }; - // Устанавливаем нулевую скорость | Set zero speed + // Set zero speed el.style.setProperty('--pr-speed', '0ms'); - // Открываем аккордеон | Open accordion + // Open accordion open(el, false); instance.iconManager?.updateIcon('open'); - // Сразу восстанавливаем скорость | Restore speed immediately + // Restore speed immediately requestAnimationFrame(() => { instance.speed = originalSpeed; el.style.setProperty('--pr-speed', `${originalSpeed.open}ms`); @@ -32,7 +32,7 @@ function processAccordions( } }); - // Открываем корневые с анимацией | Open root accordions with animation + // Open root accordions with animation rootAccordions.forEach((el) => { const instance = getInstance(el); if (instance) { @@ -42,7 +42,7 @@ function processAccordions( }); } -// Получить глубину элемента | Get element depth +// Get element depth function getElementDepth(el, container) { let depth = 0; let current = el; diff --git a/src/utils/deepMerge.mjs b/src/utils/deepMerge.mjs index 272047a..11cb626 100644 --- a/src/utils/deepMerge.mjs +++ b/src/utils/deepMerge.mjs @@ -1,9 +1,7 @@ import { isNode, isObject } from './is.mjs'; /** - * @description Deep merge objects - * @param {...object} sources - Objects to merge - * @returns {object} Merged object + * Deep merge objects */ export function deepMerge(...sources) { const [target, ...rest] = sources; @@ -26,7 +24,7 @@ export function deepMerge(...sources) { const targetValue = target[key]; if (isObject(sourceValue)) { - // Обработка объектов | Handle objects + // Handle objects if (sourceValue.__prismium__) { target[key] = sourceValue; } else if (isObject(targetValue)) { diff --git a/src/utils/is.mjs b/src/utils/is.mjs index 7b8a066..72ad621 100644 --- a/src/utils/is.mjs +++ b/src/utils/is.mjs @@ -1,7 +1,5 @@ /** - * @description Check if value is an object - * @param {object} obj - Value to check - * @returns {boolean} True if value is an object, false otherwise + * Check if value is an object */ function isObject(obj) { return ( @@ -13,9 +11,7 @@ function isObject(obj) { } /** - * @description Check if value is a DOM node - * @param {Node} node - Value to check - * @returns {boolean} True if value is a DOM node, false otherwise + * Check if value is a DOM node */ function isNode(node) { return typeof window !== 'undefined' && diff --git a/src/vue/components/Prismium.mjs b/src/vue/components/Prismium.mjs index f0e68cd..c9fafbc 100644 --- a/src/vue/components/Prismium.mjs +++ b/src/vue/components/Prismium.mjs @@ -13,7 +13,6 @@ import PrismiumCore from '../../core/core.mjs'; /** * Injection key for Prismium context - * @type {string} */ export const PRISMIUM_INJECTION_KEY = 'prismium'; @@ -43,7 +42,6 @@ export const Prismium = defineComponent({ props: { /** * Configuration options for Prismium - * @type {import('../../types/options').PrismiumOptions} */ options: { type: Object, @@ -52,7 +50,6 @@ export const Prismium = defineComponent({ /** * Array of modules to use with Prismium - * @type {import('../../types/index').PrismiumModule[]} */ modules: { type: Array, @@ -61,7 +58,6 @@ export const Prismium = defineComponent({ /** * Additional attributes to apply to the root element - * @type {Object} */ attributes: { type: Object, @@ -71,12 +67,6 @@ export const Prismium = defineComponent({ /** * Component setup function - * @param {Object} props - Component props - * @param {Object} context - Setup context - * @param {Function} context.emit - Emit event function - * @param {Object} context.attrs - Non-prop attributes - * @param {Object} context.slots - Component slots - * @returns {Function} Render function */ setup(props, { slots, emit, attrs }) { const prismiumRef = ref(null); diff --git a/src/vue/components/PrismiumContent.mjs b/src/vue/components/PrismiumContent.mjs index e6293db..79822e4 100644 --- a/src/vue/components/PrismiumContent.mjs +++ b/src/vue/components/PrismiumContent.mjs @@ -9,8 +9,6 @@ export const PrismiumContent = defineComponent({ props: { /** * HTML tag/selector to use for rendering the component - * @type {string} - * @default 'div' */ selector: { type: String, @@ -19,7 +17,6 @@ export const PrismiumContent = defineComponent({ /** * Additional attributes to apply to the element - * @type {Object} */ attributes: { type: Object, @@ -29,13 +26,6 @@ export const PrismiumContent = defineComponent({ /** * Component setup function - * @param {Object} props - Component props - * @param {string} props.selector - HTML tag to render - * @param {Object} props.attributes - Additional attributes - * @param {Object} context - Setup context - * @param {Object} context.slots - Component slots - * @param {Object} context.attrs - Non-prop attributes - * @returns {Function} Render function */ setup(props, { slots, attrs }) { return () => diff --git a/src/vue/components/PrismiumCurrent.mjs b/src/vue/components/PrismiumCurrent.mjs index d039a7c..da13814 100644 --- a/src/vue/components/PrismiumCurrent.mjs +++ b/src/vue/components/PrismiumCurrent.mjs @@ -9,8 +9,6 @@ export const PrismiumCurrent = defineComponent({ props: { /** * HTML tag/selector to use for rendering the component - * @type {string} - * @default 'div' */ selector: { type: String, @@ -19,7 +17,6 @@ export const PrismiumCurrent = defineComponent({ /** * Additional attributes to apply to the element - * @type {Object} */ attributes: { type: Object, @@ -29,13 +26,6 @@ export const PrismiumCurrent = defineComponent({ /** * Component setup function - * @param {Object} props - Component props - * @param {string} props.selector - HTML tag to render - * @param {Object} props.attributes - Additional attributes - * @param {Object} context - Setup context - * @param {Object} context.slots - Component slots - * @param {Object} context.attrs - Non-prop attributes - * @returns {Function} Render function */ setup(props, { slots, attrs }) { return () =>