Quelques petits soucis techniques 2

[Arkane 2.0]

DÉTAILS TECHNIQUES
_______________________________________________________________________________________________________________
Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : https://chroniques-ds-mondes.forumotion.eu/forum

DESCRIPTION DU PROBLÈME
_______________________________________________________________________________________________________________
J'en avais déjà parlé. Mais suite à une absence de plusieurs jours je n'ai pas eu le temps de relancer le topic avant qu'il ne soit fermé.

Voilà j'ai remarqué que les balises [pop] et [float] étaient absentes de l'éditeur de message. On m'a expliqué que même absentes, il se peut qu'elles fonctionnent si je les tape à la main. Sauf que non, même en les tapant manuellement elles ne fonctionnent pas.

La balise [pop] est nécessaire, dès lors qu'il est impossible de créer plusieurs feuilles de personnages. Car pour avoir d'autres feuilles de personnages, on peut toujours créer une section "Feuille de personnage" dans laquelle les membres posteront un message mis en page sous forme de feuille de personnage. Mais...... pour que cela fonctionne la balise POP est justement nécessaire.

C'est une balise également très utile pour plein d'autres choses, très utilisée sur Wikipédia par exemple. Elle permet, juste en passant la souris sur un mot, d'afficher une courte explication en pop-up.

Normalement cela se présente ainsi :

Code:

[pop]Casque du chercheur[:]Ce casque crée pour l'exemple permet à son porteur de blablabla[/pop]

En passant ensuite la souris sur l'ensemble "Casque du chercheur" la suite (Ce casque créer pour...) normalement invisible, apparaît en dessous en surimpression.

Il existe aussi une balise [portrait] (ou autre nom) qui remplace temporairement votre avatar par l'image dont le lien est enfermé dans ces balises. Il suffit de placer cette balise en début de message. On peut également y ajouter un lien qui mène à un post/message particulier ou vers une fiche de personnage. Exemple :

Code:

