Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
$(function () {
console.log(
'admin.js',
'$', $ || null,
'jQuery', jQuery || null,
'Vue', Vue || null
);
$.fn.ensureClass = function (className, remove) {
remove = remove || false;
return this.each(function () {
let $this = $(this);
console.log('ensureClass', {$this, self: this, className, remove});
if ( remove ) {
$this.removeClass(className);
} else {
if ( ! $this.hasClass(className) ) {
$this.addClass(className);
}
}
});
};
class FullSidebar {
/** @param {JQuery} $el */
constructor($el) {
this.$el = $el;
/**
* @type {FullSidebarItem[]}
*/
this.items = [];
let self = this;
this.$el.find('> ul > .fsb-item').each(function () {
self.items.push(new FullSidebarItem(self, $(this)));
});
}
closeAllSubmenus() {
this.items.forEach(item => item.close());
}
initActive() {
let items = this.items.filter(item => window.location.href.startsWith(item.$link.attr('href')) === true);
if ( items.length > 0 ) {
items[0].open();
}
}
}
class FullSidebarItem {
/**
* @param {FullSidebar} fsb
* @param {JQuery} $el
*/
constructor(fsb, $el) {
let self = this;
this.fsb = fsb;
this.$el = $el;
this.$expand = $el.find('> .fsb-item-expand');
this.$expandIcon = this.$expand.children('i.fa');
this.hasChildren = $el.find('> ul').length > 0;
this.$submenu = $el.find('> ul');
this.$link = $el.find('> a:not(.fsb-item-expand)');
this.$linkIcon = this.$link.children('.icon');
this.$linkTitle = this.$link.children('.title');
this.$expand.on('click', function () {
self.toggle();
});
}
open() {
this.fsb.closeAllSubmenus();
this.$submenu.ensureClass('open');
this.$expandIcon.removeClass('fa-plus');
this.$expandIcon.ensureClass('fa-minus');
this.$el.ensureClass('active');
return this;
}
close() {
this.$submenu.removeClass('open');
this.$expandIcon.removeClass('fa-minus');
this.$expandIcon.ensureClass('fa-plus');
this.$el.removeClass('active');
return this;
}
toggle() {
if ( this.isOpen() ) {
this.close();
} else {
this.open();
}
return this;
}
isOpen() {
return this.$submenu.hasClass('open');
}
}
const $sb = $('#full-sidebar');
if ( $sb.length === 1 ) {
let fullSidebar = new FullSidebar($sb);
console.log('fullSidebar',fullSidebar)
fullSidebar.initActive();
}
// var $sidebar = $('#sidebar');
// console.log('$sidebar', $sidebar)
});
@import "font-awesome-variables";
#full-sidebar {
top: 70px;
bottom: 0;
width: 240px;
height: 100%;
z-index: 103;
margin-top: 0;
position: fixed;
overflow: hidden !important;
background: #252525;
padding-bottom: 70px;
> ul {
list-style: none;
padding: 0;
margin-bottom: 70px;
}
li.fsb-item {
width: 100%;
clear: both;
border-left: 3px solid transparent;
> a.fsb-item-expand {
display: block;
float: left;
height: 100%;
//margin: 8px 0 8px 10px;
padding-left: 0;
//line-height: 39px;
margin: 9px 0 6px 10px;
font-size: 14px;
line-height: 16px;
color: rgba(255, 255, 255, 0.3);
&:hover, &:active {
color: #eeeeee;
svg path { fill: #eeeeee; }
}
}
> a:not(.fsb-item-expand) {
height: 100%;
margin: 8px 0;
display: block;
padding: 0 10px;
font-size: 15px;
line-height: 16px;
position: relative;
text-align: left;
float: left;
white-space: nowrap;
color: rgba(255, 255, 255, 0.3);
.icon {
width: 1.25rem;
text-align: center;
display: inline-block;
}
.title {
display: inline-block;
margin-left: 8px;
}
i { width: 1.25rem; }
svg {
width: auto;
height: auto;
max-width: 1.25rem;
max-height: 1.25rem;
vertical-align: middle;
path { fill: rgba(255, 255, 255, 0.3); }
}
&:hover {
color: #eeeeee;
svg path { fill: #eeeeee; }
}
}
> ul {
display: none;
}
> ul.open {
display: block;
clear: both;
}
}
li.fsb-section {
&:before {
content: $fa-var-minus; /* FontAwesome Unicode */
font-family: FontAwesome;
display: block;
height: 100%;
float: left;
font-size: 10px;
color: rgba(255, 255, 255, 0.3);
}
> a {
margin: 4px 0;
display: block;
padding: 0 10px;
font-size: 13px;
line-height: 13px;
position: relative;
text-align: left;
padding-left: 5px;
white-space: nowrap;
color: rgba(255, 255, 255, 0.3);
.title {
display: inline-block;
margin-left: 8px;
}
&:hover {
color: #eeeeee;
svg path { fill: #eeeeee; }
}
}
}
> ul > li > a {
}
> ul > li > ul {
list-style: none;
//padding: 0 0 0 10px;
//> li {
// color: #0000c1;
//}
//> li > a {
// color: #0000eb;
//}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment