Zabbix

/*

** Zabbix

** Copyright (C) 2001-2023 Zabbix SIA

**

** This program is free software; you can redistribute it and/or modify

** it under the terms of the GNU General Public License as published by

** the Free Software Foundation; either version 2 of the License, or

** (at your option) any later version.

**

** This program is distributed in the hope that it will be useful,

** but WITHOUT ANY WARRANTY; without even the implied warranty of

** MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the

** GNU General Public License for more details.

**

** You should have received a copy of the GNU General Public License

** along with this program; if not, write to the Free Software

** Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.

**/

​

​

const SIDEBAR_VIEW_MODE_FULL       = 0;

const SIDEBAR_VIEW_MODE_COMPACT    = 1;

const SIDEBAR_VIEW_MODE_HIDDEN     = 2;

​

const SIDEBAR_HOVER_DELAY          = 1000;

​

const SIDEBAR_EVENT_BLUR           = 'blur';

const SIDEBAR_EVENT_CLOSE          = 'close';

const SIDEBAR_EVENT_FOCUS          = 'focus';

const SIDEBAR_EVENT_OPEN           = 'open';

const SIDEBAR_EVENT_VIEWMODECHANGE = 'viewmodechange';

​

class CSidebar extends CBaseComponent {

​

    constructor(target) {

        super(target);

​

        this.init();

        this.registerEvents();

    }

​

    init() {

        this._sidebar_toggle = document.getElementById('sidebar-button-toggle');

        this._sidebar_scrollable = this._target.querySelector('.scrollable');

​

        this._is_focused = false;

        this._is_opened = false;

​

        const sidebar_header = this._target.querySelector('.sidebar-header'),

            sidebar_header_style = window.getComputedStyle(sidebar_header),

            sidebar_header_style_position = sidebar_header_style.position;

​

        sidebar_header.style.position = 'absolute';

​

        let max_width = sidebar_header.clientWidth + parseInt(sidebar_header_style.getPropertyValue('margin-left'))

            + parseInt(sidebar_header_style.getPropertyValue('margin-right'));

​

        sidebar_header.style.position = sidebar_header_style_position;

​

        for (const child of this._target.querySelectorAll('nav > ul')) {

            const position = window.getComputedStyle(child).position;

            child.style.position = 'absolute';

            max_width = Math.max(max_width, child.clientWidth);

            child.style.position = position;

        }

        this._target.style.maxWidth = max_width + 'px';

​

        const server_name = this._target.querySelector('.server-name');

        if (server_name) {

            server_name.style.width = 'auto';

            server_name.style.maxWidth = max_width + 'px';

        }

​

        this._view_mode = SIDEBAR_VIEW_MODE_FULL;

        if (this.hasClass('is-compact')) {

            this._view_mode = SIDEBAR_VIEW_MODE_COMPACT;

        }

        else if (this.hasClass('is-hidden')) {

            this._view_mode = SIDEBAR_VIEW_MODE_HIDDEN;

            this.addClass('focus-off');

        }

        this.setViewMode(this._view_mode);

    }

​

    open() {

        clearTimeout(this._opened_timer);

​

        if (!this._is_opened) {

            setTimeout(() => this._is_opened = true);

​

            if (this._view_mode === SIDEBAR_VIEW_MODE_HIDDEN) {