Nouveautés de la version 1.7

Nouveaux concepts

Shortcodes imbriqués

Une grande nouveauté est la possibilité d'inclure un shortcode dans un autre. Cela permet aux actions de s'entraider. Un exemple :

{up readmore={up icon=plus} Ouvrir}

Aide à la saisie (prefset)

Jusqu'à présent, il était possible de définir les options par défaut dans le fichier custom/prefs.ini.
Il est maintenant possible de définir des jeux d'options.
Au lieu de saisir des tas de code, le rédacteur doit juste indiquer le mot-clé défini par le webmaster.

{up jnews=8,17
 | maxi=8
 | image-src=images/css/news.jpg
 | main-tag=0
 | item-tag=0}
<div class="fg-row fg-gap bd-bleu bd0 bdb1"><div class="fg-c2 fg-cs2">{image}</div><div class="fg-c10 fg-cs10"><h4 class="lh80 mv0 pv0 notoc">{title}<br><small>{subtitle}</small></h4><p class="pt1">{intro-text,200}</p><p class="fs80 mb0 "><a href="/{link}" class="float-right fs120 b pr1">Lire la suite</a> crée le {date-crea} par {author}</p></div></div>
{/up jnews}

{up jnews=8,17 | prefset=compact}

[compact]
maxi="8"
image-src="images/css/news.jpg"
main-tag="0"
item-tag="0"
template="<div class=\"fg-row fg-gap bd-bleu bd0 bdb1\"><div class=\"fg-c2 fg-cs2\">{image}</div><div class=\"fg-c10 fg-cs10\"><h4 class=\"lh80 mv0 pv0 notoc\">{title}<br><small>{subtitle}</small></h4><p class=\"pt1\">{intro-text,200}</p><p class=\"fs80 mb0 \"><a href=\"{link}\" class=\"float-right fs120 b pr1\">Lire la suite</a> crée le {date-crea} par {author}</p></div></div>"

Cette possibilité est incluse dans le noyau de UP. Toutes les actions en bénéficient, même si l'option prefset n'est pas indiquée dans sa doc.
Il est aussi possible de mettre le prefset comme argument principal de l'action. Il suffit d'écrire {up hr=i-love-up} pour obtenir la ligne horizontale ci-dessous.

Saisie CSS

Pour saisir une règle CSS, il faut utiliser des crochets à la place des traditionnelles accolades. Cela interdisait la saisie de crochets pour définir les sélecteurs. Il est maintenant possible d'échapper les crochets avec un antislash. exemple :

{up addcsshead=\[test="foo"\] li:nth-of-type(odd)[color:red]}

Filter

Filter : le fait d'inclure des shortcodes dans des shortcodes, mais surtout d'analyser les enfants avant les parents bloque les capacités de filtrage de l'action filter pour toutes les actions qui effectuent une action immédiate. Pour ces dernières, une option filter a été ajoutée. Elle reprend les fonctionnalités de l'action de même nom

{up corner=up-site | bgcolor=yellow | color=darkred | filter=server-host:up-site}
{up corner=up-dev | filter=server-host:up-dev}

css-head

Généralisation de cette option qui permet d'ajouter des règles CSS dans le head de la page. Nous disposons de l'action addcsshead, mais il est délicat de limiter son action à un élément. Cela n'est plus le cas avec cette option.

Un exemple : css-head=#id h3[color:red]. #id sera remplacé par l'id de l'action. Donc la couleur rouge ne concernera que les titres h3 de cette action.

Nouvelles actions

Pour cette nouvelle version du site, j'avais plusieurs besoins que j'ai comblés à l'aide de ces nouvelles actions.

TOC

C'est le petit bouton sommaire que vous pouvez voir sur le coté droit de cette page. Un simple shortcode pour construire automatiquement le shortcode de la page.

jcontent-by-categories ou jnews

Sur la nouvelle page d'accueil, je voulais reprendre automatiquement les nouveautés du site. J'ai donc créer cette extension qui est une version plus aboutie de l'action article-category

jcontent-in-content

Souvent, nous avons des morceaux de texte que nous réutilisons dans plusieurs articles. Cette action permet d'insérer un article Joomla dans un autre article avec un contrôle total de la mise en page.

jcontent-by-tags

Une variante de jcontent-by-categories pour afficher les articles correspondants à un mot-clé.

