Script pour lecture partielle des sujets

[orpheus]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : https://empiredesouvenirs.forumactif.com

Description du problème

Bonsoir,

Ce sujet fait suite à la suggestion que j'ai lancé il y a quelques jours.

En attendant une hypothétique mise en place de la suggestion par Forumactif, je souhaiterai savoir s'il est possible comme sur la capture dans le lien ci-dessus de masquer partiellement les messages d'un topic, y compris partiellement le premier post.

L'idéal serait de pouvoir choisir à partir d'où le message doit être masqué, le but étant vous l'aurez compris, de donner un aperçu des topics aux invités, sans pour autant trop en dévoiler, juste ce qu'il faut pour susciter une envie de s'inscrire.

Merci.

[Toryudo]

Bonjour !

Il faut savoir qu'une solution donnée dans le cadre d'un script n'est pas la même chose qu'une solution mise en place par Forumactif. Si quelqu'un fait un script ou un CSS qui masque des choses, les informations sont toujours là, cachées pour la plupart des gens, mais visibles pour les Bots de référencements par exemple (ou pour ChatGPT, qui ne va pas se priver de tout piquer, mais je m'égare).

Pour ma part, il faudrait être un peu plus précis sur le fonctionnement de la chose. Pour l'instant, tel que je le visualise, ce serait :

• une sorte de balise [hide] dans le premier post qui, à partir de l'endroit où elle est positionnée, floute la suite du contenu pour les invités => c'est pour moi le seul moyen de personnaliser l'endroit à partir duquel le post n'est plus visible. Ou alors, plus compliqué pour vous, on met en place un floutage à partir de "tant de pixels de hauteur", personnalisable pour chaque premier post. Ça prendrait alors la forme d'une balise HTML dans laquelle il faudrait personnaliser la valeur du CSS height
  
• tous les posts suivants qui sont floutés

Ça irait comme ça ? Ou il faudrait d'autres personnalisations ?

[orpheus]

Bonsoir Toryudo !

Il faut savoir qu'une solution donnée dans le cadre d'un script n'est pas la même chose qu'une solution mise en place par Forumactif. Si quelqu'un fait un script ou un CSS qui masque des choses, les informations sont toujours là, cachées pour la plupart des gens, mais visibles pour les Bots de référencements par exemple (ou pour ChatGPT, qui ne va pas se priver de tout piquer, mais je m'égare).

Oui bien sûr ! Je me doute qu'un script n'est pas la même chose qu'une solution mise en place par Forumactif et d'une certaine manière, ce que vous dites est rassurant car en attendant de fermer complètement les écoutilles, cela permet au forum de continuer à bénéficier d'un bon référencement, tout en masquant partiellement du contenu aux yeux de la plupart des gens !

Étant novice en matière de codage, j'avoue que je suis pas certain d'avoir tout compris mais je pense que la première option avec la balise hide serait une bonne solution.
Et effectivement, je souhaite que les posts suivants soient floutés.

Il faudrait si possible une étiquette invitant les invités à s'inscrire pour lire la suite des messages.

C'est à peu près tout je pense

[Toryudo]

Bonjour !

