Switcheroo v1.2.0 - Gestionnaire de multicomptes

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 !


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>

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.',
    });
})();

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:

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.

Hello @Monomer !

Alors comme promis je suis venue regarder ça et voir comment ça fonctionne. Malheureusement, le code que tu donnes ne fonctionne pas sur mon forum test (que ça soit en PHPBB2 ou ModernBB). J'ai de nombreuses erreurs sur la console et je ne vois que deux choses possibles : soit Firefox a bloqué ton script (ce qui est possible et même en désactivant mon bloqueur de pubs ça ne fonctionne pas), soit ça vient de l'hébergement de tes scripts sur Dropbox...

Perso je penche pour la deuxième option. Dropbox est vraiment pas fiable dans le temps, et l'ID des URL fournies peuvent changer quand il y a une mise à jour du fichier, ce qui peut faire que ça plante. Comme Christa te l'a conseillé, je te conseille d'envisager une alternative comme Github qui est gratuite et faite pour cela.

En plus de cela, le staff (mais surtout les Responsables codage) a prit la décision de toujours demander une copie des codes hébergés dans le post. On a de plus en plus de soucis avec eux et on se retrouve avec des LS qui ne sont plus utilisables après quelques mois parce que le code était hébergé et le membre ne se connecte plus à NU... Je pense aussi que donner ton code JS (ou au moins une partie) pourra t'aider à échanger avec les quelques personnes du domaine que l'on a sur NU.

Enfin, je te déconseille très fortement (mais vraiment très très fort) de dire aux membres de te contacter personnellement ou à la suite de ton LS s'ils ont un problème :
1. après avoir reçu des dizaines de messages "merci" tu vas sûrement ne plus regarder ce sujet et en désactiver les notifications...
2. on a une section pour les problèmes avec les codes, je te conseille de diriger les membres là-bas. Il y a plusieurs membres qui peuvent aider avec ton code, mais aussi les Responsables y passe de temps en temps, si besoin on peut t'y tagguer pour que tu viennes voir les problèmes rencontrés. En plus aider les membres dans cette section rapporte des Peanut's alors qu'en privé non

Pour finir je te conseille de passer ton travail du côté des tutos :
1. Je peux te faire le transfère sans problème quand le code fonctionnera.
2. Tu pourras prendre le temps d'expliquer un peu plus le code que tu as fait. Et par expérience les LS avec du JS entraînent plus souvent des gaffes/problèmes que les LS plus simples en HTML/CSS. Et quand c'est expliqué côté tutos les membres ont tendance à être un peu plus curieux.
3. Je pense personnellement que ton travail aura plus de reconnaissance du côté des tutos que des LS. Ici c'est surtout "on prend du code, on remercie et on disparait", alors que côté tutos il y a parfois un peu plus d'interactions entre ceux intéressés par ton tuto mais qui ont des questions, ceux qui testent mais comprennent pas tout, ceux qui veulent refaire à leur sauce pour apprendre, etc.

Si jamais tu viens à atteindre la limite de caractère en éditant ton premier message, n'hésites pas à le signaler. Tu postes dans un autre message la suite de ton LS/tuto et ensuite dans un autre message tu demandes à supprimer les messages entre le 1er et la suite. Un Responsable ou modo qui passera valider ton sujet s'en occupera.

Voilà, c'est un peu long, mais j'espère que ton projet finira par fonctionner et recevoir la reconnaissance qu'il mérite ! Je te laisse regarder tout ça et revenir quand tu penses que tout est corrigé.

Salut !

'Christa nous a fait remarquer sur Discord que la fonction dans l'initialisation était mal fermée dans le code que tu donnes, c'est pour cela que ça ne fonctionne pas. Il manque un }. En effet, si tu regarde ici :

Code:

<script>
(function() {
      new Switcheroo('#switcheroo');
)();
</script>

Ça devrait plutôt être :

Code:

<script>
(function() {
      new Switcheroo('#switcheroo');
})();
</script>

Même chose quand tu donne les options.

Plutôt que cela :

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.',
    });
)();

Cela devrait être :

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.',
    });
})();

Onyx a écrit:Il manque un }.

Hm, la honte.

C'est le genre de boulette qu'on remarque pas au travers du formatage gris et uniforme de l'éditeur texte ici, comme quoi les habitudes ont la vie dur (thanks Sublime Text). x)
J'ai corrigé plus haut, ça devrait effectivement aidé Shaneliae, si c'était bien la raison de son problème.

