[Widget Blogger] Une d'articles aléatoires modifiable

Permier article ! Celui m'ayant décidé à ouvrir un blog :)

Pourquoi ?

Ma femme m'a demandé de modifier pour elle un script blogger permettant d'afficher une liste d'articles aléatoire sur un widget blogger, qu'elle a trouvé sur ce site. 

Comment on fait ?

Des scripts Javascript sont évalués au chargement de la page pour :

1. Lister le nombre total de posts à partir de la fonctionnalité REST "feed"
2. Récupérer de l'information sur chaque post.

Du coup pour lui permettre de rafraichir cette liste, il faut modifier le code pour permettre la récupération à la demande via un bouton...
J'ai aussi pris en compte le cas où le nombre d'articles disponibles est inférieur au total demandé... cas de blog au lancement par exemple :)

Résultat

Avec l'ajout de jQuery pour faciliter les manipulations, on arrive rapidement à un résultat satisfaisant. Il suffit de remplacer le code du site donné précédemment par celui-ci. Vous pouvez-voir le widget en action sur le côté droit de ce blog :

La partie HTML :

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<div>
    <ul id='random-posts'>
    </ul>
    <button onclick="load_random();return false;">Autres articles</button>
</div>

Et la partie JavaScript qui vient juste après :

<script type='text/javaScript'>//<![CDATA[
    var rdp_numposts = 5;
    var rdp_snippet_length = 150;
    var rdp_info = 'yes';
    var rdp_comment = 'Comments';
    var rdp_disable = 'Comments Disabled';
    var rdp_current = [];
    var rdp_total_posts = 0;
    var rdp_current = new Array(rdp_numposts);

    function totalposts(json) {
        rdp_total_posts = json.feed.openSearch$totalResults.$t
        rdp_numposts = Math.min(rdp_numposts, rdp_total_posts);

        load_random();
    }

    function getvalue() {
        for (var i = 0; i < rdp_numposts; i++) {
            var found = false;
            var rndValue = get_random();
            for (var j = 0; j < rdp_current.length; j++) {
                if (rdp_current[j] == rndValue) {
                    found = true;
                    break
                }
            }
            ;
            if (found) {
                i--
            } else {
                rdp_current[i] = rndValue
            }
        }
    };
    function get_random() {
        var ranNum = 1 + Math.round(Math.random() * (rdp_total_posts - 1));
        return ranNum
    };
    function random_posts(json) {
        for (var i = 0; i < rdp_numposts; i++) {
            var entry = json.feed.entry[i];
            var rdp_posttitle = entry.title.$t;
            if ('content'in entry) {
                var rdp_get_snippet = entry.content.$t
            } else {
                if ('summary'in entry) {
                    var rdp_get_snippet = entry.summary.$t
                } else {
                    var rdp_get_snippet = "";
                }
            }
            ;
            rdp_get_snippet = rdp_get_snippet.replace(/<[^>]*>/g, "");
            if (rdp_get_snippet.length < rdp_snippet_length) {
                var rdp_snippet = rdp_get_snippet
            } else {
                rdp_get_snippet = rdp_get_snippet.substring(0, rdp_snippet_length);
                var space = rdp_get_snippet.lastIndexOf(" ");
                rdp_snippet = rdp_get_snippet.substring(0, space) + "…";
            }
            ;
            for (var j = 0; j < entry.link.length; j++) {
                if ('thr$total'in entry) {
                    var rdp_commentsNum = entry.thr$total.$t + ' ' + rdp_comment
                } else {
                    rdp_commentsNum = rdp_disable
                }
                ;
                if (entry.link[j].rel == 'alternate') {
                    var rdp_posturl = entry.link[j].href;
                    var rdp_postdate = entry.published.$t;
                    if ('media$thumbnail'in entry) {
                        var rdp_thumb = entry.media$thumbnail.url;
                    } else {
                        rdp_thumb = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHpSBQPjYg2K4BsISoLTPF8B-sGrOmdrb8QA3PUV4UtXnXkuo3p-pMKSmaK6gwiVtBEjXn6tQgvOmgDpqWCbicNSe_CqdUz2g_6uilUVDPLxukX8bDh-06Gh0SD8QCs97nvNmyC42IyeY/s1600/default.jpg";
                    }
                }
            }
            ;

            var html = ('<img alt="' + rdp_posttitle + '" src="' + rdp_thumb + '"/>');
            html += ('<div><a href="' + rdp_posturl + '" rel="nofollow" title="' + rdp_snippet + '">' + rdp_posttitle + '</a></div>');
            if (rdp_info == 'yes') {
                html += ('<span>' + rdp_postdate.substring(8, 10) + '/' + rdp_postdate.substring(5, 7) + '/' + rdp_postdate.substring(0, 4) + ' - ' + rdp_commentsNum) + '</span>';
            }
            html += ('<div style="clear:both"></div>');

            jQuery("#random-posts").append(
                $('<li>').html(html)
            );
        }
    };

    function load_random(){
        rdp_current = new Array(rdp_numposts);
        getvalue();

        jQuery('#random-posts li').fadeOut(500, function(){
            jQuery(this).remove();
        });

        for (var i = 0; i < rdp_numposts; i++) {
            jQuery.ajax('/feeds/posts/default?alt=json-in-script&start-index=' + rdp_current[i] + '&max-results=1&callback=random_posts');
        }
    }

    jQuery.ajax('/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts');
//]]>
</script>

Aller plus loin... 

Idéalement il faudrait aussi déplacer l'import jQuery dans le modèle HTML, histoire de ne pas créer de duplications au cas où. Mais ca restera déjà bien ainsi !