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
|