[BUGFIX] Access trigger element in modal correctly

$(this) does not work in TypeScript, as this is bound to the class or the
method, but never to the element. Thus, the target element is fetched
from the event.

Resolves: #84138
Releases: master
Change-Id: I05545d19f5cb10adc3678fa81d81e3b181047bc4
Reviewed-on: https://review.typo3.org/56007


Reviewed-by: Mathias Schreiber <mathias.schreiber@typo3.com>
Tested-by: Mathias Schreiber <mathias.schreiber@typo3.com>
Tested-by: TYPO3com <no-reply@typo3.com>
Reviewed-by: Wouter Wolters <typo3@wouterwolters.nl>
Reviewed-by: Tobi Kretschmann <tobi@tobishome.de>
Reviewed-by: Christian Kuhn <lolli@schwarzbu.ch>
Tested-by: Christian Kuhn <lolli@schwarzbu.ch>

typo3/sysext/backend/Resources/Private/TypeScript/Modal.ts

@@ -430,14 +430,14 @@ class Modal {
     });
 
     // Remove modal from Modal.instances when hidden
-    currentModal.on('hidden.bs.modal', (): void => {
+    currentModal.on('hidden.bs.modal', (e: JQueryEventObject): void => {
       if (this.instances.length > 0) {
         const lastIndex = this.instances.length - 1;
         this.instances.splice(lastIndex, 1);
         this.currentModal = this.instances[lastIndex - 1];
       }
       currentModal.trigger('modal-destroyed');
-      $(this).remove();
+      $(e.currentTarget).remove();
       // Keep class modal-open on body tag as long as open modals exist
       if (this.instances.length > 0) {
         $('body').addClass('modal-open');

typo3/sysext/backend/Resources/Public/JavaScript/Modal.js

@@ -10,4 +10,4 @@
  *
  * The TYPO3 project - inspiring people to share!
  */
-var __values=this&&this.__values||function(t){var e="function"==typeof Symbol&&t[Symbol.iterator],a=0;return e?e.call(t):{next:function(){return t&&a>=t.length&&(t=void 0),{value:t&&t[a++],done:!t}}}};define(["require","exports","./Enum/Severity","jquery","./Icons","./Severity","bootstrap"],function(t,e,a,n,o,i){"use strict";var l,s,r,d,c,u,f,m;(s=l||(l={})).modal=".t3js-modal",s.content=".t3js-modal-content",s.title=".t3js-modal-title",s.close=".t3js-modal-close",s.body=".t3js-modal-body",s.footer=".t3js-modal-footer",s.iframe=".t3js-modal-iframe",s.iconPlaceholder=".t3js-modal-icon-placeholder",(d=r||(r={})).small="small",d.default="default",d.medium="medium",d.large="large",d.full="full",(u=c||(c={})).default="default",u.light="light",u.dark="dark",(m=f||(f={})).default="default",m.ajax="ajax",m.iframe="iframe";var g=function(){function t(){this.sizes=r,this.styles=c,this.types=f,this.currentModal=null,this.instances=[],this.$template=n('<div class="t3js-modal modal fade"><div class="modal-dialog"><div class="t3js-modal-content modal-content"><div class="modal-header"><button class="t3js-modal-close close"><span aria-hidden="true"><span class="t3js-modal-icon-placeholder" data-icon="actions-close"></span></span><span class="sr-only"></span></button><h4 class="t3js-modal-title modal-title"></h4></div><div class="t3js-modal-body modal-body"></div><div class="t3js-modal-footer modal-footer"></div></div></div></div>'),this.defaultConfiguration={type:f.default,title:"Information",content:"No content provided, please check your <code>Modal</code> configuration.",severity:a.SeverityEnum.notice,buttons:[],style:c.default,size:r.default,additionalCssClasses:[],callback:n.noop(),ajaxCallback:n.noop(),ajaxTarget:null},n(document).on("modal-dismiss",this.dismiss),this.initializeMarkupTrigger(document)}return t.prototype.dismiss=function(){this.currentModal&&this.currentModal.modal("hide")},t.prototype.confirm=function(t,e,o,l,s){return void 0===o&&(o=a.SeverityEnum.warning),void 0===l&&(l=[]),0===l.length&&l.push({text:n(this).data("button-close-text")||TYPO3.lang["button.cancel"]||"Cancel",active:!0,btnClass:"btn-default",name:"cancel"},{text:n(this).data("button-ok-text")||TYPO3.lang["button.ok"]||"OK",btnClass:"btn-"+i.getCssClass(o),name:"ok"}),this.advanced({title:t,content:e,severity:o,buttons:l,additionalCssClasses:s,callback:function(t){t.on("button.clicked",function(t){"cancel"===t.target.getAttribute("name")?n(t.currentTarget).trigger("confirm.button.cancel"):"ok"===t.target.getAttribute("name")&&n(t.currentTarget).trigger("confirm.button.ok")})}})},t.prototype.loadUrl=function(t,e,n,o,i,l){return void 0===e&&(e=a.SeverityEnum.info),this.advanced({type:f.ajax,title:t,severity:e,buttons:n,ajaxCallback:i,ajaxTarget:l})},t.prototype.show=function(t,e,n,o,i){return void 0===n&&(n=a.SeverityEnum.info),this.advanced({type:f.default,title:t,content:e,buttons:o,additionalCssClasses:i})},t.prototype.advanced=function(t){return t.type="string"==typeof t.type&&t.type in f?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 r?t.size:this.defaultConfiguration.size,t.style="string"==typeof t.style&&t.style in c?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)},t.prototype.initializeMarkupTrigger=function(t){var e=this;n(t).on("click",".t3js-modal-trigger",function(t){t.preventDefault();var o=n(t.currentTarget),l=o.data("content")||"Are you sure?",s=void 0!==a.SeverityEnum[o.data("severity")]?a.SeverityEnum[o.data("severity")]:a.SeverityEnum.info,r=o.data("url")||null;null!==r&&(r=r+(r.indexOf("?")>-1?"&":"?")+n.param({data:o.data()}));e.advanced({type:null!==r?f.ajax:f.default,title:o.data("title")||"Alert",content:null!==r?r:l,severity:s,buttons:[{text:o.data("button-close-text")||"Close",active:!0,btnClass:"btn-default",trigger:function(){e.currentModal.trigger("modal-dismiss")}},{text:o.data("button-ok-text")||"OK",btnClass:"btn-"+i.getCssClass(s),trigger:function(){e.currentModal.trigger("modal-dismiss"),t.target.ownerDocument.location.href=o.data("href")||o.attr("href")}}]})})},t.prototype.generate=function(t){var e,a,s=this,r=this.$template.clone();if(t.additionalCssClasses.length>0)try{for(var d=__values(t.additionalCssClasses),c=d.next();!c.done;c=d.next()){var u=c.value;r.addClass(u)}}catch(t){e={error:t}}finally{try{c&&!c.done&&(a=d.return)&&a.call(d)}finally{if(e)throw e.error}}if(r.addClass("modal-type-"+t.type),r.addClass("modal-severity-"+i.getCssClass(t.severity)),r.addClass("modal-style-"+t.style),r.addClass("modal-size-"+t.size),r.attr("tabindex","-1"),r.find(l.title).text(t.title),r.find(l.close).on("click",function(){r.modal("hide")}),"ajax"===t.type?(n.get(t.content,function(e){s.currentModal.find(t.ajaxTarget?t.ajaxTarget:l.body).empty().append(e),t.ajaxCallback&&t.ajaxCallback(),s.currentModal.trigger("modal-loaded")},"html"),o.getIcon("spinner-circle",o.sizes.default,null,null,o.markupIdentifiers.inline).done(function(t){r.find(l.body).html('<div class="modal-loading">'+t+"</div>")})):"iframe"===t.type?(r.find(l.body).append(n("<iframe />",{src:t.content,name:"modal_frame",class:"modal-iframe t3js-modal-iframe"})),r.find(l.iframe).on("load",function(){r.find(l.title).text(r.find(l.iframe).get(0).contentDocument.title)})):("string"==typeof t.content&&(/^<[a-z][\s\S]*>/i.test(t.content)||(t.content=n("<p />").html(t.content))),r.find(l.body).append(t.content)),t.buttons.length>0){for(var f=function(e){var a=t.buttons[e],o=n("<button />",{class:"btn"});o.html("<span>"+a.text+"</span>"),a.active&&o.addClass("t3js-active"),""!==a.btnClass&&o.addClass(a.btnClass),""!==a.name&&o.attr("name",a.name),a.trigger&&o.on("click",a.trigger),a.dataAttributes&&Object.keys(a.dataAttributes).length>0&&Object.keys(a.dataAttributes).map(function(t){o.attr("data-"+t,a.dataAttributes[t])}),a.icon&&o.prepend('<span class="t3js-modal-icon-placeholder" data-icon="'+a.icon+'"></span>'),r.find(l.footer).append(o)},m=0;m<t.buttons.length;m++)f(m);r.find(l.footer).find("button").on("click",function(t){n(t.currentTarget).trigger("button.clicked")})}else r.find(l.footer).remove();return r.on("shown.bs.modal",function(t){var e=n(t.currentTarget);e.find(l.footer).find(".t3js-active").first().focus(),e.find(l.iconPlaceholder).each(function(t,e){o.getIcon(n(e).data("icon"),o.sizes.small,null,null,o.markupIdentifiers.inline).done(function(t){s.currentModal.find(l.iconPlaceholder+"[data-icon="+n(t).data("identifier")+"]").replaceWith(t)})})}),r.on("hidden.bs.modal",function(){if(s.instances.length>0){var t=s.instances.length-1;s.instances.splice(t,1),s.currentModal=s.instances[t-1]}r.trigger("modal-destroyed"),n(s).remove(),s.instances.length>0&&n("body").addClass("modal-open")}),r.on("show.bs.modal",function(t){s.currentModal=n(t.currentTarget),s.instances.push(s.currentModal)}),r.on("modal-dismiss",function(t){n(t.currentTarget).modal("hide")}),t.callback&&t.callback(r),r.modal()},t}(),p=null;try{parent&&parent.window.TYPO3&&parent.window.TYPO3.Modal?(parent.window.TYPO3.Modal.initializeMarkupTrigger(document),p=parent.window.TYPO3.Modal):top&&top.TYPO3.Modal&&(top.TYPO3.Modal.initializeMarkupTrigger(document),p=top.TYPO3.Modal)}catch(t){}return p||(p=new g,TYPO3.Modal=p),p});
\ No newline at end of file
+var __values=this&&this.__values||function(t){var e="function"==typeof Symbol&&t[Symbol.iterator],a=0;return e?e.call(t):{next:function(){return t&&a>=t.length&&(t=void 0),{value:t&&t[a++],done:!t}}}};define(["require","exports","./Enum/Severity","jquery","./Icons","./Severity","bootstrap"],function(t,e,a,n,o,i){"use strict";var l,s,r,d,c,u,f,m;(s=l||(l={})).modal=".t3js-modal",s.content=".t3js-modal-content",s.title=".t3js-modal-title",s.close=".t3js-modal-close",s.body=".t3js-modal-body",s.footer=".t3js-modal-footer",s.iframe=".t3js-modal-iframe",s.iconPlaceholder=".t3js-modal-icon-placeholder",(d=r||(r={})).small="small",d.default="default",d.medium="medium",d.large="large",d.full="full",(u=c||(c={})).default="default",u.light="light",u.dark="dark",(m=f||(f={})).default="default",m.ajax="ajax",m.iframe="iframe";var g=function(){function t(){this.sizes=r,this.styles=c,this.types=f,this.currentModal=null,this.instances=[],this.$template=n('<div class="t3js-modal modal fade"><div class="modal-dialog"><div class="t3js-modal-content modal-content"><div class="modal-header"><button class="t3js-modal-close close"><span aria-hidden="true"><span class="t3js-modal-icon-placeholder" data-icon="actions-close"></span></span><span class="sr-only"></span></button><h4 class="t3js-modal-title modal-title"></h4></div><div class="t3js-modal-body modal-body"></div><div class="t3js-modal-footer modal-footer"></div></div></div></div>'),this.defaultConfiguration={type:f.default,title:"Information",content:"No content provided, please check your <code>Modal</code> configuration.",severity:a.SeverityEnum.notice,buttons:[],style:c.default,size:r.default,additionalCssClasses:[],callback:n.noop(),ajaxCallback:n.noop(),ajaxTarget:null},n(document).on("modal-dismiss",this.dismiss),this.initializeMarkupTrigger(document)}return t.prototype.dismiss=function(){this.currentModal&&this.currentModal.modal("hide")},t.prototype.confirm=function(t,e,o,l,s){return void 0===o&&(o=a.SeverityEnum.warning),void 0===l&&(l=[]),0===l.length&&l.push({text:n(this).data("button-close-text")||TYPO3.lang["button.cancel"]||"Cancel",active:!0,btnClass:"btn-default",name:"cancel"},{text:n(this).data("button-ok-text")||TYPO3.lang["button.ok"]||"OK",btnClass:"btn-"+i.getCssClass(o),name:"ok"}),this.advanced({title:t,content:e,severity:o,buttons:l,additionalCssClasses:s,callback:function(t){t.on("button.clicked",function(t){"cancel"===t.target.getAttribute("name")?n(t.currentTarget).trigger("confirm.button.cancel"):"ok"===t.target.getAttribute("name")&&n(t.currentTarget).trigger("confirm.button.ok")})}})},t.prototype.loadUrl=function(t,e,n,o,i,l){return void 0===e&&(e=a.SeverityEnum.info),this.advanced({type:f.ajax,title:t,severity:e,buttons:n,ajaxCallback:i,ajaxTarget:l})},t.prototype.show=function(t,e,n,o,i){return void 0===n&&(n=a.SeverityEnum.info),this.advanced({type:f.default,title:t,content:e,buttons:o,additionalCssClasses:i})},t.prototype.advanced=function(t){return t.type="string"==typeof t.type&&t.type in f?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 r?t.size:this.defaultConfiguration.size,t.style="string"==typeof t.style&&t.style in c?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)},t.prototype.initializeMarkupTrigger=function(t){var e=this;n(t).on("click",".t3js-modal-trigger",function(t){t.preventDefault();var o=n(t.currentTarget),l=o.data("content")||"Are you sure?",s=void 0!==a.SeverityEnum[o.data("severity")]?a.SeverityEnum[o.data("severity")]:a.SeverityEnum.info,r=o.data("url")||null;null!==r&&(r=r+(r.indexOf("?")>-1?"&":"?")+n.param({data:o.data()}));e.advanced({type:null!==r?f.ajax:f.default,title:o.data("title")||"Alert",content:null!==r?r:l,severity:s,buttons:[{text:o.data("button-close-text")||"Close",active:!0,btnClass:"btn-default",trigger:function(){e.currentModal.trigger("modal-dismiss")}},{text:o.data("button-ok-text")||"OK",btnClass:"btn-"+i.getCssClass(s),trigger:function(){e.currentModal.trigger("modal-dismiss"),t.target.ownerDocument.location.href=o.data("href")||o.attr("href")}}]})})},t.prototype.generate=function(t){var e,a,s=this,r=this.$template.clone();if(t.additionalCssClasses.length>0)try{for(var d=__values(t.additionalCssClasses),c=d.next();!c.done;c=d.next()){var u=c.value;r.addClass(u)}}catch(t){e={error:t}}finally{try{c&&!c.done&&(a=d.return)&&a.call(d)}finally{if(e)throw e.error}}if(r.addClass("modal-type-"+t.type),r.addClass("modal-severity-"+i.getCssClass(t.severity)),r.addClass("modal-style-"+t.style),r.addClass("modal-size-"+t.size),r.attr("tabindex","-1"),r.find(l.title).text(t.title),r.find(l.close).on("click",function(){r.modal("hide")}),"ajax"===t.type?(n.get(t.content,function(e){s.currentModal.find(t.ajaxTarget?t.ajaxTarget:l.body).empty().append(e),t.ajaxCallback&&t.ajaxCallback(),s.currentModal.trigger("modal-loaded")},"html"),o.getIcon("spinner-circle",o.sizes.default,null,null,o.markupIdentifiers.inline).done(function(t){r.find(l.body).html('<div class="modal-loading">'+t+"</div>")})):"iframe"===t.type?(r.find(l.body).append(n("<iframe />",{src:t.content,name:"modal_frame",class:"modal-iframe t3js-modal-iframe"})),r.find(l.iframe).on("load",function(){r.find(l.title).text(r.find(l.iframe).get(0).contentDocument.title)})):("string"==typeof t.content&&(/^<[a-z][\s\S]*>/i.test(t.content)||(t.content=n("<p />").html(t.content))),r.find(l.body).append(t.content)),t.buttons.length>0){for(var f=function(e){var a=t.buttons[e],o=n("<button />",{class:"btn"});o.html("<span>"+a.text+"</span>"),a.active&&o.addClass("t3js-active"),""!==a.btnClass&&o.addClass(a.btnClass),""!==a.name&&o.attr("name",a.name),a.trigger&&o.on("click",a.trigger),a.dataAttributes&&Object.keys(a.dataAttributes).length>0&&Object.keys(a.dataAttributes).map(function(t){o.attr("data-"+t,a.dataAttributes[t])}),a.icon&&o.prepend('<span class="t3js-modal-icon-placeholder" data-icon="'+a.icon+'"></span>'),r.find(l.footer).append(o)},m=0;m<t.buttons.length;m++)f(m);r.find(l.footer).find("button").on("click",function(t){n(t.currentTarget).trigger("button.clicked")})}else r.find(l.footer).remove();return r.on("shown.bs.modal",function(t){var e=n(t.currentTarget);e.find(l.footer).find(".t3js-active").first().focus(),e.find(l.iconPlaceholder).each(function(t,e){o.getIcon(n(e).data("icon"),o.sizes.small,null,null,o.markupIdentifiers.inline).done(function(t){s.currentModal.find(l.iconPlaceholder+"[data-icon="+n(t).data("identifier")+"]").replaceWith(t)})})}),r.on("hidden.bs.modal",function(t){if(s.instances.length>0){var e=s.instances.length-1;s.instances.splice(e,1),s.currentModal=s.instances[e-1]}r.trigger("modal-destroyed"),n(t.currentTarget).remove(),s.instances.length>0&&n("body").addClass("modal-open")}),r.on("show.bs.modal",function(t){s.currentModal=n(t.currentTarget),s.instances.push(s.currentModal)}),r.on("modal-dismiss",function(t){n(t.currentTarget).modal("hide")}),t.callback&&t.callback(r),r.modal()},t}(),p=null;try{parent&&parent.window.TYPO3&&parent.window.TYPO3.Modal?(parent.window.TYPO3.Modal.initializeMarkupTrigger(document),p=parent.window.TYPO3.Modal):top&&top.TYPO3.Modal&&(top.TYPO3.Modal.initializeMarkupTrigger(document),p=top.TYPO3.Modal)}catch(t){}return p||(p=new g,TYPO3.Modal=p),p});
\ No newline at end of file