Browse Source

Développement pour le scroll infini

cobalt74 6 years ago
parent
commit
814d0cca5d

+ 82 - 0
article.php

@@ -0,0 +1,82 @@
+<?php 
+
+/*
+ @nom: article
+ @auteur: Maël ILLOUZ (mael.illouz@cobestran.com)
+ @description: Page de gestion de l'affichage des articles.
+ */
+
+$scroll = (isset($_['scroll'])?false:true);
+if ($scroll) {
+	include ('common.php');
+	$view = "article";
+	$tpl->assign('scroll',$scroll);
+		
+	//recuperation de tous les flux
+	$allFeeds = $feedManager->getFeedsPerFolder();
+	$tpl->assign('allFeeds',$allFeeds);
+	$tpl->assign('scrollpage',$_['scroll']);
+	// récupération des variables pour l'affichage
+	$articleDisplayContent = $configurationManager->get('articleDisplayContent');
+	$articleView = $configurationManager->get('articleView');
+	$articlePerPages = $configurationManager->get('articlePerPages');
+	$articleDisplayLink = $configurationManager->get('articleDisplayLink');
+	$articleDisplayDate = $configurationManager->get('articleDisplayDate');
+	$articleDisplayAuthor = $configurationManager->get('articleDisplayAuthor');
+	$articleDisplayHomeSort = $configurationManager->get('articleDisplayHomeSort');
+	$articleDisplayFolderSort = $configurationManager->get('articleDisplayFolderSort');
+
+	$tpl->assign('articleView',$articleView);
+	$tpl->assign('articleDisplayLink',$articleDisplayLink);
+	$tpl->assign('articleDisplayDate',$articleDisplayDate);
+	$tpl->assign('articleDisplayAuthor',$articleDisplayAuthor);
+	$tpl->assign('articleDisplayContent',$articleDisplayContent);
+
+	
+	$hightlighted = $_['hightlighted'];
+	$tpl->assign('hightlighted',$hightlighted);
+	
+	$tpl->assign('time',$_SERVER['REQUEST_TIME']);
+
+	$target = MYSQL_PREFIX.'event.title,'.MYSQL_PREFIX.'event.unread,'.MYSQL_PREFIX.'event.favorite,'.MYSQL_PREFIX.'event.feed,';
+	if($articleDisplayContent && $articleView=='partial') $target .= MYSQL_PREFIX.'event.description,';
+	if($articleDisplayContent && $articleView!='partial') $target .= MYSQL_PREFIX.'event.content,';
+	if($articleDisplayLink) $target .= MYSQL_PREFIX.'event.link,';
+	if($articleDisplayDate) $target .= MYSQL_PREFIX.'event.pubdate,';
+	if($articleDisplayAuthor) $target .= MYSQL_PREFIX.'event.creator,';
+	$target .= MYSQL_PREFIX.'event.id';
+	
+	$startArticle = $_['scroll']*$articlePerPages;
+	$action = $_['action'];
+	
+	switch($action){
+		/* AFFICHAGE DES EVENEMENTS D'UN FLUX EN PARTICULIER */
+		case 'selectedFeed':
+			$currentFeed = $feedManager->getById($_['feed']);
+			$allowedOrder = array('date'=>'pubdate DESC','older'=>'pubdate','unread'=>'unread DESC,pubdate DESC');
+			$order = (isset($_['order'])?$allowedOrder[$_['order']]:$allowedOrder['date']);
+			$events = $currentFeed->getEvents($startArticle,$articlePerPages,$order,$target);
+		break;
+		/* AFFICHAGE DES EVENEMENTS D'UN DOSSIER EN PARTICULIER */
+		case 'selectedFolder':
+			$currentFolder = $folderManager->getById($_['folder']);
+			if($articleDisplayFolderSort) {$order = MYSQL_PREFIX.'event.pubdate desc';} else {$order = MYSQL_PREFIX.'event.pubdate asc';}
+			$events = $currentFolder->getEvents($startArticle,$articlePerPages,$order,$target);
+		break;
+		/* AFFICHAGE DES EVENEMENTS FAVORIS */
+		case 'favorites':
+			$events = $eventManager->loadAllOnlyColumn($target,array('favorite'=>1),'pubDate DESC',$startArticle.','.$articlePerPages);
+		break;
+		/* AFFICHAGE DES EVENEMENTS NON LUS (COMPORTEMENT PAR DEFAUT) */
+		case 'unreadEvents':
+		default:
+			if($articleDisplayHomeSort) {$order = 'pubdate desc';} else {$order = 'pubdate asc';}
+			$events = $eventManager->loadAllOnlyColumn($target,array('unread'=>1),$order,$startArticle.','.$articlePerPages);
+		break;
+	}
+	$tpl->assign('events',$events);
+	$html = $tpl->draw($view);
+}
+
+$view = "article";
+?>

