view class doc
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330/// FOURJS_START_COPYRIGHT(D,2019)
/// Property of Four Js*
/// (c) Copyright Four Js 2019, 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('RTableRowWidget', ['WidgetGroupBase'],
  function(context, cls) {

    /**
     * Responsive Table row widget.
     * @class RTableRowWidget
     * @memberOf classes
     * @extends classes.WidgetGroupBase
     * @publicdoc
     */
    cls.RTableRowWidget = context.oo.Class(cls.WidgetGroupBase, function($super) {
      return /** @lends classes.RTableRowWidget.prototype */ {
        __name: "RTableRowWidget",

        /** @type boolean */
        _isCurrent: false,

        /** @type boolean */
        _isSelected: false,

        /** @type boolean */
        _isHeader: false,

        /** @type boolean */
        _isFooter: false,

        /** @type classes.RowBoundDecoratorWidget */
        _rowBoundDecoratorWidget: null,

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

          this._element.onDoubleTap("RTableRowWidget", this._onDoubleClick.bind(this));
        },

        /**
         * @inheritDoc
         */
        _initLayout: function() {
          // no layout
        },

        /**
         * @inheritDoc
         */
        destroy: function() {
          this._element.offDoubleTap("RTableRowWidget");

          if (this._rowBoundDecoratorWidget) {
            this._rowBoundDecoratorWidget.destroy();
            this._rowBoundDecoratorWidget = null;
          }

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

        /**
         * Request focus for this row
         * @param {*} domEvent - dom event object
         */
        requestFocus: function(domEvent) {
          this._children[0].requestFocus(domEvent);
        },

        /**
         * @inheritDoc
         */
        manageMouseClick: function(domEvent) {
          let tableWidget = this.getTableWidgetBase();

          if (!this._isHeader && !this._isFooter && tableWidget && !tableWidget.isRowActionTriggerByDoubleClick()) {
            tableWidget.emit(context.constants.widgetEvents.rowAction);
            return false;
          }

          return true;
        },

        /**
         * @inheritDoc
         */
        manageMouseDblClick: function(domEvent) {
          this._onDoubleClick(domEvent);
          return false;
        },

        /**
         * Handle double click on row event
         * @param {Object} event
         */
        _onDoubleClick: function(event) {
          let tableWidget = this.getTableWidgetBase();
          if (!this._isHeader && !this._isFooter && tableWidget && tableWidget.isRowActionTriggerByDoubleClick()) {
            tableWidget.emit(context.constants.widgetEvents.rowAction);
          }
        },

        /**
         * @inheritDoc
         */
        addChildWidget: function(widget, options) {

          let item = null;
          if (options.headerItem) {
            item = widget;
          } else if (options.footerAggregateItem) {
            item = widget;
          } else {
            let opts = this.getBuildParameters();
            let colWidget = options.colWidget;
            opts.isTreeItem = colWidget.isTreeView();

            // data row
            item = cls.WidgetFactory.createWidget("RTableItem", opts);
            item.addChildWidget(widget);
            item.getElement().setAttribute("data-header", colWidget.getText());

            // position for DOM insertion is colIndex
            options.position = options.colIndex;

            item.setColumnWidget(colWidget);
            colWidget.getChildren().push(item);

            // if add a widget in the first row need to measure widget to compute column width
            if (options.rowIndex === 0) {
              this.getParentWidget().resetMeasure();
            }
          }

          $super.addChildWidget.call(this, item, options);

          // initialize item after it has been added
          if (item.init) {
            item.init();
          }
        },

        /**
         * Returns item widgets
         * @returns {classes.RTableItemWidget[]} array of item widgets
         * @publicdoc
         */
        getItems: function() {
          return this.getChildren();
        },

        /**
         * Returns row index in the table
         * @returns {number} row index in the table
         * @publicdoc
         */
        getRowIndex: function() {
          let tableWidget = this.getTableWidgetBase();
          if (tableWidget) {
            return tableWidget.getRows().indexOf(this);
          }
          return -1;
        },

        /**
         * Set image of the row
         * @param {string} path - image path
         */
        setImage: function(path) {
          /*if (path && path !== "") {
            if (!this._imageWidget) {
              this._imageWidget = cls.WidgetFactory.createWidget("ImageWidget", this.getBuildParameters());
              this._imageWidget.setParentWidget(this);
              this._imageElement.appendChild(this._imageWidget.getElement());
            }
            this._imageWidget.setSrc(path);

            // fix for ie11, this browser is not able to auto resize an SVG
            if (window.browserInfo.isIE) {
              var width = null;
              if (path.startsWith("font:")) {
                width = this.getParentWidget().getRowHeight() + "px";
              }
              this.setStyle(" .gbc_ImageWidget", {
                "width": width
              });
            } // end ie11 fix

            this._imageWidget.getElement().removeClass("hidden");
            this._imageElement.removeClass("hidden");

          } else if (this._imageWidget) {
            this._imageElement.addClass("hidden");
          }*/
        },

        /**
         * Sets if the row is the current one
         * @param {boolean} current - true if row is the current one, false otherwise
         * @publicdoc
         */
        setCurrent: function(current) {
          if (this._isCurrent !== current) {
            this._isCurrent = current;
            if (!!current) {
              this._element.addClass("currentRow");
            } else {
              this._element.removeClass("currentRow");
            }
          }
        },

        /**
         * Returns if row is the current one
         * @returns {boolean} is the current row ?
         * @publicdoc
         */
        isCurrent: function() {
          return this._isCurrent;
        },

        /**
         * Sets if the row is the header row
         * @param {boolean} header - true if row is the header, false otherwise
         * @publicdoc
         */
        setHeader: function(header) {
          this._isHeader = header;
        },

        /**
         * Sets if the row is the footer row
         * @param {boolean} footer - true if row is the footer, false otherwise
         * @publicdoc
         */
        setFooter: function(footer) {
          this._isFooter = footer;
        },

        /**
         * Sets if row is selected
         * @param {boolean} selected - true if the row should be selected, false otherwise
         */
        setSelected: function(selected) {
          if (this._isSelected !== selected) {
            this._isSelected = selected;
            this._element.toggleClass("selectedRow", Boolean(selected));
          }
        },

        /**
         * Checks if row is selected
         * @returns {boolean} true if the row is selected, false otherwise
         */
        isSelected: function() {
          return this._isSelected;
        },

        /**
         * Return rowBound decorator widget
         * @return {classes.RowBoundDecoratorWidget} - rowBound decorator widget
         */
        getRowBoundDecoratorWidget: function() {
          return this._rowBoundDecoratorWidget;
        },

        /**
         * Creates and adds rowBound decorator element to DOM
         */
        addRowBoundDecorator: function() {
          if (this._rowBoundDecoratorWidget === null) {
            this._rowBoundDecoratorWidget = cls.WidgetFactory.createWidget("RowBoundDecorator", this.getBuildParameters());
            this._rowBoundDecoratorWidget.setParentWidget(this);
            this._rowBoundDecoratorWidget.setContextMenuWidget(this.getTableWidgetBase().getRowBoundWidget());

            if (this.getTableWidgetBase().hasVMFocus()) {
              this._rowBoundDecoratorWidget.updateQuickActions();
            }

            this._element.appendChild(this._rowBoundDecoratorWidget.getElement());

            // hack to have the same css rule
            this._rowBoundDecoratorWidget.addClass("gbc_RTableItemWidget");
            this._rowBoundDecoratorWidget.addClass("gbc_WidgetBase_in_array");

            // rowbound is the very last column
            let order = parseInt(this.getRowIndex() + "999");
            this._rowBoundDecoratorWidget.setStyle({
              "order": order
            });
          }
        },

        /**
         * @inheritDoc
         */
        setHidden: function(hidden) {
          if (this._hidden !== Boolean(hidden)) {
            this._hidden = Boolean(hidden);
            if (this._element) {
              if (this._hidden) {
                this.addClass("hidden");
              } else {
                this.removeClass("hidden");
              }
            }

            // hide/show all items of row
            for (const item of this.getItems()) {
              item.setHidden(hidden);
            }
          }
        },
      };
    });
    cls.WidgetFactory.registerBuilder('RTableRow', cls.RTableRowWidget);
  });