De Hegyd Doc.

Version actuelle en date du 29 juillet 2010 à 08:55

[modifier] 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.

[modifier] Connexion

Via le compte client associé au site ou un compte Admin Viaduc.

[modifier] Fonctionnement général

[modifier] 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.

[modifier] 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ées par les fonctions JS de tout l'éditeur
  • functionsGlobal.js: groupement de fonction utilisés sur toute les interfaces 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.

[modifier] 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. Pour en savoir plus sur le processus coeur de gestion de contenu consultez la page dédiée à la gestion de contenu.

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.

Au niveau de la DOM, des classes et des IDs permettent de reconnaitre chaque bloc et blocObject et d'obtenir ses propriétés, qui sont ensuite enregistré dans l'object lié apres initialisation. Ces propriétés vont conditionner l'affichage des options de modification, suppression... de chaque élément.

[modifier] Les blocs

L'initialisation de chaque bloc se fait via la fonction initBlocs() du fichier Bloc.js. Elle détecte chaque bloc et l'initialise. L'acces a l'objet correspondant a un bloc se fait via getBloc($("selecteur du bloc")).

[modifier] Les blocs Objects (BO)

L'initialisation de chaque blocObject se fait via la fonction initBlocsObjects() du fichier BlocObject.js. Elle détecte la présence de chaque BlocObject et l'initialise. L'accès a l'objet correspondant set fait vie getBO($("selecteur du blocObject")).

[modifier] L'édition des infos de page

L'affichage du formulaire est directement fait a partir du template pageSiteDisplay. Sa dynamisation est réalisée en javascript via l'objet pageHandler, qui gère la modification de ses infos, la suppression de la page courante, et la modification de l'ordre des pages.

[modifier] Edition de styles

[modifier] 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.

[modifier] 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.

[modifier] Choix du modèle

[modifier] 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.

[modifier] 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.

[modifier] Styles personnalisés

Toutes les modifications concernant l'apparence hormis le choix de modèle font partie des styles personnalisés.

[modifier] Définition

Il existent deux type de styles personnalisés, qui servent uniquement a différencier ceux devant être affiché sur la page "Mise en Page" et ceux de la page "Style et polices". Voir le composant StyleProperties pour la définition des différents styles.

[modifier] Affichage HTML

Les styles sont regroupés par élément d'application, et affichés dans le menu de gauche. L'affichage HTML de chacun d'entre eux est régi par la classe coeur ElementForm, qui renvoit le HTML correspondant au type du style, et l'initialise avec sa valeur.

[modifier] Dynamisation javascript

Les méthodes décrites ci dessous sont situées dans le fichier functionsStyle.js.

[modifier] Initialisation

Le méthode initPanelFields() se charge de capturer les évènements déclenchés par les différents items du menu lors de leur modifications (slider, select etc), et déclenche les fonctions de modification associées.

La fonction utilise pour ca un tableau JS de configuration.

Exemple avec le slider :

                ".jsSlider": // selecteur qui cible tous les sliders
                {
                        "slide":function(eventObject,eventData) //liste des evenement a surveiller, avec la fonction qui sera éxécuté lors de leur déclenchement
                        {
                                var elem = $(eventObject.currentTarget).prev("input[type='hidden']"); // on récupère l'élément qui contient la valeur du slider
                                elem.val(eventData.value+$(eventData.handle).parent("div").attr("unit")); //on convertit la valeur brute en valeur CSS (ici valeur brute + unité), qu'on attribut au slider
                                changeProperty(elem,null,null,false); //on lance la procédure de changement de propriété, en envoyant directement l'élément. le false permet d'indiquer qu'on enregistre pas en base, on modifié seulement l'apercu
                        },
                        "slidestop":function(eventObject,eventData)
                        {
                                var elem = $(eventObject.currentTarget).prev("input[type='hidden']");
                                elem.val(eventData.value+$(eventData.handle).parent("div").attr("unit"));
                                changeProperty(elem,null,null,true); // meme procédure, hormis le fait qu'on enregistre la valeur en base
                        }
                },

