Le panneau d'actions — 6 types de contrôles
Le panneau d'actions est la deuxième barre flottante de JustZix — celle avec les contrôles interactifs qui pilotent une page à la volée. Chaque action est l'un des six types et est rattachée à un dossier ou à un jeu de règles, elle apparaît donc exactement là où vous en avez besoin.
Ce qu'est une barre d'actions
Là où la première barre de JustZix sert à activer et désactiver les règles, le panneau d'actions est plus que des interrupteurs. C'est un ensemble de contrôles interactifs avec lesquels vous pilotez une page pendant que vous travaillez — exécuter du code à la demande, lui passer des valeurs, changer de mode.
La barre est rattachée à un dossier, un groupe ou un jeu de règles. Quand ce dossier est actif sur la page courante, ses actions apparaissent dans le panneau flottant ; quand il ne correspond pas, le panneau reste vide. Ainsi une page de boutique affiche d'autres contrôles qu'un tableau de bord d'administration. La barre mémorise sa position, et un clic droit la masque pour le reste de la session.
Six types de contrôles
Chaque action a un label, une couleur et un raccourci clavier optionnel. Vous choisissez l'un des six types selon le besoin :
BUTTON— un bouton fire-and-forget ; un clic exécute simplement du code JS.SELECT— une liste déroulante ; options statiques ou générées en JS, en choisir une déclenche l'action.INPUT— un champ texte unique de style barre de commande ; vous tapez une valeur et validez.SLIDER— un curseur qui pilote une variable CSS en direct, comme la luminosité ou le zoom de la page.TEXTAREA— un bloc-notes multiligne dont le contenu est mémorisé séparément pour chaque domaine.TOGGLE3— un contrôle segmenté à trois états, idéal pour des modes commedev / staging / prod.
Du simple clic à la valeur saisie
Le type le plus simple est BUTTON — une cible, un clic. SELECT et TOGGLE3 ajoutent le choix : au lieu d'un bouton par variante, vous gardez un seul contrôle à plusieurs états. INPUT et TEXTAREA vont plus loin et acceptent le texte que vous fournissez sur le moment — le code de l'action lit cette valeur et en fait ce que vous avez conçu.
SLIDER se distingue car il fonctionne en continu : faites glisser la poignée et la variable CSS liée change instantanément, sans rien à valider. C'est le choix naturel pour les réglages que l'on veut voir en temps réel.
Les actions exécutent du code à la demande
Derrière chaque contrôle se trouve un petit extrait de CSS ou de JavaScript. La différence avec une règle ordinaire, c'est qu'une règle s'exécute automatiquement au chargement de la page, tandis qu'une action attend — elle ne s'exécute que lorsque vous l'utilisez. C'est parfait pour les opérations que vous ne voulez pas à chaque fois : vider un formulaire, générer des données de test, basculer un thème, envoyer la page vers un autre outil.
Comme le code d'action s'exécute dans le même monde que les règles, il a accès au DOM de la page et aux globales JustZix, si bien qu'un seul bouton peut déclencher un workflow en plusieurs étapes. Le panneau d'actions transforme un jeu de règles statique en un petit pupitre de commande ajusté à la page.
Articles de blog liés
Des articles qui approfondissent ce sujet.