51 lines
1.5 KiB
TypeScript
51 lines
1.5 KiB
TypeScript
import $ from 'jquery';
|
|
import { domElements } from '../constants/selectors';
|
|
|
|
export default class ThickBoxModal {
|
|
openTriggerSelector: string;
|
|
inlineContentId: string;
|
|
windowCssClass: string;
|
|
contentCssClass: string;
|
|
|
|
constructor(
|
|
openTriggerSelector: string,
|
|
inlineContentId: string,
|
|
windowCssClass: string,
|
|
contentCssClass: string
|
|
) {
|
|
this.openTriggerSelector = openTriggerSelector;
|
|
this.inlineContentId = inlineContentId;
|
|
this.windowCssClass = windowCssClass;
|
|
this.contentCssClass = contentCssClass;
|
|
|
|
$(openTriggerSelector).on('click', this.init.bind(this));
|
|
}
|
|
|
|
close() {
|
|
//@ts-expect-error global
|
|
window.tb_remove();
|
|
}
|
|
|
|
init(e: Event) {
|
|
//@ts-expect-error global
|
|
window.tb_show(
|
|
'',
|
|
`#TB_inline?inlineId=${this.inlineContentId}&modal=true`
|
|
);
|
|
// thickbox doesn't respect the width and height url parameters https://core.trac.wordpress.org/ticket/17249
|
|
// We override thickboxes css with !important in the css
|
|
$(domElements.thickboxModalWindow).addClass(this.windowCssClass);
|
|
|
|
// have to modify the css of the thickbox content container as well
|
|
$(domElements.thickboxModalContent).addClass(this.contentCssClass);
|
|
|
|
// we unbind previous handlers because a thickbox modal is a single global object.
|
|
// Everytime it is re-opened, it still has old handlers bound
|
|
$(domElements.thickboxModalClose)
|
|
.off('click')
|
|
.on('click', this.close);
|
|
|
|
e.preventDefault();
|
|
}
|
|
}
|