pablo/crochet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: added customization options

Browse Source
This commit is contained in:
Pablo Moreno
2026-07-15 10:43:42 +02:00
parent c1afd5a6d4
commit 1cb41e36ad
5 changed files with 83 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
js/section-types.js
+7 -3
View File
@@ -135,8 +135,12 @@ const SECTION_TYPES = [
create: (sectionData, container) => addTitleSection(addTitleBtn.dataset, sectionData?.text, container),
matches: (section) => section.querySelector('.title-input'),
serialize: (section, titleInput) => ({ type: 'title', text: getTranslations(titleInput) }),
// 'text-[var(--accent-color)]' lee la variable CSS que expone
// page-settings.js: así el título usa el color de acento elegido en
// "Personalización de página" sin que este módulo tenga que importar
// nada de allí, solo coincidir en el nombre de la variable.
render: (section, titleInput, target) =>
appendOutputLine(target, 'h3', titleInput.value.trim(), 'text-lg font-bold mt-2 mb-1'),
appendOutputLine(target, 'h3', titleInput.value.trim(), 'text-[1.125em] font-bold mt-2 mb-1 text-[var(--accent-color)]'),
getName: (titleInput) => titleInput.value.trim(),
},
{
@@ -146,7 +150,7 @@ const SECTION_TYPES = [
matches: (section) => section.querySelector('.subtitle-input'),
serialize: (section, subtitleInput) => ({ type: 'subtitle', text: getTranslations(subtitleInput) }),
render: (section, subtitleInput, target) =>
appendOutputLine(target, 'h4', subtitleInput.value.trim(), 'text-base font-semibold mt-1 mb-1'),
appendOutputLine(target, 'h4', subtitleInput.value.trim(), 'text-[1em] font-semibold mt-1 mb-1 text-[var(--accent-color)]'),
getName: (subtitleInput) => subtitleInput.value.trim(),
},
{
@@ -183,7 +187,7 @@ const SECTION_TYPES = [
const text = noteInput.value.trim();
if (!text) return;
const note = document.createElement('div');
note.className = 'alert text-sm my-2';
note.className = 'alert text-[0.875em] my-2';
const textColorInput = section.querySelector('.note-text-color');
const bgColorInput = section.querySelector('.note-bg-color');
if (textColorInput) note.style.color = textColorInput.value;