view class doc
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143/// FOURJS_START_COPYRIGHT(D,2015)
/// Property of Four Js*
/// (c) Copyright Four Js 2015, 2022. All Rights Reserved.
/// * Trademark of Four Js Development Tools Europe Ltd
///   in the United States and elsewhere
///
/// This file can be modified by licensees according to the
/// product manual.
/// FOURJS_END_COPYRIGHT

"use strict";

modulum('TopMenuWidget', ['WidgetGroupBase', 'WidgetFactory'],
  function(context, cls) {

    /**
     * TopMenu widget.
     * @class TopMenuWidget
     * @memberOf classes
     * @extends classes.WidgetGroupBase
     * @publicdoc Widgets
     */
    cls.TopMenuWidget = context.oo.Class(cls.WidgetGroupBase, function($super) {
      return /** @lends classes.TopMenuWidget.prototype */ {
        __name: 'TopMenuWidget',

        /** @type {Boolean} */
        _renderedInSidebar: false,
        _responsiveMenuWidget: false,

        /**
         * @inheritDoc
         */
        constructor: function(opts) {
          $super.constructor.call(this, opts);
          context.TopmenuService.addTopMenu(this);
          context.HostLeftSidebarService.addResponsiveMenu(this);
        },

        /**
         * @inheritDoc
         */
        _initElement: function() {
          $super._initElement.call(this);

          this._responsiveMenuWidget = context.HostLeftSidebarService.getResponsiveMenu();
          this._responsiveMenuWidget.bindTopmenuWidget(this); //attach to responsive one

          this._resizeHandler = context.HostService.onScreenResize((event) => {
            // only if current app
            if (!this._destroyed && gbc.TopmenuService.isTopmenuInCurrentApp(this)) {
              const size = event.data[0];
              const inSidebar = size < window.gbc.ThemeService.getValue("mt-responsive-screen-width-breakpoint");
              this.renderInSideBar(inSidebar);
            }
          });

          const inSidebar = context.ThemeService.getMediaString() === "small" || context.ThemeService.getMediaString() === "medium";
          this.renderInSideBar(inSidebar);
        },

        /**
         * @inheritDoc
         */
        addChildWidget: function(widget, options) {
          $super.addChildWidget.call(this, widget, options);
          if (this._renderedInSidebar) {
            this._responsiveMenuWidget.adoptChildWidget(widget);
          }

        },

        /**
         * Set the rendering of this topmenu
         * @param {Boolean} inSidebar - true if should be rendered in sidebar
         */
        renderInSideBar: function(inSidebar) { //bool
          if (!inSidebar) {
            // not in sidebar:move or keep children in normal topmenu and close the sidebar
            gbc.HostLeftSidebarService.hideSidebar();
          }
          this._renderedInSidebar = this._responsiveMenuWidget.renderTopmenu(this, inSidebar);
          gbc.HostLeftSidebarService.setHasTopMenu(true, this._renderedInSidebar);
        },

        /**
         * Check if rendered in sidebar
         * @return {Boolean} - true if is in sidebar
         */
        isRenderedInSidebar: function() {
          return this._renderedInSidebar;
        },

        /**
         * Priority of this menu
         * @param {number} order the priority of this menu
         * @publicdoc
         */
        setOrder: function(order) {
          this.setStyle({
            order: order
          });
        },

        /**
         * Get priority of this menu
         * @returns {number} priority of this menu
         * @publicdoc
         */
        getOrder: function() {
          return this.getStyle('order');
        },

        /**
         * Get previous topmenugroup located at same level that refMenu
         * @param {classes.TopMenuGroupWidget} refMenu - topmenugroup used as search criteria
         * @returns {classes.TopMenuGroupWidget} returns previous topmenugroup
         * @publicdoc
         */
        getPreviousMenu: function(refMenu) {
          return this.getChildren()[this.getIndexOfChild(refMenu) - 1];
        },

        /**
         * Get next topmenugroup located at same level that refMenu
         * @param {classes.TopMenuGroupWidget} refMenu - topmenugroup used as search criteria
         * @returns {classes.TopMenuGroupWidget} returns next topmenugroup
         * @publicdoc
         */
        getNextMenu: function(refMenu) {
          return this.getChildren()[this.getIndexOfChild(refMenu) + 1];
        },

        destroy: function() {
          context.TopmenuService.removeTopmenu(this);
          this._responsiveMenuWidget.empty();
          $super.destroy.call(this);
        }
      };
    });
    cls.WidgetFactory.registerBuilder('TopMenu', cls.TopMenuWidget);
  });