5a7cadd086a1e0ec6a0a1f3ef5631582183c6686
[Packages/TYPO3.CMS.git] / typo3 / sysext / form / Resources / Public / JavaScript / Backend / FormEditor / InspectorComponent.js
1 /*
2 * This file is part of the TYPO3 CMS project.
3 *
4 * It is free software; you can redistribute it and/or modify it under
5 * the terms of the GNU General Public License, either version 2
6 * of the License, or any later version.
7 *
8 * For the full copyright and license information, please read the
9 * LICENSE.txt file that was distributed with this source code.
10 *
11 * The TYPO3 project - inspiring people to share!
12 */
13
14 /**
15 * Module: TYPO3/CMS/Form/Backend/FormEditor/InspectorComponent
16 */
17
18 /**
19 * Add legacy functions to be accessible in the global scope.
20 * This is needed by TYPO3/CMS/Recordlist/ElementBrowser
21 */
22 var setFormValueFromBrowseWin;
23
24 define(['jquery',
25 'TYPO3/CMS/Form/Backend/FormEditor/Helper',
26 'TYPO3/CMS/Backend/Icons',
27 'TYPO3/CMS/Backend/Notification',
28 'TYPO3/CMS/Backend/Modal',
29 'TYPO3/CMS/Form/Backend/Vendor/jquery.mjs.nestedSortable'
30 ], function($, Helper, Icons, Notification, Modal) {
31 'use strict';
32
33 return (function($, Helper, Icons, Notification) {
34
35 /**
36 * @private
37 *
38 * @var object
39 */
40 var _configuration = null;
41
42 /**
43 * @private
44 *
45 * @var object
46 */
47 var _defaultConfiguration = {
48 domElementClassNames: {
49 buttonFormElementRemove: 't3-form-remove-element-button',
50 collectionElement: 't3-form-collection-element',
51 finisherEditorPrefix: 't3-form-inspector-finishers-editor-',
52 inspectorEditor: 'form-editor',
53 inspectorInputGroup: 'input-group',
54 validatorEditorPrefix: 't3-form-inspector-validators-editor-'
55 },
56 domElementDataAttributeNames: {
57 contentElementSelectorTarget: 'data-insert-target',
58 finisher: 'data-finisher-identifier',
59 validator: 'data-validator-identifier'
60 },
61 domElementDataAttributeValues: {
62 collapse: 'actions-view-table-expand',
63 editorControlsInputGroup: 'inspectorEditorControlsGroup',
64 editorWrapper: 'editorWrapper',
65 editorControlsWrapper: 'inspectorEditorControlsWrapper',
66 formElementHeaderEditor: 'inspectorFormElementHeaderEditor',
67 formElementSelectorControlsWrapper: 'inspectorEditorFormElementSelectorControlsWrapper',
68 formElementSelectorSplitButtonContainer: 'inspectorEditorFormElementSelectorSplitButtonContainer',
69 formElementSelectorSplitButtonListContainer: 'inspectorEditorFormElementSelectorSplitButtonListContainer',
70 iconNotAvailable: 'actions-close',
71 iconPage: 'apps-pagetree-page-default',
72 iconTtContent: 'mimetypes-x-content-text',
73 inspector: 'inspector',
74 'Inspector-CheckboxEditor': 'Inspector-CheckboxEditor',
75 'Inspector-CollectionElementHeaderEditor': 'Inspector-CollectionElementHeaderEditor',
76 'Inspector-FinishersEditor': 'Inspector-FinishersEditor',
77 'Inspector-FormElementHeaderEditor': 'Inspector-FormElementHeaderEditor',
78 'Inspector-PropertyGridEditor': 'Inspector-PropertyGridEditor',
79 'Inspector-RemoveElementEditor': 'Inspector-RemoveElementEditor',
80 'Inspector-RequiredValidatorEditor': 'Inspector-RequiredValidatorEditor',
81 'Inspector-SingleSelectEditor': 'Inspector-SingleSelectEditor',
82 'Inspector-MultiSelectEditor': 'Inspector-MultiSelectEditor',
83 'Inspector-GridColumnViewPortConfigurationEditor': 'Inspector-GridColumnViewPortConfigurationEditor',
84 'Inspector-TextareaEditor': 'Inspector-TextareaEditor',
85 'Inspector-TextEditor': 'Inspector-TextEditor',
86 'Inspector-Typo3WinBrowserEditor': 'Inspector-Typo3WinBrowserEditor',
87 'Inspector-ValidatorsEditor': 'Inspector-ValidatorsEditor',
88 inspectorFinishers: 'inspectorFinishers',
89 inspectorValidators: 'inspectorValidators',
90 propertyGridEditorAddRow: 'addRow',
91 propertyGridEditorAddRowItem: 'addRowItem',
92 propertyGridEditorContainer: 'propertyGridContainer',
93 propertyGridEditorDeleteRow: 'deleteRow',
94 propertyGridEditorLabel: 'label',
95 propertyGridEditorRowItem: 'rowItem',
96 propertyGridEditorSelectValue: 'selectValue',
97 propertyGridEditorSortRow: 'sortRow',
98 propertyGridEditorValue: 'value',
99 viewportButton: 'viewportButton'
100 },
101 domElementIdNames: {
102 finisherPrefix: 't3-form-inspector-finishers-',
103 validatorPrefix: 't3-form-inspector-validators-'
104 },
105 isSortable: true
106 };
107
108 /**
109 * @private
110 *
111 * @var object
112 */
113 var _formEditorApp = null;
114
115 /* *************************************************************
116 * Private Methodes
117 * ************************************************************/
118
119 /**
120 * @private
121 *
122 * @return void
123 * @throws 1478268638
124 */
125 function _helperSetup() {
126 assert('function' === $.type(Helper.bootstrap),
127 'The view model helper does not implement the method "bootstrap"',
128 1478268638
129 );
130 Helper.bootstrap(getFormEditorApp());
131 };
132
133 /**
134 * @private
135 *
136 * @return object
137 */
138 function getFormEditorApp() {
139 return _formEditorApp;
140 };
141
142 /**
143 * @private
144 *
145 * @return object
146 */
147 function getViewModel() {
148 return getFormEditorApp().getViewModel();
149 };
150
151 /**
152 * @private
153 *
154 * @param object
155 * @return object
156 */
157 function getHelper(configuration) {
158 if (getUtility().isUndefinedOrNull(configuration)) {
159 return Helper.setConfiguration(_configuration);
160 }
161 return Helper.setConfiguration(configuration);
162 };
163
164 /**
165 * @private
166 *
167 * @return object
168 */
169 function getUtility() {
170 return getFormEditorApp().getUtility();
171 };
172
173 /**
174 * @private
175 *
176 * @param mixed test
177 * @param string message
178 * @param int messageCode
179 * @return void
180 */
181 function assert(test, message, messageCode) {
182 return getFormEditorApp().assert(test, message, messageCode);
183 };
184
185 /**
186 * @private
187 *
188 * @return object
189 */
190 function getCurrentlySelectedFormElement() {
191 return getFormEditorApp().getCurrentlySelectedFormElement();
192 };
193
194 /**
195 * @private
196 *
197 * @return object
198 */
199 function getRootFormElement() {
200 return getFormEditorApp().getRootFormElement();
201 };
202
203 /**
204 * @private
205 *
206 * @return object
207 */
208 function getPublisherSubscriber() {
209 return getFormEditorApp().getPublisherSubscriber();
210 };
211
212 /**
213 * @private
214 *
215 * @param object
216 * @param string
217 * @return mixed
218 */
219 function getFormElementDefinition(formElement, formElementDefinitionKey) {
220 return getFormEditorApp().getFormElementDefinition(formElement, formElementDefinitionKey);
221 };
222
223 /**
224 * @private
225 *
226 * @param object
227 * @param object
228 * @param string
229 * @param string
230 * @return void
231 * @publish view/inspector/editor/insert/perform
232 */
233 function _renderEditorDispatcher(editorConfiguration, editorHtml, collectionElementIdentifier, collectionName) {
234 switch (editorConfiguration['templateName']) {
235 case 'Inspector-FormElementHeaderEditor':
236 renderFormElementHeaderEditor(
237 editorConfiguration,
238 editorHtml,
239 collectionElementIdentifier,
240 collectionName
241 );
242 break;
243 case 'Inspector-CollectionElementHeaderEditor':
244 renderCollectionElementHeaderEditor(
245 editorConfiguration,
246 editorHtml,
247 collectionElementIdentifier,
248 collectionName
249 );
250 break;
251 case 'Inspector-TextEditor':
252 renderTextEditor(
253 editorConfiguration,
254 editorHtml,
255 collectionElementIdentifier,
256 collectionName
257 );
258 break;
259 case 'Inspector-FinishersEditor':
260 renderCollectionElementSelectionEditor(
261 'finishers',
262 editorConfiguration,
263 editorHtml,
264 collectionElementIdentifier,
265 collectionName
266 );
267 break;
268 case 'Inspector-ValidatorsEditor':
269 renderCollectionElementSelectionEditor(
270 'validators',
271 editorConfiguration,
272 editorHtml,
273 collectionElementIdentifier,
274 collectionName
275 );
276 break;
277 case 'Inspector-RemoveElementEditor':
278 renderRemoveElementEditor(
279 editorConfiguration,
280 editorHtml,
281 collectionElementIdentifier,
282 collectionName
283 );
284 break;
285 case 'Inspector-RequiredValidatorEditor':
286 renderRequiredValidatorEditor(
287 editorConfiguration,
288 editorHtml,
289 collectionElementIdentifier,
290 collectionName
291 );
292 break;
293 case 'Inspector-CheckboxEditor':
294 renderCheckboxEditor(
295 editorConfiguration,
296 editorHtml,
297 collectionElementIdentifier,
298 collectionName
299 );
300 break;
301 case 'Inspector-SingleSelectEditor':
302 renderSingleSelectEditor(
303 editorConfiguration,
304 editorHtml,
305 collectionElementIdentifier,
306 collectionName
307 );
308 break;
309 case 'Inspector-MultiSelectEditor':
310 renderMultiSelectEditor(
311 editorConfiguration,
312 editorHtml,
313 collectionElementIdentifier,
314 collectionName
315 );
316 break;
317 case 'Inspector-GridColumnViewPortConfigurationEditor':
318 renderGridColumnViewPortConfigurationEditor(
319 editorConfiguration,
320 editorHtml,
321 collectionElementIdentifier,
322 collectionName
323 );
324 break;
325 case 'Inspector-PropertyGridEditor':
326 renderPropertyGridEditor(
327 editorConfiguration,
328 editorHtml,
329 collectionElementIdentifier,
330 collectionName
331 );
332 break;
333 case 'Inspector-TextareaEditor':
334 renderTextareaEditor(
335 editorConfiguration,
336 editorHtml,
337 collectionElementIdentifier,
338 collectionName
339 );
340 break;
341 case 'Inspector-Typo3WinBrowserEditor':
342 renderTypo3WinBrowserEditor(
343 editorConfiguration,
344 editorHtml,
345 collectionElementIdentifier,
346 collectionName
347 );
348 break;
349 }
350 getPublisherSubscriber().publish('view/inspector/editor/insert/perform', [
351 editorConfiguration, editorHtml, collectionElementIdentifier, collectionName
352 ]);
353 };
354
355 /**
356 * @private
357 *
358 * opens a popup window with the element browser
359 *
360 * @param string mode
361 * @param string params
362 */
363 function _openTypo3WinBrowser(mode, params) {
364 Modal.advanced({
365 type: Modal.types.iframe,
366 content: TYPO3.settings.FormEditor.typo3WinBrowserUrl + '&mode=' + mode + '&bparams=' + params,
367 size: Modal.sizes.large
368 });
369 };
370
371 /**
372 * @private
373 *
374 * @param string
375 * @param string
376 * @return object
377 */
378 function _getCollectionElementClass(collectionName, collectionElementIdentifier) {
379 if (collectionName === 'finishers') {
380 return getHelper()
381 .getDomElementClassName('finisherEditorPrefix') + collectionElementIdentifier;
382 } else {
383 return getHelper()
384 .getDomElementClassName('validatorEditorPrefix') + collectionElementIdentifier;
385 }
386 };
387
388 /**
389 * @private
390 *
391 * @param string
392 * @param string
393 * @param bool
394 * @return object
395 */
396 function _getCollectionElementId(collectionName, collectionElementIdentifier, asSelector) {
397 if (collectionName === 'finishers') {
398 return getHelper()
399 .getDomElementIdName('finisherPrefix', asSelector) + collectionElementIdentifier;
400 } else {
401 return getHelper()
402 .getDomElementIdName('validatorPrefix', asSelector) + collectionElementIdentifier;
403 }
404 };
405
406 /**
407 * @private
408 *
409 * @param object
410 * @param string
411 * @return void
412 */
413 function _addSortableCollectionElementsEvents(sortableDomElement, collectionName) {
414 sortableDomElement.addClass(getHelper().getDomElementClassName('sortable')).sortable({
415 revert: 'true',
416 items: getHelper().getDomElementClassName('collectionElement', true),
417 cancel: getHelper().getDomElementClassName('jQueryUiStateDisabled', true) + ',input,textarea,select',
418 delay: 200,
419 update: function(e, o) {
420 var dataAttributeName, nextCollectionElementIdentifier, movedCollectionElementIdentifier,
421 previousCollectionElementIdentifier;
422
423 if (collectionName === 'finishers') {
424 dataAttributeName = getHelper().getDomElementDataAttribute('finisher');
425 } else {
426 dataAttributeName = getHelper().getDomElementDataAttribute('validator');
427 }
428
429 movedCollectionElementIdentifier = $(o.item).attr(dataAttributeName);
430 previousCollectionElementIdentifier = $(o.item)
431 .prevAll(getHelper().getDomElementClassName('collectionElement', true))
432 .first()
433 .attr(dataAttributeName);
434 nextCollectionElementIdentifier = $(o.item)
435 .nextAll(getHelper().getDomElementClassName('collectionElement', true))
436 .first()
437 .attr(dataAttributeName);
438
439 getPublisherSubscriber().publish('view/inspector/collectionElements/dnd/update', [
440 movedCollectionElementIdentifier,
441 previousCollectionElementIdentifier,
442 nextCollectionElementIdentifier,
443 collectionName
444 ]);
445 }
446 });
447 };
448
449 /**
450 * @private
451 *
452 * @param object editorHtml
453 * @param bool multiSelection
454 * @param string propertyPath
455 * @param string propertyPathPrefix
456 * @return void
457 */
458 function _setPropertyGridData(editorHtml, multiSelection, propertyPath, propertyPathPrefix) {
459 var defaultValue, newPropertyData;
460
461 if (multiSelection) {
462 defaultValue = [];
463
464 $(getHelper().getDomElementDataIdentifierSelector('propertyGridEditorContainer') + ' ' +
465 getHelper().getDomElementDataIdentifierSelector('propertyGridEditorSelectValue') + ':checked',
466 $(editorHtml)
467 ).each(function(i) {
468 defaultValue.push(
469 $(this)
470 .closest(getHelper().getDomElementDataIdentifierSelector('propertyGridEditorRowItem'))
471 .find(getHelper().getDomElementDataIdentifierSelector('propertyGridEditorValue'))
472 .val()
473 );
474 });
475 getCurrentlySelectedFormElement().set(propertyPathPrefix + 'defaultValue', defaultValue);
476 } else {
477 getCurrentlySelectedFormElement().set(
478 propertyPathPrefix + 'defaultValue',
479 $(
480 getHelper().getDomElementDataIdentifierSelector('propertyGridEditorContainer') + ' ' +
481 getHelper().getDomElementDataIdentifierSelector('propertyGridEditorSelectValue') + ':checked',
482 $(editorHtml)
483 ).first()
484 .closest(getHelper().getDomElementDataIdentifierSelector('propertyGridEditorRowItem'))
485 .find(getHelper().getDomElementDataIdentifierSelector('propertyGridEditorValue'))
486 .val(),
487 true
488 );
489 }
490
491 newPropertyData = [];
492 $(
493 getHelper().getDomElementDataIdentifierSelector('propertyGridEditorContainer') + ' ' +
494 getHelper().getDomElementDataIdentifierSelector('propertyGridEditorRowItem'),
495 $(editorHtml)
496 ).each(function(i) {
497 var value, label, tmpObject;
498
499 value = $(this)
500 .find(getHelper().getDomElementDataIdentifierSelector('propertyGridEditorValue'))
501 .val();
502 label = $(this)
503 .find(getHelper().getDomElementDataIdentifierSelector('propertyGridEditorLabel'))
504 .val();
505
506 if ('' === value) {
507 value = label;
508 }
509
510 tmpObject = {};
511 tmpObject[value] = label;
512 newPropertyData.push({
513 _label: label,
514 _value: value
515 });
516 });
517
518 getCurrentlySelectedFormElement().set(propertyPathPrefix + propertyPath, newPropertyData);
519 };
520
521 /**
522 * @private
523 *
524 * @param object
525 * @return object
526 */
527 function _getEditorWrapperDomElement(editorDomElement) {
528 return $(getHelper().getDomElementDataIdentifierSelector('editorWrapper'), $(editorDomElement));
529 };
530
531 /**
532 * @private
533 *
534 * @param object
535 * @return object
536 */
537 function _getEditorControlsWrapperDomElement(editorDomElement) {
538 return $(getHelper().getDomElementDataIdentifierSelector('editorControlsWrapper'), $(editorDomElement));
539 };
540
541 /**
542 * @private
543 *
544 * @param string
545 * @param object
546 * @return void
547 */
548 function _validateCollectionElement(propertyPath, editorHtml) {
549 var hasError, propertyPrefix, validationResults;
550
551 validationResults = getFormEditorApp().validateCurrentlySelectedFormElementProperty(propertyPath);
552
553 if (validationResults.length > 0) {
554 getHelper()
555 .getTemplatePropertyDomElement('validationErrors', editorHtml)
556 .text(validationResults[0]);
557 getViewModel().setElementValidationErrorClass(
558 getHelper().getTemplatePropertyDomElement('validationErrors', editorHtml)
559 );
560 getViewModel().setElementValidationErrorClass(
561 _getEditorControlsWrapperDomElement(editorHtml),
562 'hasError'
563 );
564 } else {
565 getHelper().getTemplatePropertyDomElement('validationErrors', editorHtml).text('');
566 getViewModel().removeElementValidationErrorClass(
567 getHelper().getTemplatePropertyDomElement('validationErrors', editorHtml)
568 );
569 getViewModel().removeElementValidationErrorClass(
570 _getEditorControlsWrapperDomElement(editorHtml),
571 'hasError'
572 );
573 }
574
575 validationResults = getFormEditorApp().validateFormElement(getCurrentlySelectedFormElement());
576 propertyPrefix = propertyPath.split('.');
577 propertyPrefix = propertyPrefix[0] + '.' + propertyPrefix[1];
578
579 hasError = false;
580 for (var i = 0, len = validationResults.length; i < len; ++i) {
581 if (
582 validationResults[i]['propertyPath'].indexOf(propertyPrefix, 0) === 0
583 && validationResults[i]['validationResults']
584 && validationResults[i]['validationResults'].length > 0
585 ) {
586 hasError = true;
587 break;
588 }
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 /* *************************************************************
603 * Public Methodes
604 * ************************************************************/
605
606 /**
607 * @public
608 *
609 * callback from TYPO3/CMS/Recordlist/ElementBrowser
610 *
611 * @param string fieldReference
612 * @param string elValue
613 * @param string elName
614 * @return void
615 */
616 setFormValueFromBrowseWin = function(fieldReference, elValue, elName) {
617 var result;
618 result = elValue.split('_');
619
620 $(getHelper().getDomElementDataAttribute('contentElementSelectorTarget', 'bracesWithKeyValue', [fieldReference]))
621 .val(result.pop())
622 .trigger('paste');
623 };
624
625 /**
626 * @public
627 *
628 * @return object
629 */
630 function getInspectorDomElement() {
631 return $(getHelper().getDomElementDataIdentifierSelector('inspector'));
632 };
633
634 /**
635 * @public
636 *
637 * @return object
638 */
639 function getFinishersContainerDomElement() {
640 return $(getHelper().getDomElementDataIdentifierSelector('inspectorFinishers'), getInspectorDomElement());
641 };
642
643 /**
644 * @public
645 *
646 * @return object
647 */
648 function getValidatorsContainerDomElement() {
649 return $(getHelper().getDomElementDataIdentifierSelector('inspectorValidators'), getInspectorDomElement());
650 };
651
652 /**
653 * @public
654 *
655 * @param string
656 * @param string
657 * @return object
658 */
659 function getCollectionElementDomElement(collectionName, collectionElementIdentifier) {
660 if (collectionName === 'finishers') {
661 return $(getHelper().getDomElementDataAttribute(
662 'finisher',
663 'bracesWithKeyValue',
664 [collectionElementIdentifier]
665 ), getFinishersContainerDomElement());
666 } else {
667 return $(getHelper().getDomElementDataAttribute(
668 'validator',
669 'bracesWithKeyValue',
670 [collectionElementIdentifier]
671 ), getValidatorsContainerDomElement());
672 }
673 };
674
675 /**
676 * @public
677 *
678 * @param object
679 * @param function
680 * @return void
681 */
682 function renderEditors(formElement, callback) {
683 var formElementTypeDefinition;
684 if (getUtility().isUndefinedOrNull(formElement)) {
685 formElement = getCurrentlySelectedFormElement();
686 }
687
688 getInspectorDomElement().off().empty();
689
690 formElementTypeDefinition = getFormElementDefinition(formElement);
691 if ('array' !== $.type(formElementTypeDefinition['editors'])) {
692 return;
693 }
694
695 for (var i = 0, len = formElementTypeDefinition['editors'].length; i < len; ++i) {
696 var html, template;
697
698 template = getHelper()
699 .getTemplate(formElementTypeDefinition['editors'][i]['templateName'])
700 .clone();
701 if (!template.length) {
702 continue;
703 }
704 html = $(template.html());
705
706 $(html)
707 .first()
708 .addClass(getHelper().getDomElementClassName('inspectorEditor'));
709 getInspectorDomElement().append($(html));
710
711 _renderEditorDispatcher(formElementTypeDefinition['editors'][i], html);
712 }
713
714 if ('function' === $.type(callback)) {
715 callback();
716 }
717 };
718
719 /**
720 * @public
721 *
722 * @param string collectionName
723 * @param string collectionElementIdentifier
724 * @return void
725 * @publish view/inspector/collectionElements/dnd/update
726 * @throws 1478354853
727 * @throws 1478354854
728 */
729 function renderCollectionElementEditors(collectionName, collectionElementIdentifier) {
730 var collapseWrapper, collectionContainer, collectionContainerElementWrapper,
731 collectionElementConfiguration, collectionElementEditorsLength;
732
733 assert(
734 getUtility().isNonEmptyString(collectionName),
735 'Invalid parameter "collectionName"',
736 1478354853
737 );
738 assert(
739 getUtility().isNonEmptyString(collectionElementIdentifier),
740 'Invalid parameter "collectionElementIdentifier"',
741 1478354854
742 );
743
744 collectionElementConfiguration = getFormEditorApp().getPropertyCollectionElementConfiguration(
745 collectionElementIdentifier,
746 collectionName
747 );
748 if ('array' !== $.type(collectionElementConfiguration['editors'])) {
749 return;
750 }
751
752 collectionContainerElementWrapper = $('<div></div>').addClass(getHelper().getDomElementClassName('collectionElement'));
753 if (collectionName === 'finishers') {
754 collectionContainer = getFinishersContainerDomElement();
755 collectionContainerElementWrapper
756 .attr(getHelper().getDomElementDataAttribute('finisher'), collectionElementIdentifier);
757 } else {
758 collectionContainer = getValidatorsContainerDomElement();
759 collectionContainerElementWrapper
760 .attr(getHelper().getDomElementDataAttribute('validator'), collectionElementIdentifier);
761 }
762 collectionContainer.append(collectionContainerElementWrapper);
763
764 collectionElementEditorsLength = collectionElementConfiguration['editors'].length;
765 if (
766 collectionElementEditorsLength > 0
767 && collectionElementConfiguration['editors'][0]['identifier'] === 'header'
768 ) {
769 collapseWrapper = $('<div role="tabpanel"></div>')
770 .addClass('panel-collapse collapse')
771 .prop('id', _getCollectionElementId(
772 collectionName,
773 collectionElementIdentifier
774 ));
775 }
776
777 for (var i = 0; i < collectionElementEditorsLength; ++i) {
778 var html, template;
779
780 template = getHelper()
781 .getTemplate(collectionElementConfiguration['editors'][i]['templateName'])
782 .clone();
783 if (!template.length) {
784 continue;
785 }
786 html = $(template.html());
787
788 $(html).first()
789 .addClass(_getCollectionElementClass(
790 collectionName,
791 collectionElementConfiguration['editors'][i]['identifier']
792 ))
793 .addClass(getHelper().getDomElementClassName('inspectorEditor'));
794
795 if (i === 0 && collapseWrapper) {
796 getCollectionElementDomElement(collectionName, collectionElementIdentifier)
797 .append(html)
798 .append(collapseWrapper);
799 } else if (
800 i === (collectionElementEditorsLength - 1)
801 && collapseWrapper
802 && collectionElementConfiguration['editors'][i]['identifier'] === 'removeButton'
803 ) {
804 getCollectionElementDomElement(collectionName, collectionElementIdentifier).append(html);
805 } else if (i > 0 && collapseWrapper) {
806 collapseWrapper.append(html);
807 } else {
808 getCollectionElementDomElement(collectionName, collectionElementIdentifier).append(html);
809 }
810
811 _renderEditorDispatcher(
812 collectionElementConfiguration['editors'][i],
813 html,
814 collectionElementIdentifier,
815 collectionName
816 );
817 }
818
819 if (
820 (
821 collectionElementEditorsLength === 2
822 && collectionElementConfiguration['editors'][0]['identifier'] === 'header'
823 && collectionElementConfiguration['editors'][1]['identifier'] === 'removeButton'
824 ) || (
825 collectionElementEditorsLength === 1
826 && collectionElementConfiguration['editors'][0]['identifier'] === 'header'
827 )
828 ) {
829 $(getHelper().getDomElementDataIdentifierSelector('collapse'), collectionContainerElementWrapper).remove();
830 }
831
832 if (_configuration['isSortable']) {
833 _addSortableCollectionElementsEvents(collectionContainer, collectionName);
834 }
835 };
836
837 /**
838 * @public
839 *
840 * @string collectionName
841 * @param object editorConfiguration
842 * @param object editorHtml
843 * @return void
844 * @publish view/inspector/collectionElement/existing/selected
845 * @publish view/inspector/collectionElement/new/selected
846 * @throws 1475423098
847 * @throws 1475423099
848 * @throws 1475423100
849 * @throws 1475423101
850 * @throws 1478362968
851 */
852 function renderCollectionElementSelectionEditor(collectionName, editorConfiguration, editorHtml) {
853 var alreadySelectedCollectionElements, selectElement, collectionContainer,
854 removeSelectElement;
855 assert(
856 getUtility().isNonEmptyString(collectionName),
857 'Invalid configuration "collectionName"',
858 1478362968
859 );
860 assert(
861 'object' === $.type(editorConfiguration),
862 'Invalid parameter "editorConfiguration"',
863 1475423098
864 );
865 assert(
866 'object' === $.type(editorHtml),
867 'Invalid parameter "editorHtml"',
868 1475423099
869 );
870 assert(
871 getUtility().isNonEmptyString(editorConfiguration['label']),
872 'Invalid configuration "label"',
873 1475423100
874 );
875 assert(
876 'array' === $.type(editorConfiguration['selectOptions']),
877 'Invalid configuration "selectOptions"',
878 1475423101
879 );
880
881 if (collectionName === 'finishers') {
882 collectionContainer = getFinishersContainerDomElement();
883 alreadySelectedCollectionElements = getRootFormElement().get(collectionName);
884 } else {
885 collectionContainer = getValidatorsContainerDomElement();
886 alreadySelectedCollectionElements = getCurrentlySelectedFormElement().get(collectionName);
887 }
888
889 collectionContainer.off().empty();
890
891 getHelper().getTemplatePropertyDomElement('label', editorHtml).text(editorConfiguration['label']);
892 selectElement = getHelper().getTemplatePropertyDomElement('selectOptions', editorHtml);
893
894 if (!getUtility().isUndefinedOrNull(alreadySelectedCollectionElements)) {
895 for (var i = 0, len = alreadySelectedCollectionElements.length; i < len; ++i) {
896 getPublisherSubscriber().publish('view/inspector/collectionElement/existing/selected', [
897 alreadySelectedCollectionElements[i]['identifier'],
898 collectionName
899 ]);
900 }
901 }
902
903 removeSelectElement = true;
904 for (var i = 0, len1 = editorConfiguration['selectOptions'].length; i < len1; ++i) {
905 var appendOption = true;
906 if (!getUtility().isUndefinedOrNull(alreadySelectedCollectionElements)) {
907 for (var j = 0, len2 = alreadySelectedCollectionElements.length; j < len2; ++j) {
908 if (alreadySelectedCollectionElements[j]['identifier'] === editorConfiguration['selectOptions'][i]['value']) {
909 appendOption = false;
910 break;
911 }
912 }
913 }
914 if (appendOption) {
915 selectElement.append(new Option(
916 editorConfiguration['selectOptions'][i]['label'],
917 editorConfiguration['selectOptions'][i]['value']
918 ));
919 if (editorConfiguration['selectOptions'][i]['value'] !== '') {
920 removeSelectElement = false;
921 }
922 }
923 }
924
925 if (removeSelectElement) {
926 selectElement.off().empty().remove();
927 }
928
929 selectElement.on('change', function() {
930 if ($(this).val() !== '') {
931 var value = $(this).val();
932 $('option[value="' + value + '"]', $(this)).remove();
933
934 getFormEditorApp().getPublisherSubscriber().publish(
935 'view/inspector/collectionElement/new/selected',
936 [value, collectionName]
937 );
938 }
939 });
940 };
941
942 /**
943 * @public
944 *
945 * @param object editorConfiguration
946 * @param object editorHtml
947 * @param string collectionElementIdentifier
948 * @param string collectionName
949 * @return void
950 * @throws 1475421525
951 * @throws 1475421526
952 * @throws 1475421527
953 * @throws 1475421528
954 */
955 function renderFormElementHeaderEditor(editorConfiguration, editorHtml, collectionElementIdentifier, collectionName) {
956 assert('object' === $.type(editorConfiguration), 'Invalid parameter "editorConfiguration"', 1475421525);
957 assert('object' === $.type(editorHtml), 'Invalid parameter "editorHtml"', 1475421526);
958
959 Icons.getIcon(
960 getFormElementDefinition(getCurrentlySelectedFormElement(), 'iconIdentifier'),
961 Icons.sizes.small,
962 null,
963 Icons.states.default
964 ).done(function(icon) {
965 getHelper().getTemplatePropertyDomElement('header-label', editorHtml)
966 .append($(icon).addClass(getHelper().getDomElementClassName('icon')))
967 .append(buildTitleByFormElement());
968 });
969 };
970
971 /**
972 * @public
973 *
974 * @param object editorConfiguration
975 * @param object editorHtml
976 * @param string collectionElementIdentifier
977 * @param string collectionName
978 * @return void
979 * @throws 1475421257
980 * @throws 1475421258
981 * @throws 1475421259
982 */
983 function renderCollectionElementHeaderEditor(editorConfiguration, editorHtml, collectionElementIdentifier, collectionName) {
984 var collectionElementConfiguration, setData;
985
986 assert(
987 'object' === $.type(editorConfiguration),
988 'Invalid parameter "editorConfiguration"',
989 1475421258
990 );
991 assert(
992 getUtility().isNonEmptyString(editorConfiguration['label']),
993 'Invalid configuration "label"',
994 1475421257
995 );
996 assert(
997 'object' === $.type(editorHtml),
998 'Invalid parameter "editorHtml"',
999 1475421259
1000 );
1001
1002 setData = function(icon) {
1003 getHelper()
1004 .getTemplatePropertyDomElement('header-label', editorHtml)
1005 .prepend($(icon));
1006
1007 Icons.getIcon(
1008 getHelper().getDomElementDataAttributeValue('collapse'),
1009 Icons.sizes.small,
1010 null,
1011 Icons.states.default,
1012 Icons.markupIdentifiers.inline
1013 ).done(function(icon) {
1014 var iconWrap;
1015 iconWrap = $('<a></a>')
1016 .attr('href', _getCollectionElementId(collectionName, collectionElementIdentifier, true))
1017 .attr('data-toggle', 'collapse')
1018 .attr('aria-expanded', 'true')
1019 .attr('aria-controls', _getCollectionElementId(collectionName, collectionElementIdentifier))
1020 .addClass('collapsed')
1021 .append($(icon));
1022
1023 getHelper()
1024 .getTemplatePropertyDomElement('header-label', editorHtml)
1025 .prepend(iconWrap);
1026 });
1027 };
1028
1029 collectionElementConfiguration = getFormEditorApp().getFormEditorDefinition(collectionName, collectionElementIdentifier);
1030 if (collectionName === 'validators') {
1031 Icons.getIcon(
1032 collectionElementConfiguration['iconIdentifier'],
1033 Icons.sizes.small,
1034 null,
1035 Icons.states.default
1036 ).done(function(icon) {
1037 setData(icon);
1038 });
1039 } else {
1040 Icons.getIcon(
1041 collectionElementConfiguration['iconIdentifier'],
1042 Icons.sizes.small,
1043 null,
1044 Icons.states.default
1045 ).done(function(icon) {
1046 setData(icon);
1047 });
1048 }
1049
1050 if (editorConfiguration['label']) {
1051 getHelper().getTemplatePropertyDomElement('label', editorHtml).append(editorConfiguration['label']);
1052 }
1053 };
1054
1055 /**
1056 * @public
1057 *
1058 * @param object editorConfiguration
1059 * @param object editorHtml
1060 * @param string collectionElementIdentifier
1061 * @param string collectionName
1062 * @return void
1063 * @throws 1475421053
1064 * @throws 1475421054
1065 * @throws 1475421055
1066 * @throws 1475421056
1067 */
1068 function renderTextEditor(editorConfiguration, editorHtml, collectionElementIdentifier, collectionName) {
1069 var propertyData, propertyPath;
1070 assert(
1071 'object' === $.type(editorConfiguration),
1072 'Invalid parameter "editorConfiguration"',
1073 1475421053
1074 );
1075 assert(
1076 'object' === $.type(editorHtml),
1077 'Invalid parameter "editorHtml"',
1078 1475421054
1079 );
1080 assert(
1081 getUtility().isNonEmptyString(editorConfiguration['label']),
1082 'Invalid configuration "label"',
1083 1475421055
1084 );
1085 assert(
1086 getUtility().isNonEmptyString(editorConfiguration['propertyPath']),
1087 'Invalid configuration "propertyPath"',
1088 1475421056
1089 );
1090
1091 getHelper()
1092 .getTemplatePropertyDomElement('label', editorHtml)
1093 .append(editorConfiguration['label']);
1094 if (getUtility().isNonEmptyString(editorConfiguration['fieldExplanationText'])) {
1095 getHelper()
1096 .getTemplatePropertyDomElement('fieldExplanationText', editorHtml)
1097 .text(editorConfiguration['fieldExplanationText']);
1098 } else {
1099 getHelper()
1100 .getTemplatePropertyDomElement('fieldExplanationText', editorHtml)
1101 .remove();
1102 }
1103
1104 propertyPath = getFormEditorApp().buildPropertyPath(
1105 editorConfiguration['propertyPath'],
1106 collectionElementIdentifier,
1107 collectionName
1108 );
1109 propertyData = getCurrentlySelectedFormElement().get(propertyPath);
1110
1111 _validateCollectionElement(propertyPath, editorHtml);
1112
1113 getHelper().getTemplatePropertyDomElement('propertyPath', editorHtml).val(propertyData);
1114
1115 renderFormElementSelectorEditorAddition(editorConfiguration, editorHtml, propertyPath);
1116
1117 getHelper().getTemplatePropertyDomElement('propertyPath', editorHtml).on('keyup paste', function() {
1118 if (
1119 !!editorConfiguration['doNotSetIfPropertyValueIsEmpty']
1120 && !getUtility().isNonEmptyString($(this).val())
1121 ) {
1122 getCurrentlySelectedFormElement().unset(propertyPath);
1123 } else {
1124 getCurrentlySelectedFormElement().set(propertyPath, $(this).val());
1125 }
1126 _validateCollectionElement(propertyPath, editorHtml);
1127 if (
1128 !getUtility().isUndefinedOrNull(editorConfiguration['additionalElementPropertyPaths'])
1129 && 'array' === $.type(editorConfiguration['additionalElementPropertyPaths'])
1130 ) {
1131 for (var i = 0, len = editorConfiguration['additionalElementPropertyPaths'].length; i < len; ++i) {
1132 if (
1133 !!editorConfiguration['doNotSetIfPropertyValueIsEmpty']
1134 && !getUtility().isNonEmptyString($(this).val())
1135 ) {
1136 getCurrentlySelectedFormElement().unset(editorConfiguration['additionalElementPropertyPaths'][i]);
1137 } else {
1138 getCurrentlySelectedFormElement().set(editorConfiguration['additionalElementPropertyPaths'][i], $(this).val());
1139 }
1140 }
1141 }
1142 });
1143 };
1144
1145 /**
1146 * @public
1147 *
1148 * @param object editorConfiguration
1149 * @param object editorHtml
1150 * @param string collectionElementIdentifier
1151 * @param string collectionName
1152 * @return void
1153 * @throws 1475421048
1154 * @throws 1475421049
1155 * @throws 1475421050
1156 * @throws 1475421051
1157 * @throws 1475421052
1158 */
1159 function renderSingleSelectEditor(editorConfiguration, editorHtml, collectionElementIdentifier, collectionName) {
1160 var propertyData, propertyPath, selectElement;
1161 assert(
1162 'object' === $.type(editorConfiguration),
1163 'Invalid parameter "editorConfiguration"',
1164 1475421048
1165 );
1166 assert(
1167 'object' === $.type(editorHtml),
1168 'Invalid parameter "editorHtml"',
1169 1475421049
1170 );
1171 assert(
1172 getUtility().isNonEmptyString(editorConfiguration['label']),
1173 'Invalid configuration "label"',
1174 1475421050
1175 );
1176 assert(
1177 getUtility().isNonEmptyString(editorConfiguration['propertyPath']),
1178 'Invalid configuration "propertyPath"',
1179 1475421051
1180 );
1181 assert(
1182 'array' === $.type(editorConfiguration['selectOptions']),
1183 'Invalid configuration "selectOptions"',
1184 1475421052
1185 );
1186
1187 propertyPath = getFormEditorApp().buildPropertyPath(
1188 editorConfiguration['propertyPath'],
1189 collectionElementIdentifier,
1190 collectionName
1191 );
1192
1193 getHelper()
1194 .getTemplatePropertyDomElement('label', editorHtml)
1195 .append(editorConfiguration['label']);
1196
1197 selectElement = getHelper()
1198 .getTemplatePropertyDomElement('selectOptions', editorHtml);
1199
1200 propertyData = getCurrentlySelectedFormElement().get(propertyPath);
1201
1202 for (var i = 0, len = editorConfiguration['selectOptions'].length; i < len; ++i) {
1203 var option;
1204
1205 if (editorConfiguration['selectOptions'][i]['value'] === propertyData) {
1206 option = new Option(editorConfiguration['selectOptions'][i]['label'], i, false, true);
1207 } else {
1208 option = new Option(editorConfiguration['selectOptions'][i]['label'], i);
1209 }
1210 $(option).data({value: editorConfiguration['selectOptions'][i]['value']});
1211 selectElement.append(option);
1212 }
1213
1214 selectElement.on('change', function() {
1215 getCurrentlySelectedFormElement().set(propertyPath, $('option:selected', $(this)).data('value'));
1216 });
1217 };
1218
1219 /**
1220 * @public
1221 *
1222 * @param object editorConfiguration
1223 * @param object editorHtml
1224 * @param string collectionElementIdentifier
1225 * @param string collectionName
1226 * @return void
1227 * @throws 1485712399
1228 * @throws 1485712400
1229 * @throws 1485712401
1230 * @throws 1485712402
1231 * @throws 1485712403
1232 */
1233 function renderMultiSelectEditor(editorConfiguration, editorHtml, collectionElementIdentifier, collectionName) {
1234 var propertyData, propertyPath, selectElement;
1235 assert(
1236 'object' === $.type(editorConfiguration),
1237 'Invalid parameter "editorConfiguration"',
1238 1485712399
1239 );
1240 assert(
1241 'object' === $.type(editorHtml),
1242 'Invalid parameter "editorHtml"',
1243 1485712400
1244 );
1245 assert(
1246 getUtility().isNonEmptyString(editorConfiguration['label']),
1247 'Invalid configuration "label"',
1248 1485712401
1249 );
1250 assert(
1251 getUtility().isNonEmptyString(editorConfiguration['propertyPath']),
1252 'Invalid configuration "propertyPath"',
1253 1485712402
1254 );
1255 assert(
1256 'array' === $.type(editorConfiguration['selectOptions']),
1257 'Invalid configuration "selectOptions"',
1258 1485712403
1259 );
1260
1261 propertyPath = getFormEditorApp().buildPropertyPath(
1262 editorConfiguration['propertyPath'],
1263 collectionElementIdentifier,
1264 collectionName
1265 );
1266
1267 getHelper()
1268 .getTemplatePropertyDomElement('label', editorHtml)
1269 .append(editorConfiguration['label']);
1270
1271 selectElement = getHelper()
1272 .getTemplatePropertyDomElement('selectOptions', editorHtml);
1273
1274 propertyData = getCurrentlySelectedFormElement().get(propertyPath);
1275
1276 for (var i = 0, len1 = editorConfiguration['selectOptions'].length; i < len1; ++i) {
1277 var option, value;
1278
1279 option = null;
1280 for (var propertyDataKey in propertyData) {
1281 if (!propertyData.hasOwnProperty(propertyDataKey)) {
1282 continue;
1283 }
1284 if (editorConfiguration['selectOptions'][i]['value'] === propertyData[propertyDataKey]) {
1285 option = new Option(editorConfiguration['selectOptions'][i]['label'], i, false, true);
1286 break;
1287 }
1288 }
1289
1290 if (!option) {
1291 option = new Option(editorConfiguration['selectOptions'][i]['label'], i);
1292 }
1293
1294 $(option).data({value: editorConfiguration['selectOptions'][i]['value']});
1295
1296 selectElement.append(option);
1297 }
1298
1299 selectElement.on('change', function() {
1300 var selectValues = [];
1301 $('option:selected', $(this)).each(function(i) {
1302 selectValues.push($(this).data('value'));
1303 });
1304
1305 getCurrentlySelectedFormElement().set(propertyPath, selectValues);
1306 });
1307 };
1308
1309 /**
1310 * @public
1311 *
1312 * @param object editorConfiguration
1313 * @param object editorHtml
1314 * @param string collectionElementIdentifier
1315 * @param string collectionName
1316 * @return void
1317 * @throws 1489528242
1318 * @throws 1489528243
1319 * @throws 1489528244
1320 * @throws 1489528245
1321 * @throws 1489528246
1322 * @throws 1489528247
1323 */
1324 function renderGridColumnViewPortConfigurationEditor(editorConfiguration, editorHtml, collectionElementIdentifier, collectionName) {
1325 var editorControlsWrapper, initNumbersOfColumnsField, numbersOfColumnsTemplate, selectElement,
1326 viewportButtonTemplate;
1327 assert(
1328 'object' === $.type(editorConfiguration),
1329 'Invalid parameter "editorConfiguration"',
1330 1489528242
1331 );
1332 assert(
1333 'object' === $.type(editorHtml),
1334 'Invalid parameter "editorHtml"',
1335 1489528243
1336 );
1337 assert(
1338 getUtility().isNonEmptyString(editorConfiguration['label']),
1339 'Invalid configuration "label"',
1340 1489528244
1341 );
1342 assert(
1343 'array' === $.type(editorConfiguration['configurationOptions']['viewPorts']),
1344 'Invalid configurationOptions "viewPorts"',
1345 1489528245
1346 );
1347 assert(
1348 !getUtility().isUndefinedOrNull(editorConfiguration['configurationOptions']['numbersOfColumnsToUse']['label']),
1349 'Invalid configurationOptions "numbersOfColumnsToUse"',
1350 1489528246
1351 );
1352 assert(
1353 !getUtility().isUndefinedOrNull(editorConfiguration['configurationOptions']['numbersOfColumnsToUse']['propertyPath']),
1354 'Invalid configuration "selectOptions"',
1355 1489528247
1356 );
1357
1358 if (!getFormElementDefinition(getCurrentlySelectedFormElement().get('__parentRenderable'), '_isGridRowFormElement')) {
1359 editorHtml.remove();
1360 return;
1361 }
1362
1363 getHelper()
1364 .getTemplatePropertyDomElement('label', editorHtml)
1365 .append(editorConfiguration['label']);
1366
1367
1368 viewportButtonTemplate = $(getHelper()
1369 .getDomElementDataIdentifierSelector('viewportButton'), $(editorHtml))
1370 .clone();
1371
1372 $(getHelper()
1373 .getDomElementDataIdentifierSelector('viewportButton'), $(editorHtml))
1374 .remove();
1375
1376 numbersOfColumnsTemplate = getHelper()
1377 .getTemplatePropertyDomElement('numbersOfColumnsToUse', $(editorHtml))
1378 .clone();
1379
1380 getHelper()
1381 .getTemplatePropertyDomElement('numbersOfColumnsToUse', $(editorHtml))
1382 .remove();
1383
1384 editorControlsWrapper = _getEditorControlsWrapperDomElement(editorHtml);
1385
1386 initNumbersOfColumnsField = function(element) {
1387 var numbersOfColumnsTemplateClone, propertyPath;
1388
1389 getHelper().getTemplatePropertyDomElement('numbersOfColumnsToUse', $(editorHtml))
1390 .off()
1391 .empty()
1392 .remove();
1393
1394 numbersOfColumnsTemplateClone = $(numbersOfColumnsTemplate).clone(true, true);
1395 _getEditorWrapperDomElement(editorHtml).after(numbersOfColumnsTemplateClone);
1396
1397 $('input', numbersOfColumnsTemplateClone).focus();
1398
1399 getHelper()
1400 .getTemplatePropertyDomElement('numbersOfColumnsToUse-label', numbersOfColumnsTemplateClone)
1401 .append(
1402 editorConfiguration['configurationOptions']['numbersOfColumnsToUse']['label']
1403 .replace('{@viewPortLabel}', element.data('viewPortLabel'))
1404 );
1405
1406 getHelper()
1407 .getTemplatePropertyDomElement('numbersOfColumnsToUse-fieldExplanationText', numbersOfColumnsTemplateClone)
1408 .append(editorConfiguration['configurationOptions']['numbersOfColumnsToUse']['fieldExplanationText']);
1409
1410 propertyPath = editorConfiguration['configurationOptions']['numbersOfColumnsToUse']['propertyPath']
1411 .replace('{@viewPortIdentifier}', element.data('viewPortIdentifier'));
1412
1413 getHelper()
1414 .getTemplatePropertyDomElement('numbersOfColumnsToUse-propertyPath', numbersOfColumnsTemplateClone)
1415 .val(getCurrentlySelectedFormElement().get(propertyPath));
1416
1417 getHelper().getTemplatePropertyDomElement('numbersOfColumnsToUse-propertyPath', numbersOfColumnsTemplateClone).on('keyup paste change', function() {
1418 var that = $(this);
1419 if (!$.isNumeric(that.val())) {
1420 that.val('');
1421 } else {
1422 getCurrentlySelectedFormElement().set(propertyPath, that.val());
1423 }
1424 });
1425 };
1426
1427 for (var i = 0, len = editorConfiguration['configurationOptions']['viewPorts'].length; i < len; ++i) {
1428 var numbersOfColumnsTemplateClone, viewportButtonTemplateClone, viewPortIdentifier,
1429 viewPortLabel;
1430
1431 viewPortIdentifier = editorConfiguration['configurationOptions']['viewPorts'][i]['viewPortIdentifier'];
1432 viewPortLabel = editorConfiguration['configurationOptions']['viewPorts'][i]['label'];
1433
1434 viewportButtonTemplateClone = $(viewportButtonTemplate).clone(true, true);
1435 viewportButtonTemplateClone.text(viewPortLabel);
1436 viewportButtonTemplateClone.data('viewPortIdentifier', viewPortIdentifier);
1437 viewportButtonTemplateClone.data('viewPortLabel', viewPortLabel);
1438 editorControlsWrapper.append(viewportButtonTemplateClone);
1439
1440 if (i === (len - 1)) {
1441 numbersOfColumnsTemplateClone = $(numbersOfColumnsTemplate).clone(true, true);
1442 _getEditorWrapperDomElement(editorHtml).after(numbersOfColumnsTemplateClone);
1443 initNumbersOfColumnsField(viewportButtonTemplateClone);
1444 viewportButtonTemplateClone.addClass(getHelper().getDomElementClassName('active'));
1445 }
1446
1447 $('button', editorControlsWrapper).on('click', function() {
1448 var that = $(this);
1449
1450 $('button', editorControlsWrapper).removeClass(getHelper().getDomElementClassName('active'));
1451 that.addClass(getHelper().getDomElementClassName('active'));
1452
1453 initNumbersOfColumnsField(that);
1454 });
1455 }
1456 };
1457
1458 /**
1459 * @public
1460 *
1461 * @param object editorConfiguration
1462 * @param object editorHtml
1463 * @param string collectionElementIdentifier
1464 * @param string collectionName
1465 * @return void
1466 * @throws 1475419226
1467 * @throws 1475419227
1468 * @throws 1475419228
1469 * @throws 1475419229
1470 * @throws 1475419230
1471 * @throws 1475419231
1472 * @throws 1475419232
1473 */
1474 function renderPropertyGridEditor(editorConfiguration, editorHtml, collectionElementIdentifier, collectionName) {
1475 var addRowTemplate, defaultValue, multiSelection, propertyData, propertyPathPrefix,
1476 rowItemTemplate, setData;
1477 assert(
1478 'object' === $.type(editorConfiguration),
1479 'Invalid parameter "editorConfiguration"',
1480 1475419226
1481 );
1482 assert(
1483 'object' === $.type(editorHtml),
1484 'Invalid parameter "editorHtml"',
1485 1475419227
1486 );
1487 assert(
1488 'boolean' === $.type(editorConfiguration['enableAddRow']),
1489 'Invalid configuration "enableAddRow"',
1490 1475419228
1491 );
1492 assert(
1493 'boolean' === $.type(editorConfiguration['enableDeleteRow']),
1494 'Invalid configuration "enableDeleteRow"',
1495 1475419230
1496 );
1497 assert(
1498 'boolean' === $.type(editorConfiguration['isSortable']),
1499 'Invalid configuration "isSortable"',
1500 1475419229
1501 );
1502 assert(
1503 getUtility().isNonEmptyString(editorConfiguration['propertyPath']),
1504 'Invalid configuration "propertyPath"',
1505 1475419231
1506 );
1507 assert(
1508 getUtility().isNonEmptyString(editorConfiguration['label']),
1509 'Invalid configuration "label"',
1510 1475419232
1511 );
1512
1513 getHelper().getTemplatePropertyDomElement('label', editorHtml).append(editorConfiguration['label']);
1514 propertyPathPrefix = getFormEditorApp().buildPropertyPath(
1515 undefined,
1516 collectionElementIdentifier,
1517 collectionName,
1518 undefined,
1519 true
1520 );
1521 if (getUtility().isNonEmptyString(propertyPathPrefix)) {
1522 propertyPathPrefix = propertyPathPrefix + '.';
1523 }
1524
1525 if (getUtility().isUndefinedOrNull(editorConfiguration['multiSelection'])) {
1526 multiSelection = false;
1527 } else {
1528 multiSelection = !!editorConfiguration['multiSelection'];
1529 }
1530
1531 rowItemTemplate = $(
1532 getHelper().getDomElementDataIdentifierSelector('propertyGridEditorRowItem'),
1533 $(editorHtml)
1534 ).clone();
1535 $(getHelper().getDomElementDataIdentifierSelector('propertyGridEditorRowItem'), $(editorHtml)).remove();
1536
1537 if (!!editorConfiguration['enableDeleteRow']) {
1538 $(getHelper().getDomElementDataIdentifierSelector('propertyGridEditorDeleteRow'),
1539 $(rowItemTemplate)
1540 ).on('click', function() {
1541 if ($(getHelper().getDomElementDataIdentifierSelector('propertyGridEditorRowItem'), $(editorHtml)).length > 1) {
1542 $(this)
1543 .closest(getHelper().getDomElementDataIdentifierSelector('propertyGridEditorRowItem'))
1544 .off()
1545 .empty()
1546 .remove();
1547
1548 _setPropertyGridData(
1549 $(editorHtml),
1550 multiSelection,
1551 editorConfiguration['propertyPath'],
1552 propertyPathPrefix
1553 );
1554 } else {
1555 Notification.error(
1556 editorConfiguration['removeLastAvailableRowFlashMessageTitle'],
1557 editorConfiguration['removeLastAvailableRowFlashMessageMessage'],
1558 2
1559 );
1560 }
1561 });
1562 } else {
1563 $(getHelper().getDomElementDataIdentifierSelector('propertyGridEditorDeleteRow'), $(rowItemTemplate))
1564 .parent()
1565 .off()
1566 .empty();
1567 }
1568
1569 if (!!editorConfiguration['isSortable']) {
1570 $(getHelper().getDomElementDataIdentifierSelector('propertyGridEditorContainer'), $(editorHtml))
1571 .addClass(getHelper().getDomElementClassName('sortable'))
1572 .sortable({
1573 revert: 'true',
1574 items: getHelper().getDomElementDataIdentifierSelector('propertyGridEditorRowItem'),
1575 update: function(e, o) {
1576 _setPropertyGridData($(editorHtml), multiSelection, editorConfiguration['propertyPath'], propertyPathPrefix);
1577 }
1578 });
1579 } else {
1580 $(getHelper().getDomElementDataIdentifierSelector('propertyGridEditorSortRow'), $(rowItemTemplate))
1581 .parent()
1582 .off()
1583 .empty();
1584 }
1585
1586 $(getHelper().getDomElementDataIdentifierSelector('propertyGridEditorSelectValue'),
1587 $(rowItemTemplate)
1588 ).on('change', function() {
1589 if (!multiSelection) {
1590 $(getHelper().getDomElementDataIdentifierSelector('propertyGridEditorSelectValue') + ':checked', $(editorHtml))
1591 .not($(this))
1592 .prop('checked', false);
1593 }
1594 _setPropertyGridData($(editorHtml), multiSelection, editorConfiguration['propertyPath'], propertyPathPrefix);
1595 });
1596
1597 $(getHelper().getDomElementDataIdentifierSelector('propertyGridEditorLabel') + ',' +
1598 getHelper().getDomElementDataIdentifierSelector('propertyGridEditorValue'),
1599 $(rowItemTemplate)
1600 ).on('keyup paste', function() {
1601 _setPropertyGridData($(editorHtml), multiSelection, editorConfiguration['propertyPath'], propertyPathPrefix);
1602 });
1603
1604 $(getHelper().getDomElementDataIdentifierSelector('propertyGridEditorLabel'),
1605 $(rowItemTemplate)
1606 ).on('focusout', function() {
1607 if ('' === $(this)
1608 .closest(getHelper().getDomElementDataIdentifierSelector('propertyGridEditorRowItem'))
1609 .find(getHelper().getDomElementDataIdentifierSelector('propertyGridEditorValue'))
1610 .val()
1611 ) {
1612 $(this)
1613 .closest(getHelper().getDomElementDataIdentifierSelector('propertyGridEditorRowItem'))
1614 .find(getHelper().getDomElementDataIdentifierSelector('propertyGridEditorValue'))
1615 .val($(this).val());
1616 }
1617 });
1618
1619 if (!!editorConfiguration['enableAddRow']) {
1620 addRowTemplate = $(getHelper().getDomElementDataIdentifierSelector('propertyGridEditorAddRowItem'), $(editorHtml)).clone();
1621 $(getHelper().getDomElementDataIdentifierSelector('propertyGridEditorAddRowItem'), $(editorHtml)).remove();
1622
1623 $(getHelper().getDomElementDataIdentifierSelector('propertyGridEditorAddRow'), $(addRowTemplate)).on('click', function() {
1624 $(this)
1625 .closest(getHelper().getDomElementDataIdentifierSelector('propertyGridEditorAddRowItem'))
1626 .before($(rowItemTemplate).clone(true, true));
1627 });
1628 $(getHelper().getDomElementDataIdentifierSelector('propertyGridEditorContainer'), $(editorHtml))
1629 .prepend($(addRowTemplate).clone(true, true));
1630 } else {
1631 $(getHelper().getDomElementDataIdentifierSelector('propertyGridEditorAddRowItem'), $(editorHtml)).remove();
1632 }
1633
1634 defaultValue = {};
1635 if (multiSelection) {
1636 if (!getUtility().isUndefinedOrNull(getCurrentlySelectedFormElement().get(propertyPathPrefix + 'defaultValue'))) {
1637 defaultValue = getCurrentlySelectedFormElement().get(propertyPathPrefix + 'defaultValue');
1638 }
1639 } else {
1640 if (!getUtility().isUndefinedOrNull(getCurrentlySelectedFormElement().get(propertyPathPrefix + 'defaultValue'))) {
1641 defaultValue = {0: getCurrentlySelectedFormElement().get(propertyPathPrefix + 'defaultValue')};
1642 }
1643 }
1644 propertyData = getCurrentlySelectedFormElement().get(propertyPathPrefix + editorConfiguration['propertyPath']) || {};
1645
1646 setData = function(label, value) {
1647 var isPreselected, newRowTemplate;
1648
1649 isPreselected = false;
1650 newRowTemplate = $(rowItemTemplate).clone(true, true);
1651
1652 for (var defaultValueKey in defaultValue) {
1653 if (!defaultValue.hasOwnProperty(defaultValueKey)) {
1654 continue;
1655 }
1656 if (defaultValue[defaultValueKey] === value) {
1657 isPreselected = true;
1658 break;
1659 }
1660 }
1661
1662 $(getHelper().getDomElementDataIdentifierSelector('propertyGridEditorLabel'), $(newRowTemplate)).val(label);
1663 $(getHelper().getDomElementDataIdentifierSelector('propertyGridEditorValue'), $(newRowTemplate)).val(value);
1664 if (isPreselected) {
1665 $(getHelper().getDomElementDataIdentifierSelector('propertyGridEditorSelectValue'), $(newRowTemplate))
1666 .prop('checked', true);
1667 }
1668
1669 if (!!editorConfiguration['enableAddRow']) {
1670 $(getHelper().getDomElementDataIdentifierSelector('propertyGridEditorAddRowItem'), $(editorHtml))
1671 .before($(newRowTemplate));
1672 } else {
1673 $(getHelper().getDomElementDataIdentifierSelector('propertyGridEditorContainer'), $(editorHtml))
1674 .prepend($(newRowTemplate));
1675 }
1676 };
1677
1678 if ('object' === $.type(propertyData)) {
1679 for (var propertyDataKey in propertyData) {
1680 if (!propertyData.hasOwnProperty(propertyDataKey)) {
1681 continue;
1682 }
1683 setData(propertyData[propertyDataKey], propertyDataKey);
1684 }
1685 } else if ('array' === $.type(propertyData)) {
1686 for (var propertyDataKey in propertyData) {
1687 if (!propertyData.hasOwnProperty(propertyDataKey)) {
1688 continue;
1689 }
1690 if (getUtility().isUndefinedOrNull(propertyData[propertyDataKey]['_label'])) {
1691 setData(propertyData[propertyDataKey], propertyDataKey);
1692 } else {
1693 setData(propertyData[propertyDataKey]['_label'], propertyData[propertyDataKey]['_value']);
1694 }
1695 }
1696 }
1697 };
1698
1699 /**
1700 * @public
1701 *
1702 * @param object editorConfiguration
1703 * @param object editorHtml
1704 * @param string collectionElementIdentifier
1705 * @param string collectionName
1706 * @return void
1707 * @publish view/inspector/collectionElement/new/selected
1708 * @publish view/inspector/removeCollectionElement/perform
1709 * @throws 1475417093
1710 * @throws 1475417094
1711 * @throws 1475417095
1712 * @throws 1475417096
1713 */
1714 function renderRequiredValidatorEditor(editorConfiguration, editorHtml, collectionElementIdentifier, collectionName) {
1715 var propertyPath, propertyValue, validatorIdentifier;
1716 assert(
1717 'object' === $.type(editorConfiguration),
1718 'Invalid parameter "editorConfiguration"',
1719 1475417093
1720 );
1721 assert(
1722 'object' === $.type(editorHtml),
1723 'Invalid parameter "editorHtml"',
1724 1475417094
1725 );
1726 assert(
1727 getUtility().isNonEmptyString(editorConfiguration['validatorIdentifier']),
1728 'Invalid configuration "validatorIdentifier"',
1729 1475417095
1730 );
1731 assert(
1732 getUtility().isNonEmptyString(editorConfiguration['label']),
1733 'Invalid configuration "label"',
1734 1475417096
1735 );
1736
1737 validatorIdentifier = editorConfiguration['validatorIdentifier'];
1738 getHelper().getTemplatePropertyDomElement('label', editorHtml).append(editorConfiguration['label']);
1739
1740 if (getUtility().isNonEmptyString(editorConfiguration['propertyPath'])) {
1741 propertyPath = getFormEditorApp()
1742 .buildPropertyPath(editorConfiguration['propertyPath'], collectionElementIdentifier, collectionName);
1743 }
1744 if (getUtility().isNonEmptyString(editorConfiguration['propertyValue'])) {
1745 propertyValue = editorConfiguration['propertyValue'];
1746 } else {
1747 propertyValue = '';
1748 }
1749
1750 if (-1 !== getFormEditorApp().getIndexFromPropertyCollectionElement(validatorIdentifier, 'validators')) {
1751 $('input[type="checkbox"]', $(editorHtml)).prop('checked', true);
1752 if (getUtility().isNonEmptyString(propertyPath)) {
1753 getCurrentlySelectedFormElement().set(propertyPath, propertyValue);
1754 }
1755 }
1756
1757 $('input[type="checkbox"]', $(editorHtml)).on('change', function() {
1758 if ($(this).is(":checked")) {
1759 getPublisherSubscriber().publish(
1760 'view/inspector/collectionElement/new/selected',
1761 [validatorIdentifier, 'validators']
1762 );
1763
1764 if (getUtility().isNonEmptyString(propertyPath)) {
1765 getCurrentlySelectedFormElement().set(propertyPath, propertyValue);
1766 }
1767 } else {
1768 getPublisherSubscriber().publish(
1769 'view/inspector/removeCollectionElement/perform',
1770 [validatorIdentifier, 'validators']
1771 );
1772 if (getUtility().isNonEmptyString(propertyPath)) {
1773 getCurrentlySelectedFormElement().unset(propertyPath);
1774 }
1775 }
1776 });
1777 };
1778
1779 /**
1780 * @public
1781 *
1782 * @param object editorConfiguration
1783 * @param object editorHtml
1784 * @param string collectionElementIdentifier
1785 * @param string collectionName
1786 * @return void
1787 * @throws 1476218671
1788 * @throws 1476218672
1789 * @throws 1476218673
1790 * @throws 1476218674
1791 */
1792 function renderCheckboxEditor(editorConfiguration, editorHtml, collectionElementIdentifier, collectionName) {
1793 var propertyData, propertyPath;
1794 assert(
1795 'object' === $.type(editorConfiguration),
1796 'Invalid parameter "editorConfiguration"',
1797 1476218671
1798 );
1799 assert(
1800 'object' === $.type(editorHtml),
1801 'Invalid parameter "editorHtml"',
1802 1476218672
1803 );
1804 assert(
1805 getUtility().isNonEmptyString(editorConfiguration['label']),
1806 'Invalid configuration "label"',
1807 1476218673
1808 );
1809 assert(
1810 getUtility().isNonEmptyString(editorConfiguration['propertyPath']),
1811 'Invalid configuration "propertyPath"',
1812 1476218674
1813 );
1814
1815 getHelper()
1816 .getTemplatePropertyDomElement('label', editorHtml)
1817 .append(editorConfiguration['label']);
1818
1819 propertyPath = getFormEditorApp()
1820 .buildPropertyPath(editorConfiguration['propertyPath'], collectionElementIdentifier, collectionName);
1821 propertyData = getCurrentlySelectedFormElement().get(propertyPath);
1822
1823 if (
1824 ('boolean' === $.type(propertyData) && propertyData)
1825 || propertyData === 'true'
1826 || propertyData === 1
1827 || propertyData === "1"
1828 ) {
1829 $('input[type="checkbox"]', $(editorHtml)).prop('checked', true);
1830 }
1831
1832 $('input[type="checkbox"]', $(editorHtml)).on('change', function() {
1833 if ($(this).is(":checked")) {
1834 getCurrentlySelectedFormElement().set(propertyPath, true);
1835 } else {
1836 getCurrentlySelectedFormElement().set(propertyPath, false);
1837 }
1838 });
1839 };
1840
1841 /**
1842 * @public
1843 *
1844 * @param object editorConfiguration
1845 * @param object editorHtml
1846 * @param string collectionElementIdentifier
1847 * @param string collectionName
1848 * @return void
1849 * @throws 1475412567
1850 * @throws 1475412568
1851 * @throws 1475416098
1852 * @throws 1475416099
1853 */
1854 function renderTextareaEditor(editorConfiguration, editorHtml, collectionElementIdentifier, collectionName) {
1855 var propertyPath, propertyData;
1856 assert(
1857 'object' === $.type(editorConfiguration),
1858 'Invalid parameter "editorConfiguration"',
1859 1475412567
1860 );
1861 assert(
1862 'object' === $.type(editorHtml),
1863 'Invalid parameter "editorHtml"',
1864 1475412568
1865 );
1866 assert(
1867 getUtility().isNonEmptyString(editorConfiguration['propertyPath']),
1868 'Invalid configuration "propertyPath"',
1869 1475416098
1870 );
1871 assert(
1872 getUtility().isNonEmptyString(editorConfiguration['label']),
1873 'Invalid configuration "label"',
1874 1475416099
1875 );
1876
1877 propertyPath = getFormEditorApp()
1878 .buildPropertyPath(editorConfiguration['propertyPath'], collectionElementIdentifier, collectionName);
1879
1880 getHelper()
1881 .getTemplatePropertyDomElement('label', editorHtml).append(editorConfiguration['label']);
1882
1883 if (getUtility().isNonEmptyString(editorConfiguration['fieldExplanationText'])) {
1884 getHelper()
1885 .getTemplatePropertyDomElement('fieldExplanationText', editorHtml)
1886 .text(editorConfiguration['fieldExplanationText']);
1887 } else {
1888 getHelper()
1889 .getTemplatePropertyDomElement('fieldExplanationText', editorHtml)
1890 .remove();
1891 }
1892
1893 propertyData = getCurrentlySelectedFormElement().get(propertyPath);
1894 $('textarea', $(editorHtml)).val(propertyData);
1895
1896 $('textarea', $(editorHtml)).on('keyup paste', function() {
1897 getCurrentlySelectedFormElement().set(propertyPath, $(this).val());
1898 });
1899 };
1900
1901 /**
1902 * @public
1903 *
1904 * @param object editorConfiguration
1905 * @param object editorHtml
1906 * @param string collectionElementIdentifier
1907 * @param string collectionName
1908 * @return void
1909 * @throws 1477300587
1910 * @throws 1477300588
1911 * @throws 1477300589
1912 * @throws 1477300590
1913 * @throws 1477318981
1914 * @throws 1477319859
1915 */
1916 function renderTypo3WinBrowserEditor(editorConfiguration, editorHtml, collectionElementIdentifier, collectionName) {
1917 var iconType, propertyPath, propertyData;
1918 assert(
1919 'object' === $.type(editorConfiguration),
1920 'Invalid parameter "editorConfiguration"',
1921 1477300587
1922 );
1923 assert(
1924 'object' === $.type(editorHtml),
1925 'Invalid parameter "editorHtml"',
1926 1477300588
1927 );
1928 assert(
1929 getUtility().isNonEmptyString(editorConfiguration['label']),
1930 'Invalid configuration "label"',
1931 1477300589
1932 );
1933 assert(
1934 getUtility().isNonEmptyString(editorConfiguration['buttonLabel']),
1935 'Invalid configuration "buttonLabel"',
1936 1477318981
1937 );
1938 assert(
1939 getUtility().isNonEmptyString(editorConfiguration['propertyPath']),
1940 'Invalid configuration "propertyPath"',
1941 1477300590
1942 );
1943 assert(
1944 'tt_content' === editorConfiguration['browsableType'] || 'pages' === editorConfiguration['browsableType'],
1945 'Invalid configuration "browsableType"',
1946 1477319859
1947 );
1948
1949 getHelper()
1950 .getTemplatePropertyDomElement('label', editorHtml)
1951 .append(editorConfiguration['label']);
1952 getHelper()
1953 .getTemplatePropertyDomElement('buttonLabel', editorHtml)
1954 .append(editorConfiguration['buttonLabel']);
1955
1956 if (getUtility().isNonEmptyString(editorConfiguration['fieldExplanationText'])) {
1957 getHelper()
1958 .getTemplatePropertyDomElement('fieldExplanationText', editorHtml)
1959 .text(editorConfiguration['fieldExplanationText']);
1960 } else {
1961 getHelper()
1962 .getTemplatePropertyDomElement('fieldExplanationText', editorHtml)
1963 .remove();
1964 }
1965
1966 $('form', $(editorHtml)).prop('name', editorConfiguration['propertyPath']);
1967
1968 iconType = ('tt_content' === editorConfiguration['browsableType'])
1969 ? getHelper().getDomElementDataAttributeValue('iconTtContent')
1970 : getHelper().getDomElementDataAttributeValue('iconPage');
1971 Icons.getIcon(iconType, Icons.sizes.small).done(function(icon) {
1972 getHelper().getTemplatePropertyDomElement('image', editorHtml).append($(icon));
1973 });
1974
1975 getHelper().getTemplatePropertyDomElement('onclick', editorHtml).on('click', function() {
1976 var insertTarget, randomIdentifier;
1977
1978 randomIdentifier = Math.floor((Math.random() * 100000) + 1);
1979 insertTarget = $(this)
1980 .closest(getHelper().getDomElementDataIdentifierSelector('editorControlsWrapper'))
1981 .find(getHelper().getDomElementDataAttribute('contentElementSelectorTarget', 'bracesWithKey'));
1982
1983 insertTarget.attr(getHelper().getDomElementDataAttribute('contentElementSelectorTarget'), randomIdentifier);
1984 _openTypo3WinBrowser('db', randomIdentifier + '|||' + editorConfiguration['browsableType']);
1985 });
1986
1987 propertyPath = getFormEditorApp().buildPropertyPath(editorConfiguration['propertyPath'], collectionElementIdentifier, collectionName);
1988 propertyData = getCurrentlySelectedFormElement().get(propertyPath);
1989
1990 _validateCollectionElement(propertyPath, editorHtml);
1991 getHelper()
1992 .getTemplatePropertyDomElement('propertyPath', editorHtml)
1993 .val(propertyData);
1994
1995 getHelper().getTemplatePropertyDomElement('propertyPath', editorHtml).on('keyup paste', function() {
1996 getCurrentlySelectedFormElement().set(propertyPath, $(this).val());
1997 _validateCollectionElement(propertyPath, editorHtml);
1998 });
1999 };
2000
2001 /**
2002 * @public
2003 *
2004 * @param object editorConfiguration
2005 * @param object editorHtml
2006 * @param string collectionElementIdentifier
2007 * @param string collectionName
2008 * @return void
2009 * @throws 1475412563
2010 * @throws 1475412564
2011 */
2012 function renderRemoveElementEditor(editorConfiguration, editorHtml, collectionElementIdentifier, collectionName) {
2013 assert('object' === $.type(editorConfiguration), 'Invalid parameter "editorConfiguration"', 1475412563);
2014 assert('object' === $.type(editorHtml), 'Invalid parameter "editorHtml"', 1475412564);
2015
2016 if (getUtility().isUndefinedOrNull(collectionElementIdentifier)) {
2017
2018 $('button', $(editorHtml))
2019 .addClass(
2020 getHelper().getDomElementClassName('buttonFormElementRemove') + ' ' +
2021 getHelper().getDomElementClassName('buttonFormEditor')
2022 );
2023 } else {
2024 $('button', $(editorHtml)).addClass(
2025 getHelper().getDomElementClassName('buttonCollectionElementRemove')
2026 );
2027 }
2028
2029 $('button', $(editorHtml)).on('click', function(e) {
2030 if (getUtility().isUndefinedOrNull(collectionElementIdentifier)) {
2031 getViewModel().showRemoveFormElementModal();
2032 } else {
2033 getViewModel().showRemoveCollectionElementModal(collectionElementIdentifier, collectionName);
2034 }
2035 });
2036 };
2037
2038 /**
2039 * @public
2040 *
2041 * @param object editorConfiguration
2042 * @param object editorHtml
2043 * @param string propertyPath
2044 * @return void
2045 * @throws 1484574704
2046 * @throws 1484574705
2047 * @throws 1484574706
2048 */
2049 function renderFormElementSelectorEditorAddition(editorConfiguration, editorHtml, propertyPath) {
2050 var nonCompositeNonToplevelFormElements, formElementSelectorControlsWrapper,
2051 formElementSelectorSplitButtonListContainer, itemTemplate;
2052
2053 assert(
2054 'object' === $.type(editorConfiguration),
2055 'Invalid parameter "editorConfiguration"',
2056 1484574704
2057 );
2058 assert(
2059 'object' === $.type(editorHtml),
2060 'Invalid parameter "editorHtml"',
2061 1484574705
2062 );
2063 assert(
2064 getUtility().isNonEmptyString(propertyPath),
2065 'Invalid parameter "propertyPath"',
2066 1484574706
2067 );
2068
2069 formElementSelectorControlsWrapper = $(
2070 getHelper().getDomElementDataIdentifierSelector('formElementSelectorControlsWrapper'), editorHtml
2071 );
2072
2073 if (editorConfiguration['enableFormelementSelectionButton'] === true) {
2074 if (formElementSelectorControlsWrapper.length === 0) {
2075 return;
2076 }
2077
2078 formElementSelectorSplitButtonListContainer = $(
2079 getHelper().getDomElementDataIdentifierSelector('formElementSelectorSplitButtonListContainer'), editorHtml
2080 );
2081
2082 formElementSelectorSplitButtonListContainer.off().empty();
2083 nonCompositeNonToplevelFormElements = getFormEditorApp().getNonCompositeNonToplevelFormElements();
2084
2085 if (nonCompositeNonToplevelFormElements.length === 0) {
2086 Icons.getIcon(
2087 getHelper().getDomElementDataAttributeValue('iconNotAvailable'),
2088 Icons.sizes.small,
2089 null,
2090 Icons.states.default
2091 ).done(function(icon) {
2092 itemTemplate = $('<li data-no-sorting>'
2093 + '<a href="#"></a>'
2094 + '</li>');
2095
2096 itemTemplate
2097 .append($(icon))
2098 .append(' ' + getFormElementDefinition(getRootFormElement(), 'inspectorEditorFormElementSelectorNoElements'));
2099 formElementSelectorSplitButtonListContainer.append(itemTemplate);
2100 });
2101 } else {
2102 for (var i = 0, len = nonCompositeNonToplevelFormElements.length; i < len; ++i) {
2103 var nonCompositeNonToplevelFormElement;
2104
2105 nonCompositeNonToplevelFormElement = nonCompositeNonToplevelFormElements[i];
2106 Icons.getIcon(
2107 getFormElementDefinition(nonCompositeNonToplevelFormElement, 'iconIdentifier'),
2108 Icons.sizes.small,
2109 null,
2110 Icons.states.default
2111 ).done(function(icon) {
2112 itemTemplate = $('<li data-no-sorting>'
2113 + '<a href="#" data-formelement-identifier="' + nonCompositeNonToplevelFormElement.get('identifier') + '">'
2114 + '</a>'
2115 + '</li>');
2116
2117 $('[data-formelement-identifier="' + nonCompositeNonToplevelFormElement.get('identifier') + '"]', itemTemplate)
2118 .append($(icon))
2119 .append(' ' + nonCompositeNonToplevelFormElement.get('label'));
2120
2121 $('a', itemTemplate).on('click', function() {
2122 var propertyData;
2123
2124 propertyData = getCurrentlySelectedFormElement().get(propertyPath);
2125
2126 if (propertyData.length === 0) {
2127 propertyData = '{' + $(this).attr('data-formelement-identifier') + '}';
2128 } else {
2129 propertyData = propertyData + ' ' + '{' + $(this).attr('data-formelement-identifier') + '}';
2130 }
2131
2132 getCurrentlySelectedFormElement().set(propertyPath, propertyData);
2133 getHelper().getTemplatePropertyDomElement('propertyPath', editorHtml).val(propertyData);
2134 _validateCollectionElement(propertyPath, editorHtml);
2135 });
2136
2137 formElementSelectorSplitButtonListContainer.append(itemTemplate);
2138 });
2139 }
2140 }
2141 } else {
2142 $(getHelper().getDomElementDataIdentifierSelector('editorControlsInputGroup'), editorHtml)
2143 .removeClass(getHelper().getDomElementClassName('inspectorInputGroup'));
2144 formElementSelectorControlsWrapper.off().empty().remove();
2145 }
2146 }
2147
2148 /**
2149 * @public
2150 *
2151 * @param string content
2152 * @return void
2153 */
2154 function setFormElementHeaderEditorContent(content) {
2155 if (getFormEditorApp().getUtility().isUndefinedOrNull(content)) {
2156 content = buildTitleByFormElement();
2157 }
2158
2159 $(getHelper()
2160 .getDomElementDataIdentifierSelector('formElementHeaderEditor'), getInspectorDomElement())
2161 .html(content);
2162 };
2163
2164 /**
2165 * @public
2166 *
2167 * @param object
2168 * @return object
2169 * @throws 1478967319
2170 */
2171 function buildTitleByFormElement(formElement) {
2172 var label;
2173 if (getUtility().isUndefinedOrNull(formElement)) {
2174 formElement = getCurrentlySelectedFormElement();
2175 }
2176 assert('object' === $.type(formElement), 'Invalid parameter "formElement"', 1478967319);
2177
2178 return $('<span></span>').text((formElement.get('label')
2179 ? formElement.get('label')
2180 : formElement.get('identifier')));
2181 };
2182
2183 /**
2184 * @public
2185 *
2186 * @param object
2187 * @param object
2188 * @return this
2189 */
2190 function bootstrap(formEditorApp, configuration) {
2191 _formEditorApp = formEditorApp;
2192 _configuration = $.extend(true, _defaultConfiguration, configuration || {});
2193 _helperSetup();
2194 return this;
2195 };
2196
2197 /**
2198 * Publish the public methods.
2199 * Implements the "Revealing Module Pattern".
2200 */
2201 return {
2202 bootstrap: bootstrap,
2203 buildTitleByFormElement: buildTitleByFormElement,
2204 getCollectionElementDomElement: getCollectionElementDomElement,
2205 getFinishersContainerDomElement: getFinishersContainerDomElement,
2206 getInspectorDomElement: getInspectorDomElement,
2207 getValidatorsContainerDomElement: getValidatorsContainerDomElement,
2208 renderCheckboxEditor: renderCheckboxEditor,
2209 renderCollectionElementEditors: renderCollectionElementEditors,
2210 renderCollectionElementHeaderEditor: renderCollectionElementHeaderEditor,
2211 renderCollectionElementSelectionEditor: renderCollectionElementSelectionEditor,
2212 renderEditors: renderEditors,
2213 renderFormElementHeaderEditor: renderFormElementHeaderEditor,
2214 renderFormElementSelectorEditorAddition: renderFormElementSelectorEditorAddition,
2215 renderPropertyGridEditor: renderPropertyGridEditor,
2216 renderRemoveElementEditor: renderRemoveElementEditor,
2217 renderRequiredValidatorEditor: renderRequiredValidatorEditor,
2218 renderSingleSelectEditor: renderSingleSelectEditor,
2219 renderMultiSelectEditor: renderMultiSelectEditor,
2220 renderTextareaEditor: renderTextareaEditor,
2221 renderTextEditor: renderTextEditor,
2222 renderTypo3WinBrowserEditor: renderTypo3WinBrowserEditor,
2223 setFormElementHeaderEditorContent: setFormElementHeaderEditorContent
2224 };
2225 })($, Helper, Icons, Notification);
2226 });