+ + \ No newline at end of file diff --git a/App/Package/Core/Views/Theme/Editor/config-theme.readme.md b/App/Package/Core/Views/Theme/Editor/config-theme.readme.md new file mode 100644 index 00000000..14a212a2 --- /dev/null +++ b/App/Package/Core/Views/Theme/Editor/config-theme.readme.md @@ -0,0 +1,125 @@ +# 📄 Documentation de configuration des thèmes (EditorMenu) + +Ce fichier permet de définir dynamiquement les options de personnalisation d'un thème via l'éditeur visuel. +Chaque menu (EditorMenu) contient un groupe de valeurs (EditorValue), affichables dans le builder et modifiables en live. + +--- + +## 🔖 Structure générale + +```php +new EditorMenu( + title: 'Nom affiché dans l’UI', + key: 'identifiant_unique', + scope: 'chemin/url/optionnel', + requiredPackage: 'NomDuPackage' // ou null + values: [EditorValue(...), ...] +) +``` + +Chaque `EditorValue` définit une clé, un type, une valeur par défaut, et parfois des options (ex: select ou range). + +--- + +## 💡 Types disponibles + +| Type | Constante | Description | +|--------------|---------------------------|-----------------------------------------------------------------------------| +| Texte | `EditorType::TEXT` | Champ de texte libre | +| Zone de texte| `EditorType::TEXTAREA` | Texte multilignes | +| Nombre | `EditorType::NUMBER` | Nombre sans unité | +| Booléen | `EditorType::BOOLEAN` | Case à cocher (on/off) | +| Couleur | `EditorType::COLOR` | Picker de couleur | +| Image | `EditorType::IMAGE` | Upload et prévisualisation d’image | +| CSS libre | `EditorType::CSS` | Zone personnalisable CSS | +| Liste | `EditorType::SELECT` | Menu déroulant avec options définies | +| Curseur | `EditorType::RANGE` | Slider personnalisable (avec min, max, step, prefix/suffix) | + +--- + +## 🎨 Exemples d'utilisation dans les vues + +### 🔍 Remplacer un texte dynamiquement +```html +

