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;
|