mirror of
https://github.com/a2nt/webpack-bootstrap-ui-kit.git
synced 2024-09-28 20:29:00 +02:00
85 lines
2.2 KiB
JavaScript
85 lines
2.2 KiB
JavaScript
'use strict';
|
|
|
|
//import StickySidebar from 'sticky-sidebar/src/sticky-sidebar';
|
|
import $ from 'jquery';
|
|
import Events from '../_events';
|
|
|
|
const SidebarUI = (($) => {
|
|
const D = document;
|
|
const W = window;
|
|
const $Body = $('body');
|
|
const NAME = 'SidebarUI';
|
|
const CLASSNAME = `js${NAME}`;
|
|
const CONTENTHOLDER = 'content-holder';
|
|
const INNERWRAPPER = `${CLASSNAME}__inner`;
|
|
|
|
class SidebarUI {
|
|
static init() {
|
|
const ui = this;
|
|
ui.dispose();
|
|
|
|
if (!$(`.${CLASSNAME}`).length) {
|
|
return;
|
|
}
|
|
|
|
console.log(`${NAME}: init ...`);
|
|
//const fontSize = parseInt($Body.css('font-size'));
|
|
const fontSize = 0;
|
|
const contentElement = $(`.${CONTENTHOLDER}`)[0];
|
|
|
|
//$(`.${CLASSNAME}`).wrapInner(`<div class="${INNERWRAPPER}"></div>`);
|
|
const $el = $(`.${CLASSNAME}`);
|
|
const $innerWrapper = $(`.${INNERWRAPPER}`);
|
|
|
|
/*const sticky = new StickySidebar(`.${CLASSNAME}`, {
|
|
topSpacing: fontSize,
|
|
bottomSpacing: fontSize,
|
|
containerSelector: CONTENTHOLDER,
|
|
innerWrapperSelector: INNERWRAPPER,
|
|
});*/
|
|
|
|
$el.addClass(`${CLASSNAME}-active`);
|
|
|
|
$Body.on(`${Events.SCROLL} ${Events.RESIZE}`, (e) => {
|
|
const contentOffset = parseInt(contentElement.offsetTop) + fontSize;
|
|
const contentOffsetHeight =
|
|
parseInt(contentElement.offsetHeight) - fontSize;
|
|
const sidebarWidth = $el[0].offsetWidth;
|
|
|
|
const scrollPos = parseInt($Body.scrollTop());
|
|
|
|
// normal pos
|
|
if (contentOffset >= scrollPos) {
|
|
$innerWrapper.attr('style', '');
|
|
} else if (
|
|
scrollPos >=
|
|
contentOffset + contentOffsetHeight - $innerWrapper[0].offsetHeight
|
|
) {
|
|
// bottom pos
|
|
$innerWrapper.attr('style', `position:absolute;bottom:${fontSize}px`);
|
|
} else {
|
|
// scrolled pos
|
|
$innerWrapper.attr(
|
|
'style',
|
|
`position:fixed;top:${fontSize}px;width:${sidebarWidth}px`,
|
|
);
|
|
}
|
|
});
|
|
}
|
|
|
|
static dispose() {
|
|
console.log(`${NAME}: dispose`);
|
|
}
|
|
}
|
|
|
|
$(W).on(`${NAME}.init ${Events.LODEDANDREADY}`, () => {
|
|
SidebarUI.init();
|
|
});
|
|
|
|
W.SidebarUI = new SidebarUI();
|
|
|
|
return SidebarUI;
|
|
})($);
|
|
|
|
export default SidebarUI;
|