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

    /**
     * Edit widget.
     * @class EditWidget
     * @memberOf classes
     * @extends classes.FieldWidgetBase
     * @publicdoc Widgets
     */
    cls.EditWidget = context.oo.Class(cls.FieldWidgetBase, function($super) {
      return /** @lends classes.EditWidget.prototype */ {

        __name: 'EditWidget',

        _completerCurrentChildrenChangeHandler: null,

        __dataContentPlaceholderSelector: cls.WidgetBase.selfDataContent,

        _completerWidget: null,
        _inputType: null,
        _inputMode: null,
        _displayFormat: null,

        _title: null,

        /**
         * @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._layoutEngine = new cls.LeafLayoutEngine(this);
            this._layoutInformation._fixedSizePolicyForceMeasure = true;
            this._layoutInformation.setSingleLineContentOnly(true);
          }
        },

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

          // needed for completer
          this._inputElement.on('blur.EditWidget', this._onBlur.bind(this));
          this._inputElement.on('input.EditWidget', this._onInput.bind(this));

          // Manage requestFocus during selection of text
          this._inputElement.on('mousedown.EditWidget', cls.WidgetBase._onSelect.bind(this));

          // Manage virtual keyboard on Mobile
          this._canShowVirtualKeyboard = true;
          this._realReadOnly = false;
          this._notEditable = 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;
        },

        /**
         * @inheritDoc
         */
        destroy: function() {
          if (this._inputElement) {
            this._inputElement.off('input.EditWidget');
            this._inputElement.off('mousedown.EditWidget');
            this._inputElement.off('blur.EditWidget');
            this._inputElement.remove();
            this._inputElement = null;
          }
          if (this._completerWidget) {
            this._completerWidget.destroy();
            this._completerWidget = null;
            if (this._completerCurrentChildrenChangeHandler) {
              this._completerCurrentChildrenChangeHandler();
              this._completerCurrentChildrenChangeHandler = 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);
          return true;
        },

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

          if (this.hasCompleter()) {
            keyProcessed = this.getCompleterWidget().managePriorityKeyDown(keyString, domKeyEvent, repeat);
          }

          this._updateCapsLockWarning();

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

        /**
         * Fix the newTextPart according to byte/char length and display width
         * @param  {string} text - widget valid value
         * @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._scroll || this._dataTypeWithNoScroll) {
            newTextPart = this.checkValueDisplayWidth(text, newTextPart);
          }

          if (this._maxLength > 0) {
            if (this.getUserInterfaceWidget().isCharLengthSemantics()) {
              newTextPart = newTextPart.substr(0, this._maxLength - text.length);
            } else {
              newTextPart = this.checkValueByteCount(text, newTextPart, this._maxLength);
            }
          }

          return newTextPart;
        },

        /**
         * @return {boolean} true if we can trigger autonext event
         */
        canAutoNext: function() {
          var text = this.getValue();

          if (!this._scroll || this._dataTypeWithNoScroll) {
            var displayWidth = this._vmWidth;
            var maxLength = this.getUserInterfaceWidget().isCharLengthSemantics() ? this._maxLength : -1;
            var codepoints = Array.from(text);

            if (text.displayWidth() >= displayWidth || (maxLength > 0 && codepoints.length >= maxLength)) {
              return true;
            }
          }

          if (this._maxLength > 0) {
            if (!this.getUserInterfaceWidget().isCharLengthSemantics()) {
              return text.countBytes() >= this._maxLength;
            }

            return text.length >= this._maxLength;
          }

          return false;
        },

        /**
         * @inheritDoc
         */
        manageKeyDown: function(keyString, domKeyEvent, repeat) {
          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);

          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(domEvent) {
          //Manage display char (full/half) and length semantics constraints
          var widgetText = this._elementState.getValue();
          var inputValue = this._inputElement.value;

          if (widgetText.length >= inputValue.length) {
            if (!this.isPictureDefined() || !window.isAndroid()) {
              // Hack for pictureVMBehavior on Android we must not save the current value,
              // it is done by pictureVMBehavior
              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() && domEvent.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);

          // sometimes we have to display dropdown again without VM interaction
          // case occurs when we select an item, close dropdown and rollback selected item. In this case
          if (this._completerWidget &&
            this.getValue() &&
            this.getValue() === this._oldValue &&
            !this._completerWidget.isVisible()) {
            this._completerWidget.show();
          }

          //Keyboard events are managed by manageKeyUp method
          if (!this._processingKeyEvent) {
            this._verifyWidgetValue(event);
            //If value is restored no need to emit Key up to trigger the autonext
            if (!this._elementState.isRestored()) {
              this.emit(context.constants.widgetEvents.keyUp, event, true);
            }
          }

          // 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);
          }
        },

        /**
         * Blur handler
         * @param {Object} event
         * @private
         */
        _onBlur: function(event) {
          this.emit(context.constants.widgetEvents.blur, event);
        },

        /**
         * @inheritDoc
         */
        setReadOnly: function(readonly) {
          this._realReadOnly = readonly;
          if (this._isReadOnly !== 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) {
          this._setElementAttribute('readonly', readonly ? 'readonly' : null, "_inputElement");
        },

        /**
         * Defines the Edit's 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 + 1, "_inputElement");
          }
        },

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

        /**
         * Defines if we can take more char than the widget width
         * @param {boolean} scroll true if the widget can 'scroll' his content (take more char than the widget width)
         * @publicdoc
         */
        setScroll: function(scroll) {
          var scrollModified = this._scroll !== scroll;
          this._scroll = scroll;

          if (scrollModified && !this._scroll && this._dataTypeWithValueCheck && this._maxLength > 0) {
            var widgetText = this.getValue();
            var res = this._checkValue("", widgetText);
            if (res !== widgetText) {
              this.setValue(res);
            }
          }
        },

        /**
         * Defines the alignment of the text in the input
         * @see http://www.w3.org/wiki/CSS/Properties/text-align
         * @param {string} align - a CSS text alignment. null restores the default value.
         * @publicdoc
         */
        setTextAlign: function(align) {
          this._textAlign = align;
          this.setStyle('>input', {
            'text-align': align
          });

          //only when focus
          align = this.isEnabled() ? this.getStart() : align;
          //not when number type
          align = this.isNumber() ? this.getEnd() : align;

          this.setStyle('>input:focus', {
            'text-align': align
          });
        },

        /**
         * Define the 'size' attribute of the input
         * @param {number} cols - size attribute
         * @publicdoc
         */
        setCols: function(cols) {
          this._inputElement.setAttribute('size', cols);
        },

        /**
         * Get the alignment of the text
         * @see http://www.w3.org/wiki/CSS/Properties/text-align
         * @returns {string} a CSS text alignment
         * @publicdoc
         */
        getTextAlign: function() {
          return this.getStyle('>input', 'text-align');
        },

        /**
         * Check if the widget format is number
         * @return {boolean} true if the widget format is number, false otherwise
         */
        isNumber: function() {
          var regex = /SMALLINT|INTEGER|BIGINT|INT|DECIMAL|MONEY|SMALLFLOAT|FLOAT/g;
          var match = regex.exec(this.getDisplayFormat());
          return Boolean(match);
        },

        /**
         * Get the display format if any
         * @return {?string} the display format
         * @publicdoc
         */
        getDisplayFormat: function() {
          return this._displayFormat;
        },

        /**
         * Set current display format to use on each set value
         * @param {string} format - display format
         * @publicdoc
         */
        setDisplayFormat: function(format) {
          this._displayFormat = format;
        },

        /**
         * @inheritDoc
         */
        traditionalDisplay: function(letterSpacing, fieldHeight, heightPadding) {
          var layoutInfo = this.getLayoutInformation();

          if (layoutInfo) {
            var left = layoutInfo.getGridX() - 1;
            var top = (layoutInfo.getGridY()) * (fieldHeight + 2 * heightPadding) + heightPadding;
            var width = layoutInfo.getGridWidth() + 1;
            var height = layoutInfo.getGridHeight() * fieldHeight;

            var style = this._element.parentElement.style;
            layoutInfo.getHostElement().toggleClass(layoutInfo.className, true);
            style.left = 'calc(' + left + 'ch + 1ch / 2 + ' + left + ' * ' + letterSpacing + ')';
            style.top = top + 'px';
            style.width = 'calc(' + width + 'ch + ' + width + ' * ' + letterSpacing + ')';
            style.height = height + 'px';
          }
        },

        /**
         * @inheritDoc
         */
        setValue: function(value, fromVM) {
          $super.setValue.call(this, value, fromVM);
          if (window.browserInfo.isSafari) {
            // This hack is required to fix GBC-1362. Safari doesn't display uppercased text if the value of the field hasn't changed
            // We force a temporary different value. This can be removed once this bug is fixed : https://bugs.webkit.org/show_bug.cgi?id=171050
            this._inputElement.value = value + ' ';
          }
          this._inputElement.value = value;
          this._elementState.backup(this._inputElement);
        },

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

        /**
         * Set the cursors
         * When cursor2 === cursor, it is a simple cursor set
         * @param {number} cursor - the selection range beginning (-1 for end)
         * @param {number=} [cursor2] - the selection range end, if any
         * @publicdoc
         */
        setCursors: function(cursor, cursor2) {
          if (!cursor2) {
            cursor2 = cursor;
          }

          if (cursor2 && cursor2 < 0) {
            cursor2 = this.getValue() && this.getValue().length || 0;
          }

          if (this.isInTable() && !this.isEnabled()) { // fix for GBC-1170
            cursor = cursor2 = 0;
          }

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

        /**
         * 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;
        },

        /**
         * Set field as a password (displays bullets instead of value)
         * @param {boolean} isPassword - true if the widget should be in 'password' mode, false otherwise
         * @publicdoc
         */
        setIsPassword: function(isPassword) {
          if (isPassword) {
            this._inputElement.setAttribute('type', 'password');
          } else {
            this._inputElement.setAttribute('type', this._inputType);
            this.setType(this._inputType);
          }
          this.toggleClass("gbc_isPassword", Boolean(isPassword));
        },

        /**
         * Check if field is set as password
         * @returns {boolean} true if the widget is in 'password' mode, false otherwise
         * @publicdoc
         */
        isPassword: function() {
          return this._inputElement.getAttribute('type') === 'password';
        },

        /**
         * Display or not the caps lock warning
         * @private
         */
        _updateCapsLockWarning: function() {
          if (this.isPassword()) {
            // Check if caps lock is on, and display accordingly
            if (!window.browserInfo.isSafari) { // Safari add this by itself
              this.removeClass("capsOn");
              if (window._capsLock) {
                this.addClass("capsOn");
              }
            }
          }
        },

        /**
         * Check if max length of the widget has been reached
         * @returns {boolean} return true if max length is reached in input element
         */
        _isMaxLength: function() {
          return this._maxLength !== -1 && this._inputElement.value.length >= this._maxLength &&
            this._inputElement.selectionStart === this._inputElement.selectionEnd;
        },

        /**
         * Used to manage the keyboardHint.
         * @param {string} valType the type attribute value to set
         * @publicdoc
         */
        setType: function(valType) {
          if (this._inputType !== valType) {
            this._inputType = valType;
            if (!this.isPassword()) {
              this._inputElement.setAttribute('type', valType);
              if (window.browserInfo.isFirefox) {
                // sad old browser patch
                this._inputElement.setAttribute('step', valType === 'number' ? 'any' : null);
              }
            }
          }
        },

        /**
         * Used to manage the keyboardHint.
         * @param {string} valType the inputmode attribute value to set
         * @publicdoc
         */
        setInputMode: function(valType) {
          if (this._inputMode !== valType) {
            this._inputMode = valType;
            this._inputElement.setAttribute('inputmode', valType);
          }
        },

        /**
         * Get the type of the field
         * @returns {string} this Edit current type
         * @publicdoc
         */
        getType: function() {
          return this._inputType;
        },

        /**
         * Sets the focus to the widget
         * @publicdoc
         */
        setFocus: function(fromMouse) {
          $super.setFocus.call(this, 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();
          this._updateCapsLockWarning();

          if (this.isFakePlaceholder() && this._title &&
            ((window.isMobile() && context.ThemeService.getValue("gbc-Edit-mobile-comment-to-placeholder") === '1') ||
              (!window.isMobile() && context.ThemeService.getValue("gbc-Edit-desktop-comment-to-placeholder") === '1'))) {
            this.setPlaceHolder(this._title, true);
          }
        },

        /**
         * @inheritDoc
         */
        setDialogType: function(dialogType) {
          var oldDialogType = this._dialogType;

          $super.setDialogType.call(this, dialogType);

          if (dialogType === 'Display' || dialogType === 'DisplayArray') {
            return;
          }

          this._canShowVirtualKeyboard = oldDialogType === this._dialogType;
        },

        /**
         * @inheritDoc
         */
        loseVMFocus: function(vmNewFocusedWidget = null) {
          $super.loseVMFocus.call(this, vmNewFocusedWidget);
          if (this.isFakePlaceholder()) {
            this.setPlaceHolder("", true);
          }
        },

        /**
         * @inheritDoc
         */
        loseFocus: function() {
          $super.loseFocus.call(this);
          if (this.isFakePlaceholder()) {
            this.setPlaceHolder("", true);
          }
          if (this._completerWidget) {
            this._completerWidget.loseFocus();
          }
        },

        /**
         * Check if the Edit Widget has a completer
         * @return {boolean} true if has a completer, false otherwise
         */
        hasCompleter: function() {
          return this.getCompleterWidget() !== null;
        },

        /**
         * Get the completer widget if any
         * @return {?classes.CompleterWidget} the completer widget, null if none
         * @publicdoc
         */
        getCompleterWidget: function() {
          return this._completerWidget;
        },

        /**
         * Will add a completer to the edit
         * @publicdoc
         */
        addCompleterWidget: function() {
          if (!this._completerWidget) {
            this._completerWidget = cls.WidgetFactory.createWidget('Completer', this.getBuildParameters());
            this._completerWidget.addCompleterWidget(this);
            this._completerCurrentChildrenChangeHandler = this._completerWidget.onCurrentChildrenChange(function(value) {
              this.setEditing(this._oldValue !== value);
              this.setValue(value);
            }.bind(this));
          }
        },

        /**
         * @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);
          if (this._textAlign) {
            this.setTextAlign(this._textAlign);
          }
        },

        /**
         * @inheritDoc
         */
        setTitle: function(title) {
          $super.setTitle.call(this, title);

          if (title === "") {
            this._inputElement.removeAttribute("aria-label");
            this._title = null;
          } else {
            this._inputElement.setAttribute("aria-label", title);
            this._title = title;
          }
        },

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

      };
    });
    cls.WidgetFactory.registerBuilder('Edit', cls.EditWidget);
    cls.WidgetFactory.registerBuilder('EditWidget', cls.EditWidget);
  });