Jump to content
tazvld

Userscript pour mettre en valeur les news du jour (NxI V7)

Recommended Posts

Bonjour,

Voilà, en suivant les commentaires sur la V7 du site, beaucoup sont comme moi et apprécié voir rapidement les news du jour. J'ai proposé alors de remplacer la date de l'article par "Aujourd'hui' avec une mise en forme assez visible comme ici :

1597237802.png

Je me suis donc lancer dans pour proposer un userscript pour faire ça. Malheureusement, je n'ai jamais fait beaucoup de JS, et ça fait des années que je n'en ai pas touché. Autant dire que j'ai codé ça sans connaissance du langage (et que déjà qu'en français je n'étais pas terrible, l'anglais est pire).

J'ai donc créé ce script dans tampermonkey normalement accessible sur tout les navigateurs et je pense que ça doit être compatible avec Greasemonkey.

v0.2.1 : support de l'heure relative

 

// ==UserScript==
// @name         nxiV7todayEmph
// @namespace    http://tampermonkey.net/
// @version      0.2.2
// @description  emphasize the news of the day for nextInpact v7.
// @author       tazvld
// @match        *://www.nextinpact.com*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    //###########
    console.log("Script nxiV7todayEmph start");

    var addStyle =function(){
        /*
        add new style to document head
        */
        var cssTodaySubtitle='.TodaySubtitle {color: #ea7e19;}';
        var head=document.head;
        var style=document.createElement('style');
        head.appendChild(style);
        style.type='text/css';
        style.appendChild(document.createTextNode(cssTodaySubtitle));
    }


    var ilyaRegex=RegExp("il y a (\\d+) heures","g");
    var ilyauneHeureRegex=RegExp("il y a une heure","g");
    var ilyaMinRegex=RegExp("il y a (\\d+) minutes", "g");

    var isToday=function(dateStr){
        /*
        return if dateStr correspond to today date
        */
        console.log(`test today on ${dateStr}`);
        var match=ilyaMinRegex.exec(dateStr);
        ilyaMinRegex.lastIndex = 0;
        if (match!==null){
            //XXX : I considered that no articles will be published after 23h00.
            return true;
        }
        match=ilyauneHeureRegex.exec(dateStr);
        ilyauneHeureRegex.lastIndex = 0
        if (match!==null){
            //XXX : I considered that no articles will be published after 23h00.
            return true;
        }

        match=ilyaRegex.exec(dateStr);
        ilyaRegex.lastIndex = 0
        if(match!== null){
            console.log(`match found : ${match[1]}`);
            var today=new Date();
            var currentHour=today.getHours();
            var articleAge=parseInt(match[1]);
            if(articleAge<=currentHour){
                return true;
            }
        }
     return false;
    }

    var applyTodayModif=function(sbtDateElem){
        /*
        apply modification on sbtDateElem elem.
        */
        var previousInnerHTML=sbtDateElem.innerHTML
        sbtDateElem.innerHTML=`<span class="TodaySubtitle">Aujourd\'hui</span>, ${previousInnerHTML}`;
    }

    var modifTodayDate=function(sbtDateElem){
        /*
        apply modification on sbtDateElem elem if sbtDateElem correspond to today date.
        */
        var dateStr=sbtDateElem.innerHTML;
        if(isToday(dateStr)){
            applyTodayModif(sbtDateElem);
        }
    }

    //###########

    //add style to document
    addStyle()
    //add obserder to modify date as soon as document is modified
    var observed=document.body;
    var observeOpt={childList: true, substree: true};
    var observerFunc=function(mutations){
        /*
        find all subtitle dates elem in document and apply modification if this elem correspond to today date
        */
        var subtitleDates=document.querySelectorAll(".subtitle span");
        console.log(`Script nxiV7todayEmph : ${subtitleDates.length} subtitle date found`);

        for(let i=0; i<subtitleDates.length; i++){
            modifTodayDate(subtitleDates[i]);
        }
    }
    //apply a first the the observFunc if page is already loaded.
    // XXX : because JavaScript is monothread, this should be directly followed by the MutationObserver.
    observerFunc(null);
    //look for modification in observed to change if necessary
    //FIXME : may be launched 2 times in a row, because the modification may be also observed
    var mutationObs1=new MutationObserver(observerFunc);
    mutationObs1.observe(observed, observeOpt);
})();

