[RÉGLÉ] Fusion et defer javascript

[-Tony-]

Bonjour
Je suis en train de fusionner et différer l'exécution de mes fichiers javascripts.
Je ne touche pas à Mootools/core/caption....c'est cassé sinon
Je touche au but, mais !
Voilà
J'ai commencé par mon module de slideshow qui appelait trois fichiers javascripts.
Initialement c'était :

jquery.mobile.customized.min.js
jquery.easing.1.3.js
camera.js (basé sur 1.9.1+)

Appelés respectivement dans cet ordre donc :

$doc->addStyleDeclaration( $style );
if ($params->get('jQuery')) {$doc->addScript ('http://code.jquery.com/jquery-latest.pack.js');}
$doc->addScript($modURL . '/js/jquery.mobile.customized.min.js');
$doc->addScript($modURL . '/js/jquery.easing.1.3.js');
$doc->addScript($modURL . '/js/camera.js');
$js = " 

J'ai donc créé un fichier master.camera.js et copié collé les fichiers javascripts respectivement dans cet ordre dedans.

Puis modifié l'appel php en rajoutant l'attribut defer-->true :

$doc->addStyleDeclaration( $style );
if ($params->get('jQuery')) {$doc->addScript ('http://code.jquery.com/jquery-latest.pack.js');}
//$doc->addScript($modURL . '/js/jquery.mobile.customized.min.js');
//$doc->addScript($modURL . '/js/jquery.easing.1.3.js');
//$doc->addScript($modURL . '/js/camera.js');
$doc->addScript($modURL . '/js/master.camera.js', 'text/javascript', true);
$js = " 

Super, ca marche nickel.

Je me suis dit hop je vais continuer.

J'ai donc chopé mes fichiers.js du template et j'ai fait pareil.

Initialement j'avais :

// Load Js files
if(JFactory::getApplication()->get('jquery') == false) {
   $doc->addScript('//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js'); 
   $doc->addScript(''.$tpath.'/js/jquery-noconflict.js', 'text/javascript', true);
   JFactory::getApplication()->set('jquery', true);
}

$doc->addScript(''.$tpath.'/js/template.js','text/javascript', true); 

Avant tout j'ai hebergé/créé le fichier jquery-1.8.1.min.js au lieu d'aller le chercher sur un autre serveur, nickel, sauf si je lui attribue defer ! (le slideshow est cassé)

ca ca marche :

$doc->addScript(''.$tpath.'/js/jquery-1.8.1.min.js', 'text/javascript'); 

ca ca marche pas (le slideshow est cassé) :

$doc->addScript(''.$tpath.'/js/jquery-1.8.1.min.js', 'text/javascript', true); 

Ok donc j'ai essayé autrement, même logique que pour le slideshow, créé un fichier template.master.min.js, fichiers dans le même ordre d'appel

Toujours pareil, ca ca marche :

// Load Js files
if(JFactory::getApplication()->get('jquery') == false) {
   //$doc->addScript('//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js'); 
   //$doc->addScript(''.$tpath.'/js/jquery-1.8.1.min.js', 'text/javascript');
   //$doc->addScript(''.$tpath.'/js/jquery-noconflict.js', 'text/javascript', true);
   $doc->addScript(''.$tpath.'/js/template.master.min.js');
   JFactory::getApplication()->set('jquery', true);
}

//$doc->addScript(''.$tpath.'/js/template.js','text/javascript', true); 

Ca ca marche pas (le slideshow est cassé) :

// Load Js files
if(JFactory::getApplication()->get('jquery') == false) {
   //$doc->addScript('//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js'); 
   //$doc->addScript(''.$tpath.'/js/jquery-1.8.1.min.js', 'text/javascript');
   //$doc->addScript(''.$tpath.'/js/jquery-noconflict.js', 'text/javascript', true);
   $doc->addScript(''.$tpath.'/js/template.master.min.js', 'text/javascript', true);
   JFactory::getApplication()->set('jquery', true);
}

//$doc->addScript(''.$tpath.'/js/template.js','text/javascript', true); 

