Infinite scrolling pour mobile

[snatch1974]

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