Optimize sidebar loading
authorMichael M Slusarz <slusarz@curecanti.org>
Wed, 28 Jul 2010 17:59:20 +0000 (11:59 -0600)
committerMichael M Slusarz <slusarz@curecanti.org>
Wed, 28 Jul 2010 18:00:15 +0000 (12:00 -0600)
horde/js/sidebar.js
horde/services/sidebar.php
horde/templates/sidebar/sidebar.inc
horde/themes/screen.css

index 7ce40d8..c556111 100644 (file)
@@ -9,37 +9,17 @@ var HordeSidebar = {
     // Variables set in services/sidebar.php:
     // domain, path, refresh, rtl, tree, url, width
 
-    getCookie: function(name, deflt)
-    {
-        var cookie = document.cookie.toQueryParams('; ');
-        if (!cookie) {
-            cookie = document.cookie.toQueryParams(';');
-        }
-
-        return cookie[name]
-            ? unescape(cookie[name])
-            : deflt;
-    },
-
     toggleSidebar: function()
     {
         var expanded = $('expandedSidebar').visible(),
-            expires = new Date(),
-            margin;
+            expires = new Date();
 
         $('expandedSidebar', 'hiddenSidebar').invoke('toggle');
         if ($('themelogo')) {
             $('themelogo').toggle();
         }
 
-        margin = expanded
-            ? $('hiddenSidebar').down().getWidth()
-            : this.width;
-        if (this.rtl) {
-            $('horde_body').setStyle({ marginRight: margin + 'px' });
-        } else {
-            $('horde_body').setStyle({ marginLeft: margin + 'px' });
-        }
+        this.setMargin(!expanded);
 
         // Expire in one year.
         expires.setTime(expires.getTime() + 31536000000);
@@ -67,18 +47,34 @@ var HordeSidebar = {
 
             this.resizeSidebar();
         }
-    }
+    },
 
-};
+    setMargin: function(expanded)
+    {
+        var margin = expanded
+            ? this.width
+            : $('hiddenSidebar').down().getWidth();
 
-document.observe('dom:loaded', function() {
-    $('hiddenSidebar').hide();
-    if (HordeSidebar.getCookie('horde_sidebar_expanded', 1) != Number($('expandedSidebar').visible())) {
-        HordeSidebar.toggleSidebar();
-    }
-    if (HordeSidebar.refresh) {
-        HordeSidebar.updateSidebar.bind(HordeSidebar).delay(HordeSidebar.refresh);
+        if (this.rtl) {
+            $('horde_body').setStyle({ marginRight: margin + 'px' });
+        } else {
+            $('horde_body').setStyle({ marginLeft: margin + 'px' });
+        }
+    },
+
+    onDomLoad: function()
+    {
+        if ($('hiddenSidebar').visible()) {
+            this.setMargin(false);
+        }
+
+        if (this.refresh) {
+            this.updateSidebar.bind(this).delay(this.refresh);
+        }
+
+        $('expandButton', 'hiddenSidebar').invoke('observe', 'click', this.toggleSidebar.bind(this));
     }
 
-    $('expandButton', 'hiddenSidebar').invoke('observe', 'click', HordeSidebar.toggleSidebar.bind(HordeSidebar));
-});
+};
+
+document.observe('dom:loaded', HordeSidebar.onDomLoad.bind(HordeSidebar));
index d9166dc..8268df8 100644 (file)
@@ -9,11 +9,12 @@
  *
  * @author   Michael Pawlowsky <mikep@clearskymedia.ca>
  * @author   Chuck Hagenbuch <chuck@horde.org>
+ * @author   Michael Slusarz <slusarz@horde.org>
  * @category Horde
  * @package  Horde
  */
 
-require_once dirname(__FILE__) . '/../../lib/Application.php';
+require_once dirname(__FILE__) . '/../lib/Application.php';
 Horde_Registry::appInit('horde', array('authentication' => 'none'));
 
 /* We may not be in global scope since this file can be included from other
@@ -33,21 +34,36 @@ if (!Horde_Util::getFormData('ajaxui') &&
     $ajax_url->pathInfo = 'sidebarUpdate';
 
     $charset = $registry->getCharset();
+    $rtl = intval(isset($registry->nlsconfig['rtl'][$language]));
+    $show_sidebar = !isset($_COOKIE['horde_sidebar_expanded']) || $_COOKIE['horde_sidebar_expanded'];
+    $width = intval($prefs->getValue('sidebar_width'));
 
     Horde::addInlineScript(array(
         'HordeSidebar.domain = ' . Horde_Serialize::serialize($conf['cookie']['domain'], Horde_Serialize::JSON, $charset),
         'HordeSidebar.path = ' . Horde_Serialize::serialize($conf['cookie']['path'], Horde_Serialize::JSON, $charset),
         'HordeSidebar.refresh = ' . intval($prefs->getValue('menu_refresh_time')),
-        'HordeSidebar.rtl = ' . intval(isset($registry->nlsconfig['rtl'][$language])),
+        'HordeSidebar.rtl = ' . $rtl,
         'HordeSidebar.url = ' . Horde_Serialize::serialize(strval($ajax_url), Horde_Serialize::JSON, $charset),
-        'HordeSidebar.width = ' . intval($prefs->getValue('sidebar_width'))
+        'HordeSidebar.width = ' . $width
     ));
 
     require $registry->get('templates', 'horde') . '/sidebar/sidebar.inc';
 
-    echo '<div id="horde_body" class="body" style="margin-left:' . intval($prefs->getValue('sidebar_width')) . 'px">';
+    if ($show_sidebar) {
+        $style = $rtl
+            ? 'margin-right:' . $width . 'px'
+            : 'margin-left:' . $width . 'px';
+    } else {
+        /* Default to 18px. If local theme changes alter this value, it will
+         * automatically be determined by javascript at load time. */
+        $style = $rtl
+            ? 'margin-right:18px'
+            : 'margin-left:18px';
+    }
+
+    echo '<div id="horde_body" class="body" style="' . $style . '">';
 } else {
-    echo '<div class="body">';
+    echo '<div class="body" id="horde_body">';
 }
 
 $GLOBALS['sidebarLoaded'] = true;
index abdb1d9..0994268 100644 (file)
@@ -1,12 +1,12 @@
 <div class="sidebar" style="width:<?php echo $prefs->getValue('sidebar_width') ?>px">
- <div id="expandedSidebar" style="overflow:hidden">
+ <div id="expandedSidebar"<?php if (!$show_sidebar): ?> style="display:none"<?php endif; ?>>
   <span id="expandButton" class="rightFloat"><?php echo Horde::img('hide_panel.png', null, array('title' => _("Collapse Sidebar"))) ?></span>
   <div id="sidebarPanel">
    <?php $tree->renderTree() ?>
   </div>
  </div>
 
- <div id="hiddenSidebar">
+ <div id="hiddenSidebar"<?php if ($show_sidebar): ?> style="display:none"<?php endif; ?>>
   <?php echo Horde::img('show_panel.png') ?>
  </div>
 </div>
index 950250a..b27c0fc 100644 (file)
@@ -478,6 +478,10 @@ div.nicetitle {
     color: #000;
 }
 
+#expandedSidebar {
+    overflow: hidden;
+}
+
 #hiddenSidebar img {
     padding-right: 2px;
 }