Aller au contenu

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

tazvld

Par tazvld
dans Vie INpactienne

Messages recommandés

tazvld Apprenti

tazvld

Posté(e)
Posté(e)

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

 

 

Lien vers le commentaire
Partager sur d’autres sites
tazvld Apprenti

tazvld

Posté(e)
  • Auteur
Posté(e)
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)

Lien vers le commentaire
Partager sur d’autres sites
jeje07bis Nouveau

jeje07bis

Posté(e)
Posté(e)

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.

Lien vers le commentaire
Partager sur d’autres sites
tazvld Apprenti

tazvld

Posté(e)
  • Auteur
Posté(e)
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.

Lien vers le commentaire
Partager sur d’autres sites
tazvld Apprenti

tazvld

Posté(e)
  • Auteur
Posté(e)

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 ?

Lien vers le commentaire
Partager sur d’autres sites
jeje07bis Nouveau

jeje07bis

Posté(e)
Posté(e)

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!

Lien vers le commentaire
Partager sur d’autres sites

Archivé

Ce sujet est désormais archivé et ne peut plus recevoir de nouvelles réponses.

Aller sur la liste des sujets
×
×
  • Créer...