Pour répondre à Shaneliae, j'aborderai la présentation de Switcheroo différemment quand j'aurai terminé de réécrire et de modulariser mon environnement de travail (ce qui permettra de partager mes futurs codes d'une façon certes compacte et incompréhensible, mais plus simple et plus fiable). En plus, je pense ajouter tout de suite la possibilité d'intégrer des boutons personnalisés (en plus d'un petit lien rapide vers l'édition du profil). J'ai aussi cédé à Github, et même si pour l'instant je rencontre tous les problèmes possibles et inimaginables avec (hi, j'ai oublié de changer de branche et de pull l'origine avant de continuer), j'imagine que les bonnes habitudes viendront avec le temps.
D'ailleurs, si tu pouvais réparer ma coquille de } oublié et me dire si le plugin fonctionne bien sur ton forum test, ce serait cool (et ça me rassurerait, *imposter syndrome intensifies*), parce que sinon j'ai bien du mal à voir d'où il pourrait venir sachant que la plupart du code s'occupe déjà de ses propres erreurs.

Voilà, je reviendra avec plus de détails sur mes corrections dans les prochains jours.
Et merci Onyx. o/

Hello !

Désolée de mon temps de réponse ! Effectivement quand Christa' a fait la remarque, j'ai corrigé directement sur mon forum test et le problème est corrigé.

J'ai donc pu tester, et tout fonctionne plutôt bien ! Je suis plutôt fan de cette fonctionnalité et j'espère pouvoir la conseiller autour de moi

Wow, j'adore l'idée, et je suis sûre que ton code sera utilisé dans le futur dans de gros forums RP où les membres utilisent le multi-compte ! Un gros merci pour le partage !

C'est juste fabuleux ce code, merci infiniment de partager ça, ça va changer la vie de bien des forums

Hello, je me suis permise de prendre ton tuto pour mon forum en construction ! C'est vraiment pratique et compréhensible (en sachant que je comprends rien au codage) je te remercie vraiment

Bonjour, j'ai une petite question concernant ton sujet

Je l'ai installé sur mon forum test et c'est vraiment parfait ca marche correctement ! Seulement sur l'ordi ca rends très bien, mais sur le portable ou bien la tablette comme la taille de l'écran est plutôt longue que large et bien la barre déborde sur le corps du forum.

Comment faire pour que cette barre rapetisse en fonction de la taille de l'écran automatiquement ?

Merci beaucoup pour la réponse accordée

Bonjour mais perfection!
Je te remercie!

C'est tout simplement DIVIN. Merci pour ce LS super utile et tant attendu dans le monde rpgique. On m'en a parlé ce matin, je l'ai mis sur mon forum test en personnalisant le CSS en moins d'une heure. Au top, franchement.

J'ai juste une petite question : quid de la sécurité ? Comment stockes-tu les identifiants des différents comptes pour que la connexion se fasse automatiquement au switch ?

Merci pour tes précisions et pour ton travail, ça va faciliter la vie à beaucoup de joueurs


EDIT : Je crois comprendre que le stockage des identifiants passe en local par les cookies donc top niveau sécurité ! En revanche, est-ce que les comptes ajoutés seront supprimés quand Forumactif déconnecte tout le monde en début de mois ? As-tu pu déjà faire ce test ?

Bonjour et merci beaucoup ! Je vais essayer ça également, ça peut bien changer la vie.
Bravo pour ce travail !

Edit : oh juste, dans le template, j'ai voulu ajouter ça :

Code:

confirm: true;

Et modifier true en false, afin qu'il n'y ait plus le message de confirmation, mais je dois faire une erreur ? :/
Merci encore

Wow. Juste wow.

Etant une grande adepte des multi-comptes sur les forums, j'aurais rêvé avoir ça bien avant ! Ce code est absolument génial et juste merci d'avoir eu cette idée et l'avoir partagé.

NOX ETERNAM a écrit:EDIT : Je crois comprendre que le stockage des identifiants passe en local par les cookies donc top niveau sécurité ! En revanche, est-ce que les comptes ajoutés seront supprimés quand Forumactif déconnecte tout le monde en début de mois ? As-tu pu déjà faire ce test ?

Salutations ! J'ai édité la FAQ pour répondre à ta question et j'ai complètement zappé de te notifier ensuite. My bad...

Pour répondre à celle-ci : Le localstorage fonctionne comme un cookie en principe, mais n'en est pas et les données qui y sont stockées n'expirent pas (et c'est d'ailleurs une des raisons pour laquelle j'ai préféré utilisé cette méthode, les dates en JS sont vraiment... eurhh). C'est pourquoi l'option manuelle de supprimer un compte enregistré est d'autant plus nécessaire. Aussi, à noter que le changement des identifiants d'un compte sur un forum (pseudo/mot de passe, par l'édition du profil) ne synchronise pas ceux stockés sur Switcheroo (d'où l'importance de supprimer le précédent compte et de rajouter le nouveau ensuite).

Voilà voilà. o/

Pour répondre à sunshinette :

Je l'ai installé sur mon forum test et c'est vraiment parfait ca marche correctement ! Seulement sur l'ordi ca rends très bien, mais sur le portable ou bien la tablette comme la taille de l'écran est plutôt longue que large et bien la barre déborde sur le corps du forum.

Comment faire pour que cette barre rapetisse en fonction de la taille de l'écran automatiquement ?

Le visuel du plugin, comme la version "ordinateur" d'un forum consulté sur mobile, n'est pas tout à fait au point pour les petites tailles de ces différents appareils. Il serait possible de modifier le CSS en utilisant des media queries pour y arriver (et peut-être que je proposerai différentes variantes éventuellement dans le CSS de base), mais pour l'instant ce n'est pas quelque chose que j'ai prévu d'ajouter. Chaque forum étant plus ou moins unique dans la largeur de leur corps, dans sa versions et structure de templates, ce serait quasi impossible de proposer une solution pratique pour tout le monde.

De tête (si j'ai bien compris le soucis), tu peux peut-être essayer d'ajouter ceci à la fin de ton CSS pour ajouter un peu d'espace sur la gauche lorsque la largeur du navigateur est inférieur à 1024px :

Code:

@media all and (max-width: 1024px) {
  .switcheroo {
    left: 0;
  }
  body {
    padding-left: 100px; /* ajuster à l'espace désiré */
  }
}

Et pour Mzlle Alice :

Edit : oh juste, dans le template, j'ai voulu ajouter ça :

Code:

confirm: true;

Et modifier true en false, afin qu'il n'y ait plus le message de confirmation, mais je dois faire une erreur ? :/

Yep ! Il faut déclarer l'option du plugin comme ceci pour retirer la confirmation :

Code:

<script>
(function() {

    new Switcheroo('#switcheroo', {
        confirm: false
    });

})();
</script>

Merciiii ! C'est génial !

Helloo!! Premièrement, je suis méga fan du principe! Pour les gens avec plusieurs compte en fait ces juste parfait!

J'ai par contre une question/problème! J'ai voulu l'installée sur mon forum test, j'ai suivit les instructions à la lettre et tout semble fonctionner, sauf que lorsqu'on veux ajouté un compte, le bouton ''connexion'' ne fonctionne juste pas Je ne sais pas trop comment résoudre le problème!

Merci d'avance!

hello
je viens vers toi parce que j'ai tenté d'installer ton plug-in (meilleure idée, btw, tellement pratique!!) sur mon forum test et... rien ne se passe, rien ne s'affiche, donc j'ai probablement dû faire une bêtise mais impossible de savoir laquelle.

Code:

<script>
(function() {
      new Switcheroo('#switcheroo');
      logo: '<img src="URL" />'; /* 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 ?',
      explore: false,
      exploreIcon: '<i class="material-icons">group</i>',
      deleteIcon: '×', /* accepte html, icone pour supprimer un compte lié */
      addIcon: '+',
      errorMsg: 'Une erreur est surviendue lors du Switcheroo.',
    });
})();
</script>

