Browse Source

Suite à r100849;

On mutualise le code js qui récupère parallèlement les zblocs en ajax, via un inclure unique dans head.
Un setInterval unique attend l'arrivée de tous les zblocs et de jQuery pour mettre à jour (triggerAjaxLoad).
On corrige le bug du scroll auto vers une ancre située dans un zbloc, cassé par r100849.
A voir si on les perfs sont (encore !) améliorées avec jQl actif.
pull/1/head
placido@roxing.net 6 years ago
parent
commit
9cd807e228
  1. 1
      .gitattributes
  2. 36
      inclure/ajax_parallel_load.html
  3. 75
      javascript/zapl.scripts.js.html
  4. 6
      zcore_pipelines.php

1
.gitattributes vendored

@ -53,6 +53,7 @@ inclure/resume/mot.html -text
inclure/resume/rubrique.html -text
inclure/resume/site.html -text
inclure/resume/syndic_article.html -text
javascript/zapl.scripts.js.html -text
lang/paquet-zcore_en.php -text
lang/paquet-zcore_fr.php -text
lang/zcore.xml -text

36
inclure/ajax_parallel_load.html

@ -9,41 +9,7 @@
]
#SET{bloc,#ENV{bloc}|dirname|basename}
<div id="zapl-#GET{bloc}" class="zapl-loading"><:zcore:zapl_loading:></div>
<script type="text/javascript">
[//(#REM) equivalent de $.get en pur js, on n'attend pas que jQuery soit chargé]
function getAjax(url, success) {
var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.onreadystatechange = function() {
if (xhr.readyState>3 && xhr.status==200) success(xhr.responseText);
};
xhr.send();
return xhr;
}
[//(#REM) Récupérer et insérer le zbloc ]
var getBloc = function(bloc) {
var myurl = window.location + "";
myurl = myurl.split('#');
myurl = myurl[0] + ((myurl[0].indexOf("?")>0)?"&":"?") + "var_zajax=" + bloc;
getAjax(myurl, function(data){
var el = document.querySelector("#zapl-"+ bloc);
var newEl = document.createElement('div');
newEl.innerHTML = data;
el.parentNode.replaceChild(newEl, el);
[//(#REM) attendre que jQuery soit chargé et déclencher AjaxLoad ]
var interval = setInterval(function(){
if (typeof jQuery.spip == 'object' && typeof jQuery.spip.triggerAjaxLoad == 'function') {
clearInterval(interval);
jQuery.spip.triggerAjaxLoad();
var h = window.location.hash;
if (h && jQuery(h)[0]) jQuery(h).positionner(true);
return;
}
}, 100);
});
};
getBloc('#GET{bloc}');
</script>
<script type="text/javascript">getZapl('#GET{bloc}');</script>
<noscript>
<meta http-equiv="refresh" content="2;url=<?php echo ($url=parametre_url(self(),'var_zapl','non'));?>" />
<a href="<?php echo $url ?>"><:zcore:zapl_reload_off:></a>

75
javascript/zapl.scripts.js.html

@ -0,0 +1,75 @@
[(#HTTP_HEADER{Content-type:application/javascript[; charset=(#CHARSET)]})]
[//(#REM) equivalent de $.get en pur js]
var getAjax = function(url, success) {
var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.onreadystatechange = function() {
if (xhr.readyState>3 && xhr.status==200) success(xhr.responseText);
};
xhr.send();
return xhr;
}
[//(#REM) lister les zblocs bien arrivés ]
var collectZaplList = function(bloc) {
if(!window.zapl_list) {
window.zapl_list = new Array();
}
window.zapl_list.push(bloc);
};
[//(#REM) Peupler le zbloc et dire qu'il est prêt ]
function getZapl(bloc) {
var myurl = window.location + "";
myurl = myurl.split('#');
myurl = myurl[0] + ((myurl[0].indexOf("?")>0)?"&":"?") + "var_zajax=" + bloc;
getAjax(myurl, function(data){
var el = document.querySelector("#zapl-"+ bloc);
var newEl = document.createElement('div');
newEl.innerHTML = data;
el.parentNode.replaceChild(newEl, el);
collectZaplList("#"+bloc);
});
};
[//(#REM) combien de zBloc attendus ? ]
var zapl_lmax = [(#EVAL{_Z_AJAX_PARALLEL_LOAD}|explode{","}|count)];
[//(#REM) attendre jQuery et les zblocs pour déclencher AjaxLoad ]
window.zapl_loop_index = 0;
zapl_loop = setInterval(function() {
[//(#REM) DEBUG
// console.log("loop :" + window.zapl_loop_index);
// console.log("function :" + (typeof jQuery.spip.triggerAjaxLoad !== 'undefined'));
// console.log("Array :" + (typeof window.zapl_list !== 'undefined'));
// console.log("Length :" + (window.zapl_list.length == zapl_lmax));
//]
if ((typeof jQuery.spip === 'object')
&& (typeof jQuery.spip.triggerAjaxLoad === 'function')
&& (typeof window.zapl_list !== 'undefined')
&& (window.zapl_list.length == zapl_lmax) ) {
clearInterval(zapl_loop);
jQuery.spip.triggerAjaxLoad();
var h = window.location.hash;
if (h) {
[//(#REM) $b = correspond à la selection jQuery des zbloc ]
var $b = $();
window.zapl_list.forEach(function(e){
$b=$b.add(e);
});
if ($b.find(h)[0]) {
jQuery(h).positionner(true);
}
}
return;
}
[//(#REM) Au dela de 20 sec ... ]
else if (window.zapl_loop_index < 200){
window.zapl_loop_index++;
}
[//(#REM) ... auto-débraillage ]
else {
clearInterval(zapl_loop);
}
}, 100);

6
zcore_pipelines.php

@ -165,6 +165,7 @@ function zcore_pre_propre($flux) {
}
/**
* Ajouter les scripts pour getZaplBloc() dans head, directement, sans src
* Ajouter le inc-insert-head du theme si il existe
*
* @param string $flux
@ -172,6 +173,11 @@ function zcore_pre_propre($flux) {
* @return string
*/
function zcore_insert_head($flux) {
// on utilise recuperer_fond() car on veut pouvoir s'affranchir de jQl pour agir plus tôt
if ( defined('_Z_AJAX_PARALLEL_LOAD_OK') AND $fond = recuperer_fond('javascript/zapl.scripts.js', array(), array('ajax' => false) )) {
$flux = "\n<script type=\"text/javascript\">\n" . compacte($fond,"js") . "</script>\n". $flux;
}
if (find_in_path('inc-insert-head.html')) {
$flux .= recuperer_fond('inc-insert-head', array());
}

Loading…
Cancel
Save