Après recherches il semblerait donc si j'ai bien compris que c'est une histoire de conflit entre librairies par rapport à $ ? J'ai essayé de mettre une autre simple ligne "jQuery.noConflict();" entre les fichiers à divers endroits de mes deux fichiers master.js mais pas de changements, j'ai du mal faire ou je m'y prends mal.
Je suis sûr que c'est une bricole c'est à deux doigts de le faire là...c'est juste quand je veux mettre defer que ca gatouille....bon mon site marche sans hein....mais j'aimerai bien y arriver.

Quelqu'un aurait une petite suggestion ? Merci

[-Tony-]

Re : Fusion et defer javascript

J'ai encore essayé autre chose : regrouper les 6 fichiers en un seul, en conservant le bon ordre.

Ca marche nickel, sauf si on attribue defer ou async, toujours le slideshow pété.

Je me demande si ca ne viens pas de ce script du slideshow directement integré dans le html, comme si il attendait un truc qui ne viens pas ou je ne sais pas trop... :

 <script src="/media/system/js/mootools-core.js" type="text/javascript"></script>
  <script src="/media/system/js/core.js" type="text/javascript"></script>
  <script src="/media/system/js/caption.js" type="text/javascript"></script>
  <script src="/templates/horme2/js/template.master.js" type="text/javascript"></script>
  <script type="text/javascript">
window.addEvent('load', function() {
				new JCaption('img.caption');
			});
function keepAlive() {	var myAjax = new Request({method: "get", url: "index.php"}).send();} window.addEvent("domready", function(){ keepAlive.periodical(840000); });
jQuery(function(){
	jQuery('#camera_wrap_115').camera({
		alignment			: 'center',
		autoAdvance			: true,
		easing				: 'easeInOutExpo',
		fx					: 'random',
		gridDifference		: 250,	//to make the grid blocks slower than the slices, this value must be smaller than transPeriod
		height				: '550px',
		imagePath			: 'http://localhost:9999/modules/mod_je_camera/images/',
		hover				: false,
		loader				: 'pie',
		loaderColor			: '#EEEEEE', 
		loaderBgColor		: '#222222',
		loaderOpacity		: .8,	//0, .1, .2, .3, .4, .5, .6, .7, .8, .9, 1
		loaderPadding		: 2,	//how many empty pixels you want to display between the loader and its background
		loaderStroke		: 7,	//the thickness both of the pie loader and of the bar loader. Remember: for the pie, the loader thickness must be less than a half of the pie diameter	
		pieDiameter			: 38,
		piePosition			: 'rightTop',		
		barDirection		: 'leftToRight',
		barPosition			: 'bottom',
		navigation			: true,
		playPause			: true,
		pauseOnClick		: true,
		navigationHover		: true,
		pagination			: true,
		overlayer			: true,	//a layer on the images to prevent the users grab them simply by clicking the right button of their mouse (.camera_overlayer)
		opacityOnGrid		: false,	//true, false. Decide to apply a fade effect to blocks and slices: if your slideshow is fullscreen or simply big, I recommend to set it false to have a smoother effect
		minHeight			: '200px',	//you can also leave it blank
		portrait			: false, //true, false. Select true if you don't want that your images are cropped
		cols				: 6,
		rows				: 3,
		slicedCols			: 8,
		slicedRows			: 3,
		slideOn				: 'next',
		thumbnails			: false,
		time				: 2500,
		transPeriod			: 6500,
		//Mobile
		mobileAutoAdvance	: true, //true, false. Auto-advancing for mobile devices
		mobileEasing		: '',	//leave empty if you want to display the same easing on mobile devices and on desktop etc.
		mobileFx			: '',	//leave empty if you want to display the same effect on mobile devices and on desktop etc.
		mobileNavHover		: true	//same as above, but only for mobile devices
		
	});
});

  </script>

[-Tony-]

Re : Fusion et defer javascript

Avant de continuer j'ai converti en dev mon template de virtuemart 2 en virtuemart 3, pour joomla 3 c'est quasi prêt. Ca urgeait et au moins je ne travaille pas pour rien.
Donc.
Une feuille de style unique pour chaque page, ca ca ne m'a pas posée de soucis.

