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);
export default class ExternalActionModal extends Component {
constructor(props) {
super(props);
this.state = {
iframeLoaded: false,
};
constructor(props) {
super(props);
this.state = {
iframeLoaded: false,
};
this.setIframeLoaded = this.setIframeLoaded.bind(this);
}
componentDidMount() {
// initialize and display Micromodal on mount
try {
MicroModal.init({
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.
});
MicroModal.show('external-actions-modal', {
onClose: this.props.onClose,
});
} catch (e) {
console.error('modal error: ', e);
}
}
this.setIframeLoaded = this.setIframeLoaded.bind(this);
}
componentDidMount() {
// initialize and display Micromodal on mount
try {
MicroModal.init({
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.
});
MicroModal.show('external-actions-modal', {
onClose: this.props.onClose,
});
} catch (e) {
console.error('modal error: ', e);
}
}
setIframeLoaded() {
this.setState({
iframeLoaded: true,
});
}
setIframeLoaded() {
this.setState({
iframeLoaded: true,
});
}
render() {
const { action, useIframe = true, customContent = null } = this.props;
const { url, title, description } = action;
const { iframeLoaded } = this.state;
const iframeStyle = iframeLoaded
? null
: { backgroundImage: 'url(/img/loading.gif)' };
render() {
const { action, useIframe = true, customContent = null } = this.props;
const { url, title, description } = action;
const { iframeLoaded } = this.state;
const iframeStyle = iframeLoaded
? null
: { backgroundImage: 'url(/img/loading.gif)' };
return html`
<div
class="modal micromodal-slide"
id="external-actions-modal"
aria-hidden="true"
>
<div class="modal__overlay" tabindex="-1" data-micromodal-close>
<div
id="modal-container"
class="modal__container rounded-md"
role="dialog"
aria-modal="true"
aria-labelledby="modal-1-title"
>
<header
id="modal-header"
class="modal__header flex flex-row justify-between items-center bg-gray-300 p-3 rounded-t-md"
>
<h2
id="external-action-modal-header"
class="modal__title text-indigo-600 font-semibold"
>
${title || description}
</h2>
<button
class="modal__close"
aria-label="Close modal"
data-micromodal-close
></button>
</header>
<div
id="modal-content-content"
class="modal-content-content rounded-b-md"
>
${useIframe
? html`
<div
id="modal-content"
class="modal__content text-gray-600 overflow-y-auto overflow-x-hidden"
>
<iframe
id="external-modal-iframe"
style=${{ iframeStyle }}
class="bg-gray-100 bg-center bg-no-repeat"
width="100%"
allowpaymentrequest="true"
allowfullscreen="false"
sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
src=${url}
onload=${this.setIframeLoaded}
/>
</div>
`
: customContent}
</div>
</div>
</div>
</div>
`;
}
return html`
<div
class="modal micromodal-slide"
id="external-actions-modal"
aria-hidden="true"
>
<div class="modal__overlay" tabindex="-1" data-micromodal-close>
<div
id="modal-container"
class="modal__container rounded-md"
role="dialog"
aria-modal="true"
aria-labelledby="modal-1-title"
>
<header
id="modal-header"
class="modal__header flex flex-row justify-between items-center bg-gray-300 p-3 rounded-t-md"
>
<h2
id="external-action-modal-header"
class="modal__title text-indigo-600 font-semibold"
>
${title || description}
</h2>
<button
class="modal__close"
aria-label="Close modal"
data-micromodal-close
></button>
</header>
<div
id="modal-content-content"
class="modal-content-content rounded-b-md"
>
${useIframe
? html`
<div
id="modal-content"
class="modal__content text-gray-600 overflow-y-auto overflow-x-hidden"
>
<iframe
id="external-modal-iframe"
style=${{ iframeStyle }}
class="bg-gray-100 bg-center bg-no-repeat"
width="100%"
allowpaymentrequest="true"
allowfullscreen="false"
sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
src=${url}
onload=${this.setIframeLoaded}
/>
</div>
`
: customContent}
</div>
</div>
</div>
</div>
`;
}
}
export function ExternalActionButton({ action, onClick, label = '' }) {
const { title, icon, color = undefined, description } = action;
const logo =
icon &&
html`
<span class="external-action-icon"><img src=${icon} alt="" /></span>
`;
const bgcolor = color && { backgroundColor: `${color}` };
const handleClick = () => onClick(action);
return html`
<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"
onClick=${handleClick}
style=${bgcolor}
aria-label=${description}
title=${description || title}
>
${logo}
<span class="external-action-label">${label || title}</span>
</button>
`;
const { title, icon, color = undefined, description } = action;
const logo =
icon &&
html`
<span class="external-action-icon"><img src=${icon} alt="" /></span>
`;
const bgcolor = color && { backgroundColor: `${color}` };
const handleClick = () => onClick(action);
return html`
<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"
onClick=${handleClick}
style=${bgcolor}
aria-label=${description}
title=${description || title}
>
${logo}
<span class="external-action-label">${label || title}</span>
</button>
`;
}