j'ai posté ça comme ça dans mon template (avec la partie d'avant aussi mais je ne peux pas poster de liens externes ), est-ce qu'il y a une erreur quelque part?

Kidd a écrit:hello
je viens vers toi parce que j'ai tenté d'installer ton plug-in (meilleure idée, btw, tellement pratique!!) sur mon forum test et... rien ne se passe, rien ne s'affiche, donc j'ai probablement dû faire une bêtise mais impossible de savoir laquelle.

Code:

<script>
(function() {
      new Switcheroo('#switcheroo');
      logo: '<img src="URL" />'; /* 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 ?',
      explore: false,
      exploreIcon: '<i class="material-icons">group</i>',
      deleteIcon: '×', /* accepte html, icone pour supprimer un compte lié */
      addIcon: '+',
      errorMsg: 'Une erreur est surviendue lors du Switcheroo.',
    });
})();
</script>

j'ai posté ça comme ça dans mon template (avec la partie d'avant aussi mais je ne peux pas poster de liens externes ), est-ce qu'il y a une erreur quelque part?

Salutations ! Le problème était assez simple, à savoir que les options du plugin étaient à l'extérieur de la fonction où ils doivent être appelés. Si tu veux comparer les deux, tu trouveras assez vite :)

Code:

<script>
(function() {

    new Switcheroo('#switcheroo', {
        logo: '<img src="URL" />'; /* 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 ?',
        explore: false,
        exploreIcon: '<i class="material-icons">group</i>',
        deleteIcon: '×', /* accepte html, icone pour supprimer un compte lié */
        addIcon: '+',
        errorMsg: 'Une erreur est surviendue lors du Switcheroo.',
  });

})();
</script>