Scripts uniques alors sans soucis sur les pages joomla (même en integrant mootools-core,core et caption), sauf que :
-vu que mon panier vm3 est présent sur toutes mes pages et qu'il déclenche un keepalive dans le dom
et
-que sur ma page d’accueil le slideshow déclenche également un événement dans le dom
le javascript à donc besoin d'être chargé avant, il ne peut pas être soit chargé en async, defer ou inclus en bas de page.

Scripts uniques sur les pages virtuemart 3 ca par contre c'est plus compliqué, en fait tout fonctionnait sans erreurs sur firebug sauf que....les boutons quantity plus/minus ne fonctionnaient plus, pourtant le script correspondant était bien integré, et, l’événement keepalive qui se déclenche lorsque on ajoute au panier un produit ne fonctionnait pas.

Donc pour l'instant feuilles de styles uniques c'est bon et scripts uniques uniquement bon sur les pages joomla (sans defer ou async ou bas de page).
Je vais arrêter là pour l'instant et faire mes migrations.
Pis après j'essayerai de chercher, il doit y avoir moyen de solutionner ces événements dans le dom qui empêchent de faire ca.

defined('_JEXEC') or die;
// variables
$app = JFactory::getApplication();
$doc = JFactory::getDocument();
$params = $app->getParams();
$view = JRequest::getCmd('view');
$id = JRequest::getVar('id');
$tpath = $this->baseurl.'/templates/'.$this->template;
$links = $this->params->get('links');
$buttons = $this->params->get('buttons');
$hfonts = $this->params->get('hfonts');
$bfonts = $this->params->get('bfonts');
$background = $this->params->get('background');
$container = $this->params->get('container');

unset($doc->_styleSheets[JURI::root(true) . '/components/com_virtuemart/assets/css/jquery.fancybox-1.3.4.css?vmver=8847']);
unset($doc->_styleSheets[JURI::root(true) . '/components/com_virtuemart/assets/css/vmpanels.css']);
unset($doc->_styleSheets[JURI::root(true) . '/components/com_virtuemart/assets/css/validationEngine.template.css?vmver=8847']);
unset($doc->_styleSheets[JURI::root(true) . '/components/com_virtuemart/assets/css/validationEngine.jquery.css?vmver=8847']);
unset($doc->_styleSheets[JURI::root(true) . '/media/system/css/modal.css']);
unset($doc->_styleSheets[JURI::root(true) . '/templates/system/css/general.css']);
//unset($doc->_scripts[JURI::root(true) . '/components/com_virtuemart/assets/js/jquery.min.js?vmver=8847']);
//unset($doc->_scripts[JURI::root(true) . '/components/com_virtuemart/assets/js/jquery-migrate.min.js?vmver=8847']);
//unset($doc->_scripts[JURI::root(true) . '/components/com_virtuemart/assets/js/jquery-ui.min.js?vmver=8847']);
//unset($doc->_scripts[JURI::root(true) . '/components/com_virtuemart/assets/js/jquery.ui.autocomplete.html.js?vmver=8847']);
//unset($doc->_scripts[JURI::root(true) . '/components/com_virtuemart/assets/js/jquery.noconflict.js?vmver=8847']);
//unset($doc->_scripts[JURI::root(true) . '/components/com_virtuemart/assets/js/vmsite.js?vmver=8847']);
//unset($doc->_scripts[JURI::root(true) . '/components/com_virtuemart/assets/js/vmprices.js?vmver=8847']);
//unset($doc->_scripts[JURI::root(true) . '/components/com_virtuemart/assets/js/fancybox/jquery.fancybox-1.3.4.pack.js?vmver=8847']);
//unset($doc->_scripts[JURI::root(true) . '/components/com_virtuemart/assets/js/dynupdate.js?vmver=8847']);
//unset($doc->_scripts[JURI::root(true) . '/components/com_virtuemart/assets/js/facebox.js?vmver=8847']);
//unset($doc->_scripts[JURI::root(true) . '/modules/mod_virtuemart_cart/assets/js/update_cart.js?vmver=8847']);
//unset($doc->_scripts[JURI::root(true) . '/media/system/js/mootools-core.js']);
//unset($doc->_scripts[JURI::root(true) . '/media/system/js/core.js']);
//unset($doc->_scripts[JURI::root(true) . '/media/system/js/caption.js']);
//unset($doc->_scripts[JURI::root(true) . '/modules/mod_je_camera/css/camera.css']);

