Introduction
Bonjour à tous !
J'en conviens que le LS que je propose aujourd'hui n'est pas très conventionnel, mais j'espère tout de même qu'il vous sera tout aussi utile qu'à vos membres. Il y a un peu plus d'une semaine déjà, j'écrivais un sujet ici pour teaser le plugin sur lequel je travaillais. Il est maintenant terminé et je ne suis pas peu fier d'enfin pouvoir le partager !
Switcheroo est un plugin inspiré par le visuel de Discord qui vous permet d'enregistrer tous vos comptes d'un même forum sur une barre latérale et d'en changer au besoin, d'un simple clique. Il fonctionne sur toutes les versions (en théorie) et ne demande que très peu de manœuvres pour être installé. Vous pouvez trouver ici un forum d'exemple sur lequel il est installé : les identifiants de deux comptes invité sont fournis sur la page d'accueil pour les curieux.
Si vous êtes intéressés, je vous invite à lire la suite pour savoir comment Switcheroo fonctionne et comment l'installer sur vos forums !
Prérequis
Switcheroo nécessite quelques modifications de votre part avant d'être installer et je vais expliquer comment tout bien préparer :
- Tout d'abord, il vous faudra autoriser les formulaires non-officiel à poster leurs données sur votre forum. Pour ce faire, rien de compliqué : accédez au panneau d'administration et suivez ce chemin Général > Forum > Sécurité. Il faudra décocher l'option "Interdire les formulaires non officiels à poster des messages et messages privés sur le forum" et sauvegarder les changements (image). Cette modification permettra au formulaire de Switcheroo de fonctionner avec Fetch, une API de Javascript.
- Ensuite, vous devrez vous assurez que la Toolbar de ForumActif est activée. Si ce n'est pas le cas, faites-le en suivant ce chemin : Module > Toolbar > Configuration (image). Si elle était désactivée parce que vous ne l'utilisiez pas, je proposerai plus bas une façon de la rendre invisible, ne vous en faites pas. Cette modification nous permettra de récupérer facilement l'ID d'un membre ainsi que son avatar et de savoir s'il est connecté ou non.
- En dernier, la barre de navigation principale de votre forum (celle qui permet de faire une recherche, de se connecter, de s'inscrire et de se déconnecter) devra être présente quelque part sur toutes les pages. Si vous l'avez retiré de vos templates, assurez-vous de l'ajouter quelque part, dans un <div> quelconque et de la cacher avec un style="display: none;". C'est avec cette barre que nous récupérons l'ID temporaire de votre session, qui permettra de changer de compte instantanément.
Installation
Le plugin en lui-même est très simple à installer. Il comprend deux fichiers Javascript hébergés sur dropbox – ce qui me permettra de pouvoir patcher directement les scripts en cas de besoin. Le premier, monomer_core.js, est un outil où je centralise toutes les fonctions utilitaires dont je me sers. Notamment, c'est grâce à ce script que le formulaire de connexion du plugin est appelé en popup. Le deuxième fichier, c'est le plugin : switcheroo.js.
Voici le code qui permet de tout mettre en place d'un seul coup :
- Code:
<nav id="switcheroo" class="switcheroo"></nav>
<script src="https://dl.dropboxusercontent.com/s/zpcdkt4331qt2m2/_monomer-core.min.js"></script>
<script src="https://dl.dropboxusercontent.com/s/njiwc5md0gfi6fv/switcheroo-dist.js"></script>
<script>
(function() {
new Switcheroo('#switcheroo');
})();
</script>
Il faudra ajouter ce code à la fin de votre template "Fin du bas de page" : Template > Général > overall_footer_end, juste avant la fermeture de </body>. Comme ceci :
Options
Switcheroo vient avec quelques options qu'il vous est possible de modifier facilement. Elles doivent être ajouter à l'initialisation du plugin pour fonctionner. Celles ci-dessous sont lest options par défaut.
- Code:
(function() {
new Switcheroo('#switcheroo', {
logo: '', /* accepte html, permet d'afficher un logo qui retourne à l'accueil du forum */
confirm: true, /* demande une confirmation avant le changement de compte */
confirmMsg: 'Confirmer le Switcheroo de personnage ?', /* le message affiché lors de la confirmation */
explore: false, /* permet d'afficher un lien vers la liste des membres "à la discord" style */
exploreIcon: '<i class="material-icons">group</i>', /* accepte html, icone du lien vers la liste des membres */
deleteIcon: '×', /* accepte html, icone pour supprimer un compte lié */
addIcon: '+', /* accepte html, icone qui ouvre le formulaire de connexion et d'association */
errorMsg: 'Une erreur est surviendue lors du Switcheroo.',
});
})();
Pour vous donner l'exemple du forum test qui permet d'afficher un logo vers l'accueil, j'ai ajouter une image à l'option "logo" :
- Code:
<script>
(function() {
new Switcheroo('#switcheroo', {
logo: '<img src="https://i.imgur.com/C01GNxF.png" />'
});
})();
</script>
Apparence
Pour ce qui est du CSS maintenant, vous le trouverez hébergé ici. Il est complet et vient avec quelques variables pour vous permettre de modifier les couleurs facilement. Celles par défaut vous donneront le même visuel que celui présenté tout en haut de ce sujet (ou sur le forum d'exemple).
Pour ce qui est de personnaliser le reste, faites-le à vos risques et périls (surtout si vous ne connaissez pas flexbox, héhé) ! Pour l'instant le plugin est uniquement disponible à la verticale, mais je prévois (peut-être bientôt) lui ajouter quelques petites variantes visuelles, dont un affichage à l'horizontale.
Sachez également que ce CSS fonctionne, en théorie, sur toutes les versions de forumactif, mais il n'est pas impossible de rencontrer quelques problèmes de compatibilité qui écraseraient l'apparence de certains éléments. Si c'est le cas, n'hésitez pas à venir chercher de l'aide ici !
Masquer la toolbar moche
Comme promis, ce petit bout de CSS vous débarrassera de la toolbar sans la désactiver, permettant ainsi au plugin de fonctionner incognito. Si jamais elle a ajouté un espace indésirable en haut de votre forum, assurez-vous qu'elle ne soit pas fixée à l'écran : comme ceci.
- Code:
#fa_toolbar, #fa_toolbar_hidden {
display: none!important;
}
Conclusion
Voilà. Je pense que c'est tout bon. Si jamais vous avez des questions ou des suggestions pour améliorer ce petit plugin, n'hésitez pas à m'en faire part ! Je suis ouvert à publier des mises à jour et ajouter de nouvelles fonctionnalités si j'en vois l'utilité. Je travaille déjà sur une deuxième version qui devrait ajouter quelques fonctionnalités sympathiques et j'ai d'autres idées potentielles sur lesquelles j'hésite encore. Et qui sait, si vous les proposez vous-même, peut-être que j'y réfléchirai plus sérieusement.
Si vous rencontrez un problème lors de l'installation, quoique ce soit, n'hésitez pas à venir me le dire et je m'empresserai de vous aider !
Et, sur ce... enjoyez bien.
EDIT pour @Shaneliae : J'ai bien pris en compte ton retour et je répondrai à la suite de ton message (dans quelques jours) lorsque j'aurais évalué tous les points apportés. J'ai tout de même du mal à reproduire ton soucis avec Firefox (de mon côté tout fonctionne bien), mais peut-être que retirer l'utilisation de dropbox résoudra le problème.
Dernière édition par Monomer le Dim 31 Jan 2021 - 2:58, édité 2 fois
