@ -1,77 +1,79 @@
import { h } from '/js/web_modules/preact.js' ; import { h , Component } from '/js/web_modules/preact.js' ;
import htm from '/js/web_modules/htm.js' ; import htm from '/js/web_modules/htm.js' ;
import MicroModal from '/js/web_modules/micromodal/dist/micromodal.min.js' ;
const html = htm . bind ( h ) ; const html = htm . bind ( h ) ;
export default function ExternalActionModal ( { url , title , onClose } ) { export default class ExternalActionModal extends Component {
const loading = 'background:url(/img/loading.gif) center center no-repeat;' ; constructor ( props ) {
super ( props ) ;
this . state = {
iframeLoaded : false ,
} ;
function loaded ( ) { this . setIframeLoaded = this . setIframeLoaded . bind ( this ) ;
document . querySelector ( '#external-modal-iframe' ) . style = '' ; }
componentDidMount ( ) {
// initalize 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 . log ( "micromodal error: " , e ) ;
}
} }
return html ` setIframeLoaded ( ) {
< div class = "fixed inset-0 overflow-y-auto" style = "z-index: 9999" > this . setState ( {
< div iframeLoaded : true ,
class = "flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0" } ) ;
> }
< div class = "fixed inset-0 transition-opacity" aria - hidden = "true" >
< div
onClick = $ { ( ) => onClose ( ) }
class = "absolute inset-0 bg-gray-900 bg-opacity-75"
> < / d i v >
< / d i v >
<!-- This element is to trick the browser into centering the modal contents . -- >
< span
class = "hidden sm:inline-block sm:align-middle sm:h-screen"
aria - hidden = "true"
> & # 8203 ; < / s p a n
>
< div
class = "inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:align-middle w-screen md:max-w-2xl lg:max-w-2xl"
role = "dialog"
aria - modal = "true"
aria - labelledby = "modal-headline"
>
< div class = "bg-white " >
< div
class = "bg-gray-50 px-4 py-3 sm:px-6 sm:flex justify-between items-center"
>
< h3 class = "font-bold hidden md:block" > $ { title } < / h 3 >
< span class = "" onclick = $ { onClose } >
< svg
class = "h-12 w-12 fill-current text-grey hover:text-grey-darkest"
role = "button"
xmlns = "http://www.w3.org/2000/svg"
viewBox = "0 0 20 20"
>
< title > Close < / t i t l e >
< path
d = "M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z"
/ >
< / s v g >
< / s p a n >
< / d i v >
render ( ) {
const { action } = 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 class = "modal__title text-indigo-600 font-semibold" >
$ { title || description }
< / h 2 >
< button class = "modal__close" aria - label = "Close modal" data - micromodal - close > < / b u t t o n >
< / h e a d e r >
< div id = "modal-content-content" class = "modal-content-content" >
< div id = "modal-content" class = "modal__content text-gray-600 rounded-b-md overflow-y-auto overflow-x-hidden" >
< iframe < iframe
id = "external-modal-iframe" id = "external-modal-iframe"
style = $ { ` ${ loading } ` } style = $ { iframeStyle }
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 = $ { loaded } onload = $ { this . setIframeLoaded }
/ > / >
< / d i v > < / d i v >
< / d i v > < / d i v >
< / d i v > < / d i v >
< / d i v > < / d i v >
< / d i v >
` ;
` ;
} }
}
export function ExternalActionButton ( { index , action , onClick } ) { export function ExternalActionButton ( { action , onClick } ) {
const { title , icon , color = undefined } = action ; const { title , icon , color = undefined } = action ;
const logo = const logo =
icon && icon &&
@ -79,11 +81,10 @@ export function ExternalActionButton({ index, action, onClick }) {
< span class = "external-action-icon" > < img src = $ { icon } alt = "" / > < / s p a n > < span class = "external-action-icon" > < img src = $ { icon } alt = "" / > < / s p a n >
` ;
` ;
const bgcolor = color && { backgroundColor : ` ${ color } ` } ; const bgcolor = color && { backgroundColor : ` ${ color } ` } ;
const handleClick = ( ) => onClick ( index ) ; const handleClick = ( ) => onClick ( act io n) ;
return html ` return html `
< button < button
class = "external-action-button rounded-sm flex flex-row justify-center items-center overflow-hidden bg-gray-800" class = "external-action-button rounded-sm flex flex-row justify-center items-center overflow-hidden bg-gray-800"
data - index = $ { index }
onClick = $ { handleClick } onClick = $ { handleClick }
style = $ { bgcolor } style = $ { bgcolor }
> >
Gabe Kangas
4 years ago
committed by
GitHub