szurubooru/client/js/views/help_view.js

'use strict';

const api = require('../api.js');
const views = require('../util/views.js');

const template = views.getTemplate('help');
const sectionTemplates = {
    'about': views.getTemplate('help-about'),
    'keyboard': views.getTemplate('help-keyboard'),
    'search': views.getTemplate('help-search'),
    'comments': views.getTemplate('help-comments'),
    'tos': views.getTemplate('help-tos'),
};
const subsectionTemplates = {
    'search': {
        'default': views.getTemplate('help-search-general'),
        'posts': views.getTemplate('help-search-posts'),
        'users': views.getTemplate('help-search-users'),
        'tags': views.getTemplate('help-search-tags'),
    },
};

class HelpView {
    constructor(section, subsection) {
        this._hostNode = document.getElementById('content-holder');

        const sourceNode = template();
        const ctx = {
            name: api.getName(),
        };

        section = section || 'about';
        if (section in sectionTemplates) {
            views.replaceContent(
                sourceNode.querySelector('.content'),
                sectionTemplates[section](ctx));
        }

        subsection = subsection || 'default';
        if (section in subsectionTemplates &&
                subsection in subsectionTemplates[section]) {
            views.replaceContent(
                sourceNode.querySelector('.subcontent'),
                subsectionTemplates[section][subsection](ctx));
        }

        views.replaceContent(this._hostNode, sourceNode);

        for (let itemNode of
                sourceNode.querySelectorAll('.primary [data-name]')) {
            itemNode.classList.toggle(
                'active',
                itemNode.getAttribute('data-name') === section);
            if (itemNode.getAttribute('data-name') === section) {
                itemNode.parentNode.scrollLeft =
                    itemNode.getBoundingClientRect().left -
                    itemNode.parentNode.getBoundingClientRect().left
            }
        }

        for (let itemNode of
                sourceNode.querySelectorAll('.secondary [data-name]')) {
            itemNode.classList.toggle(
                'active',
                itemNode.getAttribute('data-name') === subsection);
            if (itemNode.getAttribute('data-name') === subsection) {
                itemNode.parentNode.scrollLeft =
                    itemNode.getBoundingClientRect().left -
                    itemNode.parentNode.getBoundingClientRect().left
            }
        }

        views.syncScrollPosition();
    }
}

module.exports = HelpView;