Unlock 30% off on Manual Testing Annual Plans this Holiday Season.

Copied to Clipboard!

How to use getHelper method in Cypress

Best JavaScript code snippet using cypress

InspectorComponent.js

Source:InspectorComponent.js

...142     *143     * @param object144     * @return object145     */146    function getHelper(configuration) {147      if (getUtility().isUndefinedOrNull(configuration)) {148        return Helper.setConfiguration(_configuration);149      }150      return Helper.setConfiguration(configuration);151    };152    /**153     * @private154     *155     * @return object156     */157    function getUtility() {158      return getFormEditorApp().getUtility();159    };160    /**161     * @private162     *163     * @param mixed test164     * @param string message165     * @param int messageCode166     * @return void167     */168    function assert(test, message, messageCode) {169      return getFormEditorApp().assert(test, message, messageCode);170    };171    /**172     * @private173     *174     * @return object175     */176    function getCurrentlySelectedFormElement() {177      return getFormEditorApp().getCurrentlySelectedFormElement();178    };179    /**180     * @private181     *182     * @return object183     */184    function getRootFormElement() {185      return getFormEditorApp().getRootFormElement();186    };187    /**188     * @private189     *190     * @return object191     */192    function getPublisherSubscriber() {193      return getFormEditorApp().getPublisherSubscriber();194    };195    /**196     * @private197     *198     * @param object199     * @param string200     * @return mixed201     */202    function getFormElementDefinition(formElement, formElementDefinitionKey) {203      return getFormEditorApp().getFormElementDefinition(formElement, formElementDefinitionKey);204    };205    /**206     * @private207     *208     * @param object209     * @param object210     * @param string211     * @param string212     * @return void213     * @publish view/inspector/editor/insert/perform214     */215    function _renderEditorDispatcher(editorConfiguration, editorHtml, collectionElementIdentifier, collectionName) {216      switch (editorConfiguration['templateName']) {217        case 'Inspector-FormElementHeaderEditor':218          renderFormElementHeaderEditor(219            editorConfiguration,220            editorHtml,221            collectionElementIdentifier,222            collectionName223          );224          break;225        case 'Inspector-CollectionElementHeaderEditor':226          renderCollectionElementHeaderEditor(227            editorConfiguration,228            editorHtml,229            collectionElementIdentifier,230            collectionName231          );232          break;233        case 'Inspector-MaximumFileSizeEditor':234          renderMaximumFileSizeEditor(235            editorConfiguration,236            editorHtml237          );238          break;239        case 'Inspector-TextEditor':240          renderTextEditor(241            editorConfiguration,242            editorHtml,243            collectionElementIdentifier,244            collectionName245          );246          break;247        case 'Inspector-FinishersEditor':248          renderCollectionElementSelectionEditor(249            'finishers',250            editorConfiguration,251            editorHtml,252            collectionElementIdentifier,253            collectionName254          );255          break;256        case 'Inspector-ValidatorsEditor':257          renderCollectionElementSelectionEditor(258            'validators',259            editorConfiguration,260            editorHtml,261            collectionElementIdentifier,262            collectionName263          );264          break;265        case 'Inspector-ValidationErrorMessageEditor':266            renderValidationErrorMessageEditor(267                editorConfiguration,268                editorHtml,269                collectionElementIdentifier,270                collectionName271            );272            break;273        case 'Inspector-RemoveElementEditor':274          renderRemoveElementEditor(275            editorConfiguration,276            editorHtml,277            collectionElementIdentifier,278            collectionName279          );280          break;281        case 'Inspector-RequiredValidatorEditor':282          renderRequiredValidatorEditor(283            editorConfiguration,284            editorHtml,285            collectionElementIdentifier,286            collectionName287          );288          break;289        case 'Inspector-CheckboxEditor':290          renderCheckboxEditor(291            editorConfiguration,292            editorHtml,293            collectionElementIdentifier,294            collectionName295          );296          break;297        case 'Inspector-SingleSelectEditor':298          renderSingleSelectEditor(299            editorConfiguration,300            editorHtml,301            collectionElementIdentifier,302            collectionName303          );304          break;305        case 'Inspector-MultiSelectEditor':306          renderMultiSelectEditor(307            editorConfiguration,308            editorHtml,309            collectionElementIdentifier,310            collectionName311          );312          break;313        case 'Inspector-GridColumnViewPortConfigurationEditor':314          renderGridColumnViewPortConfigurationEditor(315            editorConfiguration,316            editorHtml,317            collectionElementIdentifier,318            collectionName319          );320          break;321        case 'Inspector-PropertyGridEditor':322          renderPropertyGridEditor(323            editorConfiguration,324            editorHtml,325            collectionElementIdentifier,326            collectionName327          );328          break;329        case 'Inspector-TextareaEditor':330          renderTextareaEditor(331            editorConfiguration,332            editorHtml,333            collectionElementIdentifier,334            collectionName335          );336          break;337        case 'Inspector-Typo3WinBrowserEditor':338          renderTypo3WinBrowserEditor(339            editorConfiguration,340            editorHtml,341            collectionElementIdentifier,342            collectionName343          );344          break;345      }346      getPublisherSubscriber().publish('view/inspector/editor/insert/perform', [347        editorConfiguration, editorHtml, collectionElementIdentifier, collectionName348      ]);349    };350    /**351     * @private352     *353     * opens a popup window with the element browser354     *355     * @param string mode356     * @param string params357     */358    function _openTypo3WinBrowser(mode, params) {359      Modal.advanced({360        type: Modal.types.iframe,361        content: TYPO3.settings.FormEditor.typo3WinBrowserUrl + '&mode=' + mode + '&bparams=' + params,362        size: Modal.sizes.large363      });364    };365    /**366     * @private367     *368     * Listens on messages sent by ElementBrowser369     */370    function _listenOnElementBrowser() {371      window.addEventListener('message', function (e) {372        if (!MessageUtility.MessageUtility.verifyOrigin(e.origin)) {373          throw 'Denied message sent by ' + e.origin;374        }375        if (e.data.actionName === 'typo3:elementBrowser:elementAdded') {376          if (typeof e.data.fieldName === 'undefined') {377            throw 'fieldName not defined in message';378          }379          if (typeof e.data.value === 'undefined') {380            throw 'value not defined in message';381          }382          var result = e.data.value.split('_');383          $(getHelper().getDomElementDataAttribute('contentElementSelectorTarget', 'bracesWithKeyValue', [e.data.fieldName]))384            .val(result.pop())385            .trigger('paste');386        }387      });388    }389    /**390     * @private391     *392     * @param string393     * @param string394     * @return object395     */396    function _getCollectionElementClass(collectionName, collectionElementIdentifier) {397      if (collectionName === 'finishers') {398        return getHelper()399          .getDomElementClassName('finisherEditorPrefix') + collectionElementIdentifier;400      } else {401        return getHelper()402          .getDomElementClassName('validatorEditorPrefix') + collectionElementIdentifier;403      }404    };405    /**406     * @private407     *408     * @param string409     * @param string410     * @param bool411     * @return object412     */413    function _getCollectionElementId(collectionName, collectionElementIdentifier, asSelector) {414      if (collectionName === 'finishers') {415        return getHelper()416          .getDomElementIdName('finisherPrefix', asSelector) + collectionElementIdentifier;417      } else {418        return getHelper()419          .getDomElementIdName('validatorPrefix', asSelector) + collectionElementIdentifier;420      }421    };422    /**423     * @private424     *425     * @param object426     * @param string427     * @return void428     */429    function _addSortableCollectionElementsEvents(sortableDomElement, collectionName) {430      sortableDomElement.addClass(getHelper().getDomElementClassName('sortable')).sortable({431        revert: 'true',432        items: getHelper().getDomElementClassName('collectionElement', true),433        cancel: getHelper().getDomElementClassName('jQueryUiStateDisabled', true) + ',input,textarea,select',434        delay: 200,435        update: function(e, o) {436          var dataAttributeName, nextCollectionElementIdentifier, movedCollectionElementIdentifier,437            previousCollectionElementIdentifier;438          if (collectionName === 'finishers') {439            dataAttributeName = getHelper().getDomElementDataAttribute('finisher');440          } else {441            dataAttributeName = getHelper().getDomElementDataAttribute('validator');442          }443          movedCollectionElementIdentifier = $(o.item).attr(dataAttributeName);444          previousCollectionElementIdentifier = $(o.item)445            .prevAll(getHelper().getDomElementClassName('collectionElement', true))446            .first()447            .attr(dataAttributeName);448          nextCollectionElementIdentifier = $(o.item)449            .nextAll(getHelper().getDomElementClassName('collectionElement', true))450            .first()451            .attr(dataAttributeName);452          getPublisherSubscriber().publish('view/inspector/collectionElements/dnd/update', [453            movedCollectionElementIdentifier,454            previousCollectionElementIdentifier,455            nextCollectionElementIdentifier,456            collectionName457          ]);458        }459      });460    };461    /**462     * @private463     *464     * @param object editorHtml465     * @param bool multiSelection466     * @param string propertyPath467     * @param string propertyPathPrefix468     * @return void469     */470    function _setPropertyGridData(editorHtml, multiSelection, propertyPath, propertyPathPrefix) {471      var defaultValue, newPropertyData, value;472      if (multiSelection) {473        defaultValue = [];474        $(getHelper().getDomElementDataIdentifierSelector('propertyGridEditorContainer') + ' ' +475          getHelper().getDomElementDataIdentifierSelector('propertyGridEditorSelectValue') + ':checked',476          $(editorHtml)477        ).each(function(i) {478          value = $(this)479            .closest(getHelper().getDomElementDataIdentifierSelector('propertyGridEditorRowItem'))480            .find(getHelper().getDomElementDataIdentifierSelector('propertyGridEditorValue'))481            .val();482          if (getUtility().canBeInterpretedAsInteger(value)) {483              value = parseInt(value, 10);484          }485          defaultValue.push(value);486        });487        getCurrentlySelectedFormElement().set(propertyPathPrefix + 'defaultValue', defaultValue);488      } else {489        value = $(490            getHelper().getDomElementDataIdentifierSelector('propertyGridEditorContainer') + ' ' +491            getHelper().getDomElementDataIdentifierSelector('propertyGridEditorSelectValue') + ':checked',492            $(editorHtml)493          ).first()494            .closest(getHelper().getDomElementDataIdentifierSelector('propertyGridEditorRowItem'))495            .find(getHelper().getDomElementDataIdentifierSelector('propertyGridEditorValue'))496            .val();497        if (getUtility().canBeInterpretedAsInteger(value)) {498            value = parseInt(value, 10);499        }500        getCurrentlySelectedFormElement().set(propertyPathPrefix + 'defaultValue', value, true);501      }502      newPropertyData = [];503      $(504        getHelper().getDomElementDataIdentifierSelector('propertyGridEditorContainer') + ' ' +505        getHelper().getDomElementDataIdentifierSelector('propertyGridEditorRowItem'),506        $(editorHtml)507      ).each(function(i) {508        var value, label, tmpObject;509        value = $(this)510          .find(getHelper().getDomElementDataIdentifierSelector('propertyGridEditorValue'))511          .val();512        label = $(this)513          .find(getHelper().getDomElementDataIdentifierSelector('propertyGridEditorLabel'))514          .val();515        if ('' === value) {516          value = label;517        }518        tmpObject = {};519        tmpObject[value] = label;520        newPropertyData.push({521          _label: label,522          _value: value523        });524      });525      getCurrentlySelectedFormElement().set(propertyPathPrefix + propertyPath, newPropertyData);526      _validateCollectionElement(propertyPathPrefix + propertyPath, editorHtml);527    };528    /**529     * @private530     *531     * @param object532     * @return object533     */534    function _getEditorWrapperDomElement(editorDomElement) {535      return $(getHelper().getDomElementDataIdentifierSelector('editorWrapper'), $(editorDomElement));536    };537    /**538     * @private539     *540     * @param object541     * @return object542     */543    function _getEditorControlsWrapperDomElement(editorDomElement) {544      return $(getHelper().getDomElementDataIdentifierSelector('editorControlsWrapper'), $(editorDomElement));545    };546    /**547     * @private548     *549     * @param string550     * @param object551     * @return void552     */553    function _validateCollectionElement(propertyPath, editorHtml) {554      var hasError, propertyPrefix, validationResults;555      validationResults = getFormEditorApp().validateCurrentlySelectedFormElementProperty(propertyPath);556      if (validationResults.length > 0) {557        getHelper()558          .getTemplatePropertyDomElement('validationErrors', editorHtml)559          .text(validationResults[0]);560        getViewModel().setElementValidationErrorClass(561          getHelper().getTemplatePropertyDomElement('validationErrors', editorHtml)562        );563        getViewModel().setElementValidationErrorClass(564          _getEditorControlsWrapperDomElement(editorHtml),565          'hasError'566        );567      } else {568        getHelper().getTemplatePropertyDomElement('validationErrors', editorHtml).text('');569        getViewModel().removeElementValidationErrorClass(570          getHelper().getTemplatePropertyDomElement('validationErrors', editorHtml)571        );572        getViewModel().removeElementValidationErrorClass(573          _getEditorControlsWrapperDomElement(editorHtml),574          'hasError'575        );576      }577      validationResults = getFormEditorApp().validateFormElement(getCurrentlySelectedFormElement());578      propertyPrefix = propertyPath.split('.');579      propertyPrefix = propertyPrefix[0] + '.' + propertyPrefix[1];580      hasError = false;581      for (var i = 0, len = validationResults.length; i < len; ++i) {582        if (583          validationResults[i]['propertyPath'].indexOf(propertyPrefix, 0) === 0584          && validationResults[i]['validationResults']585          && validationResults[i]['validationResults'].length > 0586        ) {587          hasError = true;588          break;589        }590      }591      if (hasError) {592        getViewModel().setElementValidationErrorClass(593          _getEditorControlsWrapperDomElement(editorHtml).closest(getHelper().getDomElementClassName('collectionElement', true))594        );595      } else {596        getViewModel().removeElementValidationErrorClass(597          _getEditorControlsWrapperDomElement(editorHtml).closest(getHelper().getDomElementClassName('collectionElement', true))598        );599      }600    };601    /**602     * @private603     *604     * @param object605     * @param object606     * @return null|string607     * @throws 1489932939608     * @throws 1489932940609     */610    function _getFirstAvailableValidationErrorMessage(errorCodes, propertyData) {611      assert(612        'array' === $.type(errorCodes),613        'Invalid configuration "errorCodes"',614        1489932939615      );616      assert(617        'array' === $.type(propertyData),618        'Invalid configuration "propertyData"',619        1489932940620      );621      for (var i = 0, len1 = errorCodes.length; i < len1; ++i) {622        for (var j = 0, len2 = propertyData.length; j < len2; ++j) {623          if (parseInt(errorCodes[i]) === parseInt(propertyData[j]['code'])) {624            if (getUtility().isNonEmptyString(propertyData[j]['message'])) {625              return propertyData[j]['message'];626            }627          }628        }629      }630      return null;631    };632    /**633     * @private634     *635     * @param object636     * @param object637     * @param string638     * @return object639     * @throws 1489932942640     */641    function _renewValidationErrorMessages(errorCodes, propertyData, value) {642      var errorCodeSubset;643      assert(644        'array' === $.type(propertyData),645        'Invalid configuration "propertyData"',646        1489932942647      );648      if (649        !getUtility().isUndefinedOrNull(errorCodes)650        && 'array' === $.type(errorCodes)651      ) {652        errorCodeSubset = [];653        for (var i = 0, len1 = errorCodes.length; i < len1; ++i) {654          var errorCodeFound = false;655          for (var j = 0, len2 = propertyData.length; j < len2; ++j) {656            if (parseInt(errorCodes[i]) === parseInt(propertyData[j]['code'])) {657              errorCodeFound = true;658              if (getUtility().isNonEmptyString(value)) {659                // error code exists and should be updated because message is not empty660                propertyData[j]['message'] = value;661              } else {662                // error code exists but should be removed because message is empty663                propertyData.splice(j, 1);664                --len2;665              }666            }667          }668          if (!errorCodeFound) {669            // add new codes because message is not empty670            if (getUtility().isNonEmptyString(value)) {671              errorCodeSubset.push({672                code: errorCodes[i],673                message: value674              });675            }676          }677        }678        propertyData = propertyData.concat(errorCodeSubset);679      }680      return propertyData;681    };682    /**683     * @private684     *685     * @param object686     * @throws 1523904699687     */688    function _setRandomIds(html) {689      assert(690        'object' === $.type(html),691        'Invalid input "html"',692        1523904699693      );694      $(getHelper().getDomElementClassName('inspectorEditor', true)).each(function(e) {695        var $parent = $(this),696            idReplacements = {};697        $(getHelper().getDomElementDataAttribute('randomId', 'bracesWithKey'), $parent).each(function(e) {698            var $element = $(this),699                targetAttribute = $element.attr(getHelper().getDomElementDataAttribute('randomIdTarget')),700                randomIdIndex = $element.attr(getHelper().getDomElementDataAttribute('randomIdIndex'));701            if ($element.is('[' + targetAttribute + ']')) {702                return true;703            }704            if (!idReplacements.hasOwnProperty(randomIdIndex)) {705              idReplacements[randomIdIndex] = 'fe' + Math.floor(Math.random() * 42) + Date.now();706            }707            $element.attr(targetAttribute, idReplacements[randomIdIndex]);708        });709      });710    };711    /* *************************************************************712     * Public Methods713     * ************************************************************/714    /**715     * @public716     *717     * @return object718     */719    function getInspectorDomElement() {720      return $(getHelper().getDomElementDataIdentifierSelector('inspector'));721    };722    /**723     * @public724     *725     * @return object726     */727    function getFinishersContainerDomElement() {728      return $(getHelper().getDomElementDataIdentifierSelector('inspectorFinishers'), getInspectorDomElement());729    };730    /**731     * @public732     *733     * @return object734     */735    function getValidatorsContainerDomElement() {736      return $(getHelper().getDomElementDataIdentifierSelector('inspectorValidators'), getInspectorDomElement());737    };738    /**739     * @public740     *741     * @param string742     * @param string743     * @return object744     */745    function getCollectionElementDomElement(collectionName, collectionElementIdentifier) {746      if (collectionName === 'finishers') {747        return $(getHelper().getDomElementDataAttribute(748          'finisher',749          'bracesWithKeyValue',750          [collectionElementIdentifier]751        ), getFinishersContainerDomElement());752      } else {753        return $(getHelper().getDomElementDataAttribute(754          'validator',755          'bracesWithKeyValue',756          [collectionElementIdentifier]757        ), getValidatorsContainerDomElement());758      }759    };760    /**761     * @public762     *763     * @param object764     * @param function765     * @return void766     */767    function renderEditors(formElement, callback) {768      var formElementTypeDefinition;769      if (getUtility().isUndefinedOrNull(formElement)) {770        formElement = getCurrentlySelectedFormElement();771      }772      getInspectorDomElement().off().empty();773      formElementTypeDefinition = getFormElementDefinition(formElement);774      if ('array' !== $.type(formElementTypeDefinition['editors'])) {775        return;776      }777      for (var i = 0, len = formElementTypeDefinition['editors'].length; i < len; ++i) {778        var html, template;779        template = getHelper()780          .getTemplate(formElementTypeDefinition['editors'][i]['templateName'])781          .clone();782        if (!template.length) {783          continue;784        }785        html = $(template.html());786        $(html)787          .first()788          .addClass(getHelper().getDomElementClassName('inspectorEditor'));789        getInspectorDomElement().append($(html));790        _setRandomIds(html);791        _renderEditorDispatcher(formElementTypeDefinition['editors'][i], html);792      }793      if ('function' === $.type(callback)) {794        callback();795      }796    };797    /**798     * @public799     *800     * @param string collectionName801     * @param string collectionElementIdentifier802     * @return void803     * @publish view/inspector/collectionElements/dnd/update804     * @throws 1478354853805     * @throws 1478354854806     */807    function renderCollectionElementEditors(collectionName, collectionElementIdentifier) {808      var collapseWrapper, collectionContainer, collectionContainerElementWrapper,809        collectionElementConfiguration, collectionElementEditorsLength;810      assert(811        getUtility().isNonEmptyString(collectionName),812        'Invalid parameter "collectionName"',813        1478354853814      );815      assert(816        getUtility().isNonEmptyString(collectionElementIdentifier),817        'Invalid parameter "collectionElementIdentifier"',818        1478354854819      );820      collectionElementConfiguration = getFormEditorApp().getPropertyCollectionElementConfiguration(821        collectionElementIdentifier,822        collectionName823      );824      if ('array' !== $.type(collectionElementConfiguration['editors'])) {825        return;826      }827      collectionContainerElementWrapper = $('<div></div>').addClass(getHelper().getDomElementClassName('collectionElement'));828      if (collectionName === 'finishers') {829        collectionContainer = getFinishersContainerDomElement();830        collectionContainerElementWrapper831          .attr(getHelper().getDomElementDataAttribute('finisher'), collectionElementIdentifier);832      } else {833        collectionContainer = getValidatorsContainerDomElement();834        collectionContainerElementWrapper835          .attr(getHelper().getDomElementDataAttribute('validator'), collectionElementIdentifier);836      }837      collectionContainer.append(collectionContainerElementWrapper);838      collectionElementEditorsLength = collectionElementConfiguration['editors'].length;839      if (840        collectionElementEditorsLength > 0841        && collectionElementConfiguration['editors'][0]['identifier'] === 'header'842      ) {843        collapseWrapper = $('<div role="tabpanel"></div>')844          .addClass('panel-collapse collapse')845          .prop('id', _getCollectionElementId(846            collectionName,847            collectionElementIdentifier848          ));849      }850      for (var i = 0; i < collectionElementEditorsLength; ++i) {851        var html, template;852        template = getHelper()853          .getTemplate(collectionElementConfiguration['editors'][i]['templateName'])854          .clone();855        if (!template.length) {856          continue;857        }858        html = $(template.html());859        $(html).first()860          .addClass(_getCollectionElementClass(861            collectionName,862            collectionElementConfiguration['editors'][i]['identifier']863          ))864          .addClass(getHelper().getDomElementClassName('inspectorEditor'));865        if (i === 0 && collapseWrapper) {866          getCollectionElementDomElement(collectionName, collectionElementIdentifier)867            .append(html)868            .append(collapseWrapper);869        } else if (870          i === (collectionElementEditorsLength - 1)871          && collapseWrapper872          && collectionElementConfiguration['editors'][i]['identifier'] === 'removeButton'873        ) {874          getCollectionElementDomElement(collectionName, collectionElementIdentifier).append(html);875        } else if (i > 0 && collapseWrapper) {876          collapseWrapper.append(html);877        } else {878          getCollectionElementDomElement(collectionName, collectionElementIdentifier).append(html);879        }880        _setRandomIds(html);881        _renderEditorDispatcher(882          collectionElementConfiguration['editors'][i],883          html,884          collectionElementIdentifier,885          collectionName886        );887      }888      if (889        (890          collectionElementEditorsLength === 2891          && collectionElementConfiguration['editors'][0]['identifier'] === 'header'892          && collectionElementConfiguration['editors'][1]['identifier'] === 'removeButton'893        ) || (894          collectionElementEditorsLength === 1895          && collectionElementConfiguration['editors'][0]['identifier'] === 'header'896        )897      ) {898        $(getHelper().getDomElementDataIdentifierSelector('collapse'), collectionContainerElementWrapper).remove();899      }900      if (_configuration['isSortable']) {901        _addSortableCollectionElementsEvents(collectionContainer, collectionName);902      }903    };904    /**905     * @public906     *907     * @string collectionName908     * @param object editorConfiguration909     * @param object editorHtml910     * @return void911     * @publish view/inspector/collectionElement/existing/selected912     * @publish view/inspector/collectionElement/new/selected913     * @throws 1475423098914     * @throws 1475423099915     * @throws 1475423100916     * @throws 1475423101917     * @throws 1478362968918     */919    function renderCollectionElementSelectionEditor(collectionName, editorConfiguration, editorHtml) {920      var alreadySelectedCollectionElements, selectElement, collectionContainer,921        removeSelectElement;922      assert(923        getUtility().isNonEmptyString(collectionName),924        'Invalid configuration "collectionName"',925        1478362968926      );927      assert(928        'object' === $.type(editorConfiguration),929        'Invalid parameter "editorConfiguration"',930        1475423098931      );932      assert(933        'object' === $.type(editorHtml),934        'Invalid parameter "editorHtml"',935        1475423099936      );937      assert(938        getUtility().isNonEmptyString(editorConfiguration['label']),939        'Invalid configuration "label"',940        1475423100941      );942      assert(943        'array' === $.type(editorConfiguration['selectOptions']),944        'Invalid configuration "selectOptions"',945        1475423101946      );947      if (collectionName === 'finishers') {948        collectionContainer = getFinishersContainerDomElement();949        alreadySelectedCollectionElements = getRootFormElement().get(collectionName);950      } else {951        collectionContainer = getValidatorsContainerDomElement();952        alreadySelectedCollectionElements = getCurrentlySelectedFormElement().get(collectionName);953      }954      collectionContainer.off().empty();955      getHelper().getTemplatePropertyDomElement('label', editorHtml).text(editorConfiguration['label']);956      selectElement = getHelper().getTemplatePropertyDomElement('selectOptions', editorHtml);957      if (!getUtility().isUndefinedOrNull(alreadySelectedCollectionElements)) {958        for (var i = 0, len = alreadySelectedCollectionElements.length; i < len; ++i) {959          getPublisherSubscriber().publish('view/inspector/collectionElement/existing/selected', [960            alreadySelectedCollectionElements[i]['identifier'],961            collectionName962          ]);963        }964      }965      removeSelectElement = true;966      for (var i = 0, len1 = editorConfiguration['selectOptions'].length; i < len1; ++i) {967        var appendOption = true;968        if (!getUtility().isUndefinedOrNull(alreadySelectedCollectionElements)) {969          for (var j = 0, len2 = alreadySelectedCollectionElements.length; j < len2; ++j) {970            if (alreadySelectedCollectionElements[j]['identifier'] === editorConfiguration['selectOptions'][i]['value']) {971              appendOption = false;972              break;973            }974          }975        }976        if (appendOption) {977          selectElement.append(new Option(978            editorConfiguration['selectOptions'][i]['label'],979            editorConfiguration['selectOptions'][i]['value']980          ));981          if (editorConfiguration['selectOptions'][i]['value'] !== '') {982            removeSelectElement = false;983          }984        }985      }986      if (removeSelectElement) {987        selectElement.off().empty().remove();988      }989      selectElement.on('change', function() {990        if ($(this).val() !== '') {991          var value = $(this).val();992          $('option[value="' + value + '"]', $(this)).remove();993          getFormEditorApp().getPublisherSubscriber().publish(994            'view/inspector/collectionElement/new/selected',995            [value, collectionName]996          );997        }998      });999    };1000    /**1001     * @public1002     *1003     * @param object editorConfiguration1004     * @param object editorHtml1005     * @param string collectionElementIdentifier1006     * @param string collectionName1007     * @return void1008     * @throws 14754215251009     * @throws 14754215261010     * @throws 14754215271011     * @throws 14754215281012     */1013    function renderFormElementHeaderEditor(editorConfiguration, editorHtml, collectionElementIdentifier, collectionName) {1014      assert('object' === $.type(editorConfiguration), 'Invalid parameter "editorConfiguration"', 1475421525);1015      assert('object' === $.type(editorHtml), 'Invalid parameter "editorHtml"', 1475421526);1016      Icons.getIcon(1017        getFormElementDefinition(getCurrentlySelectedFormElement(), 'iconIdentifier'),1018        Icons.sizes.small,1019        null,1020        Icons.states.default1021      ).then(function(icon) {1022        getHelper().getTemplatePropertyDomElement('header-label', editorHtml)1023          .append($(icon).addClass(getHelper().getDomElementClassName('icon')))1024          .append(buildTitleByFormElement());1025      });1026    };1027    /**1028     * @public1029     *1030     * @param object editorConfiguration1031     * @param object editorHtml1032     * @param string collectionElementIdentifier1033     * @param string collectionName1034     * @return void1035     * @throws 14754212571036     * @throws 14754212581037     * @throws 14754212591038     */1039    function renderCollectionElementHeaderEditor(editorConfiguration, editorHtml, collectionElementIdentifier, collectionName) {1040      var collectionElementConfiguration, setData;1041      assert(1042        'object' === $.type(editorConfiguration),1043        'Invalid parameter "editorConfiguration"',1044        14754212581045      );1046      assert(1047        getUtility().isNonEmptyString(editorConfiguration['label']),1048        'Invalid configuration "label"',1049        14754212571050      );1051      assert(1052        'object' === $.type(editorHtml),1053        'Invalid parameter "editorHtml"',1054        14754212591055      );1056      setData = function(icon) {1057        getHelper()1058          .getTemplatePropertyDomElement('header-label', editorHtml)1059          .prepend($(icon));1060        Icons.getIcon(1061          getHelper().getDomElementDataAttributeValue('collapse'),1062          Icons.sizes.small,1063          null,1064          Icons.states.default,1065          Icons.markupIdentifiers.inline1066        ).then(function(icon) {1067          var iconWrap;1068          iconWrap = $('<a></a>')1069            .attr('href', _getCollectionElementId(collectionName, collectionElementIdentifier, true))1070            .attr('data-toggle', 'collapse')1071            .attr('aria-expanded', 'true')1072            .attr('aria-controls', _getCollectionElementId(collectionName, collectionElementIdentifier))1073            .addClass('collapsed')1074            .append($(icon));1075          getHelper()1076            .getTemplatePropertyDomElement('header-label', editorHtml)1077            .prepend(iconWrap);1078        });1079      };1080      collectionElementConfiguration = getFormEditorApp().getFormEditorDefinition(collectionName, collectionElementIdentifier);1081      if (collectionName === 'validators') {1082        Icons.getIcon(1083          collectionElementConfiguration['iconIdentifier'],1084          Icons.sizes.small,1085          null,1086          Icons.states.default1087        ).then(function(icon) {1088          setData(icon);1089        });1090      } else {1091        Icons.getIcon(1092          collectionElementConfiguration['iconIdentifier'],1093          Icons.sizes.small,1094          null,1095          Icons.states.default1096        ).then(function(icon) {1097          setData(icon);1098        });1099      }1100      if (editorConfiguration['label']) {1101        getHelper().getTemplatePropertyDomElement('label', editorHtml).append(editorConfiguration['label']);1102      }1103    };1104    function renderMaximumFileSizeEditor(editorConfiguration, editorHtml) {1105      assert(1106        'object' === $.type(editorConfiguration),1107        'Invalid parameter "editorConfiguration"',1108        14754212581109      );1110      assert(1111        getUtility().isNonEmptyString(editorConfiguration['label']),1112        'Invalid configuration "label"',1113        14754212571114      );1115      assert(1116        'object' === $.type(editorHtml),1117        'Invalid parameter "editorHtml"',1118        14754212591119      );1120      if (editorConfiguration['label']) {1121        var element = getHelper().getTemplatePropertyDomElement('label', editorHtml);1122        var maximumFileSize = element.attr(getHelper().getDomElementDataAttribute('maximumFileSize'));1123        element.append(editorConfiguration['label'].replace('{0}', maximumFileSize));1124      }1125    };1126    /**1127     * @public1128     *1129     * @param object editorConfiguration1130     * @param object editorHtml1131     * @param string collectionElementIdentifier1132     * @param string collectionName1133     * @return void1134     * @throws 14754210531135     * @throws 14754210541136     * @throws 14754210551137     * @throws 14754210561138     */1139    function renderTextEditor(editorConfiguration, editorHtml, collectionElementIdentifier, collectionName) {1140      var propertyData, propertyPath;1141      assert(1142        'object' === $.type(editorConfiguration),1143        'Invalid parameter "editorConfiguration"',1144        14754210531145      );1146      assert(1147        'object' === $.type(editorHtml),1148        'Invalid parameter "editorHtml"',1149        14754210541150      );1151      assert(1152        getUtility().isNonEmptyString(editorConfiguration['label']),1153        'Invalid configuration "label"',1154        14754210551155      );1156      assert(1157        getUtility().isNonEmptyString(editorConfiguration['propertyPath']),1158        'Invalid configuration "propertyPath"',1159        14754210561160      );1161      getHelper()1162        .getTemplatePropertyDomElement('label', editorHtml)1163        .append(editorConfiguration['label']);1164      if (getUtility().isNonEmptyString(editorConfiguration['fieldExplanationText'])) {1165        getHelper()1166          .getTemplatePropertyDomElement('fieldExplanationText', editorHtml)1167          .text(editorConfiguration['fieldExplanationText']);1168      } else {1169        getHelper()1170          .getTemplatePropertyDomElement('fieldExplanationText', editorHtml)1171          .remove();1172      }1173      if (getUtility().isNonEmptyString(editorConfiguration['placeholder'])) {1174        getHelper()1175          .getTemplatePropertyDomElement('propertyPath', editorHtml)1176          .attr('placeholder', editorConfiguration['placeholder']);1177      }1178      propertyPath = getFormEditorApp().buildPropertyPath(1179        editorConfiguration['propertyPath'],1180        collectionElementIdentifier,1181        collectionName1182      );1183      propertyData = getCurrentlySelectedFormElement().get(propertyPath);1184      _validateCollectionElement(propertyPath, editorHtml);1185      getHelper().getTemplatePropertyDomElement('propertyPath', editorHtml).val(propertyData);1186      renderFormElementSelectorEditorAddition(editorConfiguration, editorHtml, propertyPath);1187      getHelper().getTemplatePropertyDomElement('propertyPath', editorHtml).on('keyup paste', function() {1188        if (1189          !!editorConfiguration['doNotSetIfPropertyValueIsEmpty']1190          && !getUtility().isNonEmptyString($(this).val())1191        ) {1192          getCurrentlySelectedFormElement().unset(propertyPath);1193        } else {1194          getCurrentlySelectedFormElement().set(propertyPath, $(this).val());1195        }1196        _validateCollectionElement(propertyPath, editorHtml);1197        if (1198          !getUtility().isUndefinedOrNull(editorConfiguration['additionalElementPropertyPaths'])1199          && 'array' === $.type(editorConfiguration['additionalElementPropertyPaths'])1200        ) {1201          for (var i = 0, len = editorConfiguration['additionalElementPropertyPaths'].length; i < len; ++i) {1202            if (1203              !!editorConfiguration['doNotSetIfPropertyValueIsEmpty']1204              && !getUtility().isNonEmptyString($(this).val())1205            ) {1206              getCurrentlySelectedFormElement().unset(editorConfiguration['additionalElementPropertyPaths'][i]);1207            } else {1208              getCurrentlySelectedFormElement().set(editorConfiguration['additionalElementPropertyPaths'][i], $(this).val());1209            }1210          }1211        }1212      });1213    };1214    /**1215     * @public1216     *1217     * @param object editorConfiguration1218     * @param object editorHtml1219     * @param string collectionElementIdentifier1220     * @param string collectionName1221     * @return void1222     * @throws 14898741201223     * @throws 14898741211224     * @throws 14898741221225     * @throws 14898741231226     */1227    function renderValidationErrorMessageEditor(editorConfiguration, editorHtml, collectionElementIdentifier, collectionName) {1228      var propertyData, propertyPath, validationErrorMessage;1229      assert(1230        'object' === $.type(editorConfiguration),1231        'Invalid parameter "editorConfiguration"',1232        14898741211233      );1234      assert(1235       'object' === $.type(editorHtml),1236       'Invalid parameter "editorHtml"',1237       14898741221238      );1239      assert(1240        getUtility().isNonEmptyString(editorConfiguration['label']),1241        'Invalid configuration "label"',1242        14898741231243      );1244      assert(1245        getUtility().isNonEmptyString(editorConfiguration['propertyPath']),1246        'Invalid configuration "propertyPath"',1247        14898741241248      );1249      getHelper()1250        .getTemplatePropertyDomElement('label', editorHtml)1251        .append(editorConfiguration['label']);1252      if (getUtility().isNonEmptyString(editorConfiguration['fieldExplanationText'])) {1253        getHelper()1254          .getTemplatePropertyDomElement('fieldExplanationText', editorHtml)1255          .text(editorConfiguration['fieldExplanationText']);1256      } else {1257        getHelper()1258          .getTemplatePropertyDomElement('fieldExplanationText', editorHtml)1259          .remove();1260      }1261      propertyPath = getFormEditorApp().buildPropertyPath(1262        editorConfiguration['propertyPath']1263      );1264      propertyData = getCurrentlySelectedFormElement().get(propertyPath);1265      if (1266        !getUtility().isUndefinedOrNull(propertyData)1267        && 'array' === $.type(propertyData)1268      ) {1269        validationErrorMessage = _getFirstAvailableValidationErrorMessage(editorConfiguration['errorCodes'], propertyData);1270        if (!getUtility().isUndefinedOrNull(validationErrorMessage)) {1271          getHelper().getTemplatePropertyDomElement('propertyPath', editorHtml).val(validationErrorMessage);1272        }1273      }1274      getHelper().getTemplatePropertyDomElement('propertyPath', editorHtml).on('keyup paste', function() {1275        propertyData = getCurrentlySelectedFormElement().get(propertyPath);1276        if (getUtility().isUndefinedOrNull(propertyData)) {1277          propertyData = [];1278        }1279        getCurrentlySelectedFormElement().set(propertyPath, _renewValidationErrorMessages(1280          editorConfiguration['errorCodes'],1281          propertyData,1282          $(this).val()1283        ));1284      });1285    };1286    /**1287     * @public1288     *1289     * @param object editorConfiguration1290     * @param object editorHtml1291     * @param string collectionElementIdentifier1292     * @param string collectionName1293     * @return void1294     * @throws 14754210481295     * @throws 14754210491296     * @throws 14754210501297     * @throws 14754210511298     * @throws 14754210521299     */1300    function renderSingleSelectEditor(editorConfiguration, editorHtml, collectionElementIdentifier, collectionName) {1301      var propertyData, propertyPath, selectElement;1302      assert(1303        'object' === $.type(editorConfiguration),1304        'Invalid parameter "editorConfiguration"',1305        14754210481306      );1307      assert(1308        'object' === $.type(editorHtml),1309        'Invalid parameter "editorHtml"',1310        14754210491311      );1312      assert(1313        getUtility().isNonEmptyString(editorConfiguration['label']),1314        'Invalid configuration "label"',1315        14754210501316      );1317      assert(1318        getUtility().isNonEmptyString(editorConfiguration['propertyPath']),1319        'Invalid configuration "propertyPath"',1320        14754210511321      );1322      assert(1323        'array' === $.type(editorConfiguration['selectOptions']),1324        'Invalid configuration "selectOptions"',1325        14754210521326      );1327      propertyPath = getFormEditorApp().buildPropertyPath(1328        editorConfiguration['propertyPath'],1329        collectionElementIdentifier,1330        collectionName1331      );1332      getHelper()1333        .getTemplatePropertyDomElement('label', editorHtml)1334        .append(editorConfiguration['label']);1335      selectElement = getHelper()1336        .getTemplatePropertyDomElement('selectOptions', editorHtml);1337      propertyData = getCurrentlySelectedFormElement().get(propertyPath);1338      for (var i = 0, len = editorConfiguration['selectOptions'].length; i < len; ++i) {1339        var option;1340        if (editorConfiguration['selectOptions'][i]['value'] === propertyData) {1341          option = new Option(editorConfiguration['selectOptions'][i]['label'], i, false, true);1342        } else {1343          option = new Option(editorConfiguration['selectOptions'][i]['label'], i);1344        }1345        $(option).data({value: editorConfiguration['selectOptions'][i]['value']});1346        selectElement.append(option);1347      }1348      selectElement.on('change', function() {1349        getCurrentlySelectedFormElement().set(propertyPath, $('option:selected', $(this)).data('value'));1350      });1351    };1352    /**1353     * @public1354     *1355     * @param object editorConfiguration1356     * @param object editorHtml1357     * @param string collectionElementIdentifier1358     * @param string collectionName1359     * @return void1360     * @throws 14857123991361     * @throws 14857124001362     * @throws 14857124011363     * @throws 14857124021364     * @throws 14857124031365     */1366    function renderMultiSelectEditor(editorConfiguration, editorHtml, collectionElementIdentifier, collectionName) {1367      var propertyData, propertyPath, selectElement;1368      assert(1369        'object' === $.type(editorConfiguration),1370        'Invalid parameter "editorConfiguration"',1371        14857123991372      );1373      assert(1374        'object' === $.type(editorHtml),1375        'Invalid parameter "editorHtml"',1376        14857124001377      );1378      assert(1379        getUtility().isNonEmptyString(editorConfiguration['label']),1380        'Invalid configuration "label"',1381        14857124011382      );1383      assert(1384        getUtility().isNonEmptyString(editorConfiguration['propertyPath']),1385        'Invalid configuration "propertyPath"',1386        14857124021387      );1388      assert(1389        'array' === $.type(editorConfiguration['selectOptions']),1390        'Invalid configuration "selectOptions"',1391        14857124031392      );1393      propertyPath = getFormEditorApp().buildPropertyPath(1394        editorConfiguration['propertyPath'],1395        collectionElementIdentifier,1396        collectionName1397      );1398      getHelper()1399        .getTemplatePropertyDomElement('label', editorHtml)1400        .append(editorConfiguration['label']);1401      selectElement = getHelper()1402        .getTemplatePropertyDomElement('selectOptions', editorHtml);1403      propertyData = getCurrentlySelectedFormElement().get(propertyPath);1404      for (var i = 0, len1 = editorConfiguration['selectOptions'].length; i < len1; ++i) {1405        var option, value;1406        option = null;1407        for (var propertyDataKey in propertyData) {1408          if (!propertyData.hasOwnProperty(propertyDataKey)) {1409            continue;1410          }1411          if (editorConfiguration['selectOptions'][i]['value'] === propertyData[propertyDataKey]) {1412            option = new Option(editorConfiguration['selectOptions'][i]['label'], i, false, true);1413            break;1414          }1415        }1416        if (!option) {1417          option = new Option(editorConfiguration['selectOptions'][i]['label'], i);1418        }1419        $(option).data({value: editorConfiguration['selectOptions'][i]['value']});1420        selectElement.append(option);1421      }1422      selectElement.on('change', function() {1423        var selectValues = [];1424        $('option:selected', $(this)).each(function(i) {1425          selectValues.push($(this).data('value'));1426        });1427        getCurrentlySelectedFormElement().set(propertyPath, selectValues);1428      });1429    };1430    /**1431     * @public1432     *1433     * @param object editorConfiguration1434     * @param object editorHtml1435     * @param string collectionElementIdentifier1436     * @param string collectionName1437     * @return void1438     * @throws 14895282421439     * @throws 14895282431440     * @throws 14895282441441     * @throws 14895282451442     * @throws 14895282461443     * @throws 14895282471444     */1445    function renderGridColumnViewPortConfigurationEditor(editorConfiguration, editorHtml, collectionElementIdentifier, collectionName) {1446      var editorControlsWrapper, initNumbersOfColumnsField, numbersOfColumnsTemplate, selectElement,1447        viewportButtonTemplate;1448      assert(1449        'object' === $.type(editorConfiguration),1450        'Invalid parameter "editorConfiguration"',1451        14895282421452      );1453      assert(1454        'object' === $.type(editorHtml),1455        'Invalid parameter "editorHtml"',1456        14895282431457      );1458      assert(1459        getUtility().isNonEmptyString(editorConfiguration['label']),1460        'Invalid configuration "label"',1461        14895282441462      );1463      assert(1464        'array' === $.type(editorConfiguration['configurationOptions']['viewPorts']),1465        'Invalid configurationOptions "viewPorts"',1466        14895282451467      );1468      assert(1469        !getUtility().isUndefinedOrNull(editorConfiguration['configurationOptions']['numbersOfColumnsToUse']['label']),1470        'Invalid configurationOptions "numbersOfColumnsToUse"',1471        14895282461472      );1473      assert(1474        !getUtility().isUndefinedOrNull(editorConfiguration['configurationOptions']['numbersOfColumnsToUse']['propertyPath']),1475        'Invalid configuration "selectOptions"',1476        14895282471477      );1478      if (!getFormElementDefinition(getCurrentlySelectedFormElement().get('__parentRenderable'), '_isGridRowFormElement')) {1479        editorHtml.remove();1480        return;1481      }1482      getHelper()1483        .getTemplatePropertyDomElement('label', editorHtml)1484        .append(editorConfiguration['label']);1485      viewportButtonTemplate = $(getHelper()1486        .getDomElementDataIdentifierSelector('viewportButton'), $(editorHtml))1487        .clone();1488      $(getHelper()1489        .getDomElementDataIdentifierSelector('viewportButton'), $(editorHtml))1490        .remove();1491      numbersOfColumnsTemplate = getHelper()1492        .getTemplatePropertyDomElement('numbersOfColumnsToUse', $(editorHtml))1493        .clone();1494      getHelper()1495        .getTemplatePropertyDomElement('numbersOfColumnsToUse', $(editorHtml))1496        .remove();1497      editorControlsWrapper = _getEditorControlsWrapperDomElement(editorHtml);1498      initNumbersOfColumnsField = function(element) {1499        var numbersOfColumnsTemplateClone, propertyPath;1500        getHelper().getTemplatePropertyDomElement('numbersOfColumnsToUse', $(editorHtml))1501          .off()1502          .empty()1503          .remove();1504        numbersOfColumnsTemplateClone = $(numbersOfColumnsTemplate).clone(true, true);1505        _getEditorWrapperDomElement(editorHtml).after(numbersOfColumnsTemplateClone);1506        $('input', numbersOfColumnsTemplateClone).focus();1507        getHelper()1508          .getTemplatePropertyDomElement('numbersOfColumnsToUse-label', numbersOfColumnsTemplateClone)1509          .append(1510            editorConfiguration['configurationOptions']['numbersOfColumnsToUse']['label']1511              .replace('{@viewPortLabel}', element.data('viewPortLabel'))1512          );1513        getHelper()1514          .getTemplatePropertyDomElement('numbersOfColumnsToUse-fieldExplanationText', numbersOfColumnsTemplateClone)1515          .append(editorConfiguration['configurationOptions']['numbersOfColumnsToUse']['fieldExplanationText']);1516        propertyPath = editorConfiguration['configurationOptions']['numbersOfColumnsToUse']['propertyPath']1517          .replace('{@viewPortIdentifier}', element.data('viewPortIdentifier'));1518        getHelper()1519          .getTemplatePropertyDomElement('numbersOfColumnsToUse-propertyPath', numbersOfColumnsTemplateClone)1520          .val(getCurrentlySelectedFormElement().get(propertyPath));1521        getHelper().getTemplatePropertyDomElement('numbersOfColumnsToUse-propertyPath', numbersOfColumnsTemplateClone).on('keyup paste change', function() {1522          var that = $(this);1523          if (!$.isNumeric(that.val())) {1524            that.val('');1525          }1526          getCurrentlySelectedFormElement().set(propertyPath, that.val());1527        });1528      };1529      for (var i = 0, len = editorConfiguration['configurationOptions']['viewPorts'].length; i < len; ++i) {1530        var numbersOfColumnsTemplateClone, viewportButtonTemplateClone, viewPortIdentifier,1531          viewPortLabel;1532        viewPortIdentifier = editorConfiguration['configurationOptions']['viewPorts'][i]['viewPortIdentifier'];1533        viewPortLabel = editorConfiguration['configurationOptions']['viewPorts'][i]['label'];1534        viewportButtonTemplateClone = $(viewportButtonTemplate).clone(true, true);1535        viewportButtonTemplateClone.text(viewPortLabel);1536        viewportButtonTemplateClone.data('viewPortIdentifier', viewPortIdentifier);1537        viewportButtonTemplateClone.data('viewPortLabel', viewPortLabel);1538        editorControlsWrapper.append(viewportButtonTemplateClone);1539        if (i === (len - 1)) {1540          numbersOfColumnsTemplateClone = $(numbersOfColumnsTemplate).clone(true, true);1541          _getEditorWrapperDomElement(editorHtml).after(numbersOfColumnsTemplateClone);1542          initNumbersOfColumnsField(viewportButtonTemplateClone);1543          viewportButtonTemplateClone.addClass(getHelper().getDomElementClassName('active'));1544        }1545        $('button', editorControlsWrapper).on('click', function() {1546          var that = $(this);1547          $('button', editorControlsWrapper).removeClass(getHelper().getDomElementClassName('active'));1548          that.addClass(getHelper().getDomElementClassName('active'));1549          initNumbersOfColumnsField(that);1550        });1551      }1552    };1553    /**1554     * @public1555     *1556     * @param object editorConfiguration1557     * @param object editorHtml1558     * @param string collectionElementIdentifier1559     * @param string collectionName1560     * @return void1561     * @throws 14754192261562     * @throws 14754192271563     * @throws 14754192281564     * @throws 14754192291565     * @throws 14754192301566     * @throws 14754192311567     * @throws 14754192321568     */1569    function renderPropertyGridEditor(editorConfiguration, editorHtml, collectionElementIdentifier, collectionName) {1570      var addRowTemplate, gridColumns, defaultValue, multiSelection, propertyData, propertyPathPrefix,1571        rowItemTemplate, setData, useLabelAsFallbackValue;1572      assert(1573        'object' === $.type(editorConfiguration),1574        'Invalid parameter "editorConfiguration"',1575        14754192261576      );1577      assert(1578        'object' === $.type(editorHtml),1579        'Invalid parameter "editorHtml"',1580        14754192271581      );1582      assert(1583        'boolean' === $.type(editorConfiguration['enableAddRow']),1584        'Invalid configuration "enableAddRow"',1585        14754192281586      );1587      assert(1588        'boolean' === $.type(editorConfiguration['enableDeleteRow']),1589        'Invalid configuration "enableDeleteRow"',1590        14754192301591      );1592      assert(1593        'boolean' === $.type(editorConfiguration['isSortable']),1594        'Invalid configuration "isSortable"',1595        14754192291596      );1597      assert(1598        getUtility().isNonEmptyString(editorConfiguration['propertyPath']),1599        'Invalid configuration "propertyPath"',1600        14754192311601      );1602      assert(1603        getUtility().isNonEmptyString(editorConfiguration['label']),1604        'Invalid configuration "label"',1605        14754192321606      );1607      getHelper().getTemplatePropertyDomElement('label', editorHtml)1608        .append(editorConfiguration['label']);1609      if (getUtility().isNonEmptyString(editorConfiguration['fieldExplanationText'])) {1610        getHelper()1611          .getTemplatePropertyDomElement('fieldExplanationText', editorHtml)1612          .text(editorConfiguration['fieldExplanationText']);1613      } else {1614        getHelper()1615          .getTemplatePropertyDomElement('fieldExplanationText', editorHtml)1616          .remove();1617      }1618      propertyPathPrefix = getFormEditorApp().buildPropertyPath(1619        undefined,1620        collectionElementIdentifier,1621        collectionName,1622        undefined,1623        true1624      );1625      if (getUtility().isNonEmptyString(propertyPathPrefix)) {1626        propertyPathPrefix = propertyPathPrefix + '.';1627      }1628      if (getUtility().isUndefinedOrNull(editorConfiguration['useLabelAsFallbackValue'])) {1629        useLabelAsFallbackValue = true;1630      } else {1631        useLabelAsFallbackValue = editorConfiguration['useLabelAsFallbackValue'];1632      }1633      gridColumns = [1634        {name: 'label', title: 'Label'},1635        {name: 'value', title: 'Value'},1636        {name: 'selected', title: 'Selected'},1637      ];1638      if (getUtility().isNonEmptyArray(editorConfiguration['gridColumns'])) {1639        gridColumns = editorConfiguration['gridColumns'];1640      }1641      var orderedGridColumnNames = gridColumns.map(function(item) {1642        return item.name;1643      });1644      var orderedGridColumnTitles = gridColumns.map(function(item) {1645        return item.title || null;1646      });1647      $([1648        getHelper().getDomElementDataIdentifierSelector('propertyGridEditorHeaderRow'),1649        getHelper().getDomElementDataIdentifierSelector('propertyGridEditorRowItem'),1650        getHelper().getDomElementDataIdentifierSelector('propertyGridEditorAddRowItem'),1651      ].join(','), $(editorHtml)).each(function (i, row) {1652        var $columns = $(getHelper().getDomElementDataIdentifierSelector('propertyGridEditorColumn'), row);1653        var $columnsAfter = $columns.last().nextAll();1654        var columnsByName = {};1655        // Collect columns by names, skip undesired columns1656        $columns1657          .detach()1658          .each(function(i, element) {1659            var $column = $(element);1660            var columnName = $column.data('column');1661            if (!orderedGridColumnNames.includes(columnName)) {1662              return;1663            }1664            columnsByName[columnName] = $column;1665          });1666        // Insert columns in desired order1667        orderedGridColumnNames.forEach(function(columnName, i) {1668          var $column = columnsByName[columnName];1669          if ($column.is('th')) {1670            $column.append(orderedGridColumnTitles[i]);1671          }1672          $column.appendTo(row);1673        });1674        // Insert remaining columns1675        $columnsAfter.appendTo(row);1676      });1677      if (getUtility().isUndefinedOrNull(editorConfiguration['multiSelection'])) {1678        multiSelection = false;1679      } else {1680        multiSelection = !!editorConfiguration['multiSelection'];1681      }1682      rowItemTemplate = $(1683        getHelper().getDomElementDataIdentifierSelector('propertyGridEditorRowItem'),1684        $(editorHtml)1685      ).clone();1686      $(getHelper().getDomElementDataIdentifierSelector('propertyGridEditorRowItem'), $(editorHtml)).remove();1687      if (!!editorConfiguration['enableDeleteRow']) {1688        $(getHelper().getDomElementDataIdentifierSelector('propertyGridEditorDeleteRow'),1689          $(rowItemTemplate)1690        ).on('click', function() {1691          $(this)1692            .closest(getHelper().getDomElementDataIdentifierSelector('propertyGridEditorRowItem'))1693            .off()1694            .empty()1695            .remove();1696          _setPropertyGridData(1697            $(editorHtml),1698            multiSelection,1699            editorConfiguration['propertyPath'],1700            propertyPathPrefix1701          );1702        });1703      } else {1704        $(getHelper().getDomElementDataIdentifierSelector('propertyGridEditorDeleteRow'), $(rowItemTemplate))1705          .parent()1706          .off()1707          .empty();1708      }1709      if (!!editorConfiguration['isSortable']) {1710        $(getHelper().getDomElementDataIdentifierSelector('propertyGridEditorContainer'), $(editorHtml))1711          .addClass(getHelper().getDomElementClassName('sortable'))1712          .sortable({1713            revert: 'true',1714            items: getHelper().getDomElementDataIdentifierSelector('propertyGridEditorRowItem'),1715            update: function(e, o) {1716              _setPropertyGridData(1717                $(editorHtml),1718                multiSelection,1719                editorConfiguration['propertyPath'],1720                propertyPathPrefix1721              );1722            }1723          });1724      } else {1725        $(getHelper().getDomElementDataIdentifierSelector('propertyGridEditorSortRow'), $(rowItemTemplate))1726          .parent()1727          .off()1728          .empty();1729      }1730      $(getHelper().getDomElementDataIdentifierSelector('propertyGridEditorSelectValue'),1731        $(rowItemTemplate)1732      ).on('change', function() {1733        if (!multiSelection) {1734          $(getHelper().getDomElementDataIdentifierSelector('propertyGridEditorSelectValue') + ':checked', $(editorHtml))1735            .not($(this))1736            .prop('checked', false);1737        }1738        _setPropertyGridData(1739          $(editorHtml),1740          multiSelection,1741          editorConfiguration['propertyPath'],1742          propertyPathPrefix1743        );1744      });1745      $(getHelper().getDomElementDataIdentifierSelector('propertyGridEditorLabel') + ',' +1746        getHelper().getDomElementDataIdentifierSelector('propertyGridEditorValue'),1747        $(rowItemTemplate)1748      ).on('keyup paste', function() {1749        _setPropertyGridData(1750          $(editorHtml),1751          multiSelection,1752          editorConfiguration['propertyPath'],1753          propertyPathPrefix1754         );1755      });1756      if (useLabelAsFallbackValue) {1757        $(getHelper().getDomElementDataIdentifierSelector('propertyGridEditorLabel'),1758          $(rowItemTemplate)1759        ).on('focusout', function() {1760          if ('' === $(this)1761              .closest(getHelper().getDomElementDataIdentifierSelector('propertyGridEditorRowItem'))1762              .find(getHelper().getDomElementDataIdentifierSelector('propertyGridEditorValue'))1763              .val()1764          ) {1765            $(this)1766              .closest(getHelper().getDomElementDataIdentifierSelector('propertyGridEditorRowItem'))1767              .find(getHelper().getDomElementDataIdentifierSelector('propertyGridEditorValue'))1768              .val($(this).val());1769          }1770        });1771      }1772      if (!!editorConfiguration['enableAddRow']) {1773        addRowTemplate = $(getHelper().getDomElementDataIdentifierSelector('propertyGridEditorAddRowItem'), $(editorHtml)).clone();1774        $(getHelper().getDomElementDataIdentifierSelector('propertyGridEditorAddRowItem'), $(editorHtml)).remove();1775        $(getHelper().getDomElementDataIdentifierSelector('propertyGridEditorAddRow'), $(addRowTemplate)).on('click', function() {1776          $(this)1777            .closest(getHelper().getDomElementDataIdentifierSelector('propertyGridEditorAddRowItem'))1778            .before($(rowItemTemplate).clone(true, true));1779            _setPropertyGridData(1780              $(editorHtml),1781              multiSelection,1782              editorConfiguration['propertyPath'],1783              propertyPathPrefix1784            );1785        });1786        $(getHelper().getDomElementDataIdentifierSelector('propertyGridEditorContainer'), $(editorHtml))1787          .prepend($(addRowTemplate).clone(true, true));1788      } else {1789        $(getHelper().getDomElementDataIdentifierSelector('propertyGridEditorAddRowItem'), $(editorHtml)).remove();1790      }1791      defaultValue = {};1792      if (multiSelection) {1793        if (!getUtility().isUndefinedOrNull(getCurrentlySelectedFormElement().get(propertyPathPrefix + 'defaultValue'))) {1794          defaultValue = getCurrentlySelectedFormElement().get(propertyPathPrefix + 'defaultValue');1795        }1796      } else {1797        if (!getUtility().isUndefinedOrNull(getCurrentlySelectedFormElement().get(propertyPathPrefix + 'defaultValue'))) {1798          defaultValue = {0: getCurrentlySelectedFormElement().get(propertyPathPrefix + 'defaultValue')};1799        }1800      }1801      propertyData = getCurrentlySelectedFormElement().get(propertyPathPrefix + editorConfiguration['propertyPath']) || {};1802      setData = function(label, value) {1803        var isPreselected, newRowTemplate;1804        isPreselected = false;1805        newRowTemplate = $(rowItemTemplate).clone(true, true);1806        for (var defaultValueKey in defaultValue) {1807          if (!defaultValue.hasOwnProperty(defaultValueKey)) {1808            continue;1809          }1810          if (defaultValue[defaultValueKey] === value) {1811            isPreselected = true;1812            break;1813          }1814        }1815        $(getHelper().getDomElementDataIdentifierSelector('propertyGridEditorLabel'), $(newRowTemplate)).val(label);1816        $(getHelper().getDomElementDataIdentifierSelector('propertyGridEditorValue'), $(newRowTemplate)).val(value);1817        if (isPreselected) {1818          $(getHelper().getDomElementDataIdentifierSelector('propertyGridEditorSelectValue'), $(newRowTemplate))1819            .prop('checked', true);1820        }1821        if (!!editorConfiguration['enableAddRow']) {1822          $(getHelper().getDomElementDataIdentifierSelector('propertyGridEditorAddRowItem'), $(editorHtml))1823            .before($(newRowTemplate));1824        } else {1825          $(getHelper().getDomElementDataIdentifierSelector('propertyGridEditorContainer'), $(editorHtml))1826            .prepend($(newRowTemplate));1827        }1828      };1829      if ('object' === $.type(propertyData)) {1830        for (var propertyDataKey in propertyData) {1831          if (!propertyData.hasOwnProperty(propertyDataKey)) {1832            continue;1833          }1834          setData(propertyData[propertyDataKey], propertyDataKey);1835        }1836      } else if ('array' === $.type(propertyData)) {1837        for (var propertyDataKey in propertyData) {1838          if (!propertyData.hasOwnProperty(propertyDataKey)) {1839            continue;1840          }1841          if (getUtility().isUndefinedOrNull(propertyData[propertyDataKey]['_label'])) {1842            setData(propertyData[propertyDataKey], propertyDataKey);1843          } else {1844            setData(propertyData[propertyDataKey]['_label'], propertyData[propertyDataKey]['_value']);1845          }1846        }1847      }1848      _validateCollectionElement(propertyPathPrefix + editorConfiguration['propertyPath'], editorHtml);1849    };1850    /**1851     * @public1852     *1853     * @param object editorConfiguration1854     * @param object editorHtml1855     * @param string collectionElementIdentifier1856     * @param string collectionName1857     * @return void1858     * @publish view/inspector/collectionElement/new/selected1859     * @publish view/inspector/removeCollectionElement/perform1860     * @throws 14754170931861     * @throws 14754170941862     * @throws 14754170951863     * @throws 14754170961864     */1865    function renderRequiredValidatorEditor(editorConfiguration, editorHtml, collectionElementIdentifier, collectionName) {1866      var propertyData, propertyPath, propertyValue, showValidationErrorMessage, validationErrorMessage, validationErrorMessagePropertyPath, validationErrorMessageTemplate, validationErrorMessageTemplateClone, validatorIdentifier;1867      assert(1868        'object' === $.type(editorConfiguration),1869        'Invalid parameter "editorConfiguration"',1870        14754170931871      );1872      assert(1873        'object' === $.type(editorHtml),1874        'Invalid parameter "editorHtml"',1875        14754170941876      );1877      assert(1878        getUtility().isNonEmptyString(editorConfiguration['validatorIdentifier']),1879        'Invalid configuration "validatorIdentifier"',1880        14754170951881      );1882      assert(1883        getUtility().isNonEmptyString(editorConfiguration['label']),1884        'Invalid configuration "label"',1885        14754170961886      );1887      validatorIdentifier = editorConfiguration['validatorIdentifier'];1888      getHelper().getTemplatePropertyDomElement('label', editorHtml).append(editorConfiguration['label']);1889      if (getUtility().isNonEmptyString(editorConfiguration['propertyPath'])) {1890        propertyPath = getFormEditorApp()1891          .buildPropertyPath(editorConfiguration['propertyPath'], collectionElementIdentifier, collectionName);1892      }1893      if (getUtility().isNonEmptyString(editorConfiguration['propertyValue'])) {1894        propertyValue = editorConfiguration['propertyValue'];1895      } else {1896        propertyValue = '';1897      }1898      validationErrorMessagePropertyPath = getFormEditorApp()1899        .buildPropertyPath(editorConfiguration['configurationOptions']['validationErrorMessage']['propertyPath']);1900      validationErrorMessageTemplate = getHelper()1901        .getTemplatePropertyDomElement('validationErrorMessage', $(editorHtml))1902        .clone();1903      getHelper()1904        .getTemplatePropertyDomElement('validationErrorMessage', $(editorHtml))1905        .remove();1906      showValidationErrorMessage = function() {1907        validationErrorMessageTemplateClone = $(validationErrorMessageTemplate).clone(true, true);1908        _getEditorWrapperDomElement(editorHtml).after(validationErrorMessageTemplateClone);1909        getHelper()1910          .getTemplatePropertyDomElement('validationErrorMessage-label', validationErrorMessageTemplateClone)1911          .append(editorConfiguration['configurationOptions']['validationErrorMessage']['label']);1912        getHelper()1913          .getTemplatePropertyDomElement('validationErrorMessage-fieldExplanationText', validationErrorMessageTemplateClone)1914          .append(editorConfiguration['configurationOptions']['validationErrorMessage']['fieldExplanationText']);1915        propertyData = getCurrentlySelectedFormElement().get(validationErrorMessagePropertyPath);1916        if (getUtility().isUndefinedOrNull(propertyData)) {1917          propertyData = [];1918        }1919        validationErrorMessage = _getFirstAvailableValidationErrorMessage(1920          editorConfiguration['configurationOptions']['validationErrorMessage']['errorCodes'],1921          propertyData1922        );1923        if (!getUtility().isUndefinedOrNull(validationErrorMessage)) {1924          getHelper()1925            .getTemplatePropertyDomElement('validationErrorMessage-propertyPath', validationErrorMessageTemplateClone)1926            .val(validationErrorMessage);1927        }1928        getHelper().getTemplatePropertyDomElement('validationErrorMessage-propertyPath', validationErrorMessageTemplateClone).on('keyup paste', function() {1929          propertyData = getCurrentlySelectedFormElement().get(validationErrorMessagePropertyPath);1930          if (getUtility().isUndefinedOrNull(propertyData)) {1931            propertyData = [];1932          }1933          getCurrentlySelectedFormElement().set(validationErrorMessagePropertyPath, _renewValidationErrorMessages(1934            editorConfiguration['configurationOptions']['validationErrorMessage']['errorCodes'],1935            propertyData,1936            $(this).val()1937          ));1938        });1939      }1940      if (-1 !== getFormEditorApp().getIndexFromPropertyCollectionElement(validatorIdentifier, 'validators')) {1941        $('input[type="checkbox"]', $(editorHtml)).prop('checked', true);1942        if (getUtility().isNonEmptyString(propertyPath)) {1943          getCurrentlySelectedFormElement().set(propertyPath, propertyValue);1944        }1945        showValidationErrorMessage();1946      }1947      $('input[type="checkbox"]', $(editorHtml)).on('change', function() {1948        getHelper().getTemplatePropertyDomElement('validationErrorMessage', $(editorHtml))1949          .off()1950          .empty()1951          .remove();1952        if ($(this).is(":checked")) {1953          showValidationErrorMessage();1954          getPublisherSubscriber().publish(1955            'view/inspector/collectionElement/new/selected',1956            [validatorIdentifier, 'validators']1957          );1958          if (getUtility().isNonEmptyString(propertyPath)) {1959            getCurrentlySelectedFormElement().set(propertyPath, propertyValue);1960          }1961        } else {1962          getPublisherSubscriber().publish(1963            'view/inspector/removeCollectionElement/perform',1964            [validatorIdentifier, 'validators']1965          );1966          if (getUtility().isNonEmptyString(propertyPath)) {1967            getCurrentlySelectedFormElement().unset(propertyPath);1968          }1969          propertyData = getCurrentlySelectedFormElement().get(validationErrorMessagePropertyPath);1970          if (getUtility().isUndefinedOrNull(propertyData)) {1971            propertyData = [];1972          }1973          getCurrentlySelectedFormElement().set(validationErrorMessagePropertyPath, _renewValidationErrorMessages(1974            editorConfiguration['configurationOptions']['validationErrorMessage']['errorCodes'],1975            propertyData,1976            ''1977          ));1978        }1979      });1980    };1981    /**1982     * @public1983     *1984     * @param object editorConfiguration1985     * @param object editorHtml1986     * @param string collectionElementIdentifier1987     * @param string collectionName1988     * @return void1989     * @throws 14762186711990     * @throws 14762186721991     * @throws 14762186731992     * @throws 14762186741993     */1994    function renderCheckboxEditor(editorConfiguration, editorHtml, collectionElementIdentifier, collectionName) {1995      var propertyData, propertyPath;1996      assert(1997        'object' === $.type(editorConfiguration),1998        'Invalid parameter "editorConfiguration"',1999        14762186712000      );2001      assert(2002        'object' === $.type(editorHtml),2003        'Invalid parameter "editorHtml"',2004        14762186722005      );2006      assert(2007        getUtility().isNonEmptyString(editorConfiguration['label']),2008        'Invalid configuration "label"',2009        14762186732010      );2011      assert(2012        getUtility().isNonEmptyString(editorConfiguration['propertyPath']),2013        'Invalid configuration "propertyPath"',2014        14762186742015      );2016      getHelper()2017        .getTemplatePropertyDomElement('label', editorHtml)2018        .append(editorConfiguration['label']);2019      if (getUtility().isNonEmptyString(editorConfiguration['fieldExplanationText'])) {2020        getHelper()2021          .getTemplatePropertyDomElement('fieldExplanationText', editorHtml)2022          .text(editorConfiguration['fieldExplanationText']);2023      } else {2024        getHelper()2025          .getTemplatePropertyDomElement('fieldExplanationText', editorHtml)2026          .remove();2027      }2028      propertyPath = getFormEditorApp()2029        .buildPropertyPath(editorConfiguration['propertyPath'], collectionElementIdentifier, collectionName);2030      propertyData = getCurrentlySelectedFormElement().get(propertyPath);2031      if (2032        ('boolean' === $.type(propertyData) && propertyData)2033        || propertyData === 'true'2034        || propertyData === 12035        || propertyData === "1"2036      ) {2037        $('input[type="checkbox"]', $(editorHtml)).prop('checked', true);2038      }2039      $('input[type="checkbox"]', $(editorHtml)).on('change', function() {2040        if ($(this).is(":checked")) {2041          getCurrentlySelectedFormElement().set(propertyPath, true);2042        } else {2043          getCurrentlySelectedFormElement().set(propertyPath, false);2044        }2045      });2046    };2047    /**2048     * @public2049     *2050     * @param object editorConfiguration2051     * @param object editorHtml2052     * @param string collectionElementIdentifier2053     * @param string collectionName2054     * @return void2055     * @throws 14754125672056     * @throws 14754125682057     * @throws 14754160982058     * @throws 14754160992059     */2060    function renderTextareaEditor(editorConfiguration, editorHtml, collectionElementIdentifier, collectionName) {2061      var propertyPath, propertyData;2062      assert(2063        'object' === $.type(editorConfiguration),2064        'Invalid parameter "editorConfiguration"',2065        14754125672066      );2067      assert(2068        'object' === $.type(editorHtml),2069        'Invalid parameter "editorHtml"',2070        14754125682071      );2072      assert(2073        getUtility().isNonEmptyString(editorConfiguration['propertyPath']),2074        'Invalid configuration "propertyPath"',2075        14754160982076      );2077      assert(2078        getUtility().isNonEmptyString(editorConfiguration['label']),2079        'Invalid configuration "label"',2080        14754160992081      );2082      propertyPath = getFormEditorApp()2083        .buildPropertyPath(editorConfiguration['propertyPath'], collectionElementIdentifier, collectionName);2084      getHelper()2085        .getTemplatePropertyDomElement('label', editorHtml).append(editorConfiguration['label']);2086      if (getUtility().isNonEmptyString(editorConfiguration['fieldExplanationText'])) {2087        getHelper()2088          .getTemplatePropertyDomElement('fieldExplanationText', editorHtml)2089          .text(editorConfiguration['fieldExplanationText']);2090      } else {2091        getHelper()2092          .getTemplatePropertyDomElement('fieldExplanationText', editorHtml)2093          .remove();2094      }2095      propertyData = getCurrentlySelectedFormElement().get(propertyPath);2096      $('textarea', $(editorHtml)).val(propertyData);2097      $('textarea', $(editorHtml)).on('keyup paste', function() {2098        getCurrentlySelectedFormElement().set(propertyPath, $(this).val());2099      });2100    };2101    /**2102     * @public2103     *2104     * @param object editorConfiguration2105     * @param object editorHtml2106     * @param string collectionElementIdentifier2107     * @param string collectionName2108     * @return void2109     * @throws 14773005872110     * @throws 14773005882111     * @throws 14773005892112     * @throws 14773005902113     * @throws 14773189812114     * @throws 14773198592115     */2116    function renderTypo3WinBrowserEditor(editorConfiguration, editorHtml, collectionElementIdentifier, collectionName) {2117      var propertyPath, propertyData;2118      assert(2119        'object' === $.type(editorConfiguration),2120        'Invalid parameter "editorConfiguration"',2121        14773005872122      );2123      assert(2124        'object' === $.type(editorHtml),2125        'Invalid parameter "editorHtml"',2126        14773005882127      );2128      assert(2129        getUtility().isNonEmptyString(editorConfiguration['label']),2130        'Invalid configuration "label"',2131        14773005892132      );2133      assert(2134        getUtility().isNonEmptyString(editorConfiguration['buttonLabel']),2135        'Invalid configuration "buttonLabel"',2136        14773189812137      );2138      assert(2139        getUtility().isNonEmptyString(editorConfiguration['propertyPath']),2140        'Invalid configuration "propertyPath"',2141        14773005902142      );2143      getHelper()2144        .getTemplatePropertyDomElement('label', editorHtml)2145        .append(editorConfiguration['label']);2146      getHelper()2147        .getTemplatePropertyDomElement('buttonLabel', editorHtml)2148        .append(editorConfiguration['buttonLabel']);2149      if (getUtility().isNonEmptyString(editorConfiguration['fieldExplanationText'])) {2150        getHelper()2151          .getTemplatePropertyDomElement('fieldExplanationText', editorHtml)2152          .text(editorConfiguration['fieldExplanationText']);2153      } else {2154        getHelper()2155          .getTemplatePropertyDomElement('fieldExplanationText', editorHtml)2156          .remove();2157      }2158      $('form', $(editorHtml)).prop('name', editorConfiguration['propertyPath']);2159      Icons.getIcon(editorConfiguration['iconIdentifier'], Icons.sizes.small).then(function(icon) {2160        getHelper().getTemplatePropertyDomElement('image', editorHtml).append($(icon));2161      });2162      getHelper().getTemplatePropertyDomElement('onclick', editorHtml).on('click', function() {2163        var insertTarget, randomIdentifier;2164        randomIdentifier = Math.floor((Math.random() * 100000) + 1);2165        insertTarget = $(this)2166          .closest(getHelper().getDomElementDataIdentifierSelector('editorControlsWrapper'))2167          .find(getHelper().getDomElementDataAttribute('contentElementSelectorTarget', 'bracesWithKey'));2168        insertTarget.attr(getHelper().getDomElementDataAttribute('contentElementSelectorTarget'), randomIdentifier);2169        _openTypo3WinBrowser('db', randomIdentifier + '|||' + editorConfiguration['browsableType']);2170      });2171      _listenOnElementBrowser();2172      propertyPath = getFormEditorApp().buildPropertyPath(editorConfiguration['propertyPath'], collectionElementIdentifier, collectionName);2173      propertyData = getCurrentlySelectedFormElement().get(propertyPath);2174      _validateCollectionElement(propertyPath, editorHtml);2175      getHelper()2176        .getTemplatePropertyDomElement('propertyPath', editorHtml)2177        .val(propertyData);2178      getHelper().getTemplatePropertyDomElement('propertyPath', editorHtml).on('keyup paste', function() {2179        getCurrentlySelectedFormElement().set(propertyPath, $(this).val());2180        _validateCollectionElement(propertyPath, editorHtml);2181      });2182    };2183    /**2184     * @public2185     *2186     * @param object editorConfiguration2187     * @param object editorHtml2188     * @param string collectionElementIdentifier2189     * @param string collectionName2190     * @return void2191     * @throws 14754125632192     * @throws 14754125642193     */2194    function renderRemoveElementEditor(editorConfiguration, editorHtml, collectionElementIdentifier, collectionName) {2195      assert('object' === $.type(editorConfiguration), 'Invalid parameter "editorConfiguration"', 1475412563);2196      assert('object' === $.type(editorHtml), 'Invalid parameter "editorHtml"', 1475412564);2197      if (getUtility().isUndefinedOrNull(collectionElementIdentifier)) {2198        $('button', $(editorHtml))2199          .addClass(2200            getHelper().getDomElementClassName('buttonFormElementRemove') + ' ' +2201            getHelper().getDomElementClassName('buttonFormEditor')2202          );2203      } else {2204        $('button', $(editorHtml)).addClass(2205          getHelper().getDomElementClassName('buttonCollectionElementRemove')2206        );2207      }2208      $('button', $(editorHtml)).on('click', function(e) {2209        if (getUtility().isUndefinedOrNull(collectionElementIdentifier)) {2210          getViewModel().showRemoveFormElementModal();2211        } else {2212          getViewModel().showRemoveCollectionElementModal(collectionElementIdentifier, collectionName);2213        }2214      });2215    };2216    /**2217     * @public2218     *2219     * @param object editorConfiguration2220     * @param object editorHtml2221     * @param string propertyPath2222     * @return void2223     * @throws 14845747042224     * @throws 14845747052225     * @throws 14845747062226     */2227    function renderFormElementSelectorEditorAddition(editorConfiguration, editorHtml, propertyPath) {2228      var nonCompositeNonToplevelFormElements, formElementSelectorControlsWrapper,2229        formElementSelectorSplitButtonListContainer, itemTemplate;2230      assert(2231        'object' === $.type(editorConfiguration),2232        'Invalid parameter "editorConfiguration"',2233        14845747042234      );2235      assert(2236        'object' === $.type(editorHtml),2237        'Invalid parameter "editorHtml"',2238        14845747052239      );2240      assert(2241        getUtility().isNonEmptyString(propertyPath),2242        'Invalid parameter "propertyPath"',2243        14845747062244      );2245      formElementSelectorControlsWrapper = $(2246        getHelper().getDomElementDataIdentifierSelector('formElementSelectorControlsWrapper'), editorHtml2247      );2248      if (editorConfiguration['enableFormelementSelectionButton'] === true) {2249        if (formElementSelectorControlsWrapper.length === 0) {2250          return;2251        }2252        formElementSelectorSplitButtonListContainer = $(2253          getHelper().getDomElementDataIdentifierSelector('formElementSelectorSplitButtonListContainer'), editorHtml2254        );2255        formElementSelectorSplitButtonListContainer.off().empty();2256        nonCompositeNonToplevelFormElements = getFormEditorApp().getNonCompositeNonToplevelFormElements();2257        if (nonCompositeNonToplevelFormElements.length === 0) {2258          Icons.getIcon(2259            getHelper().getDomElementDataAttributeValue('iconNotAvailable'),2260            Icons.sizes.small,2261            null,2262            Icons.states.default2263          ).then(function(icon) {2264            itemTemplate = $('<li data-no-sorting>'2265              + '<a href="#"></a>'2266              + '</li>');2267            itemTemplate2268              .append($(icon))2269              .append(' ' + getFormElementDefinition(getRootFormElement(), 'inspectorEditorFormElementSelectorNoElements'));2270            formElementSelectorSplitButtonListContainer.append(itemTemplate);2271          });2272        } else {2273          $.each(nonCompositeNonToplevelFormElements, function(i, nonCompositeNonToplevelFormElement) {2274            Icons.getIcon(2275              getFormElementDefinition(nonCompositeNonToplevelFormElement, 'iconIdentifier'),2276              Icons.sizes.small,2277              null,2278              Icons.states.default2279            ).then(function(icon) {2280              itemTemplate = $('<li data-no-sorting>'2281                + '<a href="#" data-formelement-identifier="' + nonCompositeNonToplevelFormElement.get('identifier') + '">'2282                + '</a>'2283                + '</li>');2284              $('[data-formelement-identifier="' + nonCompositeNonToplevelFormElement.get('identifier') + '"]', itemTemplate)2285                .append($(icon))2286                .append(' ' + nonCompositeNonToplevelFormElement.get('label'));2287              $('a', itemTemplate).on('click', function() {2288                var propertyData;2289                propertyData = getCurrentlySelectedFormElement().get(propertyPath);2290                if (propertyData.length === 0) {2291                  propertyData = '{' + $(this).attr('data-formelement-identifier') + '}';2292                } else {2293                  propertyData = propertyData + ' ' + '{' + $(this).attr('data-formelement-identifier') + '}';2294                }2295                getCurrentlySelectedFormElement().set(propertyPath, propertyData);2296                getHelper().getTemplatePropertyDomElement('propertyPath', editorHtml).val(propertyData);2297                _validateCollectionElement(propertyPath, editorHtml);2298              });2299              formElementSelectorSplitButtonListContainer.append(itemTemplate);2300            });2301          });2302        }2303      } else {2304        $(getHelper().getDomElementDataIdentifierSelector('editorControlsInputGroup'), editorHtml)2305          .removeClass(getHelper().getDomElementClassName('inspectorInputGroup'));2306        formElementSelectorControlsWrapper.off().empty().remove();2307      }2308    }2309    /**2310     * @public2311     *2312     * @param string content2313     * @return void2314     */2315    function setFormElementHeaderEditorContent(content) {2316      if (getFormEditorApp().getUtility().isUndefinedOrNull(content)) {2317        content = buildTitleByFormElement();2318      }2319      $(getHelper()2320        .getDomElementDataIdentifierSelector('formElementHeaderEditor'), getInspectorDomElement())2321        .html(content);2322    };2323    /**2324     * @public2325     *2326     * @param object2327     * @return object2328     * @throws 14789673192329     */2330    function buildTitleByFormElement(formElement) {2331      var label;2332      if (getUtility().isUndefinedOrNull(formElement)) {2333        formElement = getCurrentlySelectedFormElement();...

ViewModel.js

Source:ViewModel.js

...336        1478268639337      );338      _structureComponent = TreeComponent.bootstrap(339        getFormEditorApp(),340        $(getHelper().getDomElementDataAttribute('identifier', 'bracesWithKeyValue', [341          getHelper().getDomElementDataAttributeValue('structure')342        ]))343      );344      $(getHelper().getDomElementDataIdentifierSelector('iconMailform'),345        $(getHelper().getDomElementDataIdentifierSelector('structureRootContainer'))346      ).tooltip({347        title: 'identifier: ' + getRootFormElement().get('identifier'),348        placement: 'right'349      });350    };351    /**352     * @private353     *354     * @return void355     * @throws 1478895106356     */357    function _modalsComponentSetup() {358      assert(359        'function' === $.type(ModalsComponent.bootstrap),360        'The modals component does not implement the method "bootstrap"',361        1478895106362      );363      _modalsComponent = ModalsComponent.bootstrap(getFormEditorApp());364    };365    /**366     * @private367     *368     * @return void369     * @throws 1478895106370     */371    function _inspectorsComponentSetup() {372      assert(373        'function' === $.type(InspectorComponent.bootstrap),374        'The inspector component does not implement the method "bootstrap"',375        1478895106376      );377      _inspectorsComponent = InspectorComponent.bootstrap(getFormEditorApp());378    };379    /**380     * @private381     *382     * @return void383     * @throws 1478986610384     */385    function _stageComponentSetup() {386      assert(387        'function' === $.type(InspectorComponent.bootstrap),388        'The stage component does not implement the method "bootstrap"',389        1478986610390      );391      _stageComponent = StageComponent.bootstrap(392        getFormEditorApp(),393        $(getHelper().getDomElementDataAttribute('identifier', 'bracesWithKeyValue', [394          getHelper().getDomElementDataAttributeValue('stageArea')395        ]))396      );397      getStage().getStagePanelDomElement().on("click", function(e) {398        if (399          $(e.target).attr(getHelper().getDomElementDataAttribute('identifier')) === getHelper().getDomElementDataAttributeValue('stagePanelHeading')400          || $(e.target).attr(getHelper().getDomElementDataAttribute('identifier')) === getHelper().getDomElementDataAttributeValue('stageSection')401          || $(e.target).attr(getHelper().getDomElementDataAttribute('identifier')) === getHelper().getDomElementDataAttributeValue('stageArea')402        ) {403          selectPageBatch(getFormEditorApp().getCurrentlySelectedPageIndex());404        }405        getPublisherSubscriber().publish('view/stage/panel/clicked', []);406      });407    };408    /**409     * @private410     *411     * @return void412     * @publish view/header/button/save/clicked413     * @publish view/stage/abstract/button/newElement/clicked414     * @publish view/header/button/newPage/clicked415     * @publish view/structure/button/newPage/clicked416     * @publish view/header/button/close/clicked417     */418    function _buttonsSetup() {419      $(getHelper().getDomElementDataIdentifierSelector('buttonHeaderSave')).on("click", function(e) {420        getPublisherSubscriber().publish('view/header/button/save/clicked', []);421      });422      $(getHelper().getDomElementDataIdentifierSelector('buttonHeaderSettings')).on('click', function(e) {423        getPublisherSubscriber().publish('view/header/formSettings/clicked', []);424      });425      $(getHelper().getDomElementDataIdentifierSelector('buttonStageNewElementBottom')).on('click', function(e) {426        getPublisherSubscriber().publish(427          'view/stage/abstract/button/newElement/clicked', [428            'view/insertElements/perform/bottom'429          ]430        );431      });432      $(getHelper().getDomElementDataIdentifierSelector('buttonHeaderNewPage')).on('click', function(e) {433        getPublisherSubscriber().publish('view/header/button/newPage/clicked', ['view/insertPages/perform']);434      });435      $(getHelper().getDomElementDataIdentifierSelector('buttonStructureNewPage')).on('click', function(e) {436        getPublisherSubscriber().publish('view/structure/button/newPage/clicked', ['view/insertPages/perform']);437      });438      $(getHelper().getDomElementDataIdentifierSelector('buttonHeaderClose')).on('click', function(e) {439        if (!getFormEditorApp().getUnsavedContent()) {440          return;441        }442        e.preventDefault();443        getPublisherSubscriber().publish('view/header/button/close/clicked', []);444      });445      $(getHelper().getDomElementDataIdentifierSelector('buttonHeaderUndo')).on('click', function(e) {446        getPublisherSubscriber().publish('view/undoButton/clicked', []);447      });448      $(getHelper().getDomElementDataIdentifierSelector('buttonHeaderRedo')).on('click', function(e) {449        getPublisherSubscriber().publish('view/redoButton/clicked', []);450      });451      $(getHelper().getDomElementDataIdentifierSelector('buttonHeaderViewModeAbstract')).on('click', function(e) {452        getPublisherSubscriber().publish('view/viewModeButton/abstract/clicked', []);453      });454      $(getHelper().getDomElementDataIdentifierSelector('buttonHeaderViewModePreview')).on('click', function(e) {455        getPublisherSubscriber().publish('view/viewModeButton/preview/clicked', []);456      });457      $(getHelper().getDomElementDataIdentifierSelector('structureRootContainer')).on("click", function(e) {458        getPublisherSubscriber().publish('view/structure/root/selected');459      });460      $(getHelper().getDomElementDataIdentifierSelector('buttonHeaderPaginationNext')).on('click', function(e) {461        getPublisherSubscriber().publish('view/paginationNext/clicked', []);462      });463      $(getHelper().getDomElementDataIdentifierSelector('buttonHeaderPaginationPrevious')).on('click', function(e) {464        getPublisherSubscriber().publish('view/paginationPrevious/clicked', []);465      });466    };467    /* *************************************************************468     * Public Methods469     * ************************************************************/470    /**471     * @public472     *473     * @return object474     */475    function getFormEditorApp() {476      return _formEditorApp;477    };478    /**479     * @public480     *481     * @param object482     * @return object483     */484    function getHelper(configuration) {485      if (getUtility().isUndefinedOrNull(configuration)) {486        return Helper.setConfiguration(_configuration);487      }488      return Helper.setConfiguration(configuration);489    };490    /**491     * @public492     *493     * @param object formElement494     * @param string formElementDefinitionKey495     * @return mixed496     */497    function getFormElementDefinition(formElement, formElementDefinitionKey) {498      return getFormEditorApp().getFormElementDefinition(formElement, formElementDefinitionKey);499    };500    /**501     * @public502     *503     * @return object (dereferenced)504     */505    function getConfiguration() {506      return $.extend(true, {}, _configuration);507    };508    /**509     * @public510     *511     * @return int512     */513    function getPreviewMode() {514      return _previewMode;515    };516    /**517     * @public518     *519     * @param bool520     * @return void521     */522    function setPreviewMode(previewMode) {523      _previewMode = !!previewMode;524    };525    /* *************************************************************526     * Structure527     * ************************************************************/528    /**529     * @public530     *531     * @return object532     */533    function getStructure() {534      return _structureComponent;535    };536    /**537     * @public538     *539     * @return void540     * @publish view/structure/renew/postProcess541     */542    function renewStructure() {543      getStructure().renew();544      getPublisherSubscriber().publish('view/structure/renew/postProcess');545    };546    /**547     * @public548     *549     * @param object550     * @return void551     */552    function addStructureSelection(formElement) {553      getStructure().getTreeNode(formElement).addClass(getHelper().getDomElementClassName('selectedFormElement'));554    };555    /**556     * @public557     *558     * @param object559     * @return void560     */561    function removeStructureSelection(formElement) {562      getStructure().getTreeNode(formElement).removeClass(getHelper().getDomElementClassName('selectedFormElement'));563    };564    /**565     * @public566     *567     * @return void568     */569    function removeAllStructureSelections() {570      $(getHelper().getDomElementClassName('selectedFormElement', true), getStructure().getTreeDomElement())571        .removeClass(getHelper().getDomElementClassName('selectedFormElement'));572    };573    /**574     * @public575     *576     * @return object577     */578    function getStructureRootElement() {579      return $(getHelper().getDomElementDataAttribute('identifier', 'bracesWithKeyValue', [580        getHelper().getDomElementDataAttributeValue('structureRootElement')581      ]));582    };583    /**584     * @public585     *586     * @return void587     */588    function removeStructureRootElementSelection() {589      $(getHelper().getDomElementDataAttribute('identifier', 'bracesWithKeyValue', [590        getHelper().getDomElementDataAttributeValue('structureRootContainer')591      ])).removeClass(getHelper().getDomElementClassName('selectedRootFormElement'));592    };593    /**594     * @public595     *596     * @return void597     */598    function addStructureRootElementSelection() {599      $(getHelper().getDomElementDataAttribute('identifier', 'bracesWithKeyValue', [600        getHelper().getDomElementDataAttributeValue('structureRootContainer')601      ])).addClass(getHelper().getDomElementClassName('selectedRootFormElement'));602    };603    /**604     * @public605     *606     * @param string title607     * @return void608     */609    function setStructureRootElementTitle(title) {610      if (getUtility().isUndefinedOrNull(title)) {611        title = $('<span></span>')612          .text((getRootFormElement().get('label') ? getRootFormElement().get('label') : getRootFormElement().get('identifier')))613          .text();614      }615      getStructureRootElement().text(title);616    };617    /**618     * @public619     *620     * @return void621     */622    function addStructureValidationResults() {623      var validationResults;624      getStructure().getAllTreeNodes()625        .removeClass(getHelper().getDomElementClassName('validationErrors'))626        .removeClass(getHelper().getDomElementClassName('validationChildHasErrors'));627      removeElementValidationErrorClass(getStructureRootElement());628      validationResults = getFormEditorApp().validateFormElementRecursive(getRootFormElement());629      for (var i = 0, len = validationResults.length; i < len; ++i) {630        var hasError = false, pathParts, validationElement;631        for (var j = 0, len2 = validationResults[i]['validationResults'].length; j < len2; ++j) {632          if (633            validationResults[i]['validationResults'][j]['validationResults']634            && validationResults[i]['validationResults'][j]['validationResults'].length > 0635          ) {636            hasError = true;637            break;638          }639        }640        if (hasError) {641          if (i === 0) {642            setElementValidationErrorClass(getStructureRootElement());643          } else {644            validationElement = getStructure().getTreeNode(validationResults[i]['formElementIdentifierPath']);645            setElementValidationErrorClass(validationElement);646            pathParts = validationResults[i]['formElementIdentifierPath'].split('/');647            while (pathParts.pop()) {648              validationElement = getStructure().getTreeNode(pathParts.join('/'));649              if ('object' === $.type(validationElement)) {650                setElementValidationErrorClass(validationElement, 'validationChildHasErrors');651              }652            }653          }654        }655      }656    };657    /* *************************************************************658     * Modals659     * ************************************************************/660    /**661     * @public662     *663     * @return object664     */665    function getModals() {666      return _modalsComponent667    };668    /**669     * @public670     *671     * @param object formElement672     * @return void673     */674    function showRemoveFormElementModal(formElement) {675      if (getUtility().isUndefinedOrNull(formElement)) {676        formElement = getCurrentlySelectedFormElement();677      }678      getModals().showRemoveFormElementModal(formElement);679    };680    /**681     * @public682     *683     * @param string collectionElementIdentifier684     * @param string collectionName685     * @param object formElement686     * @return void687     */688    function showRemoveCollectionElementModal(collectionElementIdentifier, collectionName, formElement) {689      if (getUtility().isUndefinedOrNull(formElement)) {690        formElement = getCurrentlySelectedFormElement();691      }692      getModals().showRemoveCollectionElementModal(collectionElementIdentifier, collectionName, formElement);693    };694    /**695     * @public696     *697     * @return void698     */699    function showCloseConfirmationModal() {700      getModals().showCloseConfirmationModal();701    };702    /**703     * @public704     *705     * @param string targetEvent706     * @param object configuration707     * @return void708     */709    function showInsertElementsModal(targetEvent, configuration) {710      getModals().showInsertElementsModal(targetEvent, configuration);711    };712    /**713     * @public714     *715     * @param string targetEvent716     * @return void717     */718    function showInsertPagesModal(targetEvent) {719      getModals().showInsertPagesModal(targetEvent);720    };721    /**722     * @public723     *724     * @param bool725     * @return void726     */727    function showValidationErrorsModal() {728      var validationResults;729      validationResults = getFormEditorApp().validateFormElementRecursive(getRootFormElement());730      getModals().showValidationErrorsModal(validationResults);731    };732    /* *************************************************************733     * Inspector734     * ************************************************************/735    /**736     * @public737     *738     * @return object739     */740    function getInspector() {741      return _inspectorsComponent742    };743    /**744     * @public745     *746     * @param object747     * @param bool748     * @return void749     */750    function renderInspectorEditors(formElement, useFadeEffect) {751      var render;752      if (getUtility().isUndefinedOrNull(useFadeEffect)) {753        useFadeEffect = true;754      }755      /**756       * @private757       *758       * @param function759       * @return void760       */761      render = function(callback) {762        getInspector().renderEditors(formElement, callback);763      };764      if (!!useFadeEffect) {765        getInspector().getInspectorDomElement().fadeOut('fast', function() {766          render(function() {767            getInspector().getInspectorDomElement().fadeIn('fast');768          });769        });770      } else {771        render();772      }773    };774    /**775     * @public776     *777     * @param string778     * @param string779     * @return void780     */781    function renderInspectorCollectionElementEditors(collectionName, collectionElementIdentifier) {782      getInspector().renderCollectionElementEditors(collectionName, collectionElementIdentifier);783    };784    /**785     * @public786     *787     * @param string content788     * @return void789     */790    function setInspectorFormElementHeaderEditorContent(content) {791      getInspector().setFormElementHeaderEditorContent(content);792    };793    /* *************************************************************794     * Stage795     * ************************************************************/796    /**797     * @public798     *799     * @return object800     */801    function getStage() {802      return _stageComponent;803    };804    /**805     * @public806     *807     * @param string title808     * @return void809     */810    function setStageHeadline(title) {811      getStage().setStageHeadline(title);812    };813    /**814     * @public815     *816     * @return void817     */818    function addStagePanelSelection() {819      getStage().getStagePanelDomElement().addClass(getHelper().getDomElementClassName('selectedStagePanel'));820    };821    /**822     * @public823     *824     * @return void825     */826    function removeStagePanelSelection() {827      getStage().getStagePanelDomElement().removeClass(getHelper().getDomElementClassName('selectedStagePanel'));828    };829    /**830     * @public831     *832     * @return void833     */834    function renderPagination() {835      getStage().renderPagination();836    };837    /**838     * @public839     *840     * @return void841     */842    function renderUndoRedo() {843      getStage().renderUndoRedo();844    };845    /**846     * @public847     *848     * @param bool849     * @param bool850     * @return void851     * @publish view/stage/abstract/render/postProcess852     * @publish view/stage/abstract/render/preProcess853     */854    function renderAbstractStageArea(useFadeEffect, toolbarUseFadeEffect) {855      var render, renderPostProcess;856      $(getHelper().getDomElementDataIdentifierSelector('structureSection'))857        .animate({858          'left': '0px'859        }, 'slow');860      $(getHelper().getDomElementDataIdentifierSelector('inspectorSection'))861        .animate({862          'right': '0px'863        }, 'slow');864      $(getHelper().getDomElementDataIdentifierSelector('stageContainer'))865        .animate({866          'margin-left': _configuration['panels']['stage']['marginLeft'] + 'px',867          'margin-right': _configuration['panels']['stage']['marginRight'] + 'px'868        }, 'slow');869      $(getHelper().getDomElementDataIdentifierSelector('stageContainerInner'))870        .animate({871          'max-width': _configuration['panels']['stage']['maxWidthAbstract'] + 'px'872        }, 'slow');873      $(getHelper().getDomElementClassName('headerButtonBar', true))874        .animate({875          'margin-left': _configuration['panels']['structure']['width'] + 'px'876        }, 'slow');877      if (getUtility().isUndefinedOrNull(useFadeEffect)) {878        useFadeEffect = true;879      }880      if (getUtility().isUndefinedOrNull(toolbarUseFadeEffect)) {881        toolbarUseFadeEffect = true;882      }883      setButtonActive($(getHelper().getDomElementDataIdentifierSelector('buttonHeaderViewModeAbstract')));884      removeButtonActive($(getHelper().getDomElementDataIdentifierSelector('buttonHeaderViewModePreview')));885      /**886       * @private887       *888       * @param function889       * @return void890       */891      render = function(callback) {892        $(getHelper().getDomElementDataIdentifierSelector('stageContainer'))893          .addClass(getHelper().getDomElementClassName('stageViewModeAbstract'))894          .removeClass(getHelper().getDomElementClassName('stageViewModePreview'));895        getStage().renderAbstractStageArea(undefined, callback);896      };897      /**898       * @private899       *900       * @return void901       */902      renderPostProcess = function() {903        var formElementTypeDefinition;904        formElementTypeDefinition = getFormElementDefinition(getCurrentlySelectedFormElement());905        getStage().getAllFormElementDomElements().hover(function() {906          getStage().getAllFormElementDomElements().parent().removeClass(getHelper().getDomElementClassName('sortableHover'));907          if (908            $(this).parent().hasClass(getHelper().getDomElementClassName('formElementIsComposit'))909            && !$(this).parent().hasClass(getHelper().getDomElementClassName('formElementIsTopLevel'))910          ) {911            $(this).parent().addClass(getHelper().getDomElementClassName('sortableHover'));912          }913        });914        showComponent($(getHelper().getDomElementDataIdentifierSelector('buttonHeaderNewPage')));915        if (916          formElementTypeDefinition['_isTopLevelFormElement']917          && !formElementTypeDefinition['_isCompositeFormElement']918          && !getFormEditorApp().isRootFormElementSelected()919        ) {920          hideComponent($(getHelper().getDomElementDataIdentifierSelector('buttonStageNewElementBottom')));921          hideComponent($(getHelper().getDomElementDataIdentifierSelector('stageNewElementRow')));922        } else {923          showComponent($(getHelper().getDomElementDataIdentifierSelector('buttonStageNewElementBottom')));924          showComponent($(getHelper().getDomElementDataIdentifierSelector('stageNewElementRow')));925        }926        refreshSelectedElementItemsBatch(toolbarUseFadeEffect);927        getPublisherSubscriber().publish('view/stage/abstract/render/postProcess');928      };929      if (useFadeEffect) {930        $(getHelper().getDomElementDataIdentifierSelector('stageSection')).fadeOut(400, function() {931          render(function() {932            getPublisherSubscriber().publish('view/stage/abstract/render/preProcess');933            $(getHelper().getDomElementDataIdentifierSelector('stageSection')).fadeIn(400);934            renderPostProcess();935            getPublisherSubscriber().publish('view/stage/abstract/render/postProcess');936          });937        });938      } else {939        render(function() {940          getPublisherSubscriber().publish('view/stage/abstract/render/preProcess');941          renderPostProcess();942          getPublisherSubscriber().publish('view/stage/abstract/render/postProcess');943        });944      }945    };946    /**947     * @public948     *949     * @param string html950     * @return void951     * @publish view/stage/preview/render/postProcess952     */953    function renderPreviewStageArea(html) {954      $(getHelper().getDomElementDataIdentifierSelector('structureSection'))955        .animate({956          'left': '-=' + _configuration['panels']['structure']['width'] + 'px'957        }, 'slow');958      $(getHelper().getDomElementDataIdentifierSelector('inspectorSection'))959        .animate({960          'right': '-=' + _configuration['panels']['inspector']['width'] + 'px'961        }, 'slow');962      $(getHelper().getDomElementDataIdentifierSelector('stageContainer'))963        .animate({964          'margin-left': _configuration['panels']['stage']['marginLeftCollapsed'] + 'px',965          'margin-right': _configuration['panels']['stage']['marginRightCollapsed'] + 'px'966        }, 'slow');967      $(getHelper().getDomElementDataIdentifierSelector('stageContainerInner'))968        .animate({969          'max-width': _configuration['panels']['stage']['maxWidthPreview'] + 'px'970        }, 'slow');971      $(getHelper().getDomElementClassName('headerButtonBar', true))972        .animate({973          'margin-left': _configuration['panels']['stage']['marginLeftCollapsed'] + 'px'974        }, 'slow');975      setButtonActive($(getHelper().getDomElementDataIdentifierSelector('buttonHeaderViewModePreview')));976      removeButtonActive($(getHelper().getDomElementDataIdentifierSelector('buttonHeaderViewModeAbstract')));977      $(getHelper().getDomElementDataIdentifierSelector('stageSection')).fadeOut(400, function() {978        $(getHelper().getDomElementDataIdentifierSelector('stageContainer'))979          .addClass(getHelper().getDomElementClassName('stageViewModePreview'))980          .removeClass(getHelper().getDomElementClassName('stageViewModeAbstract'));981        hideComponent($(getHelper().getDomElementDataIdentifierSelector('buttonStageNewElementBottom')));982        hideComponent($(getHelper().getDomElementDataIdentifierSelector('buttonHeaderNewPage')));983        getStage().renderPreviewStageArea(html);984        $(getHelper().getDomElementDataIdentifierSelector('stageSection')).fadeIn(400);985        getPublisherSubscriber().publish('view/stage/preview/render/postProcess');986      });987    };988    /**989     * @public990     *991     * @return void992     */993    function addAbstractViewValidationResults() {994      var validationResults;995      validationResults = getFormEditorApp().validateFormElementRecursive(getRootFormElement());996      for (var i = 0, len = validationResults.length; i < len; ++i) {997        var hasError = false, validationElement;998        for (var j = 0, len2 = validationResults[i]['validationResults'].length; j < len2; ++j) {999          if (1000            validationResults[i]['validationResults'][j]['validationResults']1001            && validationResults[i]['validationResults'][j]['validationResults'].length > 01002          ) {1003            hasError = true;1004            break;1005          }1006        }1007        if (hasError) {1008          if (i > 0) {1009            validationElement = getStage().getAbstractViewFormElementDomElement(validationResults[i]['formElementIdentifierPath']);1010            setElementValidationErrorClass(validationElement);1011          }1012        }1013      }1014    };1015    /* *************************************************************1016     * Form element methods1017     * ************************************************************/1018    /**1019     * @public1020     *1021     * @param string formElementType1022     * @param string|object referenceFormElement1023     * @param bool1024     * @return object1025     * @publish view/formElement/inserted1026     */1027    function createAndAddFormElement(formElementType, referenceFormElement, disablePublishersOnSet) {1028      var newFormElement;1029      newFormElement = getFormEditorApp().createAndAddFormElement(formElementType, referenceFormElement);1030      if (!!!disablePublishersOnSet) {1031        getPublisherSubscriber().publish('view/formElement/inserted', [newFormElement]);1032      }1033      return newFormElement;1034    };1035    /**1036     * @public1037     *1038     * @param string|object formElementToMove1039     * @param string position1040     * @param string|object referenceFormElement1041     * @param bool1042     * @return object1043     * @publish view/formElement/moved1044     */1045    function moveFormElement(formElementToMove, position, referenceFormElement, disablePublishersOnSet) {1046      var movedFormElement;1047      movedFormElement = getFormEditorApp().moveFormElement(formElementToMove, position, referenceFormElement, false);1048      if (!!!disablePublishersOnSet) {1049        getPublisherSubscriber().publish('view/formElement/moved', [movedFormElement]);1050      }1051      return movedFormElement;1052    };1053    /**1054     * @public1055     *1056     * @param object formElement1057     * @param bool1058     * @return object1059     * @publish view/formElement/removed1060     */1061    function removeFormElement(formElement, disablePublishersOnSet) {1062      var parentFormElement;1063      if (getUtility().isUndefinedOrNull(formElement)) {1064        formElement = getCurrentlySelectedFormElement();1065      }1066      if (1067        getFormElementDefinition(formElement, '_isTopLevelFormElement')1068        && getFormElementDefinition(formElement, '_isCompositeFormElement')1069        && getRootFormElement().get('renderables').length === 11070      ) {1071        Notification.error(1072          getFormElementDefinition(getRootFormElement(), 'modalRemoveElementLastAvailablePageFlashMessageTitle'),1073          getFormElementDefinition(getRootFormElement(), 'modalRemoveElementLastAvailablePageFlashMessageMessage'),1074          21075        );1076      } else {1077        parentFormElement = getFormEditorApp().removeFormElement(formElement, false);1078        if (!!!disablePublishersOnSet) {1079          getPublisherSubscriber().publish('view/formElement/removed', [parentFormElement]);1080        }1081      }1082      return parentFormElement;1083    };1084    /**1085     * @public1086     *1087     * @param string collectionElementIdentifier1088     * @param string collectionName1089     * @param object formElement1090     * @param object collectionElementConfiguration1091     * @param string referenceCollectionElementIdentifier1092     * @param bool1093     * @return void1094     * @publish view/collectionElement/new/added1095     */1096    function createAndAddPropertyCollectionElement(collectionElementIdentifier, collectionName, formElement, collectionElementConfiguration, referenceCollectionElementIdentifier, disablePublishersOnSet) {1097      getFormEditorApp().createAndAddPropertyCollectionElement(1098        collectionElementIdentifier,1099        collectionName,1100        formElement,1101        collectionElementConfiguration,1102        referenceCollectionElementIdentifier1103      );1104      if (!!!disablePublishersOnSet) {1105        getPublisherSubscriber().publish('view/collectionElement/new/added', [1106          collectionElementIdentifier,1107          collectionName,1108          formElement,1109          collectionElementConfiguration,1110          referenceCollectionElementIdentifier1111        ]);1112      }1113    };1114    /**1115     * @public1116     *1117     * @param string collectionElementToMove1118     * @param string position1119     * @param string referenceCollectionElement1120     * @param string collectionName1121     * @param object formElement1122     * @param bool1123     * @return void1124     */1125    function movePropertyCollectionElement(collectionElementToMove, position, referenceCollectionElement, collectionName, formElement, disablePublishersOnSet) {1126      if (getUtility().isUndefinedOrNull(formElement)) {1127        formElement = getCurrentlySelectedFormElement();1128      }1129      getFormEditorApp().movePropertyCollectionElement(1130        collectionElementToMove,1131        position,1132        referenceCollectionElement,1133        collectionName,1134        formElement,1135        false1136      );1137      if (!!!disablePublishersOnSet) {1138        getPublisherSubscriber().publish('view/collectionElement/moved', [1139          collectionElementToMove,1140          position,1141          referenceCollectionElement,1142          collectionName,1143          formElement]1144        );1145      }1146    };1147    /**1148     * @public1149     *1150     * @param string collectionElementIdentifier1151     * @param string collectionName1152     * @param object formElement1153     * @param bool1154     * @return void1155     * @publish view/collectionElement/removed1156     */1157    function removePropertyCollectionElement(collectionElementIdentifier, collectionName, formElement, disablePublishersOnSet) {1158      var collectionElementConfiguration, propertyData, propertyPath;1159      getFormEditorApp().removePropertyCollectionElement(collectionElementIdentifier, collectionName, formElement);1160      collectionElementConfiguration = getFormEditorApp().getPropertyCollectionElementConfiguration(1161        collectionElementIdentifier,1162        collectionName1163      );1164      if ('array' === $.type(collectionElementConfiguration['editors'])) {1165        for (var i = 0, len1 = collectionElementConfiguration['editors'].length; i < len1; ++i) {1166          if ('array' === $.type(collectionElementConfiguration['editors'][i]['additionalElementPropertyPaths'])) {1167            for (var j = 0, len2 = collectionElementConfiguration['editors'][i]['additionalElementPropertyPaths'].length; j < len2; ++j) {1168              getCurrentlySelectedFormElement().unset(collectionElementConfiguration['editors'][i]['additionalElementPropertyPaths'][j], true);1169            }1170          } else if (collectionElementConfiguration['editors'][i]['identifier'] === 'validationErrorMessage') {1171            propertyPath = getFormEditorApp().buildPropertyPath(1172              collectionElementConfiguration['editors'][i]['propertyPath']1173            );1174            propertyData = getCurrentlySelectedFormElement().get(propertyPath);1175            if (!getUtility().isUndefinedOrNull(propertyData)) {1176              for (var j = 0, len2 = collectionElementConfiguration['editors'][i]['errorCodes'].length; j < len2; ++j) {1177                for (var k = 0, len3 = propertyData.length; k < len3; ++k) {1178                  if (parseInt(collectionElementConfiguration['editors'][i]['errorCodes'][j]) === parseInt(propertyData[k]['code'])) {1179                    propertyData.splice(k, 1);1180                    --len3;1181                  }1182                }1183              }1184              getCurrentlySelectedFormElement().set(propertyPath, propertyData);1185            }1186          }1187        }1188      }1189      if (!!!disablePublishersOnSet) {1190        getPublisherSubscriber().publish('view/collectionElement/removed', [1191          collectionElementIdentifier,1192          collectionName,1193          formElement]1194        );1195      }1196    };1197    /* *************************************************************1198     * Batch methods1199     * ************************************************************/1200    /**1201     * @public1202     *1203     * @param bool1204     * @return void1205     */1206    function refreshSelectedElementItemsBatch(toolbarUseFadeEffect) {1207      var formElementTypeDefinition, selectedElement;1208      if (getUtility().isUndefinedOrNull(toolbarUseFadeEffect)) {1209        toolbarUseFadeEffect = true;1210      }1211      formElementTypeDefinition = getFormElementDefinition(getCurrentlySelectedFormElement());1212      getStage().removeAllStageToolbars();1213      removeAllStageElementSelectionsBatch();1214      removeAllStructureSelections();1215      if (!getFormEditorApp().isRootFormElementSelected()) {1216        removeStructureRootElementSelection();1217        addStructureSelection();1218        selectedElement = getStage().getAbstractViewFormElementDomElement();1219        if (formElementTypeDefinition['_isTopLevelFormElement']) {1220          addStagePanelSelection();1221        } else {1222          selectedElement.addClass(getHelper().getDomElementClassName('selectedFormElement'));1223          getStage().createAndAddAbstractViewFormElementToolbar(selectedElement, undefined, toolbarUseFadeEffect);1224        }1225        getStage().getAllFormElementDomElements().parent().removeClass(getHelper().getDomElementClassName('selectedCompositFormElement'));1226        if (!formElementTypeDefinition['_isTopLevelFormElement'] && formElementTypeDefinition['_isCompositeFormElement']) {1227          selectedElement.parent().addClass(getHelper().getDomElementClassName('selectedCompositFormElement'));1228        }1229      }1230    };1231    /**1232     * @public1233     *1234     * @param int1235     * @return void1236     * @throws 14786517321237     * @throws 14786517331238     * @throws 14786517341239     */1240    function selectPageBatch(pageIndex) {1241      assert('number' === $.type(pageIndex), 'Invalid parameter "pageIndex"', 1478651732);1242      assert(pageIndex >= 0, 'Invalid parameter "pageIndex"', 1478651733);1243      assert(pageIndex < getRootFormElement().get('renderables').length, 'Invalid parameter "pageIndex"', 1478651734);1244      getFormEditorApp().setCurrentlySelectedFormElement(getRootFormElement().get('renderables')[pageIndex]);1245      renewStructure();1246      renderPagination()1247      refreshSelectedElementItemsBatch();1248      renderInspectorEditors();1249    };1250    /**1251     * @public1252     *1253     * @return void1254     */1255    function removeAllStageElementSelectionsBatch() {1256      getStage().getAllFormElementDomElements().removeClass(getHelper().getDomElementClassName('selectedFormElement'));1257      removeStagePanelSelection();1258      getStage().getAllFormElementDomElements().parent().removeClass(getHelper().getDomElementClassName('sortableHover'));1259    };1260    /**1261     * @public1262     *1263     * @return void1264     */1265    function onViewReadyBatch() {1266      $(getHelper().getDomElementDataIdentifierSelector('structureSection'))1267        .css({1268          width: _configuration['panels']['structure']['width'] + 'px',1269          left: '-=' + _configuration['panels']['structure']['width'] + 'px'1270        });1271      $(getHelper().getDomElementDataIdentifierSelector('inspectorSection'))1272        .css({1273          width: _configuration['panels']['inspector']['width'] + 'px',1274          right: '-=' + _configuration['panels']['inspector']['width'] + 'px'1275        });1276      $(getHelper().getDomElementClassName('headerButtonBar', true))1277        .css({1278          'margin-left': _configuration['panels']['structure']['width'] + 'px'1279        });1280      $(getHelper().getDomElementDataIdentifierSelector('stageContainer'))1281        .css({1282          'margin-left': _configuration['panels']['stage']['marginLeft'] + 'px',1283          'margin-right': _configuration['panels']['stage']['marginRight'] + 'px'1284        });1285      hideComponent($(getHelper().getDomElementDataIdentifierSelector('buttonStageNewElementBottom')));1286      hideComponent($(getHelper().getDomElementDataIdentifierSelector('stageNewElementRow')));1287      setStageHeadline();1288      setStructureRootElementTitle();1289      renderAbstractStageArea(false);1290      renewStructure();1291      addStructureRootElementSelection();1292      renderInspectorEditors();1293      renderPagination();1294      hideComponent($(getHelper().getDomElementDataIdentifierSelector('moduleLoadingIndicator')));1295      showComponent($(getHelper().getDomElementDataIdentifierSelector('moduleWrapper')));1296      showComponent($(getHelper().getDomElementDataIdentifierSelector('buttonHeaderSave')));1297      showComponent($(getHelper().getDomElementDataIdentifierSelector('buttonHeaderSettings')));1298      showComponent($(getHelper().getDomElementDataIdentifierSelector('buttonHeaderClose')));1299      showComponent($(getHelper().getDomElementDataIdentifierSelector('buttonHeaderNewPage')));1300      showComponent($(getHelper().getDomElementDataIdentifierSelector('buttonHeaderUndo')));1301      showComponent($(getHelper().getDomElementDataIdentifierSelector('buttonHeaderRedo')));1302      setButtonActive($(getHelper().getDomElementDataIdentifierSelector('buttonHeaderViewModeAbstract')));1303    };1304    /**1305     * @public1306     *1307     * @param object1308     * @param object1309     * @return void1310     */1311    function onAbstractViewDndStartBatch(draggedFormElementDomElement, draggedFormPlaceholderDomElement) {1312      draggedFormPlaceholderDomElement.removeClass(getHelper().getDomElementClassName('sortableHover'));1313    };1314    /**1315     * @public1316     *1317     * @param object1318     * @param string1319     * @param object1320     * @return void1321     */1322    function onAbstractViewDndChangeBatch(placeholderDomElement, parentFormElementIdentifierPath, enclosingCompositeFormElement) {1323      getStage().getAllFormElementDomElements().parent().removeClass(getHelper().getDomElementClassName('sortableHover'));1324      if (enclosingCompositeFormElement) {1325        getStage().getAbstractViewParentFormElementWithinDomElement(placeholderDomElement).parent().addClass(getHelper().getDomElementClassName('sortableHover'));1326      }1327    };1328    /**1329     * @public1330     *1331     * @param object1332     * @param string1333     * @param string1334     * @param string1335     * @return void1336     * @throws 14725022371337     */1338    function onAbstractViewDndUpdateBatch(movedDomElement, movedFormElementIdentifierPath, previousFormElementIdentifierPath, nextFormElementIdentifierPath) {1339      var movedFormElement, parentFormElementIdentifierPath;1340      if (nextFormElementIdentifierPath) {1341        movedFormElement = moveFormElement(movedFormElementIdentifierPath, 'before', nextFormElementIdentifierPath);1342      } else if (previousFormElementIdentifierPath) {1343        movedFormElement = moveFormElement(movedFormElementIdentifierPath, 'after', previousFormElementIdentifierPath);1344      } else {1345        parentFormElementIdentifierPath = getStage().getAbstractViewParentFormElementIdentifierPathWithinDomElement(movedDomElement);1346        if (parentFormElementIdentifierPath) {1347          movedFormElement = moveFormElement(movedFormElementIdentifierPath, 'inside', parentFormElementIdentifierPath);1348        } else {1349          assert(false, 'Next element, previous or parent element need to be set.', 1472502237);1350        }1351      }1352      getStage()1353        .getAbstractViewFormElementWithinDomElement(movedDomElement)1354        .attr(1355          getHelper().getDomElementDataAttribute('elementIdentifier'),1356          movedFormElement.get('__identifierPath')1357        );1358    };1359    /**1360     * @public1361     *1362     * @param object1363     * @param string1364     * @param object1365     * @return void1366     */1367    function onStructureDndChangeBatch(placeholderDomElement, parentFormElementIdentifierPath, enclosingCompositeFormElement) {1368      getStructure()1369        .getAllTreeNodes()1370        .parent()1371        .removeClass(getHelper().getDomElementClassName('sortableHover'));1372      getStage()1373        .getAllFormElementDomElements()1374        .parent()1375        .removeClass(getHelper().getDomElementClassName('sortableHover'));1376      if (enclosingCompositeFormElement) {1377        getStructure()1378          .getParentTreeNodeWithinDomElement(placeholderDomElement)1379          .parent()1380          .addClass(getHelper().getDomElementClassName('sortableHover'));1381        getStage()1382          .getAbstractViewFormElementDomElement(enclosingCompositeFormElement)1383          .parent()1384          .addClass(getHelper().getDomElementClassName('sortableHover'));1385      }1386    };1387    /**1388     * @public1389     *1390     * @param object1391     * @param string1392     * @param string1393     * @param string1394     * @return void1395     * @throws 14790486461396     */1397    function onStructureDndUpdateBatch(movedDomElement, movedFormElementIdentifierPath, previousFormElementIdentifierPath, nextFormElementIdentifierPath) {1398      var movedFormElement, parentFormElementIdentifierPath;1399      if (nextFormElementIdentifierPath) {1400        movedFormElement = moveFormElement(movedFormElementIdentifierPath, 'before', nextFormElementIdentifierPath);1401      } else if (previousFormElementIdentifierPath) {1402        movedFormElement = moveFormElement(movedFormElementIdentifierPath, 'after', previousFormElementIdentifierPath);1403      } else {1404        parentFormElementIdentifierPath = getStructure().getParentTreeNodeIdentifierPathWithinDomElement(movedDomElement);1405        if (parentFormElementIdentifierPath) {1406          movedFormElement = moveFormElement(movedFormElementIdentifierPath, 'inside', parentFormElementIdentifierPath);1407        } else {1408          getFormEditorApp().assert(false, 'Next element, previous or parent element need to be set.', 1479048646);1409        }1410      }1411      getStructure()1412        .getTreeNodeWithinDomElement(movedDomElement)1413        .attr(1414          getHelper().getDomElementDataAttribute('elementIdentifier'),1415          movedFormElement.get('__identifierPath')1416        );1417    };1418    /* *************************************************************1419     * Misc1420     * ************************************************************/1421    /**1422     * @public1423     *1424     * @return void1425     */1426    function closeEditor() {1427      document.location.href = $(getHelper().getDomElementDataIdentifierSelector('buttonHeaderClose')).prop('href');1428    };1429    /**1430     * @public1431     *1432     * @param object1433     * @param string1434     * @return void1435     */1436    function setElementValidationErrorClass(element, classIdentifier) {1437      if (getFormEditorApp().getUtility().isUndefinedOrNull(classIdentifier)) {1438        element.addClass(getHelper().getDomElementClassName('validationErrors'));1439      } else {1440        element.addClass(getHelper().getDomElementClassName(classIdentifier));1441      }1442    };1443    /**1444     * @public1445     *1446     * @param object1447     * @param string1448     * @return void1449     */1450    function removeElementValidationErrorClass(element, classIdentifier) {1451      if (getFormEditorApp().getUtility().isUndefinedOrNull(classIdentifier)) {1452        element.removeClass(getHelper().getDomElementClassName('validationErrors'));1453      } else {1454        element.removeClass(getHelper().getDomElementClassName(classIdentifier));1455      }1456    };1457    /**1458     * @public1459     *1460     * @param object1461     * @return void1462     */1463    function showComponent(element) {1464      element.removeClass(getHelper().getDomElementClassName('hidden')).show();1465    };1466    /**1467     * @public1468     *1469     * @param object1470     * @return void1471     */1472    function hideComponent(element) {1473      element.addClass(getHelper().getDomElementClassName('hidden')).hide();1474    };1475    /**1476     * @public1477     *1478     * @param object1479     * @return void1480     */1481    function enableButton(buttonElement) {1482      buttonElement.prop('disabled', false).removeClass(getHelper().getDomElementClassName('disabled'));1483    };1484    /**1485     * @public1486     *1487     * @param object1488     * @return void1489     */1490    function disableButton(buttonElement) {1491      buttonElement.prop('disabled', 'disabled').addClass(getHelper().getDomElementClassName('disabled'));1492    };1493    /**1494     * @public1495     *1496     * @param object1497     * @return void1498     */1499    function setButtonActive(buttonElement) {1500      buttonElement.addClass(getHelper().getDomElementClassName('active'));1501    };1502    /**1503     * @public1504     *1505     * @param object1506     * @return void1507     */1508    function removeButtonActive(buttonElement) {1509      buttonElement.removeClass(getHelper().getDomElementClassName('active'));1510    };1511    /**1512     * @public1513     *1514     * @return void1515     */1516    function showSaveButtonSpinnerIcon() {1517      Icons.getIcon(getHelper().getDomElementDataAttributeValue('iconSaveSpinner'), Icons.sizes.small).then(function(markup) {1518        $(getHelper().getDomElementDataIdentifierSelector('iconSave')).replaceWith($(markup));1519      });1520    };1521    /**1522     * @public1523     *1524     * @return void1525     */1526    function showSaveButtonSaveIcon() {1527      Icons.getIcon(getHelper().getDomElementDataAttributeValue('iconSave'), Icons.sizes.small).then(function(markup) {1528        $(getHelper().getDomElementDataIdentifierSelector('iconSaveSpinner')).replaceWith($(markup));1529      });1530    };1531    /**1532     * @public1533     *1534     * @return void1535     */1536    function showSaveSuccessMessage() {1537      Notification.success(1538        getFormElementDefinition(getRootFormElement(), 'saveSuccessFlashMessageTitle'),1539        getFormElementDefinition(getRootFormElement(), 'saveSuccessFlashMessageMessage'),1540        21541      );1542    };...

StageComponent.js

Source:StageComponent.js

...133     *134     * @param object135     * @return object136     */137    function getHelper(configuration) {138      if (getUtility().isUndefinedOrNull(configuration)) {139        return Helper.setConfiguration(_configuration);140      }141      return Helper.setConfiguration(configuration);142    };143    /**144     * @private145     *146     * @return object147     */148    function getUtility() {149      return getFormEditorApp().getUtility();150    };151    /**152     * @private153     *154     * @return object155     */156    function getViewModel() {157      return getFormEditorApp().getViewModel();158    };159    /**160     * @private161     *162     * @param mixed test163     * @param string message164     * @param int messageCode165     * @return void166     */167    function assert(test, message, messageCode) {168      return getFormEditorApp().assert(test, message, messageCode);169    };170    /**171     * @private172     *173     * @return object174     */175    function getRootFormElement() {176      return getFormEditorApp().getRootFormElement();177    };178    /**179     * @private180     *181     * @return object182     */183    function getCurrentlySelectedFormElement() {184      return getFormEditorApp().getCurrentlySelectedFormElement();185    };186    /**187     * @private188     *189     * @return object190     */191    function getPublisherSubscriber() {192      return getFormEditorApp().getPublisherSubscriber();193    };194    /**195     * @private196     *197     * @param object198     * @param string199     * @return mixed200     */201    function getFormElementDefinition(formElement, formElementDefinitionKey) {202      return getFormEditorApp().getFormElementDefinition(formElement, formElementDefinitionKey);203    };204    /**205     * @private206     *207     * @return object208     * @return string209     * @return void210     */211    function _setTemplateTextContent(domElement, content) {212      if (getUtility().isNonEmptyString(content)) {213        $(domElement).text(content);214      }215    }216    /**217     * @private218     *219     * @param object220     * @param object221     * @return void222     * @publish view/stage/abstract/render/template/perform223     */224    function _renderTemplateDispatcher(formElement, template) {225      switch (formElement.get('type')) {226        case 'Checkbox':227          renderCheckboxTemplate(formElement, template);228          break;229        case 'FileUpload':230        case 'ImageUpload':231          renderFileUploadTemplates(formElement, template);232          break;233        case 'SingleSelect':234        case 'RadioButton':235        case 'MultiSelect':236        case 'MultiCheckbox':237          renderSelectTemplates(formElement, template);238          break;239        case 'Textarea':240        case 'AdvancedPassword':241        case 'Password':242        case 'Text':243        case 'Email':244        case 'Url':245        case 'Telephone':246        case 'Number':247        case 'DatePicker':248        case 'Date':249          renderSimpleTemplateWithValidators(formElement, template);250          break;251        case 'Fieldset':252        case 'GridRow':253        case 'SummaryPage':254        case 'Page':255        case 'StaticText':256        case 'Hidden':257        case 'ContentElement':258          renderSimpleTemplate(formElement, template);259          break;260      }261      getPublisherSubscriber().publish('view/stage/abstract/render/template/perform', [formElement, template]);262    };263    /**264     * @private265     *266     * @param object267     * @return object268     * @throws 1478987818269     */270    function _renderNestedSortableListItem(formElement) {271      var childFormElements, childList, listItem, template;272      listItem = $('<li></li>');273      if (!getFormElementDefinition(formElement, '_isCompositeFormElement')) {274        listItem.addClass(getHelper().getDomElementClassName('noNesting'));275      }276      if (getFormElementDefinition(formElement, '_isTopLevelFormElement')) {277        listItem.addClass(getHelper().getDomElementClassName('formElementIsTopLevel'));278      }279      if (getFormElementDefinition(formElement, '_isCompositeFormElement')) {280        listItem.addClass(getHelper().getDomElementClassName('formElementIsComposit'));281      }282      try {283        template = getHelper().getTemplate('FormElement-' + formElement.get('type')).clone();284      } catch (error) {285        template = getHelper().getTemplate('FormElement-_UnknownElement').clone();286        assert(287          template.length,288          'No template found for element "' + formElement.get('__identifierPath') + '"',289          1478987818290        );291      }292      template = $('<div></div>')293        .attr(getHelper().getDomElementDataAttribute('elementIdentifier'), formElement.get('__identifierPath'))294        .append($(template.html()));295      if (getFormElementDefinition(formElement, '_isCompositeFormElement')) {296        template.attr(getHelper().getDomElementDataAttribute('abstractType'), 'isCompositeFormElement');297      }298      if (getFormElementDefinition(formElement, '_isTopLevelFormElement')) {299        template.attr(getHelper().getDomElementDataAttribute('abstractType'), 'isTopLevelFormElement');300      }301      listItem.append(template);302      _renderTemplateDispatcher(formElement, template);303      childFormElements = formElement.get('renderables');304      childList = null;305      if ('array' === $.type(childFormElements)) {306        childList = $('<ol></ol>');307        if (getFormElementDefinition(formElement, '_isTopLevelFormElement')) {308          childList.addClass(getHelper().getDomElementClassName('sortable'));309        }310        for (var i = 0, len = childFormElements.length; i < len; ++i) {311          childList.append(_renderNestedSortableListItem(childFormElements[i]));312        }313      }314      if (childList) {315        listItem.append(childList);316      }317      return listItem;318    };319    /**320     * @private321     *322     * @return void323     * @publish view/stage/abstract/dnd/start324     * @publish view/stage/abstract/dnd/stop325     * @publish view/stage/abstract/dnd/change326     * @publish view/stage/abstract/dnd/update327     */328    function _addSortableEvents() {329      $('ol.' + getHelper().getDomElementClassName('sortable'), _stageDomElement).nestedSortable({330        forcePlaceholderSize: true,331        handle: 'div' + getHelper().getDomElementDataAttribute('elementIdentifier', 'bracesWithKey'),332        helper: 'clone',333        items: 'li:not(' + getHelper().getDomElementDataAttribute('noSorting', 'bracesWithKey') + ')',334        opacity: .6,335        revert: 250,336        delay: 200,337        tolerance: 'pointer',338        toleranceElement: '> div',339        isAllowed: function(placeholder, placeholderParent, currentItem) {340          var formElementIdentifierPath, formElementTypeDefinition, targetFormElementIdentifierPath,341            targetFormElementTypeDefinition;342          formElementIdentifierPath = getAbstractViewFormElementIdentifierPathWithinDomElement($(currentItem));343          targetFormElementIdentifierPath = getAbstractViewFormElementIdentifierPathWithinDomElement($(placeholderParent));344          if (!targetFormElementIdentifierPath) {345            targetFormElementIdentifierPath = getFormEditorApp().getCurrentlySelectedPage();346          }347          return true;348        },349        start: function(e, o) {350          getPublisherSubscriber().publish('view/stage/abstract/dnd/start', [$(o.item), $(o.placeholder)]);351        },352        stop: function(e, o) {353          getPublisherSubscriber().publish('view/stage/abstract/dnd/stop', [354            getAbstractViewFormElementIdentifierPathWithinDomElement($(o.item))355          ]);356        },357        change: function(e, o) {358          var enclosingCompositeFormElement, parentFormElementIdentifierPath;359          parentFormElementIdentifierPath = getAbstractViewParentFormElementIdentifierPathWithinDomElement($(o.placeholder));360          if (parentFormElementIdentifierPath) {361            enclosingCompositeFormElement = getFormEditorApp()362              .findEnclosingCompositeFormElementWhichIsNotOnTopLevel(parentFormElementIdentifierPath);363          }364          getPublisherSubscriber().publish('view/stage/abstract/dnd/change', [365            $(o.placeholder),366            parentFormElementIdentifierPath, enclosingCompositeFormElement367          ]);368        },369        update: function(e, o) {370          var nextFormElementIdentifierPath, movedFormElement, movedFormElementIdentifierPath,371            parentFormElementIdentifierPath, previousFormElementIdentifierPath;372          movedFormElementIdentifierPath = getAbstractViewFormElementIdentifierPathWithinDomElement($(o.item));373          previousFormElementIdentifierPath = getAbstractViewSiblingFormElementIdentifierPathWithinDomElement($(o.item), 'prev');374          nextFormElementIdentifierPath = getAbstractViewSiblingFormElementIdentifierPathWithinDomElement($(o.item), 'next');375          getPublisherSubscriber().publish('view/stage/abstract/dnd/update', [376            $(o.item),377            movedFormElementIdentifierPath,378            previousFormElementIdentifierPath,379            nextFormElementIdentifierPath380          ]);381        }382      });383    };384    /* *************************************************************385     * Public Methods386     * ************************************************************/387    /**388     * @public389     *390     * @return object391     */392    function getStageDomElement() {393      return _stageDomElement;394    };395    /**396     * @public397     *398     * @param object399     * @return object400     * @throws 1479037151401     */402    function buildTitleByFormElement(formElement) {403      if (getUtility().isUndefinedOrNull(formElement)) {404        formElement = getRootFormElement();405      }406      assert('object' === $.type(formElement), 'Invalid parameter "formElement"', 1479037151);407      return $('<span></span>')408        .text((formElement.get('label') ? formElement.get('label') : formElement.get('identifier')));409    };410    /**411     * @public412     *413     * @param string title414     * @return void415     */416    function setStageHeadline(title) {417      if (getUtility().isUndefinedOrNull(title)) {418        title = buildTitleByFormElement();419      }420      $(getHelper().getDomElementDataIdentifierSelector('stageHeadline')).html(title);421    };422    /**423     * @public424     *425     * @return object426     */427    function getStagePanelDomElement() {428      return $(getHelper().getDomElementDataIdentifierSelector('stagePanel'));429    };430    /**431     * @public432     *433     * @return void434     */435    function renderPagination() {436      var pageCount;437      pageCount = getRootFormElement().get('renderables').length;438      getViewModel().enableButton($(getHelper().getDomElementDataIdentifierSelector('buttonPaginationPrevious')));439      getViewModel().enableButton($(getHelper().getDomElementDataIdentifierSelector('buttonPaginationNext')));440      if (getFormEditorApp().getCurrentlySelectedPageIndex() === 0) {441        getViewModel().disableButton($(getHelper().getDomElementDataIdentifierSelector('buttonPaginationPrevious')));442      }443      if (pageCount === 1 || getFormEditorApp().getCurrentlySelectedPageIndex() === (pageCount - 1)) {444        getViewModel().disableButton($(getHelper().getDomElementDataIdentifierSelector('buttonPaginationNext')));445      }446      $(getHelper().getDomElementDataIdentifierSelector('paginationTitle')).text(447        getFormElementDefinition(getRootFormElement(), 'paginationTitle')448          .replace('{0}', getFormEditorApp().getCurrentlySelectedPageIndex() + 1)449          .replace('{1}', pageCount)450      );451    };452    /**453     * @public454     *455     * @return void456     */457    function renderUndoRedo() {458      getViewModel().enableButton($(getHelper().getDomElementDataIdentifierSelector('buttonHeaderUndo')));459      getViewModel().enableButton($(getHelper().getDomElementDataIdentifierSelector('buttonHeaderRedo')));460      if (getFormEditorApp().getCurrentApplicationStatePosition() + 1 >= getFormEditorApp().getCurrentApplicationStates()) {461        getViewModel().disableButton($(getHelper().getDomElementDataIdentifierSelector('buttonHeaderUndo')));462      }463      if (getFormEditorApp().getCurrentApplicationStatePosition() === 0) {464        getViewModel().disableButton($(getHelper().getDomElementDataIdentifierSelector('buttonHeaderRedo')));465      }466    };467    /**468     * @public469     *470     * @param object471     * @return string472     */473    function getAllFormElementDomElements() {474      return $(getHelper().getDomElementDataAttribute('elementIdentifier', 'bracesWithKey'),475        _stageDomElement476      );477    };478    /* *************************************************************479     * Abstract stage480     * ************************************************************/481    /**482     * @public483     *484     * @param int485     * @return object486     * @throws 1478721208487     */488    function renderFormDefinitionPageAsSortableList(pageIndex) {489      assert(490        'number' === $.type(pageIndex),491        'Invalid parameter "pageIndex"',492        1478721208493      );494      return $('<ol></ol>')495        .append(_renderNestedSortableListItem(getRootFormElement().get('renderables')[pageIndex]));496    };497    /**498     * @public499     *500     * @param object501     * @return string502     */503    function getAbstractViewParentFormElementWithinDomElement(element) {504      return $(element)505        .parent()506        .closest('li')507        .find(getHelper().getDomElementDataAttribute('elementIdentifier', 'bracesWithKey'))508        .first();509    };510    /**511     * @public512     *513     * @param object514     * @return string515     */516    function getAbstractViewParentFormElementIdentifierPathWithinDomElement(element) {517      return getAbstractViewParentFormElementWithinDomElement(element)518        .attr(getHelper().getDomElementDataAttribute('elementIdentifier'));519    };520    /**521     * @public522     *523     * @param object524     * @return string525     */526    function getAbstractViewFormElementWithinDomElement(element) {527      return $(element)528        .find(getHelper().getDomElementDataAttribute('elementIdentifier', 'bracesWithKey'))529        .first();530    };531    /**532     * @public533     *534     * @param object535     * @return string536     */537    function getAbstractViewFormElementIdentifierPathWithinDomElement(element) {538      return getAbstractViewFormElementWithinDomElement($(element))539        .attr(getHelper().getDomElementDataAttribute('elementIdentifier'));540    };541    /**542     * @private543     *544     * @param object545     * @param string546     * @return string547     */548    function getAbstractViewSiblingFormElementIdentifierPathWithinDomElement(element, position) {549      var formElementIdentifierPath;550      if (getUtility().isUndefinedOrNull(position)) {551        position = 'prev';552      }553      formElementIdentifierPath = getAbstractViewFormElementIdentifierPathWithinDomElement(element);554      element = (position === 'prev') ? $(element).prev('li') : $(element).next('li');555      return element.find(getHelper().getDomElementDataAttribute('elementIdentifier', 'bracesWithKey'))556        .not(getHelper().getDomElementDataAttribute('elementIdentifier', 'bracesWithKeyValue', [formElementIdentifierPath]))557        .first()558        .attr(getHelper().getDomElementDataAttribute('elementIdentifier'));559    };560    /**561     * @public562     *563     * @param string|object564     * @return object565     */566    function getAbstractViewFormElementDomElement(formElement) {567      var formElementIdentifierPath;568      if ('string' === $.type(formElement)) {569        formElementIdentifierPath = formElement;570      } else {571        if (getUtility().isUndefinedOrNull(formElement)) {572          formElementIdentifierPath = getCurrentlySelectedFormElement().get('__identifierPath');573        } else {574          formElementIdentifierPath = formElement.get('__identifierPath');575        }576      }577      return $(getHelper()578        .getDomElementDataAttribute('elementIdentifier', 'bracesWithKeyValue', [formElementIdentifierPath]), _stageDomElement);579    };580    /**581     * @public582     *583     * @return void584     */585    function removeAllStageToolbars() {586      $(getHelper().getDomElementDataIdentifierSelector('abstractViewToolbar'), _stageDomElement).off().empty().remove();587    };588    /**589     * @public590     *591     * @param object592     * @return object593     * @publish view/insertElements/perform/after594     * @publish view/insertElements/perform/inside595     * @throws 1479035778596     */597    function createAbstractViewFormElementToolbar(formElement) {598      var formElementTypeDefinition, template;599      assert('object' === $.type(formElement), 'Invalid parameter "formElement"', 1479035778);600      formElementTypeDefinition = getFormElementDefinition(formElement);601      if (formElementTypeDefinition['_isTopLevelFormElement']) {602        return $();603      }604      template = getHelper().getTemplate('FormElement-_ElementToolbar').clone();605      if (!template.length) {606        return $();607      }608      template = $($(template.html()));609      getHelper().getTemplatePropertyDomElement('_type', template).text(formElement.get('type'));610      getHelper().getTemplatePropertyDomElement('_identifier', template).text(formElement.get('identifier'));611      if (formElementTypeDefinition['_isCompositeFormElement']) {612        getViewModel().hideComponent($(getHelper().getDomElementDataIdentifierSelector('abstractViewToolbarNewElement'), template));613        $(getHelper().getDomElementDataIdentifierSelector('abstractViewToolbarNewElementSplitButtonAfter'), template).on('click', function(e) {614          getPublisherSubscriber().publish('view/stage/abstract/elementToolbar/button/newElement/clicked', [615              'view/insertElements/perform/after',616              {617                disableElementTypes: [],618                onlyEnableElementTypes: []619              }620            ]621          );622        });623        $(getHelper().getDomElementDataIdentifierSelector('abstractViewToolbarNewElementSplitButtonInside'), template).on('click', function(e) {624          getPublisherSubscriber().publish('view/stage/abstract/elementToolbar/button/newElement/clicked', [625              'view/insertElements/perform/inside',626              {627                disableElementTypes: [],628                onlyEnableElementTypes: []629              }630            ]631          );632        });633      } else {634        getViewModel().hideComponent($(getHelper().getDomElementDataIdentifierSelector('abstractViewToolbarNewElementSplitButton'), template));635        $(getHelper().getDomElementDataIdentifierSelector('abstractViewToolbarNewElement'), template).on('click', function(e) {636          getPublisherSubscriber().publish(637            'view/stage/abstract/elementToolbar/button/newElement/clicked', [638              'view/insertElements/perform/after',639              {640                disableElementTypes: []641              }642            ]643          );644        });645      }646      $(getHelper().getDomElementDataIdentifierSelector('abstractViewToolbarRemoveElement'), template).on('click', function(e) {647        getViewModel().showRemoveFormElementModal();648      });649      return template;650    };651    /**652     * @public653     *654     * @param object655     * @param object656     * @param bool657     * @return void658     */659    function createAndAddAbstractViewFormElementToolbar(selectedFormElementDomElement, formElement, useFadeEffect) {660      var toolbar;661      if (getUtility().isUndefinedOrNull(formElement)) {662        formElement = getCurrentlySelectedFormElement();663      }664      if (useFadeEffect) {665        createAbstractViewFormElementToolbar(formElement).fadeOut(0, function() {666          selectedFormElementDomElement.prepend($(this));667          $(getHelper().getDomElementDataIdentifierSelector('abstractViewToolbar'), selectedFormElementDomElement).fadeIn('fast');668        });669      } else {670        selectedFormElementDomElement.prepend(createAbstractViewFormElementToolbar(formElement));671      }672    };673    /**674     * @public675     *676     * @param int677     * @param function678     * @return void679     * @publish view/stage/dnd/stop680     * @publish view/stage/element/clicked681     * @throws 1478169511682     */683    function renderAbstractStageArea(pageIndex, callback) {684      if (getUtility().isUndefinedOrNull(pageIndex)) {685        pageIndex = getFormEditorApp().getCurrentlySelectedPageIndex();686      }687      _stageDomElement.off().empty().append(renderFormDefinitionPageAsSortableList(pageIndex));688      _stageDomElement.on("click", function(e) {689        var formElementIdentifierPath;690        formElementIdentifierPath = $(e.target)691          .closest(getHelper().getDomElementDataAttribute('elementIdentifier', 'bracesWithKey'))692          .attr(getHelper().getDomElementDataAttribute('elementIdentifier'));693        if (694          getUtility().isUndefinedOrNull(formElementIdentifierPath)695          || !getUtility().isNonEmptyString(formElementIdentifierPath)696        ) {697          return;698        }699        getPublisherSubscriber().publish('view/stage/element/clicked', [formElementIdentifierPath]);700      });701      if (_configuration['isSortable']) {702        _addSortableEvents();703      }704      if ('function' === $.type(callback)) {705        callback();706      }707    };708    /* *************************************************************709     * Preview stage710     * ************************************************************/711    /**712     * @public713     *714     * @param string html715     * @return void716     * @throws 1475424409717     */718    function renderPreviewStageArea(html) {719      assert(getUtility().isNonEmptyString(html), 'Invalid parameter "html"', 1475424409);720      _stageDomElement.off().empty().html(html);721      $(':input', _stageDomElement).prop('disabled', 'disabled').on('click dblclick select focus keydown keypress keyup mousedown mouseup', function(e) {722        return e.preventDefault();723      });724      $('form', _stageDomElement).submit(function(e) {725        return e.preventDefault();726      });727      getAllFormElementDomElements().each(function(i, element) {728        var formElement, metaLabel;729        formElement = getFormEditorApp()730          .getFormElementByIdentifierPath($(this).data('elementIdentifierPath'));731        if (732          !getFormElementDefinition(formElement, '_isTopLevelFormElement')733          && getFormElementDefinition(formElement, '_isCompositeFormElement')734        ) {735          $(this).tooltip({736            title: 'identifier: ' + formElement.get('identifier') + ' (type: ' + formElement.get('type') + ')',737            placement: 'right'738          });739        } else if (740          !getFormElementDefinition(formElement, '_isTopLevelFormElement')741          && !getFormElementDefinition(formElement, '_isCompositeFormElement')742        ) {743          $(this).tooltip({744            title: 'identifier: ' + formElement.get('identifier') + ' (type: ' + formElement.get('type') + ')',745            placement: 'left'746          });747        }748        if (getFormElementDefinition(formElement, '_isTopLevelFormElement')) {749          $(this).addClass(getHelper().getDomElementClassName('formElementIsTopLevel'));750        }751        if (getFormElementDefinition(formElement, '_isCompositeFormElement')) {752          $(this).addClass(getHelper().getDomElementClassName('formElementIsComposit'));753        }754      });755    };756    /* *************************************************************757     * Template rendering758     * ************************************************************/759    /**760     * @public761     *762     * @param object763     * @param template764     * @param function765     * @return void766     */767    function eachTemplateProperty(formElement, template, callback) {768      $(getHelper().getDomElementDataAttribute('templateProperty', 'bracesWithKey'), template).each(function(i, element) {769        var propertyPath, propertyValue;770        propertyPath = $(element).attr(getHelper().getDomElementDataAttribute('templateProperty'));771        propertyValue = formElement.get(propertyPath);772        if ('function' === $.type(callback)) {773          callback(propertyPath, propertyValue, element);774        }775      });776    };777    /**778     * @private779     *780     * @return object781     * @return object782     * @return void783     */784    function renderCheckboxTemplate(formElement, template) {785      renderSimpleTemplateWithValidators(formElement, template);786      eachTemplateProperty(formElement, template, function(propertyPath, propertyValue, domElement) {787        if (788          ('boolean' === $.type(propertyValue) && propertyValue)789          || propertyValue === 'true'790          || propertyValue === 1791          || propertyValue === "1"792        ) {793          $(domElement).addClass(getHelper().getDomElementClassName('noNesting'));794        }795      });796    };797    /**798     * @public799     *800     * @return object801     * @return object802     * @return void803     * @throws 1479035696804     */805    function renderSimpleTemplate(formElement, template) {806      assert('object' === $.type(formElement), 'Invalid parameter "formElement"', 1479035696);807      eachTemplateProperty(formElement, template, function(propertyPath, propertyValue, domElement) {808        _setTemplateTextContent(domElement, propertyValue);809      });810      Icons.getIcon(811        getFormElementDefinition(formElement, 'iconIdentifier'),812        Icons.sizes.small,813        null,814        Icons.states.default,815        Icons.markupIdentifiers.inline816      ).then(function(icon) {817        $(getHelper().getDomElementDataIdentifierSelector('formElementIcon'), template)818          .append($(icon).addClass(getHelper().getDomElementClassName('icon')));819      });820      getHelper()821        .getTemplatePropertyDomElement('_type', template)822        .append(formElement.get('type'));823      getHelper()824        .getTemplatePropertyDomElement('_identifier', template)825        .append(formElement.get('identifier'));826    };827    /**828     * @public829     *830     * @return object831     * @return object832     * @return void833     * @throws 1479035674834     */835    function renderSimpleTemplateWithValidators(formElement, template) {836      var validators, validatorsCountWithoutRequired, validatorsTemplateContent;837      assert('object' === $.type(formElement), 'Invalid parameter "formElement"', 1479035674);838      renderSimpleTemplate(formElement, template);839      validatorsTemplateContent = $(840        getHelper().getDomElementDataIdentifierSelector('validatorsContainer'),841        $(template)842      ).clone();843      $(getHelper().getDomElementDataIdentifierSelector('validatorsContainer'), $(template)).empty();844      validators = formElement.get('validators');845      if ('array' === $.type(validators)) {846        validatorsCountWithoutRequired = 0;847        if (validators.length > 0) {848          for (var i = 0, len = validators.length; i < len; ++i) {849            var collectionElementConfiguration, rowTemplate;850            if ('NotEmpty' === validators[i]['identifier']) {851              getHelper()852                .getTemplatePropertyDomElement('_required', template)853                .text('*');854              continue;855            }856            validatorsCountWithoutRequired++;857            collectionElementConfiguration = getFormEditorApp()858              .getFormEditorDefinition('validators', validators[i]['identifier']);859            rowTemplate = $($(validatorsTemplateContent).clone());860            getHelper()861              .getTemplatePropertyDomElement('_label', rowTemplate)862              .append(collectionElementConfiguration['label']);863            $(getHelper().getDomElementDataIdentifierSelector('validatorsContainer'), $(template))864              .append(rowTemplate.html());865          }866          if (validatorsCountWithoutRequired > 0) {867            Icons.getIcon(868              getHelper().getDomElementDataAttributeValue('iconValidator'),869              Icons.sizes.small,870              null,871              Icons.states.default,872              Icons.markupIdentifiers.inline873            ).then(function(icon) {874              $(getHelper().getDomElementDataIdentifierSelector('validatorIcon'), $(template))875                .append($(icon).addClass(getHelper().getDomElementClassName('icon')));876            });877          }878        }879      }880    };881    /**882     * @public883     *884     * @return object885     * @return object886     * @return void887     */888    function renderSelectTemplates(formElement, template) {889      var appendMultiValue, defaultValue, multiValueTemplateContent, propertyPath, propertyValue;890      multiValueTemplateContent = $(891        getHelper().getDomElementDataIdentifierSelector('multiValueContainer'),892        $(template)893      ).clone();894      $(getHelper().getDomElementDataIdentifierSelector('multiValueContainer'), $(template)).empty();895      renderSimpleTemplateWithValidators(formElement, template);896      propertyPath = $(getHelper().getDomElementDataIdentifierSelector('multiValueContainer'), $(template))897        .attr(getHelper().getDomElementDataAttribute('templateProperty'));898      propertyValue = formElement.get(propertyPath);899      appendMultiValue = function(label, value, defaultValue) {900        var isPreselected, rowTemplate;901        isPreselected = false;902        rowTemplate = $($(multiValueTemplateContent).clone());903        for (var defaultValueKey in defaultValue) {904          if (!defaultValue.hasOwnProperty(defaultValueKey)) {905            continue;906          }907          if (defaultValue[defaultValueKey] === value) {908            isPreselected = true;909            break;910          }911        }912        getHelper().getTemplatePropertyDomElement('_label', rowTemplate).append(label);913        if (isPreselected) {914          getHelper().getTemplatePropertyDomElement('_label', rowTemplate).addClass(915            getHelper().getDomElementClassName('selected')916          );917        }918        $(getHelper().getDomElementDataIdentifierSelector('multiValueContainer'), $(template))919          .append(rowTemplate.html());920      };921      defaultValue = formElement.get('defaultValue');922      if (getFormEditorApp().getUtility().isUndefinedOrNull(defaultValue)) {923        defaultValue = {};924      } else if ('string' === $.type(defaultValue)) {925        defaultValue = {0: defaultValue};926      }927      if ('object' === $.type(propertyValue)) {928        for (var propertyValueKey in propertyValue) {929          if (!propertyValue.hasOwnProperty(propertyValueKey)) {930            continue;931          }932          appendMultiValue(propertyValue[propertyValueKey], propertyValueKey, defaultValue);933        }934      } else if ('array' === $.type(propertyValue)) {935        for (var propertyValueKey in propertyValue) {936          if (!propertyValue.hasOwnProperty(propertyValueKey)) {937            continue;938          }939          if (getUtility().isUndefinedOrNull(propertyValue[propertyValueKey]['_label'])) {940            appendMultiValue(propertyValue[propertyValueKey], propertyValueKey, defaultValue);941          } else {942            appendMultiValue(propertyValue[propertyValueKey]['_label'], propertyValue[propertyValueKey]['_value'], defaultValue);943          }944        }945      }946    };947    /**948     * @public949     *950     * @return object951     * @return object952     * @return void953     */954    function renderFileUploadTemplates(formElement, template) {955      var appendMultiValue, multiValueTemplateContent, propertyPath, propertyValue;956      multiValueTemplateContent = $(957        getHelper().getDomElementDataIdentifierSelector('multiValueContainer'),958        $(template)959      ).clone();960      $(getHelper().getDomElementDataIdentifierSelector('multiValueContainer'), $(template)).empty();961      renderSimpleTemplateWithValidators(formElement, template);962      propertyPath = $(getHelper().getDomElementDataIdentifierSelector('multiValueContainer'), $(template))963        .attr(getHelper().getDomElementDataAttribute('templateProperty'));964      propertyValue = formElement.get(propertyPath);965      appendMultiValue = function(value) {966        var rowTemplate;967        rowTemplate = $($(multiValueTemplateContent).clone());968        getHelper().getTemplatePropertyDomElement('_value', rowTemplate).append(value);969        $(getHelper().getDomElementDataIdentifierSelector('multiValueContainer'), $(template))970          .append(rowTemplate.html());971      };972      if ('object' === $.type(propertyValue)) {973        for (var propertyValueKey in propertyValue) {974          if (!propertyValue.hasOwnProperty(propertyValueKey)) {975            continue;976          }977          appendMultiValue(propertyValue[propertyValueKey]);978        }979      } else if ('array' === $.type(propertyValue)) {980        for (var i = 0, len = propertyValue.length; i < len; ++i) {981          appendMultiValue(propertyValue[i]);982        }983      }...

fieldSettingsUtils.js

Source:fieldSettingsUtils.js

...6 * 'properties' will contains the properties value to pass to the componet7 * 'settings' will contains the settings value to use only in the field settings sidebar8 */9const inputSettings = Immutable([10    { type: 'text', properties: { label: 'Name', name: 'properties.name', help: getHelper('name') }, constraints: { required: true } },11    { type: 'text', properties: { label: 'Label', name: 'properties.label', help: getHelper('label') } },12    { type: 'boolean', properties: { label: 'Local', name: 'properties.local', help: getHelper('local') } },13    { type: 'textarea', properties: { parseAs: 'HTML', label: 'Helper', name: 'properties.help', help: getHelper('help') } },14    { type: 'textarea', properties: { parseAs: 'javascript', label: 'onChange', name: 'properties.onChange', help: getHelper('onChange') } },15]);16const outcomeSettings = Immutable([17    { type: 'text', properties: { label: 'Name', name: 'properties.name', help: getHelper('name') }, constraints: { required: true }, },18    { type: 'text', properties: { label: 'Action', name: 'properties.action' }, constraints: { required: true }, },19    { type: 'text', properties: { label: 'Outcome', name: 'properties.outcome' }, constraints: { required: true } },20    { type: 'text', properties: { label: 'Label', name: 'properties.label', help: getHelper('label') }, constraints: { required: true } },21    { type: 'textarea', properties: { parseAs: 'HTML', label: 'Helper', name: 'properties.help', help: getHelper('help') }},22]);23const panelSettings = Immutable([24    { type: 'text', properties: { label: 'Header', name: 'properties.header', children: [] } },25    { type: 'boolean', properties: { label: 'Expanded', name: 'properties.expanded', help: getHelper('expanded') } },26    { type: 'textarea', properties: { parseAs: 'HTML', label: 'Helper', name: 'properties.help', help: getHelper('help') }},27]);28const groupSettings = Immutable([29    { type: 'text', properties: { label: 'Name', name: 'properties.name', help: getHelper('name'), children: [] } },30]);31const displayTextSettings = Immutable([32    { type: 'textarea', properties: { label: 'Text', name: 'properties.text' } },33    { type: 'boolean', properties: { label: 'Local', name: 'properties.local', help: getHelper('local') } },34    { type: 'textarea', properties: { parseAs: 'HTML', label: 'Helper', name: 'properties.help', help: getHelper('help') }},35]);36const headerSettings = Immutable([37    { type: 'text', properties: { label: 'Text', name: 'properties.text' } },38    {39        type: 'typeahead',40        properties: {41            label: 'Variant',42            name: 'properties.variant',43            valueField:'value',44            options: [45                { value: 'h1' , label: 'H1' },46                { value: 'h2' , label: 'H2' },47                { value: 'h3' , label: 'H3' },48                { value: 'h4' , label: 'H4' },49                { value: 'h5' , label: 'H5' },50                { value: 'h6' , label: 'H6' },51            ]52        }53    },54    { type: 'boolean', properties: { label: 'Local', name: 'properties.local', help: getHelper('local') } },55    { type: 'textarea', properties: { parseAs: 'HTML', label: 'Helper', name: 'properties.help', help: getHelper('help') }},56]);57const textareaSettings = Immutable([58    { type: 'text', properties: { label: 'Name', name: 'properties.name', help: getHelper('name') }, constraints: { required: true } },59    { type: 'text', properties: { label: 'Label', name: 'properties.label', help: getHelper('label') } },60    { type: 'boolean', properties: { label: 'Local', name: 'properties.local', help: getHelper('local') } },61    {62        type: 'typeahead',63        properties: {64            label: 'Type of parsing',65            name: 'properties.parseAs',66            valueField: 'value',67            value: 'text',68            options: [69                { value: 'text' , label: 'Text' },70                { value: 'JSON' , label: 'JSON' },71                { value: 'HTML' , label: 'HTML' },72                { value: 'javascript' , label: 'Javascript' },73            ]74        }75    },76    { type: 'textarea', properties: { parseAs: 'HTML', label: 'Helper', name: 'properties.help', help: getHelper('help') }},77]);78const typeaheadSettings = Immutable([79    { type: 'text', properties: { label: 'Name', name: 'properties.name', help: getHelper('name') }, constraints: { required: true } },80    { type: 'text', properties: { label: 'Label', name: 'properties.label', help: getHelper('label') } },81    { type: 'boolean', properties: { label: 'Fetch options', name: 'properties.isFetching' } },82    {83        type: 'textarea',84        properties: {85            label: 'Static options',86            name: 'settings.staticOptions',87            rows: 5,88            onChange: function (event) {89                // WARNING: this function will run in a service worker90                const value = event.target.value;91                const options = value && value.split(/\r\n|\r|\n/g).map((line, index) => {92                    const splitedLine = line.split(',');93                    return {94                        value: splitedLine[0],95                        label: splitedLine[1],96                    };97                });98                return [99                    { name: 'settings.staticOptions', value },100                    { name: 'properties.options', value: options }101                ];102            },103            isVisible: ({ properties }) => !properties || !properties.isFetching,104            help: getHelper('staticOptions')105        },106    },107    {108        type: 'textarea',109        properties: {110            label: 'Fetch function',111            name: 'properties.fetchData',112            parseAs: 'javascript',113            isVisible: ({ properties }) => properties && properties.isFetching,114            helperText: 'The function has to return a Promise.',115        },116    },117    { type: 'text', properties: { label: 'Value field', name: 'properties.valueField', isVisible: ({ properties }) => get(properties, 'isFetching'), help: getHelper('fieldValue') } },118    { type: 'boolean', properties: { label: 'Local', name: 'properties.local', help: getHelper('local') } },119    { type: 'textarea', properties: { parseAs: 'HTML', label: 'Helper', name: 'properties.help', help: getHelper('help') }},120]);121export const getFieldSettings = (type: string) => {122    if (!type) return null;123    switch (type) {124        case 'outcome': return outcomeSettings;125        case 'panel': return panelSettings;126        case 'group': return groupSettings;127        case 'displayText': return displayTextSettings;128        case 'header': return headerSettings;129        case 'typeahead': return typeaheadSettings;130        case 'textarea': return textareaSettings;131        default: return inputSettings;132    }133};

uiwidget-drag.js

Source:uiwidget-drag.js

...13		setup : function(){14			this.handler = this.handler || this.el;15			this.el.css('position', 'absolute');16			this.el.css('z-index' , $.uiwidget.Drag.z_index++);			17			this.getHelper().css('cursor' , 'move');18			this.handler.bind('mousedown', this, this.onMouseDown);19		}20		21		,getHelper : function(){22			if (!this.helper) {23				$(document.body).append('<div id="dragHelper" unselectable=on style="background-color: transparent;position:absolute;display:none:cursor:move;border:2px dotted #bbb;mozUserSelect:none;z-index:10000000001;left:-1000px;top:-1000px;"></div>');24				this.helper = $('#dragHelper');25			}26			return this.helper;27		}28		,onMouseDown : function(e){29			var t = e.data;30			t.el.css('z-index' , $.uiwidget.Drag.z_index++);31			//$.debug('z_index ' + t.el.css('z-index'));32			t._x = e.pageX - t.el.attr("offsetLeft");33			t._y = e.pageY - t.el.attr("offsetTop");34			t.getHelper().height(t.el.height());35			t.getHelper().width(t.el.width());36			t.getHelper().css("left", t.el.css('left'));37			t.getHelper().css("top", t.el.css('top'));			38			$(document).bind("mousemove", t, t.onMouseMove);39			$(document).bind("mouseup", t, t.onMouseUp);40		}41		42		,onMouseMove : function(e){43			var t = e.data;44			t.el.hide();45			t.getHelper().show();46			t.getHelper().css("left", e.pageX - t._x + "px");47			t.getHelper().css("top", e.pageY - t._y + "px");48		}49	50		,onMouseUp : function(e){51			var t = e.data;52			t.el.css("left", t.getHelper().css('left'));53			t.el.css("top", t.getHelper().css("top"));54			t.el.show();55			t.getHelper().hide();			56			$(document).unbind("mousemove");57			$(document).unbind("mouseup");58		}59	};60	$.uiwidget.Drag.z_index = 1000000000;61	$.fn.drag = function(cfg){62		return new $.uiwidget.Drag(this, cfg);63	};...

Using AI Code Generation

1describe('My First Test', function() {2  it('Does not do much!', function() {3    cy.contains('type').click()4    cy.get('input').type('Hello World')5  })6})7describe('My First Test', function() {8  it('Does not do much!', function() {9    cy.contains('type').click()10    cy.get('input').type('Hello World')11  })12})13describe('My First Test', function() {14  it('Does not do much!', function() {15    cy.contains('type').click()16    cy.get('input').type('Hello World')17  })18})19describe('My First Test', function() {20  it('Does not do much!', function() {21    cy.contains('type').click()22    cy.get('input').type('Hello World')23  })24})25describe('My First Test', function() {26  it('Does not do much!', function() {27    cy.contains('type').click()28    cy.get('input').type('Hello World')29  })30})31describe('My First Test', function() {32  it('Does not do much!', function() {33    cy.contains('type').click()34    cy.get('input').type('Hello World')35  })36})37describe('My First Test', function() {38  it('Does not do much!', function() {39    cy.contains('type').click()40    cy.get('input').type('Hello World')41  })42})43describe('My First Test', function() {44  it('Does not do much

Using AI Code Generation

1describe('My First Test', function() {2  it('Does not do much!', function() {3    cy.get('input[type="text"]').type('Hello World')4    cy.get('input[type="text"]').should('have.value', 'Hello World')5  })6})7Now, run the test again. You will see that the test passes. This is because we have removed the `cy.wait()` command from the test. 8In this tutorial, you have learned to use the `cy.wait()` command to wait for an element to be visible on the page. You have also learned to use the `getHelper` method of Cypress to wait for an element to be visible on the page.

Using AI Code Generation

1describe('Test', () => {2  it('test', () => {3    cy.getHelper('test');4  });5});6Cypress.Commands.add('getHelper', (selector) => {7  cy.get(`[data-test=${selector}]`);8});

Using AI Code Generation

1const getHelper = (selector) => {2  return cy.get(`[data-test-id="${selector}"]`);3};4describe("Test", () => {5  it("should check the functionality", () => {6    getHelper("test").click();7  });8});

Using AI Code Generation

1describe('Testing the login functionality', () => {2    it('Logs in the user', () => {3        cy.get('#user-name').type('standard_user');4        cy.get('#password').type('secret_sauce');5        cy.get('#login-button').click();6        cy.get('.product_label').should('have.text', 'Products');7    })8})

Using AI Code Generation

1describe('My First Test', function() {2  it('My First Test Case', function() {3    cy.get('input[name="q"]').type('Automation Step by Step{enter}')4    cy.get('.LC20lb.DKV0Md').click()5    cy.get('.nav-link').contains('Selenium').click()6    cy.get('.nav-link').contains('Cypress').click()7    cy.get('.nav-link').contains('Protractor').click()8    cy.get('.nav-link').contains('TestNG').click()9    cy.get('.nav-link').contains('Jenkins').click()10    cy.get('.nav-link').contains('Maven').click()11    cy.get('.nav-link').contains('Git').click()12    cy.get('.nav-link').contains('GitHub').click()13    cy.get('.nav-link').contains('JIRA').click()14    cy.get('.nav-link').contains('Docker').click()15    cy.get('.nav-link').contains('Kubernetes').click()16    cy.get('.nav-link').contains('AWS').click()17    cy.get('.nav-link').contains('Azure').click()18    cy.get('.nav-link').contains('GCP').click()19    cy.get('.nav-link').contains('Python').click()20    cy.get('.nav-link').contains('Java').click()21    cy.get('.nav-link').contains('JavaScript').click()22    cy.get('.nav-link').contains('C#').click()23    cy.get('.nav-link').contains('Ruby').click()24    cy.get('.nav-link').contains('C++').click()25    cy.get('.nav-link').contains('C').click()26    cy.get('.nav-link').contains('SQL').click()27    cy.get('.nav-link').contains('NoSQL').click()28    cy.get('.nav-link').contains('REST').click()29    cy.get('.nav-link').contains('SOAP').click()30    cy.get('.nav-link').contains('GraphQL').click()31    cy.get('.nav-link').contains('JSON').click()32    cy.get('.nav-link').contains('XML').click()33    cy.get('.nav-link').contains('HTML').click()34    cy.get('.nav-link').contains('CSS').click()35    cy.get('.nav-link').contains('Selenium').click()36    cy.get('.nav-link').contains

Using AI Code Generation

1let value = cy.getHelper('input[name="name"]')2console.log(value)3cy.setHelper('input[name="name"]', 'John')4value = cy.getHelper('input[name="name"]')5console.log(value)6cy.setHelper('input[name="name"]', 'Doe')7value = cy.getHelper('input[name="name"]')8console.log(value)9Cypress.Commands.add('getHelper', (selector) => {10return cy.get(selector).invoke('val')11})12Cypress.Commands.add('setHelper', (selector, value) => {13cy.get(selector).clear().type(value)14})15import './commands'16describe('test', () => {17it('test', () => {

Using AI Code Generation

1describe('Test Suite', function () {2    it('Test Case', function () {3        cy.getHelper('test.json').then(function (data) {4            cy.log(data.name);5        });6    });7});8Cypress.Commands.add('getHelper', (fileName) => {9    return cy.fixture(fileName);10});11{12}

Cypress Tutorial

Cypress is a renowned Javascript-based open-source, easy-to-use end-to-end testing framework primarily used for testing web applications. Cypress is a relatively new player in the automation testing space and has been gaining much traction lately, as evidenced by the number of Forks (2.7K) and Stars (42.1K) for the project. LambdaTest’s Cypress Tutorial covers step-by-step guides that will help you learn from the basics till you run automation tests on LambdaTest.

Chapters:

What is Cypress? -
Why Cypress? - Learn why Cypress might be a good choice for testing your web applications.
Features of Cypress Testing - Learn about features that make Cypress a powerful and flexible tool for testing web applications.
Cypress Drawbacks - Although Cypress has many strengths, it has a few limitations that you should be aware of.
Cypress Architecture - Learn more about Cypress architecture and how it is designed to be run directly in the browser, i.e., it does not have any additional servers.
Browsers Supported by Cypress - Cypress is built on top of the Electron browser, supporting all modern web browsers. Learn browsers that support Cypress.
Selenium vs Cypress: A Detailed Comparison - Compare and explore some key differences in terms of their design and features.
Cypress Learning: Best Practices - Take a deep dive into some of the best practices you should use to avoid anti-patterns in your automation tests.
How To Run Cypress Tests on LambdaTest? - Set up a LambdaTest account, and now you are all set to learn how to run Cypress tests.

Certification

You can elevate your expertise with end-to-end testing using the Cypress automation framework and stay one step ahead in your career by earning a Cypress certification. Check out our Cypress 101 Certification.