if ($view == 'article') {
  unset($doc->_scripts[JURI::root(true) . '/media/system/js/mootools-core.js']);
  unset($doc->_scripts[JURI::root(true) . '/media/system/js/core.js']);
  unset($doc->_scripts[JURI::root(true) . '/media/system/js/caption.js']);
}

$menu = $app->getMenu();
$active = $app->getMenu()->getActive();
$pageclass = $params->get('pageclass_sfx');
$this->setGenerator(null);
$head = $doc->getHeadData();
unset($head['metaTags']['http-equiv']);

$doc->setHeadData($head);

if ($view == 'article' && $id == '72') {
  $doc->addStyleSheet(''.$tpath.'/css/master-accueil.css');
}

if (($view == 'article' && $id != '72') || $view == 'orders' || $view == 'remind' || $view == 'reset' || $view == 'login') {
  $doc->addStyleSheet(''.$tpath.'/css/master-article-or-orders.css');
}

if ($view == 'virtuemart' || $view == 'cart' || $view == 'vmplg') {
  $doc->addStyleSheet(''.$tpath.'/css/master-virtuemart-or-cart.css');
}
if ($view == 'category') {
  $doc->addStyleSheet(''.$tpath.'/css/master-category.css');
}
if ($view == 'productdetails') {
  $doc->addStyleSheet(''.$tpath.'/css/master-productdetails.css');
}
if ($view == 'user' || $view == 'form') {
  $doc->addStyleSheet(''.$tpath.'/css/master-user.css');
}
if ($view == 'vendor') {
  $doc->addStyleSheet(''.$tpath.'/css/master-vendor.css');
}

if(JFactory::getApplication()->get('jquery') == false) {

if ($view == 'article' && $id != '72') {
  $doc->addScript(''.$tpath.'/js/master-bonsai.js', 'text/javascript');
}

if ($view == 'article' && $id == '72') {
  $doc->addScript(''.$tpath.'/js/master-bonsai-accueil.js', 'text/javascript');
}

JFactory::getApplication()->set('jquery', true);}

if ($view != 'article') {
$doc->addScript(''.$tpath.'/js/template.js','text/javascript', true);
}


//if ($view == 'virtuemart') {
  //$doc->addScript(''.$tpath.'/js/master-virtuemart.js', 'text/javascript');
//}

//if ($view == 'category' || $view == 'user') {
  //$doc->addScript(''.$tpath.'/js/master-category.js', 'text/javascript');
//}

//if ($view == 'productdetails') {
  //$doc->addScript(''.$tpath.'/js/master-productdetails.js', 'text/javascript');
//}

//if ($view == 'cart' || $view == 'vmplg') {
  //$doc->addScript(''.$tpath.'/js/master-cart.js', 'text/javascript');
//}

//if ($view == 'vendor' || $view == 'orders' || $view == 'remind' || $view == 'reset' || $view == 'login') {
  //$doc->addScript(''.$tpath.'/js/master-virtuemart-light.js', 'text/javascript');
//} 

[cavo789]

Re : Fusion et defer javascript

Bonjour -Tony-

Désolé, j'ai juste survolé tes messages; je réagis ici juste pour ... BRAVO.

Je trouve sincèrement génial que tu puisses passer du temps à essayer de la sorte différents scénariis et, ensuite, venir faire un compte-rendu de tes tests afin que la personne intéressée par le sujet puisse apprendre à le faire elle-même et ainsi, peut-être, collaborer à une discussion passionnante sur le sujet.

Merci pour ton partage !

[-Tony-]

Re : Fusion et defer javascript

