Partially added the collapsing feature of the left bar

Added a toggle switch on the left bar sub menus. Added a small icon
alongside the submenu name. It currently toggles the submenus correctly
and changes the icon orientation. However, the state of the menu isn't
kept in memory, therefore changing to another sidebar (from home to
admin for instance) doesn't keep the current display settings.

By default, all menus are expanded.

lib/javascript/base.js

@@ -6,7 +6,7 @@
 // This program is free software; you can redistribute it and/or
 // modify it under the terms of the GNU General Public License v2
 // as published by the Free Software Foundation.
-// 
+//
 //
 // This program is distributed in the hope that it will be useful,
 // but WITHOUT ANY WARRANTY; without even the implied warranty of
@@ -19,7 +19,7 @@
 //
 $(document).ready(function () {
     $('.default_hidden').hide();
-    
+
     $("#tabs li").click(function() {
         $("#tabs li").removeClass('tab_active');
         $(this).addClass("tab_active");
@@ -65,13 +65,13 @@ function flipField(field) {
 
 // updateText
 // Changes the specified elements innards. Used for the catalog mojo fluff.
-function updateText(field, value) { 
+function updateText(field, value) {
     $('#'+field).html(value);
 }
 
 // toggleVisible
 // Toggles display type between block and none. Used for ajax loading div.
-function toggleVisible(element) { 
+function toggleVisible(element) {
     var target = $('#' + element);
     if (target.is(':visible')) {
         target.hide();
@@ -82,27 +82,27 @@ function toggleVisible(element) {
 
 // delayRun
 // This function delays the run of another function by X milliseconds
-function delayRun(element, time, method, page, source) { 
+function delayRun(element, time, method, page, source) {
-    var function_string = method + '(\'' + page + '\',\'' + source + '\')'; 
+    var function_string = method + '(\'' + page + '\',\'' + source + '\')';
-    var action = function () { eval(function_string); }; 
+    var action = function () { eval(function_string); };
 
-    if (element.zid) { 
+    if (element.zid) {
-        clearTimeout(element.zid); 
+        clearTimeout(element.zid);
     }
 
-    element.zid = setTimeout(action, time); 
+    element.zid = setTimeout(action, time);
 }
 
 // reloadUtil
 // Reload our util frame
-// IE issue fixed by Spocky, we have to use the iframe for Democratic Play & 
+// IE issue fixed by Spocky, we have to use the iframe for Democratic Play &
 // Localplay, which don't actually prompt for a new file
-function reloadUtil(target) { 
+function reloadUtil(target) {
     $('#util_iframe').prop('src', target);
 }
 
 // reloadRedirect
 // Send them elsewhere
-function reloadRedirect(target) { 
+function reloadRedirect(target) {
     window.location = target;
-}
+}

templates/base.css

@@ -26,38 +26,38 @@
  * Tag Definitions
  *****************/
 
-.tag_size1 { 
+.tag_size1 {
     font-size:.6em;
-} 
+}
-.tag_size2 { 
+.tag_size2 {
-    font-size:.8em; 
+    font-size:.8em;
-} 
+}
-.tag_size3 { 
+.tag_size3 {
-    font-size:1em; 
+    font-size:1em;
-} 
+}
-.tag_size4 { 
+.tag_size4 {
-    font-size:1.2em; 
+    font-size:1.2em;
-} 
+}
 
-a.tag_size1, a.tag_size2, a.tag_size3, a.tag_size4 { text-decoration: none; } 
+a.tag_size1, a.tag_size2, a.tag_size3, a.tag_size4 { text-decoration: none; }
 
-.hover-add:hover { color: #347C17; } 
+.hover-add:hover { color: #347C17; }
-.hover-remove:hover { color: #FF0000; } 
+.hover-remove:hover { color: #FF0000; }
 
 /*****************
- * Generic / Misc 
+ * Generic / Misc
  *****************/
- 
+
 .hidden {
     visibility: hidden;
 }
- 
+
-.item_on { 
+.item_on {
     color: #347C17;
 }
 
-.item_off { 
+.item_off {
-    color: #FF0000; 
+    color: #FF0000;
 }
 
 #tabs_wrapper {
@@ -253,4 +253,24 @@ a.tag_size1, a.tag_size2, a.tag_size3, a.tag_size4 { text-decoration: none; }
     width: 50px;
     text-align: center;
     padding: 0;
+}
+
+.expanded {
+    float: right;
+    margin-top: 5px;
+    -webkit-transform: rotate(90deg);
+    -moz-transform: rotate(90deg);
+    -o-transform: rotate(90deg);
+}
+
+.collapsed {
+    float: right;
+    margin-top: 5px;
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    -moz-transform: scaleX(-1);
+    -o-transform: scaleX(-1);
+    -webkit-transform: scaleX(-1);
+    transform: scaleX(-1);
 }

templates/sidebar.inc.php

@@ -65,3 +65,18 @@ foreach ($sidebar_items as $item) {
         </a>
     </li>
 </ul>
+<script>
+$(function() {
+    $(".header").click(function () {
+
+        $header = $(this);
+        //getting the next element
+        $content = $header.next();
+        //open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
+        $content.slideToggle(500, function() {
+            $header.children().toggleClass("expanded collapsed");
+        });
+
+    });
+});
+</script>

templates/sidebar_admin.inc.php

@@ -21,26 +21,26 @@
  */
 ?>
 <ul class="sb2" id="sb_admin">
-  <li><h4><?php echo T_('Catalogs'); ?></h4>
+  <li><h4 class="header"><?php echo T_('Catalogs'); ?><span class="sprite sprite-icon_all expanded" alt="Expand/Collapse" title="Expand/Collapse"></h4>
    <ul class="sb3" id="sb_admin_catalogs">
     <li id="sb_admin_catalogs_Add"><a href="<?php echo $web_path; ?>/admin/catalog.php?action=show_add_catalog"><?php echo T_('Add a Catalog'); ?></a></li>
     <li id="sb_admin_catalogs_Show"><a href="<?php echo $web_path; ?>/admin/catalog.php?action=show_catalogs"><?php echo T_('Show Catalogs'); ?></a></li>
    </ul>
   </li>
 
-  <li><h4><?php echo T_('User Tools'); ?></h4>
+  <li><h4 class="header"><?php echo T_('User Tools'); ?><span class="sprite sprite-icon_all expanded" alt="Expand/Collapse" title="Expand/Collapse"></h4>
     <ul class="sb3" id="sb_admin_ut">
       <li id="sb_admin_ut_AddUser"><a href="<?php echo $web_path; ?>/admin/users.php?action=show_add_user"><?php echo T_('Add User'); ?></a></li>
       <li id="sb_admin_ut_BrowseUsers"><a href="<?php echo $web_path; ?>/admin/users.php"><?php echo T_('Browse Users'); ?></a></li>
     </ul>
   </li>
-  <li><h4><?php echo T_('Access Control'); ?></h4>
+  <li><h4 class="header"><?php echo T_('Access Control'); ?><span class="sprite sprite-icon_all expanded" alt="Expand/Collapse" title="Expand/Collapse"></h4>
     <ul class="sb3" id="sb_admin_acl">
       <li id="sb_admin_acl_AddAccess"><a href="<?php echo $web_path; ?>/admin/access.php?action=show_add_advanced"><?php echo T_('Add ACL'); ?></a></li>
       <li id="sb_admin_acl_ShowAccess"><a href="<?php echo $web_path; ?>/admin/access.php"><?php echo T_('Show ACL(s)'); ?></a></li>
     </ul>
   </li>
-  <li><h4><?php echo T_('Other Tools'); ?></h4>
+  <li><h4 class="header"><?php echo T_('Other Tools'); ?><span class="sprite sprite-icon_all expanded" alt="Expand/Collapse" title="Expand/Collapse"></h4>
     <ul class="sb3" id="sb_admin_ot">
       <li id="sb_admin_ot_Debug"><a href="<?php echo $web_path; ?>/admin/system.php?action=show_debug"><?php echo T_('Ampache Debug'); ?></a></li>
       <li id="sb_admin_ot_ClearNowPlaying"><a href="<?php echo $web_path; ?>/admin/catalog.php?action=clear_now_playing"><?php echo T_('Clear Now Playing'); ?></a></li>
@@ -51,7 +51,7 @@
     </ul>
   </li>
 <?php if (Access::check('interface','100')) { ?>
-  <li><h4><?php echo T_('Server Config'); ?></h4>
+  <li><h4 class="header"><?php echo T_('Server Config'); ?><span class="sprite sprite-icon_all expanded" alt="Expand/Collapse" title="Expand/Collapse"></h4>
     <ul class="sb3" id="sb_preferences_sc">
 <?php
     $catagories = Preference::get_catagories();

templates/sidebar_home.inc.php

@@ -21,7 +21,7 @@
  */
 ?>
 <ul class="sb2" id="sb_home">
-    <li><h4><?php echo T_('Browse'); ?></h4>
+    <li><h4 class="header"><?php echo T_('Browse'); ?><span class="sprite sprite-icon_all expanded" alt="Expand/Collapse" title="Expand/Collapse"></span></h4>
         <?php
         if (isset($_REQUEST['action'])) {
             $text = scrub_in($_REQUEST['action']) . '_ac';
@@ -46,7 +46,7 @@
     <?php Ajax::start_container('browse_filters'); ?>
     <?php Ajax::end_container(); ?>
     <li>
-        <h4><?php echo T_('Playlist'); ?></h4>
+        <h4 class="header"><?php echo T_('Playlist'); ?><span class="sprite sprite-icon_all expanded" alt="Expand/Collapse" title="Expand/Collapse"></span></h4>
         <ul class="sb3" id="sb_home_info">
             <li id="sb_home_info_CurrentlyPlaying"><a href="<?php echo AmpConfig::get('web_path') . ((AmpConfig::get('iframes')) ? '/?framed=1' : ''); ?>"><?php echo T_('Currently Playing'); ?></a></li>
             <?php if (AmpConfig::get('allow_democratic_playback')) { ?>
@@ -65,7 +65,7 @@
         </ul>
     </li>
     <li>
-        <h4><?php echo T_('Random'); ?></h4>
+        <h4 class="header"><?php echo T_('Random'); ?><span class="sprite sprite-icon_all expanded" alt="Expand/Collapse" title="Expand/Collapse"></span></h4>
         <ul class="sb3" id="sb_home_random">
             <li id="sb_home_random_album"><?php echo Ajax::text('?page=random&action=song', T_('Song'),'home_random_song'); ?></li>
             <li id="sb_home_random_album"><?php echo Ajax::text('?page=random&action=album', T_('Album'),'home_random_album'); ?></li>
@@ -75,7 +75,7 @@
         </ul>
     </li>
     <li>
-        <h4><?php echo T_('Information'); ?></h4>
+        <h4 class="header"><?php echo T_('Information'); ?><span class="sprite sprite-icon_all expanded" alt="Expand/Collapse" title="Expand/Collapse"></span></h4>
         <ul class="sb3" id="sb_home_info">
             <li id="sb_home_info_Recent"><a href="<?php echo $web_path; ?>/stats.php?action=recent"><?php echo T_('Recent'); ?></a></li>
             <li id="sb_home_info_Newest"><a href="<?php echo $web_path; ?>/stats.php?action=newest"><?php echo T_('Newest'); ?></a></li>
@@ -96,7 +96,7 @@
         </ul>
     </li>
     <li>
-        <h4><?php echo T_('Search'); ?></h4>
+        <h4 class="header"><?php echo T_('Search'); ?><span class="sprite sprite-icon_all expanded" alt="Expand/Collapse" title="Expand/Collapse"></span></h4>
         <ul class="sb3" id="sb_home_search">
           <li id="sb_home_search_song"><a href="<?php echo $web_path; ?>/search.php?type=song"><?php echo T_('Songs'); ?></a></li>
           <li id="sb_home_search_album"><a href="<?php echo $web_path; ?>/search.php?type=album"><?php echo T_('Albums'); ?></a></li>

templates/sidebar_localplay.inc.php

@@ -35,7 +35,7 @@ if ($server_allow && $controller && $access_check) {
     $class = $current_instance ? '' : ' class="active_instance"';
 ?>
 <?php if (Access::check('localplay','25')) { ?>
-  <li><h4><?php echo T_('Localplay'); ?></h4>
+  <li><h4 class="header"><?php echo T_('Localplay'); ?><span class="sprite sprite-icon_all expanded" alt="Expand/Collapse" title="Expand/Collapse"></h4>
     <ul class="sb3" id="sb_localplay_info">
 <?php if (Access::check('localplay','75')) { ?>
     <li id="sb_localplay_info_add_instance"><a href="<?php echo $web_path; ?>/localplay.php?action=show_add_instance"><?php echo T_('Add Instance'); ?></a></li>
@@ -45,7 +45,7 @@ if ($server_allow && $controller && $access_check) {
     </ul>
   </li>
 <?php } ?>
-  <li><h4><?php echo T_('Active Instance'); ?></h4>
+  <li><h4 class="header"><?php echo T_('Active Instance'); ?><span class="sprite sprite-icon_all expanded" alt="Expand/Collapse" title="Expand/Collapse"></h4>
     <ul class="sb3" id="sb_localplay_instances">
     <li id="sb_localplay_instances_none"<?php echo $class; ?>><?php echo Ajax::text('?page=localplay&action=set_instance&instance=0', T_('None'),'localplay_instance_none');  ?></li>
     <?php
@@ -63,7 +63,7 @@ if ($server_allow && $controller && $access_check) {
     </ul>
   </li>
 <?php } else { ?>
-  <li><h4><?php echo T_('Localplay Disabled'); ?></h4></li>
+  <li><h4 class="header"><?php echo T_('Localplay Disabled'); ?><span class="sprite sprite-icon_all expanded" alt="Expand/Collapse" title="Expand/Collapse"></h4></li>
   <?php if (!$server_allow) { ?>
     <li><?php echo T_('Allow Localplay set to False'); ?></li>
   <?php } elseif (!$controller) { ?>

templates/sidebar_modules.inc.php

@@ -21,14 +21,14 @@
  */
 ?>
 <ul class="sb2" id="sb_modules">
-<li><h4><?php echo T_('Modules'); ?></h4>
+<li><h4 class="header"><?php echo T_('Modules'); ?><span class="sprite sprite-icon_all expanded" alt="Expand/Collapse" title="Expand/Collapse"></span></h4>
         <ul class="sb3" id="sb_Modules">
         <li id="sb_preferences_mo_localplay"><a href="<?php echo $web_path; ?>/admin/modules.php?action=show_localplay"><?php echo T_('Localplay Modules'); ?></a></li>
         <li id="sb_preferences_mo_catalog_types"><a href="<?php echo $web_path; ?>/admin/modules.php?action=show_catalog_types"><?php echo T_('Catalog Modules'); ?></a></li>
         <li id="sb_preferences_mo_plugins"><a href="<?php echo $web_path; ?>/admin/modules.php?action=show_plugins"><?php echo T_('Available Plugins'); ?></a></li>
         </ul>
 </li>
-  <li><h4><?php echo T_('Other Tools'); ?></h4>
+  <li><h4 class="header"><?php echo T_('Other Tools'); ?><span class="sprite sprite-icon_all expanded" alt="Expand/Collapse" title="Expand/Collapse"></span></h4>
     <ul class="sb3" id="sb_admin_ot">
       <li id="sb_admin_ot_Duplicates"><a href="<?php echo $web_path; ?>/admin/duplicates.php"><?php echo T_('Find Duplicates'); ?></a></li>
       <li id="sb_admin_ot_Mail"><a href="<?php echo $web_path; ?>/admin/mail.php"><?php echo T_('Mail Users'); ?></a></li>

templates/sidebar_preferences.inc.php

@@ -27,7 +27,7 @@
 $catagories = Preference::get_catagories();
 ?>
 <ul class="sb2" id="sb_preferences">
-  <li><h4><?php echo T_('Preferences'); ?></h4>
+  <li><h4 class="header"><?php echo T_('Preferences'); ?><span class="sprite sprite-icon_all expanded" alt="Expand/Collapse" title="Expand/Collapse"></span></h4>
     <ul class="sb3" id="sb_preferences_sections">
 <?php
     foreach ($catagories as $name) {