Skip to content

Commit

Permalink
Merge pull request #1818 from creative-commoners/pulls/3/remove-sub-menu
Browse files Browse the repository at this point in the history 
MNT Remove unused JS and CSS
  • Loading branch information
@GuySartorelli
GuySartorelli authored Sep 2, 2024
2 parents 3e6d103 + 9d010ab commit 3a4d204
Show file tree
Hide file tree
Showing 4 changed files with 7 additions and 205 deletions.
2 changes: 1 addition & 1 deletion client/dist/js/bundle.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion client/dist/styles/bundle.css
View file

Large diffs are not rendered by default.

97 changes: 1 addition & 96 deletions client/src/components/Menu/Menu.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -206,37 +206,6 @@
text-align: center;
text-transform: uppercase;
}

// Sub menu (will also be available for profile)
.toggle-children {
display: inline-block;
float: right;
width: 20px;
height: 100%;
cursor: pointer;
padding-top: 17px;
}

.toggle-children-icon {
background-image: none;
border-color: darken(#ccdce6, 25%);
border-style: solid;
border-width: 0 1px 1px 0;
width: 8px;
height: 8px;
position: absolute;
margin-top: 3px;
right: 8px;
z-index: 2;
-ms-transform: rotate(-45deg); // IE 9
-webkit-transform: rotate(-45deg); // Chrome, Safari, Opera
transform: rotate(-45deg);
// display: none; // To be shown by javascript, see LeftAndMain.Panel.js
}

.opened .toggle-children-icon {
margin-top: 1px;
}
}

.cms-menu-mobile-overlay {
Expand Down Expand Up @@ -476,22 +445,12 @@
margin-left: 38px;
}
}

span.toggle-children {
top: 0;
}

}

&.current { //need to apply current stlye to children also (at least line height)
&.current {

>a {
background-color: $base-menu;

.toggle-children .toggle-children-icon {
@include icon-sprites(32x32);
@include sprite($sprites-32x32-menu-arrow-down);
}
}

a {
Expand All @@ -516,60 +475,6 @@

}
}

// Has sub menu
&.children {

.no-icon.text {
margin-left: 30px;
}

// Sub menu
ul li a {
font-size: 12px;
line-height: 18px;
height: 18px;
padding-top: 11px;
padding-bottom: 11px;
color: lighten($body-color, 10%);
background-color: $base-menu-bg;

/* stylelint-disable-next-line selector-max-compound-selectors */
span.text {
margin-left: 23px;
}
}

&.current {
> a {
background-color: transparent;

&:hover {
background-color: lighten($base-menu, 3%);
}
}
}

&.opened {
a:hover {
background-color: lighten($base-menu, 3%);
}

.current a {
background-color: $base-menu;
}

.opened .toggle-children-icon {
transform: rotate(45deg);
}
}
}
}

&.collapsed {
.toggle-children {
display: none;
}
}
}

Expand Down
111 changes: 4 additions & 107 deletions client/src/legacy/LeftAndMain.Menu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,53 +4,22 @@ import { joinUrlPaths } from 'lib/urls';
$.entwine('ss', function($){

/**
* 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.
* Vertical CMS menu
*
* 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>
*
* Custom Events:
* - 'select': Fires when a menu item is selected (on any level).
* - 'select': Fires when a menu item is selected.
*/
$('.cms-panel.cms-menu').entwine({

togglePanel: function(doExpand, silent, doSaveState) {
//apply or unapply the child formatting, should only apply to cms-menu__list when the current collapsed panal is the cms menu.
$('.cms-menu__list').children('li').each(function(){
if (doExpand) { //expand
$(this).children('ul').each(function() {
if ($(this).data('collapse')) {
$(this).removeData('collapse');
$(this).addClass('collapse');
}
});
} else { //collapse
$(this).children('ul').each(function() {
$(this).hasClass('collapse');
$(this).removeClass('collapse');
$(this).data('collapse', true);
});
}
});

this._super(doExpand, silent, doSaveState);
},

siteTreePresent: function () {
return $('#cms-content-tools-CMSMain').length > 0;
},
Expand Down Expand Up @@ -141,7 +110,7 @@ $.entwine('ss', function($){
onmatch: function() {
var self = this;

// Select default element (which might reveal children in hidden parents)
// Select default element
this.find('li.current').select();

this.updateItems();
Expand Down Expand Up @@ -187,14 +156,6 @@ $.entwine('ss', function($){
// Trigger synthetic resize event. Avoid native window.resize event
// since it causes other behaviour which should be reserved for actual window dimension changes.
$('.cms-container').trigger('windowresize');

//If panel is closing
if (this.hasClass('collapsed')) this.find('li.children.opened').removeClass('opened');

//If panel is opening
if(!this.hasClass('collapsed')) {
$('.toggle-children.opened').closest('li').addClass('opened');
}
}
},

Expand All @@ -214,56 +175,6 @@ $.entwine('ss', function($){
}
});

$('.cms-menu__list li').entwine({
onmatch: function() {
if(this.find('ul').length) {
this.find('a:first').append('<span class="toggle-children"><span class="toggle-children-icon"></span></span>');
}
this._super();
},
onunmatch: function() {
this._super();
},
toggle: function() {
this[this.hasClass('opened') ? 'close' : 'open']();
},
/**
* "Open" is just a visual state, and unrelated to "current".
* More than one item can be open at the same time.
*/
open: function() {
var parent = this.getMenuItem();
if(parent) parent.open();
if( this.find('li.clone') ) {
this.find('li.clone').remove();
}
this.addClass('opened').find('ul').show();
this.find('.toggle-children').addClass('opened');
},
close: function() {
this.removeClass('opened').find('ul').hide();
this.find('.toggle-children').removeClass('opened');
},
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) {
var parentSiblings = parent.siblings();
parent.addClass('current');
parentSiblings.removeClass('current').close();
parentSiblings.find('li').removeClass('current').close();
}

this.getMenu().updateItems();

this.trigger('select');
}
});

$('.cms-menu__list *').entwine({
getMenu: function() {
return this.parents('.cms-menu__list:first');
Expand Down Expand Up @@ -298,26 +209,12 @@ $.entwine('ss', function($){

var url = this.attr('href');
if(!isExternal) url = joinUrlPaths($('base').attr('href'), url);

var children = item.find('li');
if(children.length) {
children.first().find('a').click();
} else {
document.location.href = url;
}
document.location.href = url;

item.select();
}
});

$('.cms-menu__list li .toggle-children').entwine({
onclick: function(e) {
var li = this.closest('li');
li.toggle();
return false; // prevent wrapping link event to fire
}
});

$('.cms .profile-link').entwine({
onclick: function() {
$('.cms-container').loadPanel(this.attr('href'));
Expand Down

0 comments on commit 3a4d204

Please sign in to comment.