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 : -43%
Smartphone SAMSUNG Galaxy Note20 5G 256 Go Gris ...
Voir le deal
599 €

    Switcheroo v1.2.0 - Gestionnaire de multicomptes

    Monomer
    Monomer
    MasculinAge : 28Messages : 39

    Dim 17 Jan 2021 - 6:43



    Introduction


    Bonjour à tous !

    J'en conviens que le LS que je propose aujourd'hui n'est pas très conventionnel, mais j'espère tout de même qu'il vous sera tout aussi utile qu'à vos membres. Il y a un peu plus d'une semaine déjà, j'écrivais un sujet ici pour teaser le plugin sur lequel je travaillais. Il est maintenant terminé et je ne suis pas peu fier d'enfin pouvoir le partager !
    Switcheroo est un plugin inspiré par le visuel de Discord qui vous permet d'enregistrer tous vos comptes d'un même forum sur une barre latérale et d'en changer au besoin, d'un simple clique. Il fonctionne sur toutes les versions (en théorie) et ne demande que très peu de manœuvres pour être installé. Vous pouvez trouver ici un forum d'exemple sur lequel il est installé : les identifiants de deux comptes invité sont fournis sur la page d'accueil pour les curieux.


    Si vous êtes intéressés, je vous invite à lire la suite pour savoir comment Switcheroo fonctionne et comment l'installer sur vos forums !


    Prérequis


    Switcheroo nécessite quelques modifications de votre part avant d'être installer et je vais expliquer comment tout bien préparer :

    1. Tout d'abord, il vous faudra autoriser les formulaires non-officiel à poster leurs données sur votre forum. Pour ce faire, rien de compliqué : accédez au panneau d'administration et suivez ce chemin Général > Forum > Sécurité. Il faudra décocher l'option "Interdire les formulaires non officiels à poster des messages et messages privés sur le forum" et sauvegarder les changements (image). Cette modification permettra au formulaire de Switcheroo de fonctionner avec Fetch, une API de Javascript.
    2. Ensuite, vous devrez vous assurez que la Toolbar de ForumActif est activée. Si ce n'est pas le cas, faites-le en suivant ce chemin : Module > Toolbar > Configuration (image). Si elle était désactivée parce que vous ne l'utilisiez pas, je proposerai plus bas une façon de la rendre invisible, ne vous en faites pas. Cette modification nous permettra de récupérer facilement l'ID d'un membre ainsi que son avatar et de savoir s'il est connecté ou non.
    3. En dernier, la barre de navigation principale de votre forum (celle qui permet de faire une recherche, de se connecter, de s'inscrire et de se déconnecter) devra être présente quelque part sur toutes les pages. Si vous l'avez retiré de vos templates, assurez-vous de l'ajouter quelque part, dans un <div> quelconque et de la cacher avec un style="display: none;". C'est avec cette barre que nous récupérons l'ID temporaire de votre session, qui permettra de changer de compte instantanément.


    Installation


    Le plugin en lui-même est très simple à installer. Il comprend deux fichiers Javascript hébergés sur dropbox – ce qui me permettra de pouvoir patcher directement les scripts en cas de besoin. Le premier, monomer_core.js, est un outil où je centralise toutes les fonctions utilitaires dont je me sers. Notamment, c'est grâce à ce script que le formulaire de connexion du plugin est appelé en popup. Le deuxième fichier, c'est le plugin : switcheroo.js.

    Voici le code qui permet de tout mettre en place d'un seul coup :
    Code:
    <nav id="switcheroo" class="switcheroo" theme="discord" direction="vertical" position="top"></nav>

    <script src="https://cdn.jsdelivr.net/gh/caezd/switcheroo@master/monomer.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/caezd/switcheroo@master/switcheroo.js"></script>

    <script>
    (function() {
          new Switcheroo('#switcheroo');
    })();
    </script>
    Il faudra ajouter ce code à la fin de votre template "Fin du bas de page" : Template > Général > overall_footer_end, juste avant la fermeture de </body>. Comme ceci :
    Et juste avec ça, le plugin est installé et fonctionnel... bien que tout moche et écrasé dans le bas de votre forum. En même temps c'est normal, il nous manque le CSS pour que tout soit beau. Mais pour l'instant, concentrons-nous sur les options disponibles.


    Options


    Switcheroo vient avec quelques options qu'il vous est possible de modifier facilement. Elles doivent être ajouter à l'initialisation du plugin pour fonctionner. Celles ci-dessous sont lest options par défaut.
    Code:
    (function() {
        new Switcheroo('#switcheroo', {
            logo: '', /* accepte html, permet d'afficher un logo qui retourne à l'accueil du forum */
            enableReorder: true, /* activer le drag&drop pour l'ordre des comptes (true/false) */
            updateAvatar: true, /* activer le clique droit pour charger un nouvel avatar (true/false) */
            customButtons: [], /* boutons personnalisés, explication plus bas */
            confirm: true, /* demande une confirmation avant le changement de compte */
            confirmMsg: 'Confirmer le Switcheroo de personnage ?', /* le message affiché lors de la confirmation */
            deleteIcon: '×', /* accepte html, icone pour supprimer un compte lié */
            addIcon: '+', /* accepte html, icone qui ouvre le formulaire de connexion et d'association */
            errorMsg: 'Une erreur est surviendue lors du Switcheroo.',
        });
    })();

    Pour vous donner l'exemple du forum test qui permet d'afficher un logo vers l'accueil, j'ai ajouter une image à l'option "logo" :
    Code:
    <script>
    (function() {

        new Switcheroo('#switcheroo', {
            logo: '<img src="https://i.imgur.com/C01GNxF.png" />'
        });

    })();
    </script>

    Boutons Customisés


    Explication des custom-buttons:
    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
    Shaneliae
    Shaneliae
    FémininAge : 24Messages : 309

    Ven 29 Jan 2021 - 13:37

    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 :secret:

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




    Onyx
    Onyx
    FémininAge : 27Messages : 3322

    Dim 31 Jan 2021 - 1:11

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



    Monomer
    Monomer
    MasculinAge : 28Messages : 39

    Dim 31 Jan 2021 - 3:17

    @Onyx a écrit:Il manque un }.

    Hm, la honte. Rolling Eyes

    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. :coeur:

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

    Shaneliae
    Shaneliae
    FémininAge : 24Messages : 309

    Mer 3 Fév 2021 - 11:58

    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 :lovebomb:

    Ton LS est validé !
    Tout d'abord, un grand merci pour ta contribution ! Ce genre de LS se fait rare, ton idée est originale et va être utile à beaucoup d'admins de forums ! Je continuerai de regarder de temps en temps comment évolue ce plugin.

    Ton LS va maintenant être déplacé dans la section adéquate et ajouté à son index. Tu peux normalement continuer à modifier ton sujet pour pouvoir corriger et faire évoluer ton code. Si tu viens à rencontrer des problèmes pour éditer ton sujet, ou si tu souhaites le déplacer, n'hésites pas à contacter le staff dans la section Signaler.

    Ton LS étant validé, tu peux ajouter 10XP Architecte dans ton profil qui correspondent à un LS d'élément de forum (hors demande). Cet XP t'aidera à monter en Level (niveau) dans le domaine "Architecte" (codage). Ce LS pourra aussi être utilisé pour demander à rejoindre le groupe des Architectes (couleur verte).



    Kelalin
    Kelalin
    FémininAge : 28Messages : 2486

    Mer 3 Fév 2021 - 22:37

    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 !
    hurry babe
    hurry babe
    FémininAge : 31Messages : 6

    Sam 6 Fév 2021 - 23:58

    C'est juste fabuleux ce code, merci infiniment de partager ça, ça va changer la vie de bien des forums :friends:
    aelyna
    aelyna
    FémininAge : 22Messages : 2

    Mar 23 Fév 2021 - 17:10

    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 :lovebomb: :lovebomb:
    sunshinette
    sunshinette
    FémininAge : 27Messages : 6

    Sam 27 Fév 2021 - 3:41

    Bonjour, j'ai une petite question concernant ton sujet Very Happy

    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 :love:
    Carmina
    Carmina
    FémininAge : 35Messages : 450

    Sam 27 Fév 2021 - 7:54

    Bonjour mais perfection!
    Je te remercie!
    NOX ETERNAM
    NOX ETERNAM
    FémininAge : 23Messages : 2

    Sam 27 Fév 2021 - 20:52

    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 :ninjahug:


    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 ?


    Dernière édition par NOX ETERNAM le Dim 28 Fév 2021 - 12:45, édité 1 fois
    pastel breathing
    pastel breathing
    FémininAge : 23Messages : 4

    Sam 27 Fév 2021 - 21:26

    bonjour :heart:
    on m'en parlait justement plus tôt et je trouve le système révolutionnaire. merci du partage. :love:
    Mzlle Alice
    Mzlle Alice
    FémininAge : 32Messages : 11

    Dim 28 Fév 2021 - 13:10

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

    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 :aww:
    Irys
    Irys
    FémininAge : 32Messages : 147

    Lun 1 Mar 2021 - 0:21

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




    Waht is your name?
    Monomer
    Monomer
    MasculinAge : 28Messages : 39

    Mar 2 Mar 2021 - 6:36

    @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... :siffle:

    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>
    Mzlle Alice
    Mzlle Alice
    FémininAge : 32Messages : 11

    Mar 2 Mar 2021 - 10:36

    Merciiii ! C'est génial ! :aww:
    Kaleessi
    Kaleessi
    FémininAge : 29Messages : 78

    Lun 8 Mar 2021 - 23:07

    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 Sad Je ne sais pas trop comment résoudre le problème!

    Merci d'avance! :yay:
    Kidd
    Kidd
    FémininAge : 25Messages : 3

    Sam 13 Mar 2021 - 2:06

    hello :heart:
    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. scratch

    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 Arrow ), est-ce qu'il y a une erreur quelque part? :heart:
    Monomer
    Monomer
    MasculinAge : 28Messages : 39

    Sam 13 Mar 2021 - 7:27

    @Kidd a écrit:hello :heart:
    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. scratch

    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 Arrow ), est-ce qu'il y a une erreur quelque part? :heart:

    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>
    Kidd
    Kidd
    FémininAge : 25Messages : 3

    Sam 13 Mar 2021 - 11:13

    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. :hum:
    swgzl
    swgzl
    FémininAge : 25Messages : 10

    Sam 13 Mar 2021 - 16:42

    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. :friends:
    B-lueberry
    B-lueberry
    FémininAge : 26Messages : 26

    Dim 14 Mar 2021 - 10:52

    Merci beaucoup pour ce partage, ça va tellement simplifier la vie sur les forums :o ♥
    Monomer
    Monomer
    MasculinAge : 28Messages : 39

    Lun 15 Mar 2021 - 20:51

    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. :hum:

    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/
    Tyarra
    Tyarra
    FémininAge : 21Messages : 75

    Mar 16 Mar 2021 - 10:32

    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:
    blackangelrko
    blackangelrko
    FémininAge : 32Messages : 40

    Mar 16 Mar 2021 - 19:47

    Merci cela me sera très utiles sur mes forums :aww:
    Contenu sponsorisé


      La date/heure actuelle est Jeu 29 Juil 2021 - 0:13