Quelques petits soucis techniques 3

[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

Me voilà obligé de relancer encore une fois le topic, verrouillé alors que le dernier post ne datait que de trois jours.
Cela devient vraiment pénible ! Les gens ont une vie à côté, vous savez ?

Remplace le Javascript par cette nouvelle version :

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,
                        replacement: '<span class="cdm_dit"><span class="cdm_dit_txt">« {content} »</span><span class="cdm_dit_auth">{option}</span>',
                        replace: function(option, content) {
                          if (option) {
                              return {
                                  option: ' dit ' + option,
                                  content: content
                              };
                          }
             }
                    },
                    {
                        tag: 'think',
                        close: true,
                        replacement: '<span class="cdm_think"><span class="cdm_think_txt">« {content} » </span><span class="cdm_think_auth">{option}</span>',
                        replace: function(option, content) {
                          if (option) {
                              return {
                                  option: ' pense ' + option,
                                  content: content
                              };
                          }
             }
                    }
        
                    // 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()
        })();

Ok, ça marche ! Merci beaucoup !

Comme ça je dirais un peu de CSS et éventuellement un code JS pour un nouveau BBCode si besoin
Pour ça il faudrait voir comment tu souhaites utiliser cette police dans tes messages Wink

Ma foi, je ne sais pas trop. Est-ce qu'on peut intégrer une nouvelle police parmi celles qu'il y a déjà ? Si rajouter un pseudo dans la balise pour que seulement un seul individu puisse lire le texte dans une police normale (alors que tous les autres lecteurs verraient l'autre police codée) s'avère trop compliqué, peut on mettre un mot de passe sur un texte qu'il faudrait rentrer pour le rendre lisible ?

Pour le mettre en dessous Smile
Remplace le CSS que je t'ai donné précédemment par celui-ci (seule une ligne change mais je te redonne tout c'est plus simple Very Happy

Code:

.cdm_pop {
  position: relative;
  display: inline-block;
  text-decoration: underline dotted darkblue;
}
 
/* Tooltip text */
.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;
  top: 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;
}


OKi c'est super ! Nickel !

c'est normal que depuis aujourd'hui (07/07) toutes les balises "code" fonctionnent comme des balises "quote" ?

Euh, quoi ? What's happen ?!? Je comprends pas ce que tu veux dire ^^

Tu comprendra mieux en regardant ICI (tout en bas, dernier post).
Tu vois ya plus de "tableau noir" quand je mets des balises codes et on ne voit plus les balises à l'intérieur de celui-ci.

Et désolé encore pour le délai de réponse, je ne suis pas dans de très bonnes conditions pour me pencher sur du code ces jours-ci mais là j'avais un moment Wink

Nan mais ya pas de problèmes, on a tous une vie. C'est déjà vachement sympa de m'aider. Moi j'ai le temps, ça va, c'est un hobby. C'est juste ce verrouillage intempestif de sujet (à peine trois jours après le dernier post cette fois-ci, c'est abusé) qui devient vraiment irritant.

[Chacha]

Nan mais ya pas de problèmes, on a tous une vie. C'est déjà vachement sympa de m'aider. Moi j'ai le temps, ça va, c'est un hobby. C'est juste ce verrouillage intempestif de sujet (à peine trois jours après le dernier post cette fois-ci, c'est abusé) qui devient vraiment irritant.

Comme vous n'avez pas pris la peine de lire ma réponse faite par MP à 15:51, je vous remts ma réponse donc ici !

Bonjour,

Prenez connaissance de cette annonce : Rappel des règles de l'Entraide : sujets verrouillés

Vous avez une vie, (moi aussi), mais surtout mon rôle est de gérer notamment les sujets selon les directives reçues !....

Un rappel a été fait à 6 jours sans réponse de l'auteur du sujet, (et non du dernier intervenant), ledit sujet aurait dû être déplacé en corbeille le 7ème jour. J'ai néanmoins fait un rappel après 8 jours !

Pour info, les rappels que je fais ne sont nullement une obligation, je pourrais très bien clôturer directement un sujet resté sans réponse de l'auteur du sujet directement après 7 jours.

Veuillez cessez s'il vous plait.

J'ignorerai pour cette fois cette remarque, je vous conseille vivement de relire les différentes règles du forum d'entraide!

Cordialement.

[Arkane 2.0]

Ce n'est pas que je n'ai pas pris la peine de lire votre réponse, c'est surtout que j'étais déjà occupé à remplir le formulaire pour la énième fois avant de pouvoir reposter le sujet. Je peux pas être partout.

