2020-05-13 16:47:49 +02:00
|
|
|
'use strict';
|
|
|
|
|
|
|
|
import Events from '../_events';
|
|
|
|
|
|
|
|
const HeaderUI = (($) => {
|
|
|
|
const D = document;
|
|
|
|
const W = window;
|
|
|
|
const $Body = $('html,body');
|
|
|
|
const NAME = 'HeaderUI';
|
|
|
|
const CLASSNAME = `js${NAME}`;
|
|
|
|
|
|
|
|
class HeaderUI {
|
|
|
|
static init() {
|
|
|
|
const ui = this;
|
|
|
|
ui.dispose();
|
|
|
|
|
2020-05-13 18:05:34 +02:00
|
|
|
//console.log(`Initializing: ${NAME}`);
|
2020-05-13 16:47:49 +02:00
|
|
|
|
2020-05-13 18:05:34 +02:00
|
|
|
const $header = $(`#Header,.js${NAME}`);
|
2020-05-13 16:47:49 +02:00
|
|
|
const updateHeader = () => {
|
|
|
|
const h = $header.height();
|
|
|
|
const s = $Body.scrollTop();
|
|
|
|
if (s > h) {
|
|
|
|
$Body.addClass('shrink');
|
|
|
|
} else {
|
|
|
|
$Body.removeClass('shrink');
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
updateHeader();
|
|
|
|
$Body.on('scroll resize', () => {
|
|
|
|
updateHeader();
|
|
|
|
});
|
|
|
|
|
|
|
|
const updateFooter = (i, el) => {
|
|
|
|
const $el = $(el);
|
|
|
|
$el.css('height', 'auto');
|
|
|
|
const footerHeight = $el.height();
|
|
|
|
|
|
|
|
$el.css('margin-top', -footerHeight);
|
|
|
|
$el.siblings('.wrapper').css('padding-bottom', footerHeight);
|
|
|
|
};
|
|
|
|
|
|
|
|
$('.footer,.jsFooterUI').each(updateFooter);
|
|
|
|
}
|
|
|
|
|
|
|
|
static dispose() {
|
2020-05-13 21:22:15 +02:00
|
|
|
$Body.removeClass('shrink');
|
2020-05-13 21:31:19 +02:00
|
|
|
$(`#Header,.js${NAME},.footer,.jsFooterUI,.wrapper`).attr('css', '');
|
2020-05-13 16:47:49 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
$(W).on(`${Events.AJAX} ${Events.LOADED}`, () => {
|
|
|
|
HeaderUI.init();
|
|
|
|
});
|
|
|
|
|
|
|
|
W.HeaderUI = new HeaderUI();
|
|
|
|
|
|
|
|
return HeaderUI;
|
|
|
|
})($);
|
|
|
|
|
|
|
|
export default HeaderUI;
|