+``` + +### 🌈 Appliquer une couleur dynamique +```html + +``` + +### 🖌️ Appliquer des classes dynamiques (ex: font, layout) +```html + +``` + +### 🚀 Gérer un attribut dynamique (ex: image) +```html + +``` + +### 📉 Afficher ou masquer un bloc +```html +
...
+``` + +--- + +## 🔄 Exemple complet : Menu Global +```php +new EditorMenu( + title: 'Globaux', + key: 'global', + scope: null, + requiredPackage: null, + values: [ + new EditorValue( + title: 'Police', + themeKey: 'main_font', + defaultValue: 'font-montserrat', + type: EditorType::SELECT, + selectOptions: [ new EditorSelectOptions(value: 'font-angkor', text: 'Angkor'), ... ] + ), + new EditorValue( + title: 'Image du site', + themeKey: 'site_image', + defaultValue: 'Config/Default/Images/logo.png', + type: EditorType::IMAGE + ), + new EditorValue( + title: 'Taille image', + themeKey: 'site_image_width', + defaultValue: '40', + type: EditorType::RANGE, + rangeOptions: [ new EditorRangeOptions(0, 256, 1, '', 'px') ] + ), + new EditorValue( + title: 'ALT Image', + themeKey: 'image_alt', + defaultValue: 'logo.png', + type: EditorType::TEXT + ) + ] +) +``` + +--- + +## 🌍 Utilisation dans les fichiers de thème + +- Les valeurs sont injectées automatiquement via `View::replaceThemeValues()` en public +- En mode éditeur, les attributs `data-cmw-*` permettent une mise à jour live avec JS + +--- + +## 📚 Bonnes pratiques + +- Toujours garder des `themeKey` uniques par menu +- Utiliser des `prefix/suffix` pour les classes et unités CSS dans les sliders +- Prévoir des valeurs par défaut réalistes pour chaque champ +- Garder une logique prévisible pour le builder (polices, couleurs, tailles, visibilité) + +--- + +> ✉️ Pour toute extension ou suggestion : pensez à documenter les nouveaux types ou comportements dans ce fichier. \ No newline at end of file diff --git a/App/Package/Core/Views/Theme/Editor/data-cmw.readme.md b/App/Package/Core/Views/Theme/Editor/data-cmw.readme.md new file mode 100644 index 00000000..1757b942 --- /dev/null +++ b/App/Package/Core/Views/Theme/Editor/data-cmw.readme.md @@ -0,0 +1,54 @@ +# ✨ Utilisation de `data-cmw` + +Cette documentation résume toutes les possibilités offertes par le système `data-cmw` pour créer des thèmes dynamiques, compatibles avec l'éditeur visuel du CMS. + +--- + +## 📄 Attributs disponibles + +| Attribut HTML | Syntaxe | Description | Exemple | +|---------------------------|-----------------------------------------------|-------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------| +| `data-cmw` | `menu:key` | Remplace le contenu textuel (`textContent`) de l'élément | `` → `Mon Site` | +| `data-cmw-attr` | `attribut:menu:key [...]` | Modifie un ou plusieurs attributs HTML (`src`, `href`, `alt`, etc.) | `` | +| `data-cmw-style` | `propriété:menu:key [...]` | Applique dynamiquement un ou plusieurs styles CSS (avec gestion de `url()`) | `
` → `style="background-image: url(...)"` | +| `data-cmw-class` | `menu:key [...]` | Ajoute dynamiquement une ou plusieurs classes CSS | `` → `font-montserrat px-2` | +| `data-cmw-visible` | `menu:key` | Affiche ou masque l'élément selon une valeur booléenne | `
` | +| `__CMW:menu:key__` | `__CMW:menu:key__` | Remplace dynamiquement dans les scripts JS / JSON | `const max = __CMW:game:max_players__` | + +--- + +## 🧠 Règles intelligentes de transformation automatique + +| Type de valeur dans la config | Traitement automatique | +|-------------------------------|------------------------------------------------------------| +| `#ffffff` ou `red` | Utilisé directement pour les propriétés de couleur | +| `https://...` | Converti automatiquement en `url('...')` pour les backgrounds | +| `font-montserrat` | Utilisé tel quel comme class CSS | +| `0`, "0" ou `""` | Cache les éléments avec `data-cmw-visible` | + +--- + +## 📆 Exemple complet d'utilisation + +```html +
+

