mirror of
https://github.com/chrstn67/WonderBox.git
synced 2026-07-22 05:31:43 +00:00
MAJ code main.js et séparation du conde CSS
This commit is contained in:
Chrstn67
parent
3a8cacb8b5
commit
229c16d8ea
4 changed files with 178 additions and 154 deletions
2
.github/workflows/release.yml
vendored
2
.github/workflows/release.yml
vendored
|
|
@ -31,4 +31,4 @@ jobs:
|
|||
gh release create "$tag" \
|
||||
--title="$tag" \
|
||||
--draft \
|
||||
main.js manifest.json
|
||||
main.js manifest.json styles.css
|
||||
|
|
|
|||
202
main.js
202
main.js
|
|
@ -6,11 +6,14 @@ module.exports = class MyPlugin extends Plugin {
|
|||
this.registerMarkdownPostProcessor((element, context) => {
|
||||
this.processNotes(element);
|
||||
});
|
||||
|
||||
// Charger les styles CSS depuis styles.css
|
||||
this.addStylesheet("styles.css");
|
||||
}
|
||||
|
||||
// Fonction pour détecter et transformer les blocs de type ":::type[Titre]" dans le markdown
|
||||
processNotes(element) {
|
||||
if (!element || !element.innerHTML) return;
|
||||
if (!element) return;
|
||||
|
||||
const types = [
|
||||
"note",
|
||||
|
|
@ -30,161 +33,56 @@ module.exports = class MyPlugin extends Plugin {
|
|||
];
|
||||
|
||||
types.forEach((type) => {
|
||||
// Recherche des blocs personnalisés :::type[Titre]
|
||||
// Parcourir les enfants de l'élément pour trouver les blocs correspondants
|
||||
const regex = new RegExp(`:::${type}\\[([^\\]]+)\\]([\\s\\S]*?):::`, "g");
|
||||
element.innerHTML = element.innerHTML.replace(
|
||||
regex,
|
||||
(match, title, content) => {
|
||||
return this.createBox(type, title, content);
|
||||
|
||||
Array.from(element.childNodes).forEach((child) => {
|
||||
if (child.nodeType === Node.TEXT_NODE) {
|
||||
const matches = [...child.textContent.matchAll(regex)];
|
||||
if (matches.length > 0) {
|
||||
const fragment = document.createDocumentFragment();
|
||||
|
||||
matches.forEach((match) => {
|
||||
const [fullMatch, title, content] = match;
|
||||
|
||||
// Créer un élément DOM pour la boîte
|
||||
const boxElement = this.createBoxElement(type, title, content);
|
||||
|
||||
// Ajouter la boîte au fragment
|
||||
fragment.appendChild(boxElement);
|
||||
|
||||
// Supprimer le texte correspondant au match
|
||||
child.textContent = child.textContent.replace(fullMatch, "");
|
||||
});
|
||||
|
||||
// Insérer les nouvelles boîtes avant le nœud textuel actuel
|
||||
element.insertBefore(fragment, child);
|
||||
}
|
||||
}
|
||||
);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Fonction pour générer le HTML des boîtes stylisées
|
||||
createBox(type, title, content) {
|
||||
// Remplacer les sauts de ligne par des balises <br> pour préserver le formatage
|
||||
const formattedContent = content.trim().replace(/\n/g, "<br>");
|
||||
return `
|
||||
<section class="custom-box ${type}">
|
||||
<div class="box-title">${title}</div>
|
||||
<div class="box-content">${formattedContent}</div>
|
||||
</section>
|
||||
`;
|
||||
// Fonction pour créer dynamiquement un élément DOM pour la boîte stylisée
|
||||
createBoxElement(type, title, content) {
|
||||
const section = document.createElement("section");
|
||||
section.classList.add("custom-box", type);
|
||||
|
||||
const titleDiv = document.createElement("div");
|
||||
titleDiv.classList.add("box-title");
|
||||
titleDiv.textContent = title;
|
||||
|
||||
const contentDiv = document.createElement("div");
|
||||
contentDiv.classList.add("box-content");
|
||||
content.split("\n").forEach((line) => {
|
||||
const lineElement = document.createElement("p");
|
||||
lineElement.textContent = line;
|
||||
contentDiv.appendChild(lineElement);
|
||||
});
|
||||
|
||||
section.appendChild(titleDiv);
|
||||
section.appendChild(contentDiv);
|
||||
|
||||
return section;
|
||||
}
|
||||
};
|
||||
|
||||
// CSS à ajouter pour styliser les boîtes
|
||||
const customBoxCSS = `
|
||||
.custom-box {
|
||||
border-radius: 5px;
|
||||
padding: 15px;
|
||||
margin: 15px 0;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.custom-box.note {
|
||||
color: #000;
|
||||
background-color: #fff;
|
||||
border-left: 4px solid #d1d3c0;
|
||||
border-top: 4px solid #d1d3c0;
|
||||
}
|
||||
|
||||
.custom-box.tip {
|
||||
color: #000;
|
||||
background-color: #e8f5e9;
|
||||
border-left: 4px solid #66bb6a;
|
||||
border-top: 4px solid #66bb6a;
|
||||
}
|
||||
|
||||
.custom-box.info {
|
||||
color: #000;
|
||||
background-color: #e3f2fd;
|
||||
border-left: 4px solid #29b6f6;
|
||||
border-top: 4px solid #29b6f6;
|
||||
}
|
||||
|
||||
.custom-box.warning {
|
||||
color: #000;
|
||||
background-color: #fff8e1;
|
||||
border-left: 4px solid #ffa726;
|
||||
border-top: 4px solid #ffa726;
|
||||
}
|
||||
|
||||
.custom-box.danger {
|
||||
color: #000;
|
||||
background-color: #ffebee;
|
||||
border-left: 4px solid #ef5350;
|
||||
border-top: 4px solid #ef5350;
|
||||
}
|
||||
|
||||
.custom-box.success {
|
||||
color: #000;
|
||||
background-color: #36ff00;
|
||||
border-left: 4px solid #28a745;
|
||||
border-top: 4px solid #28a745;
|
||||
}
|
||||
|
||||
.custom-box.error {
|
||||
color: #fff;
|
||||
background-color: #911a24;
|
||||
border-left: 4px solid #e74c3c;
|
||||
border-top: 4px solid #e74c3c;
|
||||
}
|
||||
|
||||
.custom-box.critical {
|
||||
color: #fff;
|
||||
background-color: #ff2300;
|
||||
border-left: 4px solid #7b0f1c;
|
||||
border-top: 4px solid #7b0f1c;
|
||||
}
|
||||
|
||||
.custom-box.debug {
|
||||
color: #fff;
|
||||
background-color: #486bbb;
|
||||
border-left: 4px solid #b0bec5;
|
||||
border-top: 4px solid #b0bec5;
|
||||
}
|
||||
|
||||
.custom-box.update {
|
||||
color: #000;
|
||||
background-color: #6eec66;
|
||||
border-left: 4px solid #5ebf58;
|
||||
border-top: 4px solid #5ebf58;
|
||||
}
|
||||
|
||||
.custom-box.question {
|
||||
color: #000;
|
||||
background-color: #f3ff00;
|
||||
border-left: 4px solid #ffdc00;
|
||||
border-top: 4px solid #ffdc00;
|
||||
}
|
||||
|
||||
.custom-box.announcement {
|
||||
color: #000;
|
||||
background-color: #ec00ff;
|
||||
border-left: 4px solid #ec407a;
|
||||
border-top: 4px solid #ec407a;
|
||||
}
|
||||
|
||||
.custom-box.progress {
|
||||
color: #000;
|
||||
background-color: #ede7f6;
|
||||
border-left: 4px solid #7e57c2;
|
||||
border-top: 4px solid #7e57c2;
|
||||
}
|
||||
|
||||
.custom-box.highlight {
|
||||
color: #000;
|
||||
background: linear-gradient(0deg, #f6ef5c 0%, #98ceff 100%);
|
||||
border-left: 4px solid #ff9800;
|
||||
border-top: 4px solid #ff9800;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.box-title {
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
position: relative;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.box-title::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: linear-gradient(to right, #676860, transparent);
|
||||
}
|
||||
|
||||
.box-content {
|
||||
margin-top: -30px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
`;
|
||||
|
||||
// Insérer le style dans le document
|
||||
document.head.insertAdjacentHTML("beforeend", `<style>${customBoxCSS}</style>`);
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"id": "wonderbox",
|
||||
"name": "WonderBox",
|
||||
"version": "1.0.4",
|
||||
"version": "1.0.5",
|
||||
"minAppVersion": "0.12.0",
|
||||
"description": "Create more relevant text sections your tips, top notes, warnings and more.",
|
||||
"author": "Christian Humbert",
|
||||
|
|
|
|||
126
styles.css
Normal file
126
styles.css
Normal file
|
|
@ -0,0 +1,126 @@
|
|||
.custom-box {
|
||||
border-radius: 5px;
|
||||
padding: 15px;
|
||||
margin: 15px 0;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.custom-box.note {
|
||||
color: #000;
|
||||
background-color: #fff;
|
||||
border-left: 4px solid #d1d3c0;
|
||||
border-top: 4px solid #d1d3c0;
|
||||
}
|
||||
|
||||
.custom-box.tip {
|
||||
color: #000;
|
||||
background-color: #e8f5e9;
|
||||
border-left: 4px solid #66bb6a;
|
||||
border-top: 4px solid #66bb6a;
|
||||
}
|
||||
|
||||
.custom-box.info {
|
||||
color: #000;
|
||||
background-color: #e3f2fd;
|
||||
border-left: 4px solid #29b6f6;
|
||||
border-top: 4px solid #29b6f6;
|
||||
}
|
||||
|
||||
.custom-box.warning {
|
||||
color: #000;
|
||||
background-color: #fff8e1;
|
||||
border-left: 4px solid #ffa726;
|
||||
border-top: 4px solid #ffa726;
|
||||
}
|
||||
|
||||
.custom-box.danger {
|
||||
color: #000;
|
||||
background-color: #ffebee;
|
||||
border-left: 4px solid #ef5350;
|
||||
border-top: 4px solid #ef5350;
|
||||
}
|
||||
|
||||
.custom-box.success {
|
||||
color: #000;
|
||||
background-color: #36ff00;
|
||||
border-left: 4px solid #28a745;
|
||||
border-top: 4px solid #28a745;
|
||||
}
|
||||
|
||||
.custom-box.error {
|
||||
color: #fff;
|
||||
background-color: #911a24;
|
||||
border-left: 4px solid #e74c3c;
|
||||
border-top: 4px solid #e74c3c;
|
||||
}
|
||||
|
||||
.custom-box.critical {
|
||||
color: #fff;
|
||||
background-color: #ff2300;
|
||||
border-left: 4px solid #7b0f1c;
|
||||
border-top: 4px solid #7b0f1c;
|
||||
}
|
||||
|
||||
.custom-box.debug {
|
||||
color: #fff;
|
||||
background-color: #486bbb;
|
||||
border-left: 4px solid #b0bec5;
|
||||
border-top: 4px solid #b0bec5;
|
||||
}
|
||||
|
||||
.custom-box.update {
|
||||
color: #000;
|
||||
background-color: #6eec66;
|
||||
border-left: 4px solid #5ebf58;
|
||||
border-top: 4px solid #5ebf58;
|
||||
}
|
||||
|
||||
.custom-box.question {
|
||||
color: #000;
|
||||
background-color: #f3ff00;
|
||||
border-left: 4px solid #ffdc00;
|
||||
border-top: 4px solid #ffdc00;
|
||||
}
|
||||
|
||||
.custom-box.announcement {
|
||||
color: #000;
|
||||
background-color: #ec00ff;
|
||||
border-left: 4px solid #ec407a;
|
||||
border-top: 4px solid #ec407a;
|
||||
}
|
||||
|
||||
.custom-box.progress {
|
||||
color: #000;
|
||||
background-color: #ede7f6;
|
||||
border-left: 4px solid #7e57c2;
|
||||
border-top: 4px solid #7e57c2;
|
||||
}
|
||||
|
||||
.custom-box.highlight {
|
||||
color: #000;
|
||||
background: linear-gradient(0deg, #f6ef5c 0%, #98ceff 100%);
|
||||
border-left: 4px solid #ff9800;
|
||||
border-top: 4px solid #ff9800;
|
||||
}
|
||||
|
||||
.box-title {
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
position: relative;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.box-title::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: linear-gradient(to right, #676860, transparent);
|
||||
}
|
||||
|
||||
.box-content {
|
||||
margin-top: -30px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
Loading…
Reference in a new issue