Warning: Undefined array key "HTTP_ACCEPT_LANGUAGE" in /home/lmc77/sites/up310/plugins/content/up/upAction.php on line 2093

Deprecated: locale_accept_from_http(): Passing null to parameter #1 ($header) of type string is deprecated in /home/lmc77/sites/up310/plugins/content/up/upAction.php on line 2093

Warning: Undefined array key "HTTP_ACCEPT_LANGUAGE" in /home/lmc77/sites/up310/plugins/content/up/upAction.php on line 2093

Deprecated: locale_accept_from_http(): Passing null to parameter #1 ($header) of type string is deprecated in /home/lmc77/sites/up310/plugins/content/up/upAction.php on line 2093

Warning: Undefined array key "HTTP_ACCEPT_LANGUAGE" in /home/lmc77/sites/up310/plugins/content/up/upAction.php on line 2093

Deprecated: locale_accept_from_http(): Passing null to parameter #1 ($header) of type string is deprecated in /home/lmc77/sites/up310/plugins/content/up/upAction.php on line 2093

Warning: Undefined array key "HTTP_ACCEPT_LANGUAGE" in /home/lmc77/sites/up310/plugins/content/up/upAction.php on line 2093

Deprecated: locale_accept_from_http(): Passing null to parameter #1 ($header) of type string is deprecated in /home/lmc77/sites/up310/plugins/content/up/upAction.php on line 2093
Pour aérer et alléger un article, il est souvent utile de masquer du texte ou des images en réservant leur lecture aux personnes intéressées..
🆙 readmore : afficher/cacher un bloc HTML à l'aide d'un bouton 'lire la suite'

Cliquer pour lire la documentation

syntaxe:
{up readmore=texte bouton | textless=replier} contenu caché {/up readmore}
@author: Lomart @version: UP-1.0 @license: GNU/GPLv3 @credit: script de Matt @tags: layout-dynamic
  • readmore: texte bouton OUVRIR (idem textmore)
  • btn-position = after: emplacement des boutons. before=au-dessus, after=au-dessous

Texte et style des boutons

  • textmore = lire la suite: texte bouton OUVRIR
  • textmore-style: classe et style pour le bouton OUVRIR
  • textmore-class: classe et style pour le bouton OUVRIR
  • textless = replier: texte bouton FERMER
  • textless-style: classe et style pour le bouton FERMER
  • textless-class: classe et style pour le bouton FERMER

Style pour le panneau contenu

  • panel-style: classes et style pour le contenu (v2.6)
  • panel-visible: hauteur visible du contenu quand masqué (px ou sélecteur CSS)
  • panel-actif: événement javascript sur la partie visible du contenu pour dérouler/ enrouler le contenu.
  • panel-overlay: affiche un dégradé pour masque le bas du panel-visible. (vide=style standard ou règles CSS)
  • panel-speed: vitesse d'apparition du contenu. Par défaut: 750ms

Style CSS des boutons

  • id: identifiant
  • class = bg-grisPale bg-gris bg-hover-grisClair p1 tc: classe(s) pour les boutons OUVRIR et FERMER
  • style: idem
  • css-head (base-css): règles CSS ajoutées dans le HEAD

Version 2.6
ajout option panel-style pour mettre en évidence le contenu
Version 2.9
ajout options textmore-class et textless-class pour styler le bloc enfant du bouton.
Version 3.1
Nouvelle version de l'action

  • boutons au-dessus ou au-dessous
  • partie visible avec ou sans estompage. Possibilité de dérouler/enrouler par clic ou double-clic
  • vitesse apparition réglable

Utilisation minimaliste

{up readmore}
... le contenu masqué ...
{/up readmore}

affiche ce bouton sur toute la largeur de l'article qui permet d'afficher un contenu masqué.

... le contenu masqué ...

Avec des options

+ Cliquer pour voir toutes les options+ c'est super, j'ai tout compris.
Options Commentaires
readmore le libellé du bouton quand le contenu est masqué
btn-position v3.1 emplacement des boutons. before=au-dessus, after=au-dessous
textmore le libellé du bouton pour afficher le contenu
textmore-class
textmore-style
classe(s) et stylle inline pour personnaliser séparément les boutons more et less
textless le libellé du bouton quand le contenu est visible *
textless-class
textless-style
classe(s) et stylle inline pour personnaliser séparément les boutons more et less
panel-style classe(s) et style pour mettre en évidence le contenu (v2.6)
panel-visible v3.1 la hauteur de la partie toujours visible du contenu peut-être définie par:
  • une dimension en pixel
  • le sélecteur CSS de la partie visible. exemple: #visible. Si le sélecteur est invalide, aucune partie ne sera visible.
