Navy.gif/owncast
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Prettified Code!

Browse Source
This commit is contained in:
gabek 2022-09-30 16:43:28 +00:00 committed by GitHub Action
parent a080fa1524
commit 92107e222e
1 changed files with 113 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

226
webroot/js/components/external-action-modal.js
View File

@ -5,124 +5,124 @@ import MicroModal from '/js/web_modules/micromodal/dist/micromodal.min.js';
const html = htm.bind(h); const html = htm.bind(h);
export default class ExternalActionModal extends Component { export default class ExternalActionModal extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
iframeLoaded: false, iframeLoaded: false,
}; };
this.setIframeLoaded = this.setIframeLoaded.bind(this); this.setIframeLoaded = this.setIframeLoaded.bind(this);
} }
componentDidMount() { componentDidMount() {
// initialize and display Micromodal on mount // initialize and display Micromodal on mount
try { try {
MicroModal.init({ MicroModal.init({
awaitCloseAnimation: false, awaitCloseAnimation: false,
awaitOpenAnimation: true, // if using css animations to open the modal. This allows it to wait for the animation to finish before focusing on an element inside the modal. awaitOpenAnimation: true, // if using css animations to open the modal. This allows it to wait for the animation to finish before focusing on an element inside the modal.
}); });
MicroModal.show('external-actions-modal', { MicroModal.show('external-actions-modal', {
onClose: this.props.onClose, onClose: this.props.onClose,
}); });
} catch (e) { } catch (e) {
console.error('modal error: ', e); console.error('modal error: ', e);
} }
} }
setIframeLoaded() { setIframeLoaded() {
this.setState({ this.setState({
iframeLoaded: true, iframeLoaded: true,
}); });
} }
render() { render() {
const { action, useIframe = true, customContent = null } = this.props; const { action, useIframe = true, customContent = null } = this.props;
const { url, title, description } = action; const { url, title, description } = action;
const { iframeLoaded } = this.state; const { iframeLoaded } = this.state;
const iframeStyle = iframeLoaded const iframeStyle = iframeLoaded
? null ? null
: { backgroundImage: 'url(/img/loading.gif)' }; : { backgroundImage: 'url(/img/loading.gif)' };
return html` return html`
<div <div
class="modal micromodal-slide" class="modal micromodal-slide"
id="external-actions-modal" id="external-actions-modal"
aria-hidden="true" aria-hidden="true"
> >
<div class="modal__overlay" tabindex="-1" data-micromodal-close> <div class="modal__overlay" tabindex="-1" data-micromodal-close>
<div <div
id="modal-container" id="modal-container"
class="modal__container rounded-md" class="modal__container rounded-md"
role="dialog" role="dialog"
aria-modal="true" aria-modal="true"
aria-labelledby="modal-1-title" aria-labelledby="modal-1-title"
> >
<header <header
id="modal-header" id="modal-header"
class="modal__header flex flex-row justify-between items-center bg-gray-300 p-3 rounded-t-md" class="modal__header flex flex-row justify-between items-center bg-gray-300 p-3 rounded-t-md"
> >
<h2 <h2
id="external-action-modal-header" id="external-action-modal-header"
class="modal__title text-indigo-600 font-semibold" class="modal__title text-indigo-600 font-semibold"
> >
${title || description} ${title || description}
</h2> </h2>
<button <button
class="modal__close" class="modal__close"
aria-label="Close modal" aria-label="Close modal"
data-micromodal-close data-micromodal-close
></button> ></button>
</header> </header>
<div <div
id="modal-content-content" id="modal-content-content"
class="modal-content-content rounded-b-md" class="modal-content-content rounded-b-md"
> >
${useIframe ${useIframe
? html` ? html`
<div <div
id="modal-content" id="modal-content"
class="modal__content text-gray-600 overflow-y-auto overflow-x-hidden" class="modal__content text-gray-600 overflow-y-auto overflow-x-hidden"
> >
<iframe <iframe
id="external-modal-iframe" id="external-modal-iframe"
style=${{ iframeStyle }} style=${{ iframeStyle }}
class="bg-gray-100 bg-center bg-no-repeat" class="bg-gray-100 bg-center bg-no-repeat"
width="100%" width="100%"
allowpaymentrequest="true" allowpaymentrequest="true"
allowfullscreen="false" allowfullscreen="false"
sandbox="allow-same-origin allow-scripts allow-popups allow-forms" sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
src=${url} src=${url}
onload=${this.setIframeLoaded} onload=${this.setIframeLoaded}
/> />
</div> </div>
` `
: customContent} : customContent}
</div> </div>
</div> </div>
</div> </div>
</div> </div>
`; `;
} }
} }
export function ExternalActionButton({ action, onClick, label = '' }) { export function ExternalActionButton({ action, onClick, label = '' }) {
const { title, icon, color = undefined, description } = action; const { title, icon, color = undefined, description } = action;
const logo = const logo =
icon && icon &&
html` html`
<span class="external-action-icon"><img src=${icon} alt="" /></span> <span class="external-action-icon"><img src=${icon} alt="" /></span>
`; `;
const bgcolor = color && { backgroundColor: `${color}` }; const bgcolor = color && { backgroundColor: `${color}` };
const handleClick = () => onClick(action); const handleClick = () => onClick(action);
return html` return html`
<button <button
class="external-action-button rounded-sm flex flex-row justify-center items-center overflow-hidden m-1 px-3 py-1 text-base text-white bg-gray-800 rounded" class="external-action-button rounded-sm flex flex-row justify-center items-center overflow-hidden m-1 px-3 py-1 text-base text-white bg-gray-800 rounded"
onClick=${handleClick} onClick=${handleClick}
style=${bgcolor} style=${bgcolor}
aria-label=${description} aria-label=${description}
title=${description || title} title=${description || title}
> >
${logo} ${logo}
<span class="external-action-label">${label || title}</span> <span class="external-action-label">${label || title}</span>
</button> </button>
`; `;
} }