webpack-bootstrap-ui-kit/src/js_old/_components/_ui.header-footer.js

73 lines
1.5 KiB
JavaScript
Raw Normal View History

2022-05-03 20:50:57 +02:00
'use strict'
2020-05-13 16:47:49 +02:00
2022-05-03 20:50:57 +02:00
import $ from 'jquery'
import Events from '../_events'
2020-05-13 16:47:49 +02:00
const HeaderUI = (($) => {
2022-05-03 20:50:57 +02:00
const D = document
const W = window
const $Body = $('html,body')
const NAME = 'HeaderUI'
const CLASSNAME = `js${NAME}`
2020-05-13 16:47:49 +02:00
class HeaderUI {
2022-05-03 20:50:57 +02:00
static init () {
const ui = this
ui.dispose()
2020-05-13 16:47:49 +02:00
2022-05-03 20:50:57 +02:00
console.log(`${NAME}: init`)
2020-05-13 16:47:49 +02:00
2022-05-03 20:50:57 +02:00
const $header = $(`#Header,.js${NAME}`)
2020-05-13 16:47:49 +02:00
const updateHeader = () => {
2022-05-03 20:50:57 +02:00
const h = $header.height()
const s = $Body.scrollTop()
if (s + 50 > h) {
2022-05-03 20:50:57 +02:00
$Body.addClass('shrink')
2020-05-13 16:47:49 +02:00
} else {
2022-05-03 20:50:57 +02:00
$Body.removeClass('shrink')
2020-05-13 16:47:49 +02:00
}
2022-05-03 20:50:57 +02:00
}
2020-05-13 16:47:49 +02:00
2022-05-03 20:50:57 +02:00
updateHeader()
2020-05-13 16:47:49 +02:00
const updateFooter = (i, el) => {
2022-05-03 20:50:57 +02:00
const $el = $(el)
const footerHeight = $el.height()
$el.css('height', footerHeight)
2020-05-13 16:47:49 +02:00
2022-05-03 20:50:57 +02:00
$el.css('margin-top', -footerHeight)
$el.siblings('.wrapper').css('padding-bottom', footerHeight)
}
2020-05-13 16:47:49 +02:00
2022-05-03 20:50:57 +02:00
$('.footer,.jsFooterUI').css('height', 'auto')
2020-05-24 08:58:18 +02:00
setTimeout(() => {
2022-05-03 20:50:57 +02:00
$('.footer,.jsFooterUI').each(updateFooter)
}, 500)
2020-05-13 16:47:49 +02:00
}
2022-05-03 20:50:57 +02:00
static dispose () {
console.log(`${NAME}: dispose`)
2020-09-09 17:40:58 +02:00
2022-05-03 20:50:57 +02:00
$Body.removeClass('shrink')
$(`#Header,.js${NAME},.footer,.jsFooterUI,.wrapper`).attr('css', '')
2020-05-13 16:47:49 +02:00
}
}
$(W).on(`${Events.AJAX} ${Events.LOADED}`, () => {
2022-05-03 20:50:57 +02:00
HeaderUI.init()
})
2020-05-13 16:47:49 +02:00
// align event content
$(W).on(`${Events.RESIZE}`, () => {
setTimeout(() => {
2022-05-03 20:50:57 +02:00
HeaderUI.init()
}, 200)
})
2022-05-03 20:50:57 +02:00
W.HeaderUI = new HeaderUI()
2020-05-13 16:47:49 +02:00
2022-05-03 20:50:57 +02:00
return HeaderUI
})($)
2020-05-13 16:47:49 +02:00
2022-05-03 20:50:57 +02:00
export default HeaderUI