XD blog

blog page

frame


2014-01-27 Créer une page de raccourcis en HTML/javascript

Quand Google Reader a disparu, je me suis demandé s'il était compliqué d'implémenter rapidement une sorte de page HTML en local depuis laquelle je pourrais consulter les blogs. Même si j'ai finalement implémenté quelque chose d'un peu plus complexe (pymmails), il est resté quelques essais et bouts de codes. Le code suivant permet de diviser la page en deux, d'avoir d'un côté une liste d'urls, de l'autre, une fenêtre dans laquelle s'affiche le site cliqué. Je m'en sers parfois pour faire des listes de raccourcis sur des outils internes plus facile à transférer d'un ordinateur à un autre que les raccourcis d'un navigateur. Un exemple de ce que cela donne est plus bas.

Le code n'est pas très compliqué et mélange HTML et javascript. Il y a quelques aspects superflus comme le fait que le fond des urls changent de couleur lorsque le curseur de la souris passe au-dessus. La fonction principale est change_navdiv qui récupère l'url en paramètre et modifie la section id=paneid de façon à afficher le site cliqué.


<?xml version="1.0" encoding="utf-8"?>
<html>
<head>
<title>Url shortcuts</title>
<meta content="url, shortcuts" name="keywords"/>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
<style>
html, body{
    height: 100%;
}
iframe.iframeurl{
    height: 100%;
    width: 100%;
}
div.sidediv{
    position:absolute; 
    margin-left:1%; 
    margin-top:0%; 
    margin-right:1%;
    width:16%;
    text-align: left;
    height:80%;
    font-family:calibri;
    font-size:90%;
} 
div.navdiv{
    position:absolute; 
    height:80%;
    margin-left:18%; 
    margin-top:0%; 
    margin-right:5%;
    width:80%;
    text-align:left;
    font-family:calibri;
} 
</style>
<script>

function extractUrlParams()
{
	var t = location.search.substring(1).split('&');
	var f = [];
	for (var i=0; i<t.length; i++){
		var x = t[ i ].split('=');
		f[x[0]]=unescape (x[1]);
	}
	return f;
}

function change_navdiv(idpane)
{
    var place = document.getElementById(idpane);
    var pars = extractUrlParams();
    
    if ('idu' in pars)
    {
        var url = document.getElementById(pars['idu']);
        url.style.background = "#9999FF" ;
    }
    
    if ('url' in pars)
    {
        var url = pars['url'];
        var cl = "" ;
        place.innerHTML = '<iframe class="iframeurl" style="height:' + (window.innerHeight-120) + 'px;" src="' + url + '"></iframe>' ;
    }
    else {
        place.innerHTML = '<p>no selected blog</p>' ;
    }
}

function change_style(idurl, inout)
{
    var url = document.getElementById(idurl);
    var pars = extractUrlParams();
    url.style.background = inout ? "#DDDDDD" : (pars['idu'] == idurl ? "#9999FF" : "#FFFFFF") ;
}
</script>
</head>
<body>

<div class="sidediv">
<h2>Shortcuts</h2>
<!-- SHORTCUTS BEGIN -->
<ul>
<li><a id="u1" onmouseover="change_style('u1',true)" 
                        onmouseout="change_style('u1',false)" 
    href="?idu=u1&url=http://www.xavierdupre.fr/blog/xd_blog_nojs.html">XD blog</a></li>
<li><a id="u2" onmouseover="change_style('u2',true)" 
                        onmouseout="change_style('u2',false)" 
    href="?idu=u2&url=http://freakonometrics.hypotheses.org/">Freakonometrics</a></li>
<li><a id="u3" onmouseover="change_style('u3',true)" 
                        onmouseout="change_style('u3',false)" 
    href="?idu=u3&url=http://andrewgelman.com/">Statistical Modeling, Causal Inference, and Social Science</a></li>
</ul>
<!-- SHORTCUTS END -->


</div>

<div class="navdiv" id="idnavdiv">
<h2>View</h2>
<div id="paneid">
<p>no selected blog</p>
</div>
</div>

<script type="text/javascript">
change_navdiv('paneid');
</script>

</body>
</html>