first thing first, merci de ta réponse si rapide!

j'ai fait la correction comme tu m'as dit (j'ai même littéralement c/c ta correction au cas où j'avais zappé un détail, et ensuite rajouté mon logo), mais ça n'apparait toujours pas.

Salut ! Merci beaucoup pour ce plug-in, il est vraiment génial et pratique.
J'aurais une petite question cependant, serait-il possible d'avoir une version où les comptes/avatars se mettent en lignes plutôt qu'en colonnes ? J'essaye de l'intégrer sur le forum où je suis, et pour changer, j'aimerais l'avoir à la place de la toolbar forumactif plutôt qu'une colonne à gauche du forum. Car sinon avec le thème actuel du forum, en colonne, il ne s'intègre pas très bien (même si y'a toujours moyen de modifier, au cas où le mettre en ligne serait impossible).

Un grand merci à toi, en avance, pour ta réponse.

Merci beaucoup pour ce partage, ça va tellement simplifier la vie sur les forums :o

Salutations !

Kidd a écrit:
j'ai fait la correction comme tu m'as dit (j'ai même littéralement c/c ta correction au cas où j'avais zappé un détail, et ensuite rajouté mon logo), mais ça n'apparait toujours pas.

Assure-toi que tous les prérequis sont remplis (que la barre de navigation originale du forum soit bien présente par exemple) et vérifie que tu as bien toutes les parties nécessaires pour l'appel du script dans ton template, comme ceci :

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', {
        logo: '<img src="URL" />'; /* 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 ?',
        explore: false,
        exploreIcon: '<i class="material-icons">group</i>',
        deleteIcon: '×', /* accepte html, icone pour supprimer un compte lié */
        addIcon: '+',
        errorMsg: 'Une erreur est surviendue lors du Switcheroo.',
  });

})();
</script>

Si ça ne fonctionne toujours pas, envoie-moi ton forum par MP pour que je puisse mieux me rendre compte si le problème vient de mon plugin ou de l'installation.

@swgzl

J'aurais une petite question cependant, serait-il possible d'avoir une version où les comptes/avatars se mettent en lignes plutôt qu'en colonnes ? J'essaye de l'intégrer sur le forum où je suis, et pour changer, j'aimerais l'avoir à la place de la toolbar forumactif plutôt qu'une colonne à gauche du forum. Car sinon avec le thème actuel du forum, en colonne, il ne s'intègre pas très bien (même si y'a toujours moyen de modifier, au cas où le mettre en ligne serait impossible).

Je n'ai malheureusement pas développé encore de thème horizontale pour le plugin, mais si tu t'y connais en CSS, tu peux sans doute t'en sortir toi-même en bidouillant les classes ".switcheroo" et ".switcheroo__squircles" un peu de cette façon :

Code:

.switcheroo {
    background-color: var(--color-bg);
    left: 0;
    width: 100%; /* en met en largeur */
    color: var(--color-text);
    font-size: 16px;
    position: fixed;
    top: 0;
    z-index: 999;
}
.switcheroo__squircles {
    background-color: #faf9f5;
    display: flex;
    flex-direction: row; /* remplace column par row */
    gap: var(--gap-size);
    list-style: none;
    margin: 0;
    min-height: auto; /* on remet auto, ou on supprime la ligne */
    padding: var(--gap-size);
}

Par contre, le reste du visuel ne sera pas très adapté et il faudra modifier certaines propriétés au cas par cas (les tooltips notamment, ou les pilules qui s'affichent au survol). J'avais déjà pensé proposer une version horizontale et/ou static (contrairement à fixée au scroll) du plugin, mais je suis particulièrement occupé au travail ces dernières semaines. Si je trouve un peu de temps ce weekend, j'essaierai de mettre à jour le CSS et de proposer une nouvelle version avec plus d'options pour le visuel du plugin.

Voilà voilà. o/

Merci pour ce super ajout, mais j'ai un petit problème : la mise en page ne se fait pas, je n'arrive pas vraiment à comprendre comment créer ce fameux effet "discord" puisque sur mon forum ça n'apparaît qu'en texte.
Si quelqu'un peut éclairer ma lanterne

Merci cela me sera très utiles sur mes forums