[SPIP Zone] Texte dépliant - idée pour un plugin ?

Bonsoir,

Je me suis rendu compte qu'il serait utile que des auteurs puissent eux-mêmes insérer du texte "dépliant" dans des articles comme celui-ci :
http://new.taize.fr/en_article5191.html

La solution que j'ai trouvé jusqu'à maintenant utilise le plugin accordion pour jquery.

L'utilisateur doit juste taper les textes de cette manière, à l'intérieur d'un div "accordion" :

-----

<div class="accordion">

{{{Titre 1}}}
<div>Texte dépliant ...</div>

{{{Titre 2}}}
<div>Encore un texte dépliant ...</div>

</div>

-----

Ce n'est pas trop difficile, mais peut-être cela pourrait être encore simplifié pour les auteurs ?

Est-ce que quelqu'un a déjà réalisé quelque chose de semblable ? Est-ce que ce serait éventuellement encore une lame pour le couteau suisse ?

Paolo

Paolo a écrit :

Bonsoir,

Je me suis rendu compte qu'il serait utile que des auteurs puissent eux-mêmes insérer du texte "dépliant" dans des articles comme celui-ci :
http://new.taize.fr/en_article5191.html
  
J'ai vu ca une fois sur le site bakchich

Pour réaliser cela, ils utilisent les "encadrés" de la barre typo écolo pour délimiter le texte à traiter

[(
le texte de l'encadré ici
)]

On doit pouvoir obtenir le meme résultat avec les <quote> </quote> standards de spip.

Le but du jeu est en fait de marquer dans le html généré par spip la partie à encadrer / deplier. De là, une simple commande jQuery dans le <head> de la page HTML permet de réaliser l'effet de dépliage.

$(".texteencadre-spip p").hide();
   $(".texteencadre-spip").click(function(event){
  $(this).children("p").slideToggle();

});

BoOz

BoOz a écrit :

Paolo a écrit :

Bonsoir,

Je me suis rendu compte qu'il serait utile que des auteurs puissent eux-mêmes insérer du texte "dépliant" dans des articles comme celui-ci :
http://new.taize.fr/en_article5191.html
  
J'ai vu ca une fois sur le site bakchich

Bakchich

Pour réaliser cela, ils utilisent les "encadrés" de la barre typo écolo pour délimiter le texte à traiter

[(
le texte de l'encadré ici
)]

en fait, c'est un besoin réel de pouvoir définir des styles persos dans un article, je l'utilise ici
http://www.upsti.ens-cachan.fr/serv3/spip.php?article1 (style notes et Questions)

pour ceal, j'ai détournée une des lames du couteau suisse, le plugin décoration, en rajoutant ces balises dans le code

une idée de nouvelle lame, se serait une lame qui permettent d'introduire de nouveaux styles sans avoir à coder

A+

On doit pouvoir obtenir le meme résultat avec les <quote> </quote> standards de spip.

Le but du jeu est en fait de marquer dans le html généré par spip la partie à encadrer / deplier. De là, une simple commande jQuery dans le <head> de la page HTML permet de réaliser l'effet de dépliage.

$(".texteencadre-spip p").hide();
   $(".texteencadre-spip").click(function(event){
  $(this).children("p").slideToggle();

});

BoOz

rpapa a écrit :

en fait, c'est un besoin réel de pouvoir définir des styles persos dans un article, je l'utilise ici
http://www.upsti.ens-cachan.fr/serv3/spip.php?article1 (style notes et Questions)

pour ceal, j'ai détournée une des lames du couteau suisse, le plugin décoration, en rajoutant ces balises dans le code

une idée de nouvelle lame, se serait une lame qui permettent d'introduire de nouveaux styles sans avoir à coder

Oui, c'est une idée que j'avais aussi, tout comme je l'ai fait pour les balises de couleur.
Il faudrait donc passer cette configuration de styles directement en variable.
Pat

Pat wrote:

rpapa a écrit :

BoOz wrote:

Merci pour toutes ces réponses ! D'après les infos que BoOz a donné, ce que j'ai fait là peut être mieux fait et plus simplement. Je vais continuer à creuser de ce côté.

Pat écrit :
> tout comme je l'ai fait pour les balises de couleur.

Oui, c'était justement cela que je regardais avec intérêt.

Une lame polyvalente de raccourcis ... tiens l'autre couteau suisse y est arrivé déjà : Victorinox France | Victorinox Homepage

Paolo

Paolo a écrit :

Merci pour toutes ces réponses ! D'après les infos que BoOz a donné, ce que j'ai fait là peut être mieux fait et plus simplement. Je vais continuer à creuser de ce côté.

Pat écrit :
> tout comme je l'ai fait pour les balises de couleur.

Oui, c'était justement cela que je regardais avec intérêt.

Une config à taper à la main sur la page de configuration pourrait peut-être convenir comme ceci :

  span.souligne = text-decoration:underline;
  span.fluo = background-color:#ffff00; padding:0px 2px;
  surfluo = fluo
  div.note = background-color:yellow; border:5px solid yellow; color:red; float:right; padding:5px; width:30%;

Ainsi, <fluo>toto</fluo> serait remplacé par :
  <span class="csdeco_fluo">toto</span>
  avec le style suivant :
  span.csdeco_fluo {background-color:#ffff00; padding:0px 2px;}

Ainsi, <note>toto</note> serait remplacé par :
  <div class="csdeco_note">toto</div>
  avec le style suivant :
  div.csdeco_note {background-color:yellow; border:5px solid yellow; color:red; float:right; padding:5px; width:30%;}

Une lame polyvalente de raccourcis ...

Ca serait de rôle de "decoration" qui s'occupe déjà de balises à chevrons, pour l'instant fixes : cs, souligne, barre, dessus, clignote, fluo, surfluo, surgris. "couleurs" s'occupe de balises à crochets, fixes ou définies par le webmaster...

La rapidité du traitement ne serait pas affecté par l'introduction de balises configurables à la volée, car le couteau suisse peut tout compiler à l'avance (voir "couleurs").

... tiens l'autre couteau suisse y est arrivé déjà : Victorinox France | Victorinox Homepage

bien vu ;-))

Pat

Pat a écrit :

rpapa a écrit :

en fait, c'est un besoin réel de pouvoir définir des styles persos dans un article, je l'utilise ici
http://www.upsti.ens-cachan.fr/serv3/spip.php?article1 (style notes et Questions)

pour cela, j'ai détournée une des lames du couteau suisse, le plugin décoration, en rajoutant ces balises dans le code

Je tiens à préciser (surtout pour la personne à laquelle je pense...) que l'outil "decoration" a été une idée originale de IZO (Mathieu Drouet).
Des balises de style configurables vont donc bientôt lui être ajoutées.
Pat

BoOz wrote:

une simple commande jQuery dans le <head> de la page HTML permet de réaliser l'effet de dépliage.

Oui, BoOz, en effet - ça marche. Merci beaucoup !

- pas besoin du plugin Accordion ;
- en effet slide plaisant ;
- une syntaxe plus simple pour le rédacteur.

jQuery est vraiment étonnant !

Paolo

Paolo a écrit :

Une lame polyvalente de raccourcis ... tiens l'autre couteau suisse y est arrivé déjà : Victorinox France | Victorinox Homepage

Voila, j'ai modifié l'outil "décoration" pour qu'on puisse définir n'importe quelle balise de style, en <span> ou en <div>.
Version du plugin : 1.7.8.00

Pat

Paolo a écrit :

Bonsoir,

Je me suis rendu compte qu'il serait utile que des auteurs puissent eux-mêmes insérer du texte "dépliant" dans des articles comme celui-ci :
http://new.taize.fr/en_article5191.html

La solution que j'ai trouvé jusqu'à maintenant utilise le plugin accordion pour jquery.

L'utilisateur doit juste taper les textes de cette manière, à l'intérieur d'un div "accordion" :

-----

<div class="accordion">

{{{Titre 1}}}
<div>Texte dépliant ...</div>

{{{Titre 2}}}
<div>Encore un texte dépliant ...</div>

</div>

-----

Ce n'est pas trop difficile, mais peut-être cela pourrait être encore simplifié pour les auteurs ?

Est-ce que quelqu'un a déjà réalisé quelque chose de semblable ? Est-ce que ce serait éventuellement encore une lame pour le couteau suisse ?

Paolo

J'ai eu besoin de la même chose.. Du coup, j'ai ajouté une lame au couteau suisse.
J'ai pensé simplifier à l'extrême :

<bloc>
un titre qui deviendra cliquable

le texte après deux sauts de ligne...
</bloc>

Deux autres balises existent aussi : <visible> et <invisible> (alias de <bloc>, qui cache le texte par défaut)

Qu'en penses-tu ?
Pat

<bloc>
Qu'en penses-tu ?
Pat

Pat,

Je regarderai dès que je pourrai (des urgences ici en ce moment...).

Mais déjà je m'en sortais bien avec le nouvel outil décoration pour faire cette page : http://www.taize.fr/en_article5267.html

avec une explication pour les auteurs ici :
http://www.taize.fr/en_article5276.html

Poalo

Paolo a écrit :

Mais déjà je m'en sortais bien avec le nouvel outil décoration pour faire cette page : http://www.taize.fr/en_article5267.html

Oui, ça marche très bien effectivement... La lame que je propose est beaucoup plus simple puisqu'elle n'ajoute aucune bibliothèque (accordeon.js par exemple). Elle utilise le jQuery d'origine de SPIP. Bon bien, sûr c'est du show/hide de base, mais ya peut-être pas besoin de tous les slide et cie...

De plus, je propose à la fois un raccourci <bloc></bloc> très simple pour les rédateurs, mais aussi des balises à ajouter dans le squelette si on veut bénéficier aussi de ces blocs repliables.
Les petits triangles utilisés sont maintenant surchargeables dans le squelette.

avec une explication pour les auteurs ici :
Folding text

tu es sûr du lien ?

Pat