+
+``` + +--- + +## 💡 Bonnes pratiques + +- Toujours préfixer les valeurs dans `configValues` avec `menu_key`, exemple : `site_title` dans le menu `header` +- Prévoir des valeurs par défaut pour chaque champ configuré dans le thème + +--- + +Pour toute extension de ce système, pensez à respecter la convention `data-cmw-*` afin de garantir la compatibilité avec le builder dynamique. + diff --git a/App/Package/Core/Views/Theme/Editor/template.php b/App/Package/Core/Views/Theme/Editor/template.php new file mode 100644 index 00000000..5a32c194 --- /dev/null +++ b/App/Package/Core/Views/Theme/Editor/template.php @@ -0,0 +1,100 @@ + + + +getValue('DIR') . 'Admin/Resources/Views/Includes/head.inc.php'); + +/* INCLUDE SCRIPTS / STYLES */ +/* @var $includes */ +/* @var $content */ +View::loadInclude($includes, 'beforeScript'); +View::loadInclude($includes, 'styles'); + +include_once (EnvManager::getInstance()->getValue('DIR') . 'App/Package/Core/Views/Theme/Editor/Includes/header.inc.php'); + +echo $content; + +include_once (EnvManager::getInstance()->getValue('DIR') . 'App/Package/Core/Views/Theme/Editor/Includes/footer.inc.php'); +/* INCLUDE SCRIPTS */ +View::loadInclude($includes, 'afterScript'); +?> + + + + \ No newline at end of file diff --git a/App/Package/Core/Views/Theme/Editor/themeManage.admin.view.php b/App/Package/Core/Views/Theme/Editor/themeManage.admin.view.php new file mode 100644 index 00000000..316ad1ef --- /dev/null +++ b/App/Package/Core/Views/Theme/Editor/themeManage.admin.view.php @@ -0,0 +1,700 @@ +values as $value) { + $key = $menu->key . '_' . $value->themeKey; + + $editorSettings[$key] = [ + 'default' => $value->defaultValue, + 'type' => $value->type, + ]; + + if ($value->type === EditorType::RANGE && isset($value->rangeOptions[0])) { + $range = $value->rangeOptions[0]; + $editorSettings[$key]['prefix'] = $range->getPrefix(); + $editorSettings[$key]['suffix'] = $range->getSuffix(); + $editorSettings[$key]['min'] = $range->getMin(); + $editorSettings[$key]['max'] = $range->getMax(); + $editorSettings[$key]['step'] = $range->getStep(); + } + } +} + +Website::setTitle(LangManager::translate('core.theme.manage.title', ['Theme' => ThemeLoader::getInstance()->getCurrentTheme()->name()])); +Website::setDescription(LangManager::translate('core.theme.manage.description')); + +?> +
+ +
+ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/App/Package/Core/Views/Theme/market.admin.view.php b/App/Package/Core/Views/Theme/market.admin.view.php index cd0ce012..a0132a63 100644 --- a/App/Package/Core/Views/Theme/market.admin.view.php +++ b/App/Package/Core/Views/Theme/market.admin.view.php @@ -1,6 +1,7 @@ - isThemeInstalled($theme['name'])): ?> + isThemeInstalled($theme['name'])): ?>

diff --git a/App/Package/Core/Views/Theme/themeManage.admin.view.php b/App/Package/Core/Views/Theme/themeManage.admin.view.php deleted file mode 100644 index e1a0c036..00000000 --- a/App/Package/Core/Views/Theme/themeManage.admin.view.php +++ /dev/null @@ -1,159 +0,0 @@ - ThemeManager::getInstance()->getCurrentTheme()->name()])); -Website::setDescription(LangManager::translate('core.theme.manage.description')); -?> - -
-

getCurrentTheme()->name() ?>

-
- -
- -
-
-
- -
-
- insertHiddenToken() ?> -
- getCurrentThemeConfigFile(); ?> -
-
-
- - - - - - \ No newline at end of file diff --git a/App/Package/Core/Views/Theme/themes.admin.view.php b/App/Package/Core/Views/Theme/themes.admin.view.php index 44da60c4..33efc291 100644 --- a/App/Package/Core/Views/Theme/themes.admin.view.php +++ b/App/Package/Core/Views/Theme/themes.admin.view.php @@ -3,7 +3,10 @@ use CMW\Manager\Env\EnvManager; use CMW\Manager\Lang\LangManager; use CMW\Manager\Security\SecurityManager; +use CMW\Manager\Theme\File\ThemeFileManager; use CMW\Manager\Theme\IThemeConfig; +use CMW\Manager\Theme\Loader\ThemeLoader; +use CMW\Manager\Theme\Market\ThemeMarketManager; use CMW\Manager\Theme\ThemeManager; use CMW\Utils\Website; @@ -21,7 +24,7 @@ - getLocalThemes() as $theme): ?> + getLocalThemes() as $theme): ?> name() === $currentTheme->name()): ?>
@@ -43,7 +46,7 @@
img
@@ -68,13 +71,13 @@ class="btn-primary-sm"> + class="btn btn-sm btn-warning"> $theme->name()]) ?>