bc761295caf7975d190d9b6c5f2b68d1d6e52d45
[Packages/TYPO3.CMS.git] / typo3 / sysext / backend / Resources / Public / JavaScript / FormEngineReview.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 define(["require", "exports", "TYPO3/CMS/Backend/FormEngineValidation", "jquery", "bootstrap"], function (require, exports, FormEngineValidation, $) {
14 "use strict";
15 /**
16 * Module: TYPO3/CMS/Backend/FormEngineReview
17 * Enables interaction with record fields that need review
18 * @exports TYPO3/CMS/Backend/FormEngineReview
19 */
20 var FormEngineReview = (function () {
21 /**
22 * The constructor, set the class properties default values
23 */
24 function FormEngineReview() {
25 var _this = this;
26 /**
27 * Checks if fields have failed validation. In such case, the markup is rendered and the toggle button is unlocked.
28 */
29 this.checkForReviewableField = function () {
30 var me = _this;
31 var $invalidFields = FormEngineReview.findInvalidField();
32 var $toggleButton = $('.' + _this.toggleButtonClass);
33 if ($invalidFields.length > 0) {
34 var $list_1 = $('<div />', { 'class': 'list-group' });
35 $invalidFields.each(function () {
36 var $field = $(this);
37 var $input = $field.find('[data-formengine-validation-rules]');
38 var inputId = $input.attr('id');
39 if (typeof inputId === 'undefined') {
40 inputId = $input.parent().children('[id]').first().attr('id');
41 }
42 $list_1.append($('<a />', {
43 href: '#',
44 'class': 'list-group-item ' + me.fieldListItemClass,
45 'data-field-id': inputId,
46 }).text($field.find(me.labelSelector).text()));
47 });
48 $toggleButton.removeClass('hidden');
49 // Bootstrap has no official API to update the content of a popover w/o destroying it
50 var $popover = $toggleButton.data('bs.popover');
51 $popover.options.content = $list_1.wrapAll('<div>').parent().html();
52 $popover.setContent();
53 $popover.$tip.addClass($popover.options.placement);
54 }
55 else {
56 $toggleButton.addClass('hidden').popover('hide');
57 }
58 };
59 /**
60 * Finds the field in the form and focuses it
61 *
62 * @param {Event} e
63 */
64 this.switchToField = function (e) {
65 e.preventDefault();
66 var $listItem = $(e.currentTarget);
67 var referenceFieldId = $listItem.data('fieldId');
68 var $referenceField = $('#' + referenceFieldId);
69 // Iterate possibly nested tab panels
70 $referenceField.parents('[id][role="tabpanel"]').each(function () {
71 $('[aria-controls="' + $(this).attr('id') + '"]').tab('show');
72 });
73 $referenceField.focus();
74 };
75 this.toggleButtonClass = 't3js-toggle-review-panel';
76 this.fieldListItemClass = 't3js-field-item';
77 this.labelSelector = '.t3js-formengine-label';
78 this.initialize();
79 }
80 /**
81 * Fetches all fields that have a failed validation
82 *
83 * @return {$}
84 */
85 FormEngineReview.findInvalidField = function () {
86 return $(document).find('.tab-content .' + FormEngineValidation.errorClass);
87 };
88 /**
89 * Renders an invisible button to toggle the review panel into the least possible toolbar
90 *
91 * @param {Object} context
92 */
93 FormEngineReview.attachButtonToModuleHeader = function (context) {
94 var $leastButtonBar = $('.t3js-module-docheader-bar-buttons').children().last().find('[role="toolbar"]');
95 var $button = $('<a />', {
96 'class': 'btn btn-danger btn-sm hidden ' + context.toggleButtonClass,
97 href: '#',
98 title: TYPO3.lang['buttons.reviewFailedValidationFields'],
99 }).append($('<span />', { 'class': 'fa fa-fw fa-info' }));
100 $button.popover({
101 container: 'body',
102 html: true,
103 placement: 'bottom',
104 });
105 $leastButtonBar.prepend($button);
106 };
107 /**
108 * Initialize the events
109 */
110 FormEngineReview.prototype.initialize = function () {
111 var me = this;
112 var $document = $(document);
113 $(function () {
114 FormEngineReview.attachButtonToModuleHeader(me);
115 });
116 $document.on('click', '.' + this.fieldListItemClass, this.switchToField);
117 $document.on('t3-formengine-postfieldvalidation', this.checkForReviewableField);
118 };
119 return FormEngineReview;
120 }());
121 return new FormEngineReview();
122 });