123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234/// 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('ColoredWidgetBase', ['WidgetBase', 'WidgetFactory'],
  function(context, cls) {

    /**
     * Base class for all widgets handling colors (background and fore)
     * @class ColoredWidgetBase
     * @memberOf classes
     * @extends classes.WidgetBase
     * @publicdoc Widgets
     */
    cls.ColoredWidgetBase = context.oo.Class(cls.WidgetBase, function($super) {
      return /** @lends classes.ColoredWidgetBase.prototype */ {
        __name: "ColoredWidgetBase",
        __virtual: true,
        /**
         * true to ignore background color
         * @type {boolean}
         * @protected
         */
        _ignoreBackgroundColor: false,
        /**
         * the widget's main color
         * @type {?string}
         * @protected
         */
        _color: null,
        /**
         * the widget's main background color
         * @type {?string}
         * @protected
         */
        _backgroundColor: null,

        /**
         * @inheritDoc
         */
        _afterInitElement: function() {
          this.getElement().toggleClass("gbc_WidgetBase_standalone", !(this._inTable || this._inScrollGrid));
          this.getElement().toggleClass("gbc_WidgetBase_in_array", this._inTable || this._inScrollGrid);
        },

        /**
         * Set the fore color
         * @see {@link http://www.w3.org/wiki/CSS/Properties/color}
         * @param {string} color a CSS color definition. Can be a color name ('red', 'blue'),
         *                 an hex code ('#f5d48a') or a color function ('rgb(128, 255, 0)').
         *                 null restores the default value.
         * @publicdoc
         */
        setColor: function(color) {
          if (this._color !== color) {
            this._color = color;
            this.setStyle({
              selector: ".gbc_WidgetBase_standalone",
              appliesOnRoot: true
            }, {
              "color": color ? color : null,
            });

            // TODO these specific table style should be done in RTableWidget by adding a function
            // ex this.getTableWidgetBase().setInTableWidgetColor(this, color);
            if (gbc.responsive) {
              this.setStyle({
                preSelector: ".noHighlightCurrentRow ",
                selector: ".gbc_WidgetBase_in_array",
                appliesOnRoot: true
              }, {
                "color": color ? color + " !important" : null,
              });

              this.setStyle({
                preSelector: ".highlightCurrentRow .gbc_RTableRowWidget:not(.currentRow) ",
                selector: ".gbc_WidgetBase_in_array",
                appliesOnRoot: true
              }, {
                "color": color ? color + " !important" : null,
              });
            } else { // TODO deprecated
              this.setStyle({
                preSelector: ".nohighlight ",
                selector: ".gbc_WidgetBase_in_array",
                appliesOnRoot: true
              }, {
                "color": color ? color + " !important" : null,
              });
              this.setStyle({
                preSelector: ".highlight ",
                selector: ".gbc_WidgetBase_in_array:not(.currentRow)",
                appliesOnRoot: true
              }, {
                "color": color ? color + " !important" : null,
              });
            }
          }
        },

        /**
         * Returns the fore color
         * @see {@link http://www.w3.org/wiki/CSS/Properties/color}
         * @returns {?string} a color definition as an RGB function ('rgb(128, 255, 0)')
         * @publicdoc
         */
        getColor: function() {
          return this._color;
        },

        /**
         * Returns the fore color (directly from style css)
         * @see {@link http://www.w3.org/wiki/CSS/Properties/color}
         * @returns {string} a color definition as an RGB function ('rgb(128, 255, 0)')
         * @publicdoc
         */
        getColorFromStyle: function() {
          return this.getStyle(".gbc_WidgetBase_standalone", "color", true);
        },

        /**
         * Sets the background color
         * @see {@link http://www.w3.org/wiki/CSS/Properties/background-color}
         * @param {string} color a CSS color definition. Can be a color name ('red', 'blue'),
         *                 an hex code ('#f5d48a') or a color function ('rgb(128, 255, 0)')
         *                 null restores the default value.
         * @param {boolean} [notImportant] Set the CSS color definition on the ID whithout '!important'.
         * @publicdoc
         */
        setBackgroundColor: function(color, notImportant) {
          if (notImportant === true) {
            if (this._backgroundColor !== color) {
              this._backgroundColor = color;
              this.setStyle({
                "background-color": color && !this._ignoreBackgroundColor ? color : null
              });
            }

            return;
          }

          if (this._backgroundColor !== color) {
            this._backgroundColor = color;
            this.setStyle({
              selector: ".gbc_WidgetBase_standalone",
              appliesOnRoot: true
            }, {
              "background-color": color && !this._ignoreBackgroundColor ? color + " !important" : null
            });

            // TODO these specific table style should be done in RTableWidget by adding a function
            // ex this.getTableWidgetBase().setInTableWidgetColor(this, color);
            if (gbc.responsive) {
              this.setStyle({
                preSelector: ".noHighlightCurrentRow ",
                selector: ".gbc_WidgetBase_in_array",
                appliesOnRoot: true
              }, {
                "background-color": color && !this._ignoreBackgroundColor ? color + " !important" : null,
              });

              this.setStyle({
                preSelector: ".highlightCurrentRow .gbc_RTableRowWidget:not(.currentRow) ",
                selector: ".gbc_WidgetBase_in_array",
                appliesOnRoot: true
              }, {
                "background-color": color && !this._ignoreBackgroundColor ? color + " !important" : null,
              });

              this.setStyle({
                preSelector: ".highlightCurrentRow.noHighlightCurrentCell .gbc_RTableRowWidget.currentRow .gbc_RTableItemWidget.currentColumn ",
                selector: ".gbc_WidgetBase_in_array",
                appliesOnRoot: true
              }, {
                "background-color": color && !this._ignoreBackgroundColor ? color + " !important" : null,
              });

            } else { // TODO deprecated
              this.setStyle({
                preSelector: ".nohighlight ",
                selector: ".gbc_WidgetBase_in_array",
                appliesOnRoot: true
              }, {
                "background-color": color && !this._ignoreBackgroundColor ? color + " !important" : null
              });
              this.setStyle({
                preSelector: ".highlight ",
                selector: ".gbc_WidgetBase_in_array:not(.currentRow)",
                appliesOnRoot: true
              }, {
                "background-color": color && !this._ignoreBackgroundColor ? color + " !important" : null
              });
            }
            this.setStyle({
              preSelector: ".gbc_ScrollGridWidget.highlight ",
              selector: ".gbc_WidgetBase_in_array.gbc_Focus",
              appliesOnRoot: true
            }, {
              "background-color": color && !this._ignoreBackgroundColor ? color + " !important" : null
            });
          }
        },

        /**
         * Set whether or not to ignore background color
         * @param {boolean} ignore true to ignore
         * @protected
         */
        setIgnoreBackgroundColor: function(ignore) {
          this._ignoreBackgroundColor = ignore;
          this.setBackgroundColor(this._backgroundColor);
        },

        /**
         * Returns the background color
         * @see {@link http://www.w3.org/wiki/CSS/Properties/background-color}
         * @returns {?string} a color definition as an RGB function ('rgb(128, 255, 0)')
         * @publicdoc
         */
        getBackgroundColor: function() {
          return this._backgroundColor;
        }
      };
    });
  });