jcategories-by-tags

Une variante de jcontent-by-tags pour afficher les catégories avec un mot-clé.

lang

Dans le but de simplifier la saisie des shortcodes, cette action vient en complément de l'ancienne méthode permettant de saisir du contenu (textes, images, codes) selon le langage du visiteur.

Scroller

Pour mettre un peu d'animations sur les news, j'ai pensé à cette méthode. Ci-dessous, les shortcodes utilisés pour afficher les news.

{up scroller=4 | speed=3000 | css-head=#id >*:nth-child(5),#id >*:nth-child(6)[opacity:.4] }
	{up article-news=8,17  | maxi=8 | pref=compact | image-src=images/css/news.jpg}
{/up scroller}

Counter

Pour mettre en évidence le nombre d'actions disponibles pour UP, ce compteur me semble faire son effet.

HR

Cela faisait longtemps que je cherchais un moyen de faire facilement des lignes horizontales pour structurer des articles (avec ou sans icône et texte).

Cette action introduit une nouvelle méthode pour définir des jeux d'options dans le fichier custom/prefs.ini. Au lieu de saisir un à un tous les paramètres, on part d'un jeu préparé par le webmaster qui sera adaptable au moment de l'utilisation. Un exemple {up hr=typo-feuille | hr-width=50%} :

Php-error

A usage très confidentiel, cela me permet de régler le niveau des messages d'erreurs PHP localement.
Pratique pour voir {up php-error} ou masquer {up php-error=0} temporairement des alertes

Actions modifiées

article-category devient jcontent-list

Il s'agit d'une mise à jour legère pour l'accorder aux nouvelles actions jcontent...

Icon

Une refonte totale pour gérer tous les types : polices d'icônes, caractères Unicode et images

Cette action a été l'occasion d'introduire un nouveau concept pour faciliter le travail des rédacteurs et soulager le travail du concepteur du site :
création d'un catalogue "affichable" des icônes du site

Exemple : pour afficher l'étoile définie par le webmaster, ce shortcode suffit : {up icon=etoile} ⭐

tab

Un truc m'interpelait sur les panneaux des onglets : la justification verticale

J'ai essayé d'apporter une solution par l'ajout d'une option espace-vertical qui va (merci flex) répartir les éléments sur la hauteur.

Le CSS est disponible en version SCSS. A dupliquer dans le sous-dossier custom pour harmoniser les onglets au style de votre site.

addCodeHead

Ajout du mode, déjà utilisé pour l'action HTML, attribut=valeur. Cela permet de saisir des codes avec un éditeur wysiwyg.

Slideshow-billboard

{up modal=img}
   {up slideshow-billboard = images/photos/2
     | zoom-suffix=-mini | transition =up}
{/up modal}

CSS

L'ajout et la modification d'actions est l'occasion de créer de nouvelles règles CSS.

fg-auto

Passage de 6 à 12 du nombre de colonnes maxi.

ff-mono / ff-cursive

Un moyen simple d'appliquer ponctuellement une autre famille de police

ff-mono - ff-cursive

Badge

<span class="badge"> il est possible que l'aspect soit celui de la classe de même nom de votre template

<span class="badge-rouge"> <span class="badge-bleu"> <span class="badge-vert">

Il est possible de modifier l'aspect par l'ajout d'autres classes

<span class="badge-rouge t-jaune"> <span class="badge-bleu ff-mono"> <span class="badge-vert bg-vertFonce ph3">

Répartition verticale du contenu

Pour les news, il était indispensable de prendre le contrôle de l'alignement vertical. Cela peut être fait à l'aide de 2 séries de classes.

• m-child-raz[-1|-2] qui supprime les marges externes du premier et dernier bloc enfant, ou petit-enfant (-1) ou arrière-petit-enfant (-2)
• fg-vspace-[between|arround|evenly|start|center|end] pour choisir le mode de répartition.
  il existe fg-vspace-between[-1|-2] pour cibler les descendants

Le code pour les blocs ci-dessus. demo2 est un classe locale pour ajouter des bordures colorées.

	<div style="height:300px" class="demo2 fg-vspace-between m-child-raz">
		<h3>Titre H3</h3>
		<div>
		<p>1ère ligne de contenu</p>
		<p>et la suivante</p>
		</div>
		<p>Le pied de bloc</p>
	</div>