feature 2928: fctorize switchBox (now js is loaded async + also apply to the calendar type links on index page)

git-svn-id: http://piwigo.org/svn/trunk@23437 68402e56-0260-453c-a942-63ccdbb3a9ee

3 files changed, 32 insertions, 31 deletions

diff --git a/themes/default/js/switchbox.js b/themes/default/js/switchbox.js
index 9e8167a33..4741e7980 100644
--- a/themes/default/js/switchbox.js
+++ b/themes/default/js/switchbox.js
@@ -1,11 +1,23 @@
-function switchBox(link, box) {
-  jQuery(link).click(function() {
-    var elt = jQuery(box);
-    elt.css("left", Math.min( jQuery(this).offset().left, jQuery(window).width() - elt.outerWidth(true) - 5))
-      .css("top", jQuery(this).offset().top + jQuery(this).outerHeight(true))
-      .toggle();
-  });
-  jQuery(box).on("mouseleave click", function() {
-    jQuery(this).hide();
-  });
-}
\ No newline at end of file
+(function () {
+	var sbFunc = function(link, box) {
+		jQuery(link).click(function() {
+			var elt = jQuery(box);
+			elt.css("left", Math.min( jQuery(this).offset().left, jQuery(window).width() - elt.outerWidth(true) - 5))
+				.css("top", jQuery(this).offset().top + jQuery(this).outerHeight(true))
+				.toggle();
+			return false;
+		});
+		jQuery(box).on("mouseleave click", function() {
+			jQuery(this).hide();
+		});
+	};
+
+	if (window.SwitchBox) {
+		for (var i=0; i<SwitchBox.length; i+=2)
+			sbFunc(SwitchBox[i], SwitchBox[i+1]);
+	}
+
+	SwitchBox = {
+		push: sbFunc
+	}
+})();
\ No newline at end of file
diff --git a/themes/default/template/index.tpl b/themes/default/template/index.tpl
index 8b47aace4..891713127 100644
--- a/themes/default/template/index.tpl
+++ b/themes/default/template/index.tpl
@@ -1,4 +1,4 @@
-{combine_script id='core.switchbox' load='footer' require='jquery' path='themes/default/js/switchbox.js'}
+{combine_script id='core.switchbox' load='async' require='jquery' path='themes/default/js/switchbox.js'}
 {$MENUBAR}
 
 
@@ -26,7 +26,7 @@
 			{/if}
 			{/foreach}
 		</div>
-		{footer_script require='core.switchbox'}switchBox("#sortOrderLink", "#sortOrderBox");{/footer_script}
+		{footer_script}(SwitchBox=window.SwitchBox||[]).push("#sortOrderLink", "#sortOrderBox");{/footer_script}
 		{/strip}</li>
 {/if}
 {if !empty($image_derivatives)}
@@ -43,7 +43,7 @@
 			{/if}
 			{/foreach}
 		</div>
-		{footer_script require='core.switchbox'}switchBox("#derivativeSwitchLink", "#derivativeSwitchBox");{/footer_script}
+		{footer_script}(SwitchBox=window.SwitchBox||[]).push("#derivativeSwitchLink", "#derivativeSwitchBox");{/footer_script}
 		{/strip}</li>
 {/if}
 
@@ -101,26 +101,15 @@
 
 {if isset($chronology_views)}
 <div class="calendarViews">{'View'|@translate}:
-	<a id="calendarViewSwitchLink" href="javascript:toggleCalendarViewsBox()">
+	<a id="calendarViewSwitchLink" href="#">
 	{foreach from=$chronology_views item=view}{if $view.SELECTED}{$view.CONTENT}{/if}{/foreach}
-	</a> 
+	</a>
 	<div id="calendarViewSwitchBox" class="switchBox">
 		{foreach from=$chronology_views item=view name=loop}{if !$smarty.foreach.loop.first}<br>{/if}
 		<span{if !$view.SELECTED} style="visibility:hidden"{/if}>&#x2714; </span><a href="{$view.VALUE}">{$view.CONTENT}</a>
 		{/foreach}
 	</div>
-	{footer_script require='jquery'}{literal}
-function toggleCalendarViewsBox() {
-	var elt = jQuery("#calendarViewSwitchBox")
-		, ePos = jQuery("#calendarViewSwitchLink");
-	elt.css("left", Math.min( ePos.offset().left, jQuery(window).width() - elt.outerWidth(true) - 5))
-		.css("top", ePos.offset().top + ePos.outerHeight(true))
-		.toggle();
-};
-jQuery("#calendarViewSwitchBox").on("mouseleave", function() {
-	jQuery(this).hide();
-});
-	{/literal}{/footer_script}
+	{footer_script}(SwitchBox=window.SwitchBox||[]).push("#calendarViewSwitchLink", "#calendarViewSwitchBox");{/footer_script}
 </div>
 {/if}
 
diff --git a/themes/default/template/picture.tpl b/themes/default/template/picture.tpl
index 94be0b03d..5cede3071 100644
--- a/themes/default/template/picture.tpl
+++ b/themes/default/template/picture.tpl
@@ -1,4 +1,4 @@
-{combine_script id='core.switchbox' load='footer' require='jquery' path='themes/default/js/switchbox.js'}
+{combine_script id='core.switchbox' load='async' require='jquery' path='themes/default/js/switchbox.js'}
 {if isset($MENUBAR)}{$MENUBAR}{/if}
 <div id="content"{if isset($MENUBAR)} class="contentWithMenu"{/if}>
 
@@ -20,7 +20,7 @@
 
 <div class="actionButtons">
 {if isset($current.unique_derivatives) && count($current.unique_derivatives)>1}
-{footer_script require='jquery,core.switchbox'}{literal}
+{footer_script require='jquery'}{literal}
 function changeImgSrc(url,typeSave,typeMap)
 {
 	var theImg = document.getElementById("theMainImage");
@@ -34,7 +34,7 @@ function changeImgSrc(url,typeSave,typeMap)
 	jQuery('#derivativeChecked'+typeSave).css('visibility','visible');
 	document.cookie = 'picture_deriv='+typeSave+';path={/literal}{$COOKIE_PATH}{literal}';
 }
-switchBox("#derivativeSwitchLink", "#derivativeSwitchBox");
+(SwitchBox=window.SwitchBox||[]).push("#derivativeSwitchLink", "#derivativeSwitchBox");
 {/literal}{/footer_script}
 {strip}<a id="derivativeSwitchLink" title="{'Photo sizes'|@translate}" class="pwg-state-default pwg-button" rel="nofollow">
   <span class="pwg-icon pwg-icon-sizes">&nbsp;</span><span class="pwg-button-text">{'Photo sizes'|@translate}</span>