Changeset 23437 for trunk/themes/default

Timestamp:

Jun 22, 2013, 6:44:48 AM (11 years ago)

Author:

rvelices

Message:

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

Location:

trunk/themes/default

Files:

• js/switchbox.js (modified) (1 diff)
• template/index.tpl (modified) (5 diffs)
• template/picture.tpl (modified) (3 diffs)

trunk/themes/default/js/switchbox.js

@@ -1 @@
-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();
-  });
-}
+(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
+        }
+})();

trunk/themes/default/template/index.tpl

@@ -1 @@
-{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}
 
@@ -27 +27 @@
                         {/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}
@@ -44 +44 @@
                         {/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}
@@ -102 +102 @@
 {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}
@@ -110 +110 @@
                 {/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}

trunk/themes/default/template/picture.tpl

@@ -1 @@
-{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}>
@@ -21 +21 @@
 <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)
 {
@@ -35 +35 @@
         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">