Bonjour
Ben disons que comme mon site/boutique est en bonne partie le moyen de gagner ma croute, j'entends bien l'optimiser du mieux que mes petites compétences me permettent, tant en conception qu'en seo ou vitesse ou sécu ou autre.
Puis comme en le créant j'ai compris qu'au final c'est trouver des solutions à des problèmes, aie une nouvelle drogue.
Je n'arrive pas à faire quelque chose, je pose une question, je continue à taffer puis mets à jour mon sujet, au cas où quelqu'un aurait la sympathie de m'aider, et puis c'est plus sympa quand on tombe sur une question/discussion qui a été conclue.

Mais j'ai du me tromper dans l'ordre quand j'ai fais les pages/scripts virtuemart, quitte à ne pas tous les exclure/inclure ca aurait dû marcher.

[-Tony-]

Re : Fusion et defer javascript

Yeaaahhhh....j'y suis arrivé...lol
Un seul script pour les pages joomla, slideshow qui fonctionne et ca marche que ce soit en normal, async ou defer

Premierement j'ai viré mon slideshow initial qui était un énorme paté de code pour que dalle.

J'ai récupéré du code ici : http://responsiveslides.com/

et j'ai créé mon module de slideshow, avec simplement l'inclusion des images dans les balises dans le fichier php du module. Simplement changé les "$" du starter du slider en "jquery"

Puis je me suis rendu compte qu'il y avait deux scripts insérés nativement qui ne me servaient à rien et qui faisaient que différer l'exécution du code était impossible :

le module de login mod_login, c'est lui qui incluait le keepalive. J'ai donc créé un override de mod_login et supprimé juste la ligne :

JHtml::_('behavior.keepalive'); 

Puis l'autre c'était l'inclusion de caption :

<script type="text/javascript">
jQuery(window).on('load',  function() {
                new JCaption('img.caption');
            });
  </script> 

donc dans behavior.php commenté comme ca :

//JHtml::_('script', 'system/caption.js', true, true);
     
    // Attach caption to document
    /*JFactory::getDocument()->addScriptDeclaration(
        "jQuery(window).on('load',  function() {
            new JCaption('" . $selector . "');
        });"
    );*/ 

Puis je me suis rendu compte que du coup que ce soit mootools ou caption ils ne me servaient à rien, donc je les ai supprimmé de mon script maitre.

Donc mon script maitre :

1 : jquery v x.x.x

2 : no conflict

3 : template.js (changement de classes à la volée)

4 : script slider

5 : starter du slider (inutile de l'insérer directement dans le index.php avec les balises, ca marche aussi (si il est inséré après les scripts ci dessus évidemment) mais du coup on ne peut pas différer l'exécution)

Du coup, pour pouvoir insérer le script en bas de page juste avant </body> et pouvoir mettre defer ou async, je n'appelle plus mes scripts dans le logic.php (ou en haut du index avec les variables), je garde

quand même dans le logic.php :

if ($view == 'article') { //ou n'importe quelle view
  unset($doc->_scripts[JURI::root(true) . '/media/system/js/mootools-core.js']);
  unset($doc->_scripts[JURI::root(true) . '/media/system/js/core.js']);
  unset($doc->_scripts[JURI::root(true) . '/media/system/js/caption.js']);
} 

mais je les inseres directement dans le index.php en bas de page :

<?php if (JRequest::getCmd('view') == 'article' && JRequest::getVar('id') == '72') : ?> //pour la page d'accueil avec slideshow
<script src="<?php echo $tpath ?>/js/testy-accueil.js" defer="defer"></script>
// OU
<script src="<?php echo $tpath ?>/js/testy-accueil.js" async="async"></script>
<?php endif; ?>

<?php if (JRequest::getCmd('view') == 'article' && JRequest::getVar('id') != '72') : ?> //pour tous les autres articles
<script src="<?php echo $tpath ?>/js/testy-articles.js" defer="defer"></script>
// OU
<script src="<?php echo $tpath ?>/js/testy-articles.js" async="async"></script>
<?php endif; ?>

Et ca fonctionne...très bien.

Seul bémol, concernant le panier il faut maintenant que je fasse un override du module pour inclure moi même le script dans le script maitre, et si je n'y arrive pas je le dépublierai sur les pages joomla.

Bon maintenant c'est bien joli mais faut que j'arrive à faire pareil sur joomla3 (pis vm3)...