Vous n'êtes pas identifié(e).

Annonce

ATTENTION

  • Prenez le temps de rechercher si quelqu'un n'a pas déjà proposé une solution à votre problème. Sur le forum français et sur le wiki
  • Pensez à mettre à jour votre version de CMS Made Simple. Nous ne faisons de support que sur LA dernière version de CMS Made Simple.
  • Renseignez impérativement le formulaire de nouveau message de manière la plus complète que possible. Dans votre CMS utiliser le menu Administration du site/Informations du système en haut Vue au format texte. Ces informations demandées nous permettent de mieux vous aider
  • Ajoutez [Résolu] au début du titre de votre 1er message lorsqu'une solution a été trouvée.

#1 03/04/2014 18:04:09

snatch1974
Membre
Inscription : 18/01/2011
Messages : 300

Infinite scrolling pour mobile

#~~~~~ 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

Dernière modification par snatch1974 (06/04/2014 16:32:32)

Hors ligne

 

#2 03/04/2014 22:55:22

snatch1974
Membre
Inscription : 18/01/2011
Messages : 300

Re : Infinite scrolling pour mobile

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!

Hors ligne

#3 03/04/2014 23:00:14

bess
Administrateur
Lieu : Rennes
Inscription : 16/12/2008
Messages : 6 094
Site Web

Re : Infinite scrolling pour mobile

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

Hors ligne

#4 05/04/2014 04:26:21

snatch1974
Membre
Inscription : 18/01/2011
Messages : 300

Re : Infinite scrolling pour mobile

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:

{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  tongue

Dernière modification par snatch1974 (05/04/2014 07:47:19)

Hors ligne

#5 06/04/2014 16:31:40

snatch1974
Membre
Inscription : 18/01/2011
Messages : 300

Re : Infinite scrolling pour mobile

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.

[== 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>

Dernière modification par snatch1974 (06/04/2014 20:25:24)

Hors ligne

#6 06/04/2014 17:30:12

bess
Administrateur
Lieu : Rennes
Inscription : 16/12/2008
Messages : 6 094
Site Web

Re : Infinite scrolling pour mobile

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

menumanager aurait été plus approprié je maintiens wink

Hors ligne

#7 06/04/2014 17:42:32

snatch1974
Membre
Inscription : 18/01/2011
Messages : 300

Re : Infinite scrolling pour mobile

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

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

Hors ligne

#8 07/04/2014 10:47:50

bess
Administrateur
Lieu : Rennes
Inscription : 16/12/2008
Messages : 6 094
Site Web

Re : Infinite scrolling pour mobile

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 !

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

Hors ligne

#9 07/04/2014 15:55:56

snatch1974
Membre
Inscription : 18/01/2011
Messages : 300

Re : Infinite scrolling pour mobile

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


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:

{/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?

Hors ligne

#10 07/04/2014 19:04:18

bess
Administrateur
Lieu : Rennes
Inscription : 16/12/2008
Messages : 6 094
Site Web

Re : Infinite scrolling pour mobile

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

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

Hors ligne

#11 07/04/2014 22:28:34

snatch1974
Membre
Inscription : 18/01/2011
Messages : 300

Re : Infinite scrolling pour mobile

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...

Hors ligne

Pied de page des forums

  Flux Rss Twitter FaceBook