Ajax reload et fullscreen overlay

Février 2019

Bonjour,
J’ai une série d’articles cliquables pour faire apparaître la totalité des articles de cette façon.

Pour éviter de charger tous les articles, je m’inspire de cette contribution.

J’utilise le JS de la contribution SPIP :

<script type="text/javascript"> 
$(document).ready(function(){
$('.liste_actus_item').on('click', function(event){
event.preventDefault();
var id_article_current = $(this).attr("data-id");
$('.liste_actus_item.active').removeClass('active');
$(this).toggleClass('active');
$(".debug").html("Appel de l'article: " + id_article_current);
	ajaxReload('vue_actu', {
	args:{id_article:id_article_current},
	history:false,
	callback:function(){
	$(".debug").html("Article " + id_article_current + " chargé !");
			},
		});
		return true;
	});
});
</script>

Pour que l’effet "Overlay" fonctionne, il faudrait que la div "vue_actu" s’affiche à 100 % (déclaré à 0 en CSS). Comment puis-je ajouter dans le JS ci-dessus une fonction pour changer mon width à 100% ?

J’ai essayé avec ça en ajoutant une fonction et en changeant "return false" en "return true" ;

function openNav() {
  document.getElementById("vue_actu").style.width = "100%";
}

et en ajoutant sur le lien le onclick :

<a onclick="openNav()" href="#URL_ARTICLE" class="liste_actus_item" data-id="#ID_ARTICLE">Lire</a>

L’overlay arrive pour se retirer aussitôt...

Je vous remercie de votre aide...

Résolu

Par note Par date Par date chronologique

Indiquez l’intérêt que vous portez à cette réponse

0

tcharlss

Février 2019

Salut,

Tu devrais plutôt appeler la fonction openNav dans le callbak de ajaxReload : callback:openNav().
Indiquez l’intérêt que vous portez à cette réponse

0

mcommemarc

Février 2019

Merci.
Je me suis remis à la doc de SPIP où j’ai trouvé la solution. J’ai changé le JS :
ajaxReload( 'article-preview', { callback:function(){ $("div.overlay ").css("width","100%"); }, args:{ 'id_article':id_article}, history:false}) }
et un JS pour fermer :
$(document).ready(function(){ $('.closebtn').on( "click", function() { $("div.overlay ").css("width","0%"); }); });
Mon CSS overlay est celui-ci :
.overlay { height: 100%; width: 0; position: fixed; top: 0; left: 0; background-color: rgba(255,255,255,0.95); overflow-x: hidden; transition: 0.5s; z-index:1000; }
Dans ma page sommaire :
<button onclick="voir(#ID_ARTICLE);return false;">Lire</button>
J’essaie d’installer à la place ceci :
#BOUTON_ACTION{libellé, url, classe, confirm, title, callback}
car, à priori, Jquery n’admet plus les onClick... Si quelqu’un sait utiliser ce truc !

puis à la suite, un inclure :
<div class="overlay"> <a href="javascript:void(0)" class="closebtn" onclick="closebtn()">×</a> <INCLURE{fond=article-preview,ajax=article-preview}> </div>
Là, pareil, il faut que je change ça, à cause du onClick...

Ainsi, mon inclure Ajax affiche l’article en fullscreen (et économise en place d’écran) et je crois en navigabilité...

Par contre, j’aimerais savoir si il est possible, avec ce système, que les internautes puissent partager l’article (copier/coller de l’URL, qui n’existe pas !).

Et comment faire pour afficher une petite icone d’upload pour montrer qu’un article se charge ?
Indiquez l’intérêt que vous portez à cette réponse

0

tcharlss

Février 2019

à priori, Jquery n’admet plus les onClick

Non, le truc c’est que tu mettais le code javascript sur les liens eux-mêmes, dans le bout de html qui est rechargé en ajax. Du coup, ça "annulait" tout ce que tu mettais avec onclick.
Les onclicks mis comme ça en attribut, c’est à éviter.

Par contre, j’aimerais savoir si il est possible, avec ce système, que les internautes puissent partager l’article (copier/coller de l’URL, qui n’existe pas !).

