Commit 16475a7c authored by Andreas Fernandez's avatar Andreas Fernandez
Browse files

[BUGFIX] Replace legacy bootstrap classes supported by FontAwesome

FontAwesome provides CSS classes that align with the old Bootstrap v3
classes, which will cause troubles with the removal of FontAwesome.
As another preparation task, those classes are be replaced with the
according Bootstrap classes.

Classes replaced:

* pull-left -> float-start
* pull-right -> float-end
* sr-only -> visually-hidden

Resolves: #98064
Resolves: #94531
Releases: main, 11.5
Change-Id: I4e96572e6b3a0007a7bf68f3018934f73da6249b
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/75344

Tested-by: core-ci's avatarcore-ci <typo3@b13.com>
Tested-by: Oliver Bartsch's avatarOliver Bartsch <bo@cedev.de>
Tested-by: default avatarStefan Kapitza <s.kapitza@neusta.de>
Tested-by: Andreas Fernandez's avatarAndreas Fernandez <a.fernandez@scripting-base.de>
Reviewed-by: Oliver Bartsch's avatarOliver Bartsch <bo@cedev.de>
Reviewed-by: Georg Ringer's avatarGeorg Ringer <georg.ringer@gmail.com>
Reviewed-by: default avatarStefan Kapitza <s.kapitza@neusta.de>
Reviewed-by: Andreas Fernandez's avatarAndreas Fernandez <a.fernandez@scripting-base.de>
parent 2ce10f5f
......@@ -202,7 +202,7 @@ class ImageManipulation {
additionalCssClasses: ['modal-image-manipulation'],
buttons: [
{
btnClass: 'btn-default pull-left',
btnClass: 'btn-default float-start',
dataAttributes: {
method: 'preview',
},
......
......@@ -207,7 +207,7 @@ class LoginRefresh {
'aria-valuemin': '0',
'aria-valuemax': '100',
}).append(
$('<span />', {class: 'sr-only'}),
$('<span />', {class: 'visually-hidden'}),
),
),
);
......@@ -323,7 +323,7 @@ class LoginRefresh {
const max = 100;
let current = 0;
const $progressBar = $activeModal.find('.progress-bar');
const $srText = $progressBar.children('.sr-only');
const $srText = $progressBar.children('.visually-hidden');
const progress = setInterval(() => {
const isOverdue = (current >= max);
......
......@@ -99,7 +99,7 @@ class Modal {
<span aria-hidden="true">
<span class="t3js-modal-icon-placeholder" data-icon="actions-close"></span>
</span>
<span class="sr-only"></span>
<span class="visually-hidden"></span>
</button>
</div>
<div class="t3js-modal-body modal-body"></div>
......
......@@ -137,7 +137,7 @@ class MultiStepWizard {
[{
text: top.TYPO3.lang['wizard.button.cancel'],
active: true,
btnClass: 'btn-default pull-left',
btnClass: 'btn-default float-start',
name: 'cancel',
trigger: (): void => {
this.getComponent().trigger('wizard-dismiss');
......
......@@ -208,7 +208,7 @@ class NotificationMessage extends LitElement {
role="alert">
<button type="button" class="close" @click="${async (e: Event) => this.close()}">
<span aria-hidden="true"><typo3-backend-icon identifier="actions-close" size="small"></typo3-backend-icon></span>
<span class="sr-only">Close</span>
<span class="visually-hidden">Close</span>
</button>
<div class="media">
<div class="media-left">
......
......@@ -198,7 +198,7 @@ class LiveSearch {
private linkItem(suggestion: Suggestion): TemplateResult {
if(suggestion.value === 'search_all') {
return html`
<a class="dropdown-list-link btn btn-primary pull-right t3js-live-search-show-all" data-pageid="0">${suggestion.data.title}</a>
<a class="dropdown-list-link btn btn-primary float-end t3js-live-search-show-all" data-pageid="0">${suggestion.data.title}</a>
`
}
......
......@@ -124,7 +124,7 @@ class MfaInfoElement extends AbstractFormElement
}
if ($isDeactivationAllowed) {
$childHtml[] = '<button type="button"';
$childHtml[] = ' class="btn btn-default btn-sm pull-right t3js-deactivate-provider-button"';
$childHtml[] = ' class="btn btn-default btn-sm float-end t3js-deactivate-provider-button"';
$childHtml[] = ' data-confirmation-title="' . htmlspecialchars(sprintf($lang->sL('LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:buttons.deactivateMfaProvider'), $lang->sL($activeProvider->getTitle()))) . '"';
$childHtml[] = ' data-confirmation-content="' . htmlspecialchars(sprintf($lang->sL('LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:buttons.deactivateMfaProvider.confirmation.text'), $lang->sL($activeProvider->getTitle()))) . '"';
$childHtml[] = ' data-confirmation-cancel-text="' . htmlspecialchars($lang->sL('LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.cancel')) . '"';
......
......@@ -157,7 +157,7 @@ class SplitButton extends AbstractButton
' . htmlspecialchars($items['primary']->getTitle()) . '
</button>
<button type="button" class="btn btn-sm btn-default dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">';
......
......@@ -17,7 +17,7 @@
<div class="typo3-login-wrap">
<div class="card card-login">
<header class="card-heading">
<h1 class="sr-only"><f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang.xlf:login.header" /></h1>
<h1 class="visually-hidden"><f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang.xlf:login.header" /></h1>
<div class="typo3-login-logo">
<img src="{logo}" class="typo3-login-image" alt="{logoAlt}" />
</div>
......
......@@ -6,7 +6,7 @@
<f:if condition="{loginNewsItems}">
<section class="typo3-login-news" aria-labelledby="loginNewsHeader">
<h2 id="loginNewsHeader" class="sr-only">
<h2 id="loginNewsHeader" class="visually-hidden">
<f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang.xlf:login.news.header" />
</h2>
<f:if condition="{loginNewsItems -> f:count()} > 1">
......@@ -14,11 +14,11 @@
<div class="carousel slide typo3-login-carousel t3js-login-news-carousel" id="loginNews" data-bs-ride="false">
<button class="left typo3-login-carousel-control" data-bs-target="#loginNews" data-bs-slide="prev">
<core:icon identifier="actions-chevron-left" size="small" />
<span class="sr-only"><f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang.xlf:login.news.previous"/></span>
<span class="visually-hidden"><f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang.xlf:login.news.previous"/></span>
</button>
<button type="button" class="right typo3-login-carousel-control" data-bs-target="#loginNews" data-bs-slide="next">
<core:icon identifier="actions-chevron-right" size="small" />
<span class="sr-only"><f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang.xlf:login.news.next"/></span>
<span class="visually-hidden"><f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang.xlf:login.news.next"/></span>
</button>
<div class="carousel-inner" aria-live="polite">
<f:for each="{loginNewsItems}" as="item" iteration="loginNewsIterator">
......@@ -45,7 +45,7 @@
{item.content -> f:transform.html() -> f:sanitize.html()}
<f:if condition="{item.date}">
<p class="text-muted">
<span class="sr-only"><f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang.xlf:login.news.date"/></span>{item.date}
<span class="visually-hidden"><f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang.xlf:login.news.date"/></span>{item.date}
</p>
</f:if>
</f:section>
......
......@@ -59,7 +59,7 @@
title="{f:translate(id:'LLL:EXT:core/Resources/Private/Language/locallang_wizards.xlf:imwizard.set-aspect-ratio')}"
>
<input
class="sr-only"
class="visually-hidden"
id="aspectRatio-{cropVariantIterator.cycle}-{ratioIterator.cycle}"
name="aspectRatio-{cropVariantIterator.cycle}-{ratioIterator.cycle}"
value="{cropVariant.id}"
......
......@@ -14,7 +14,7 @@
<h3 class="callout-title"><f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang_reset_password.xlf:email_sent.headline" /></h3>
<div class="callout-body"><f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang_reset_password.xlf:email_sent.message" arguments="{0: email}" /></div>
</div>
<p class="pull-right">
<p class="float-end">
<a href="{returnUrl}"><f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang_reset_password.xlf:button.back_to_login" /></a>.
</p>
</f:then>
......@@ -43,7 +43,7 @@
<f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang_reset_password.xlf:note.other_providers" />
</small>
</p>
<p class="pull-right">
<p class="float-end">
<a href="{returnUrl}"><f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang_reset_password.xlf:button.back_to_login" /></a>.
</p>
</f:else>
......
......@@ -59,7 +59,7 @@
alt=""
title="{f:translate(key: 'LLL:EXT:backend/Resources/Private/Language/locallang.xlf:login.error.capslock')}"
/>
<span class="sr-only"><f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang.xlf:login.error.capslockStatus" /></span>
<span class="visually-hidden"><f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang.xlf:login.error.capslockStatus" /></span>
</div>
</div>
</div>
......@@ -78,7 +78,7 @@
/>
<div role="status" class="form-notice-capslock hidden t3js-login-alert-capslock">
<img aria-hidden="true" src="{images.capslock}" width="14" height="14" alt="" title="{f:translate(key: 'LLL:EXT:backend/Resources/Private/Language/locallang.xlf:login.error.capslock')}" />
<span class="sr-only"><f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang.xlf:login.error.capslockStatus" /></span>
<span class="visually-hidden"><f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang.xlf:login.error.capslockStatus" /></span>
</div>
</div>
</div>
......
......@@ -36,7 +36,7 @@
alt=""
title="{f:translate(key: 'LLL:EXT:backend/Resources/Private/Language/locallang.xlf:login.error.capslock')}"
/>
<span class="sr-only"><f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang.xlf:login.error.capslockStatus" /></span>
<span class="visually-hidden"><f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang.xlf:login.error.capslockStatus" /></span>
</div>
</div>
</div>
......@@ -64,7 +64,7 @@
alt=""
title="{f:translate(key: 'LLL:EXT:backend/Resources/Private/Language/locallang.xlf:login.error.capslock')}"
/>
<span class="sr-only"><f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang.xlf:login.error.capslockStatus" /></span>
<span class="visually-hidden"><f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang.xlf:login.error.capslockStatus" /></span>
</div>
</div>
</div>
......
......@@ -57,14 +57,14 @@
<f:if condition="{switchUserMode}">
<f:then>
<typo3-backend-switch-user mode="exit">
<button type="button" class="btn btn-danger pull-left">
<button type="button" class="btn btn-danger float-start">
<core:icon identifier="actions-logout" size="small" alternativeMarkupIdentifier="inline"/>
{f:translate(key: 'LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:buttons.exitSwitchUser')}
</button>
</typo3-backend-switch-user>
</f:then>
<f:else>
<f:be.link route="logout" class="btn btn-danger pull-left" target="_top">
<f:be.link route="logout" class="btn btn-danger float-start" target="_top">
<core:icon identifier="actions-logout" size="small" alternativeMarkupIdentifier="inline"/>
{f:translate(key: 'LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:buttons.logout')}
</f:be.link>
......
......@@ -10,4 +10,4 @@
*
* The TYPO3 project - inspiring people to share!
*/
import $ from"jquery";import AjaxRequest from"@typo3/core/ajax/ajax-request.js";import Notification from"@typo3/backend/notification.js";var MarkupIdentifiers;!function(e){e.loginrefresh="t3js-modal-loginrefresh",e.lockedModal="t3js-modal-backendlocked",e.loginFormModal="t3js-modal-backendloginform"}(MarkupIdentifiers||(MarkupIdentifiers={}));class LoginRefresh{constructor(){this.options={modalConfig:{backdrop:"static"}},this.intervalTime=60,this.intervalId=null,this.backendIsLocked=!1,this.isTimingOut=!1,this.$timeoutModal=null,this.$backendLockedModal=null,this.$loginForm=null,this.loginFramesetUrl="",this.logoutUrl="",this.submitForm=e=>{e.preventDefault();const o=this.$loginForm.find("form"),t=o.find("input[name=p_field]"),i=o.find("input[name=userident]"),s=t.val();if(""===s&&""===i.val())return Notification.error(TYPO3.lang["mess.refresh_login_failed"],TYPO3.lang["mess.refresh_login_emptyPassword"]),void t.focus();s&&(i.val(s),t.val(""));const a={login_status:"login"};$.each(o.serializeArray(),(function(e,o){a[o.name]=o.value})),new AjaxRequest(o.attr("action")).post(a).then(async e=>{(await e.resolve()).login.success?this.hideLoginForm():(Notification.error(TYPO3.lang["mess.refresh_login_failed"],TYPO3.lang["mess.refresh_login_failed_message"]),t.focus())})},this.checkActiveSession=()=>{new AjaxRequest(TYPO3.settings.ajaxUrls.login_timedout).get().then(async e=>{const o=await e.resolve();o.login.locked?this.backendIsLocked||(this.backendIsLocked=!0,this.showBackendLockedModal()):this.backendIsLocked&&(this.backendIsLocked=!1,this.hideBackendLockedModal()),this.backendIsLocked||(o.login.timed_out||o.login.will_time_out)&&(o.login.timed_out?this.showLoginForm():this.showTimeoutModal())})}}initialize(e){"object"==typeof e&&this.applyOptions(e),this.initializeTimeoutModal(),this.initializeBackendLockedModal(),this.initializeLoginForm(),this.startTask()}startTask(){if(null!==this.intervalId)return;let e=1e3*this.intervalTime;this.intervalId=setInterval(this.checkActiveSession,e)}stopTask(){clearInterval(this.intervalId),this.intervalId=null}setIntervalTime(e){this.intervalTime=Math.min(e,86400)}setLogoutUrl(e){this.logoutUrl=e}setLoginFramesetUrl(e){this.loginFramesetUrl=e}showTimeoutModal(){this.isTimingOut=!0,this.$timeoutModal.modal(this.options.modalConfig),this.$timeoutModal.modal("show"),this.fillProgressbar(this.$timeoutModal)}hideTimeoutModal(){this.isTimingOut=!1,this.$timeoutModal.modal("hide")}showBackendLockedModal(){this.$backendLockedModal.modal(this.options.modalConfig),this.$backendLockedModal.modal("show")}hideBackendLockedModal(){this.$backendLockedModal.modal("hide")}showLoginForm(){new AjaxRequest(TYPO3.settings.ajaxUrls.logout).get().then(()=>{TYPO3.configuration.showRefreshLoginPopup?this.showLoginPopup():(this.$loginForm.modal(this.options.modalConfig),this.$loginForm.modal("show"))})}showLoginPopup(){const e=window.open(this.loginFramesetUrl,"relogin_"+Math.random().toString(16).slice(2),"height=450,width=700,status=0,menubar=0,location=1");e&&e.focus()}hideLoginForm(){this.$loginForm.modal("hide")}initializeBackendLockedModal(){this.$backendLockedModal=this.generateModal(MarkupIdentifiers.lockedModal),this.$backendLockedModal.find(".modal-header h4").text(TYPO3.lang["mess.please_wait"]),this.$backendLockedModal.find(".modal-body").append($("<p />").text(TYPO3.lang["mess.be_locked"])),this.$backendLockedModal.find(".modal-footer").remove(),$("body").append(this.$backendLockedModal)}initializeTimeoutModal(){this.$timeoutModal=this.generateModal(MarkupIdentifiers.loginrefresh),this.$timeoutModal.addClass("modal-severity-notice"),this.$timeoutModal.find(".modal-header h4").text(TYPO3.lang["mess.login_about_to_expire_title"]),this.$timeoutModal.find(".modal-body").append($("<p />").text(TYPO3.lang["mess.login_about_to_expire"]),$("<div />",{class:"progress"}).append($("<div />",{class:"progress-bar progress-bar-warning progress-bar-striped progress-bar-animated",role:"progressbar","aria-valuemin":"0","aria-valuemax":"100"}).append($("<span />",{class:"sr-only"})))),this.$timeoutModal.find(".modal-footer").append($("<button />",{class:"btn btn-default","data-action":"logout"}).text(TYPO3.lang["mess.refresh_login_logout_button"]).on("click",()=>{top.location.href=this.logoutUrl}),$("<button />",{class:"btn btn-primary t3js-active","data-action":"refreshSession"}).text(TYPO3.lang["mess.refresh_login_refresh_button"]).on("click",()=>{new AjaxRequest(TYPO3.settings.ajaxUrls.login_refresh).get().then(async e=>{const o=await e.resolve();this.hideTimeoutModal(),o.refresh.success||this.showLoginForm()})})),this.registerDefaultModalEvents(this.$timeoutModal),$("body").append(this.$timeoutModal)}initializeLoginForm(){if(TYPO3.configuration.showRefreshLoginPopup)return;this.$loginForm=this.generateModal(MarkupIdentifiers.loginFormModal),this.$loginForm.addClass("modal-notice");let e=String(TYPO3.lang["mess.refresh_login_title"]).replace("%s",TYPO3.configuration.username);this.$loginForm.find(".modal-header h4").text(e),this.$loginForm.find(".modal-body").append($("<p />").text(TYPO3.lang["mess.login_expired"]),$("<form />",{id:"beLoginRefresh",method:"POST",action:TYPO3.settings.ajaxUrls.login}).append($("<div />").append($("<input />",{type:"text",name:"username",class:"d-none",value:TYPO3.configuration.username}),$("<input />",{type:"hidden",name:"userident",id:"t3-loginrefresh-userident"})),$("<div />",{class:"form-group"}).append($("<input />",{type:"password",name:"p_field",autofocus:"autofocus",class:"form-control",placeholder:TYPO3.lang["mess.refresh_login_password"]})))),this.$loginForm.find(".modal-body .d-none").attr("autocomplete","username"),this.$loginForm.find(".modal-body .form-control").attr("autocomplete","current-password"),this.$loginForm.find(".modal-footer").append($("<a />",{href:this.logoutUrl,class:"btn btn-default"}).text(TYPO3.lang["mess.refresh_exit_button"]),$("<button />",{type:"submit",class:"btn btn-primary","data-action":"refreshSession",form:"beLoginRefresh"}).text(TYPO3.lang["mess.refresh_login_button"]).on("click",()=>{this.$loginForm.find("form").trigger("submit")})),this.registerDefaultModalEvents(this.$loginForm).on("submit",this.submitForm),$("body").append(this.$loginForm)}generateModal(e){return $("<div />",{id:e,class:"t3js-modal "+e+" modal modal-type-default modal-severity-notice modal-style-light modal-size-small fade"}).append($("<div />",{class:"modal-dialog"}).append($("<div />",{class:"modal-content"}).append($("<div />",{class:"modal-header"}).append($("<h4 />",{class:"modal-title"})),$("<div />",{class:"modal-body"}),$("<div />",{class:"modal-footer"}))))}fillProgressbar(e){if(!this.isTimingOut)return;let o=0;const t=e.find(".progress-bar"),i=t.children(".sr-only"),s=setInterval(()=>{const e=o>=100;!this.isTimingOut||e?(clearInterval(s),e&&(this.hideTimeoutModal(),this.showLoginForm()),o=0):o+=1;const a=o+"%";t.css("width",a),i.text(a)},300)}registerDefaultModalEvents(e){return e.on("hidden.bs.modal",()=>{this.startTask()}).on("shown.bs.modal",()=>{this.stopTask(),this.$timeoutModal.find(".modal-footer .t3js-active").first().focus()}),e}applyOptions(e){void 0!==e.intervalTime&&this.setIntervalTime(e.intervalTime),void 0!==e.loginFramesetUrl&&this.setLoginFramesetUrl(e.loginFramesetUrl),void 0!==e.logoutUrl&&this.setLogoutUrl(e.logoutUrl)}}let loginRefreshObject;try{window.opener&&window.opener.TYPO3&&window.opener.TYPO3.LoginRefresh&&(loginRefreshObject=window.opener.TYPO3.LoginRefresh),parent&&parent.window.TYPO3&&parent.window.TYPO3.LoginRefresh&&(loginRefreshObject=parent.window.TYPO3.LoginRefresh),top&&top.TYPO3&&top.TYPO3.LoginRefresh&&(loginRefreshObject=top.TYPO3.LoginRefresh)}catch{}loginRefreshObject||(loginRefreshObject=new LoginRefresh,"undefined"!=typeof TYPO3&&(TYPO3.LoginRefresh=loginRefreshObject));export default loginRefreshObject;
\ No newline at end of file
import $ from"jquery";import AjaxRequest from"@typo3/core/ajax/ajax-request.js";import Notification from"@typo3/backend/notification.js";var MarkupIdentifiers;!function(e){e.loginrefresh="t3js-modal-loginrefresh",e.lockedModal="t3js-modal-backendlocked",e.loginFormModal="t3js-modal-backendloginform"}(MarkupIdentifiers||(MarkupIdentifiers={}));class LoginRefresh{constructor(){this.options={modalConfig:{backdrop:"static"}},this.intervalTime=60,this.intervalId=null,this.backendIsLocked=!1,this.isTimingOut=!1,this.$timeoutModal=null,this.$backendLockedModal=null,this.$loginForm=null,this.loginFramesetUrl="",this.logoutUrl="",this.submitForm=e=>{e.preventDefault();const o=this.$loginForm.find("form"),t=o.find("input[name=p_field]"),i=o.find("input[name=userident]"),s=t.val();if(""===s&&""===i.val())return Notification.error(TYPO3.lang["mess.refresh_login_failed"],TYPO3.lang["mess.refresh_login_emptyPassword"]),void t.focus();s&&(i.val(s),t.val(""));const a={login_status:"login"};$.each(o.serializeArray(),(function(e,o){a[o.name]=o.value})),new AjaxRequest(o.attr("action")).post(a).then(async e=>{(await e.resolve()).login.success?this.hideLoginForm():(Notification.error(TYPO3.lang["mess.refresh_login_failed"],TYPO3.lang["mess.refresh_login_failed_message"]),t.focus())})},this.checkActiveSession=()=>{new AjaxRequest(TYPO3.settings.ajaxUrls.login_timedout).get().then(async e=>{const o=await e.resolve();o.login.locked?this.backendIsLocked||(this.backendIsLocked=!0,this.showBackendLockedModal()):this.backendIsLocked&&(this.backendIsLocked=!1,this.hideBackendLockedModal()),this.backendIsLocked||(o.login.timed_out||o.login.will_time_out)&&(o.login.timed_out?this.showLoginForm():this.showTimeoutModal())})}}initialize(e){"object"==typeof e&&this.applyOptions(e),this.initializeTimeoutModal(),this.initializeBackendLockedModal(),this.initializeLoginForm(),this.startTask()}startTask(){if(null!==this.intervalId)return;let e=1e3*this.intervalTime;this.intervalId=setInterval(this.checkActiveSession,e)}stopTask(){clearInterval(this.intervalId),this.intervalId=null}setIntervalTime(e){this.intervalTime=Math.min(e,86400)}setLogoutUrl(e){this.logoutUrl=e}setLoginFramesetUrl(e){this.loginFramesetUrl=e}showTimeoutModal(){this.isTimingOut=!0,this.$timeoutModal.modal(this.options.modalConfig),this.$timeoutModal.modal("show"),this.fillProgressbar(this.$timeoutModal)}hideTimeoutModal(){this.isTimingOut=!1,this.$timeoutModal.modal("hide")}showBackendLockedModal(){this.$backendLockedModal.modal(this.options.modalConfig),this.$backendLockedModal.modal("show")}hideBackendLockedModal(){this.$backendLockedModal.modal("hide")}showLoginForm(){new AjaxRequest(TYPO3.settings.ajaxUrls.logout).get().then(()=>{TYPO3.configuration.showRefreshLoginPopup?this.showLoginPopup():(this.$loginForm.modal(this.options.modalConfig),this.$loginForm.modal("show"))})}showLoginPopup(){const e=window.open(this.loginFramesetUrl,"relogin_"+Math.random().toString(16).slice(2),"height=450,width=700,status=0,menubar=0,location=1");e&&e.focus()}hideLoginForm(){this.$loginForm.modal("hide")}initializeBackendLockedModal(){this.$backendLockedModal=this.generateModal(MarkupIdentifiers.lockedModal),this.$backendLockedModal.find(".modal-header h4").text(TYPO3.lang["mess.please_wait"]),this.$backendLockedModal.find(".modal-body").append($("<p />").text(TYPO3.lang["mess.be_locked"])),this.$backendLockedModal.find(".modal-footer").remove(),$("body").append(this.$backendLockedModal)}initializeTimeoutModal(){this.$timeoutModal=this.generateModal(MarkupIdentifiers.loginrefresh),this.$timeoutModal.addClass("modal-severity-notice"),this.$timeoutModal.find(".modal-header h4").text(TYPO3.lang["mess.login_about_to_expire_title"]),this.$timeoutModal.find(".modal-body").append($("<p />").text(TYPO3.lang["mess.login_about_to_expire"]),$("<div />",{class:"progress"}).append($("<div />",{class:"progress-bar progress-bar-warning progress-bar-striped progress-bar-animated",role:"progressbar","aria-valuemin":"0","aria-valuemax":"100"}).append($("<span />",{class:"visually-hidden"})))),this.$timeoutModal.find(".modal-footer").append($("<button />",{class:"btn btn-default","data-action":"logout"}).text(TYPO3.lang["mess.refresh_login_logout_button"]).on("click",()=>{top.location.href=this.logoutUrl}),$("<button />",{class:"btn btn-primary t3js-active","data-action":"refreshSession"}).text(TYPO3.lang["mess.refresh_login_refresh_button"]).on("click",()=>{new AjaxRequest(TYPO3.settings.ajaxUrls.login_refresh).get().then(async e=>{const o=await e.resolve();this.hideTimeoutModal(),o.refresh.success||this.showLoginForm()})})),this.registerDefaultModalEvents(this.$timeoutModal),$("body").append(this.$timeoutModal)}initializeLoginForm(){if(TYPO3.configuration.showRefreshLoginPopup)return;this.$loginForm=this.generateModal(MarkupIdentifiers.loginFormModal),this.$loginForm.addClass("modal-notice");let e=String(TYPO3.lang["mess.refresh_login_title"]).replace("%s",TYPO3.configuration.username);this.$loginForm.find(".modal-header h4").text(e),this.$loginForm.find(".modal-body").append($("<p />").text(TYPO3.lang["mess.login_expired"]),$("<form />",{id:"beLoginRefresh",method:"POST",action:TYPO3.settings.ajaxUrls.login}).append($("<div />").append($("<input />",{type:"text",name:"username",class:"d-none",value:TYPO3.configuration.username}),$("<input />",{type:"hidden",name:"userident",id:"t3-loginrefresh-userident"})),$("<div />",{class:"form-group"}).append($("<input />",{type:"password",name:"p_field",autofocus:"autofocus",class:"form-control",placeholder:TYPO3.lang["mess.refresh_login_password"]})))),this.$loginForm.find(".modal-body .d-none").attr("autocomplete","username"),this.$loginForm.find(".modal-body .form-control").attr("autocomplete","current-password"),this.$loginForm.find(".modal-footer").append($("<a />",{href:this.logoutUrl,class:"btn btn-default"}).text(TYPO3.lang["mess.refresh_exit_button"]),$("<button />",{type:"submit",class:"btn btn-primary","data-action":"refreshSession",form:"beLoginRefresh"}).text(TYPO3.lang["mess.refresh_login_button"]).on("click",()=>{this.$loginForm.find("form").trigger("submit")})),this.registerDefaultModalEvents(this.$loginForm).on("submit",this.submitForm),$("body").append(this.$loginForm)}generateModal(e){return $("<div />",{id:e,class:"t3js-modal "+e+" modal modal-type-default modal-severity-notice modal-style-light modal-size-small fade"}).append($("<div />",{class:"modal-dialog"}).append($("<div />",{class:"modal-content"}).append($("<div />",{class:"modal-header"}).append($("<h4 />",{class:"modal-title"})),$("<div />",{class:"modal-body"}),$("<div />",{class:"modal-footer"}))))}fillProgressbar(e){if(!this.isTimingOut)return;let o=0;const t=e.find(".progress-bar"),i=t.children(".visually-hidden"),s=setInterval(()=>{const e=o>=100;!this.isTimingOut||e?(clearInterval(s),e&&(this.hideTimeoutModal(),this.showLoginForm()),o=0):o+=1;const a=o+"%";t.css("width",a),i.text(a)},300)}registerDefaultModalEvents(e){return e.on("hidden.bs.modal",()=>{this.startTask()}).on("shown.bs.modal",()=>{this.stopTask(),this.$timeoutModal.find(".modal-footer .t3js-active").first().focus()}),e}applyOptions(e){void 0!==e.intervalTime&&this.setIntervalTime(e.intervalTime),void 0!==e.loginFramesetUrl&&this.setLoginFramesetUrl(e.loginFramesetUrl),void 0!==e.logoutUrl&&this.setLogoutUrl(e.logoutUrl)}}let loginRefreshObject;try{window.opener&&window.opener.TYPO3&&window.opener.TYPO3.LoginRefresh&&(loginRefreshObject=window.opener.TYPO3.LoginRefresh),parent&&parent.window.TYPO3&&parent.window.TYPO3.LoginRefresh&&(loginRefreshObject=parent.window.TYPO3.LoginRefresh),top&&top.TYPO3&&top.TYPO3.LoginRefresh&&(loginRefreshObject=top.TYPO3.LoginRefresh)}catch{}loginRefreshObject||(loginRefreshObject=new LoginRefresh,"undefined"!=typeof TYPO3&&(TYPO3.LoginRefresh=loginRefreshObject));export default loginRefreshObject;
\ No newline at end of file
......@@ -10,4 +10,4 @@
*
* The TYPO3 project - inspiring people to share!
*/
import"bootstrap";import $ from"jquery";import{html,render}from"lit";import{SeverityEnum}from"@typo3/backend/enum/severity.js";import AjaxRequest from"@typo3/core/ajax/ajax-request.js";import SecurityUtility from"@typo3/core/security-utility.js";import Icons from"@typo3/backend/icons.js";import Severity from"@typo3/backend/severity.js";var Identifiers,Sizes,Styles,Types;!function(t){t.modal=".t3js-modal",t.content=".t3js-modal-content",t.title=".t3js-modal-title",t.close=".t3js-modal-close",t.body=".t3js-modal-body",t.footer=".t3js-modal-footer",t.iframe=".t3js-modal-iframe",t.iconPlaceholder=".t3js-modal-icon-placeholder"}(Identifiers||(Identifiers={})),function(t){t.small="small",t.default="default",t.medium="medium",t.large="large",t.full="full"}(Sizes||(Sizes={})),function(t){t.default="default",t.light="light",t.dark="dark"}(Styles||(Styles={})),function(t){t.default="default",t.ajax="ajax",t.iframe="iframe"}(Types||(Types={}));class Modal{constructor(t){this.sizes=Sizes,this.styles=Styles,this.types=Types,this.currentModal=null,this.instances=[],this.$template=$('\n <div class="t3js-modal modal fade">\n <div class="modal-dialog">\n <div class="t3js-modal-content modal-content">\n <div class="modal-header">\n <h4 class="t3js-modal-title modal-title"></h4>\n <button class="t3js-modal-close close">\n <span aria-hidden="true">\n <span class="t3js-modal-icon-placeholder" data-icon="actions-close"></span>\n </span>\n <span class="sr-only"></span>\n </button>\n </div>\n <div class="t3js-modal-body modal-body"></div>\n <div class="t3js-modal-footer modal-footer"></div>\n </div>\n </div>\n </div>'),this.defaultConfiguration={type:Types.default,title:"Information",content:"No content provided, please check your <code>Modal</code> configuration.",severity:SeverityEnum.notice,buttons:[],style:Styles.default,size:Sizes.default,additionalCssClasses:[],callback:$.noop(),ajaxCallback:$.noop(),ajaxTarget:null},this.securityUtility=t,$(document).on("modal-dismiss",this.dismiss),this.initializeMarkupTrigger(document)}static resolveEventNameTargetElement(t){const e=t.target,a=t.currentTarget;return e.dataset&&e.dataset.eventName?e:a.dataset&&a.dataset.eventName?a:null}static createModalResponseEventFromElement(t,e){return t&&t.dataset.eventName?new CustomEvent(t.dataset.eventName,{bubbles:!0,detail:{result:e,payload:t.dataset.eventPayload||null}}):null}dismiss(){this.currentModal&&this.currentModal.modal("hide")}confirm(t,e,a=SeverityEnum.warning,n=[],s){return 0===n.length&&n.push({text:$(this).data("button-close-text")||TYPO3.lang["button.cancel"]||"Cancel",active:!0,btnClass:"btn-default",name:"cancel"},{text:$(this).data("button-ok-text")||TYPO3.lang["button.ok"]||"OK",btnClass:"btn-"+Severity.getCssClass(a),name:"ok"}),this.advanced({title:t,content:e,severity:a,buttons:n,additionalCssClasses:s,callback:t=>{t.on("button.clicked",t=>{"cancel"===t.target.getAttribute("name")?$(t.currentTarget).trigger("confirm.button.cancel"):"ok"===t.target.getAttribute("name")&&$(t.currentTarget).trigger("confirm.button.ok")})}})}loadUrl(t,e=SeverityEnum.info,a,n,s,i){return this.advanced({type:Types.ajax,title:t,severity:e,buttons:a,ajaxCallback:s,ajaxTarget:i,content:n})}show(t,e,a=SeverityEnum.info,n,s){return this.advanced({type:Types.default,title:t,content:e,severity:a,buttons:n,additionalCssClasses:s})}advanced(t){return t.type="string"==typeof t.type&&t.type in Types?t.type:this.defaultConfiguration.type,t.title="string"==typeof t.title?t.title:this.defaultConfiguration.title,t.content="string"==typeof t.content||"object"==typeof t.content?t.content:this.defaultConfiguration.content,t.severity=void 0!==t.severity?t.severity:this.defaultConfiguration.severity,t.buttons=t.buttons||this.defaultConfiguration.buttons,t.size="string"==typeof t.size&&t.size in Sizes?t.size:this.defaultConfiguration.size,t.style="string"==typeof t.style&&t.style in Styles?t.style:this.defaultConfiguration.style,t.additionalCssClasses=t.additionalCssClasses||this.defaultConfiguration.additionalCssClasses,t.callback="function"==typeof t.callback?t.callback:this.defaultConfiguration.callback,t.ajaxCallback="function"==typeof t.ajaxCallback?t.ajaxCallback:this.defaultConfiguration.ajaxCallback,t.ajaxTarget="string"==typeof t.ajaxTarget?t.ajaxTarget:this.defaultConfiguration.ajaxTarget,this.generate(t)}setButtons(t){const e=this.currentModal.find(Identifiers.footer);if(t.length>0){e.empty();for(let a=0;a<t.length;a++){const n=t[a],s=$("<button />",{class:"btn"});s.html("<span>"+this.securityUtility.encodeHtml(n.text,!1)+"</span>"),n.active&&s.addClass("t3js-active"),""!==n.btnClass&&s.addClass(n.btnClass),""!==n.name&&s.attr("name",n.name),n.action?s.on("click",()=>{e.find("button").not(s).addClass("disabled"),n.action.execute(s.get(0)).then(()=>{this.currentModal.modal("hide")})}):n.trigger&&s.on("click",n.trigger),n.dataAttributes&&Object.keys(n.dataAttributes).length>0&&Object.keys(n.dataAttributes).map(t=>{s.attr("data-"+t,n.dataAttributes[t])}),n.icon&&s.prepend('<span class="t3js-modal-icon-placeholder" data-icon="'+n.icon+'"></span>'),e.append(s)}e.show(),e.find("button").on("click",t=>{$(t.currentTarget).trigger("button.clicked")})}else e.hide();return this.currentModal}initializeMarkupTrigger(t){$(t).on("click",".t3js-modal-trigger",t=>{t.preventDefault();const e=$(t.currentTarget),a=e.data("bs-content")||"Are you sure?",n=void 0!==SeverityEnum[e.data("severity")]?SeverityEnum[e.data("severity")]:SeverityEnum.info;let s=e.data("url")||null;if(null!==s){const t=s.includes("?")?"&":"?";s=s+t+$.param({data:e.data()})}this.advanced({type:null!==s?Types.ajax:Types.default,title:e.data("title")||"Alert",content:null!==s?s:a,severity:n,buttons:[{text:e.data("button-close-text")||TYPO3.lang["button.close"]||"Close",active:!0,btnClass:"btn-default",trigger:()=>{this.currentModal.trigger("modal-dismiss");const e=Modal.resolveEventNameTargetElement(t),a=Modal.createModalResponseEventFromElement(e,!1);null!==a&&e.dispatchEvent(a)}},{text:e.data("button-ok-text")||TYPO3.lang["button.ok"]||"OK",btnClass:"btn-"+Severity.getCssClass(n),trigger:()=>{this.currentModal.trigger("modal-dismiss");const a=Modal.resolveEventNameTargetElement(t),n=Modal.createModalResponseEventFromElement(a,!0);null!==n&&a.dispatchEvent(n);let s=e.attr("data-uri")||e.data("href")||e.attr("href");s&&"#"!==s&&(t.target.ownerDocument.location.href=s),"submit"===t.currentTarget.getAttribute("type")&&(t.currentTarget.closest("form")?.submit(),"BUTTON"===t.currentTarget.tagName&&t.currentTarget.hasAttribute("form")&&t.target.ownerDocument.querySelector("form#"+t.currentTarget.getAttribute("form"))?.submit()),t.currentTarget.hasAttribute("data-target-form")&&t.target.ownerDocument.querySelector("form#"+t.currentTarget.getAttribute("data-target-form"))?.submit()}}]})})}generate(t){const e=this.$template.clone();if(t.additionalCssClasses.length>0)for(let a of t.additionalCssClasses)e.addClass(a);if(e.addClass("modal-type-"+t.type),e.addClass("modal-severity-"+Severity.getCssClass(t.severity)),e.addClass("modal-style-"+t.style),e.addClass("modal-size-"+t.size),e.attr("tabindex","-1"),e.find(Identifiers.title).text(t.title),e.find(Identifiers.close).on("click",()=>{e.modal("hide")}),"ajax"===t.type){const a=t.ajaxTarget?t.ajaxTarget:Identifiers.body,n=e.find(a);Icons.getIcon("spinner-circle",Icons.sizes.default,null,null,Icons.markupIdentifiers.inline).then(e=>{n.html('<div class="modal-loading">'+e+"</div>"),new AjaxRequest(t.content).get().finally(async()=>{this.currentModal.parent().length||this.currentModal.appendTo("body")}).then(async e=>{const n=await e.raw().text();this.currentModal.find(a).empty().append(n),t.ajaxCallback&&t.ajaxCallback(),this.currentModal.trigger("modal-loaded")}).catch(async e=>{const n=await e.raw().text(),s=this.currentModal.find(a).empty();n?s.append(n):render(html`<p><strong>Oops, received a ${e.response.status} response from </strong> <span class="text-break">${t.content}</span>.</p>`,s[0])})})}else"iframe"===t.type?(e.find(Identifiers.body).append($("<iframe />",{src:t.content,name:"modal_frame",class:"modal-iframe t3js-modal-iframe"})),e.find(Identifiers.iframe).on("load",()=>{e.find(Identifiers.title).text(e.find(Identifiers.iframe).get(0).contentDocument.title)})):("string"==typeof t.content&&(t.content=$("<p />").html(this.securityUtility.encodeHtml(t.content))),e.find(Identifiers.body).append(t.content));return e.on("shown.bs.modal",t=>{const e=$(t.currentTarget),a=e.prev(".modal-backdrop"),n=1e3+10*this.instances.length,s=n-10;e.css("z-index",n),a.css("z-index",s),e.find(Identifiers.footer).find(".t3js-active").first().focus(),e.find(Identifiers.iconPlaceholder).each((t,e)=>{Icons.getIcon($(e).data("icon"),Icons.sizes.small,null,null,Icons.markupIdentifiers.inline).then(t=>{this.currentModal.find(Identifiers.iconPlaceholder+"[data-icon="+$(t).data("identifier")+"]").replaceWith(t)})})}),e.on("hide.bs.modal",()=>{if(this.instances.length>0){const t=this.instances.length-1;this.instances.splice(t,1),this.currentModal=this.instances[t-1]}}),e.on("hidden.bs.modal",t=>{e.trigger("modal-destroyed"),$(t.currentTarget).remove(),this.instances.length>0&&$("body").addClass("modal-open")}),e.on("show.bs.modal",e=>{this.currentModal=$(e.currentTarget),this.setButtons(t.buttons),this.instances.push(this.currentModal)}),e.on("modal-dismiss",t=>{$(t.currentTarget).modal("hide")}),t.callback&&t.callback(e),e.modal("show"),e}}let modalObject=null;try{parent&&parent.window.TYPO3&&parent.window.TYPO3.Modal?(parent.window.TYPO3.Modal.initializeMarkupTrigger(document),modalObject=parent.window.TYPO3.Modal):top&&top.TYPO3.Modal&&(top.TYPO3.Modal.initializeMarkupTrigger(document),modalObject=top.TYPO3.Modal)}catch{}modalObject||(modalObject=new Modal(new SecurityUtility),TYPO3.Modal=modalObject);export default modalObject;
\ No newline at end of file
import"bootstrap";import $ from"jquery";import{html,render}from"lit";import{SeverityEnum}from"@typo3/backend/enum/severity.js";import AjaxRequest from"@typo3/core/ajax/ajax-request.js";import SecurityUtility from"@typo3/core/security-utility.js";import Icons from"@typo3/backend/icons.js";import Severity from"@typo3/backend/severity.js";var Identifiers,Sizes,Styles,Types;!function(t){t.modal=".t3js-modal",t.content=".t3js-modal-content",t.title=".t3js-modal-title",t.close=".t3js-modal-close",t.body=".t3js-modal-body",t.footer=".t3js-modal-footer",t.iframe=".t3js-modal-iframe",t.iconPlaceholder=".t3js-modal-icon-placeholder"}(Identifiers||(Identifiers={})),function(t){t.small="small",t.default="default",t.medium="medium",t.large="large",t.full="full"}(Sizes||(Sizes={})),function(t){t.default="default",t.light="light",t.dark="dark"}(Styles||(Styles={})),function(t){t.default="default",t.ajax="ajax",t.iframe="iframe"}(Types||(Types={}));class Modal{constructor(t){this.sizes=Sizes,this.styles=Styles,this.types=Types,this.currentModal=null,this.instances=[],this.$template=$('\n <div class="t3js-modal modal fade">\n <div class="modal-dialog">\n <div class="t3js-modal-content modal-content">\n <div class="modal-header">\n <h4 class="t3js-modal-title modal-title"></h4>\n <button class="t3js-modal-close close">\n <span aria-hidden="true">\n <span class="t3js-modal-icon-placeholder" data-icon="actions-close"></span>\n </span>\n <span class="visually-hidden"></span>\n </button>\n </div>\n <div class="t3js-modal-body modal-body"></div>\n <div class="t3js-modal-footer modal-footer"></div>\n </div>\n </div>\n </div>'),this.defaultConfiguration={type:Types.default,title:"Information",content:"No content provided, please check your <code>Modal</code> configuration.",severity:SeverityEnum.notice,buttons:[],style:Styles.default,size:Sizes.default,additionalCssClasses:[],callback:$.noop(),ajaxCallback:$.noop(),ajaxTarget:null},this.securityUtility=t,$(document).on("modal-dismiss",this.dismiss),this.initializeMarkupTrigger(document)}static resolveEventNameTargetElement(t){const e=t.target,a=t.currentTarget;return e.dataset&&e.dataset.eventName?e:a.dataset&&a.dataset.eventName?a:null}static createModalResponseEventFromElement(t,e){return t&&t.dataset.eventName?new CustomEvent(t.dataset.eventName,{bubbles:!0,detail:{result:e,payload:t.dataset.eventPayload||null}}):null}dismiss(){this.currentModal&&this.currentModal.modal("hide")}confirm(t,e,a=SeverityEnum.warning,n=[],s){return 0===n.length&&n.push({text:$(this).data("button-close-text")||TYPO3.lang["button.cancel"]||"Cancel",active:!0,btnClass:"btn-default",name:"cancel"},{text:$(this).data("button-ok-text")||TYPO3.lang["button.ok"]||"OK",btnClass:"btn-"+Severity.getCssClass(a),name:"ok"}),this.advanced({title:t,content:e,severity:a,buttons:n,additionalCssClasses:s,callback:t=>{t.on("button.clicked",t=>{"cancel"===t.target.getAttribute("name")?$(t.currentTarget).trigger("confirm.button.cancel"):"ok"===t.target.getAttribute("name")&&$(t.currentTarget).trigger("confirm.button.ok")})}})}loadUrl(t,e=SeverityEnum.info,a,n,s,i){return this.advanced({type:Types.ajax,title:t,severity:e,buttons:a,ajaxCallback:s,ajaxTarget:i,content:n})}show(t,e,a=SeverityEnum.info,n,s){return this.advanced({type:Types.default,title:t,content:e,severity:a,buttons:n,additionalCssClasses:s})}advanced(t){return t.type="string"==typeof t.type&&t.type in Types?t.type:this.defaultConfiguration.type,t.title="string"==typeof t.title?t.title:this.defaultConfiguration.title,t.content="string"==typeof t.content||"object"==typeof t.content?t.content:this.defaultConfiguration.content,t.severity=void 0!==t.severity?t.severity:this.defaultConfiguration.severity,t.buttons=t.buttons||this.defaultConfiguration.buttons,t.size="string"==typeof t.size&&t.size in Sizes?t.size:this.defaultConfiguration.size,t.style="string"==typeof t.style&&t.style in Styles?t.style:this.defaultConfiguration.style,t.additionalCssClasses=t.additionalCssClasses||this.defaultConfiguration.additionalCssClasses,t.callback="function"==typeof t.callback?t.callback:this.defaultConfiguration.callback,t.ajaxCallback="function"==typeof t.ajaxCallback?t.ajaxCallback:this.defaultConfiguration.ajaxCallback,t.ajaxTarget="string"==typeof t.ajaxTarget?t.ajaxTarget:this.defaultConfiguration.ajaxTarget,this.generate(t)}setButtons(t){const e=this.currentModal.find(Identifiers.footer);if(t.length>0){e.empty();for(let a=0;a<t.length;a++){const n=t[a],s=$("<button />",{class:"btn"});s.html("<span>"+this.securityUtility.encodeHtml(n.text,!1)+"</span>"),n.active&&s.addClass("t3js-active"),""!==n.btnClass&&s.addClass(n.btnClass),""!==n.name&&s.attr("name",n.name),n.action?s.on("click",()=>{e.find("button").not(s).addClass("disabled"),n.action.execute(s.get(0)).then(()=>{this.currentModal.modal("hide")})}):n.trigger&&s.on("click",n.trigger),n.dataAttributes&&Object.keys(n.dataAttributes).length>0&&Object.keys(n.dataAttributes).map(t=>{s.attr("data-"+t,n.dataAttributes[t])}),n.icon&&s.prepend('<span class="t3js-modal-icon-placeholder" data-icon="'+n.icon+'"></span>'),e.append(s)}e.show(),e.find("button").on("click",t=>{$(t.currentTarget).trigger("button.clicked")})}else e.hide();return this.currentModal}initializeMarkupTrigger(t){$(t).on("click",".t3js-modal-trigger",t=>{t.preventDefault();const e=$(t.currentTarget),a=e.data("bs-content")||"Are you sure?",n=void 0!==SeverityEnum[e.data("severity")]?SeverityEnum[e.data("severity")]:SeverityEnum.info;let s=e.data("url")||null;if(null!==s){const t=s.includes("?")?"&":"?";s=s+t+$.param({data:e.data()})}this.advanced({type:null!==s?Types.ajax:Types.default,title:e.data("title")||"Alert",content:null!==s?s:a,severity:n,buttons:[{text:e.data("button-close-text")||TYPO3.lang["button.close"]||"Close",active:!0,btnClass:"btn-default",trigger:()=>{this.currentModal.trigger("modal-dismiss");const e=Modal.resolveEventNameTargetElement(t),a=Modal.createModalResponseEventFromElement(e,!1);null!==a&&e.dispatchEvent(a)}},{text:e.data("button-ok-text")||TYPO3.lang["button.ok"]||"OK",btnClass:"btn-"+Severity.getCssClass(n),trigger:()=>{this.currentModal.trigger("modal-dismiss");const a=Modal.resolveEventNameTargetElement(t),n=Modal.createModalResponseEventFromElement(a,!0);null!==n&&a.dispatchEvent(n);let s=e.attr("data-uri")||e.data("href")||e.attr("href");s&&"#"!==s&&(t.target.ownerDocument.location.href=s),"submit"===t.currentTarget.getAttribute("type")&&(t.currentTarget.closest("form")?.submit(),"BUTTON"===t.currentTarget.tagName&&t.currentTarget.hasAttribute("form")&&t.target.ownerDocument.querySelector("form#"+t.currentTarget.getAttribute("form"))?.submit()),t.currentTarget.hasAttribute("data-target-form")&&t.target.ownerDocument.querySelector("form#"+t.currentTarget.getAttribute("data-target-form"))?.submit()}}]})})}generate(t){const e=this.$template.clone();if(t.additionalCssClasses.length>0)for(let a of t.additionalCssClasses)e.addClass(a);if(e.addClass("modal-type-"+t.type),e.addClass("modal-severity-"+Severity.getCssClass(t.severity)),e.addClass("modal-style-"+t.style),e.addClass("modal-size-"+t.size),e.attr("tabindex","-1"),e.find(Identifiers.title).text(t.title),e.find(Identifiers.close).on("click",()=>{e.modal("hide")}),"ajax"===t.type){const a=t.ajaxTarget?t.ajaxTarget:Identifiers.body,n=e.find(a);Icons.getIcon("spinner-circle",Icons.sizes.default,null,null,Icons.markupIdentifiers.inline).then(e=>{n.html('<div class="modal-loading">'+e+"</div>"),new AjaxRequest(t.content).get().finally(async()=>{this.currentModal.parent().length||this.currentModal.appendTo("body")}).then(async e=>{const n=await e.raw().text();this.currentModal.find(a).empty().append(n),t.ajaxCallback&&t.ajaxCallback(),this.currentModal.trigger("modal-loaded")}).catch(async e=>{const n=await e.raw().text(),s=this.currentModal.find(a).empty();n?s.append(n):render(html`<p><strong>Oops, received a ${e.response.status} response from </strong> <span class="text-break">${t.content}</span>.</p>`,s[0])})})}else"iframe"===t.type?(e.find(Identifiers.body).append($("<iframe />",{src:t.content,name:"modal_frame",class:"modal-iframe t3js-modal-iframe"})),e.find(Identifiers.iframe).on("load",()=>{e.find(Identifiers.title).text(e.find(Identifiers.iframe).get(0).contentDocument.title)})):("string"==typeof t.content&&(t.content=$("<p />").html(this.securityUtility.encodeHtml(t.content))),e.find(Identifiers.body).append(t.content));return e.on("shown.bs.modal",t=>{const e=$(t.currentTarget),a=e.prev(".modal-backdrop"),n=1e3+10*this.instances.length,s=n-10;e.css("z-index",n),a.css("z-index",s),e.find(Identifiers.footer).find(".t3js-active").first().focus(),e.find(Identifiers.iconPlaceholder).each((t,e)=>{Icons.getIcon($(e).data("icon"),Icons.sizes.small,null,null,Icons.markupIdentifiers.inline).then(t=>{this.currentModal.find(Identifiers.iconPlaceholder+"[data-icon="+$(t).data("identifier")+"]").replaceWith(t)})})}),e.on("hide.bs.modal",()=>{if(this.instances.length>0){const t=this.instances.length-1;this.instances.splice(t,1),this.currentModal=this.instances[t-1]}}),e.on("hidden.bs.modal",t=>{e.trigger("modal-destroyed"),$(t.currentTarget).remove(),this.instances.length>0&&$("body").addClass("modal-open")}),e.on("show.bs.modal",e=>{this.currentModal=$(e.currentTarget),this.setButtons(t.buttons),this.instances.push(this.currentModal)}),e.on("modal-dismiss",t=>{$(t.currentTarget).modal("hide")}),t.callback&&t.callback(e),e.modal("show"),e}}let modalObject=null;try{parent&&parent.window.TYPO3&&parent.window.TYPO3.Modal?(parent.window.TYPO3.Modal.initializeMarkupTrigger(document),modalObject=parent.window.TYPO3.Modal):top&&top.TYPO3.Modal&&(top.TYPO3.Modal.initializeMarkupTrigger(document),modalObject=top.TYPO3.Modal)}catch{}modalObject||(modalObject=new Modal(new SecurityUtility),TYPO3.Modal=modalObject);export default modalObject;
\ No newline at end of file
......@@ -10,4 +10,4 @@
*
* The TYPO3 project - inspiring people to share!
*/
import{SeverityEnum}from"@typo3/backend/enum/severity.js";import $ from"jquery";import Modal from"@typo3/backend/modal.js";import Severity from"@typo3/backend/severity.js";import Icons from"@typo3/backend/icons.js";class MultiStepWizard{constructor(){this.setup={slides:[],settings:{},forceSelection:!0,$carousel:null},this.originalSetup=$.extend(!0,{},this.setup)}set(e,t){return this.setup.settings[e]=t,this}addSlide(e,t,s="",i=SeverityEnum.info,r,a){const l={identifier:e,title:t,content:s,severity:i,progressBarTitle:r,callback:a};return this.setup.slides.push(l),this}addFinalProcessingSlide(e){return e||(e=()=>{this.dismiss()}),Icons.getIcon("spinner-circle",Icons.sizes.default,null,null).then(t=>{let s=$("<div />",{class:"text-center"}).append(t);this.addSlide("final-processing-slide",top.TYPO3.lang["wizard.processing.title"],s[0].outerHTML,Severity.info,null,e)})}show(){let e=this.generateSlides(),t=this.setup.slides[0];Modal.confirm(t.title,e,t.severity,[{text:top.TYPO3.lang["wizard.button.cancel"],active:!0,btnClass:"btn-default pull-left",name:"cancel",trigger:()=>{this.getComponent().trigger("wizard-dismiss")}},{text:top.TYPO3.lang["wizard.button.prev"],btnClass:"btn-"+Severity.getCssClass(t.severity),name:"prev"},{text:top.TYPO3.lang["wizard.button.next"],btnClass:"btn-"+Severity.getCssClass(t.severity),name:"next"}],["modal-multi-step-wizard"]),this.addButtonContainer(),this.addProgressBar(),this.initializeEvents(),this.getComponent().on("wizard-visible",()=>{this.runSlideCallback(t,this.setup.$carousel.find(".carousel-item").first())}).on("wizard-dismissed",()=>{this.setup=$.extend(!0,{},this.originalSetup)})}getComponent(){return null===this.setup.$carousel&&this.generateSlides(),this.setup.$carousel}dismiss(){Modal.dismiss()}lockNextStep(){let e=this.setup.$carousel.closest(".modal").find('button[name="next"]');return e.prop("disabled",!0),e}unlockNextStep(){let e=this.setup.$carousel.closest(".modal").find('button[name="next"]');return e.prop("disabled",!1),e}lockPrevStep(){let e=this.setup.$carousel.closest(".modal").find('button[name="prev"]');return e.prop("disabled",!0),e}unlockPrevStep(){let e=this.setup.$carousel.closest(".modal").find('button[name="prev"]');return e.prop("disabled",!1),e}triggerStepButton(e){let t=this.setup.$carousel.closest(".modal").find('button[name="'+e+'"]');return t.length>0&&!0!==t.prop("disabled")&&t.trigger("click"),t}blurCancelStep(){let e=this.setup.$carousel.closest(".modal").find('button[name="cancel"]');return e.trigger("blur"),e}initializeEvents(){let e=this.setup.$carousel.closest(".modal");this.initializeSlideNextEvent(e),this.initializeSlidePrevEvent(e),this.setup.$carousel.on("slide.bs.carousel",t=>{"left"===t.direction?this.nextSlideChanges(e):this.prevSlideChanges(e)}).on("slid.bs.carousel",e=>{let t=this.setup.$carousel.data("currentIndex"),s=this.setup.slides[t];this.runSlideCallback(s,$(e.relatedTarget)),this.setup.forceSelection&&this.lockNextStep()});let t=this.getComponent();t.on("wizard-dismiss",this.dismiss),Modal.currentModal.on("hidden.bs.modal",()=>{t.trigger("wizard-dismissed")}).on("shown.bs.modal",()=>{t.trigger("wizard-visible")})}initializeSlideNextEvent(e){e.find(".modal-footer").find('button[name="next"]').off().on("click",()=>{this.setup.$carousel.carousel("next")})}initializeSlidePrevEvent(e){e.find(".modal-footer").find('button[name="prev"]').off().on("click",()=>{this.setup.$carousel.carousel("prev")})}nextSlideChanges(e){this.initializeSlideNextEvent(e);const t=e.find(".modal-title"),s=e.find(".modal-footer"),i=this.setup.$carousel.data("currentSlide")+1,r=this.setup.$carousel.data("currentIndex"),a=r+1;t.text(this.setup.slides[a].title),this.setup.$carousel.data("currentSlide",i),this.setup.$carousel.data("currentIndex",a);const l=s.find(".progress-bar");l.eq(r).width("0%"),l.eq(a).width(this.setup.$carousel.data("initialStep")*i+"%").removeClass("inactive"),this.updateCurrentSeverity(e,r,a)}prevSlideChanges(e){this.initializeSlidePrevEvent(e);const t=e.find(".modal-title"),s=e.find(".modal-footer"),i=s.find('button[name="next"]'),r=this.setup.$carousel.data("currentSlide")-1,a=this.setup.$carousel.data("currentIndex"),l=a-1;this.setup.$carousel.data("currentSlide",r),this.setup.$carousel.data("currentIndex",l),t.text(this.setup.slides[l].title),s.find(".progress-bar.last-step").width(this.setup.$carousel.data("initialStep")+"%").text(this.getProgressBarTitle(this.setup.$carousel.data("slideCount")-1)),i.text(top.TYPO3.lang["wizard.button.next"]);const n=s.find(".progress-bar");n.eq(a).width(this.setup.$carousel.data("initialStep")+"%").addClass("inactive"),n.eq(l).width(this.setup.$carousel.data("initialStep")*r+"%").removeClass("inactive"),this.updateCurrentSeverity(e,a,l)}updateCurrentSeverity(e,t,s){e.find(".modal-footer").find('button[name="next"]').removeClass("btn-"+Severity.getCssClass(this.setup.slides[t].severity)).addClass("btn-"+Severity.getCssClass(this.setup.slides[s].severity)),e.removeClass("modal-severity-"+Severity.getCssClass(this.setup.slides[t].severity)).addClass("modal-severity-"+Severity.getCssClass(this.setup.slides[s].severity))}getProgressBarTitle(e){let t;return t=null===this.setup.slides[e].progressBarTitle?0===e?top.TYPO3.lang["wizard.progressStep.start"]:e>=this.setup.$carousel.data("slideCount")-1?top.TYPO3.lang["wizard.progressStep.finish"]:top.TYPO3.lang["wizard.progressStep"]+String(e+1):this.setup.slides[e].progressBarTitle,t}runSlideCallback(e,t){"function"==typeof e.callback&&e.callback(t,this.setup.settings,e.identifier)}addProgressBar(){let e,t=this.setup.$carousel.find(".carousel-item").length,s=Math.max(1,t),i=this.setup.$carousel.closest(".modal").find(".modal-footer");if(e=Math.round(100/s),this.setup.$carousel.data("initialStep",e).data("slideCount",s).data("realSlideCount",t).data("currentIndex",0).data("currentSlide",1),s>1){i.prepend($("<div />",{class:"progress"}));for(let t=0;t<this.setup.slides.length;++t){let s;s=0===t?"progress-bar first-step":t===this.setup.$carousel.data("slideCount")-1?"progress-bar last-step inactive":"progress-bar step inactive",i.find(".progress").append($("<div />",{role:"progressbar",class:s,"aria-valuemin":0,"aria-valuenow":e,"aria-valuemax":100}).width(e+"%").text(this.getProgressBarTitle(t)))}}}addButtonContainer(){this.setup.$carousel.closest(".modal").find(".modal-footer .btn").wrapAll('<div class="modal-btn-group" />')}generateSlides(){if(null!==this.setup.$carousel)return this.setup.$carousel;let e='<div class="carousel slide" data-bs-ride="false"><div class="carousel-inner" role="listbox">';for(let t=0;t<this.setup.slides.length;++t){let s=this.setup.slides[t],i=s.content;"object"==typeof i&&(i=i.html()),e+='<div class="carousel-item" data-bs-slide="'+s.identifier+'" data-step="'+t+'">'+i+"</div>"}return e+="</div></div>",this.setup.$carousel=$(e),this.setup.$carousel.find(".carousel-item").first().addClass("active"),this.setup.$carousel}}let multistepWizardObject;try{window.opener&&window.opener.TYPO3&&window.opener.TYPO3.MultiStepWizard&&(multistepWizardObject=window.opener.TYPO3.MultiStepWizard),parent&&parent.window.TYPO3&&parent.window.TYPO3.MultiStepWizard&&(multistepWizardObject=parent.window.TYPO3.MultiStepWizard),top&&top.TYPO3&&top.TYPO3.MultiStepWizard&&(multistepWizardObject=top.TYPO3.MultiStepWizard)}catch(e){}multistepWizardObject||(multistepWizardObject=new MultiStepWizard,"undefined"!=typeof TYPO3&&(TYPO3.MultiStepWizard=multistepWizardObject));export default multistepWizardObject;
\ No newline at end of file
import{SeverityEnum}from"@typo3/backend/enum/severity.js";import $ from"jquery";import Modal from"@typo3/backend/modal.js";import Severity from"@typo3/backend/severity.js";import Icons from"@typo3/backend/icons.js";class MultiStepWizard{constructor(){this.setup={slides:[],settings:{},forceSelection:!0,$carousel:null},this.originalSetup=$.extend(!0,{},this.setup)}set(e,t){return this.setup.settings[e]=t,this}addSlide(e,t,s="",i=SeverityEnum.info,r,a){const l={identifier:e,title:t,content:s,severity:i,progressBarTitle:r,callback:a};return this.setup.slides.push(l),this}addFinalProcessingSlide(e){return e||(e=()=>{this.dismiss()}),Icons.getIcon("spinner-circle",Icons.sizes.default,null,null).then(t=>{let s=$("<div />",{class:"text-center"}).append(t);this.addSlide("final-processing-slide",top.TYPO3.lang["wizard.processing.title"],s[0].outerHTML,Severity.info,null,e)})}show(){let e=this.generateSlides(),t=this.setup.slides[0];Modal.confirm(t.title,e,t.severity,[{text:top.TYPO3.lang["wizard.button.cancel"],active:!0,btnClass:"btn-default float-start",name:"cancel",trigger:()=>{this.getComponent().trigger("wizard-dismiss")}},{text:top.TYPO3.lang["wizard.button.prev"],btnClass:"btn-"+Severity.getCssClass(t.severity),name:"prev"},{text:top.TYPO3.lang["wizard.button.next"],btnClass:"btn-"+Severity.getCssClass(t.severity),name:"next"}],["modal-multi-step-wizard"]),this.addButtonContainer(),this.addProgressBar(),this.initializeEvents(),this.getComponent().on("wizard-visible",()=>{this.runSlideCallback(t,this.setup.$carousel.find(".carousel-item").first())}).on("wizard-dismissed",()=>{this.setup=$.extend(!0,{},this.originalSetup)})}getComponent(){return null===this.setup.$carousel&&this.generateSlides(),this.setup.$carousel}dismiss(){Modal.dismiss()}lockNextStep(){let e=this.setup.$carousel.closest(".modal").find('button[name="next"]');return e.prop("disabled",!0),e}unlockNextStep(){let e=this.setup.$carousel.closest(".modal").find('button[name="next"]');return e.prop("disabled",!1),e}lockPrevStep(){let e=this.setup.$carousel.closest(".modal").find('button[name="prev"]');return e.prop("disabled",!0),e}unlockPrevStep(){let e=this.setup.$carousel.closest(".modal").find('button[name="prev"]');return e.prop("disabled",!1),e}triggerStepButton(e){let t=this.setup.$carousel.closest(".modal").find('button[name="'+e+'"]');return t.length>0&&!0!==t.prop("disabled")&&t.trigger("click"),t}blurCancelStep(){let e=this.setup.$carousel.closest(".modal").find('button[name="cancel"]');return e.trigger("blur"),e}initializeEvents(){let e=this.setup.$carousel.closest(".modal");this.initializeSlideNextEvent(e),this.initializeSlidePrevEvent(e),this.setup.$carousel.on("slide.bs.carousel",t=>{"left"===t.direction?this.nextSlideChanges(e):this.prevSlideChanges(e)}).on("slid.bs.carousel",e=>{let t=this.setup.$carousel.data("currentIndex"),s=this.setup.slides[t];this.runSlideCallback(s,$(e.relatedTarget)),this.setup.forceSelection&&this.lockNextStep()});let t=this.getComponent();t.on("wizard-dismiss",this.dismiss),Modal.currentModal.on("hidden.bs.modal",()=>{t.trigger("wizard-dismissed")}).on("shown.bs.modal",()=>{t.trigger("wizard-visible")})}initializeSlideNextEvent(e){e.find(".modal-footer").find('button[name="next"]').off().on("click",()=>{this.setup.$carousel.carousel("next")})}initializeSlidePrevEvent(e){e.find(".modal-footer").find('button[name="prev"]').off().on("click",()=>{this.setup.$carousel.carousel("prev")})}nextSlideChanges(e){this.initializeSlideNextEvent(e);const t=e.find(".modal-title"),s=e.find(".modal-footer"),i=this.setup.$carousel.data("currentSlide")+1,r=this.setup.$carousel.data("currentIndex"),a=r+1;t.text(this.setup.slides[a].title),this.setup.$carousel.data("currentSlide",i),this.setup.$carousel.data("currentIndex",a);const l=s.find(".progress-bar");l.eq(r).width("0%"),l.eq(a).width(this.setup.$carousel.data("initialStep")*i+"%").removeClass("inactive"),this.updateCurrentSeverity(e,r,a)}prevSlideChanges(e){this.initializeSlidePrevEvent(e);const t=e.find(".modal-title"),s=e.find(".modal-footer"),i=s.find('button[name="next"]'),r=this.setup.$carousel.data("currentSlide")-1,a=this.setup.$carousel.data("currentIndex"),l=a-1;this.setup.$carousel.data("currentSlide",r),this.setup.$carousel.data("currentIndex",l),t.text(this.setup.slides[l].title),s.find(".progress-bar.last-step").width(this.setup.$carousel.data("initialStep")+"%").text(this.getProgressBarTitle(this.setup.$carousel.data("slideCount")-1)),i.text(top.TYPO3.lang["wizard.button.next"]);const n=s.find(".progress-bar");n.eq(a).width(this.setup.$carousel.data("initialStep")+"%").addClass("inactive"),n.eq(l).width(this.setup.$carousel.data("initialStep")*r+"%").removeClass("inactive"),this.updateCurrentSeverity(e,a,l)}updateCurrentSeverity(e,t,s){e.find(".modal-footer").find('button[name="next"]').removeClass("btn-"+Severity.getCssClass(this.setup.slides[t].severity)).addClass("btn-"+Severity.getCssClass(this.setup.slides[s].severity)),e.removeClass("modal-severity-"+Severity.getCssClass(this.setup.slides[t].severity)).addClass("modal-severity-"+Severity.getCssClass(this.setup.slides[s].severity))}getProgressBarTitle(e){let t;return t=null===this.setup.slides[e].progressBarTitle?0===e?top.TYPO3.lang["wizard.progressStep.start"]:e>=this.setup.$carousel.data("slideCount")-1?top.TYPO3.lang["wizard.progressStep.finish"]:top.TYPO3.lang["wizard.progressStep"]+String(e+1):this.setup.slides[e].progressBarTitle,t}runSlideCallback(e,t){"function"==typeof e.callback&&e.callback(t,this.setup.settings,e.identifier)}addProgressBar(){let e,t=this.setup.$carousel.find(".carousel-item").length,s=Math.max(1,t),i=this.setup.$carousel.closest(".modal").find(".modal-footer");if(e=Math.round(100/s),this.setup.$carousel.data("initialStep",e).data("slideCount",s).data("realSlideCount",t).data("currentIndex",0).data("currentSlide",1),s>1){i.prepend($("<div />",{class:"progress"}));for(let t=0;t<this.setup.slides.length;++t){let s;s=0===t?"progress-bar first-step":t===this.setup.$carousel.data("slideCount")-1?"progress-bar last-step inactive":"progress-bar step inactive",i.find(".progress").append($("<div />",{role:"progressbar",class:s,"aria-valuemin":0,"aria-valuenow":e,"aria-valuemax":100}).width(e+"%").text(this.getProgressBarTitle(t)))}}}addButtonContainer(){this.setup.$carousel.closest(".modal").find(".modal-footer .btn").wrapAll('<div class="modal-btn-group" />')}generateSlides(){if(null!==this.setup.$carousel)return this.setup.$carousel;let e='<div class="carousel slide" data-bs-ride="false"><div class="carousel-inner" role="listbox">';for(let t=0;t<this.setup.slides.length;++t){let s=this.setup.slides[t],i=s.content;"object"==typeof i&&(i=i.html()),e+='<div class="carousel-item" data-bs-slide="'+s.identifier+'" data-step="'+t+'">'+i+"</div>"}return e+="</div></div>",this.setup.$carousel=$(e),this.setup.$carousel.find(".carousel-item").first().addClass("active"),this.setup.$carousel}}let multistepWizardObject;try{window.opener&&window.opener.TYPO3&&window.opener.TYPO3.MultiStepWizard&&(multistepWizardObject=window.opener.TYPO3.MultiStepWizard),parent&&parent.window.TYPO3&&parent.window.TYPO3.MultiStepWizard&&(multistepWizardObject=parent.window.TYPO3.MultiStepWizard),top&&top.TYPO3&&top.TYPO3.MultiStepWizard&&(multistepWizardObject=top.TYPO3.MultiStepWizard)}catch(e){}multistepWizardObject||(multistepWizardObject=new MultiStepWizard,"undefined"!=typeof TYPO3&&(TYPO3.MultiStepWizard=multistepWizardObject));export default multistepWizardObject;
\ No newline at end of file
......@@ -17,7 +17,7 @@ var __decorate=function(t,e,i,o){var s,a=arguments.length,n=a<3?e:null===o?o=Obj
role="alert">
<button type="button" class="close" @click="${async t=>this.close()}">
<span aria-hidden="true"><typo3-backend-icon identifier="actions-close" size="small"></typo3-backend-icon></span>
<span class="sr-only">Close</span>
<span class="visually-hidden">Close</span>
</button>
<div class="media">
<div class="media-left">
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment