diff --git a/admin/css/screen.css b/admin/css/screen.css
index ed8e576c8..63707e33c 100755
--- 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
index 04af4cd52..e7c09a287 100644
--- a/admin/javascript/LeftAndMain.Menu.js
+++ b/admin/javascript/LeftAndMain.Menu.js
@@ -2,20 +2,104 @@
$.entwine('ss', function($){
- $('.cms-menu li a').entwine({
- onclick: function(e) {
- e.preventDefault();
- console.debug($('.LeftAndMain .cms-content'));
- $('.LeftAndMain .cms-content').entwine('ss').loadPanel(this.attr('href'));
+ /**
+ * 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:
+ *
+ *
+ */
+ $('.cms-menu-list').entwine({
+ onmatch: function() {
+ // TODO Fix icon etc.
+ // this.children('li').each(function() {
+ // $(this).find('a:first').append('o');
+ // });
+
+ // 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.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 .toggle').entwine({
+ onclick: function(e) {
+ this.getMenuItem().toggle();
+ e.preventDefault();
+ }
+ });
+
+ $('.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));
\ No newline at end of file
diff --git a/admin/scss/_menu.scss b/admin/scss/_menu.scss
index 9b75e516b..6d4b5076a 100755
--- 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
index 383488c8f..870308cb5 100755
--- a/admin/templates/Includes/LeftAndMain_Menu.ss
+++ b/admin/templates/Includes/LeftAndMain_Menu.ss
@@ -24,23 +24,23 @@