123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590/// 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('TextEditWidget', ['FieldWidgetBase', 'WidgetFactory'],
  function(context, cls) {

    /**
     * TextEdit widget.
     * @class TextEditWidget
     * @memberOf classes
     * @extends classes.FieldWidgetBase
     * @publicdoc Widgets
     */
    cls.TextEditWidget = context.oo.Class(cls.FieldWidgetBase, function($super) {
      return /** @lends classes.TextEditWidget.prototype */ {
        __name: 'TextEditWidget',
        /**
         * true if textedit can contains HTML content
         * @type {boolean}
         */
        _hasHTMLContent: false,
        /**
         * true if we must sanitize the html
         * @type {boolean}
         * */
        _sanitize: null,
        /** @type classes.HtmlFilterWidget **/
        _htmlFilter: null,
        /** @type {boolean} */
        _wantReturns: true,
        /** @type {boolean} */
        _wantTabs: false,
        /**
         * Redefine where the data is located
         * @type {string|Object}
         */
        __dataContentPlaceholderSelector: cls.WidgetBase.selfDataContent,

        /**
         * @type {boolean}
         */
        _canShowVirtualKeyboard: null,

        /**
         * True to always show the virtual keyboard on GMA
         * @type {boolean}
         */
        _showVirtualKeyboardOnFocus: null,

        /**
         * Handler for virtualKeyboardDisplayed event
         * @function
         */
        _virtualKeyboardDisplayedHandler: null,

        /**
         * Give the real widget readonly state (on mobile the widget is sometimes readonly only
         * to hide the virtual keyboard)
         * @type {boolean}
         */
        _realReadOnly: false,

        /**
         * @inheritDoc
         */
        _initLayout: function() {
          if (!this._ignoreLayout) {
            this._layoutInformation = new cls.LayoutInformation(this);
            this._layoutInformation.shouldFillStack = true;
            this._layoutEngine = new cls.LeafLayoutEngine(this);
            this._layoutEngine._shouldFillHeight = true;
            this._layoutInformation.getSizePolicyConfig().dynamic = cls.SizePolicy.Initial();
            this._layoutInformation.forcedMinimalWidth = 20;
            this._layoutInformation.forcedMinimalHeight = 20;
          }
        },

        /**
         * @inheritDoc
         */
        _initElement: function() {
          $super._initElement.call(this);
          this._inputElement = this._element.getElementsByTagName('textarea')[0];
          this._initListeners();

          // Manage virtual keyboard on Mobile
          this._canShowVirtualKeyboard = true;
          this._realReadOnly = false;

          // Manage virtual keyboard on Mobile
          if (context.__wrapper.isGMA()) {
            // On GMA skip the first VM Focus after a dialogType change.
            this._virtualKeyboardDisplayedHandler = this._appWidget.when(context.constants.widgetEvents.virtualKeyboardDisplayed,
              function() {
                this._canShowVirtualKeyboard = true;
              }.bind(this));
          }

          this._showVirtualKeyboardOnFocus = false;
        },

        /**
         * Initialize all widget events listener
         */
        _initListeners: function() {
          this._inputElement.on('input.TextEditWidget', this._onInput.bind(this));
          // Manage requestFocus during selection of text
          this._inputElement.on('mousedown.TextEditWidget', cls.WidgetBase._onSelect.bind(this));
        },

        /**
         * Clear event listeners of the widget
         */
        _unloadListeners: function() {
          this._inputElement.off('mousedown.TextEditWidget');
          this._inputElement.off('input.TextEditWidget');
        },

        /**
         * @inheritDoc
         */
        destroy: function() {
          this._unloadListeners();

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

          if (this._virtualKeyboardDisplayedHandler) {
            this._virtualKeyboardDisplayedHandler();
            this._virtualKeyboardDisplayedHandler = null;
          }

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

        /**
         * @inheritDoc
         */
        manageMouseClick: function(domEvent) {
          //On GMA remove the readonly to display the virtual keyboard
          if (this.getApplicationWidget() && context.__wrapper.isGMA()) {
            this._setInputReadOnly(this._realReadOnly || this._notEditable || !this._enabled);
            this.getApplicationWidget().virtualKeyboardIsDisplayed();
          }

          this._elementState.backupCursorPos(this._inputElement);
          this._onRequestFocus(domEvent); // request focus
          this.emit(context.constants.widgetEvents.click, domEvent);
          return true;
        },

        /**
         * @inheritDoc
         */
        managePriorityKeyDown: function(keyString, domKeyEvent, repeat) {
          var keyProcessed = false;

          if (this.isEnabled()) {
            switch (keyString) {
              // Standard navigation : let default
              case "up":
              case "down":
              case "end":
              case "home":
                domKeyEvent.gbcDontPreventDefault = true;
                keyProcessed = true;
                break;

              case "enter":
              case "return":
                if (!this.isNotEditable() && this._wantReturns) {
                  domKeyEvent.gbcDontPreventDefault = true;
                  keyProcessed = true;
                }
                break;

              case "tab":
                if (!this.isNotEditable() && this._wantTabs) {
                  keyProcessed = true;
                  this._insertTab();
                }
                break;
            }
          }

          if (keyProcessed) {
            return true;
          } else {
            return $super.managePriorityKeyDown.call(this, keyString, domKeyEvent, repeat);
          }
        },

        /**
         * Fix the string according to byte/char length and display width
         * @param  {string} text - string to fix
         * @param {string} newTextPart - new text part
         * @return {string} a valid newTextPart
         * @private
         */
        _checkValue: function(text, newTextPart) {
          if (this._dialogType !== 'Input' && this._dialogType !== 'InputArray') {
            return newTextPart;
          }

          if (this._maxLength > 0 && !this.getUserInterfaceWidget().isCharLengthSemantics()) {
            newTextPart = this.checkValueByteCount(text, newTextPart, this._maxLength);
          }

          return newTextPart;
        },

        /**
         * @inheritDoc
         */
        manageKeyDown: function(keyString, domKeyEvent, repeat) {
          if (!this._hasHTMLContent) {
            var widgetText = this.getValue();
            var res = this._checkValue('', widgetText.removeUnknownChar());
            //Save the last valid value
            if (res === widgetText) {
              this._elementState.backup(this._inputElement);
            }
          }

          return $super.manageKeyDown.call(this, keyString, domKeyEvent);
        },

        /**
         * @inheritDoc
         */
        manageKeyUp: function(keyString, domKeyEvent) {
          $super.manageKeyUp.call(this, keyString, domKeyEvent);

          if (!this._hasHTMLContent) {
            this._verifyWidgetValue(domKeyEvent);
          }

          this.emit(context.constants.widgetEvents.keyUp, domKeyEvent, true);
        },

        /**
         * Verify the display width, the max length and the encoding according to the char/byte length semantics,
         * the width/max length of the widget and vm encoding
         * @param {Object} domEvent
         * @private
         */
        _verifyWidgetValue: function(event) {
          //Manage display char (full/half) and length semantics constraints
          var widgetText = this._elementState.getValue();
          var inputValue = this._inputElement.value;

          if (widgetText.length >= inputValue.length) {
            this._elementState.backup(this._inputElement);
            //Less char in edit so no need to verify autonext
            return;
          } else {
            var newPart = this._elementState.newPart(inputValue);
            //If you need to make some char replacement do something like:
            //newPart = newPart.replace(....)
            var res = '';
            //On mobile isComposing=1 even for regular char
            if (!window.isMobile() && event.isComposing) {
              //When composing we can use invalid char to create a valid one
              //No need to verify autonext
              return;
            } else {
              res = this._checkValue(widgetText, newPart.removeUnknownChar());
            }

            if (res !== newPart) {
              this._elementState.restore(this._inputElement, res);
              this.setValue(this._inputElement.value);
              //Set restored to true to not trigger the autonext
              this._elementState.setRestored(true);
              return;
            }
          }
        },

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

          //Keyboard events are managed by manageKeyUp method
          if (!this._hasHTMLContent && !this._processingKeyEvent) {
            this._verifyWidgetValue(event);
          }

          // TODO this code should probably be moved in FieldWidgetBase when fix GBC-2088
          // IE11 bug : input event being raised on edit click. Try to catch this specific case by testing if value changed and field doesn't have VM focus yet.
          if (!window.browserInfo.isIE || this.getValue() !== this._oldValue || this.hasVMFocus()) {
            this.emit(context.constants.widgetEvents.change, true);
          }
        },

        /**
         * Insert a TAB char
         * @private
         */
        _insertTab: function() {
          var s = this._inputElement.selectionStart;
          var value = this._inputElement.value.substring(0, this._inputElement.selectionStart) + "\t" + this._inputElement.value
            .substring(this._inputElement.selectionEnd);

          // If Maxlength is not defined, insert tab character anyway
          if (!this.getMaxLength() || value.length <= this.getMaxLength()) {
            this.setValue(value);
            this._inputElement.selectionEnd = s + 1;
          }
        },

        /**
         * @inheritDoc
         */
        setValue: function(value, fromVM) {
          $super.setValue.call(this, value, fromVM);
          this._setValue(value);
        },

        /**
         * Internal setValue used to be inherited correctly by DummyWidget
         * @param {string} value - the value
         * @private
         */
        _setValue: function(value) {
          if (this._hasHTMLContent) {
            if (this._sanitize) {
              this._inputElement.innerHTML = this._htmlFilter.sanitize(value);
            } else {
              this._inputElement.innerHTML = value;
            }
          } else {
            this._inputElement.value = value;
            this._elementState.backup(this._inputElement);
          }
        },

        /**
         * @inheritDoc
         */
        getValue: function() {
          if (this._hasHTMLContent === true) {
            return this._inputElement.innerHTML;
          } else if (this._editingTime === 0) { // not touched by user
            // return exact VM value to avoid bad conversion from \r to \n
            return this._valueStack[this._valueStackCursor] || "";
          } else {
            var result = this._inputElement.value;
            if (this.isEditing()) {
              if (this.getTextTransform() === 'up') {
                result = result.toLocaleUpperCase();
              }
              if (this.getTextTransform() === 'down') {
                result = result.toLocaleLowerCase();
              }
            }
            return result;
          }
        },

        /**
         * @inheritDoc
         */
        setReadOnly: function(readonly) {
          this._realReadOnly = readonly;

          $super.setReadOnly.call(this, readonly);
          this._setInputReadOnly(this._realReadOnly || this._notEditable || !this._enabled);
        },

        /**
         * Set input readonly attribute if it doesn't have focus or is noentry.
         * @param {boolean} readonly - true to set the edit part as read-only, false otherwise
         */
        _setInputReadOnly: function(readonly) {
          if (readonly || this._isReadOnly) {
            if (this._hasHTMLContent) {
              this._inputElement.setAttribute('contenteditable', false);
            } else {
              this._inputElement.setAttribute('readonly', 'readonly');
            }
          } else {
            if (this._hasHTMLContent) {
              this._inputElement.setAttribute('contenteditable', true);
            } else {
              this._inputElement.removeAttribute('readonly');
            }
          }
        },

        /**
         * Define the maximum number of characters allowed
         * @param {number} maxlength - maximum number of characters allowed in the field
         * @publicdoc
         */
        setMaxLength: function(maxlength) {
          if (maxlength) {
            this._maxLength = maxlength;
            this._setElementAttribute('maxlength', maxlength, "_inputElement");
          }
        },

        /**
         * Get the maximum number of characters allowed
         * @returns {number} the maximum number of characters allowed in the field
         * @publicdoc
         */
        getMaxLength: function() {
          return this._inputElement.getIntAttribute('maxlength');
        },

        /** Place the cursor at the given position,
         * @param {number} cursor - first cursor position
         * @param {number} [cursor2] - second cursor position
         * @publicdoc
         */
        setCursors: function(cursor, cursor2) {
          if (!cursor2) {
            cursor2 = cursor;
          }

          this._inputElement.setCursorPosition(cursor, cursor2);
        },

        /**
         * Get cursors
         * @return {{start: number, end: number}} object with cursors
         * @publicdoc
         */
        getCursors: function() {
          var cursors = {
            start: 0,
            end: 0
          };
          if (this._inputElement && this._inputElement.value) {
            try {
              cursors.start = this._inputElement.selectionStart;
              cursors.end = this._inputElement.selectionEnd;
            } catch (ignore) {
              // Some input types don't allow cursor manipulation
            }
          }
          return cursors;
        },

        /**
         * @inheritDoc
         */
        setTextAlign: function(align) {
          $super.setTextAlign.call(this, align);
          this.setStyle(">textarea", {
            "text-align": align
          });
        },

        /**
         * Replace default textarea element used to display text with an html element which can displays HTML
         * @param {HTMLElement} jcontrol - div element
         * @publicdoc
         */
        setHtmlControl: function(jcontrol) {
          if (this._htmlFilter === null) {
            this._htmlFilter = cls.WidgetFactory.createWidget('HtmlFilterWidget', this.getBuildParameters());
          }
          if (this.isEnabled()) {
            jcontrol.setAttribute('contenteditable', true);
          }
          jcontrol.innerHTML = this.getValue();
          // Remove events before replacing the widget
          this._unloadListeners();
          this._inputElement.replaceWith(jcontrol);
          this._hasHTMLContent = true;
          this._inputElement = jcontrol;
          // Initialize events for the new widget
          this._initListeners();
          if (this.hasFocus()) {
            // Force focus again if it has focus
            this.setFocus();
          }
        },

        /**
         * sanitize = false : Authorize to send html text without control
         * @param {boolean} sanitize
         */
        setSanitize: function(sanitize) {
          this._sanitize = sanitize;
        },

        /**
         * @inheritDoc
         */
        setFocus: function(fromMouse) {
          if (context.__wrapper.isGMA() && !this._showVirtualKeyboardOnFocus) {
            if (this._canShowVirtualKeyboard) {
              this._setInputReadOnly(this._realReadOnly || this._notEditable || !this._enabled);
            } else {
              this._setInputReadOnly(true);
            }
          }

          this._inputElement.domFocus(null, this._inputElement);
          $super.setFocus.call(this, fromMouse);
        },

        /**
         * Set number of editable rows inside the textedit widget
         * @param {number} rows - number of rows
         * @publicdoc
         */
        setRows: function(rows) {
          this._inputElement.setAttribute('rows', rows || 1);
        },

        /**
         * Make the textedit content return the new line breaking the word or not
         * @param {string} format - css value
         * @publicdoc
         */
        setWrapPolicy: function(format) {
          this._inputElement.toggleClass('breakword', format === 'anywhere');
        },

        /**
         * @inheritDoc
         */
        setEnabled: function(enabled) {
          var oldEnabled = this._enabled;
          var bEnabled = Boolean(enabled);

          if (this._dialogType !== 'Display' && this._dialogType !== 'DisplayArray' && this._dialogType !== false) {
            this._canShowVirtualKeyboard = !enabled || oldEnabled === bEnabled;
          }

          $super.setEnabled.call(this, enabled);
          this._setInputReadOnly(!enabled || this._notEditable || this._realReadOnly);
        },

        /**
         * Set if textedit accepts TAB key
         * @param {boolean} wantTabs - true if TAB key should be accepted in the textedit
         * @publicdoc
         */
        setWantTabs: function(wantTabs) {
          this._wantTabs = wantTabs;
        },

        /**
         * Set if textedit accepts RETURN/ENTER key
         * @param {boolean} wantReturns - true if returns/enters should be accepted in the textedit
         * @publicdoc
         */
        setWantReturns: function(wantReturns) {
          this._wantReturns = wantReturns;
        },

        /**
         * Defines the scrollBars to display
         * @param {string} scrollBars - value can be 'auto', 'both', 'none', 'horizontal', 'vertical'
         */
        setScrollBars: function(scrollBars) {
          this.addClass("scrollbars-" + scrollBars);
        },

        /**
         * True if you want to always show the virtual keyboard on GMA
         * @param {boolean} show
         */
        setShowVirtualKeyboardOnFocus: function(show) {
          this._showVirtualKeyboardOnFocus = show;
        }

      };
    });
    cls.WidgetFactory.registerBuilder('TextEdit', cls.TextEditWidget);
  });