Alors, voilà ma proposition : on se base sur le tuto de "Création de balises BBCode personnalisées" https://forum.forumactif.com/t407168-creation-de-balises-bbcode-personnalisees pour créer une balise [guest] un peu différente de celle proposée dans le tuto. La balise ne fait rien si la personne est connectée, et elle ajoute un div avec une class .guest autour du texte qui se trouve entre [guest] et [/guest] quand la personne n'est pas connectée.
Si on trouve des balises [guest] et [/guest] dans une page, alors on ajoute cette même class .guest à tous les posts, sauf le premier (parce que lui n'est pas entièrement flouté).

Voici le JavaScript qui s'occupe de faire ça :

Code:

/*
 *  Application: Create New BBCode Tags - Creation de nouvelles balises BBCode
 *  Date: 18/05/2018 - Adaptation pour le forum des forums mai 2022
 *  Version: 1.321052018
 *  Copyright (c) 2018 Daemon <help.forumotion.com>
 *  This work is free. You can redistribute it and/or modify it - Code libre. Vous pouvez le redistribuer et/ou le modifier
 */
(function() {
    BBParser = {
        initialize: function() {
            $(function() {
                BBParser.setupBBParser();
            });
        },
        add: [
            {
                tag: 'guest',
                close: true,
                defaultOption: 'Vous devez être connecté pour voir ce contenu.',
                replacement: '{content}',
                replace: function(option, content) {
                    if (_userdata.session_logged_in < 1) {
                      $('.post:not(#p0) div.postbody:not(:first)').addClass('guest');
                        return '<div class="guest">' + content + '</div>';
                    }
                    else {
                        return content;
                    }
                }
            }
        ],
        // Il est conseillé de ne rien modifier en dessous de cette ligne
        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 selectors = {
                "subsilver": 'div.postbody, .forumline.mod_news .content, div.blog_message',
                "prosilver": 'div.postbody div, div.post.search .postbody, div.blog_message, .module.mod_news .content',
                "punbb": 'div.post-entry, .module.mod_news .body, div.blog_message',
                "invision": 'div.post-entry, .box-content.mod_news .postbody-entry, div.blog_message',
                "modernbb": 'div.postbody div, div.post.search .postbody, div.blog_message, .mod_news .content',
                "awesomebb": 'div.post-content, div.block-blogrow-content, div.block.block-comment .content, div.block-pm .content, div.mod-news .content',
                "mobi_modern" : 'div.post-content, .mod-news-header + .content '
            };
            if($("#mpage-body-modern").length) {
                var postBody = $(selectors["mobi_modern"]);
            }
            else if(selectors.hasOwnProperty(_userdata["tpl_used"])) {
                var postBody = $(selectors[_userdata["tpl_used"]]);
            }
            else {
                var postBody = $(selectors["prosilver"]);
            }
            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()
})();

Et voici le CSS de cette classe .guest qui fait tout le travail de floutage :

Code:

.guest {
  position: relative;
  pointer-events: none;
  user-select: none;
}
.guest:after {
  content: "Ce topic est réservé aux membres\AInscrivez-vous pour lire la suite";
  backdrop-filter: blur(3px);
  position: absolute;
  display: grid;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  align-items: center;
  text-align: center;
  white-space: pre;
  font-size: 16px;
}

De mon côté, ça fonctionne, mais ça pose potentiellement un problème.
Si on passe à la page 2, il n'y a plus de balise [guest] dans la page, donc les posts ne sont plus floutés...

Au choix, vous pouvez :
- soit utiliser l'option "Toujours afficher le premier message dans les sujets", comme ça, on répète le message qui contient la balise [guest] dans toutes pages, donc on floute automatiquement toutes les réponses d'un sujet qui avait la balise [guest]
- soit on fait différemment pour le floutage des autres posts, et je vous laisse revenir vers moi pour qu'on essaye de trouver une solution qui vous conviendrait !

[orpheus]

Bonsoir Toryudo et merci pour cette première proposition !
Après test, l'essai s'avère concluant mais il est vrai que si l'effet ne s'applique pas automatiquement sur toutes les pages sans devoir afficher le premier message sur toutes les pages, ça risque d'être problématique.

Par ailleurs, je me suis rendu compte avec cette proposition de la difficulté d'un tel projet qui nécessite au final d'éditer chaque post manuellement afin d'insérer le floutage.
Aussi, excusez-moi d'avance mais j'aimerai du coup revenir sur ma demande et voir s'il serait possible de mettre en place plutôt un système qui flouterait automatiquement à partir d'un certain nombre de caractères (à définir dans le script) le premier post ainsi que les suivants.

Quand je dis floutage, je m'exprime peut-être mal mais j'aimerai un effet de texte invisible en fondu comme on peut le voir sur les articles payants du Figaro par exemple.
Quelque chose comme ici par exemple ou le texte devient invisible de manière progressif.
Excusez-moi pour la confusion.

Pensez-vous que ce soit possible ?

Bonne soirée.

[Toryudo]

Bonjour !

Alors on met tout à la poubelle et on recommence.
Voici le nouveau script qui permet de couper le texte à partir de "nbChar" (= 1000 pour mon test) caractères, et d'ajouter un dégradé techniquement différent du Figaro, mais je pense que ça doit fonctionner à peu près partout.

Code:

function CutString(string,limit){
    // temparary node to parse the html tags in the string
    this.tempDiv = document.createElement('div');
    this.tempDiv.id = "TempNodeForTest";
    this.tempDiv.innerHTML = string;
    // while parsing text no of characters parsed
    this.charCount = 0;
    this.limit = limit;

}
CutString.prototype.cut = function(){
    var newDiv = document.createElement('div');
    this.searchEnd(this.tempDiv, newDiv);
    return newDiv.innerHTML;
};
CutString.prototype.searchEnd = function(parseDiv, newParent){
    var ele;
    var newEle;
    for(var j=0; j< parseDiv.childNodes.length; j++){
    ele = parseDiv.childNodes[j];
    // not text node
    if(ele.nodeType != 3){
        newEle = ele.cloneNode(true);
        newParent.appendChild(newEle);
        if(ele.childNodes.length === 0)
        continue;
        newEle.innerHTML = '';
        var res = this.searchEnd(ele,newEle);
        if(res)
        return res;
        else{
        continue;
        }
    }

    // the limit of the char count reached
    if(ele.nodeValue.length + this.charCount >= this.limit){
        newEle = ele.cloneNode(true);
        newEle.nodeValue = ele.nodeValue.substr(0, this.limit - this.charCount);
        newParent.appendChild(newEle);
        return true;
    }
    newEle = ele.cloneNode(true);
    newParent.appendChild(newEle);
    this.charCount += ele.nodeValue.length;
    }
    return false;
};
function cutHtmlString($string, $limit){
    var output = new CutString($string,$limit);
    return output.cut();
}

// Nombre de caractères affichés
let nbChar = 1000;

$(function(){
  if (_userdata.session_logged_in < 1) {
    $('.post:not(#p0) div.postbody').find('div:first').each(function(){
      let txt = $(this).html();
      let cutstrObj = new CutString(txt, nbChar);
      let newStr = cutstrObj.cut();

      if (txt.length != newStr.length){
        newStr += '...';
      }

      txt = '<div class="guest">' + newStr + '</div> <div class="guestmsg">Ce topic est réservé aux membres<br>Inscrivez-vous pour lire la suite</div>';
      $(this).html(txt);
    });
  }
});

Et voici le CSS qui fait le travail de transparence du texte :

Code:

.guest {
  background: linear-gradient(to top, rgba(0,0,0,0), rgba(0,0,0,1) 75%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.guestmsg {
  padding: 10px;
  border: 2px solid #000;
  background: #FFF;
  text-align: center;
  font-size: 16px;
}

Est-ce que ça correspond mieux ?

[orpheus]

Bonsoir,

Tout d'abord, un grand merci pour ce nouveau script !

Oui, le script répond parfaitement à mes attentes mais est-ce qu'il serait possible qu'au lieu qu'il fasse un fondu sur les réponses dans un topic, que celles-ci soient totalement rendus invisible dès le premier caractère ?

Concrètement, j'aimerai qu'on garde ce qui a été fait pour le premier post mais que les réponses des membres n'apparaissent pas et qu'à la place, on retrouve le panneau invitant à s'inscrire.

À propos de ce panneau, est-il possible d'ajouter un lien hypertexte ? C'est à dire que là ou il y a marqué « inscrivez-vous », qu'il y ai un lien redirigeant l'invité vers la page d'inscription ?

Bonne soirée

[Toryudo]

Oui, les deux sont possibles, et voilà le correctif du script :

Code:

function CutString(string, limit) {
  // temparary node to parse the html tags in the string
  this.tempDiv = document.createElement('div');
  this.tempDiv.id = "TempNodeForTest";
  this.tempDiv.innerHTML = string;
  // while parsing text no of characters parsed
  this.charCount = 0;
  this.limit = limit;

}
CutString.prototype.cut = function() {
  var newDiv = document.createElement('div');
  this.searchEnd(this.tempDiv, newDiv);
  return newDiv.innerHTML;
};
CutString.prototype.searchEnd = function(parseDiv, newParent) {
  var ele;
  var newEle;
  for (var j = 0; j < parseDiv.childNodes.length; j++) {
    ele = parseDiv.childNodes[j];
    // not text node
    if (ele.nodeType != 3) {
      newEle = ele.cloneNode(true);
      newParent.appendChild(newEle);
      if (ele.childNodes.length === 0)
        continue;
      newEle.innerHTML = '';
      var res = this.searchEnd(ele, newEle);
      if (res)
        return res;
      else {
        continue;
      }
    }

    // the limit of the char count reached
    if (ele.nodeValue.length + this.charCount >= this.limit) {
      newEle = ele.cloneNode(true);
      newEle.nodeValue = ele.nodeValue.substr(0, this.limit - this.charCount);
      newParent.appendChild(newEle);
      return true;
    }
    newEle = ele.cloneNode(true);
    newParent.appendChild(newEle);
    this.charCount += ele.nodeValue.length;
  }
  return false;
};

function cutHtmlString($string, $limit) {
  var output = new CutString($string, $limit);
  return output.cut();
}

// Nombre de caractères affichés
let nbChar = 1000;

$(function() {
  if (_userdata.session_logged_in < 1) {

    // Si on est sur la première page, le premier post est coupé
    if (window.location.pathname.split('-')[0].split('p')[1] === undefined) {
      // On coupe le premier post
      $('.post:not(#p0) div.postbody').find('div:first').each(function() {
        let txt = $(this).html();
        let cutstrObj = new CutString(txt, nbChar);
        let newStr = cutstrObj.cut();

        if (txt.length != newStr.length) {
          newStr += '...';
        }

        txt = '<div class="guest">' + newStr + '</div> <div class="guestmsg">Ce topic est réservé aux membres<br><a href="/register">Inscrivez-vous</a> pour lire la suite</div>';
        $(this).html(txt);
      });

      // On masque tous les autres posts
      $('.post:not(#p0) div.postbody:not(:first)').find('div:first').each(function() {
        let txt = '<div class="guestmsg">Ce topic est réservé aux membres<br><a href="/register">Inscrivez-vous</a> pour lire la suite</div>';
        $(this).html(txt);
      });
    } else {
      // Pas sur la première page, on masque tous les posts
      $('.post:not(#p0) div.postbody').find('div:first').each(function() {
        let txt = '<div class="guestmsg">Ce topic est réservé aux membres<br><a href="/register">Inscrivez-vous</a> pour lire la suite</div>';
        $(this).html(txt);
      });
    }
  }
});

[orpheus]

Cette fois tout est parfait, ça répond parfaitement à ma demande.
Encore un grand merci pour votre aide !

[MlleAlys]

Hello,
Je ne sais pas si je peux m'incruster pour demander conseil, avant que le sujet soit verrouillé ?    Je doute que ce soit optimal mais j'avais essayé de bidouiller un script de mon côté (juste pour le "défi" ^^").
J'étais partie avec l'idée la plus simple à mes yeux : Le premier message du sujet répété sur les différentes pages ; une div "floutante" sur chaque message, avec une hauteur réglable en % ou px (pas au caractère ^^"), et du coup personnalisable avec une balise <style> dans le premier message (mais du coup sur la version mobile ça ne coupe pas forcément au même endroit du contenu...) ; une div de connexion avec redirection.

Bref, ça semble fonctionner comme je l'avais imaginé, mais je me demandais s'il était possible d'avoir une lecture de mon code par quelqu'un qui s'y connait mieux, un regard critique, juste pour savoir s'il est ok ou si il est vraiment pas optimal ou moche ou autre ?
ça serait super sympa ! (mais sinon c'est pas grave tant pis ! )

Code:

$(function(){
  if(_userdata["session_logged_in"]==0){
    $('#mpage-body-modern .post-content:not(.rules), .postbody:not(.rules)').addClass('floutagecadre');
    $('.floutagecadre').append('<div class="floutage"></div>');
    var lien = window.location.pathname.substring(1);
    $('.floutagecadre').first().find('.floutage').attr('id','floutageprems').append('<div>Ce topic est réservé aux membres du forum :<br/><a href="/login?redirect=%2F'+ lien +'">Connectez-vous</a> pour lire la suite.<br/>Vous n\'avez pas encore de compte ? <a href="/register">S\'inscrire</a>.</div>');  
  };
});

Code:


 
/******************** DEBUT LECTURE PARTIELLE INVITES ******************/
.floutagecadre {
  position: relative;
}
.floutage {
  position: absolute;
  left: -3px;
  right: -3px;
  top: -2px;
  bottom: -3px;
  z-index: 1;
  backdrop-filter: blur(4px);
  text-align: center;
}
#floutageprems {
  top: 30%;
  overflow: visible;
}
 
/*lecture partielle div connexion*/
.floutage div {
  margin-top: 40px;
  background: white;
  display: inline-block;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 1px 1px 3px black;
}

/******************** FIN LECTURE PARTIELLE INVITES ******************/
 

[orpheus]

Coucou MlleAlys,

Pas de soucis, du coup pour éviter la clôture du sujet, j'ai retiré la mention résolu.
Par contre, ton code est supposé marcher sur toutes les versions de Forumactif ou uniquement sur PhpBB2 ? Car j'ai essayé sur un forum que je gère sous AwesomeBB et ça ne semble pas fonctionner.

[MlleAlys]

Oh merci Orpheus !  
Sur mon forum test phpbb2 !
Cela dit, je suppose qu'il ne doit pas être bien compliqué à adapter Faut que j'essaye ça ! AwesomeBB donc !

Edit : quelque chose comme ça ?

Code:

$(function(){
  if(_userdata["session_logged_in"]==0){
    $('#mpage-body-modern .post-content:not(.rules), .postbody:not(.rules):not("#forum_rules .postbody"), .post-content').addClass('floutagecadre');
    $('.floutagecadre').append('<div class="floutage"></div>');
    var lien = window.location.pathname.substring(1);
    $('.floutagecadre').first().find('.floutage').attr('id','floutageprems').append('<div>Ce topic est réservé aux membres du forum :<br/><a href="/login?redirect=%2F'+ lien +'">Connectez-vous</a> pour lire la suite.<br/>Vous n\'avez pas encore de compte ? <a href="/register">S\'inscrire</a>.</div>');  
  };
});

(re-edit petite erreur dans le script xP)

[orpheus]

Avec ce nouveau script, je confirme que ça fonctionne sous AwesomeBB !
Par contre, suggestion d'amélioration : en l'état, l'infobulle invitant à s'inscrire reste sur un point fixe de l'image. Il serait à mon avis plus intéressant de faire en sorte qu'il suive l'invité lorsque celui-ci tente de descendre sur la page.

J'espère en tout cas que tu trouveras quelqu'un pour améliorer ton script, personnellement, j'y connais rien.

[MlleAlys]

Oui, j'y ai pensé aussi, et je suis restée un peu frustrée, les solutions simples que j'avais en tête n'étant finalement pas simples du tout... Par exemple j'ai voulu tenter juste en css en le mettant en sticky, mais du coup ne descendait pas plus bas que le premier message, et je me suis dit qu'au pire en fixed ça pouvait le faire pour rester en css, et là j'ai découvert que le fixed ne fonctionnait pas pour les éléments compris dans un filter (le flou) ! Et en le sortant du bloc "flou", je suis du coup un peu ennuyée avec mes compétences pour le positionner tout de même à partir de la partie floutée, et les tableaux sans fin de phpbb2 n'aident pas...
Bref il faudrait que je prenne plus de temps pour y réfléchir et je ne suis pas allée jusque là

Merci pour ton retour en tout cas !

[Toryudo]

Hello @MlleAlys !

Pour moi, il marche aussi !
Une seule petite chose à laquelle j'ai dû faire face aussi : si je sélectionne le texte... je peux aussi sélectionner ce qui se trouver derrière le flou. Du coup, il suffirait de copier/coller le texte autre part pour pouvoir le lire. C'est un peu plus ennuyeux, parce qu'à la portée d'un peu plus de monde de faire ça !

[MlleAlys]

Ah mince ! en plus j'y avais pensé parce que ma première idée c'était de mettre directement le texte flou, et après je me suis dit non, je vais mettre une div par dessus pour éviter qu'on puisse copier/coller.... et au final j'avais juste utilisé la propriété css  "user-select: none;" sur l'ensemble des .postbody (donc finalement je n'avais pas vraiment besoin d'une div par dessus ? EDIT: ah non, je les avais gardées pour les liens !) , mais j'ai oublié de l'intégrer au code css que j'ai copié/collé ici...

Bref, en tout cas merci ! Ma question était surtout d'un point de vue "grammaire/orthographe" du code, clairement je n'ai pas poussé assez loin dans la fonctionnalité, mais ça me rassure de savoir qu'il est en tout cas potable malgré mes bidouillages !

On peut passer en résolu, merci orpheus !