ENHANCEMENT Collapsible menu, disable menu actions on external links

silverstripe · Jul 8, 2011 · 0e0a59d · 0e0a59d
1 parent f90c317
commit 0e0a59d
Show file tree

Hide file tree

Showing 4 changed files with 107 additions and 14 deletions.
diff --git a/admin/css/screen.css b/admin/css/screen.css
@@ -151,6 +151,8 @@ li.jstree-closed > ul { display: none; }
 .cms-menu-list li.current li { background-color: #2e7ead; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #2e7ead), color-stop(100%, #287099)); background-image: -moz-linear-gradient(top, #2e7ead 0%, #287099 100%); background-image: linear-gradient(top, #2e7ead 0%, #287099 100%); }
 .cms-menu-list li.current a { color: white; text-shadow: #333333 1px 1px 1px; }
 .cms-menu-list li.current a .icon { background-position: -32px 0px; }
+.cms-menu-list li ul { display: none; }
+.cms-menu-list li.opened ul { display: block; }
 .cms-menu-list li li:first { -moz-box-shadow: #333333 0 4px 4px 0; -webkit-box-shadow: #333333 0 4px 4px 0; -o-box-shadow: #333333 0 4px 4px 0; box-shadow: #333333 0 4px 4px 0; }
 .cms-menu-list li li a { font-size: 12px; text-shadow: #333333 1px 1px 1px; margin: 0; padding-left: 30px; color: white; }
 .cms-menu-list li li.current a { font-weight: bold; }

diff --git a/admin/javascript/LeftAndMain.Menu.js b/admin/javascript/LeftAndMain.Menu.js
@@ -2,20 +2,104 @@
 
 	$.entwine('ss', function($){
 
-		$('.cms-menu li a').entwine({
+		/**
+		 * Vertical CMS menu with two levels, built from a nested unordered list. 
+		 * The (optional) second level is collapsible, hiding its children.
+		 * The whole menu (including second levels) is collapsible as well,
+		 * exposing only a preview for every menu item in order to save space.
+		 * In this "preview/collapsed" mode, the secondary menu hovers over the menu item,
+		 * rather than expanding it.
+		 * 
+		 * Example:
+		 * 
+		 * <ul class="cms-menu-list">
+		 *  <li><a href="#">Item 1</a></li>
+		 *  <li class="current opened">
+		 *    <a href="#">Item 2</a>
+		 *    <ul>
+		 *      <li class="current opened"><a href="#">Item 2.1</a></li>
+		 *      <li><a href="#">Item 2.2</a></li>
+		 *    </ul>
+		 *  </li>
+		 * </ul>
+		 */
+		$('.cms-menu-list').entwine({
+			onmatch: function() {
+				// TODO Fix icon etc.
+				// this.children('li').each(function() {
+				// 	$(this).find('a:first').append('<span class="toggle">o</span>');
+				// });
+
+				// Sync collapsed state with parent panel
+				this.parents('.cms-panel:first').bind('toggle', function(e) {
+					self.toggleClass('collapsed', $(this).hasClass('collapsed'));
+				});
+
+				this._super();
+			}
+		});
+
+		$('.cms-menu-list .toggle').entwine({
 			onclick: function(e) {
+				this.getMenuItem().toggle();
 				e.preventDefault();
-				console.debug($('.LeftAndMain .cms-content'));
-				$('.LeftAndMain .cms-content').entwine('ss').loadPanel(this.attr('href'));
 			}
 		});
 
-		$('.cms-menu.collapsed li').entwine({
-			onclick: function() {
-				// the container is overflow: hidden, so we need to break the subnavigation out of it	
-				// return false;
+		$('.cms-menu-list li').entwine({
+			toggle: function() {
+				this[this.hasClass('opened') ? 'close' : 'open']();
+			},
+			open: function() {
+				var parent = this.getMenuItem();
+				if(parent) parent.open();
+				this.addClass('opened').find('ul').show();
+			},
+			close: function() {
+				this.removeClass('opened').find('ul').hide();
+			},
+			select: function() {
+				var parent = this.getMenuItem();
+				this.addClass('current').open();
+				// Remove "current" class from all siblings and their children
+				this.siblings().removeClass('current').close();
+				this.siblings().find('li').removeClass('current');
+				if(parent) parent.addClass('current').siblings().removeClass('current');
+			}
+		});
+
+		$('.cms-menu-list li *').entwine({
+			getMenuItem: function() {
+				return this.parents('li:first');
+			}
+		});
+
+		/**
+		 * Both primary and secondary nav.
+		 */
+		$('.cms-menu-list li a').entwine({
+			onclick: function(e) {
+				// Only catch left clicks, in order to allow opening in tabs.
+				// Ignore external links, fallback to standard link behaviour
+				if(e.which > 1 || this.is(':external')) return;
+				e.preventDefault();
+
+				// Expand this, and collapse all other items
+				var item = this.getMenuItem();
+				item.select();
+
+				var children = item.find('li');
+				if(children.length) {
+					children.first().find('a').click();
+				} else {
+					window.History.pushState({}, '', this.attr('href'));
+				}
 			}
 		});
 
 	});
+
+	// Internal Helper
+	$.expr[':'].internal = function(obj){return obj.href.match(/^mailto\:/) || (obj.hostname == location.hostname);};
+	$.expr[':'].external = function(obj){return !$(obj).is(':internal')};
 }(jQuery));
diff --git a/admin/scss/_menu.scss b/admin/scss/_menu.scss
@@ -134,9 +134,16 @@
 			}
 		}
 
+		ul {
+			display: none;
+		}
+
+		&.opened ul {
+			display: block;
+		}
+
 		// nested elements
 		li {
-
 
 			li {
 				background-color: darken($color-menu-button, 10%);

diff --git a/admin/templates/Includes/LeftAndMain_Menu.ss b/admin/templates/Includes/LeftAndMain_Menu.ss
@@ -24,23 +24,23 @@
 
 		<ul class="cms-menu-list">
 		<% control MainMenu %>
-			<li class="$LinkingMode $FirstLast" id="Menu-$Code">
+			<li class="$LinkingMode $FirstLast <% if LinkingMode == 'current' %>opened<% end_if %>" id="Menu-$Code">
 				<a href="$Link">
 					<span class="icon">&nbsp;</span>
 					<span class="text">$Title</span>
 				</a>
-				<% if Code == 'CMSMain' && LinkingMode == 'current' %>
+				<% if Code == 'CMSMain' %>
 				<ul>
-					<li class="first <% if Top.class == 'CMSPageEditController' %>current<% end_if %>"><a href="admin/page/edit/show/$Top.CurrentPageID">
+					<li class="first <% if Top.class == 'CMSPageEditController' || Top.class == 'CMSMain' %>current<% end_if %>" id="Menu-CMSPageEditController"><a href="admin/page/edit/show/$Top.CurrentPageID">
 						<span class="text">Content</span>
 					</a></li>
-					<li <% if Top.class == 'CMSPageSettingsController' %>class="current"<% end_if %>><a href="admin/page/settings/show/$Top.CurrentPageID">
+					<li <% if Top.class == 'CMSPageSettingsController' %>class="current"<% end_if %> id="Menu-CMSPageSettingsController"><a href="admin/page/settings/show/$Top.CurrentPageID">
 						<span class="text">Settings</span>
 					</a></li>
-					<li <% if Top.class == 'CMSPageReportsController' %>class="current"<% end_if %>><a href="admin/page/reports/show/$Top.CurrentPageID">
+					<li <% if Top.class == 'CMSPageReportsController' %>class="current"<% end_if %> id="Menu-CMSPageReportsController"><a href="admin/page/reports/show/$Top.CurrentPageID">
 						<span class="text">Reports</span>
 					</a></li>
-					<li <% if Top.class == 'CMSPageHistoryController' %>class="current"<% end_if %>><a href="admin/page/history/show/$Top.CurrentPageID">
+					<li <% if Top.class == 'CMSPageHistoryController' %>class="current"<% end_if %> id="Menu-CMSPageHistoryController"><a href="admin/page/history/show/$Top.CurrentPageID">
 						<span class="text">History</span>
 					</a></li>
 				</ul>