2024-10-10
This commit is contained in:
299
web/bsadmin/assets/js/lib/sidebar.js
Normal file
299
web/bsadmin/assets/js/lib/sidebar.js
Normal file
@@ -0,0 +1,299 @@
|
||||
|
||||
/*
|
||||
*
|
||||
* sidebar sidebar
|
||||
*
|
||||
*/
|
||||
!function($) {
|
||||
"use strict";
|
||||
|
||||
var sidebar = function(element, options) {
|
||||
this.options = options;
|
||||
this.$sidebar = $(element);
|
||||
this.$content = this.$sidebar.find('~ .content-wrap');
|
||||
this.$nano = this.$sidebar.find(".nano");
|
||||
this.$html = $('html');
|
||||
this.$body = $('body');
|
||||
this.$window = $(window);
|
||||
|
||||
// set in true when first time were clicked on toggle button
|
||||
this.changed = false;
|
||||
|
||||
this.init();
|
||||
};
|
||||
|
||||
sidebar.DEFAULTS = {
|
||||
// duration od animations
|
||||
duration: 300,
|
||||
|
||||
// set small sidebar when window width < resizeWnd
|
||||
resizeWnd: 1000
|
||||
};
|
||||
|
||||
sidebar.prototype.init = function() {
|
||||
var _this = this;
|
||||
|
||||
// no transition enable
|
||||
_this.$body.addClass('sidebar-notransition');
|
||||
|
||||
// init Nano Scroller
|
||||
_this.$nano.nanoScroller({ preventPageScrolling: true });
|
||||
|
||||
// sidebar toggle
|
||||
$('.sidebar-toggle').on( 'click', function(e) {
|
||||
e.preventDefault();
|
||||
_this.togglesidebar();
|
||||
});
|
||||
|
||||
// hide sidebar when push content overlay
|
||||
_this.$content.on( 'click', function() {
|
||||
if( _this.isHideOnContentClick() ) {
|
||||
_this.hidesidebar();
|
||||
}
|
||||
})
|
||||
|
||||
// toggle sub menus
|
||||
_this.$sidebar.on('click', 'li a.sidebar-sub-toggle', function(e) {
|
||||
e.preventDefault();
|
||||
_this.toggleSub($(this));
|
||||
});
|
||||
|
||||
if( _this.showType() == 'push' && _this.isShow()) {
|
||||
_this.$body.css('overflow', 'hidden');
|
||||
}
|
||||
|
||||
// init gesture swipes
|
||||
if( _this.$sidebar.hasClass('sidebar-gestures') ) {
|
||||
_this.useGestures();
|
||||
}
|
||||
|
||||
// on window resize - set small sidebar
|
||||
_this.$window.on('resize', function() {
|
||||
_this.windowResize();
|
||||
});
|
||||
|
||||
_this.windowResize();
|
||||
|
||||
// no transition disable
|
||||
setTimeout(function() {
|
||||
_this.$body.removeClass('sidebar-notransition');
|
||||
}, 1);
|
||||
}
|
||||
|
||||
sidebar.prototype.isShow = function() {
|
||||
return !this.$body.hasClass('sidebar-hide');
|
||||
}
|
||||
|
||||
// check show type
|
||||
sidebar.prototype.showType = function() {
|
||||
if(this.$sidebar.hasClass('sidebar-overlay')) return 'overlay';
|
||||
if(this.$sidebar.hasClass('sidebar-push')) return 'push';
|
||||
if(this.$sidebar.hasClass('sidebar-shrink')) return 'shrink';
|
||||
};
|
||||
|
||||
|
||||
// check if hide on content click
|
||||
sidebar.prototype.isHideOnContentClick = function() {
|
||||
return this.$sidebar.hasClass('sidebar-overlap-content');
|
||||
}
|
||||
|
||||
// check if sidebar static position
|
||||
sidebar.prototype.isStatic = function() {
|
||||
return this.$sidebar.hasClass('sidebar-static');
|
||||
}
|
||||
|
||||
|
||||
sidebar.prototype.togglesidebar = function(type) {
|
||||
var _this = this;
|
||||
var show = !_this.isShow();
|
||||
|
||||
if(type) {
|
||||
if(
|
||||
(type=='show' && !show)
|
||||
|| (type=='hide' && show)) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
_this.options.changed = true;
|
||||
|
||||
if( show ) {
|
||||
_this.showsidebar();
|
||||
} else {
|
||||
_this.hidesidebar();
|
||||
}
|
||||
}
|
||||
|
||||
sidebar.prototype.showsidebar = function() {
|
||||
var _this = this;
|
||||
|
||||
_this.$body.removeClass('sidebar-hide');
|
||||
|
||||
if( _this.showType() == 'push'/* && !_this.isStatic() */) {
|
||||
_this.$body.css('overflow', 'hidden');
|
||||
}
|
||||
|
||||
setTimeout(function() {
|
||||
// restore scroller on normal sidebar after end animation (300ms)
|
||||
_this.$nano.nanoScroller();
|
||||
|
||||
// resize for charts reinit
|
||||
_this.$window.resize();
|
||||
}, _this.options.duration);
|
||||
}
|
||||
|
||||
sidebar.prototype.hidesidebar = function() {
|
||||
var _this = this;
|
||||
|
||||
_this.$body.addClass('sidebar-hide');
|
||||
|
||||
// destroy scroller on hidden sidebar
|
||||
_this.$nano.nanoScroller({ destroy: true });
|
||||
|
||||
// resize for charts reinit
|
||||
setTimeout(function() {
|
||||
if( _this.showType() == 'push'/* && !_this.isStatic() */) {
|
||||
_this.$body.css('overflow', 'visible');
|
||||
}
|
||||
_this.$window.resize();
|
||||
}, _this.options.duration);
|
||||
}
|
||||
|
||||
|
||||
// toggle submenu [open or close]
|
||||
sidebar.prototype.toggleSub = function(toggle) {
|
||||
var _this = this;
|
||||
|
||||
var toggleParent = toggle.parent();
|
||||
var subMenu = toggleParent.find('> ul');
|
||||
var opened = toggleParent.hasClass('open');
|
||||
|
||||
if(!subMenu.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
// close
|
||||
if(opened) {
|
||||
_this.closeSub(subMenu);
|
||||
}
|
||||
|
||||
// open
|
||||
else {
|
||||
_this.openSub(subMenu, toggleParent);
|
||||
}
|
||||
}
|
||||
|
||||
// close submenus
|
||||
sidebar.prototype.closeSub = function(subMenu) {
|
||||
var _this = this;
|
||||
|
||||
subMenu.css('display', 'block').stop()
|
||||
.slideUp(_this.options.duration, 'swing', function() {
|
||||
// close child dropdowns
|
||||
$(this).find('li a.sidebar-sub-toggle').next().attr('style', '');
|
||||
|
||||
// reinit nano scroller
|
||||
_this.$nano.nanoScroller();
|
||||
});
|
||||
|
||||
subMenu.parent().removeClass('open');
|
||||
subMenu.find('li a.sidebar-sub-toggle').parent().removeClass('open');
|
||||
}
|
||||
|
||||
// open submenus
|
||||
sidebar.prototype.openSub = function(subMenu, toggleParent) {
|
||||
var _this = this;
|
||||
|
||||
subMenu
|
||||
.css('display', 'none').stop()
|
||||
.slideDown(_this.options.duration, 'swing', function() {
|
||||
// reinit nano scroller
|
||||
_this.$nano.nanoScroller();
|
||||
});
|
||||
toggleParent.addClass('open');
|
||||
|
||||
_this.closeSub( toggleParent.siblings('.open').find('> ul') );
|
||||
}
|
||||
|
||||
// use gestures for show / hide menu
|
||||
sidebar.prototype.useGestures = function() {
|
||||
var _this = this;
|
||||
var touchStart = 0;
|
||||
var startPoint = 0; // x position
|
||||
var endPoint = 0; // x position
|
||||
|
||||
// on touch start
|
||||
_this.$window.on('touchstart', function(e) {
|
||||
startPoint = (e.originalEvent.touches?e.originalEvent.touches[0]:e).pageX;
|
||||
endPoint = (e.originalEvent.touches?e.originalEvent.touches[0]:e).pageX;
|
||||
touchStart = 1;
|
||||
});
|
||||
|
||||
// on swipe start
|
||||
_this.$window.on('touchmove', function(e) {
|
||||
if( touchStart ) {
|
||||
endPoint = (e.originalEvent.touches?e.originalEvent.touches[0]:e).pageX;
|
||||
}
|
||||
});
|
||||
|
||||
// on swipe end
|
||||
_this.$window.on('touchend', function(e) {
|
||||
if( touchStart ) {
|
||||
var resultSwipe = startPoint - endPoint,
|
||||
rtl = _this.$html.hasClass('rtl');
|
||||
|
||||
touchStart = 0;
|
||||
|
||||
// swipe min width 100px
|
||||
if( Math.abs( resultSwipe ) < 100 ) {
|
||||
return;
|
||||
}
|
||||
|
||||
// change values if rtl
|
||||
if( rtl ) {
|
||||
resultSwipe *= -1;
|
||||
startPoint = _this.$window.width() - startPoint;
|
||||
}
|
||||
|
||||
// from left to right
|
||||
if(resultSwipe < 0) {
|
||||
// show only when touch started from left corner
|
||||
if( startPoint < 40 ) {
|
||||
_this.showsidebar();
|
||||
}
|
||||
}
|
||||
|
||||
// from right to left
|
||||
else {
|
||||
_this.hidesidebar();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// on resize window and on start
|
||||
var resizeTimer;
|
||||
sidebar.prototype.windowResize = function() {
|
||||
var _this = this;
|
||||
|
||||
// if user currently changed size of sidebar, stop change it
|
||||
if(!_this.options.changed) {
|
||||
clearTimeout(resizeTimer);
|
||||
resizeTimer = setTimeout(function() {
|
||||
if(_this.$window.width() < _this.options.resizeWnd) {
|
||||
_this.togglesidebar('hide');
|
||||
}
|
||||
}, 50);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
// init
|
||||
$('.sidebar').each(function() {
|
||||
var options = $.extend({}, sidebar.DEFAULTS, $(this).data(), typeof option == 'object' && option);
|
||||
var cursidebar = new sidebar(this, options);
|
||||
});
|
||||
|
||||
}(jQuery);
|
||||
Reference in New Issue
Block a user