panel-overlay v3.1 affiche un dégradé pour masque le bas du panel-visible. vide=style standard ou règles CSS. Ex: linear-gradient(to bottom, transparent, #999)
panel-speed v3.1 vitesse d'apparition du contenu en millisecondes
panel-actif v3.1 événement javascript sur la partie visible du contenu pour dérouler/ enrouler le contenu.
Les arguments acceptés sont : click, dblclick, mouseenter.
Note : pour éviter qu'un double-clic sélectionne le texte, vous pouvez ajouter cette règle dans l'option css-head : #id .uprm-panel[user-select:none]
class
style
classe(s) et style(s) inline pour personnaliser le bloc contenant les 2 boutons.
Par défaut, pour compatibilité avec la version précédente de cette action : bg-grisPale bg-gris bg-hover-grisClair p1 tc
Pour les annuler, il suffit d'ajouter l'option class sans argument
css-head des règles CSS personnalisées.
Pour cibler un élément du readmore courant, utilisez #id.
les classes internes sont : uprm-panel, uprm-overlay, uprm-btns, uprm-btn-more, uprm-btn-less

Le tableau ci-dessus vous renseigne sur le rôle des options du shortcode utilisé ci-dessus.  Il peut vous sembler compliqué, mais sachez que outre le fait de montrer les options en situation, je doit donner à manger aux utilisateurs fous qui s'amusent à pousser UP à fond.

{up readmore
| btn-position=before
| textmore=[span style="color:green"]+[/span] {up lang | fr=Cliquer pour voir toutes les options | en=Click to see all options}
| textmore-class=b
| textless=[span style="color:red;transform:rotate(45deg)"]+[/span] {up lang | fr=c'est super, j'ai tout compris. | en=that's great, i got it.}
| textless-class=t-gris
| panel-style=bd-gris
| panel-visible=#tbl-options thead
| panel-speed=4000
| panel-overlay
| panel-actif=DblClick
| class
| css-head=#id .uprm-btns span span[width:2rem; display: inline-block; font-weight:bolder; line-height=1; font-size:3rem]
}{up csv2table | id=tbl-options | model=blue | col-style-1=font-weight:bold | header=Options;Commentaires}
------------ le contenu de la table au format CSV ------------
{/up csv2table}{/up readmore}

2 - les boutons seront placés au-dessus du contenu. 
3 - le texte du bouton est composé d'un symbole dans un bloc span + un texte dans la langue du visiteur grâce à l'action lang
4 - le style spécifique du bouton "more" est ajouté ici. Notez que le style pour la partie entre span est géré par l'option css-head
5 & 6 - idem pour le texte et style du bouton less.
7 - juste une bordure grise autour du contenu
8 - pour voir les entêtes des colonnes lorsque le panneau est replié, j'indique le sélecteur CSS du header de la table. Notez en ligne 14 que je force l'id de la table. J'aurais pu indiquer une dimension en pixels
9 - pour la démo, je fixe la durée d'apparition du panneau sur 4 secondes
10 - pour ajouter un dégradé basique sur la partie visible du contenu, il suffit de mentionner cette option.
11 - j'ajoute la possibilité de déplier le contenu en double-cliquant sur la partie visible du contenu
12 - la mention sans argument de class me permet d'annuler le style par défaut des boutons
13 - css-head spécifie le style pour la partie entre span des boutons more et less
14 à 16  - la création du contenu. Notez que les shortcodes sont sur la même ligne pour éviter d'avoir des lignes blanches au final. Le fait que les options d'un shortcode soient sur plusieurs lignes ne pose aucun problème.

Un exemple concret

Au début des démos, j'utilise cette action pour afficher le bouton "Voir les nouveautés"

Pour simplifier et généraliser cet usage, j'ai ajouté un prefset au fichier prefs.ini du dossier custom de l'action readmode (plus d'infos)

[changelog]
class="tr"
textmore="Voir les nouveautés" 
textmore-class="bd-primary bd-arrondi ph1" 
panel-style="box bg-beige p1 m-child-raz"
  • Le contenu de la barre read-more est aligné à droite par la tr dans l'option class qui cible le conteneur. 
  • Pour éviter que le bouton utilise toute la largeur du bloc parent, le style est attribué à l'option textmore-class.
    J'utilise des classes UP, mais un style inline est accepté à condition de les séparer avec des points-virgule.
  • Panel-style définit le bloc avec le contenu caché.

Astuce

Si vous me posiez la question : "Pourquoi avoir des options style et class qui acceptent les mêmes arguments (classes et styles inline)"

Si je voulais exceptionnellement avoir un texte rouge pour le bouton textmore.
Comme c'est la dernière définition qui l'emporte, je dois reprendre tous les arguments de textmore-class du prefset + un t-rouge.
Ou plus simplement utiliser l'option textmore-style inutilisée pour ajouter une classe t-rouge.

Pour info, cette page utilise 17 action(s) :
span (6) upactionslist (1) readmore (2) csv2def (1) readmore