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.

-30%
Le deal à ne pas rater :
Baskets Nike Air Max Genome
119 € 170 €
Voir le deal

    Switcheroo v1.2.0 - Gestionnaire de multicomptes

    Monomer
    Monomer
    MasculinAge : 28Messages : 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
    Monomer
    Monomer
    MasculinAge : 28Messages : 39

    Jeu 18 Mar 2021 - 4:23

    @Tyarra a écrit: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 :hum:

    Salutations ! Assure-toi que le CSS est correctement installé sur ton forum. D'ailleurs, il vient d'être mis à jour et je t'invite, du coup, à relire l'installation correctement pour ne pas manquer les nouvelles directives.

    Pour @swgzl, qui faisait partie des intéressés : le nouveau CSS permet d'afficher la barre horizontalement. Il faudra relire l'installation (la balise HTML a un peu changé) et réinstaller le CSS sur vos forums.

    kay08
    kay08
    FémininAge : 27Messages : 3

    Jeu 18 Mar 2021 - 5:13

    Coucou, j'ai c/c tous les codes et la barre apparaît bien, par contre le pop-up n'apparaît pas et la connexion se fait toujours au bas de la page, est-ce que j'ai manqué quelque chose? :ange:
    Tyarra
    Tyarra
    FémininAge : 21Messages : 75

    Jeu 18 Mar 2021 - 12:28

    Merci pour ta réponse rapide :coeur: en effet, j'avais zappé le CSS, je ne sais pas pourquoi je ne le voyais pas sur mon écran :batte:

    En revanche, j'ai maintenant le même soucis que @kay08; pas de pop-up de connexion et on ajoute les comptes en bas de la page, avec des vieux champs grisatres :hum: cette fois je ne crois pas avoir raté d'information, et je ne vois pas d'élément de pop-up dans ton tuto ! Mais est-ce que tu as une astuce ? :aww:
    Je t'avoue ne pas m'y connaître assez bien en templates ou plug-in (ou que sais-je) pour savoir intégrer ça a mon forum sans un petit tuto :faint:

    Merci encore :coeur:
    Monomer
    Monomer
    MasculinAge : 28Messages : 39

    Jeu 18 Mar 2021 - 17:31

    Well... :siffle:

    C'est my bad pour ça. En retravaillant le CSS et en le mettant à jour dans le premier post du sujet, j'ai complètement oublié de c/c les parties concernant le modal (pop-up) et le formulaire.

    C'est rajouté correctement. o/
    kay08
    kay08
    FémininAge : 27Messages : 3

    Jeu 18 Mar 2021 - 18:34

    Merci beaucoup Monomer, tout est bon de mon côté et fonctionne. :coeur:
    Psychotic Bitch
    Psychotic Bitch
    FémininAge : 35Messages : 41

    Sam 20 Mar 2021 - 23:09

    Merci pour ce code c'est tellement pratique :lovebomb:
    pastel breathing
    pastel breathing
    FémininAge : 24Messages : 4

    Lun 22 Mar 2021 - 0:11

    bonsoir ! :ange:
    depuis quelques heures on a remarqué la disparition du switcheroo sur notre forum et les autres l'utilisant. :sad: après nous être penché sur le problème, on a remarqué que le soucis venait de l'hébergement des scripts, les liens ayant sauté. :happy: je pense que beaucoup trop de monde l'utiliser et c'est ce qui créé ce dysfonctionnement :hum:
    je ne sais pas si tu peux y faire grand chose et/ou si tu as encore les scripts de ton côté mais je souhaitais transmettre le message. :omg:
    Sadja
    Sadja
    MasculinAge : 23Messages : 79

    Lun 22 Mar 2021 - 8:25

    Bonjour ! :hug2: :hug2:

    Tout d'abord merci pour ce codage de dingue !
    Même soucis que ma voisine du dessus, j'ai installé le codage hier soir à 23h20 et vers minuit tout avait disparu, et en me baladant sur les forums j'ai vu que c'était pour tout le monde le cas :chomp:
    Lilie
    Lilie
    FémininAge : 38Messages : 190

    Lun 22 Mar 2021 - 9:59

    Bonjour :)

    Tout d'abord merci pour ce LS vraiment pratique que j'ai installé hier et qui a fait le bonheur de mes membres. Mais malheureusement, ce matin, tout a disparu.

    Failed to load resource: the server responded with a status of 429 ()

    Pourriez-vous me guider / conseiller ?

    merci :)

    Edit : je n'avais pas vu mes prédécesseurs. Donc même soucis ^^
    Monomer
    Monomer
    MasculinAge : 28Messages : 39

    Lun 22 Mar 2021 - 16:37

    Ahlalaaaaa, bonjour à tous... Switcheroo v1.2.0 - Gestionnaire de multicomptes - Page 2 1f615
    Avant toute chose, petit mot de sagesse en ce matin de printemps (chez moi, en tout cas) : si vous utilisez Paypal, ne laissez pas vos identifiants sur le téléphone de votre ex. Se réveiller avec des frais imprévus de 45$ c'est pas des masses agréable. Switcheroo v1.2.0 - Gestionnaire de multicomptes - Page 2 1f611

    Alors oui, les fichiers hébergés sur mon Dropbox ont été suspendus dans la nuit, à cause du trop grand trafic qu'ils engendraient, et ce malgré mon abonnement Premium... c'est dire. Malheureusement, ce problème s'applique à tout le monde. Il était plus ou moins prévu que je trouve une autre façon de partager les scripts de Switcheroo éventuellement, mais je ne pensais devoir y remédier aussi rapidement (et surtout, je pensais trouver la force et la motivation de proposer Switcheroo en module d'ici là, mais passons).

    J'utilise maintenant jsDelivr qui permet d'offrir des liens miroirs vers mon vieux début de repo github (pas du tout à jour, j'ai jamais utilisé, what the heck is that).


    Vous pouvez corriger les anciens liens dans le Template > Général > overall_footer_end (ils sont également édités sur la présentation du plugin) :

    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 on va espérer que cette fois-ci la bande passante ne causera plus de problèmes !
    Désolé tout le monde pour les inconvénients, je suis fainéant. Switcheroo v1.2.0 - Gestionnaire de multicomptes - Page 2 1f630


    Dernière édition par Monomer le Lun 22 Mar 2021 - 20:44, édité 2 fois
    pastel breathing
    pastel breathing
    FémininAge : 24Messages : 4

    Lun 22 Mar 2021 - 16:45

    merci pour la réponse rapide, tu nous sauves la vie ! cheers
    je remarque juste un soucis qu'il n'y avait pas avec les précédentes pages :
    Switcheroo v1.2.0 - Gestionnaire de multicomptes - Page 2 5vwBXa5

    je ne sais pas si c'est lié au js ou si c'est un soucis qui se règle directement depuis le css ? :aww:

    edit : la solution m'a été apporté par heresy donc je slide ici :ange:
    dans le premier code, la partie suivante

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

    était sûrement intégré dans la page js d'office (puisque je n'avais pas eu besoin de la mettre dans ma template), mais cette fois-ci elle n'y est pas donc suffit simplement de l'ajouter à la partie en script dans la template. :love:
    Lilie
    Lilie
    FémininAge : 38Messages : 190

    Lun 22 Mar 2021 - 19:08

    Merci beaucoup pour la réaction.
    J'ai juste un soucis, l'avatar du compte "actif" ne s'affiche plus.
    Choucroute Mozzarella
    Choucroute Mozzarella
    FémininAge : 25Messages : 41

    Lun 22 Mar 2021 - 20:31

    Merci du partage ! J'ai le même soucis que Lilie, l'avatar du compte actif ne s'affiche pas, mais sinon super code franchement, ça va tellement m'aider pour tous les comptes à gérer XD
    geniuspanda
    geniuspanda
    FémininAge : 25Messages : 2

    Lun 22 Mar 2021 - 23:10

    Heyy !

    Un grand, GRAND merci pour ce super code que tu nous met là à disposition ! Il s'est répendu comme une trainée de poudre sur les forums, pas étonnant que les serveurs ont pas aimé le nombre de requête haha. C'est vraiment le genre d'amélioration dont on avait besoin sur forumactif donc vraiment merci d'avoir pris le temps de faire ça et de le partager si généreusement ♥

    Je voulais te demander deux choses :

    J'ai réalisé un thème de base de Forumactif : un design de forum clé en main qui facilite la modification des templates et qui implémente des scripts souvent utilités par les forums rpgs. Vu sa popularité, j'aurais aimé savoir si je pouvais l'intégrer à mon thème mis en livre service ? Bien sûr chaque créateur de script est dûement crédité, je m'attribue rien! En plus de te demander l'autorisation, je me demandais si du coup ça n'allait pas poser problème si "trop" de personne se mettait à l'utiliser (en sachant que j'ai déjà quelque forum qui ont uilité mon thème).

    Deuxième j'aurais voulu savoir si tu m'autorisais à m'amuser un peu avec l'apparence de Switcheroo (bien que je trouve sa version de base vraiment top) pour proposer d'autre apparence en libre-service ?

    Voilà! merci d'avance **
    Monomer
    Monomer
    MasculinAge : 28Messages : 39

    Mar 23 Mar 2021 - 4:13

    @geniuspanda a écrit:Heyy !

    Un grand, GRAND merci pour ce super code que tu nous met là à disposition ! Il s'est répendu comme une trainée de poudre sur les forums, pas étonnant que les serveurs ont pas aimé le nombre de requête haha. C'est vraiment le genre d'amélioration dont on avait besoin sur forumactif donc vraiment merci d'avoir pris le temps de faire ça et de le partager si généreusement ♥

    Je voulais te demander deux choses :

    J'ai réalisé un thème de base de Forumactif : un design de forum clé en main qui facilite la modification des templates et qui implémente des scripts souvent utilités par les forums rpgs. Vu sa popularité, j'aurais aimé savoir si je pouvais l'intégrer à mon thème mis en livre service ? Bien sûr chaque créateur de script est dûement crédité, je m'attribue rien! En plus de te demander l'autorisation, je me demandais si du coup ça n'allait pas poser problème si "trop" de personne se mettait à l'utiliser (en sachant que j'ai déjà quelque forum qui ont uilité mon thème).

    Deuxième j'aurais voulu savoir si tu m'autorisais à m'amuser un peu avec l'apparence de Switcheroo (bien que je trouve sa version de base vraiment top) pour proposer d'autre apparence en libre-service ?

    Voilà! merci d'avance **

    Salutations !

    Je t'ai reconnu tout de suite avec ton avatar (et je suis abonné à ton tumblr – qui est magnifique btw –, ça aide). Je surveille ton thème depuis quelques temps déjà et je pensais justement à te contacter dans les prochaines semaines avec une petite idée en tête (sauf que je suis à la bourre depuis... trois semaines, j'en perds la notion du temps et ça m'est sorti de la tête entre-temps, faut croire, fuuuuu).

    Alors, pour répondre à ta première question : bien sûr que tu peux proposer Switcheroo aux gens qui se servent de ton thème et maintenant que j'utilise github comme passerelle CDN, il ne devrait plus y avoir de problèmes avec le trafic. Le lien des scripts hébergés ne devraient plus changer non plus (sauf si j'ai vraiment merdé encore une fois, mais j'ai pas l'impression) et en cas de patch, ils seront push direct sur le master, puis purge et refetch sur le CDN - la magie des Internets.

    Et bien sûr que tu peux modifier son apparence : son thème de base ne me revient même pas puisqu'il est clairement inspiré de discord. Le CSS/HTML permet maintenant de proposer des thèmes plus facilement (.switcheroo[theme="discord"]) et je suis déjà moi-même en train d'explorer d'autres idées pour quand j'aurai le temps, donc n'hésite surtout pas ! D'ailleurs, si tu le souhaites je pourrais même les ajouter au sujet principal et créditer ton projet de forum en même temps (si j'ai le droit, huhu).

    Voilà. o/

    Edit: Tous les problèmes d'avatar ou d'icones depuis le changement des scripts devraient être réglés. J'ai malencontreusement hébergé, dans la hâte et la panique du réveil, une demi-heure avant de partir bosser, une future version de Switcheroo qui n'était clairement pas optimisée. J'ai réglé dès mon retour à la maison (si rien n'a changé, un petit CTRL+F5 pour vider votre cache devrait suffire). My bad... Switcheroo v1.2.0 - Gestionnaire de multicomptes - Page 2 1f623
    En espérant que tout soit rentré dans l'ordre pour tout le monde. \o/
    Shaneliae
    Shaneliae
    FémininAge : 25Messages : 309

    Mar 23 Mar 2021 - 18:02

    Hello ici !

    Je viens juste passer pour vous demander de passer tous les problèmes du côté de la section Problème avec mon code. Si tu le souhaites @Monomer, on peut s'arranger pour que tu ai un sujet dédié à Switcheroo où les membres viendront poser tous leurs problèmes. L'intérêt ? Tu pourras gagner des Peanut's là-bas (4 par réponse) et ici tu pourras garder uniquement les remerciements et les messages de mise à jour de ton plugin. Tu pourras aussi avoir un sujet unique rassemblant tous les problèmes et solutions liés à ton plugin. En plus de ça, certains codeurs ne squattent que la zone d'entraide et ne viennent pas dans les LS pour regarder s'il y a des problèmes. Il pourra donc y avoir les solutions et avis d'autres codeurs là-bas.

    Qu'en penses-tu ? Si tu as un quelconque souci pour la mise en place de ton sujet de problèmes, n'hésites pas à venir me contacter en privé (MP ou Discord).



    Monomer
    Monomer
    MasculinAge : 28Messages : 39

    Mar 23 Mar 2021 - 20:43

    Ça serait sans doute plus simple de réunir tout au bon endroit, oui (c'est pas tant pour les Peanuts, je suis allergique) ! Je vais regarder ce soir pour y poster un sujet, et peut-être même revoir les questions fréquentes que j'ai reçu par discord/mp (on y échappe pas) pour directement y écrire quelques instructions...

    Bonne idée, merci Shaneliae o/
    Shaneliae
    Shaneliae
    FémininAge : 25Messages : 309

    Mer 24 Mar 2021 - 21:30

    Hello Monomer !

    Je reviens parce que j'ai réussi à convaincre un forum où je suis d'utiliser ton plugin. Sauf que sur ce forum la majorité des membres ont beaucoup de comptes (notre record actuel est de 11) et des écrans plutôt petits donc la disposition actuelle de Switcheroo ne convient absolument pas...

    J'ai donc créée un thème Switcheroo pour le forum est commencé à l'accordé au thème du forum. Maintenant que la disposition nous convient, on aimerait une fonctionnalité en plus. En fait à la place du logo qui nous ramène à l'accueil du forum, on préférerait avoir un bouton pour ouvrir/fermer la "boîte" de comptes, un peu comme les dossiers sur Discord.

    Donc avant de commencer à manipuler le code et casser ton super boulot, je voulais savoir si tu aurais des astuces/conseils pour le faire ? Ou alors tu travailles peut-être même sur cette fonctionnalité ?

    Je te remercie d'avance !



    Monomer
    Monomer
    MasculinAge : 28Messages : 39

    Ven 26 Mar 2021 - 17:10

    Salutations Shaneliae !

    Pour répondre à ta question : je n'ai pas prévu de modifier ou d'ajouter de nouvelles fonctionnalités pour cette version de Switcheroo, que je considère maintenant comme une beta, mais je pense l'ajouter à la liste de celles qui pourraient faire partie de la prochaine version. Entre temps, tu peux toi-même adapter le script à ton goût ou passer par un petit relooking CSS (exemple vraiment simple ici) si ça peut convenir au forum intéressé.
    swgzl
    swgzl
    FémininAge : 25Messages : 10

    Dim 28 Mar 2021 - 9:21

    @Monomer a écrit:Pour @swgzl, qui faisait partie des intéressés : le nouveau CSS permet d'afficher la barre horizontalement. Il faudra relire l'installation (la balise HTML a un peu changé) et réinstaller le CSS sur vos forums.

    Merci beaucoup pour tout ça et de l'avoir fait aussi rapidement, c'est ultra cool de ta part. Un grand merci. <3
    B-lueberry
    B-lueberry
    FémininAge : 26Messages : 26

    Mar 30 Mar 2021 - 14:06

    Bonjour ! :lovebomb: :lovebomb:

    Je me permets de repasser par ici car j'aurais quelques questions sur les fonctionnalités du Switcheroo !

    Pour commencer je l'ai installé sur un forum crossover aux très nombreux MC par rapport aux doublons de personnages etc et les nombreux univers. Mais toutefois je remarque plusieurs choses.

    Tout d'abord, serait-il possible, comme sur Discord, de déplacer les icônes des comptes ? Je m'explique. Certains membres rangent leurs personnages par ordre alphabétique, d'autres par ordre d'arrivée. Pour ceux qui rangent par ordre alphabétique, ils doivent supprimer tous leurs comptes à chaque nouvelle arrivée et tout réorganiser. Pour ceux qui font par ordre d'arrivée, il leur arrive d'avoir misclick et supprimé un compte du début de liste et d'être donc, dans le même cas de figure : devoir tout supprimer pour remettre je dis ça parce que c'est mon cas et j'aime bien avoir mes comptes du premier arrivé au dernier, mais bien évidemment, je peux faire sans pour ma part. Serait-il possible de faire "glisser" les icones pour les remettre à leur place ?

    Aussi, pour un autre point, j'ai noté que lorsque l'on changeait d'avatar, celui-ci ne s'actualisait pas dans les petites bulles des comptes et qu'il fallait enlever et remettre. Y aurait-il un script Ajax ou quelque chose qui puisse faire appel à la base de donnée de FA pour mettre à jour le tout en temps et en heure, par hasard ?

    Et pour finir, plutôt que le mettre dans le footer du forum est-il possible de le mettre dans le header ? J'aurais voulu le mettre dans une nav en onglet qui est installée dans le header (elle contient le mainmenu d'où l'intérêt de "mélanger" les deux) et il me semble avoir essayé mais sans que cela fonctionne de le mettre dans le overall_header. Y aurait-il un moyen de combler cela, par hasard ? :omg:

    Merci d'avance et navrée de revenir avec de telles demandes.

    Bonne journée à toi :heart:
    CyndieEverdeen
    CyndieEverdeen
    FémininAge : 31Messages : 5

    Mar 30 Mar 2021 - 20:28

    Merciii c'est tellement utile :love:
    Monomer
    Monomer
    MasculinAge : 28Messages : 39

    Mer 31 Mar 2021 - 3:46

    @B-lueberry a écrit:Bonjour ! :lovebomb: :lovebomb:

    Salutations !

    Une fonction de drag-and-drop pour l'agencement des comptes est en développement pour la prochaine version de Switcheroo, malheureusement je n'ai pas encore de délais pour sa sortie vu toutes les suggestions que j'ai accumulé à gauche et à droite. Si j'ai le temps, aussi, je prends en note et j'essaierai de placer l'actualisation des avatars, mais je ne garantis rien.

    @B-lueberry a écrit:Et pour finir, plutôt que le mettre dans le footer du forum est-il possible de le mettre dans le header ? J'aurais voulu le mettre dans une nav en onglet qui est installée dans le header (elle contient le mainmenu d'où l'intérêt de "mélanger" les deux) et il me semble avoir essayé mais sans que cela fonctionne de le mettre dans le overall_header. Y aurait-il un moyen de combler cela, par hasard ? :omg:

    Il est possible de déplacer le plugin ailleurs, mais les scripts Javascript doivent rester dans le footer (par soucis de sémantique, etc).
    En partant du principe qu'il est installé dans le footer et fonctionnel, il suffit seulement de déplacer la balise html qui permet d'appeler le plugin dans le header, à l'endroit désiré. Je parle de cette balise nav :

    Code:
    <nav id="switcheroo" class="switcheroo" theme="discord" direction="horizontal" position="static"></nav>

    En changeant la position pour "static" (qui permet de réintégrer la barre dans son contexte, donc bien important de placer la balise au bon endroit). Dépendant de ton header, il y aura certainement des ajustements à faire sur le CSS, mais elle devrait être ajoutée au bon endroit.

    J'espère que ça t'aidera pour changer la position du plugin et pour le reste, il faudra attendre que j'ai un peu plus de temps. o/
    Voilà voilà.
    Anju44
    Anju44
    FémininAge : 30Messages : 6

    Mar 6 Avr 2021 - 20:22

    Un grand merci pour ce partage qui va changer la vie de beaucoup de monde (moi la première xD) !
    Je pique donc ce plugin génial, encore merci ♥
    Nemesis
    Nemesis
    FémininAge : 30Messages : 218

    Mer 7 Avr 2021 - 17:07

    Ce code est incroyable ! Bravo pour ce travail et un énorme merci pour le partage !Switcheroo v1.2.0 - Gestionnaire de multicomptes - Page 2 1f4ab
    Contenu sponsorisé


      La date/heure actuelle est Jeu 9 Déc 2021 - 13:42