Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

ENHANCEMENT Collapsible menu, disable menu actions on external links

  • Loading branch information...
commit 0e0a59df99618650c9d23d53982ce815114bd948 1 parent f90c317
@chillu chillu authored
View
2  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; }
View
98 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));
View
9 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%);
View
12 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>
Please sign in to comment.
Something went wrong with that request. Please try again.