LP_JS_RSSREADER.md

index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.5.7/css/bootstrap-material-design.min.css">
	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.5.7/css/ripples.min.css">
	
	<style>
		.navbar { margin: 0; }
		.sidebar { background-color: #000;}
	</style>

</head>
<body>

	<nav class="navbar navbar-default">
	    <div class="container">
			<h1>rssReader</h1>		
	    </div>
	    <!-- /.container-fluid -->
	</nav>
	
	<div class="row">
		<div class="col-md-4 sidebar">
			<form id="add_form" action="#" method="post" class="form-inline">
				<input type="text" name="rssurl" value='https://news.ycombinator.com/rss' class="form-control">
				<input type="submit" value="ok" class="form-control">
			</form>	
		</div>
		<div class="col-md-8 main">
			
		</div>
	</div>

	<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
	<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.5.7/js/material.min.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.5.7/js/ripples.min.js"></script>
	<script type="text/javascript" src="app.js"></script>	
</body>
</html>

app.js

//un wrapper pour l'objet "localStorage"
//on aurai tpu s'en passer
//Vir comment il est injecté dans le mdule principal
var rssStorage = (function(){
	if(null === localStorage.getItem('ressStorage')){
		localStorage.setItem('rssStorage', JSON.stringify({}));
	}
	return localStorage;
})();

//Le module principal
var reader = (function($, storage){

	//les variables sont définies localement
	//Elles ne sont donc pas accessibles en dehors de ce module
	var ui 	= {};

	var init = function(){
		init_ui();
		init_event();
	};

	//On stocke dans l'objet "ui" tous les élements DOM
	//dont on aura besoin
	var init_ui = function(){
		ui.add_rss = jQuery('#add_form');
		ui.rssurl = ui.add_rss.find('input[name="rssurl"]');		
	};

	//Initialiser tous les éveneents
	var init_event = function(){

		//Evenement "submit" sur les formulaires
		ui.add_rss.on('submit', function(e){
			e.preventDefault();
			handle_submit();
		});

		//Evenement custom
		$(document).on('handle_items_done', function(){
			//@todo parcourir 'storage' et rafrachir la liste des subscribers avec nb items
			//@todo si le nombre d'items est supérieur à 30 on supprime les plus anciens
		});

		//Juste pour dire que cet evenement existe
		//Il est lancé à chaque fois que LocalStorage est modifié 
		//@see https://developer.mozilla.org/en-US/docs/Web/API/StorageEvent
		$(window).bind('storage', function(){
			console.info('storage', JSON.parse(localStorage.getItem('rssStorage')));
		});

	}

	//Callback excuté lors de la soumission du formulaire
	var handle_submit = function(){

		//IL faut encoder l'url qui sera passée en tant que paramètre GET
		var url 	= encodeURIComponent(ui.rssurl.val()); 
		var apiurl 	= 'http://rss2json.com/api.json?rss_url=' + url;

		//API Promises
		//@see https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise
		$.get(apiurl)
			.done(function(response){
				handle_items(url, response.items);
			})
			.fail()
			.always()
		;

	}

	var handle_items = function(url, items){

		var rssStorage = JSON.parse(storage.getItem('rssStorage')); 

		if(!rssStorage.url){
			console.log('??????');	
			var o = {
				lastPubDate: 0,
				items : null
			}

			rssStorage[url] = o;
		}

		var new_last_pub_date = null;

		$.each(items.reverse(), function(index, item){

			var item_pub_date = Date.parse(item.pubDate);
			var last_pub_date = rssStorage.url && rssStorage.url.lastPubDate || 0;

			if(index === 0)
			{
				new_last_pub_date = item_pub_date;
			}

			if(last_pub_date &&  item_pub_date >= lastPubDate)
			{
				console.log(item);
				//@todo stocker ls items dans storage.url.items
				//@todo 
				//@todo afficher les items :  titre ( avec lien ) , contenu, date 
			}

		});

		rssStorage[url].lastPubDate = new_last_pub_date;

		try {
			localStorage.setItem('rssStorage', JSON.stringify(rssStorage));
		}catch(e){//DOMException
			console .error(e.message);
		}

		//Evenement défini par le script
		//On lance cet evenement
		//la méthode trigger peut contenir un tableau de valeurs
		//Qui sera récupéré lorsque l'évenement sera capturé
		$(document).trigger('handle_items_done', []);

	}

	//propriétés et méthodes publiques
	return {
		ui : ui,
		init : init
	}

})(jQuery, rssStorage); //Injection de dépendances


jQuery(document).ready(function(){
	reader.init();
});

rccc/LP_JS_RSSREADER.md

Select an option

No results found

Select an option

No results found

index.html

app.js

Liens