[modifier] Modification

Lors d'une modification, la fonction changeProperty() est appelée la plupart du temps. Elle a trois roles:

• modifier à la volée le style CSS associé a la propriété modifiée
• l'enregistrement en base de la nouvelle valeur
• déclencher si besoin la modification des propriétés connexes avec changeMasterProperty()(voir chapitre sur les MasterProperty).

Pour savoir sur quelle propriété agir lors de la modification d'un élément donné, la méthode changeProperty() se base sur le tableau javascript fieldsAction. Ce tableau, crée lors de la génération du HTML, contient l'ensemble des élément css modifiables, les propriétés sur lesquelles ils agissent, leur identifiant, et leur valeur lors du chargement de la page.

Pour l'enregistrement en base, on utilise l'identifiant de la propriété et sa valeur.

[modifier] Modification pour les "masterProperty"

Cette phase a lieu dans la fonction changeMasterProperty(), appelée par changeProperty().

Lire au préalable la partie sur les MasterProperties est indispensable à la compréhension de cette partie.

Si on détecte qu'un champ a un attribut masterProperty, alors on va récupérer tous les champs qui ont la meme masterProperty, et leur valeur. On passe ensuite cet ensemble de valeurs a un controleur, qui va se charger de les traiter et retourner les propriétés de styles associées. On applique ensuite ces nouvelles propriétés aux styles de la page.

La spécificité de cette fonction est de rafraichir les valeurs concernant le champs hauteur et largeur. Ces champs seront nécessaire pour la masterProperty de type Background.

[modifier] Preview

Le preview permet d'avoir un apercu dans la version brouillon du site sans les menus, et de surfer de page en page, comme si le site était publié.

[modifier] Edition des infos du site

L'édition des infos du site est diponible via le lien "parametres du site" sur l'éditeur.

Les infos modifiables sont le nom de nom de domaine ,les informations relative a l'utilisateur et sa société, et le métier

[modifier] Nom de domaine

Lors de l'édition, le nom de domaine est modifié au niveau des information du siteClient, mais surtout chez l'enregistrement qui lui est associé chez Viaduc, par le biais de l'API.

[modifier] Infos du métier

Les infos du métiers comprennent:

• les infos client (nom prenom, nom de la société...)
• la sélection du métier lui meme (uniquement disponible pour les pack payants, un métier par défaut est déployé pour les sites démo et les site package gratuit).

Les infos client seront utilisées lors du déploiement du contenu type associé au métiers, afin de personnaliser le contneu (création de google map automatique, champs d'adresse...). Voir la page sur les métiers pour en savoir plus.

[modifier] Publication/Annulation

[modifier] Affichage

Les boutons sont affichés en permanence sur l'éditeur et mode activé ou non activés. Ils sont soit tous les deux activés, soit tous les deux désactivés. Un premier controle est réalisé pour savoir dans quel état on les affiche au moment de la génération de la page. C'est le controler global.php de la partie éditeur qui le checke. et affecte une variable javascript via son tmeplate. L'affichage du bloc de publication est ensuite effectué en javascript via les méthodes contenues dans functionsPublish.js.

[modifier] Actions

Les actions affectées a chacun des deux boutons sont également défini par les méthodes de functionsPublish.js. Voir le processus concernant la publication et l'annulation, pour en savoir plus sur le mécanisme.

[modifier] Publication

La publication a pour effet de recharger le contenu de chaque bloc, et de recharger la feuille de styles personnalisés de l'utilisateur.

[modifier] Annulation

L'annulation a pour effet de recharger le contenu de chaque bloc, de recharger la feuille de style, et de réinitialiser les champs contenus dans les accordéons du menu de gauche dans le cas ou l'on se trouve sur une des pages permettant de modifier les styles.