Remplace ton bouton par un simple lien, il faut que ton système de navigation fonctionne de base sans javascript/rechargement ajax (ça ne doit être qu’une amélioration).
Par ex :
<a href="[(#SELF|parametre_url{id_article,#ID_ARTICLE})]" class="ajax">voir l'article</a>
Tu peux aussi ajouter le paramètre history; true à ajaxreload.
Indiquez l’intérêt que vous portez à cette réponse

0

mcommemarc

Février 2019

OK merci pour l’explication !
Je me suis basé sur cet exemple, ici : https://contrib.spip.net/Exemple-de-bloc-telecommande-en-Ajax.
où l’appel du lien se fait ainsi :
<button onclick="voir(#ID_ARTICLE);return false;">Lire</button>
Mais si j’utilise ton lien :
<a href="[(#SELF|parametre_url{id_article,#ID_ARTICLE})]" class="ajax">voir l'article</a>
et bien, la fonction "Voir" ne fonctionne plus... (il y a vraiment des bases que je n’ai pas...)
Rien à voir mais y’aurait-il pas un souci sur les forums ? Je suis souvent obligé d’insister vraiment pour poster mes messages et recalculer la page pour voir apparaître mes messages...
Indiquez l’intérêt que vous portez à cette réponse

0

tcharlss

Février 2019

À vue de nez je dirais qu’il manque la classe .liste_actus_item sur les liens, si j’en crois ton code js :
$('.liste_actus_item').on('click', ...
Indiquez l’intérêt que vous portez à cette réponse

0

mcommemarc

Février 2019

Merci encore ! C’est OK.
Petit résumé qui veulent tout savoir : afficher un article en Ajax en fullscreen.
Sommaire HTML :
<BOUCLE_mosaic(ARTICLES) {id_rubrique} {par date}> <div class="grid-item liste_actus_item"> <h2>#TITRE</h2> <p>[(#CHAPO|sinon{[(#TEXTE|couper{200})]})]</p> <a href="#URL_ARTICLE" class="liste_actus_item" data-id="#ID_ARTICLE">ici</a> </div> </BOUCLE_mosaic>
Plus loin :
<div class="overlay"> <div id="btnfermer" class="btnclose">×</div> <INCLURE{fond=article-preview,ajax=article-preview}> </div>
article Preview HTML :
<BOUCLE_art(ARTICLES){id_article}> <div class="overlay_content"> <h1>#TITRE</h1> <p>#TEXTE</p> </div> </BOUCLE_art></B_art> Aucun article <//B_art>
CSS :
.overlay { height: 100%; width: 0; position: fixed; top: 0; left: 0; background-color: rgba(255,255,255,0.95); overflow-x: hidden; transition: 0.5s; z-index:1000; } .overlay .btnclose { position: absolute; top: 20px; right: 45px; font-size: 60px; cursor: pointer; } .btnclose:hover { color:red; } .overlay_content{ padding: 15%; }
et JS :
<script> // lancer le js dans le DOM est pret $(document).ready(function(){ $('.liste_actus_item').on('click', function(event){ event.preventDefault(); var id_article_current = $(this).attr("data-id"); ajaxReload('article-preview', { args:{id_article:id_article_current}, history:true, callback:function(){ $("div.overlay ").css("width","100%"); }, }); return false; }); }); </script> <script> $(function(){ $('#btnfermer').click(function(){ $('div.overlay').css("width","0%"); }); }); </script>
Indiquez l’intérêt que vous portez à cette réponse

0

tcharlss

Février 2019

Cool, merci d’avoir pensé au récap, utile pour les gens qui liront ça par la suite.

Juste une remarque : là tu as mis #URL_ARTICLE, ça veut dire qu’il y aura 2 comportements différents :
* avec javascript, on reste sur la même page et ça recharge juste le bloc
* sans javascript, on est est amenés sur une autre page

Idéalement pour la navigation, il faudrait le même comportement avec et sans javascript, ce dernier n’étant là que pour améliorer.
Indiquez l’intérêt que vous portez à cette réponse

0

mcommemarc

Février 2019

Je ne comprends pas bien...
Effectivement, sans JS, on est dirigé sur la page article, normal.
Avec JS, on reste sur la même page, et le div fullscreen affiche l’article.
C’est bien ce qui est voulu. Cela évite des allers-retours, parfois chiants, surtout quand il y a plein d’articles à lire...