AccueilDernières imagesRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


1 résultat trouvé pour plugin

Monomer

Switcheroo v1.2.0 - Gestionnaire de multicomptes - Dim 17 Jan 2021 - 6:43



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 :

  1. 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.
  2. 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.
  3. 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" theme="discord" direction="vertical" position="top"></nav>

<script src="https://cdn.jsdelivr.net/gh/caezd/switcheroo@master/monomer.js"></script>
<script src="https://cdn.jsdelivr.net/gh/caezd/switcheroo@master/switcheroo.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 :
Et juste avec ça, le plugin est installé et fonctionnel... bien que tout moche et écrasé dans le bas de votre forum. En même temps c'est normal, il nous manque le CSS pour que tout soit beau. Mais pour l'instant, concentrons-nous sur les options disponibles.


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 */
        enableReorder: true, /* activer le drag&drop pour l'ordre des comptes (true/false) */
        updateAvatar: true, /* activer le clique droit pour charger un nouvel avatar (true/false) */
        customButtons: [], /* boutons personnalisés, explication plus bas */
        confirm: true, /* demande une confirmation avant le changement de compte */
        confirmMsg: 'Confirmer le Switcheroo de personnage ?', /* le message affiché lors de la confirmation */
        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>


Boutons Customisés


Explication des custom-buttons:



Apparence


Pour ce qui est du CSS maintenant, vous devez l'installer sur votre forum dans sa totalité. 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) :
CSS:

Pour ce qui est de personnaliser le reste, faites-le à vos risques et périls (surtout si vous ne connaissez pas flexbox, héhé) !
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 !


Variantes visuelles


Le CSS vient également avec certaines variantes qui vous permettent, par exemple, de changer l'orientation de la barre (verticale ou horizontale), sa position et son comportement.
Si nous reprenons le HTML installé dans le template "Fin du bas de page" : Template > Général > overall_footer_end, vous remarquerez sans doute certaines valeurs :
Code:
<nav id="switcheroo" class="switcheroo" theme="discord" direction="vertical" position="top"></nav>

  • id="switcheroo" Il s'agit de l'identifiant de la balise, qui permet entre autres au JS de fonctionner.
  • class="switcheroo" La classe sert surtout pour le style général de la barre. Je vous déconseille de la changer sans également modifier le CSS.
  • theme="discord" Une option qui permettra, éventuellement, de changer le thème de switcheroo (lorsque j'en aurai ajouté d'autres). Pour l'instant, "discord" est le seul présent et celui à utiliser par défaut.
  • direction="vertical" Permet de changer la direction de la barre, soit "vertical" (par défaut, voir l'exemple plus haut) ou "horizontal".
  • position="top" Après révision (et en écrivant ces lignes), je réalise que cette fonction n'était pas très bien réfléchie. Pour l'instant, n'y touchez pas.


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. ♥

FAQ



Sécurité


Pour reprendre ce que j'ai expliqué à 'Christa, je ne suis clairement pas un expert sur le sujet, mais voici comment est abordée la sécurité de Switcheroo :
  • Les identifiants sont enregistrés en LocalStorage (un peu comme les sessions sont enregistrés par FA quand vous cochez "se souvenir de moi" en vous connectant sur un forum).
  • Ces données sont encryptées, au-moins pour les protéger s'il y a plusieurs membres d'une même famille qui sont sur un forum (auquel cas, ils peuvent quand même se servir du plugin s'ils sont d'accord, mais n'auront pas accès aux mots de passe directement, même en allant fouiller l'inspecteur).
  • L'utilisation de scripts par les membres d'un forum étant limitée, ils ne peuvent accéder qu'à leurs identifiants même en utilisant la console.
  • Un administrateur mal intentionné, Switcheroo ou non, pourrait très bien récupérer les identifiants de ses membres avec n'importe quel script JS actif sur n'importe quel formulaire de connexion (ou même changer leurs mot de passe dans son panneau d'administration), donc ce côté là ne change pas.
  • Switcheroo ne stocke aucunes informations sur une base de données externe.


Changelog



Version 1.1.0


  • Une nouvelle option customButtons permet d'ajouter d'autres boutons à la barre.
  • L'option updateAvatar (activée par défaut) permet de rafraîchir l'avatar du compte connecté au clique droit de la souris.
  • L'option enableReorder (activée par défaut) permet de changer l'ordre des comptes enregistrés (drag & drop support).

Version 1.0.1


  • Amélioration du visuel et ajout d'un mode horizontal. Mise place des thèmes.


Revenir en haut

La date/heure actuelle est Mar 19 Mar 2024 - 9:40