Cela pourrait être inscrit sur les tablettes de Moïse que ça ne changerait pas le fait que 6-7 ou 8 jours c'est un timing beaucoup trop serré, surtout si vous comptez depuis MON dernier post au lieu DU dernier post. Du coup tu divises le temps par 2, ce qui laisse à peine 3 jours à l'interlocuteur pour répondre et 3 jours pour que toi tu puisses le faire. Genre faut pas te faire vacciner à ce moment là, car t'es séché 3 jours justement.

[Chacha]

Il suffisait de demander courtoisement, (et sans se mêler de donner des conseils sur la gestion de ce forum), pour que le sujet soit replacé...

C'est la raison pour laquelle :
   un sujet sans réponse de la part de son auteur depuis 7 jours au moins est corbeillé,

A lire ou relire... https://forum.forumactif.com/t363057-rappel-des-regles-de-l-entraide-sujets-verrouilles :

Bonjour,

Face à une recrudescence des messages de membres à destination du staff visant à protester contre le verrouillage ou le corbeillage de leur sujet, nous tenons à vous rappeler certains faits. Tout d'abord, que ce forum compte à l'heure actuelle 177639 membres, que nous recevons en moyenne 1400 demandes d'aide par mois (soit 10900 messages), et enfin que l'équipe de ce forum est composé en tout et pour tout d'une vingtaine de personnes,

Dès lors, afin de conserver un forum clair, joignant l'efficacité et l'utilité à l'agréable, il est nécessaire d'instaurer et de respecter strictement certaines règles.
C'est la raison pour laquelle :

• un sujet sans réponse de la part de son auteur depuis 7 jours au moins est corbeillé,
  
• un sujet sans réponse de la part de son auteur dans la section "problème de connexion" depuis 3 jours au moins est corbeillé
  
• un sujet ne répondant pas aux règles du forum est susceptible d'être verrouillé sans que cela ne puisse faire l'objet d'une quelconque voie de contestation,
  

Il est par conséquent inutile d'adresser vos admonestations, réprimandes, reproches et autres discours moralisateurs aux membres du staff qui ne font qu'appliquer les règles dans l'intérêt général du Forum.

Si votre sujet a été délesté, faute de ne plus avoir reçu de réponse de votre part depuis plus de 7 jours, vous pouvez adresser un MP à un membre du staff en précisant l'adresse du sujet, et en demandant sa restauration. Tout commentaire agressif supplémentaire est superflu, auquel cas le staff se réserve bien évidemment le droit de refuser le replacement d'un sujet, en complément d'une éventuelle sanction.

[Arkane 2.0]

Ok, on redescend d'un étage. Des soucis de santé mon rendu de mauvais poil.
Et quand tu gères un paquet de problèmes, le moindre type qui te marches sur le pied en prend pour tout le reste.

Cela dit même si c'était très maladroit de ma part, comme dans tous les forums les problèmes ne se repèrent que lorsqu'il y a quelqu'un pour râler dessus.

Là le timing beaucoup trop serré avant verrouillage d'un sujet c'est vraiment un problème. Même si cela paraissait justifié à première vue. Un problème à résoudre donc.
Surtout si cela devient discriminatoire pour une partie des usagers, c'est qu'il faut changer quelque chose dans le règlement. S'adapter.
Là je pense que se fixer sur le dernier post pour les sept jours, plutôt que le dernier post de l'auteur du sujet, cela me paraîtrait plus raisonnable pour tout le monde.

=> Surtout que si on lit entre les petites lignes :

Sans réponse de la part de son auteur...

