Обновлены стили для компонента спойлеров, улучшена анимация и добавлены новые визуальные эффекты. Обновлен файл service worker с новой версией для кэширования. Оптимизирована логика рендеринга токенов в markdown, улучшена обработка вложенных элементов и ссылок.
This commit is contained in:
parent
e3b98ea8d3
commit
30f9daaec8
@ -82,7 +82,7 @@ define(['./workbox-9dc17825'], (function (workbox) { 'use strict';
|
||||
"revision": "3ca0b8505b4bec776b69afdba2768812"
|
||||
}, {
|
||||
"url": "index.html",
|
||||
"revision": "0.nsn25edhihg"
|
||||
"revision": "0.b1jpidvaji"
|
||||
}], {});
|
||||
workbox.cleanupOutdatedCaches();
|
||||
workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {
|
||||
|
||||
@ -671,7 +671,8 @@ header {
|
||||
|
||||
/* Анимация пульсации для offline индикатора */
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
@ -4409,7 +4410,7 @@ textarea:focus {
|
||||
|
||||
/* Стили для скрытого текста (спойлеров) */
|
||||
.spoiler {
|
||||
background: linear-gradient(45deg, #f0f0f0, #e8e8e8);
|
||||
background: linear-gradient(45deg, rgba(var(--accent-color-rgb), 0.15), rgba(var(--accent-color-rgb), 0.25));
|
||||
color: transparent;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
@ -4417,11 +4418,15 @@ textarea:focus {
|
||||
user-select: none;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
border: 1px solid #ddd;
|
||||
display: inline-block;
|
||||
vertical-align: baseline;
|
||||
border: 1px solid rgba(var(--accent-color-rgb), 0.3);
|
||||
font-weight: 500;
|
||||
backdrop-filter: blur(2px);
|
||||
-webkit-backdrop-filter: blur(2px);
|
||||
text-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
|
||||
text-shadow: 0 0 8px rgba(var(--accent-color-rgb), 0.3);
|
||||
isolation: isolate;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.spoiler::before {
|
||||
@ -4431,27 +4436,30 @@ textarea:focus {
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
background: rgba(var(--accent-color-rgb), 0.1);
|
||||
border-radius: 4px;
|
||||
filter: blur(1px);
|
||||
z-index: -1;
|
||||
box-sizing: border-box;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.spoiler:hover {
|
||||
background: linear-gradient(45deg, #e8e8e8, #d8d8d8);
|
||||
background: linear-gradient(45deg, rgba(var(--accent-color-rgb), 0.25), rgba(var(--accent-color-rgb), 0.35));
|
||||
transform: scale(1.02);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
||||
box-shadow: 0 2px 8px rgba(var(--accent-color-rgb), 0.25);
|
||||
border-color: rgba(var(--accent-color-rgb), 0.4);
|
||||
}
|
||||
|
||||
.spoiler:hover::before {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
background: rgba(var(--accent-color-rgb), 0.15);
|
||||
}
|
||||
|
||||
.spoiler.revealed {
|
||||
background: linear-gradient(45deg, #e8f5e8, #d4edda);
|
||||
color: #155724;
|
||||
border-color: #c3e6cb;
|
||||
box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.25);
|
||||
background: linear-gradient(45deg, rgba(var(--accent-color-rgb), 0.15), rgba(var(--accent-color-rgb), 0.2));
|
||||
color: var(--accent-color);
|
||||
border-color: rgba(var(--accent-color-rgb), 0.4);
|
||||
box-shadow: 0 0 0 2px rgba(var(--accent-color-rgb), 0.25);
|
||||
text-shadow: none;
|
||||
user-select: text;
|
||||
-webkit-user-select: text;
|
||||
@ -4463,8 +4471,8 @@ textarea:focus {
|
||||
}
|
||||
|
||||
.spoiler.revealed:hover {
|
||||
background: linear-gradient(45deg, #d4edda, #c3e6cb);
|
||||
box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.35);
|
||||
background: linear-gradient(45deg, rgba(var(--accent-color-rgb), 0.2), rgba(var(--accent-color-rgb), 0.25));
|
||||
box-shadow: 0 0 0 2px rgba(var(--accent-color-rgb), 0.35);
|
||||
}
|
||||
|
||||
/* Стили для файлов */
|
||||
|
||||
@ -25,49 +25,54 @@ const spoilerExtension = {
|
||||
|
||||
// Функция для рендеринга вложенных токенов
|
||||
function renderTokens(tokens: any[], renderer: any): string {
|
||||
return tokens.map((token) => {
|
||||
return tokens
|
||||
.map((token) => {
|
||||
// Используем кастомный renderer если он есть
|
||||
if (renderer[token.type]) {
|
||||
return renderer[token.type](token);
|
||||
}
|
||||
// Fallback для встроенных типов токенов
|
||||
if (token.type === 'text') {
|
||||
return token.text || '';
|
||||
if (token.type === "text") {
|
||||
return token.text || "";
|
||||
}
|
||||
if (token.type === 'strong') {
|
||||
if (token.type === "strong") {
|
||||
return `<strong>${renderTokens(token.tokens || [], renderer)}</strong>`;
|
||||
}
|
||||
if (token.type === 'em') {
|
||||
if (token.type === "em") {
|
||||
return `<em>${renderTokens(token.tokens || [], renderer)}</em>`;
|
||||
}
|
||||
if (token.type === 'codespan') {
|
||||
return `<code>${token.text || ''}</code>`;
|
||||
if (token.type === "codespan") {
|
||||
return `<code>${token.text || ""}</code>`;
|
||||
}
|
||||
if (token.type === 'del') {
|
||||
if (token.type === "del") {
|
||||
return `<del>${renderTokens(token.tokens || [], renderer)}</del>`;
|
||||
}
|
||||
if (token.type === 'link') {
|
||||
if (token.type === "link") {
|
||||
// Для ссылок используем кастомный renderer если доступен
|
||||
if (renderer.link) {
|
||||
return renderer.link(token);
|
||||
}
|
||||
// Fallback для встроенных ссылок
|
||||
const href = token.href || '';
|
||||
const title = token.title ? ` title="${token.title}"` : '';
|
||||
const text = token.tokens && token.tokens.length > 0
|
||||
const href = token.href || "";
|
||||
const title = token.title ? ` title="${token.title}"` : "";
|
||||
const text =
|
||||
token.tokens && token.tokens.length > 0
|
||||
? renderTokens(token.tokens, renderer)
|
||||
: (token.text || '');
|
||||
: token.text || "";
|
||||
return `<a href="${href}"${title}>${text}</a>`;
|
||||
}
|
||||
if (token.type === 'spoiler') {
|
||||
if (token.type === "spoiler") {
|
||||
// Для спойлеров используем кастомный renderer если доступен
|
||||
if (renderer.spoiler) {
|
||||
return renderer.spoiler(token);
|
||||
}
|
||||
return `<span class="spoiler" title="Нажмите, чтобы показать">${token.text || ''}</span>`;
|
||||
return `<span class="spoiler" title="Нажмите, чтобы показать">${
|
||||
token.text || ""
|
||||
}</span>`;
|
||||
}
|
||||
return token.text || '';
|
||||
}).join('');
|
||||
return token.text || "";
|
||||
})
|
||||
.join("");
|
||||
}
|
||||
|
||||
// Кастомный renderer для внешних ссылок и чекбоксов
|
||||
@ -77,7 +82,7 @@ const renderer: any = {
|
||||
const title = token.title;
|
||||
|
||||
// Правильно обрабатываем вложенные токены для форматирования внутри ссылок
|
||||
let text = '';
|
||||
let text = "";
|
||||
if (token.tokens && token.tokens.length > 0) {
|
||||
text = renderTokens(token.tokens, this);
|
||||
} else if (token.text) {
|
||||
@ -103,7 +108,7 @@ const renderer: any = {
|
||||
const checked = token.checked;
|
||||
|
||||
// Правильно обрабатываем вложенные токены для форматирования
|
||||
let content = '';
|
||||
let content = "";
|
||||
if (token.tokens && token.tokens.length > 0) {
|
||||
// Рендерим вложенные токены используя наш renderer
|
||||
content = renderTokens(token.tokens, this);
|
||||
@ -174,7 +179,7 @@ export const extractTags = (content: string): string[] => {
|
||||
|
||||
const tag = match[1];
|
||||
// Проверяем, есть ли уже тег с таким же именем (регистронезависимо)
|
||||
if (!tags.some(t => t.toLowerCase() === tag.toLowerCase())) {
|
||||
if (!tags.some((t) => t.toLowerCase() === tag.toLowerCase())) {
|
||||
tags.push(tag);
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user