Quoted

affiche qui vous cite dans le topic et vous permet d'accéder au message directement en cliquant sur le lien, même s'il est sur un page différente!

当前为 2022-04-07 提交的版本,查看 最新版本

// ==UserScript==
// @name         Quoted
// @namespace    http://tampermonkey.net/
// @version      1.2.1
// @description  affiche qui vous cite dans le topic et vous permet d'accéder au message directement en cliquant sur le lien, même s'il est sur un page différente!
// @author       Dereliction
// @match        https://www.jeuxvideo.com/forums/*
// @icon         https://i.imgur.com/81NbMHq.png
// @license      Exclusive Copyright
// @resource     CSS https://pastebin.com/raw/fMWAQHTw
// @grant        GM_getResourceText
// @grant        GM_addStyle
// ==/UserScript==


(async function () {
    /*
    notes: ce script fonctionne mais a quelques défauts :
    - parfois lent à charger
    - il se base sur la date des messages contenue (ou pas) dans les citations, si celle-ci est modifiée ça marche pas.
    - si votre message est cité mais que pour X raisons la citation n'a pas la date de votre message au bon format, alors le script ne le prendra pas en compte (problématique pour la compatibilité avec certains autres scripts)
    - probablement des bugs pas encore explorés
    - si le message est cité trop de fois alors ça risque de déborder, pas encore fait l'adaptation de la taille du header en fonction du nombre de citations

    Remarque : sont prises en compte les premières citations seulement, si le message est imbriqué dans des couches de citations, il ne sera pas retenu
    */

    'use strict';
    const currentPageMessages = getMessages();
    if (currentPageMessages.length == 0 || window.location.pathname.includes('/message')) return;
    //le max de pages que le script peut aller chercher
    const maxPages = 100;
    //le nombre de pages que le script va charger pour voir si les messages de la page courante sont cités. /!\ ne pas mettre un nombre trop important sinon ça va prendre énormément de temps à tout charger
    let nbPageATest = 10;
    if (localStorage.getItem('quoted-pages') != null && parseInt(localStorage.getItem('quoted-pages')) == localStorage.getItem('quoted-pages'))
        nbPageATest = Math.max(1, Math.min(Math.abs(localStorage.getItem('quoted-pages')), maxPages));

    let nbPageExploreesTotal = 0;

    //liste des messages de la page courante
    const messagesIndex = buildMessages();

    //les pemts qui ont eu lieu sur la page
    const pemts = initPEMT();



    //fonction qui lance le script
    (async function init() {
        const my_css = GM_getResourceText("CSS");
        GM_addStyle(my_css);

        displayLoading();

        //on récupère les relations dans la page courante et on initialise le tableau avec
        let pages = [{ page: 0, matches: processMessages(document) }];

        //pour chaque page on va récupérer son contenu puis faire les relations également, et mettre le résultat dans le tableau
        for (let np of nextPages()) {
            await fetchPage(np.url).then((res) => { pages.push({ page: np.page, matches: processMessages(res) }) });
        };

        //on termine en affichant les liens dans la page courante
        createLinks(mergeAll(pages));
    })();


    //----------------------------------------------POUR L'AFFICHAGE DES OPTIONS--------------------------------------------------------

    modal(toggleModal);
    optionButton(toggleModal);
    function optionButton(toggleFunction) {
        const bloc = document.querySelector('#forum-main-col');
        let btnString = `<button class="btn quoted-btn">QUOTED</button>`
        let button = createElementFromString(btnString);
        button.addEventListener("click", () => {
            const modal = document.querySelector('#quoted-options');
            toggleFunction(modal);

        });
        bloc.insertBefore(button, bloc.querySelector('.bloc-pre-pagi-forum'));
    }

    //affiche le modal contenant la citation lorqu'on clique sur le bouton de prévisualiation
    function previsualize(mO, msgCitation){
        let clone = msgCitation.cloneNode(true);
        let div = document.createElement('div');
        div.classList.add('quoted-modal-citation');
        const closeBtn = createElementFromString(`<div class="close"><button>X</button></div>`);
        closeBtn.addEventListener('click', ()=>{
            div.remove();
        });
        div.append(closeBtn);
        clone.querySelector('.bloc-header span').style.color = 'black';
        div.append(clone);
        let header = mO.querySelector('.bloc-header')
        header.append(div);
    }

    //modal des options
    function modal(toggleFunction) {
        const modalString = `<div id="quoted-options" class="quoted-modal-options">
        <h3> Options </h3>
        <div>
        <label for="quoted-page-input">Nombre de pages à sonder</label>
        <input type="number" id="quoted-page-input" value="${nbPageATest}" min="1" max="${maxPages}"></input>
        </div>
        <button id="quoted-confirm" class="btn quoted-btn">Valider</button>
        </div>
        `;
        const modal = createElementFromString(modalString);

        const bloc = document.querySelector('.bloc-pre-right');
        const mainCol = document.querySelector('#forum-main-col');
        mainCol.style.position = 'relative';

        mainCol.insertBefore(modal, document.querySelector('#forum-main-col>div:nth-last-child(1)'));
        let confirmBtn = document.querySelector('#quoted-confirm');
        confirmBtn.addEventListener('click', () => {
            let numberToStore = document.querySelector('#quoted-page-input').value;
            if ((numberToStore == null) || (parseInt(numberToStore) != numberToStore) || parseInt(numberToStore) > maxPages)
                localStorage.setItem('quoted-pages', 10);
            else
                localStorage.setItem('quoted-pages', numberToStore);
            toggleFunction(modal);
        });

    }

    function toggleModal(modal) {
        if (modal.style.display != 'flex') {
            modal.style.display = 'flex';
            modal.classList.remove('quoted-invisible');
            modal.classList.add('quoted-visible');
        }
        else {
            modal.classList.remove('quoted-visible');
            modal.classList.add('quoted-invisible');
            setTimeout(() => { modal.style.display = 'none'; }, 500);
        }
    }

    //------------------------------------------------LOGIQUE DU SCRIPT-----------------------------------------------------------------

    //récupère les dates de tous les posts qui ont fait un pemt et les renvoie dans un tableau : array
    function initPEMT() {
        let sorted = [...messagesIndex.entries()].sort();
        let entries = [];
        for (let i = 0; i < sorted.length - 1; i++) {
            if (sorted[i][1] === sorted[i + 1][1]) {
                entries.push(sorted[i][1]);
            }
        }
        return [...new Set(entries)];
    }


    //affiche un message de chargement sur les messages qui sera retiré quand tout aura été chargé
    function displayLoading() {

        currentPageMessages.forEach(msg => {
            msg.querySelector('.bloc-header').style.height = '5rem'
            let loading = document.createElement('div');
            loading.classList.add('loading-citations', 'quoted-color');
            loading.innerHTML = 'Chargement des citations...';

            let header = msg.querySelector('.bloc-header .bloc-date-msg');
            header.insertBefore(loading, header.firstChild);

        });
    }

    //parcourt la map passée en paramètre et pour chaque clé (message de la page courante), appelle la méthode pour ajouter la ou les citation(s) en valeur. Supprime également les messages de chargement
    function createLinks(correspondances) {
        correspondances.forEach((v, k) => {
            appendCitation(k, v);
        });
        let loadings = document.querySelectorAll('.loading-citations');
        for (let ele of loadings) { ele.remove() }
        console.log('Messages chargés (' + nbPageExploreesTotal + ' page(s) explorée(s))');
    }

    //pour le message passé en paramètre, append un lien vers le(s) message(s) du tableau en paramètre
    function appendCitation(original, msgsC) {
        original.querySelector('.bloc-header').style.height = '5.75rem';
        original.style.overflow = 'visible';
        let header = original.querySelector('.bloc-header .bloc-date-msg');
        const blocC = document.createElement('div');
        blocC.classList.add('msg-citations', 'quoted-color');
        blocC.innerHTML = '<span>Cité ' + msgsC.length + ' fois : </span>';
        header.insertBefore(blocC, header.firstChild);
        let count = 1;
        let links = msgsC.map(msg => { return { link: generateLink(extractId(msg.msg), msg.page), author: extractAuthor(msg.msg), page: ((msg.page != 0) ? ' (page ' + msg.page + ')' : '') } });
        createSelect(links).forEach(ele => {
            blocC.append(ele);
        });
        const previewBtn = createElementFromString(`<button class="quoted-btn quoted-preview-btn">Prévisualiser</button>`);
        previewBtn.addEventListener('click', ()=>{
            let linkS = original.querySelector('.quoted-goto').getAttribute('href').split('_');
            let id = linkS[linkS.length-1];
            previsualize(original, msgsC.filter(msg=>extractId(msg.msg)===id)[0].msg);
        });
        //if(window.screen.width > 500) blocC.append(previewBtn);
    }

    //crée le select ou le lien pour choisir quelle citation charger
    function createSelect(links) {
        if (links.length == 1) {
            let link = links[0];
            return [createElementFromString(`<a class="quoted-goto" href="${link.link}">${link.author}${link.page}</a>`)];
        }
        let select = document.createElement('select');
        select.classList.add('quoted-select');
        let redir = document.createElement('a');
        redir.classList.add('quoted-goto');
        redir.innerText = 'Aller';
        redir.setAttribute('href', links[0].link);
        select.addEventListener('change', () => {
            redir.setAttribute('href', select.options[select.selectedIndex].value);
        });
        links.forEach(link => {
            let option = createElementFromString(`<option value="${link.link}">${link.author}${link.page}</option>`);
            select.append(option);
        });
        return [select, redir];
    }

    //génère le lien pour le post sur la page en fonction du numéro de la page donnée et de l'id du post
    function generateLink(id, page) {
        let reg = /(.*forums\/\d*-\d*-\d*-)(\d*)(.*)/gm;
        let url = "https://www.jeuxvideo.com" + window.location.pathname;
        if (page == 0)
            return url + "#post_" + id;
        return url.replace(reg, "$1" + page + "$3") + "#post_" + id;
    }

    //fonction qui prend un tableau de maps en argument et les merge toutes ensemble : Map
    function mergeAll(maps) {
        maps.forEach(obj => {
            obj.matches.forEach((arrayV, k) => {
                obj.matches.set(k, arrayV.map((msg) => { return { page: obj.page, msg: msg } }));
            });
        });
        let init = maps[0].matches;
        for (let i = 1; i < maps.length; i++) {
            init = mergeMaps(init, maps[i].matches, maps[i].page);
        }

        return init;
    }

    //fonction qui fusionne deux map en une seule, en concaténant les tableaux quand les maps ont la même clé : Map
    function mergeMaps(mapA, mapB, page = 0) {

        let myMap = new Map([...mapA]);
        mapB.forEach((v, k) => {
            if (myMap.has(k)) {
                let arr = [...myMap.get(k)];
                arr.push(...v);
                myMap.set(k, arr);
            }
            else {
                myMap.set(k, [...v]);
            }
        });
        return myMap;
    }

    //parcourt les messages de la page donnée, s'ils contiennent une citation alors on récupère sa date puis on vérifie dans le Map si elle correspond à un message. Si c'est le cas, on ajoute le message
    function processMessages(page = document) {
        let messages = getMessages(page);
        let matches = new Map();
        messages.forEach(msg => {
            if (msg.querySelector('blockquote') != null) {
                let dates = getQuotedMsgDate(msg);
                messagesIndex.forEach((msgIValue, msgIKey) => {
                    if (dates.includes(msgIValue)) {
                        const quoteFromPEMT = (dates.filter(value => pemts.includes(value)).length > 0);//on teste si les dates du message viennent de pemt, si c'est le cas on applique l'algo de filtrage
                        if (!quoteFromPEMT || (quoteFromPEMT && antiPEMT(msgIKey, msg))) {
                            if (!matches.has(msgIKey)) matches.set(msgIKey, [msg]);
                            else {
                                let arr = matches.get(msgIKey);
                                arr.push(msg);
                                matches.set(msgIKey, arr);
                            }
                        }
                    }
                });
            }
        });
        return matches;
    }

    function debug(separator, ...values) {
        console.log('______________________________________START DEBUG : ' + separator + '_____________________________________________');
        values.forEach(v => {
            console.log(v);
        });
        console.log('**************************************END DEBUG : ' + separator + '**************************************');
    }

    //compare le contenu de la citation avec celui du message original. Si le texte de la citation est contenu dans le message original ou inversement, le test est validé, sinon non
    function antiPEMT(originalMsg, msg) {
        let msgTxt = Array.prototype.slice.call(msg.querySelectorAll('.txt-msg>blockquote>p')).map((ele) => ele.textContent).reduce((next, current) => current + " " + next, '');
        let originalTxt = extractDate(originalMsg) + ' :' + Array.prototype.slice.call(originalMsg.querySelectorAll('.txt-msg>p')).map((ele) => ele.textContent).reduce((next, current) => current + " " + next, '');
        msgTxt = msgTxt.replace(/\s/gm, "").replace(/(Le)?\d{2}\w+\d{4}à\d{2}:\d{2}:\d{2}:?(.*aécrit:)?/gm, "").replace(/⭐/gm, '').replace(/ouvrir/gm, '');
        originalTxt = originalTxt.replace(/\s/gm, "").replace(/(Le)?\d{2}\w+\d{4}à\d{2}:\d{2}:\d{2}:?(.*aécrit:)?/gm, "").replace(/⭐/gm, '').replace(/ouvrir/gm, '');

        /*
        console.log('____________________________________________________________________________________________');
        console.log('CONTENU DE LA CITATION : ' + msgTxt);
        console.log('CONTENU DU MESSAGE ORIGINAL : ' + originalTxt);
        console.log('LES MESSAGES CORRESPONDENT : ' + (originalTxt.includes(msgTxt)||msgTxt.includes(originalTxt)));
        */
        if (msgTxt === '') return originalTxt === '';
        if (originalTxt === '') return msgTxt === '';
        return (originalTxt.includes(msgTxt) || msgTxt.includes(originalTxt));
    }

    //recupère les dates des messages cités dans le message : array
    function getQuotedMsgDate(message) {
        let firstQuotes = Array.prototype.slice.call(message.querySelectorAll('.txt-msg > .blockquote-jv'));
        let reg = /\d{2}\s.+\s\d{4}\sà\s\d{2}:\d{2}:\d{2}/gm;
        let dates = firstQuotes.map((quote) => {
            if (quote.querySelector('p') == null) return '';
            let test = quote.querySelector('p').textContent.match(reg);
            if (test != null) return test[0];
        });

        return dates;
    }

    //renvoie les messages contenus par l'élément passé en paramètre : array
    function getMessages(element = document) {
        return Array.prototype.slice.call(element.querySelectorAll('.conteneur-messages-pagi .bloc-message-forum:not(.msg-supprime)'));
    }

    //crée un dictionnaire contenant en index les messages de la page courante et en valeur leurs dates : Map
    function buildMessages() {
        let messages = document.querySelectorAll('.bloc-message-forum:not(.msg-supprime)'); //on ignore les messages de jvarchive pour le moment
        let res = new Map();
        messages.forEach(msg => {
            res.set(msg, extractDate(msg));
        });
        return res;
    }

    //récupère la date du message : string
    function extractDate(message) {
        let dateLink = message.querySelector('.bloc-header .bloc-date-msg a');
        let date = trimEsc(message.querySelector('.bloc-date-msg').textContent);
        return date;
    }

    //récupère l'id du message passé en paramètre : string
    function extractId(message) {
        return message.getAttribute('data-id');
    }

    //récupère le pseudo de l'auteur du message : string
    function extractAuthor(message) {
        return trimEsc(message.querySelector('.bloc-pseudo-msg').textContent);
    }

    function trimEsc(str) {
        return str.replace(/^(\s*)(.*)(\s*)$/, '$2');
    }

    //crée un élément en fonction de la chaîne donnée : HTMLElement
    function createElementFromString(htmlString) {
        var div = document.createElement('div');
        div.innerHTML = htmlString.trim();
        return div.firstChild;
    }

    //va chercher la page donnée en paramètre : string
    async function fetchPage(url) {
        let response = await fetch(url);
        let texte = await response.text();
        let parser = new DOMParser();
        return parser.parseFromString(texte, 'text/html');
    }

    //retourne un tableau contenant les url de toutes les pages suivantes du topic : array
    function nextPages(max = nbPageATest) {
        let avantDernierSpan = document.querySelector('.bloc-liste-num-page span:nth-last-child(2)');
        let maxPages = parseInt(document.querySelector('.bloc-liste-num-page span:last-child').textContent);
        if (isNaN(maxPages)) {
            maxPages = parseInt(avantDernierSpan.textContent);
        }
        let currentPage = window.location.pathname;
        let pagesIndexed = [];
        let splited = currentPage.split('-');
        let currentId = parseInt(splited[3]);
        let nbPagesAParcourir = Math.min(maxPages, currentId + max);
        for (let i = currentId; i < nbPagesAParcourir; i++) {
            splited[3] = ++currentId;
            pagesIndexed.push({ page: currentId, url: splited.join('-') });
        }
        nbPageExploreesTotal = pagesIndexed.length + 1;
        return pagesIndexed;
    }

})();