Aujourd'hui je vous présente un plugin que j'ai écrit dans un cadre purement didactique, dont le but est multiple. Le point de départ du développement était de pouvoir comprendre comment il était possible d'intégrer dans un plugin, du code JavaScript. Pour celles et ceux qui me suivent et qui me connaissent, vous savez que je ne suis pas du tout expert dans ce langage Javascript, et en plus je ne l'aime pas
. C'est la raison pour laquelle je fais un très peu de javascript, mais, comment on fait jamais tout ce qui nous plaît, j'essaie de me mettre afin de comprendre comment ça marche.
. C'est la raison pour laquelle je fais un très peu de javascript, mais, comment on fait jamais tout ce qui nous plaît, j'essaie de me mettre afin de comprendre comment ça marche.
Pour une première expérience dans ce langage, car il faut être sérieux, j'ai déjà codé deux trois trucs dans ce langage, je suis plutot satisfait, ca marche ! Je suis parti sur une action (que l'on retrouve désormais à priori dans le Joomla 4) qui permet d'intégrer des raccourcis clavier.
Dans cet exemple que je vous propose, je n'ai volontairement et absolument pas voulu gérer les raccourcis clavier dans la console d'administration de Joomla. Ce projet est purement pédagogiue : out est en dur dans le code. Vous pouvez bien entendu récupérer l'ensemble de mon projet afin de l'adapter et pourquoi pas en faire quelque chose de beaucoup plus sympa. Encore une fois, tout le code et les sources sont libres et vous pouvez les utiliser et modifier réutiliser comme bon vous semble.
Un plugin ?
Pour ce développement, j'avais deux solutions :
- soit je développais un plugin qui se charge donc en mémoire dans l'intégralité de mon Joomla
- soit je développais un module qui ne se chargerait que dans le cadre de sa présence sur la page active sur laquelle se trouve l'utilisateur.
J'ai opté pour un plugin car la portée est beaucoup plus grande : elle conserne le projet Joomla complet. Ainsi, une fois chargée, le plugin est accessible de n'importe quelle page.
Un manque ?
Comme je vous le disais, ce développement est purement didactique. Je n'ai pas opté dans le plugin et la possibilité d'afficher à l'utilisateur l'ensemble des touches qui peut taper sur le clavier pour lancer une action ou une autre.
Comment ça marche ?
N'étant pas un expert JavaScript, j'ai commencé par rechercher une bibliothèque JavaScript intéressante pour gérer les touches clavier d'un projet web. Au cours de ma recherche, je suis tombé sur une bibliothèque dont je vous mets le lien, sur Github, sur laquelle je m'appuie pour gérer mon projet : https://github.com/jaywcjlove/hotkeys. Cette bibliothèque s'appelle Hotkeys. Il existe pas mal de bibliothèques de ce type mais celle-ci, après lectures de divers avis de développeurs, cette bibliothèque parait être l'une des plus complète. Elle permet notamment de gérer des combinaisons de touches !
Un mode d'emploi ?
Rendons à César ce qui appartient à Jules. Si vous souhaitez trouver le mode d'emploi de cette bibliothèque, je ne peux que vous renvoyer sur le site de l'auteur qui explique bien comment cette bibliothèque fonctionne et comment vous pouvez adapter mon code pour vous propre combinaison de touche clavier.
Je n'y connais rien dans le code : que puis-je modifier pour adapter à mon projet?
Comme vous le voyez dans mon code, à partir de la ligne 14, nous rentrons dans un "switch" qui permet simplement de tester tout un ensemble de combinaisons possibles, en fonction d'une condition. Et la condition dans notre cas s'appelle handler.key.
En fonction de cette valeur, nous associons différentes actions possibles. Comme vous le voyez, j'ai opté vers des combinaisons de touche comme Ctrl+a, F12, Ctrl+B, Alt+l. Et c'est ainsi que j'ai commencé à pleurer... En effet, certaines combinaisons de touches ne fonctionnent pas très bien, notamment avec les combinaisons Alt+.... Et si l'une des combinaisons de touches est déjà affectée dans votre navigateur (au niveau du logiciel lui-même, pas du site), notre combinaison de touche à notre plugin n'est pas prioritaire sur celle du navigateur. Et lorsque je dis prioritaire, cela ne veut pas dire que la combinaison de touche définie dans le navigateur n'est pas exécutée : dans le cas du contrôle a, dans un premier temps l'action du plugin est exécutée, puis le message (au sens système d'un système d'exploitation) continue sa propagation jusqu'au navigateur qui le récupère et sélectionne l'ensemble de la page puisque c'est l'action par défaut du contrôle a dans un navigateur. Une tout toute la sélection faite (puisque c'est comme ca que c'est défini dans un navigateur), notre code est executé.
Pourquoi me suis lancé dans ce projet ?
Dans le cadre de mon projet professionnel, je souhaitais afficher sur la page d'accueil un ensemble de combinaisons de touches d'accès direct à certaines grandes catégories de Joomla. C'est la raison pour laquelle je m'étais lancé dans ce projet. Loin d'être non fonctionnel, je ne suis pas un grand fan de mon développement, dans la mesure où j'ai tout mis dans le code. Je souhaitais aussi développer aussi la possibilité de préparer dans la console d'administration, des associations de touches, et afficher les liens vers les pages à lancer. C'est la raison pour laquelle, comme je l'ai expliqué ci-dessus, le projet n'est pas terminé. Et il ne le serapas car nous avons refondu toutes l'architecture du site et cette fonctionnalité n'a plus lieu d'être
Analyser le code
Pour terminer ce petit article, je souhaitais simplement bien spécifier que le traitement des actions de ce code s'effectue bien du côté du navigateur et non pas du côté du serveur. C'est aussi quelque chose qui m'a toujours un peu gêné car certaines actions ne sont pas toujours reconnus par tous les navigateurs, sans compter que nous ne sommes pas maitres des réactions des navigateurs. A priori, et j'ai regardé, la commande Window.locution.replacer est accessible à beaucoup de navigateurs. Mais quand ils faut commencer à se demander si ca peu parcher partout, mooi je ne suis pas un grand fan....
L'ensemble de ce projet reste donc bien un projet éducatif, dans la mesure où je ne peux le diffuser comme un projet fini. C'est aussi la raison pour laquelle je ne me suis pas lancé tout de suite dans la rédaction de cet article, ce projet faisant partie d'une liste colossale de projets commencés, mais qui ne me donne pas entièrement satisfaction.
Je vous le partage afin que vous puissiez vous appuyer dessus pour développer vos propres actions mais gardez à l'esprit que c'est une verrsion pré-alpha.... Dans ce projet, vous devez donc télécharger la bibliothèque dont le vous ai mis le lien et dézipper le contenu dans un dossier hotkeys
keys.php
<?php
defined('_JEXEC') or die('Access deny');
class plgContentKeys extends JPlugin
{
function onContentPrepare($content, $article, $params, $limit){
$document = JFactory::getDocument();
$document->addscript('plugins/content/keys/hotkeys/dist/hotkeys.min.js');
$document->addscriptDeclaration("hotkeys('ctrl+a,ctrl+b,r,f12', function (event, handler){
switch (handler.key) {
case 'ctrl+a':
alert('you pressed ctrl+a!');
console.log(hotkeys.getPressedKeyCodes());
break;
case 'ctrl+b':
alert('you pressed ctrl+b!');
break;
case 'f12':
alert('you pressed F12!');
break;
case 'f':
alert('you pressed f!');
break;
case 'r':
window.location.replace('http://www.w3schools.com');
break;
case 'alt+1':
window.location.replace('http://www.w3schools.com');
break;
default:
alert(event);
break;
}
});
");
}
}
keys.xml
<?xml version="1.0" encoding="utf-8"?>
<extension version="3.1" type="plugin" group="Content">
<name>Keys : raccourcis claviers</name>
<author>Sebastien LHUILLIER</author>
<creationDate>Janvier 2023</creationDate>
<copyright>Sébastien LHUILLIER</copyright>
<license>GNU General Public License version 2 or later; see LICENSE.txt</license>
<authorEmail>Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser.</authorEmail>
<authorUrl>www.sebastien-lhuillier.com</authorUrl>
<version>1.0</version>
<description>Gère des raccourcis clavier au traver de la bibliothe JS Keys.js</description>
<files>
<filename plugin="keys">keys.php</filename>
<filename>keys.xml</filename>
</files>
<config>
<fields name="params">
<fieldset name="basic">
<field name="note11" type="note" class="alert alert-success" label="Mode d'emploi" description="Ce plugin permet d'accèder à des raccourcis claviers codés en dur dans le code. Ceux ci sont définis dans le fichiers keys.php du plugin. Toute la doc se trouve sur https://github.com/jaywcjlove/hotkeys" close="true" />
</fieldset>
</fields>
</config>
</extension>