C'est à cela que ça correspond dans le règlement.
Car selon la définition première : "une réponse est un retour à un message écrit ou oral".
Mon interlocuteur ayant posté il y a trois jours, ma réponse (celle de l'auteur du sujet) à son message avait encore quatre jours de délai.
Car le règlement emploie bien le terme de Réponse et non de Post ou de Message de l'auteur. Tacitement le temps doit donc se compter depuis le dernier message, pour que le terme Réponse soit respecté.

[chattigre]

Bonjour,

Concernant la balise pour changer de police, comme tu souhaite qu'elle soit inactive pour certains membres, je préfère là aussi passer la main

Concernant le souci des balises code, effectivement mes nouvelles balises ne sont pas compatibles. aussi si tu ne souhaites pas de transformation pour faire par exemple un tutoriel, il faut par exemple écrire les balises avec un espace
[ dit]blabla[/ dit]
Je vais regarder quand même, mais je ne sais pas si j'arriverai à modifier le code puisqu'il faudrait toucher au mécanisme de remplacement que je ne maîtrise pas

Par contre, aucune raison que cela modifie l'apparence des balises code...
Essaye d'en utiliser une avec un code qui ne contient pas mes balises, je pense que cela ne changera rien ^^
Mais si tu veux un fond noir sur les blocs de code, c'est possible

Bonne journée

[Arkane 2.0]

Lorsque cela ne contient aucune de tes balises, ce qui est écrit entre les balises |code| s'affichent bien en mode code avec les balises bien visibles. Mais étrangement cela a toujours l'apparence d'un bloc |quote|.

Le plus étrange c'est que jusqu'au 07 Juillet j'avait bien un fond noir et même tes balises apparaissaient entre les balises |code|.

Pourtant à cette date, moi je n'avais rien touché.
J'ai demandé par MP aux autres membres de mon staff, idem (ils étaient tous absents ce jour là et les dates de connections le confirment).
Je suppose donc (peut être à tort, je ne sais pas) qu'un codeur de Forum.actif a touché quelque chose qu'il ne fallait pas.
Cela se vérifie si d'autres forums de Forum.actif sont impactés. Mais je n'ai pas cette information. Je pose donc la question.

Merci pour ton conseil d'écrire les balises avec un espace pour un tutoriel.
J'aimerais effectivement faire profiter les membres de mon staff de tes astuces, l'un d'eux a déjà fait un topic-archive dessus.
J'ai trouvé l'idée de mettre des barre verticales "|" à la place des crochets en attendant.

Si tu as une astuce pour juste ajouter une nouvelle police, je prends quand même.
Je ferais un combo avec les balises |hide| (ou autre) dès qu'ils auront résolu le problème de filtrer qui voit quoi.
Puisqu'il semblerait que ce soit déjà répertorié comme taf à faire.
Comme par exemple mettre le texte en double : une fois dans une police illisible pour les autres lecteurs, et une deuxième fois dans une police normale, mais entre des balises permettant de cibler qui peut lire ce texte.

Ah tient, en parlant des balises |quote|, cette apparence de "surlignage" flashy vert avec une police en miniature, c'est pas très confortable au visuel, selon les yeux de chacun (après on peut bricoler quelque chose en changeant la taille de la police et en ajoutant un cadre).
Un bon gros bloc coloré et étiqueté avec une police de taille normale, comme ici sur ce forum en fait (c'est parfait), ce serait mieux.

[chattigre]

Lorsque cela ne contient aucune de tes balises, ce qui est écrit entre les balises |code| s'affichent bien en mode code avec les balises bien visibles. Mais étrangement cela a toujours l'apparence d'un bloc |quote|.

Et j'ai regardé, cela vient de ton CSS, tout est "normal".
Mais si ça te plait pas, on peut changer ça très facilement en CSS...

Le plus étrange c'est que jusqu'au 07 Juillet j'avait bien un fond noir et même tes balises apparaissaient entre les balises |code|.

Je suppose donc (peut être à tort, je ne sais pas) qu'un codeur de Forum.actif a touché quelque chose qu'il ne fallait pas.
Cela se vérifie si d'autres forums de Forum.actif sont impactés. Mais je n'ai pas cette information. Je pose donc la question.

Pour les nouvelles balises, c'est impossible, elles ne prennent pas en charge les balises codes.
Il devait y avoir un bug dans uns des JS placés sur toutes les pages, ce qui a pour effet de tous les rendre inactifs...

Forumactif n'a rien touché sur ton forum en particulier, c'est certain, c'est extrêmement rare et toujours relaté dans le sujet, sur demande de la personne ayant le problème, pas à l'improviste.
Quant au fond noir, j'en doute fort, c'est le CSS de base de la version phpBB2 et il n'y a aucune raison pour qu'il ait été modifié. Les balises code, quote et spoiler sont ressemblantes, voir identiques entre code et spoiler.
Peut-être un style personnalisé CSS que tu as malencontreusement supprimé en mettant celui relatif aux balises ?
Encore une fois on peut facilement remédier à ça ^^

Si tu as une astuce pour juste ajouter une nouvelle police, je prends quand même.
Je ferais un combo avec les balises |hide| (ou autre) dès qu'ils auront résolu le problème de filtrer qui voit quoi.
Puisqu'il semblerait que ce soit déjà répertorié comme taf à faire.
Comme par exemple mettre le texte en double : une fois dans une police illisible pour les autres lecteurs, et une deuxième fois dans une police normale, mais entre des balises permettant de cibler qui peut lire ce texte.

Ah nan, c'est répertorié comme suggestion à l'étude, c'est pas pareil
Ces suggestions sont considérées comme réalisables, mais ça ne veut pas dire qu'elles le seront, ni quand elles le seront SI elles le sont...
Si tu veux quelque chose comme ça, le plus simple est de refaire un point des balises qui te manquent dans ce sujet, pour que quelqu'un de plus compétant te réponde ^^

Ah tient, en parlant des balises |quote|, cette apparence de "surlignage" flashy vert avec une police en miniature, c'est pas très confortable au visuel, selon les yeux de chacun (après on peut bricoler quelque chose en changeant la taille de la police et en ajoutant un cadre).
Un bon gros bloc coloré et étiqueté avec une police de taille normale, comme ici sur ce forum en fait (c'est parfait), ce serait mieux.

C'est possible oui.
Après, si tu aimes pas les cadres simples, y'en a un paquet à revoir avec la version phpBB2
Donc je peux essayer de te proposer un truc, mais je ne partirai pas dans des effets de transparence, de relief ou de coins arrondis, ça ne collerait pas au style du forum ^^

Bonne journée

[Arkane 2.0]

Et j'ai regardé, cela vient de ton CSS, tout est "normal". Mais si ça te plait pas, on peut changer ça très facilement en CSS...

Ok, d'accord.

Forumactif n'a rien touché sur ton forum en particulier, c'est certain, c'est extrêmement rare et toujours relaté dans le sujet, sur demande de la personne ayant le problème, pas à l'improviste.

Houlà je ne pensais pas à ça. Ce n'est pas du tout ce que je voulais dire. J'imaginais juste que tous les forums de Forum.actif utilisent logiquement les balises conçues spécifiquement par Forum.actif. Dès lors si Forum.actif modifiait l'une de ses balises pour X raisons (des gens qui auraient râlé que le noir ça ne leur plaisait pas pour les balises |code| par exemple), ben ça impacterait automatiquement TOUS les forums de Forum.actif (y compris le mien en dommage collatéral), puisque tous les forums de Forum.actif utilisent les balises |code| de Forum.atif. Logique, non ?

Quant au fond noir, j'en doute fort, c'est le CSS de base de la version phpBB2 et il n'y a aucune raison pour qu'il ait été modifié. Les balises code, quote et spoiler sont ressemblantes, voir identiques entre code et spoiler.
Peut-être un style personnalisé CSS que tu as malencontreusement supprimé en mettant celui relatif aux balises ?

Ben pour éviter tout conflit de codage, avant même d'intégrer ton CSS et Javascript on a viré par prudence tous ceux qu'on avait mis.
On est reparti "à blanc" - en position de départ. Et pour l'instant on a rien remis de ce qu'on avait enlevé. En CSS et Javascript il y a uniquement tes astuces, c'est tout.

Encore une fois on peut facilement remédier à ça ^^

Ok, bah je ne paniquais pas. Pour moi c'est juste une anomalie étrange et inexpliquée qui n'est pas trop handicapante.
Cela questionne plus qu'autre chose. Mais si c'est réparable alors.......

Ah nan, c'est répertorié comme suggestion à l'étude, c'est pas pareil
Ces suggestions sont considérées comme réalisables, mais ça ne veut pas dire qu'elles le seront, ni quand elles le seront SI elles le sont...

HA, ZUT-FLÛTE-CROTTE-CACA BOUDIN !
Ben cela rend ton aide d'autant plus providentielle, mon forum n'aurait jamais été fonctionnel dans les temps sans ta technique.  
Après, autant pour le reste j'admet que c'est assez personnalisé, autant pour les balises |pop|, |cadre| et surtout |hide=|, je n'ai pas compris leur absence vu à quel point elles sont utilisées généralement dans les forums (ou des équivalences). Alors qu'il y a des balises présentes dont je ne comprends même pas l'utilité (et pourtant j'ai de l'imagination).

Si tu veux quelque chose comme ça, le plus simple est de refaire un point des balises qui te manquent dans ce sujet, pour que quelqu'un de plus compétant te réponde ^^

J'en prends bonne note.
J'ai par ailleurs une question technique : comment fait on pour réduire la vidéo Youtube à un simple lecteur ?
En général on fait |youtube=m| ou |youtube(200px,50px)| selon les forums (et il existe sûrement d'autre méthodes), mais là rien de ce que j'ai essayé ne fonctionne. Il n'y a pas à priori de balises |deezer| ou d'équivalent non plus (souvent présent dans les forums où il n'y a pas de balises |youtube| modifiables).

Après, si tu aimes pas les cadres simples, y'en a un paquet à revoir avec la version phpBB2
Donc je peux essayer de te proposer un truc, mais je ne partirai pas dans des effets de transparence, de relief ou de coins arrondis, ça ne collerait pas au style du forum ^^

Ok, ça me va.

Bonne journée

Merci, toi aussi.

[chattigre]

Re,
Une petite proposition de CSS
Pas grand chose en soit, trop modifier les balises code quote et spoiler serait vite incohérent avec le reste du style. En gros, j'ai juste agrandi la police à la même taille que le reste du corps du post et foncé un peu la couleur de fond. La balise code récupère un fond sombre par ailleurs.  

Code:

.codebox .code, .codebox .quote, .codebox .genmed {
  font-size: 13px;
}

.codebox .quote, .codebox.spoiler, .codebox.codebox {
  padding: 3px;
}

.codebox .quote, .spoiler_content, .spoiler .spoiler_closed {
  background-color: #c1df81;
  border-color: #c1df81;
}

.codebox .code {
  background: #333333;
  color: white;
}

J'ai par ailleurs une question technique : comment fait on pour réduire la vidéo Youtube à un simple lecteur ?

Pas compris la question ^^
Tu veux n'afficher que les boutons play / pause et la barre de progression ?
Je doute même que l'API youtube le permette, donc vu comme ça c'est impossible. Moi je mets simplement une image d'illustration en vidéo, je cherche pas
Mais sinon, il faut que tu héberges sur un site qui le permet ( ^^ ) tes fichiers audio (mp3 par exemple) et après les insérer dans les messages avec une balise (HTML) <audio>.
Si tu veux faire ça, on peut aussi très facilement ajouter au JS une balise [audio] pour rester dans du BBCode sans HTML

Houlà je ne pensais pas à ça. Ce n'est pas du tout ce que je voulais dire. J'imaginais juste que tous les forums de Forum.actif utilisent logiquement les balises conçues spécifiquement par Forum.actif. Dès lors si Forum.actif modifiait l'une de ses balises pour X raisons (des gens qui auraient râlé que le noir ça ne leur plaisait pas pour les balises |code| par exemple), ben ça impacterait automatiquement TOUS les forums de Forum.actif (y compris le mien en dommage collatéral), puisque tous les forums de Forum.actif utilisent les balises |code| de Forum.atif. Logique, non ?

Je ne l'avais absolument pas mal interprété, ne t'inquiète pas .
Mais ton forum étant en  version phpBB2, les modifications au niveau hébergeur sont rares, à l'exception des fonctionnalités supplémentaires développées récemment par FA. Mais cette version n'en est plus au stade des "révisions CSS" depuis bien longtemps, étant la version de base de FA depuis 2004 ^^


Dis-moi ce que tu penses de tout ça
Bonne journée

[Arkane 2.0]

Re,
Une petite proposition de CSS
Pas grand chose en soit, trop modifier les balises code quote et spoiler serait vite incohérent avec le reste du style. En gros, j'ai juste agrandi la police à la même taille que le reste du corps du post et foncé un peu la couleur de fond. La balise code récupère un fond sombre par ailleurs.  

OK. Et je remplace l'ancien CSS par celui-là ou je l'ajoute à côté ?

Pas compris la question ^^
Tu veux n'afficher que les boutons play / pause et la barre de progression ?
Je doute même que l'API youtube le permette, donc vu comme ça c'est impossible.

Bah en fait si, ça existe sur plein de sites.
Une image valant parfois mieux qu'un long discours, je t'en met trois pour montrer comment ça se présente avec |youtube=m| et |youtube(200px,50px)|.

Mais sinon, il faut que tu héberges sur un site qui le permet ( ^^ ) tes fichiers audio (mp3 par exemple) et après les insérer dans les messages avec une balise (HTML) <audio>.
Si tu veux faire ça, on peut aussi très facilement ajouter au JS une balise [audio] pour rester dans du BBCode sans HTML

OK, ça reste une piste exploitable. Penses-tu que que si on mettait un lien Youtube dans une balise audio ça marcherait ?

Je ne l'avais absolument pas mal interprété, ne t'inquiète pas .
Mais ton forum étant en  version phpBB2, les modifications au niveau hébergeur sont rares, à l'exception des fonctionnalités supplémentaires développées récemment par FA. Mais cette version n'en est plus au stade des "révisions CSS" depuis bien longtemps, étant la version de base de FA depuis 2004 ^^

OK. Pourtant il y a des choses qui change sans que personne n'intervienne, outre le fond noir de la balise |code| porté disparu, depuis aujourd'hui mon pare-feu Avast bloque l'affichage de mon forum, des skins, des thèmes et même des émojis (ici aussi) avec des messages d'alerte. C'est quelque chose qui n'était plus arrivé depuis 2016 je crois. En fait ça bloque tout ce qui vient de "https://2img.net/".

Bonne journée

Merci, à toi aussi.

[chattigre]

Salut,

Ce nouveau CSS est indépendant, il ne concerne pas les nouvelles balises. Il faut donc bien l'ajouter et non pas remplacer l'existant qui concerne autre chose

Pour le Youtube, ah, ok, donc en fait tu mets juste une hauteur assez faible, on ne voit pas la vidéo mais elle est censée y être ^^. Je ne m'attendais pas à un truc de ce genre, désolé
Tu as essayé [youtube(200px;100px)] à tout hasard ? (avec les dimensions que tu veux, je dis ça sans tester )
Si, justement, ça ne marche pas (ce que je pense ^^), on pourra regarder pour une balise [audio] qui prendrait sa source sur un lien youtube avec quelques paramètres d'affichage, cela devrait répondre à tes besoins.

Enfin pour l'Avast, malheureusement c'est un blacklistage injustifié de la part de l'anti-virus, plusieurs personnes viennent de le signaler aujourd'hui, je t'invite à faire toi aussi la démarche suggérée par le Staff auprès d'Avast afin que les signalements en nombre déclenchent une action rapide de la part d'Avast
https://forum.forumactif.com/t405674-phishing-sur-les-images-par-defaut-de-forumactif
https://forum.forumactif.com/t405673-acces-au-forum-avec-avast-faux-positif

Bonne journée

B

[Arkane 2.0]

OK. Heu... je vois qu'on ne peut ajouter qu'un seul CSS. Du coup je met à la suite ?

Ok. Du coup ch'uis partant pour une nouvelle balise Audio qui prendrait sa source sur un lien youtube.

Ok. C'est vu pour Avast.

Bonne Journée à toi aussi.

[chattigre]

Pour le CSS oui, bien sûr
En fait, le langage CSS se présente sur ce schéma :

Code:

selecteur {
propriete: valeur;
propriete: valeur;
[...]
}

selecteur, selecteur2 {
[...]
}

[...]

Le sélecteur définit ce sur quoi tu agis (par exemple, tous les blocs de citation, tous les blocs de classe .post, etc.), suivi d'une accolade ouvrante. Chaque propriété définit un aspect visuel (taille, couleur, marges, arrière-plan, [liste interminable ]) et est suivie de sa valeur. Un couple propriété: valeur se termine par un ;. Une fois toutes les déclarations de la règle écrites, on la referme avec une accolade fermante

Après, tu peux mettre autant de règles que tu le souhaites les unes après les autres, chacune sur ce schéma. Il y a bien sûr des sélecteurs et valeurs plus ou moins complexes, mais le squelette est toujours identique.
Quand on te demande d'ajouter quelque chose à ton CSS, tu peux laisser ce qu'il y a déjà, sauf si c'est bien sûr une nouvelle version de ce qu'il y avait avant

Là, comme le CSS pour les blocs de code et quote n'a rien à voir avec le premier concernant les balises, je ne t'ai pas tout redonné, c'est tout

Pour la balise audio je vois ça au plus vite, je vais être assez peu présent les jours à venir, ou du moins pour coder, mais je ne t'oublie pas.

Bonne journée

[chattigre]

Bonjour,
Pour la balise audio, j'ai préféré expliciter le nom en ytaudio
Voici le code javascript :

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>'
                    },
                    {
                        tag: 'ytaudio',
                        close: true,
                        replacement: '<iframe class="cdm_ytaudio" style="height: 150px; width: 300px"src="https://www.youtube-nocookie.com/embed/{content}></iframe>'
                    }
       
                    // 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()
        })();

Cela devrait fonctionner de la manière suivante :

Code:

[ytaudio]ID_VIDEO[/ytaudio]

Attention, il ne faut mettre que l'identifiant vidéo et pas le lien complet
Par exemple, l'id est

https://www.youtube.com/watch?v=aodfHjZTVIM

Voilà
Tout est modifiable comme d'habitude, d'autant que je ne suis pas certain que ça rende très bien dans l'état actuel ^^

Bonne journée

[Arkane 2.0]

Tout d'abord, merci pour ce petit cours de CSS, j'ai appris des trucs.

Ensuite, j'ai le regret de t'informer que si le lecteur |ytaudio| apparait bien proprement, en revanche on a toujours une erreur de lecture.

Une erreur s'est produite, Veuillez réessayer ultérieurement. (ID de lecture blabla).

Plusieurs tentatives effectuées (j'ai bien mis que l'ID), même résultat quel que soit la musique.

Bonne Journée à toi aussi. ^^

[chattigre]

Salut,
Oups

Je regarde ça dès que je peux, mais ça doit être une faute de frappe / erreur de C/C...
Rien de grave, faut juste retrouver

Je te tiens au courant rapidement

[chattigre]

Salut,
Désolé, je suis absent ces jours-ci mais j'ai eu le temps de jeter un coup d'oeil, c'était juste un guillemet manquant
Et je viens de me rendre compte que je m'étais pas basé sur la dernière version, donc tant mieux que ça n'ait pas marché ^^
Essaye ce JS (qui est fonctionnel de mon côté) :

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,
                        replacement: '<span class="cdm_dit"><span class="cdm_dit_txt">« {content} »</span><span class="cdm_dit_auth">{option}</span>',
                        replace: function(option, content) {
                          if (option) {
                              return {
                                  option: ' dit ' + option,
                                  content: content
                              };
                          }
                      }
                    },
                    {
                        tag: 'think',
                        close: true,
                        replacement: '<span class="cdm_think"><span class="cdm_think_txt">« {content} » </span><span class="cdm_think_auth">{option}</span>',
                        replace: function(option, content) {
                          if (option) {
                              return {
                                  option: ' pense ' + option,
                                  content: content
                              };
                          }
                      }
                    },
                    {
                        tag: 'ytaudio',
                        close: true,
                        replacement: '<iframe class="cdm_ytaudio" src="https://www.youtube-nocookie.com/embed/{content}"></iframe>'
                    }
       
                    // 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()
        })();

