AccueilRechercherS'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.

Le Deal du moment : -40%
Ravensburger- Labyrinthe Junior – Jeu ...
Voir le deal
13.99 €

    Switcheroo v1.2.0 - Gestionnaire de multicomptes

    Monomer
    Monomer
    MasculinAge : 27Messages : 39

    Dim 17 Jan 2021 - 6:43

    Rappel du premier message :



    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:
    L'option des boutons customisé est un peu plus complexe que les autres et demande un peu de connaissances en Javascript. Il s'agit d'un tableau d'objets, c'est-à-dire qu'à l'intérieur des crochets "[" et "]" il faudra créer chaque bouton entre "{" et "}" comme ceci :
    Code:
    customButtons: [
    {
        tooltip: 'Bouton 1',
        classes: ['bouton1', 'bouton1rouge'],
        html: '<img src="http://imagebouton1.etc" />',
        before: false,
        action: '/t1-titre-du-topic'
    },
    {
        html: '<i class="material-icons">icon_au_choix<i/>',
        action: function(e, el) { }
    }
    ]
    Chaque bouton a besoin d'options pour fonctionner correctement. "action" et "html" sont obligatoire, mais "tooltip", "classes" et "before" sont facultatives.
    • L'option "tooltip" parle un peu d'elle même : elle affiche le nom du bouton au survol de la souris, comme le reste des autres boutons/comptes.
    • L'option "classes" est un tableau qui permet d'ajouter des classes CSS différentes pour chaque bouton. En plus de celle par défaut ".switcheroo__button", elles seront formatées de cette façon : ".switcheroo__button--bouton1" (pour respecter mon semblant de covention BEM, fufu).
    • L'option "html" vous permet de décider du contenu qui sera ajouter à l'intérieur du bouton. Ça peut être du simple texte, une image, etc.
    • L'option "before" est un boolean (true/false, par défaut "false") qui permet de changer la position du bouton avec à la propriété "order: -1" de CSS, accessible grâce au flexbox de la barre. Lorsque "true", le bouton sera ajouté avant la liste des comptes mémorisés. Si plusieurs boutons sont placés avant grâce à "before", ils s'afficheront dans l'ordre qu'ils sont créés avant les comptes.
    • L'option "action" peut être exploiter de deux façons différente. D'une part, elle accepte comme valeur un lien valide (soit une adresse complète ou relative, du genre "/f1-forum" ou "/t1-topic"). (Blabla JS plus spécifique incoming :) Sinon, il est également possible de passer une fonction qui sera appelée au clique de la souris. Le premier argument est l'équivalent "event" du listener, le deuxième renvoi l'élément du bouton cliqué et "this" est bind à Switcheroo (et donne donc accès à ses fonctions internes).


    Voici un exemple de boutons en Javascript :

    Bouton de déconnexion


    Code:
    {
        tooltip: 'Se déconnecter',
        before: true,
        classes: ['logout'],
        html: '<i class="material-icons">icon_au_choix<i/>',
        action: function(e, el) {
            alert("À la prochaine ! o/");
            this.logout(e => monomer.reload());
        }
    }


    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:
    Code:
    :root {
      --color-text: rgba(255, 255, 255, 0.87);
      --color-bg: #17141b;
      --color-delete: #e74c3c;
      --color-tooltip: #010203;
      --color-squircle: #201f2e;
      --color-accent: #b14255;
      --color-button: #aaa2f2;
      --color-pill: #ffffff;
      --gap-size: 16px;
      --ease: cubic-bezier(0.4, 0.0, 0.2, 1);
      --ease-bounce: cubic-bezier(0.43, 0.09, 0.38, 2.56);
    }

    .switcheroo {
      color: var(--color-text);
      background-color: var(--color-bg);
      font-size: 16px;
    }
    .switcheroo[position="static"] {
      position: relative;
    }
    .switcheroo[position="top"] {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 100;
    }
    .switcheroo[position="bottom"] {
      position: fixed;
      bottom: 0;
      left: 0;
      z-index: 100;
    }
    .switcheroo[direction="horizontal"] {
      width: 100%;
    }
    .switcheroo[direction="vertical"] {
      height: 100%;
    }

    .switcheroo__squircles {
      display: flex;
      margin: 0;
      padding: 0;
      list-style: none;
      padding: var(--gap-size);
      gap: var(--gap-size);
    }
    .switcheroo[direction="horizontal"] .switcheroo__squircles {
      flex-direction: row;
    }
    .switcheroo[direction="vertical"] .switcheroo__squircles {
      flex-direction: column;
    }

    /* squircle */
    .switcheroo[theme="discord"] .switcheroo__squircle {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: var(--color-squircle);
    }
    .switcheroo[theme="discord"] .switcheroo__squircle {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      cursor: pointer;
      transition: border-radius 128ms var(--ease);
    }
    .switcheroo[theme="discord"] .switcheroo__squircle:hover {
      border-radius: 36%;
    }
    .switcheroo[theme="discord"][direction="vertical"] .switcheroo__squircle:before {
      content: "";
      width: 100%;
      height: 100%;
      display: block;
      background-color: var(--color-pill);
      position: absolute;
      border-radius: 4px;
      top: 50%;
      transform: translate(-100%, -50%) scale(0);
      transition: transform 128ms, opacity 64ms;
      pointer-events: none;
      opacity: 0;
    }
    .switcheroo[theme="discord"][direction="horizontal"] .switcheroo__squircle:before {
      content: "";
      width: 100%;
      height: 100%;
      display: block;
      background-color: var(--color-pill);
      position: absolute;
      border-radius: 4px;
      left: 50%;
      transform: translate(-50%, -100%) scale(0);
      transition: transform 128ms, opacity 64ms;
      pointer-events: none;
      opacity: 0;
    }
    .switcheroo[theme="discord"] .switcheroo__squircle.active {
      border-radius: 36%;
      cursor: default;
    }
    .switcheroo[theme="discord"][direction="vertical"] .switcheroo__squircle:hover:before {
      opacity: 1;
      transform: translate(-100%, -50%) scale(0.5);
    }
    .switcheroo[theme="discord"][direction="horizontal"] .switcheroo__squircle:hover:before {
      opacity: 1;
      transform: translate(-50%, -100%) scale(0.5);
    }

    .switcheroo[theme="discord"][direction="vertical"] .switcheroo__squircle.active:before {
      opacity: 1;
      transform: translate(-85%, -50%) scale(0.2);
      border-radius: 50%;
    }
    .switcheroo[theme="discord"][direction="horizontal"] .switcheroo__squircle.active:before {
      opacity: 1;
      transform: translate(-50%, -85%) scale(0.2);
      border-radius: 50%;
    }


    /* tooltip */
    .switcheroo__popper {
      background-color: var(--color-tooltip);
      padding: 0.68rem 1rem;
      position: absolute;
      width: -webkit-max-content;
      width: max-content;
      border-radius: 4px;
      z-index: 0;
      opacity: 0;
      transition: opacity 64ms var(--ease), transform 128ms var(--ease-bounce);
      pointer-events: none;
      color: #fff;
    }
    .switcheroo[direction="vertical"] .switcheroo__popper {
      left: 155%;
      top: 50%;
      transform-origin: left;
      transform: translateY(-50%) scale(0.98);
    }
    .switcheroo[direction="horizontal"] .switcheroo__popper {
      top: 155%;
      left: 50%;
      transform-origin: top;
      transform: translateX(-50%) scale(0.98);
    }
    .switcheroo__popper:before {
      content: "";
      position: absolute;
      width: 24px;
      height: 24px;
      background-color: var(--color-tooltip);
      z-index: -1;
    }
    .switcheroo[direction="vertical"] .switcheroo__popper:before {
      left: -2px;
      top: 50%;
      transform: translateY(-50%) rotate(-45deg);
    }
    .switcheroo[direction="horizontal"] .switcheroo__popper:before {
      left: 50%;
      top: -2px;
      transform: translateX(-50%) rotate(-45deg);
    }

    .switcheroo[direction="vertical"] .switcheroo__squircle:hover .switcheroo__popper {
      opacity: 1;
      transform: translateY(-50%) scale(1);
    }
    .switcheroo[direction="horizontal"] .switcheroo__squircle:hover .switcheroo__popper {
      opacity: 1;
      transform: translateX(-50%) scale(1);
    }
    .switcheroo__squircle:hover:before {
      opacity: 1;
      transform: translate(-100%, -50%) scale(0.5);
    }

    /* avatar */
    .switcheroo[theme="discord"] .switcheroo__avatar {
      position: relative;
      width: 100%;
      height: 100%;
      border-radius: inherit;
      overflow: hidden;
    }
    .switcheroo[theme="discord"] .switcheroo__avatar img {
      width: 100%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    /* divider */
    .switcheroo[theme="discord"][direction="vertical"] .switcheroo__divider {
      width: 100%;
      height: 2px;
      background-color: var(--color-pill);
      border-radius: 1px;
      opacity: 0.06;
      transform: scale(0.8);
    }
    .switcheroo[theme="discord"][direction="horizontal"] .switcheroo__divider {
      width: 2px;
      background-color: var(--color-pill);
      border-radius: 1px;
      opacity: 0.06;
      transform: scale(0.8);
    }
    /* delete button */
    .switcheroo[theme="discord"] .switcheroo__delete {
      display: flex;
      justify-content: center;
      position: absolute;
      width: 16px;
      line-height: 14px;
      height: 16px;
      top: -2px;
      right: -2px;
      border-radius: 50%;
      background-color: var(--color-delete);
      transform: scale(0);
      opacity: 1;
      transition: transform 128ms var(--ease), opacity 64ms var(--ease);
      cursor: pointer;
      font-size: 13px;
    }
    .switcheroo[theme="discord"] .switcheroo__squircle:hover .switcheroo__delete {
      opacity: 1;
      transform: scale(1);
    }
    /* logo */
    .switcheroo[theme="discord"] .switcheroo__logo {
    }
    .switcheroo[theme="discord"] .switcheroo__logo img {
      width: 32px;
    }
    .switcheroo[theme="discord"] .switcheroo__logo:hover {
      background-color: var(--color-accent);
    }
    /* buttons */
    .switcheroo[theme="discord"] .switcheroo__squircle--button {
      transition: border-radius 128ms var(--ease);
      color: var(--color-button);
    }
    .switcheroo[theme="discord"] .switcheroo__squircle--button:hover {
      color: #fff;
      background-color: var(--color-button);
    }
    /* modal */
    .switcheroo__form {
      padding: 48px;
    }
    .switcheroo__form-row {
      display: flex;
      flex-flow: column;
      align-items: flex-start;
      margin-bottom: 16px;
    }
    .switcheroo__form-label {
      margin-bottom: 8px;
      font-size: 14px;
      text-transform: uppercase;
      color: var(--color-text) !important;
    }
    .switcheroo__form-input {
      padding: 6px !important;
      font-size: 16px !important;
      border-radius: 4px !important;
      width: 100% !important;
      border-bottom: 2px solid var(--color-accent) !important;
      background-color: var(--color-bg) !important;
      color: var(--color-text) !important;
      cursor: text !important;
    }
    .switcheroo__form-button {
      border-radius: 8px;
      padding: 8px;
      border: none;
      outline: none;
      box-shadow: none;
      text-transform: uppercase;
      font-size: 14px;
      align-self: flex-end;
      color: #fff;
      background-color: var(--color-accent);
    }

    .monomer-overlay {
      position: fixed;
      z-index: 999;
      top: 0;
      left: 0;
      opacity: 0;
      width: 100%;
      height: 100%;
      transition: 0.2s opacity ease;
      background: rgba(0, 0, 0, 0.6);
    }

    .monomer-modal {
      position: fixed;
      z-index: 999;
      top: 50%;
      left: 50%;
      opacity: 0;
      width: 94%;
      padding: 24px 20px;
      transition: 0.2s opacity ease;
      transform: translate(-50%, -50%);
      border-radius: 2px;
      background: var(--color-squircle);
      color: var(--color-text);
    }

    .monomer-modal.monomer-open.monomer-anchored {
      top: 20px;
      transform: translate(-50%, 0);
    }

    .monomer-modal.monomer-open {
      opacity: 1;
    }

    .monomer-overlay.monomer-open {
      opacity: 1;
    }

    .monomer-close {
      font-family: Helvetica, Arial, sans-serif;
      font-size: 20px;
      font-weight: 700;
      line-height: 24px;
      text-align: center;
      width: 24px;
      height: 24px;
      position: absolute;
      top: -5px;
      right: -5px;
      padding: 5px;
      cursor: pointer;
      color: #fff;
      border: 0;
      outline: none;
      background: var(--color-delete);
      border-radius: 50%;
      padding: 0;
    }
    .monomer-close:hover {
      opacity: 0.8;
    }
    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.


    Dernière édition par Monomer le Dim 18 Avr 2021 - 6:46, édité 11 fois
    Cadmée
    Cadmée
    FémininAge : 45Messages : 16

    Jeu 15 Avr 2021 - 13:20

    Merci pour ce code, trop pratique qui change ma vie et celle de tous les membres adeptes des multi ! cheers :love:
    Monomer
    Monomer
    MasculinAge : 27Messages : 39

    Sam 17 Avr 2021 - 10:28

    Annonce version 1.1.0


    Salutations ! o/

    Je vous annonce aujourd'hui la toute première mise à jour officielle de Switcheroo et l'arrivée de trois nouvelles fonctionnalités !

    Changer l'ordre des comptes


    L'option enableReorder est ajoutée et activée par défaut. Elle permet de réorganiser vos comptes dans l'ordre que vous voulez, il suffit juste de drag and drop le compte au bon endroit (glisser/déposer).

    Rafraîchir les avatars


    L'option updateAvatar est ajoutée et activée par défaut. Elle permet à Switcheroo d'actualiser l'avatar du compte connecté d'un simple clique droit de la souris, à condition que vous ayez déjà changé l'avatar sur le forum. Plus tard, j'aimerais étendre cette fonctionnalité et vous permettre de changer l'avatar de votre compte directement depuis Switcheroo, sans avoir à passer par l'édition du profil... mais il faudra encore attendre un peu. o/

    Ajouter des boutons personnalisés


    L'option customButtons voit le jour et permet aux plus aventureux d'ajouter de nouveaux boutons personnalisés. Il est possible d'ajouter des liens, mais également d'y attacher une fonction Javascript. Dans les prochains jours, j'ajouterai au sujet de présentation un tutoriel approfondi, mais voici entre-temps une brève démonstration :
    Code:
    customButtoms: [
      {
        tooltip: 'Logout',
        html: '<i class="material-icons">logout</i>',
        before: true,
        action: function(e, el) {
          alert("Prout, t'es déco !");
          this.logout().then(e => monomer.reload());
        }
      },
      {
        tooltip: 'Sujet Spécial',
        html: '<img src="liendimage" />',
        action: '/t1-sujet-special'
      }
    ]

    J'espère que cette mise à jour vous plaira et soyez assurez que je resterai aux aguets dans les prochains jours pour intercepter tous les petits bugs qui auraient pu se faufiler entre les mailles de mes nombreux tests. o/
    louha
    louha
    FémininAge : 33Messages : 219

    Lun 19 Avr 2021 - 15:29

    Hello !

    Ayant un forum RP où les membres ont une plus d'une dizaine de DC pour certains, j'avoue être vraiment fan de l'idée. Je l'ai installé pour tester sur un forum de test avant de le passer sur le forum "normal". J'espère ne pas tout casser en adaptant le code au design du forum... mais c'est une autre histoire.

    je pose ici parce que j'ai une question / un truc que je ne trouve pas super clair dans ton tutoriel, et qu'avant d'aller plus loin je préfère poser la question que de faire des bêtises.

    Dans la partie "options" tu nous donnes un code qu'on peut personnaliser... Il faut bien l'intégrer dans les codes javascript du forum (modules=>codes javascript) ? Et, si c'est le cas, comment être sûre que ce code va bien être appelé ? Le lien du script doit-il être ajouté quelque part ? Ou ce code doit être passé directement dans le template où est installé le code ?

    Merci tout plein en tout cas, faisant partie des membres à 30 comptes de mon forum, ça va me simplifier la vie à un point extraordinaire !
    Monomer
    Monomer
    MasculinAge : 27Messages : 39

    Lun 19 Avr 2021 - 19:20

    Salutations ! o/

    Je peux comprendre que la méthode d'installation et le choix des options puissent paraître compliqués, surtout quand c'est pas une façon standard pour ForumActif (juste d'expliquer comment, sans trop rentrer dans les détails, m'a donné du fil à retordre). En gros, l'installation "de base" se fait directement à la fin du template "overall_footer_end" pour faciliter la sémantique HTML et respecter l'ordre de chargement des pages (ça, c'est un autre sujet plus compliqué encore, donc passons i_i). Voici ce qu'il faut ajouter dans le template, pour la version "de base" :

    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'); /* init du plugin */
    })();
    </script>

    Le plugin est initialisé à l'avant dernière ligne, grâce à "new Switcheroo('#switcheroo');", c'est à ce petit bout de code qu'il faut ajouter les options, juste après le premier argument de la fonction ('#switcheroo'), entre accolades. Par exemple, si je reprends le code complet plus haut pour installer le plugin et y rajouter le logo, la fin du template (juste avant la femeture de la balise "</body>") ressemblerait à ça :
    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', {
                logo: '<img src="image" />' /* hop, option du logo */
          }); /* init du plugin */
    })();
    </script>

    Les options se déclarent comme ça, à cet endroit. Comme le plugin est installé et initialisé directement dans le template "overall_footer_end", tout doit être modifié à la même place, en javascript dans le dernier "<script></script>", en même temps que Switcheroo est "initialisé".

    En gros, la partie "options" du tutoriel permet de montrer toutes les options que le plugin utilise par défaut, et pour les modifier il faut les ajouter à la déclaration de Switcheroo (comme logo, dans l'exemple au-dessus). Il faut s'assurer de respecter le formattage en javascript (entre les accolades) et ne pas oublier la virgule après chaque option. Pour ajouter un logo et changer le message de confirmation, toujours dans le template "overall_footer_end" il faudrait faire comme ça :
    Code:
    <script>
    (function() {
          new Switcheroo('#switcheroo', {
                logo: '<img src="image" />', /* hop, option du logo */
                confirmMsg: 'Changer de personnage ?' /* et hop, option du message de confirmation */
          }); /* init du plugin */
    })();
    </script>

    Voilà voilà !
    J'espère avoir éclairé ta lanterne o/
    B-lueberry
    B-lueberry
    FémininAge : 25Messages : 26

    Lun 19 Avr 2021 - 22:22

    Hello !

    Je ne suis jamais repassée par là... Donc déjà merci énormément pour tes réponses ♥ Ensuite cette nouvelle version est au top, les membres des forums où j'avais installé ton petit bijou sont ravis et moi de même donc merci merci merci ♥
    Je suis curieuse de ces nouvelles options sur les petits boutons donc je les essaierai dès que j'aurais un peu de temps, mais franchement, tu es au top !
    louha
    louha
    FémininAge : 33Messages : 219

    Mar 20 Avr 2021 - 10:41

    Hello ! c'est bien plus clair maintenant merci =) je vais bidouiller tout ça <3

    En tout cas, mes membres sont hyper enthousiastes à l'idée de l'avoir sur le forum !
    louha
    louha
    FémininAge : 33Messages : 219

    Mer 21 Avr 2021 - 10:54

    C'est encore moi x)

    Est ce qu'il est possible d'ajouter une fonction scroll ? J'ai des membres avec plus de 14 comptes, et... malheureusement le bouton d'ajout de compte disparait à partir de 14 comptes ajoutés (oups)


    EDIT : à force de bidouiller les options, j'ai pu trouver la bonne valeur à modifier pour mettre le scroll Very Happy

    avatar
    Twedle
    MasculinAge : 25Messages : 19

    Mer 28 Avr 2021 - 17:54

    Merci beaucoup pour ce plug-in qui va complètement nous changer la vie nous qui ne faisons que ça du multi-compte !
    Tala
    Tala
    FémininAge : 32Messages : 4

    Mer 5 Mai 2021 - 10:17

    Un grand merci! C'est juste fabuleux!
    Yoshimasa
    Yoshimasa
    FémininAge : 33Messages : 43

    Jeu 13 Mai 2021 - 16:07

    C'est juste génialissime ! Switcheroo v1.2.0 - Gestionnaire de multicomptes - Page 3 1f600

    J'avais déjà testé deux fonctionnalités dans le genre qui ne marchaient pas du tout et là ça a été hyper simple à installer, je n'ai même pas eu à personnaliser le CSS étant donné que le design s'adapte très bien à ma charte graphique. J'ai juste baissé avec un padding-top les avatars car mon menu de navigation le cachait.

    Merci beaucoup pour ce joli travail !!!! Voici le rendu chez moi : https://www.herviefaye.com/forum
    Caine Lornan
    Caine Lornan
    MasculinAge : 40Messages : 85

    Ven 14 Mai 2021 - 20:55

    Super idée !
    Contenu sponsorisé


      La date/heure actuelle est Dim 16 Mai 2021 - 20:22