+ 69 - 0
templates/marigolds/article.html

@@ -0,0 +1,69 @@
+{loop="$events"}
+	{$plainDescription=strip_tags($value->getDescription())}
+		
+	<!-- CORPS ARTICLE -->
+	 
+	
+	<section id="{$value->getId()}" class="{if="!$value->getUnread()"}eventRead{/if} {$hightlighted%2==0?'eventHightLighted':''}" {$scroll?'style="display: none;"':''}>
+		<a title="Revenir en haut de page" class="goTopButton" href="#pageTopAnvil">ˆ</a>
+		<!-- TITRE -->
+		<h2 class="articleTitle">
+			{function="Plugin::callHook("event_pre_title", array(&$value))"}
+			<a onclick="readThis(this,{$value->getId()},'title');" target="_blank" href="{$value->getLink()}" title="{$plainDescription}">{$value->getTitle()}</a> 
+			{function="Plugin::callHook("event_post_title", array(&$value))"}
+		</h2>
+		<!-- DETAILS + OPTIONS -->
+		<h3 class="articleDetails">
+			{function="Plugin::callHook("event_pre_top_options", array(&$value))"}
+			{if="$articleDisplayLink"}
+				<a href="{$value->getLink()}" target="_blank">{$allFeeds['idMap'][$value->getFeed()]['name']}</a>
+			{/if}
+			{if="$articleDisplayAuthor"}
+			 par {$value->getCreator()}
+			{/if}
+
+			{if="$articleDisplayDate"} 
+				{$value->getPubdateWithInstant($time)} 
+			{/if}
+			{if="$value->getFavorite()!=1"} -  <a class="pointer favorite" onclick="addFavorite(this,{$value->getId()});" >Favoriser</a> 
+			{else}
+			 <a class="pointer favorite" onclick="removeFavorite(this,{$value->getId()});" >Défavoriser</a> 
+			 {/if}
+			
+			 <a class="pointer right readUnreadButton">(lu/non lu)</a>
+			 {function="Plugin::callHook("event_post_top_options", array(&$value))"}
+		</h3>
+
+		<!-- CONTENU/DESCRIPTION -->
+		{if="$articleDisplayContent"}
+			<div class="articleContent">
+				{if="$articleView=='partial'"}
+					{function="Plugin::callHook("event_pre_description", array(&$value))"}
+					{$value->getDescription()}
+					{function="Plugin::callHook("event_post_description", array(&$value))"}
+				{else}
+					{function="Plugin::callHook("event_pre_content", array(&$value))"}
+					{$value->getContent()}
+					{function="Plugin::callHook("event_post_content", array(&$value))"}
+				{/if}
+			</div> 
+			
+			{if="$articleView!='partial'"}
+			<!-- RAPPEL DETAILS + OPTIONS POUR LES ARTICLES AFFICHES EN ENTIER -->
+			<h3 class="articleDetails">
+				{function="Plugin::callHook("event_pre_bottom_options", array(&$value))"}
+			
+				<a class="pointer right readUnreadButton">(lu/non lu)</a>
+				{if="$value->getFavorite()!=1"}<a class="right pointer favorite"  onclick="addFavorite(this,{$value->getId()});" >Favoriser</a> 
+				{else}
+				<a class="right pointer favorite" onclick="removeFavorite(this,{$value->getId()});" >Défavoriser</a>  
+				{/if}
+				<div class="clear"></div>
+				{function="Plugin::callHook("event_post_bottom_options", array(&$value))"}
+			</h3>
+			{/if}
+		{/if}
+	</section>
+	{$hightlighted=$hightlighted+1}
+{/loop}
+{if="$events"}<script>addEventsButtonLuNonLus();</script>{/if}

+ 4 - 0
templates/marigolds/css/style.css

@@ -727,3 +727,7 @@ footer a,#main aside a{
 .nochip{
 	list-style-type: none;
 }
+
+article #loader{
+	display: none;
+}

+ 2 - 101
templates/marigolds/index.html

@@ -115,106 +115,7 @@
 			
 			 	<div class="clear"></div>
 				</header>
-
-	
-				{loop="$events"}
-					{$plainDescription=strip_tags($value->getDescription())}
-						
-					<!-- CORPS ARTICLE -->
-					 
-					
-					<section id="{$value->getId()}" class="{if="!$value->getUnread()"}eventRead{/if} {$hightlighted%2==0?'eventHightLighted':''}" >
-						<a title="Revenir en haut de page" class="goTopButton" href="#pageTopAnvil">ˆ</a>
-						<!-- TITRE -->
-						<h2 class="articleTitle">
-							{function="Plugin::callHook("event_pre_title", array(&$value))"}
-							<a onclick="readThis(this,{$value->getId()},'title');" target="_blank" href="{$value->getLink()}" title="{$plainDescription}">{$value->getTitle()}</a> 
-							{function="Plugin::callHook("event_post_title", array(&$value))"}
-						</h2>
-						<!-- DETAILS + OPTIONS -->
-						<h3 class="articleDetails">
-							{function="Plugin::callHook("event_pre_top_options", array(&$value))"}
-							{if="$articleDisplayLink"}
-								<a href="{$value->getLink()}" target="_blank">{$allFeeds['idMap'][$value->getFeed()]['name']}</a>
-							{/if}
-							{if="$articleDisplayAuthor"}
-							 par {$value->getCreator()}
-							{/if}
-
-							{if="$articleDisplayDate"} 
-								{$value->getPubdateWithInstant($time)} 
-							{/if}
-							{if="$value->getFavorite()!=1"} -  <a class="pointer favorite" onclick="addFavorite(this,{$value->getId()});" >Favoriser</a> 
-							{else}
-							 <a class="pointer favorite" onclick="removeFavorite(this,{$value->getId()});" >Défavoriser</a> 
-							 {/if}
-							
-							 <a class="pointer right readUnreadButton">(lu/non lu)</a>
-							 {function="Plugin::callHook("event_post_top_options", array(&$value))"}
-						</h3>
-
-						<!-- CONTENU/DESCRIPTION -->
-						{if="$articleDisplayContent"}
-							<div class="articleContent">
-								{if="$articleView=='partial'"}
-									{function="Plugin::callHook("event_pre_description", array(&$value))"}
-									{$value->getDescription()}
-									{function="Plugin::callHook("event_post_description", array(&$value))"}
-								{else}
-									{function="Plugin::callHook("event_pre_content", array(&$value))"}
-									{$value->getContent()}
-									{function="Plugin::callHook("event_post_content", array(&$value))"}
-								{/if}
-							</div> 
-							
-							{if="$articleView!='partial'"}
-							<!-- RAPPEL DETAILS + OPTIONS POUR LES ARTICLES AFFICHES EN ENTIER -->
-							<h3 class="articleDetails">
-								{function="Plugin::callHook("event_pre_bottom_options", array(&$value))"}
-							
-								<a class="pointer right readUnreadButton">(lu/non lu)</a>
-								{if="$value->getFavorite()!=1"}<a class="right pointer favorite"  onclick="addFavorite(this,{$value->getId()});" >Favoriser</a> 
-								{else}
-							 	<a class="right pointer favorite" onclick="removeFavorite(this,{$value->getId()});" >Défavoriser</a>  
-							 	{/if}
-							 	<div class="clear"></div>
-							 	{function="Plugin::callHook("event_post_bottom_options", array(&$value))"}
-							</h3>
-							{/if}
-						{/if}
-
-
-
-					</section>
-					{$hightlighted=$hightlighted+1}
-				{/loop}
-
-				<!-- PIED DE PAGE DES ARTICLES -->
-
-				{if="$pages!=0"}
-					<p>Page {$page}/{$pages} : 
-
-						{if="$previousPages>0"}
-						<a href="index.php?action={$action}{if="$action=='selectedFeed'"}&amp;feed={$currentFeed->getId()}{/if}{if="$action=='selectedFolder'"}&amp;folder={$currentFolder->getId()}{/if}&amp;page={$previousPages}{if="$order!=''"}&amp;order={$order}{/if}"><<</a>
-						{/if}
-						
-						{loop="pagesArray"}
-
-							{if="$page!=$value"}
-							<a href="index.php?action={$action}{if="$action=='selectedFeed'"}&amp;feed={$currentFeed->getId()}{/if}{if="$action=='selectedFolder'"}&amp;folder={$currentFolder->getId()}{/if}&amp;page={$value}{if="$order!=''"}&amp;order={$order}{/if}">{$value}</a> 
-							{else}
-							{$value}
-							{/if}
-							|
-						{/loop}
-
-						{if="$nextPages>0"}
-						<a href="index.php?action={$action}{if="$action=='selectedFeed'"}&amp;feed={$currentFeed->getId()}{/if}{if="$action=='selectedFolder'"}&amp;folder={$currentFolder->getId()}{/if}&amp;page={$nextPages}{if="$order!=''"}&amp;order={$order}{/if}">>></a>
-						{/if}
-					</p> 
-				{/if}
-
-
+				{include="article"}
 			</article>
 
 
@@ -229,4 +130,4 @@
 	</div>
 {/if}
 
-{include="footer"}
+{include="footer"}

+ 93 - 10
templates/marigolds/js/script.js

@@ -43,16 +43,7 @@ $(document).ready(function(){
 	}else{
 
 		targetThisEvent($('article section:first'),true);
-
-		$('article section').click(function(event){
-			var target = event.target;
-			var id = this.id;
-			if($(target).hasClass('readUnreadButton')){
-				buttonAction(target,id);
-			}else{
-				targetThisEvent(this);
-			}
-		});
+		addEventsButtonLuNonLus();
 
 	}
 
@@ -144,7 +135,79 @@ if(e.which == keyCode['shift']) isMaj=false;
    }
 });
 
+// on initialise ajaxready à true au premier chargement de la fonction
+$(window).data('ajaxready', true);
+$('article').append('<div id="loader">Chargement en cours ...</div>');
+$(window).data('page', 1);
+
+var deviceAgent = navigator.userAgent.toLowerCase();
+var agentID = deviceAgent.match(/(iphone|ipod|ipad)/);
+
+$(window).scroll(function(){
+	if(!$('.settings').length) {
+		// On teste si ajaxready vaut false, auquel cas on stoppe la fonction
+		if ($(window).data('ajaxready') == false) return;
+ 
+		if(($(window).scrollTop() + $(window).height()) == $(document).height()
+		   || agentID && ($(window).scrollTop() + $(window).height()) + 150 > $(document).height())
+		{
+            // lorsqu'on commence un traitement, on met ajaxready à false
+			$(window).data('ajaxready', false);
+ 
+			$('article #loader').fadeIn(400);
+			
+			if ($('article section:last').attr('class') == ' eventHightLighted') {
+				hightlighted = 1;
+			} else {
+				hightlighted = 2;
+			}
+			
+			// récupération de action
+			var action = getUrlVars()['action'];
+			var folder = getUrlVars()['folder'];
+			var feed = getUrlVars()['feed'];
+			var order = getUrlVars()['order'];
+
+			$.ajax({
+				url: './article.php',
+				type: 'post',
+				data: 'scroll='+$(window).data('page')+'&hightlighted='+hightlighted+'&action='+action+'&folder='+folder+'&feed='+feed+'&order='+order,
+ 
+				//Succès de la requête
+				success: function(data) {
+					if (data.replace(/^\s+/g,'').replace(/\s+$/g,'') != '')
+					{	// on les insère juste avant le loader.gif
+						$('article #loader').before(data);
+						// on les affiche avec un fadeIn
+						$('article section').fadeIn(400);
+						$(window).data('ajaxready', true);
+						$(window).data('page', $(window).data('page')+1);
+					}
+ 				}
+			});
+			// le chargement est terminé, on fait disparaitre notre loader
+			$('article #loader').fadeOut(400);
+		}
+	}
+});
+
 /* Fonctions de séléctions */
+/* Cette fonction sera utilisé pour le scrool infinie, afin d'ajouter les évènements necessaires */
+function addEventsButtonLuNonLus(){
+	var handler = function(event){
+			var target = event.target;
+			var id = this.id;
+			if($(target).hasClass('readUnreadButton')){
+				buttonAction(target,id);
+			}else{
+				targetThisEvent(this);
+			}
+	}
+	// on vire tous les évènements afin de ne pas avoir des doublons d'évènements
+	$('article section').unbind('click');
+	// on bind proprement les click sur chaque section
+	$('article section').bind('click', handler);
+}
 
 function targetPreviousEvent(){
 	targetThisEvent($('.eventSelected').prev(':visible'),true);
@@ -392,3 +455,23 @@ function buttonAction(target,id){
 	}
 	readThis(target,id,from);
 }
+
+function getUrlVars()
+{
+    var vars = [], hash;
+    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
+    for(var i = 0; i < hashes.length; i++)
+    {
+        hash = hashes[i].split('=');
+        vars.push(hash[0]);
+        if (hash[1]){
+	        rehash = hash[1].split('#');
+	        vars[hash[0]] = rehash[0];
+	    } else {
+	    	vars[hash[0]] = '';
+	    }
+	    
+        
+    }
+    return vars;
+}