Je te laisse choisir les dimensions qui te conviennent en ajoutant à ton CSS cette règle :

Code:

iframe.cdm_ytaudio {
  height: {hauteur}px;
  width: {largeur}px;
  max-width: 100%;
}

(en remplaçant {hauteur} et {largeur} par des nombres, bien entendu ^^)

[Chacha]

Bonjour, Attention, cela fait 7 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 »

[Chacha]

Bonjour, Nous n'avons plus de nouvelle de l'auteur de ce sujet depuis plus de 10 jours. Nous considérons donc ce problème comme résolu ou abandonné. La prochaine fois, merci de nous tenir au courant de l'évolution de votre problème, ou pensez à faire un UP régulièrement ! Ce sujet est archivé afin de ne pas perdre les réponses apportées.

[Chacha]

Bonjour, Le topic est replacé à la demande de l'auteur du sujet. Pensez à faire un UP au moins une fois par semaine si vous ne voulez pas voir votre sujet déplacé à la corbeille.

[Arkane 2.0]

Salut,
Désolé, je suis absent ces jours-ci mais j'ai eu le temps de jeter un coup d'oeil, c'était juste un guillemet manquant
Et je viens de me rendre compte que je m'étais pas basé sur la dernière version, donc tant mieux que ça n'ait pas marché ^^
Essaye ce JS (qui est fonctionnel de mon côté)

