116 lines
3.5 KiB
TypeScript
116 lines
3.5 KiB
TypeScript
import { FC, memo, useCallback, useEffect, useState } from 'react';
|
|
import { ProviderInterface } from '@gitroom/extension/providers/provider.interface';
|
|
import { fetchCookie } from '@gitroom/extension/utils/load.cookie';
|
|
|
|
const Comp: FC<{ removeModal: () => void; platform: string; style: string }> = (
|
|
props
|
|
) => {
|
|
const load = async () => {
|
|
const cookie = await fetchCookie(`auth`);
|
|
if (document.querySelector('iframe#modal-postiz')) {
|
|
return;
|
|
}
|
|
|
|
const div = document.createElement('div');
|
|
div.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
|
|
div.style.position = 'fixed';
|
|
div.style.top = '0';
|
|
div.style.left = '0';
|
|
div.style.zIndex = '9999';
|
|
div.style.width = '100%';
|
|
div.style.height = '100%';
|
|
div.style.border = 'none';
|
|
div.style.overflow = 'hidden';
|
|
document.body.appendChild(div);
|
|
|
|
const iframe = document.createElement('iframe');
|
|
iframe.style.backgroundColor = 'transparent';
|
|
// @ts-ignore
|
|
iframe.allowTransparency = 'true';
|
|
iframe.src =
|
|
(import.meta.env?.FRONTEND_URL || process?.env?.FRONTEND_URL) +
|
|
`/modal/${props.style}/${props.platform}?loggedAuth=${cookie}`;
|
|
iframe.id = 'modal-postiz';
|
|
iframe.style.width = '100%';
|
|
iframe.style.height = '100%';
|
|
iframe.style.position = 'fixed';
|
|
iframe.style.top = '0';
|
|
iframe.style.left = '0';
|
|
iframe.style.zIndex = '9999';
|
|
iframe.style.border = 'none';
|
|
div.appendChild(iframe);
|
|
|
|
window.addEventListener('message', (event) => {
|
|
if (event.data.action === 'closeIframe') {
|
|
const iframe = document.querySelector('iframe#modal-postiz');
|
|
if (iframe) {
|
|
props.removeModal();
|
|
div.remove();
|
|
}
|
|
}
|
|
});
|
|
};
|
|
useEffect(() => {
|
|
load();
|
|
}, []);
|
|
return <></>;
|
|
};
|
|
export const ActionComponent: FC<{
|
|
target: Node;
|
|
keyIndex: number;
|
|
actionType: string;
|
|
provider: ProviderInterface;
|
|
wrap: boolean;
|
|
selector: string;
|
|
}> = memo((props) => {
|
|
const { wrap, provider, selector, target, actionType } = props;
|
|
const [modal, showModal] = useState(false);
|
|
const handle = useCallback(async (e: any) => {
|
|
showModal(true);
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
const blockingDiv = document.createElement('div');
|
|
if (document.querySelector(`.${selector}`)) {
|
|
console.log('already exists');
|
|
return;
|
|
}
|
|
|
|
setTimeout(() => {
|
|
// @ts-ignore
|
|
const targetInformation = target.getBoundingClientRect();
|
|
blockingDiv.style.position = 'absolute';
|
|
blockingDiv.id = 'blockingDiv';
|
|
blockingDiv.style.cursor = 'pointer';
|
|
blockingDiv.style.top = `${targetInformation.top}px`;
|
|
blockingDiv.style.left = `${targetInformation.left}px`;
|
|
blockingDiv.style.width = `${targetInformation.width}px`;
|
|
blockingDiv.style.height = `${targetInformation.height}px`;
|
|
blockingDiv.style.zIndex = '9999';
|
|
blockingDiv.className = selector;
|
|
|
|
document.body.appendChild(blockingDiv);
|
|
blockingDiv.addEventListener('click', handle);
|
|
}, 1000);
|
|
return () => {
|
|
blockingDiv.removeEventListener('click', handle);
|
|
blockingDiv.remove();
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<div className="g-wrapper" style={{ position: 'relative' }}>
|
|
<div className="absolute start-0 top-0 z-[9999] w-full h-full" />
|
|
{modal && (
|
|
<Comp
|
|
platform={provider.identifier}
|
|
style={provider.style}
|
|
removeModal={() => showModal(false)}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
});
|