65 lines
1.6 KiB
JavaScript
65 lines
1.6 KiB
JavaScript
import { createElement, addEventListener } from './minifiers';
|
|
import { toggleText } from './toggleText';
|
|
import { throttle } from './utils';
|
|
|
|
export function createHeader(container, title, zoomOutLabel = 'Zoom out', zoomOutCallback) {
|
|
let _element;
|
|
let _titleElement;
|
|
let _zoomOutElement;
|
|
let _captionElement;
|
|
let _isZooming;
|
|
|
|
const setCaptionThrottled = throttle(setCaption, 100, false);
|
|
|
|
_setupLayout();
|
|
|
|
function setCaption(caption) {
|
|
if (_isZooming) {
|
|
return;
|
|
}
|
|
|
|
_captionElement.innerHTML = caption;
|
|
}
|
|
|
|
function zoom(caption) {
|
|
_zoomOutElement = toggleText(_titleElement, zoomOutLabel, 'lovely-chart--header-title lovely-chart--header-zoom-out-control');
|
|
setTimeout(() => {
|
|
addEventListener(_zoomOutElement, 'click', _onZoomOut);
|
|
}, 500);
|
|
|
|
setCaption(caption);
|
|
}
|
|
|
|
function toggleIsZooming(isZooming) {
|
|
_isZooming = isZooming;
|
|
}
|
|
|
|
function _setupLayout() {
|
|
_element = createElement();
|
|
_element.className = 'lovely-chart--header';
|
|
|
|
_titleElement = createElement();
|
|
_titleElement.className = 'lovely-chart--header-title';
|
|
_titleElement.innerHTML = title;
|
|
_element.appendChild(_titleElement);
|
|
|
|
_captionElement = createElement();
|
|
_captionElement.className = 'lovely-chart--header-caption lovely-chart--position-right';
|
|
_element.appendChild(_captionElement);
|
|
|
|
container.appendChild(_element);
|
|
}
|
|
|
|
function _onZoomOut() {
|
|
_titleElement = toggleText(_zoomOutElement, title, 'lovely-chart--header-title', true);
|
|
|
|
zoomOutCallback();
|
|
}
|
|
|
|
return {
|
|
setCaption: setCaptionThrottled,
|
|
zoom,
|
|
toggleIsZooming,
|
|
};
|
|
}
|