Oui j'avais vu qu'après ça la balise |dit| repartait en sucette, je comprends maintenant.

Bon ben... en fait c'est pas mieux, je dirais même qu'on a reculé car les balises |ytaudio| ne sont même plus prises en compte (mais les balises |dit| sont redevenues nickel, youpi). Tu peux le voir ICI (tout en bas du topic). Tu dis que ça marche de ton côté ? Etrange.

Autre chose...... en suivant tes cours j'ai essayé de pondre moi-même tout seul comme un grand ma propre balise (mais seulement après avoir testé que la balise |ytaudio| ne marchait pas).
Un truc pourtant simple basique : la balise |hrp| qui met en bleu et en taille de police 11. Prenant exemple sur la balise |think|.

Donc en CCS j'ai rajouté ça :

Code:

.cdm_hrp_txt {
font-size: 11px;
  color: blue;
}

Et dans le Javascript j'ai mis ça :

Code:

{
tag: 'hrp',
                        close: true,
                        replacement: '<span class="cdm_hrp"><span class="cdm_hrp_txt">« {content} » </span><span class="cdm_hrp_auth">{option}</span>',
                        replace: function(option, content) {
                          if (option) {
                              return {
                                  option: ' pense ' + option,
                                  content: content
                              };

Bon résultat ça m'a tout fait sauté, toutes les balises.
C'est pas encore aujourd'hui que je pourrais me débrouiller tout seul avec le Javascript et le CSS.

Au final j'ai fait une réinitialisation en remettant le Javascript que tu m'avais laissé dans ton message du Jeu 5 Aoû 2021 - 11:31.

Code:

Pour ajouter de nouvelles polices à l'éditeur, tu peux regarder ce tutoriel : https://www.milouze14.com/t31728-toutes-versions-installer-des-polices-supplementaires-a-l-editeur
(Le code donné ajoute DEUX polices, mais je pense que le tutoriel explique bien comment en ajouter plus ou moins Wink )

Ben ça aussi j'ai voulu tester. Sauf que petit problème, de ce que j'ai compris cela ne fonctionne qu'avec les polices Google Font, que j'ai trouvé vraiment fort peu fourni (pas la moindre police de type Glyphe par exemple, tu tapes "Rune" dans la zone de recherche t'as presque rien qui sort, tu fais la même chose dans n'importe quel autre site de polices t'as vingt noms qui sortent).

Bonne Journée.

[chattigre]

Salut,
Pour le JS, je dirais que tu as oublié d'ajouter la virgule après la } de la balise précédente.
Et comme cette balise est justement ytaudio selon où tu as ajouté ton hrp, ben ça plante aussi celle d'avant, vu qu'il n'y a pas la virgule de fin
Pour ton CSS, par contre, il devrait être bon

Chez moi, la balise ytaudio marche, je soupçonne que ça vienne donc des modifications que tu as tentées

Essaye ce code pour tes balises (y compris hrp) :

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,
                        replacement: '<span class="cdm_dit"><span class="cdm_dit_txt">« {content} »</span><span class="cdm_dit_auth">{option}</span>',
                        replace: function(option, content) {
                          if (option) {
                              return {
                                  option: ' dit ' + option,
                                  content: content
                              };
                          }
                      }
                    },
                    {
                        tag: 'think',
                        close: true,
                        replacement: '<span class="cdm_think"><span class="cdm_think_txt">« {content} » </span><span class="cdm_think_auth">{option}</span>',
                        replace: function(option, content) {
                          if (option) {
                              return {
                                  option: ' pense ' + option,
                                  content: content
                              };
                          }
                      }
                    },
                    {
                        tag: 'hrp',
                        close: true,
                        replacement: '<span class="cdm_hrp"><span class="cdm_hrp_txt">« {content} » </span><span class="cdm_hrp_auth">{option}</span>',
                        replace: function(option, content) {
                          if (option) {
                              return {
                                  option: ' dit ' + option,
                                  content: content
                              };
                          }
                        }
                    },
                    {
                        tag: 'ytaudio',
                        close: true,
                        replacement: '<iframe class="cdm_ytaudio" src="https://www.youtube-nocookie.com/embed/{content}"></iframe>'
                    }
        
                    // 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()
        })();

Pour ta balise hrp, justement, actuellement elle prend en charge un auteur, comme ceci :

Code:

[hrp="Arkane"]Juste pour tester[/hrp]

"Juste pour tester" dit Arkane

Si il n'y a pas besoin, mieux vaut simplifier le code, tu le dis

Côté CSS, par rapport à la balise ytaudio :

Code:

iframe.cdm_ytaudio {
  height: {hauteur}px;
  width: {largeur}px;
  max-width: 100%;
}

ajoute la déclaration border: none; Pour retirer la bordure (moche) ajoutée par les navigateurs par défaut ^^
Autrement dit, sans oublier de remettre les dimensions de ton choix dans le code, ça donne :

Spoiler:

Pour les polices, si tu ne trouves pas ton bonheur via Google web fonts il faudra regarder pour faire autrement, je ne sais pas si je trouverai quelque chose, je vais regarder

Bonne journée

[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 »

[Chacha]

Bonjour, Nous n'avons plus de nouvelle de l'auteur de ce sujet depuis plus de 10 jours. Nous considérons donc ce problème comme résolu ou abandonné. La prochaine fois, merci de nous tenir au courant de l'évolution de votre problème, ou pensez à faire un UP régulièrement ! Ce sujet est archivé afin de ne pas perdre les réponses apportées.

[Chacha]

Bonjour, Le topic est replacé à la demande de l'auteur du sujet. Pensez à faire un UP au moins une fois par semaine si vous ne voulez pas voir votre sujet déplacé à la corbeille.

[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 »

[chattigre]

Bonjour Arkane 2.0,
As-tu testé les derniers codes que je t'ai proposé ?

Bonne journée

[Chacha]

Bonjour, Nous n'avons plus de nouvelle de l'auteur de ce sujet depuis plus de 10 jours. Nous considérons donc ce problème comme résolu ou abandonné. La prochaine fois, merci de nous tenir au courant de l'évolution de votre problème, ou pensez à faire un UP régulièrement ! Ce sujet est archivé afin de ne pas perdre les réponses apportées.

[Chacha]

Bonjour, Le topic est replacé à la demande de l'auteur du sujet. Pensez à faire un UP au moins une fois par semaine si vous ne voulez pas voir votre sujet déplacé à la corbeille.