mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-10-22 12:05:37 +00:00
ENHANCEMENT Collapsible menu, disable menu actions on external links
This commit is contained in:
Ingo Schommer
parent
f90c317c86
commit
0e0a59df99
@ -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; }
|
||||
|
||||
@ -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:
|
||||
*
|
||||
* <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.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));
|
||||
@ -134,9 +134,16 @@
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.opened ul {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// nested elements
|
||||
li {
|
||||
|
||||
|
||||
li {
|
||||
background-color: darken($color-menu-button, 10%);
|
||||
|
||||
@ -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"> </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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user