48 lines
1.3 KiB
JavaScript
48 lines
1.3 KiB
JavaScript
'use strict';
|
|
|
|
const views = require('../util/views.js');
|
|
|
|
class TopNavView {
|
|
constructor() {
|
|
this._template = views.getTemplate('top-nav');
|
|
this._navHolder = document.getElementById('top-nav-holder');
|
|
this._lastCtx = null;
|
|
}
|
|
|
|
render(ctx) {
|
|
this._lastCtx = ctx;
|
|
const target = this._navHolder;
|
|
const source = this._template(ctx);
|
|
views.showView(this._navHolder, source);
|
|
}
|
|
|
|
show() {
|
|
this._navHolder.style.visibility = 'initial';
|
|
this._navHolder.style.position = 'initial';
|
|
}
|
|
|
|
hide() {
|
|
this._navHolder.style.visibility = 'hidden';
|
|
this._navHolder.style.position = 'fixed';
|
|
}
|
|
|
|
activate(itemName) {
|
|
if (itemName == 'home') {
|
|
this.hide();
|
|
} else {
|
|
this.show();
|
|
}
|
|
const allItemsSelector = '#top-nav-holder [data-name]';
|
|
const currentItemSelector =
|
|
'#top-nav-holder [data-name="' + itemName + '"]';
|
|
for (let item of document.querySelectorAll(allItemsSelector)) {
|
|
item.className = '';
|
|
}
|
|
const currentItem = document.querySelectorAll(currentItemSelector);
|
|
if (currentItem.length > 0) {
|
|
currentItem[0].className = 'active';
|
|
}
|
|
}
|
|
}
|
|
|
|
module.exports = TopNavView;
|