123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250/// 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('ToolBarWidget', ['WidgetGroupBase', 'WidgetFactory'],
  function(context, cls) {

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

        /**
         * Widget to use to scroll on toolbar
         * @type {classes.FlowDecoratorWidget}
         */
        _flowDecoratorWidget: null,

        /** @type {Element} **/
        _flowDecoratorContainer: null,

        /** @type {classes.ChromeBarWidget} **/
        _chromeBar: null,

        _resizeHandler: null,

        /** @type {classes.FormWidget} **/
        _formWidget: null,

        toolbarAspectChange: "g_toolbarAspectChange",

        /**
         * @inheritDoc
         */
        _initContainerElement: function() {
          $super._initContainerElement.call(this);
          this._flowDecoratorWidget = cls.WidgetFactory.createWidget("FlowDecorator", this.getBuildParameters());
          this._flowDecoratorWidget.setParentWidget(this);
          this._flowDecoratorWidget.setOrientation("vertical");
          this._flowDecoratorWidget.setRendering("list");
          this._flowDecoratorContainer = this.getElement().querySelector(".mt-tab-flow");
          this._flowDecoratorContainer.appendChild(this._flowDecoratorWidget.getElement());
          this._resizeHandler = context.HostService.onScreenResize(this._onResize.bind(this));
        },

        /**
         * @inheritDoc
         */
        _initLayout: function() {
          this._layoutInformation = new cls.LayoutInformation(this);
          this._layoutEngine = new cls.FlowLayoutEngine(this);
          this._layoutEngine.setFlowDecoratorWidget(this._flowDecoratorWidget);

        },

        /**
         * Handler called when screen is resized
         * @private
         */
        _onResize: function() {
          this._layoutEngine.forceMeasurement();
          this._layoutEngine.invalidateMeasure();
        },

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

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

        /**
         * Show/hide the text of the toolbar items
         * @param {boolean} state - true to display text under image, false to hide it
         * @publicdoc
         */
        setButtonTextHidden: function(state) {
          if (state) {
            this.getElement().addClass('buttonTextHidden');
          } else {
            this.getElement().removeClass('buttonTextHidden');
          }
        },

        /**
         * Set toolbar button size
         * @param {String} buttonSize - size of the buttons
         */
        setButtonSize: function(buttonSize) {
          this.removeClass("button-small");
          this.removeClass("button-large");
          this.addClass("button-" + buttonSize);

          // re-measure children
          this.getChildren().slice(1).forEach(item => {
            item.getLayoutEngine().forceMeasurement();
            item.getLayoutEngine().invalidateMeasure();
          });
          this._layoutEngine._refresh();
        },

        /**
         * @inheritDoc
         */
        destroy: function() {
          if (this._flowDecoratorWidget) {
            this._flowDecoratorWidget.destroy();
            this._flowDecoratorWidget = null;
          }
          if (this._resizeHandler) {
            this._resizeHandler();
            this._resizeHandler = null;
          }
          if (this.isChromeBar()) {
            this._chromeBar = null;
          }

          $super.destroy.call(this);
        },

        /**
         * Define this Toolbar as a ChromeBar part
         * @param {classes.ChromeBarWidget} chromeBar - widget to set
         */
        setAsChromeBar: function(chromeBar) {
          this._chromeBar = chromeBar;
        },

        /**
         * Check if this toolbar is a chromeBar part
         * @return {boolean} - true if widget is a chromebar, false otherwise
         */
        isChromeBar: function() {
          return Boolean(this._chromeBar);
        },

        /**
         * @inheritDoc
         */
        manageMouseClick: function(domEvent) {
          if (!domEvent.target.hasClass("gbc_FlowDecoratorWidget")) {
            this._flowDecoratorWidget.closeDropDown();
          }

          return true;
        },

        /**
         * Get the 3 dots real width
         * @return {number} width in px
         */
        getDecoratorWidth: function() {
          return this._flowDecoratorWidget.getLayoutInformation().getRawMeasure().getWidth();
        },

        /**
         *
         * @return {classes.FlowDecoratorWidget}
         */
        getFlowDecoratorWidget: function() {
          return this._flowDecoratorWidget;
        },

        /**
         * Define the form linked to this toolbar
         * Mainly used for layout calculation in modal window
         * @param {classes.FormWidget} widget - the form widget to link
         */
        setFormWidget: function(widget) {
          this._formWidget = widget;
        },

        /**
         * Define the Aspect of the Toolbar
         * @param {String} mode - could be "icon", "text" or "both" (default)
         */
        setAspect: function(mode) {
          this._aspect = mode;
          this._element.setAttribute("gbc_toolbaraspect", mode);
          this.emit(this.toolbarAspectChange, mode);
        },

        /**
         *
         * @param {String} size - could be "small", ""
         */
        setItemSize: function(size) {

        },

        /**
         * Set toolbar items alignment
         * @param {string} alignment : 'left' (default), 'right', 'center', 'justify'
         */
        setToolBarItemsAlignment: function(alignment) {
          if (this._itemsAlignment !== alignment) {
            if (this._itemsAlignment) {
              this.getContainerElement().removeClass(this._itemsAlignment);
            }
            this._itemsAlignment = alignment;
            if (this.getContainerElement()) {
              this.getContainerElement().addClass(alignment);
            }
          }
        },

        /**
         * @inheritDoc
         */
        addChildWidget: function(widget, options) {
          $super.addChildWidget.call(this, widget, options);

          if (this._chromeBar) {
            //If we are in a chromebar we must also add the new child to it
            this._chromeBar.addItemWidget(widget, options);
          }
        }

      };
    });
    cls.WidgetFactory.registerBuilder('ToolBar', cls.ToolBarWidget);
  });