SP:Part:Editeur
De Hegyd Doc.
(→Choix du modèle) |
(→Choix du modèle) |
||
| Ligne 70 : | Ligne 70 : | ||
=== Choix du modèle === | === Choix du modèle === | ||
| - | Le choix du [[SP:Composant: | + | ==== Affichage des choix ==== |
| + | |||
| + | Le choix du [[SP:Composant:SiteModel|modèle]] se fait selon deux options: | ||
* la mise en page du header (combo header et menu d'entete) | * la mise en page du header (combo header et menu d'entete) | ||
* la mise en page de la partie centrale de la page (menus et contenu) | * la mise en page de la partie centrale de la page (menus et contenu) | ||
| Ligne 78 : | Ligne 80 : | ||
Cette relation est établie grace au fichier de configuration '''conf/models.php'''. | Cette relation est établie grace au fichier de configuration '''conf/models.php'''. | ||
Ce fichier de config définit la liste des possibilités pour chaque option, et un tableau permet de récupérer l'identifiant du model associé a un couple d'option. | Ce fichier de config définit la liste des possibilités pour chaque option, et un tableau permet de récupérer l'identifiant du model associé a un couple d'option. | ||
| + | |||
| + | ==== Application du modèle ==== | ||
| + | |||
| + | A chaque changement établi dans l'un des deux accordéons, un appel ajax permet d'enregistrer le choix, et la feuille de style du nouveau modèle est chargée à la volée. | ||
| + | Ces actions sont défini et associées aux éléments de la page dans le fichier ''initMEP.js''. | ||
=== Styles personnalisés=== | === Styles personnalisés=== | ||
Version du 8 juillet 2010 à 14:30
Sommaire |
Editeur
URL: http://site-xxxx.creation-site-web.fr/editeur/ OU http://domain.tld/editeur/
L'éditeur est l'application web qui permet d'éditer son site web.
Connexion
Via le compte client associé au site ou un compte Admin Viaduc.
Fonctionnement général
Philosophie
Le but de l'éditeur est d'en faire un outil orienté WYSIWYG. Chaque action entreprise ne doit regénérer entièrement la page seulement si c'est indispensable (changement de page pour l'édition, changement de type d'édition).
Ainsi chaque action déclenche si besoin l'action d'un controler en AJAX, pour enregistrer les modifications ou récupérer des informations via la BD, et d'un panel de fonctions destiné a modifier l'affichage en fonction de l'action entreprise.
Javascript
arborescence des fichiers javascripts de l'éditeur, a partir du répertoire www/js.
- /: contient les constructueur de différents éléments de formulaires et autre plugin. Les fichiers sont de la form construct{elem}.js
- /editeur/: fichiers propres à l'éditeur
- base64.js: librairie utilisé pour encoder en base 64
- Bloc.js: classe permettant de gérer les blocs
- BlocObject.js: classe permettant de gérer les blocObjects
- ColorPaletteEditor.js: classe gérant les palette de couleurs (uniquement pour l'éditeur de thème)
- CraftEditor.js: classe gérant les métiers (uniquement pour l'éditeur de métier)
- EditorTooltip: classe gérant les tooltip affichées sur l'éditeur.
- functionsDisplay.js: groupemenet de fonctions dédié a l'affichage (boutons patienter, messages d'erreur...)
- functionsGeneric.js: groupement de fonction génériques utilisé sur toute les interface de l'éditeur
- functionsPublish.js': groupement de fonctions dédiées à la publication
- functionsStyle.js': groupement de fonctions dédiées a la gestion des styles
- init.js: appelé sur toutes le spages de l'éditeur: initialisation de base
- initColorPaletteMode.js: initialisation sur les pages de gestion des palettes de couleurs (uniquement pour l'éditeur de thème)
- initContentEditor.js: initialisation de 'linterface de gestion de contenu
- initCraftMode.js: initialisation du gestionnaire de métier (pour l'éditeur de métier)
- initMEP.js : initialisation pour l'interface de gestion de mise en page
- initStyles.js : initilisation pour les interfaces jouant sur les styles
- initTheme.js : initialisation pour l'interface de gestion de thèmes
- initThemeMode.js : initialisation pour l'interface de gestino de thèmes (pour l'éditeur de thème)
- pageHandler.js : classse permettant de gérer l'object page
- Scroller.js : plugin jQuery qui affiche un scroller si besoin dans le menu de gauche
- siteHandler.js : classe gérant l'objet site
- ThemeEditor.js : classe gérant l'éditeur de thème
- ThemeHandler.js : classe gérant les thèmes
Pour voir précisément quel fichier est inclus sur quel page, voir le fichier de configuration du gestionnaire d'inclusion.
Edition de contenu
L'édition de contenu se fait page par page. Pour chaque page, on découpe le contenu par bloc. Chaque bloc contient ensuite des blocObjects.
Les blocs et blocObject sont dynamisés par javascript. Chaque action effectuée sur un bloc ou un blocObject nécessitant un recours ou un traitement spécifique utilise AJAX.
Edition de styles
Choix du theme / palette de couleur
C'est l'objet ThemeHandler qui se charge de dynamiser le bouton de choix de thème pour afficher la popup de choix, et d'enregistrer le choix si l'utilisateur valide.
Changement de theme/Palette de couleur
Une fois l'enregistrement en BD effectué (changement de thème et/ou palette de couleur + application des nouvelles propriétés de style), on recharge la CSS du modèle, les coins arrondis (pour s'adapter aux nouvelles couleurs, si besoin est), et pour finir la feuille de style personnalisée.
Choix du modèle
Affichage des choix
Le choix du modèle se fait selon deux options:
- la mise en page du header (combo header et menu d'entete)
- la mise en page de la partie centrale de la page (menus et contenu)
Une mise en page de header + mise en page partie centrale = model.
Cette relation est établie grace au fichier de configuration conf/models.php. Ce fichier de config définit la liste des possibilités pour chaque option, et un tableau permet de récupérer l'identifiant du model associé a un couple d'option.
Application du modèle
A chaque changement établi dans l'un des deux accordéons, un appel ajax permet d'enregistrer le choix, et la feuille de style du nouveau modèle est chargée à la volée. Ces actions sont défini et associées aux éléments de la page dans le fichier initMEP.js.
