99 lines
2.1 KiB
TypeScript
99 lines
2.1 KiB
TypeScript
export class Popup<P>
|
|
{
|
|
component?: Component
|
|
payload?: P;
|
|
config?: PopupConfig
|
|
|
|
public static component<P>(component: Component): Popup<P>
|
|
{
|
|
const popup: Popup<P> = new Popup<P>();
|
|
popup.component = component;
|
|
return popup;
|
|
}
|
|
|
|
public setPayload(payload: P)
|
|
{
|
|
this.payload = payload;
|
|
return this;
|
|
}
|
|
|
|
public setConfig(config: PopupConfig)
|
|
{
|
|
this.config = config;
|
|
return this;
|
|
}
|
|
}
|
|
|
|
export interface PopupConfig
|
|
{
|
|
heading: string;
|
|
size: PopupSize;
|
|
closeOnOverlayClick?: boolean;
|
|
callback?: (payload?: any) => void;
|
|
}
|
|
|
|
export enum PopupSize
|
|
{
|
|
SMALL = "small", MEDIUM = "medium", LARGE = "large", FULL = "full"
|
|
}
|
|
|
|
export const usePopup = defineStore('popup', {
|
|
state: () => ({
|
|
popup: shallowRef<Popup<any> | undefined>(undefined)
|
|
}),
|
|
getters: {
|
|
get: (state) => {
|
|
return <P>(): Popup<P> | undefined => {
|
|
if (state.popup)
|
|
{
|
|
return state.popup as Popup<P>;
|
|
}
|
|
return undefined;
|
|
}
|
|
},
|
|
require: (state) => {
|
|
return <P>() => {
|
|
if (state.popup)
|
|
{
|
|
return state.popup as Popup<P>;
|
|
}
|
|
throw new Error('Expected to be in open popup state.');
|
|
}
|
|
}
|
|
},
|
|
actions: {
|
|
open<P>(popup: Popup<P>) {
|
|
this.popup = popup;
|
|
disableScrolling();
|
|
},
|
|
callback(payload?: any) {
|
|
if (this.popup?.config?.callback)
|
|
{
|
|
this.popup.config.callback(payload);
|
|
}
|
|
},
|
|
close() {
|
|
this.popup = undefined;
|
|
enableScrolling();
|
|
}
|
|
}
|
|
})
|
|
|
|
|
|
function disableScrolling()
|
|
{
|
|
const body = document.getElementsByTagName('body');
|
|
for(const element of body)
|
|
{
|
|
element.style.overflow = "hidden";
|
|
}
|
|
}
|
|
|
|
function enableScrolling()
|
|
{
|
|
const body = document.getElementsByTagName('body');
|
|
for(const element of body)
|
|
{
|
|
element.style.overflow = "visible";
|
|
}
|
|
} |