v0.1

Divulgâcheur

 

 

Edited by tazvld
update du script 0.2.2
  • Thanks 1
Link to post
Share on other sites
Il y a 17 minutes, ecatomb a écrit :

Demande d'avoir "aujourd'hui" sur le github, ce sera peut être plus pratique s'ils ajoutent une fonction pour ça 😉

https://github.com/NextINpact/nextinpactv7/issues

J'avais fait la proposition sur le forum, la réponse de David fut :

Citer

Parce que ça fait sapin de Noël. Et même s'il y avait un indicateur, il ne serait pas lié au jour (plutôt à ce qui est nouveau, ce qui n'est pas lié au jour de publication).

Par contre les dates récentes (< 12h/24h) vont être relatives (idem pour la colonne de droite et IH)

Donc j'ai fait un script.

 

Cependant, je vois que ça ne fonctionne pas quand on revient sur la page d'accueil, le script ne fonctionne seulement lorsque la page est chargé directement sur la page d'accueil.  (j'ai modifié le "@match" pour correspondre à tout NxI)

Link to post
Share on other sites

Grand merci à toi, ça semble fonctionner parfaitement.

Je ne comprends pas la réponse de David qui trouve que ça fait sapin de noel. ça apporte une bien meilleure lisibilité pour voir les news du jour.

MERCI!

Edited by jeje07bis
Link to post
Share on other sites

je partage mon code CSS (la première partie étant de Jarod) :

 

.sidebar-tab-container,
.sidebar-container,
.rs-container,
.img-container,
.pub-container,
.mainbar,
.bandeau-acces-libre
{
display: none;
}

.article-container,
.main-container
{
    width: 100%;
    padding: 40 0px;
    margin-left : 215px;
    margin-top : -20px;
}


.head-menu > li:nth-child(1) > a:nth-child(1) {
margin-left: 120px;
}

.base .comment-quote, .orange-clair .comment-quote, .rose-clair .comment-quote, .yinyang-clair .comment-quote{
margin: 15px 35px;
}

.base .comment-quote, .orange-clair .comment-quote, .rose-clair .comment-quote, .yinyang-clair .comment-quote {

color: rgb(157,157,167);
border-left: 0.2em solid rgb(232, 130, 39) !important;
}

.comment-quote {
    font-weight:normal
}

 

Dans l'ordre : suppression de certains éléments, modification de quelques marges, et surtout augmentation du décalage des citations dans les commentaires, et changement de la couleur de ces mêmes citations (gris clair), légère réduction de l'épaisseur de la barre orange devant les commentaires.

Edited by jeje07bis
Link to post
Share on other sites
Il y a 2 heures, jeje07bis a écrit :

Grand merci à toi, ça semble fonctionner parfaitement.

Je ne comprends pas la réponse de David qui trouve que ça fait sapin de noel. ça apporte une bien meilleure lisibilité pour voir les news du jour.

MERCI!

De rien. Pour l'instant ça fait le taf, même si comme je l'ai dit plus haut, ça ne fonctionne pas parfaitement.

C'est un choix comme un autre, bon, ce n'est pas forcément le mien, j'ai fait un script qui fait le taf, je m'en fous du reste. Il n'y a pas forcément de mauvais choix. C'est vraiment le genre de détail que je n'ai pas envie de me prendre la tête avec quelqu'un.

 

 

Si tu veux changer le CSS, remplace la ligne

    //add style to document
    addStyle()

par :

    //add style to document
    //addStyle()

et dans ton CSS personnalisé rajoute ce que tu veux pour la class css

.TodaySubtitle{
  ...
}

genre un truc tout con, c'est d'utiliser la pseudo class `.TodaySubtitle::before` pour rajouter un texte (comme un emote calendrier : 📅) avant la date.

Link to post
Share on other sites
Posted (edited)

Mise à jour pour supporter les heures relatives

// ==UserScript==
// @name         nxiV7todayEmph
// @namespace    http://tampermonkey.net/
// @version      0.2.2
// @description  emphasize the news of the day for nextInpact v7.
// @author       tazvld
// @match        *://www.nextinpact.com*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    //###########
    console.log("Script nxiV7todayEmph start");

    var addStyle =function(){
        /*
        add new style to document head
        */
        var cssTodaySubtitle='.TodaySubtitle {color: #ea7e19;}';
        var head=document.head;
        var style=document.createElement('style');
        head.appendChild(style);
        style.type='text/css';
        style.appendChild(document.createTextNode(cssTodaySubtitle));
    }


    var ilyaRegex=RegExp("il y a (\\d+) heures","g");
    var ilyauneHeureRegex=RegExp("il y a une heure","g");
    var ilyaMinRegex=RegExp("il y a (\\d+) minutes", "g");

    var isToday=function(dateStr){
        /*
        return if dateStr correspond to today date
        */
        console.log(`test today on ${dateStr}`);
        var match=ilyaMinRegex.exec(dateStr);
        ilyaMinRegex.lastIndex = 0;
        if (match!==null){
            //XXX : I considered that no articles will be published after 23h00.
            return true;
        }
        match=ilyauneHeureRegex.exec(dateStr);
        ilyauneHeureRegex.lastIndex = 0
        if (match!==null){
            //XXX : I considered that no articles will be published after 23h00.
            return true;
        }

        match=ilyaRegex.exec(dateStr);
        ilyaRegex.lastIndex = 0
        if(match!== null){
            console.log(`match found : ${match[1]}`);
            var today=new Date();
            var currentHour=today.getHours();
            var articleAge=parseInt(match[1]);
            if(articleAge<=currentHour){
                return true;
            }
        }
     return false;
    }

    var applyTodayModif=function(sbtDateElem){
        /*
        apply modification on sbtDateElem elem.
        */
        var previousInnerHTML=sbtDateElem.innerHTML
        sbtDateElem.innerHTML=`<span class="TodaySubtitle">Aujourd\'hui</span>, ${previousInnerHTML}`;
    }

    var modifTodayDate=function(sbtDateElem){
        /*
        apply modification on sbtDateElem elem if sbtDateElem correspond to today date.
        */
        var dateStr=sbtDateElem.innerHTML;
        if(isToday(dateStr)){
            applyTodayModif(sbtDateElem);
        }
    }

    //###########

    //add style to document
    addStyle()
    //add obserder to modify date as soon as document is modified
    var observed=document.body;
    var observeOpt={childList: true, substree: true};
    var observerFunc=function(mutations){
        /*
        find all subtitle dates elem in document and apply modification if this elem correspond to today date
        */
        var subtitleDates=document.querySelectorAll(".subtitle span");
        console.log(`Script nxiV7todayEmph : ${subtitleDates.length} subtitle date found`);

        for(let i=0; i<subtitleDates.length; i++){
            modifTodayDate(subtitleDates[i]);
        }
    }
    //apply a first the the observFunc if page is already loaded.
    // XXX : because JavaScript is monothread, this should be directly followed by the MutationObserver.
    observerFunc(null);
    //look for modification in observed to change if necessary
    //FIXME : may be launched 2 times in a row, because the modification may be also observed
    var mutationObs1=new MutationObserver(observerFunc);
    mutationObs1.observe(observed, observeOpt);
})();

 

j'ai aussi maj sur le premier post

 

edit : j'ai corrigé pour les dates relatives en minutes.

edit2 : cette fois je viens de corriger pour les dates en "il y a une heure". Est ce qu'il reste d'autre date relative ?

Edited by tazvld
Link to post
Share on other sites

Hi

J'ai pris ton dernier script. Pour moi c'est parfait comme ça.

Le fait d'afficher "aujourd'hui" + le nombre d'heures / minutes depuis le moment ou un post a été mis en ligne, pour moi c'est vraiment top en lisibilité.

bravo pour le boulot et la réactivité, et merci pour le partage!

Link to post
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now

×
×
  • Create New...