[portrait=https://chroniques-ds-mondes.forumotion.eu/t20-fiches-de-personnages#46]https://nsm07.casimages.com/img/2017/06/08//17060806072417338715084752.jpg[/portrait]

Là par exemple cela remplacerait mon avatar par CECI et en cliquant sur mon avatar remplacé cela emmènerait vers cet endroit.
Avez-vous une balise de ce genre ?

Je suis navré de flooder un peu. Mais si ces balises n'existent pas, il faudra que je les propose dans le bon topic, ce que je ne peux faire pour l'instant tant que je n'ai pas atteint les 10 messages.

[Chacha]

Bonjour, Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[Arkane 2.0]

HA, cette fois je suis arrivé à temps pour relancer le truc.  

J'en profile pour parler aussi de la balise [Cadre] qui peut être simulée par ceci :

Code:

[table border ="1"][tr][td]élément à mettre sous carde[/td][/tr][/table]

élément à mettre sous carde

Mais ça reste quand même fastidieux pour juste mettre un cadre autour d'un écrit, alors qu'une simple balise pourrait le faire.

[Chacha]

Bonjour, Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[Arkane 2.0]

Ouf, je suis encore arrivé à temps pour relancer le truc. ^^
Petit à petit, j'arriverais à avoir mes dix posts.

[chattigre]

Bonjour,
Je pense qu'il est possible de créer ces balises via Javascript pour votre forum :
https://help.forumotion.com/t153342-tutorial-create-new-bbcode-tags (Un peu d'Anglais ^^)

Vous-y connaissez-vous un peu en HTML / CSS ?
Pouvez-vous faire une liste des balises que vous souhaitez créer en précisant :
- la balise
- le résultat souhaité (si possible avec un visuel pour que je puisse tenter de reproduire le HTML / CSS adapté sauf si vous savez le faire par vous-même)

[Arkane 2.0]

Merci beaucoup pour votre réponse.  

En HTML, sur une échelle de 1 à 10, je dois être à 3 en étant optimiste.
En CSS ça doit être très proche de zéro.

Un script Javascript serait aussi intéressant pour empêcher le résultat d'un dé de changer à chaque édition d'un message.
Vu le nombre de site de JDR ici et l'importance que le résultat d'un dé ne puisse être modifié par un joueur une fois lancé, je suis quasi-sûr que d'autres ont dû trouver une solution.

Pour les balises que je souhaite :

La balise [pop]
La balise [pop], aussi importante que d'empêcher le résultat d'un dé de changer, la balise [pop] est utile pour créer des fiches détaillées sans les alourdir au point de les rendre indigestes.

La balise [pop] est nécessaire, dès lors qu'il est impossible de créer plusieurs feuilles de personnages. Car pour avoir d'autres feuilles de personnages, on peut toujours créer une section "Feuille de personnage" dans laquelle les membres posteront un message mis en page sous forme de feuille de personnage. Mais...... pour que cela fonctionne la balise POP est justement nécessaire.

C'est une balise également très utile pour plein d'autres choses, très utilisée sur Wikipédia par exemple. Elle permet, juste en passant la souris sur un mot, d'afficher une courte explication en pop-up.

Normalement cela se présente ainsi :

Code:

[pop]Casque du chercheur[:]Ce casque crée pour l'exemple permet à son porteur de blablabla[/pop]

En passant ensuite la souris sur l'ensemble "Casque du chercheur" la suite (Ce casque créé pour...) normalement invisible, apparaît en dessous en surimpression.

La balise [portrait]
La balise [portrait] (ou autre nom) remplace temporairement votre avatar par l'image dont le lien est enfermé dans ces balises. Il suffit de placer cette balise en début de message. On peut également y ajouter un lien qui mène à un post/message particulier ou vers une fiche de personnage. Exemple :

Code:

[portrait=https://chroniques-ds-mondes.forumotion.eu/t20-fiches-de-personnages#46]https://nsm07.casimages.com/img/2017/06/08//17060806072417338715084752.jpg[/portrait]

Là par exemple cela remplacerait mon avatar par CECI et en cliquant sur mon avatar remplacé cela emmènerait vers cet endroit.

La balise [cadre]
La balise [Cadre] permet de simuler ceci :

Code:

[table border ="1"][tr][td]élément à mettre sous carde[/td][/tr][/table]

élément à mettre sous carde

Mais avec juste une balise, beaucoup moins fastidieux pour juste mettre un cadre autour d'un écrit. Puis le cadre ne disparait pas à chaque édition comme avec "Table". Cette balise permet également de colorer son cadre avec une couleur en hexadécimal. Exemple :

Code:

[cadre=#339999]élément à mettre sous cadre[/cadre]

La balise [float]
La balise [float] permet à un texte "d'épouser les contours d'une image". On dit "justifier le texte autour d'une image".
On place ces balises autour des balises "img" ou "youtube".
Exemple :

Code:

[float=right][img]http://images1.wikia.nocookie.net/__cb20120624144424/villains/images/3/32/Wizard_(DC).jpg[/img][/float]

Là avec l'indication "right", l'image serait automatiquement à droite du texte que l'on écrirait à sa suite. Qui épouserait donc logiquement le côté gauche de l'image. Voire le bas de l'image si le texte dépasse. Un peu comme là :

blablablbalablablbalablablablablablablablabalbalalbal

La balise [dit]
La balise [dit] permet de simuler ceci :
« Halte là citoyen » dit le mercenaire du Poing Enflammé.
Cette balise met automatiquement les guillemets « », teint en vert classique et met le tout en italique. Indiquant que le personnage parle.

La balise [think]
La balise [think] permet de simuler ceci :
« Un mercenaire du Poing Enflammé ! Que vais-je faire ? » pensa le roublard.
Cette balise met automatiquement les guillemets « », teint en violet classique et met le tout en italique. Indiquant ce que le personnage pense.

La balise [thide=]
Différent de la balise "hide" classique, la balise [thide=] permet de cacher un texte... sauf pour les gens dont les pseudos sont indiqués après le =.
Exemple :

Code:

[thide=Arkane, chattigre]seulement nous deux devrions pouvoir lire ce qu'il y a entre ces balises.[/hide]

La balise [langue=]
Cette balise traduit le texte en une autre langue, sauf pour les gens dont les pseudos sont après le ;
Exemple :

Code:

[langue=italien ; Arkane, chattigre]Ce qu'il y a entre ces balise sera en italien, sauf pour nous deux.[/langue]

Pour tous les autres, cela s'afficherait ainsi : En Italien : « Quello che c'è tra questi tag sarà in italiano, tranne che per noi due. »

Il existe aussi une variante de cette balise, où il est inutile de mettre les pseudos après le ";" car si le joueur a "Italien" dans les langues parlées de sa Feuille de personnage, il pourra automatiquement lire le texte en Français. Mais cette version est peut être un peu compliquée à mettre en place (elle nécessiterait un lien de cause à effet entre la Feuille de personnage et cette balise).

Une autre variante permet de mettre des langues imaginaires comme l'elfe, le nain ou l'orque.
Dans ce cas, soit on associe une langue réelle à une langue imaginaire (exemple : le scandinave ou l'islandais serait associé à l'elfe), soit le texte devient un galimatias incompréhensible, sauf... pour les gens dont les pseudos sont après le ";" ou dont la langue "Elfe" est dans les langues parlées de sa Feuille de personnage.

Une dernière variante permet d'afficher une langue, alors que le texte est écrit en une autre. Utile justement pour les langues imaginaires.
Cela se présente ainsi :

Code:

[langue=nain, italien ; Arkane, chattigre]Ce qu'il y a entre ces balise sera en italien, sauf pour nous deux.[/langue]

Pour tous les autres, cela s'afficherait ainsi : En Nain : « Quello che c'è tra questi tag sarà in italiano, tranne che per noi due. »

Voili-voilou, je crois que c'est tout. ^^

[chattigre]

Bonjour,

Je vais regarder ce qu'il serait possible de faire, en revanche pour [portrait] cela dépasse mes compétences ainsi que [thide] et [langue] (langue je ne sais pas si c'est faisable, portrait et thide sans doute mais je ne saurais comment )

Pour dit et think, le code pour vos exemples serait :

Code:

[think]Un mercenaire du Poing Enflammé ! Que vais-je faire[/think] pensa le roublard.

ou

Code:

[think=le roublard]Un mercenaire du Poing Enflammé ! Que vais-je faire[/think].

« Un mercenaire du Poing Enflammé ! Que vais-je faire ? » pensa le roublard.

Bonne journée

[Arkane 2.0]

Merci infiniment.

Tes deux exemples : "Think" sont parfaits. Le deuxième mieux que le premier.

La balise [langue] existe déjà sur d'autres forums. Je ne parle que de balises que j'ai déjà vu et souvent utilisé.

Bonne journée à toi aussi.

[chattigre]

Alors alors ^^

Que pensez-vous de ça ? :

Tant au niveau fonctionnel qu'au niveau style, tout est ajustable ^^

Bonne journée

[Arkane 2.0]

C'est tout parfait !  

Sauf pour la balise [Float] où je ne peux pas me rendre bien compte, vu que de mon côté ça n'affiche que ça :
[Seuls les administrateurs ont le droit de voir cette image]
[Seuls les administrateurs ont le droit de voir cette image]
[Seuls les administrateurs ont le droit de voir cette image] Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet [Seuls les administrateurs ont le droit de voir cette image]

Sinon t'es un génie.

[chattigre]

Re,
Alors le code JS de base c'est pas moi hein, ça me dépasse largement
J'ai repris le lien que je t'ai donné plus haut.

ça doit être bon pour voir les images maintenant, désolé

Tu veux changer des couleurs ou autres styles ?
Sinon tu as les codes dans le spoiler du message
 - Un peu de CSS
 - Le code Javascript à placer sur Toutes les pages

[Arkane 2.0]

Oui je vois une spirale sur une petite baballe jaune. ^^

Le dernier :

Code:

[*float="right"][img]https://2img.net/i/fa/i/smiles/at.png[/img][/float]Lorem ipsum dolor sit amet

est presque parfait. Le texte est tout de même un peu loin de l'image au lieu de "l'épouser". Mais l'idée est là.

Arf, qu'est-ce que je l'aime ce Blabla visible.  

Code:

[*pop="texte descriptif \n ligne"]Blabla visible[/pop]

Il va m'éviter bien des complications. Simplifier bien des choses à moi et aux membres de mon forum.
C'est miraculeux.

Merci beaucoup.

[chattigre]

Pour préciser certaines choses au cas où :
- Pour la balise cadre, le cadre est noir par défaut, si aucune couleur n'est précisée.
- Pour les balises dit et think, si le nom n'est pas précisé c'est "un personnage anonyme", je pense qu'en cherchant dans le JS tu devrais trouver les deux endroits (un par balise) où changer ça si besoin ^^.
- Pour pop, on peut éventuellement inverser le "texte visible" et le contenu de la popup dans la structure de la balise si besoin
- Pour float il faut faire attention avec l'éditeur qui ajoute des <br>, donc le mieux est de ne pas mettre de sauts de ligne entre les éléments.
J'ai corrigé le JS vers 19h55 (une virgule traînante ^^) si besoin il est préférable de l'actualiser...

Je remets l'ensemble ici pour archive :

Code:


.cdm_pop {
  text-decoration: underline;
  text-decoration-style: dashed;
}
.cdm_pop:hover {
  text-decoration-color: darkblue;
}

.cdm_cadre {
  display: inline-block;
  padding: 3px;
  margin: 2px;
  border: 1px solid;
}

.cdm_float {
  display: inline-block;
}

.cdm_dit_txt {
  font-style: italic;
  color: green;
}

.cdm_think_txt {
  font-style: italic;
  color: blueviolet;
}


Code:


/*
         *  Application: Create New BBCode Tags
         *  Date: 18/05/2018
         *  Version: 1.321052018
         *  Copyright (c) 2018 Daemon <help.forumotion.com>
         *  This work is free. You can redistribute it and/or modify it
         */
        (function() {
            BBParser = {
                initialize: function() {
                    $(function() {
                        BBParser.setupBBParser();
                    });
                },
                add: [
                    /*
                    * Note: Add a comma at the end of each new entry
                    * '{option}' corresponds to the optional tag title, and '{content}' correspond to the text between the tags
                    */
         
                    {
                        tag: 'pop',
                        close: true,
                        replacement: '<span class="cdm_pop" title="{option}">{content}</span>'
                    },
                    {
                        tag: 'cadre',
                        close: true,
                        defaultOption: '#000000',
                        replacement: '<div class="cdm_cadre" style="border-color:{option}">{content}</div>'
                    },
                    {
                        tag: 'float',
                        close: true,
                        defaultOption: 'left',
                        replacement: '<div class="cdm_float" style="float:{option}">{content}</div>'
                    },
                    {
                        tag: 'dit',
                        close: true,
                        defaultOption: 'un personnage anonyme',
                        replacement: '<span class="cdm_dit"><span class="cdm_dit_txt">« {content} » </span><span class="cdm_dit_auth">dit {option}</span>'
                    },
                    {
                        tag: 'think',
                        close: true,
                        defaultOption: 'un personnage anonyme',
                        replacement: '<span class="cdm_think"><span class="cdm_think_txt">« {content} » </span><span class="cdm_think_auth">pense {option}</span>'
                    }
         
                    // Note: Do not add a comma at the end of the last entry
                ],
                // Do not change anything down
                validateTag: function(a) {
                    if (!/^\w+$/.test(a)) throw new RangeError("You added an invalid tag: " + a);
                },
                replacers: function(a, b, c) {
                    return (a || "").replace(/{option}/g, b || "").replace(/{content}/g, c || "");
                },
                optionReg: /.*?=("|'|)(.*?)\1\]/,
                parsedContent: function(a, b, c) {
                    return a.replace(c ? RegExp("(\\[" + b.tag + "[^\\]]*\\])([\\s\\S]*?)\\[/" + b.tag + "]", "g" + (b.insensitive ? "i" : "")) : RegExp("\\[" + b.tag + "[^\\]]*\\]", "g" + (b.insensitive ? "i" : "")), function(d, e, f) {
                        c || (e = d);
                        e = BBParser.optionReg.test(e) ? e.replace(BBParser.optionReg, "$2") : b.defaultOption;
                        if("undefined" !== typeof b.replace) {
                            d = c ? b.replace(e, f) : b.replace(e);
                            "string" === typeof d ? c ? f = d : e = d : d;
                            "object" === typeof d && (e = d.option || e, f = d.content || f);
                        }
                        return BBParser.replacers(b.replacement, e, f);
                    });
                },
                setupBBParser: function() {
                    var postBody = $(".post, .postbody, .blog_message, .post-content");
                    for (var i = 0, e;(e = postBody[i++]);) {
                        for (var j in BBParser.add) {
                            var item = BBParser.add[j];
                            // Validating tag
                            BBParser.validateTag(item.tag);
                            e.innerHTML = BBParser.parsedContent(e.innerHTML, item, item.close);
                        }
                    }
                }
            };
            BBParser.initialize()
        })();


Bonne soirée

[Arkane 2.0]

Bon, ya certainement quelque chose que je fais mal, mais je n'arrive pas à savoir quoi.

Je suis allé dans Panneau d'Administration puis Modules puis HTML & JAVASCRIPT, puis Gestion des codes Javascript.

J'ai bien coché le cercle Activer la gestion des codes Javascript :.
J'ai cliqué sur le bouton CREER UN NOUVEAU JAVASCRIPT.

J'ai copié-collé le contenu de ces deux pavés Javascript que tu m'as présenté. D'abord en deux Javascripts, puis j'ai testé aussi en un seul.
J'ai bien coché la case Sur toutes les pages.

J'ai bien cliqué sur ENREGISTRER.

Je reviens sur mon forum, je teste les balises...... aucun effet. Comprends Pas.

Je vois bien que ça marche chez toi, donc c'est que ça fonctionne, en tout cas c'est de bonne augure.
Mais sur mon forum, pas du tout.

Merci tout de même, ça reste une avancée majeure du schmilblick.

Bonne Soirée.

[chattigre]

Ah pardon je n'ai pas précisé
Le premier bloc est du CSS
A mettre dans Affichage /Couleurs /Feuille de style CSS donc

Bonne soirée

[Arkane 2.0]

Youhouuuuuuuuuuuu ! C'est magique, ça marche ! (Arkane à la découverte des mystères du CSS)

Par contre pour la balise POP tu disais qu'on pouvait intervertir "Blabla visible" et "texte descriptif \n ligne" ?

Finalement après des tests, je m'aperçois que ce serait bien mieux. Cela permettrait peut être de pouvoir mettre un listing en POP.
Exemple : en passant la souris sur "Résultat de +19" on aurait en POP :

+3 pour nanannanan +2 parce qu'il fait beau +5 parce que je le vaut bien ...

Parce que sinon ça met tout sur une seule et même ligne interminable. Comment on fait ça ?
Je vais chercher et me casser la nénette en attendant.

[chattigre]

Euh...
Quand je parlais d'intervertir, je parlais d'intervertir la structure de la balise, inverser l'emplacement de la partie "pop" et de la partie "visible".
Comme la balise utilise l'attribut natif title pour la partie en popup, on ne peut pas mettre en forme le popup plus que cela.
A la limite mettre un retour à la ligne mais il y a 90% de probabilité que cela plante à cause des <br> ajoutés par l'éditeur Forumactif...

Moralité si vous voulez de la mise en forme (et n'importe quel HTML valide pour le coup, gras, listes...) il va falloir combiner le script actuel avec un autre

Je vais fouiller un peu, c'est possible mais j'ai peur que ça atteigne mon très bas niveau en JS et qu'il vaille mieux que je passe la fin pour cet ajout (et toujours éventuellement les balises manquantes)

[Arkane 2.0]

Euh...
Quand je parlais d'intervertir, je parlais d'intervertir la structure de la balise, inverser l'emplacement de la partie "pop" et de la partie "visible".

Je me suis sans doute mal expliqué, mais Oui c'est comme ça que je le voyais.

Imagines qu'avec le montage suivant :

Code:

[*pop="texte descriptif \n ligne"]Blabla visible[/pop]

Ce soit "Blabla visible" qui soit en Pop-up au lieu de "texte descriptif \n ligne".
Du coup on pourrait en toute logique pouvoir faire ce montage :

Code:

[*pop="texte descriptif \n ligne"]Blabla visible n°1
Blabla visible n°2
Blabla visible n°3[/pop]

Et ainsi on aurait texte descriptif \n ligne visible et en passant la souris dessus on aurait ça en pop-up :

Blabla visible n°1 Blabla visible n°2 Blabla visible n°3

En tout cas merci énormément pour ton aide, même avec ton "humble niveau" ça a débloqué pas mal de choses.
Sinon, malgré le fait que ces Javascripts (et CSS) dépannent, tu crois que je peux quand même proposer mes balises au vote ?

[chattigre]

Les proposer au vote, pour think et dit, je ne pense pas. C'est simplement de la mise en forme en fait, c'est propre à chaque forum . Pareil pour cadre, il y énormément de mises en forme imaginables, ce serait impossible de faire quelque chose qui convienne à tous...
Pour pop, pourquoi pas à la limite mais il y a encore beaucoup de possibilités quand même.

J'ai une solution pour adapter pop à quelque chose de mis en forme multiligne, il faut que j'adapte les codes je fais ça entre ce soir et demain midi, mais c'est possible ^^
Le texte visible passera dans la balise entre guillemets et le contenu du popup entre les balises

[chattigre]

Re,
Alors maintenant la syntaxe est la suivante :

Code:

[pop="Texte à survoler"]Blabla !
[list][*]Element 1
[*]Element 2
[*]...[/list][/pop]

(Ici on a une ligne et une liste dans le popup...)

Remplace l'intégralité des codes précédents par :
CSS:

Code:

.cdm_pop {
  position: relative;
  display: inline-block;
  text-decoration: underline dotted darkblue;
}

.cdm_pop .cdm_pop_text {
  visibility: hidden;
  display: none;
  width: max-content;
  max-width: 300px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px;
  border-radius: 6px;
  bottom: 100%;
  left: 50%;
  margin-left: 0;
  position: absolute;
  z-index: 1;
  text-decoration: initial;
}

.cdm_pop:hover .cdm_pop_text {
  visibility: visible;
  display: block;
}
.cdm_cadre {
  display: inline-block;
  padding: 3px;
  margin: 2px;
  border: 1px solid;
}

.cdm_float {
  display: inline-block;
}

.cdm_dit_txt {
  font-style: italic;
  color: green;
}

.cdm_think_txt {
  font-style: italic;
  color: blueviolet;
}


JS :

Code:

/*
        *  Application: Create New BBCode Tags
        *  Date: 18/05/2018
        *  Version: 1.321052018
        *  Copyright (c) 2018 Daemon <help.forumotion.com>
        *  This work is free. You can redistribute it and/or modify it
        */
        (function() {
            BBParser = {
                initialize: function() {
                    $(function() {
                        BBParser.setupBBParser();
                    });
                },
                add: [
                    /*
                    * Note: Add a comma at the end of each new entry
                    * '{option}' corresponds to the optional tag title, and '{content}' correspond to the text between the tags
                    */
       
                    {
                        tag: 'pop',
                        close: true,
                        replacement: '<div class="cdm_pop">{option}<div class="cdm_pop_text">{content}</div></div>'
                    },
                    {
                        tag: 'cadre',
                        close: true,
                        defaultOption: '#000000',
                        replacement: '<div class="cdm_cadre" style="border-color:{option}">{content}</div>'
                    },
                    {
                        tag: 'float',
                        close: true,
                        defaultOption: 'left',
                        replacement: '<div class="cdm_float" style="float:{option}">{content}</div>'
                    },
                    {
                        tag: 'dit',
                        close: true,
                        defaultOption: 'un personnage anonyme',
                        replacement: '<span class="cdm_dit"><span class="cdm_dit_txt">« {content} » </span><span class="cdm_dit_auth">dit {option}</span>'
                    },
                    {
                        tag: 'think',
                        close: true,
                        defaultOption: 'un personnage anonyme',
                        replacement: '<span class="cdm_think"><span class="cdm_think_txt">« {content} » </span><span class="cdm_think_auth">pense {option}</span>'
                    }
       
                    // Note: Do not add a comma at the end of the last entry
                ],
                // Do not change anything down
                validateTag: function(a) {
                    if (!/^\w+$/.test(a)) throw new RangeError("You added an invalid tag: " + a);
                },
                replacers: function(a, b, c) {
                    return (a || "").replace(/{option}/g, b || "").replace(/{content}/g, c || "");
                },
                optionReg: /.*?=("|'|)(.*?)\1\]/,
                parsedContent: function(a, b, c) {
                    return a.replace(c ? RegExp("(\\[" + b.tag + "[^\\]]*\\])([\\s\\S]*?)\\[/" + b.tag + "]", "g" + (b.insensitive ? "i" : "")) : RegExp("\\[" + b.tag + "[^\\]]*\\]", "g" + (b.insensitive ? "i" : "")), function(d, e, f) {
                        c || (e = d);
                        e = BBParser.optionReg.test(e) ? e.replace(BBParser.optionReg, "$2") : b.defaultOption;
                        if("undefined" !== typeof b.replace) {
                            d = c ? b.replace(e, f) : b.replace(e);
                            "string" === typeof d ? c ? f = d : e = d : d;
                            "object" === typeof d && (e = d.option || e, f = d.content || f);
                        }
                        return BBParser.replacers(b.replacement, e, f);
                    });
                },
                setupBBParser: function() {
                    var postBody = $(".post, .postbody, .blog_message, .post-content");
                    for (var i = 0, e;(e = postBody[i++]);) {
                        for (var j in BBParser.add) {
                            var item = BBParser.add[j];
                            // Validating tag
                            BBParser.validateTag(item.tag);
                            e.innerHTML = BBParser.parsedContent(e.innerHTML, item, item.close);
                        }
                    }
                }
            };
            BBParser.initialize()
        })();

Il subsiste un petit souci : Si le contenu de la popup est sur trop de lignes et qu'il est amené à déborder du cadre global du message, il est fort probable que le haut du popup (qui devrait sortir du message) soit masqué...

Peux-tu tester et me confirmer ce souci directement en fonction de ton forum ?

[Arkane 2.0]

Bah pour l'instant à dix lignes ça tient encore le coup et je doute qu'on ait besoin de plus pour un pop-up.  


Par contre je pense que c'est une balise que je vais tout de même proposer (et peut être bien les autres aussi). Car il y a cependant un défaut majeur pour que ce soit fonctionnel à 100% et j'ai l'impression d'ailleurs que c'est récurent quand on rajoute des balises avec du Javascript. C'est que ya tout qui pète dès lors que tu veux éditer un post avec ces balises "rajoutées". Cela pète déjà dès que tu fais une prévisualisation et que tu valides ton post ensuite.

Malgré tout, ça dépanne énormément. Faut juste ne pas faire de prévisualisation, et ne plus jamais éditer ton post.
C'est un peu comme proposer un scooter quand t'as besoin d'une voiture, mais dès lors que t'es à pieds tu fais pas le difficile.
Merci beaucoup encore pour ton aide.

[chattigre]

Par contre je pense que c'est une balise que je vais tout de même proposer (et peut être bien les autres aussi). Car il y a cependant un défaut majeur pour que ce soit fonctionnel à 100% et j'ai l'impression d'ailleurs que c'est récurent quand on rajoute des balises avec du Javascript. C'est que ya tout qui pète dès lors que tu veux éditer un post avec ces balises "rajoutées". Cela pète déjà dès que tu fais une prévisualisation et que tu valides ton post ensuite.

Comment ça ? On voit le code ? Je ne comprends pas là...
Surtout à l'édition, moi je peux éditer sans problème... par contre c'est sûr qu'on voit le code, mais balise officielle ou pas ce sera toujours le cas...

Une capture du souci serait bienvenue ^^ (Pour la prévisualisation aussi)

[Arkane 2.0]

Si nécessaire je vais faire cette capture d'écran.
Navré pour l'attente mais l'espace d'un instant quand j'ai voulu faire un post de démo, plus rien ne fonctionnait pour les balises.
Puis en recollant le CSS et le Javascript une nouvelle fois, tout est revenu.

En attendant, voici un LIEN vers un visuel. C'est tout en bas, les deux derniers posts.
L'avant dernier c'est sans prévisualisation, les dernier c'est avec (mais en éditant ça fait aussi la même chose).
Dis moi si tu vois le schmilblick ? Je suis désolé si je me suis mal expliqué tout à l'heure.

[chattigre]

Oulà, je confirme que c'est anormal
Je vais regarder ça ^^

[chattigre]

Bon, j'ai trouvé la cause ^^

Remplacez le JS par :

Code:

/*
        *  Application: Create New BBCode Tags
        *  Date: 18/05/2018
        *  Version: 1.321052018
        *  Copyright (c) 2018 Daemon <help.forumotion.com>
        *  This work is free. You can redistribute it and/or modify it
        */
        (function() {
            BBParser = {
                initialize: function() {
                    $(function() {
                        BBParser.setupBBParser();
                    });
                },
                add: [
                    /*
                    * Note: Add a comma at the end of each new entry
                    * '{option}' corresponds to the optional tag title, and '{content}' correspond to the text between the tags
                    */
       
                    {
                        tag: 'pop',
                        close: true,
                        replacement: '<div class="cdm_pop">{option}<div class="cdm_pop_text">{content}</div></div>'
                    },
                    {
                        tag: 'cadre',
                        close: true,
                        defaultOption: '#000000',
                        replacement: '<div class="cdm_cadre" style="border-color:{option}">{content}</div>'
                    },
                    {
                        tag: 'float',
                        close: true,
                        defaultOption: 'left',
                        replacement: '<div class="cdm_float" style="float:{option}">{content}</div>'
                    },
                    {
                        tag: 'dit',
                        close: true,
                        defaultOption: 'un personnage anonyme',
                        replacement: '<span class="cdm_dit"><span class="cdm_dit_txt">« {content} » </span><span class="cdm_dit_auth">dit {option}</span>'
                    },
                    {
                        tag: 'think',
                        close: true,
                        defaultOption: 'un personnage anonyme',
                        replacement: '<span class="cdm_think"><span class="cdm_think_txt">« {content} » </span><span class="cdm_think_auth">pense {option}</span>'
                    }
       
                    // Note: Do not add a comma at the end of the last entry
                ],
                // Do not change anything down
                validateTag: function(a) {
                    if (!/^\w+$/.test(a)) throw new RangeError("You added an invalid tag: " + a);
                },
                replacers: function(a, b, c) {
                    return (a || "").replace(/{option}/g, b || "").replace(/{content}/g, c || "");
                },
                optionReg: /.*?=("|'|)(.*?)\1\]/,
                parsedContent: function(a, b, c) {
                    return a.replace(c ? RegExp("(\\[" + b.tag + "[^\\]]*\\])([\\s\\S]*?)\\[/" + b.tag + "]", "g" + (b.insensitive ? "i" : "")) : RegExp("\\[" + b.tag + "[^\\]]*\\]", "g" + (b.insensitive ? "i" : "")), function(d, e, f) {
                        c || (e = d);
                        e = BBParser.optionReg.test(e) ? e.replace(BBParser.optionReg, "$2") : b.defaultOption;
                        if("undefined" !== typeof b.replace) {
                            d = c ? b.replace(e, f) : b.replace(e);
                            "string" === typeof d ? c ? f = d : e = d : d;
                            "object" === typeof d && (e = d.option || e, f = d.content || f);
                        }
                        return BBParser.replacers(b.replacement, e, f);
                    });
                },
                setupBBParser: function() {
                    var postBody = $("tr.post, div.postbody, div.blog_message, div.post-content");
                    for (var i = 0, e;(e = postBody[i++]);) {
                        for (var j in BBParser.add) {
                            var item = BBParser.add[j];
                            // Validating tag
                            BBParser.validateTag(item.tag);
                            e.innerHTML = BBParser.parsedContent(e.innerHTML, item, item.close);
                        }
                    }
                }
            };
            BBParser.initialize()
        })();

Ce serait pas mieux comme ça ?

[Arkane 2.0]

HAHA ! Bah voui là tout de suite ça va beaucoup mieux !  

Comme tu peux le voir sur ce LIEN (dernier post).
Tu peux voir aussi que le problème impactait d'autres balises, d'où le fais que j'incriminais à tort le Javascript.  

Je me rends compte que je n'y serais jamais arrivé tout seul, même avec le Topic explicatif.

[chattigre]

C'est cette ligne là qui était un peu trop gourmande

Code:

                    var postBody = $(".post, .postbody, .blog_message, .post-content");

Parce que (allez savoir pourquoi ) en version phpBB2 la zone de texte qui contient le texte du message a une classe post
Du coup, en cas d'édition / prévisualisation elle contient le message... et le script procédait au remplacement des balises en code HTML
J'ai restreint l'action du code strictement aux tr.post, et le remplacement ne se fait plus...

A NOTER que :
- Sur une connexion internet lente, les balises et leur contenu peuvent s'afficher sous forme de code une seconde ou deux avant le remplacement par le JS, mais c'est à peine visible.
- Les balises ne seront pas fonctionnelles si un utilisateur désactive le Javascript (à part les développeurs, personne ou presque ne le fait, faut le faire exprès ^^)

Concernant d'éventuelles suggestions, plusieurs sont déjà à l'étude :
[BBcode] Amélioration de la balise hide
[BBcode] Création libre de balises BBcode supplémentaires
[BBcode] Texte caché pour une certaine personne
Du coup je ne sais pas si une nouvelle suggestion est utile, à part peut-être pour pop.

En tout cas au moins pour think et dit, je reconfirme ma position sur le fait que c'est propre à ton forum et que du coup c'est la 2e suggestion (création libre de balises) déjà proposée qui serait adaptée

A noter que :

Aucune information relative à la faisabilité ou au délai quant à la mise en place de ses suggestions ne peut être donnée !

 

Si il y a d'autres soucis, n'hésite pas ^^

[Arkane 2.0]

Navré pour la latence de réponse. Le taf qui peut être chronophage.  

Hé bien maintenant que ce problème...

Code:

                   var postBody = $(".post, .postbody, .blog_message, .post-content");

....semble résolu, je suis assez d'accord avec toi. D'ailleurs je pense sincèrement que ce topic peut aider beaucoup d'autres personnes.
Penses-tu que cette ligne de Javascript peut aussi aider à "figer" le résultat d'un dé, de manière à ce qu'un édit ne change pas le résultat ?

Pour la balise "Hide=" il me semblait avoir vu rapidement quelque chose à ce sujet dans les propositions, mais je n'en étais pas sûr.  

La balise "POP" peut être utile pour tellement de choses que ça serait dommage d'en priver ceux qui n'ont pas pensé à du Javascript.
Reste aussi les balises "Portrait" et "Langue", dont l'apparente complexité nécessiterait un traitement spécial.
Pour défendre le steak, je dirais que ces balises ne seraient pas uniquement utiles pour les forums de JDR (qui sont tout de même assez nombreux sur ForumActif) mais aussi pour les forums donnant des cours de langue (mettant en scène des personnages imaginaires) ou ceux qui font simplement dans la déconne.

Merci encore pour ton, aide. Voici ICI ce que donne la balise "POP" en situation sur une feuille de personnage mise en forme sur un topic.

[chattigre]

Navré pour la latence de réponse. Le taf qui peut être chronophage.  

Pas de souci ^^

Penses-tu que cette ligne de Javascript peut aussi aider à "figer" le résultat d'un dé, de manière à ce qu'un édit ne change pas le résultat ?

Cette ligne ? Aucun rapport
Mais il est peut-être possible de faire quelque chose, même si j'en doute.
Sinon il ne faut pas utiliser le BBCode [ roll ] mais l'option "lancé de dés" sous le message. L'inconvénient est que le résultat n'est pas intégré au message mais posté dans un message (automatique) à la suite du sujet.

Reste aussi les balises "Portrait" et "Langue", dont l'apparente complexité nécessiterait un traitement spécial.

Autant langue est vraiment complexe, il faut faire appel à un traducteur automatique externe via une API qui revoie le résultat, récupérer ce résultat et ensuite le réinjecter à la place.
Pour la langue spécifique à certains membres c'est encore plus complexe car si c'est il faut vérifier le pseudo et regarder s'il est dans la balise et agir en fonction... Possible mais ça me dépasse clairement ^^

Pour portrait, c'est largement faisable je pense, il faut :
- Détecter la balise, récupérer l'url image et l'url du lien, effacer la balise du message
- Remplacer l'attribut href et l'attribut src du lien et de l'image correspondants au message
Je voudrais pas faire de bêtise, donc je fais pas, mais c'est faisable pour quelqu'un qui sait créer du JS et pas seulement en adapter...

Merci encore pour ton, aide. Voici ICI ce que donne la balise "POP" en situation sur une feuille de personnage mise en forme sur un topic.

Heureux de voir que ça sert

---

Peux-tu me faire un retour par rapport à ceci s'il te plait ? :

Il subsiste un petit souci : Si le contenu de la popup est sur trop de lignes et qu'il est amené à déborder du cadre global du message, il est fort probable que le haut du popup (qui devrait sortir du message) soit masqué...

Peux-tu tester et me confirmer ce souci directement en fonction de ton forum ?

A savoir qu'actuellement la largeur de la popup est limitée à 350px dans le CSS donc potentiellement tes 10 lignes peuvent en prendre 15 ou 20, d'abord parce qu'il faut bien mettre une limite ^^ et pour que ça passe à peu près sur mobile qui font (presque) tous au moins 400px (je dis bien à peu près parce que le mobile et les popup c'est pas une histoire d'amour
 
Bonne journée !