/* * This file is part of the TYPO3 CMS project. * * It is free software; you can redistribute it and/or modify it under * the terms of the GNU General Public License, either version 2 * of the License, or any later version. * * For the full copyright and license information, please read the * LICENSE.txt file that was distributed with this source code. * * The TYPO3 project - inspiring people to share! */ import"bootstrap";import a from"@typo3/core/document-service.js";import{selector as d}from"@typo3/core/literals.js";import"@typo3/backend/element/icon-element.js";import r from"@typo3/backend/popover.js";import{Tab as c}from"@typo3/backend/tab.js";import m from"@typo3/backend/utility/dom-helper.js";import u from"~labels/backend.alt_doc";class h{constructor(e){this.formElement=e,this.toggleButtonClass="t3js-toggle-review-panel",this.labelSelector=".t3js-formengine-label",this.invalidFields=new Set,this.initialize()}initialize(){this.formElement.addEventListener("t3-formengine-postfieldvalidation",e=>{const i=e.detail.field;e.detail.isValid?this.invalidFields.delete(i):this.invalidFields.add(i),this.checkForReviewableField()}),a.ready().then(()=>{this.attachButtonToModuleHeader(),this.checkForReviewableField()})}attachButtonToModuleHeader(){const e=document.querySelector(".t3js-module-docheader-buttons")?.lastElementChild?.querySelector('[role="toolbar"]');if(!e)return;const i=document.createElement("typo3-backend-icon");i.setAttribute("identifier","actions-exclamation-circle"),i.setAttribute("size","small");const t=document.createElement("button");t.type="button",t.classList.add("btn","btn-danger","btn-sm","hidden",this.toggleButtonClass),t.title=u.get("buttons.reviewFailedValidationFields"),t.appendChild(i),r.popover(t),e.prepend(t)}checkForReviewableField(){const e=document.querySelector("."+this.toggleButtonClass);if(e!==null)if(this.invalidFields.size>0){const i=document.createElement("div");i.classList.add("list-group");for(const t of this.invalidFields){const o=t.closest(".t3js-formengine-validation-marker");if(o===null)throw console.error(t),new Error("Could not find an element containing the `t3js-formengine-validation-marker` class for the previously logged input field.");const l=o.querySelector("[data-formengine-validation-rules]");if(l===null)throw console.error(o),new Error("Could not find an element containing the `data-formengine-validation-rules` attribute for the previously logged container.");const n=document.createElement("a");n.classList.add("list-group-item"),n.href="#",n.textContent=o.querySelector(this.labelSelector)?.textContent||"",n.addEventListener("click",s=>{this.switchToField(s,o,l)}),i.append(n)}e.classList.remove("hidden"),r.setOptions(e,{html:!0,content:i})}else e.classList.add("hidden"),r.hide(e)}switchToField(e,i,t){e.preventDefault();let o=t;for(;o;){if(o.matches('[id][role="tabpanel"]')){const l=document.querySelector(d`[aria-controls="${o.id}"]`);c.show(l)}o=o.parentElement}t.checkVisibility()?t.focus():m.scrollIntoViewIfNeeded(i)}}export{h as FormEngineReview};