Orgchart.js

Permet de créer des jolis organigrammes dans SPIP. Ils sont très modulables et interactifs (drap & drop possibles, se plient et se déplient...).

Présentation

Ce plugin permet d’insérer des Organigrammes dans SPIP.

Ce plugin utilise la bibliothèque javascript https://dabeng.github.io/OrgChart/ crée par Xuebin Dong, alias dabeng. Cette librairie est un plugin de Jquery.

Installation

Le plugin s’installe comme n’importe quel plugin SPIP.

Une fois installé, vous pouvez consulter la page de démonstration spip.php?page=demo/orgchartjs. La description du plugin une fois installé et activé vous propose un lien pour ce faire.

Utiliser le modèle

Le plugin introduit un nouveau modèle pour insérer les organigrammes dans vos squelettes...
#MODELE{orgchartjs,param1=...,param2=...}
...ou vos contenus éditoriaux :
<orgchartjs|param1=...|param2=...>

Les démonstrations vous illustrent comment utiliser le modèle qui vous permet :

  • soit d’incorporer vos propres données pour construire votre organigramme,
  • soit de le construire à partir d’un objet (en ligne hiérarchique).

Utilisation du modèle avec vos données.

Le seul paramètre nécessaire est data.

Dans un squelette :

#SET{data,'Emmanuel Macron/Président,Olivier Véran/Ministre/des Solidarités et de la Santé,Cabinet,Raymond LE MOIGN/Directeur de cabinet#Fabrice PERRIN/Conseiller spécial/chargé du secteur médico-social et de la réforme du grand-âge#Thomas DEROCHE/Directeur adjoint/chargé de la santé#Déborah de LIEME/Cheffe de Cabinet,Clément LACOIN/Conseiller/budgétaire et finances sociales#Laëtitia BUFFET/Conseillère#Grégory EMERY/Conseiller#Valérie MAZEAU-WOYNAR/Conseillère#Matthieu LECLERCQ/Conseiller/en charge de l’organisation des soins et chargé de l’exécution des réformes#Ségolène REDON/Conseillère/presse et communication#Margaux BONNEAU/Conseillère/parlementaire#Antoine TESNIERE/Conseiller/en charge du covid-19|Xavier SCHMITT/Plume'}
 
[(#MODELE{orgchartjs,data=#GET{data}})]

Dans un article :

<orgchartjs|idorgchartjs=3|data=chef/Il sait tout,sous-chef/il croit tout savoir, sous-sous chef/il ne sait pas, cheffaillons1/il va demander#cheffaillon2/il va étudier la question#cheffaillons3/il hésite>
Formatage de vos données
SéparateurSigneObjectifEffet
Séparateur de ligne générationnelle , sépare un ascendant d’un descendant séparation des cases verticalement
Séparateur collatéral # sépare un frère ou une soeur séparation des cases sur la même ligne
Remontée hiérarchique ^ ascension d’un élément permet de sortir une case de sa ligne et de la remonter vers une autre ligne
Séparateur des informations d’une case / données du titre/données du texte en dessous permet de donner un contenu textuel aux cases
Option propre au modele utilisé avec des données
ArgumentValeurObjectif
debug true/false permet d’afficher dans les titres des cases concernées le signe de la remontée hiérarchique (^)

Utilisation du modèle avec un objet.

Trois paramètres sont obligatoires. Le paramètre data doit être précisé pour indiquer que l’on transmet un objet. Les deux autres paramètres obligatoires sont ceux précisant l’objet et son identifiant, id_objet.

Dans un squelette :

#MODELE{orgchartjs,
  idorgchartjs=2,
  data=objet,
  objet=article,
  id_objet=1
}

Dans un article :

<orgchartjs|idorgchartjs=2|data=objet|objet=article|id_objet=1>
Options propres au modele utilisé avec des objets
ArgumentValeurEffet
data objet Il est obligatoire de préciser data comme étant de type objet
objet article/rubrique/chat/... Il est obligatoire de préciser le nom de l’objet éditorial que vous allez utiliser
id_objet nombre entier Il est obligatoire de préciser l’identifiant unique de l’objet que vous allez manipuler
partie publique/privee Les objets sont automatiquement présentés avec un lien vous permettant de les voir (si vous en avez l’autorisation). Cet argument permet de préciser si vous souhaitez que la consultation ait lieu en partie publique ou en partie privée.

Le plugin peut utiliser le plugin Déclarer le parent qui vous permettra d’avoir une expérience enrichie de la hiérarchie des objects éditoriaux sous SPIP.

Erreurs fréquentes.

  1. Afficher plusieurs organigrammes dans la même page peut créer des conflits. Pensez à bien donner, dans ce cas, un identifiant unique à votre organigramme avec le paramètre idorgchartjs.
  2. Pensez au mode debug lorsque vous construisez un organigramme complexe. Placé à true, votre organigramme s’affichera avec les signes ^ vous permettant de mieux comprendre les remontées des cases.
  3. Dans la définition par un #SET de vos données, méfiez-vous des apostrophes ’ (char 29). Si besoin, vous pouvez substituer le caractère par l’apostrophe incurvée ’ (char 226).

Amélioration de la partie privée

Une présentation graphique de la hierarchie est substituée par défaut à la présentation textuelle dans la partie privée de SPIP. Cette présentation reprend vos préférences de couleurs.

Il vous sera sans doute agréable de combiner le présent plugin avec le plugin Espace privé fluide qui permet d’avoir un espace de travail plus grand. La feuille de style du présent plugin a été étudiée pour pouvoir utiliser agréablement cet autre plugin.

Configuration

Le plugin installe la librairie Chart Org et rend compatible les feuilles de styles de SPIP et la feuille de style du plugin pour Jquery.

Il vous est possible de paramétrer ces actions selon la partie, privée ou publique, du site.

La configuration permet aussi de désactiver le remplacement de la présentation graphique de la hiérarchie (prévue à la place de la présentation textuelle par défaut de SPIP).

Remerciements

  • Erational pour son inspirant plugin chartjs
  • Têtue pour la limpidité de ses commentaires sur ses lignes de code qui donne envie... de faire de même pour le bonheur des neurones de la communauté.
  • Maïeul sans qui il n’y aurait pas de diffusion de ce plugin à la communauté car il m’a expliqué avec patience notre nouveau Git... et m’a convaincu de faire un MODELE unique facile à utiliser.

C’est une belle famille que celle des écureuils ! Sentez vous libre de participer à l’amélioration de ce plugin.

To do :

  • Un test en environnement multilingue pour voir le bon comportement des chaînes de langue des objets
  • Un meilleur algorithme pour la ligne hiérarchique d’un objet avec le plugin declarerparent. Pour l’instant la ligne se contente d’indiquer le premier parent.

updated on 30 April 2020

Discussion

Aucune discussion

Ajouter un commentaire

Who are you?
  • [Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom