Infinite scrolling pour mobile - Version imprimable

Infinite scrolling pour mobile - Version imprimable

+- Forum CMS Made Simple FR (https://forum.cmsmadesimple.fr)
+-- Forum : Ressources (https://forum.cmsmadesimple.fr/forum-4.html)
+--- Forum : Développement et Astuces (https://forum.cmsmadesimple.fr/forum-15.html)
+--- Sujet : Infinite scrolling pour mobile (/thread-3171.html)

Infinite scrolling pour mobile - snatch1974 - 03/04/2014

Citation :#~~~~~ DEBUT BLOC A NE PAS SUPPRIMER ~~~~~
#~ Version du CMS: 1.11.10
#~ Url du site : http://etable.farangprod.com
#~ Hébergeur / Soft : planethoster
#~ Informations Système :
#~ ----------------------------------------------
#~ Cms Version: 1.11.10
#~ Installed Modules:
#~ CMSMailer: 5.2.2
#~ CMSPrinting: 1.0.5
#~ FileManager: 1.4.4
#~ MenuManager: 1.8.6
#~ MicroTiny: 1.2.6
#~ ModuleManager: 1.5.5
#~ News: 2.14.2
#~ Search: 1.7.11
#~ ThemeManager: 1.1.8
#~ TinyMCE: 2.9.12
#~ ListIt2: 1.4.1
#~ ListIt2recette: 1.4.1
#~ CGExtensions: 1.38.6
#~ CGSmartImage: 1.16
#~ CGSimpleSmarty: 1.7.2
#~ CGGoogleMaps: 2.4.7
#~ FormBuilder: 0.7.3
#~ ListIt2cartes: 1.4.1
#~ Config Information:
#~ php_memory_limit: 128M
#~ process_whole_template: false
#~ max_upload_size: 128000000
#~ url_rewriting: mod_rewrite
#~ page_extension: .html
#~ query_var: page
#~ image_manipulation_prog: GD
#~ auto_alias_content: true
#~ locale: fr_FR.utf8
#~ default_encoding: utf-8
#~ admin_encoding: utf-8
#~ set_names: true
#~ Php Information:
#~ phpversion: 5.3.28
#~ md5_function: On (Vrai)
#~ gd_version: 2
#~ tempnam_function: On (Vrai)
#~ magic_quotes_runtime: Off (Faux)
#~ E_STRICT: 0
#~ E_DEPRECATED: 0
#~ memory_limit: 128M
#~ max_execution_time: 120
#~ output_buffering: On
#~ safe_mode: Off (Faux)
#~ file_uploads: On (Vrai)
#~ post_max_size: 64M
#~ upload_max_filesize: 128M
#~ session_save_path: /var/lib/sessionsphp (1777)
#~ session_use_cookies: On (Vrai)
#~ xml_function: On (Vrai)
#~ xmlreader_class: On (Vrai)
#~ Server Information:
#~ Server Api: litespeed
#~ Server Db Type: MySQL (mysqli)
#~ Server Db Version: 5.1.73
#~ Server Db Grants: Trouvé un privilège "GRANT ALL" qui semble être adapté
#~ Server Time Diff: Aucune différence de date du système de fichiers trouvées
#~ ----------------------------------------------
#~~~~~ FIN BLOC A NE PAS SUPPRIMER ~~~~~

travaillant sur un petit simple assez simple avec un responsive design, je voudrais, pour les mobiles, utiliser la technique de l'infinite scrolling, ce qui me permettrait de supprimer le menu (1 seul niveau) et d'avoir tout le contenu du site sur une seule page verticale.

Est-ce que quelqu'un a déjà utilisé ce genre de méthode pour me filer un ou deux tuyaux pour récupérer le contenu de chaque page?

Comment je voyais les choses...

une seule page d'accueil avec un script jquery qui calcule la hauteur du contenu. Une fois le scroll arrivé en bas de ce contenu, un appel ajax qui charge le contenu du prochain node à la suite du contenu précédant.
Le script calcule alors la hauteur du contenu 1 + 2 et on recommence... arrivé en bas, on charge le node 3 et ainsi de suite jusqu'à ce que l'entièreté du site soit affiché.

Méthode pensée...

Une udt qui récupère le contenu de chaque node dans un boucle et assign ce contenu à des variables du style $page1, $page2, $page3... ainsi qu'un variable qui comptabilise le nombre total de page {$n_pages} et qui servira de référence dans la fonction js pour savoir si il y'a autre chose à afficher.

Le js lui mesure la hauteur de $page0 (accueil) une fois arrivé en bas, il insère $page1 à la suite tout connement et fais l'addition de la hauteur de $page0 + $page1 pour savoir quand afficher la $page3.
une fois l'intégralité des pages insérées ($n_pages atteint), il affiche le footer.

Est-ce à votre avis un procédé viable?
Un tuyau pour faire l'udt qui va boucler tous les nodes et en récupérer le content?

merci

Infinite scrolling pour mobile - snatch1974 - 03/04/2014

En attendant conseils et astuces, j'ai un peu avancé sur le truc...

Trouver le nombre de pages est finalement pas compliqué puisque la balise {$count} me donne le nombre de pages (nodes)

avoir l'id de chaque page non plus puisque qu'une simple boucle me donne les id de toutes les pages:

{foreach from=$nodelist item=foo}
id: {$foo->id}<br />
{/foreach}

il ne me reste plus qu'à récupérer le contenu qui correspond à chaque id... là ça commence à coincer!

Infinite scrolling pour mobile - bess - 03/04/2014

sans faire d'udt : un javascript qui charge la première page, attend que tu touche le fond du site et charge la page suivante.

la liste des page à chercher peut être alimentée par menumanager + un template menumanager minimaliste qui retournerait un tableau d'url par exemple
le contenu des pages (sans leur gabarit du coup) se fait en appelant l'url d'une page cmsms avec le paramètre &showtemplate=false (test sur une page de nos démos site pour voir)
le javascript ? et bien ma foi il doit en exister des tout prêt !

https://www.google.fr/search?q=javascript+infinity+load

Infinite scrolling pour mobile - snatch1974 - 05/04/2014

Merci Bess, tu m'as aiguillé sur la bonne voie...

Je n'ai pas utilisé utiliser le menumanager, j'ai quasiment tout réglé en jquery et avec quelques balises smarty bien pratiques.

Le fonctionnement:

Je crée un array js dans lequel je mets toutes mes urls.

Je vérifie le viewport (à - de768px, ma sidebar est cachée, au dessus elle est visible).
- si la sidebar est cachée (- de 768px) j'enlève tout le contenu et je charge à la place le contenu de ma page d'accueil (dans le cas où on accèderait au site par l'url d'une autre page)
- si la sidebar est visible(+ de 768px), on touche à rien.

Je surveille le redimensionnement de la fenêtre.
- si la largeur passe en-dessous de 768px (sidebar cachée), j'enlève le contenu existant, je charge le contenu de la page d'accueil et initialise l'offset.
- si il repasse au dessus de 768px (sidebar visible), j'enlève le contenu existant, je remets le contenu d'origine et réinitialise les variables.
(tout ça pour que ça fonctionne de la même façon quelque soit l'url de la page)

Je surveille le scrolling quand mon viewport est inférieur à 768px (sidebar cachée).
- quand on arrive au niveau du footer, je charge la page suivante à la suite du contenu existant et mets à jour les variables.

Tout fonctionnement correctement à part un petit truc... cggooglemap n'affiche rien quand on appel son contenu par ajax (ReferenceError: google is not defined)
Va falloir trouver un moyen d'y palier...

Code inséré dans mon gabarit:

Code :
{literal}

<script type="text/javascript">

$(document).ready(function(){

   var load = '';

   var resizeload = false;

   var page = 1;

   var url='';    

   var pageurl = "{/literal}{$content_obj->GetURL()}{literal}";

   var offset = $('footer.footer').offset();

   var url=[];

   {/literal}

   {foreach from=$nodelist item=foo}

   {literal}

     url.push("{/literal}{$foo->url}{literal}");{/literal}

   {/foreach}

   {literal}

function mobile(){

   $('#main').remove();

   $('.content-inner').load(url[0]+' #main',function(){

      offset = $('footer.footer').offset();

      load=false;

   });

}

function screen(){

   $('.content').remove();

   $('.content-inner').load(pageurl+' #main',function(){

      offset = $('footer.footer').offset();

      page=1;

   });

}

if($('aside.sidebar').is(':hidden')){

   mobile();

}

$(window).resize(function(){

   if($('aside.sidebar').is(':hidden') && resizeload==false){

      resizeload=true;

      mobile();

   }

   if($('aside.sidebar').is(':visible') && resizeload==true){

      resizeload=false;

      screen();

   }

});

$(window).scroll(function(){ 

   if((offset.top-$(window).height() <= $(window).scrollTop())  && load==false && $('aside.sidebar').is(':hidden') && page < {/literal}{$count}{literal}){

      load = true;

      var page_url = url[page];

      $('.content-inner').append('<article class="content" id="page'+page+'"></div>');    

      $('#page'+page).append('<div class="loader"></div>');

      $.ajax({

         url:page_url,

         dataType:'html',

         data: {txtsearch: $('#main').val()},

         success: function (data) {

            var result = $('<div />').append(data).find('#main').html();

            $('.loader').remove();

            $('#page'+page).append(result);

            offset = $('footer.footer').offset();

            page = page + 1;

            load = false;

         }

      });

   }        

});

});

</script>

{/literal}

Vous pouvez voir le résultat...
Si quelqu'un a une idée pour cette map, ou une d'idée d'optimisation je suis preneur :p

Infinite scrolling pour mobile - snatch1974 - 06/04/2014

Voilà le code définitif, si ça peut rendre service à quelqu'un...

la map, fonctionne bien maintenant grace à l'emploi du module cggooglemap2 au lieu du 1.

Code :
[== Indéfini ==]

<script type="text/javascript">

$(document).ready(function(){

   var load = '';

   var resizeload = false;

   var page = 0;

   var url='';    

   var offset = $('footer.footer').offset();

   var lid = '';

   var lurl = '';

   var lpage = '';

   var lload = '';

   var pageurl = "{/literal}{$content_obj->GetURL()}{literal}";

   var url=[];

   {/literal}

   {foreach from=$nodelist item=foo}

   {literal}

     url.push("{/literal}{$foo->url}{literal}");{/literal}

   {/foreach}

   {literal}

function loadpage(lid,lurl,lpage,lload){

   $('.content-inner').append('<article class="content" id="'+lid+'"></div>');    

   $('#'+lid).append('<div class="loader"></div>');

   $.ajax({

         url:lurl,

         dataType:'html',

         data: {txtsearch: $('#main').val()},

         success: function (data) {

            var result = $('<div />').append(data).find('#main').html();

            $('.loader').remove();

            $('#'+lid).append(result);

            offset = $('footer.footer').offset();

            page = lpage;

            load = lload;

         }

   });

}

function mobile(){

   if(page < 1){

      $('.content').remove();

   }

   lid = 'page';

   lurl = url[0];

   lpage = 1;

   lload = false;

   loadpage(lid,lurl,lpage,lload);

}

function screen(){

   $('.content').remove();

   lid = 'main';

   lurl = pageurl;

   lpage = 0;

   lload = true;

   loadpage(lid,lurl,lpage,lload);

}

$(window).resize(function(){

   if($('aside.sidebar').is(':hidden') && resizeload==false){

      resizeload=true;

      mobile();

   }

   if($('aside.sidebar').is(':visible') && resizeload==true){

      resizeload=false;

      screen();

   }

});

if($('aside.sidebar').is(':hidden')){

   $('body').animate({scrollTop:0});

   mobile();

   page = 0;

}

$(window).scroll(function(){ 

   if((offset.top-$(window).height() <= $(window).scrollTop())  && load==false && $('aside.sidebar').is(':hidden') && page < {/literal}{$count}{literal} && page > 0){

      load = true;

      lid = 'page'+page;

      lurl = url[page];

      lpage = page + 1;

      lload = false;

      loadpage(lid,lurl,lpage,lload);

   }        

});

});

</script>

Infinite scrolling pour mobile - bess - 06/04/2014

Citation :Je crée un array js dans lequel je mets toutes mes urls.

menumanager aurait été plus approprié je maintiens Wink

Infinite scrolling pour mobile - snatch1974 - 06/04/2014

Comment ça? Où si situe la différence?

Si ça peut simplifier le truc ça m'intéresse forcément

Infinite scrolling pour mobile - bess - 07/04/2014

liste des pages manuellement = manuellement
liste des pages via menu manager = dynamique

Je sais pas toi mais moi la différence me saute aux yeux...

Ne t'arrête pas au fait que tu as besoin d'un array Javascript d'un côté et que tu as du smarty de l'autre. Smarty n'est qu'un interprétateur de template. Tu peux tout a fait lui faire cracher du HTML, du CSS ou du Javascript !

Code :
var $var = new Array({foreach $items as $item}"{$item->alias}" ,{/foreach});

Infinite scrolling pour mobile - snatch1974 - 07/04/2014

ok, on est d'accord sur le manuellement et dynamiquement.

Code :
var url=[];

   {/literal}

   {foreach from=$nodelist item=foo}

   {literal}

     url.push("{/literal}{$foo->url}{literal}");{/literal}

   {/foreach}

   {literal}

tu changes foo par item et on est quasiment sur la même mise en array, non?
c'est du dynamique des des 2 cotés.

j'aurais pu l'écrire comme ça:

Code :
{/literal}

   var url=[{foreach from=$nodelist item=foo}"{$foo->url}",{/foreach}];

{literal}

ce qui est plus optimisé, je le concède... je l'ai d'ailleurs modifié.

j'ai quand même testé avec menumanager par acquis de conscience.

{foreach $items as item} retourne une erreur de syntaxe, {foreach} nécessite forcément un from, non?

Infinite scrolling pour mobile - bess - 07/04/2014

pas obligatoire depuis la version 3 de smarty http://www.smarty.net/docs/en/language.function.foreach.tpl

par contre c'est {foreach $nodelist $foo}, j'avais fait une faute. Je corrige mon post précédent

Infinite scrolling pour mobile - snatch1974 - 07/04/2014

Ah, ben voilà un nouveau truc d'appris au niveau de foreach, en plus c'est simplifié au niveau des propriétées @total, @index et autres...