Skip to content

Commit

Permalink
feat(modal-checkout): apply default styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@chickenn00dle
chickenn00dle committed Jan 25, 2024
1 parent b59c077 commit 1e113bb
Show file tree
Hide file tree
Showing 3 changed files with 175 additions and 25 deletions.
28 changes: 20 additions & 8 deletions includes/class-modal-checkout.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -288,22 +288,27 @@ public static function render_modal_markup() {
*
* @param string $title The title.
*/
$title = apply_filters( 'newspack_blocks_modal_checkout_title', __( 'Complete your transaction', 'newspack-blocks' ) );
$title = apply_filters( 'newspack_blocks_modal_checkout_title', __( 'Complete your transaction', 'newspack-blocks' ) );
$class_prefix = 'newspack-blocks';

if ( class_exists( '\Newspack\Newspack_UI' ) ) {
$class_prefix = 'newspack-ui';
}
?>
<div class="newspack-ui newspack-ui__modal-container">
<div class="newspack-ui__modal-container__overlay"></div>
<div class="newspack-ui__modal">
<header class="newspack-ui__modal__header">
<div class="<?php echo esc_attr( $class_prefix ) . esc_attr( $class_prefix ) . '__modal-container'; ?>">
<div class="<?php echo esc_attr( $class_prefix ) . '__modal-container__overlay'; ?>"></div>
<div class="<?php echo esc_attr( $class_prefix ) . '__modal'; ?>">
<header class="<?php echo esc_attr( $class_prefix ) . '__modal__header'; ?>">
<h2><?php echo esc_html( $title ); ?></h2>
<button class="newspack-ui__modal__close">
<button class="<?php echo esc_attr( $class_prefix ) . '__modal__close'; ?>">
<span class="screen-reader-text"><?php esc_html_e( 'Close', 'newspack-blocks' ); ?></span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false">
<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/>
</svg>
</button>
</header>
<section class="newspack-ui__modal__content">
<div class="newspack-ui__spinner">
<section class="<?php echo esc_attr( $class_prefix ) . '__modal__content'; ?>">
<div class="<?php echo esc_attr( $class_prefix ) . '__spinner'; ?>">
<span></span>
</div>
</section>
Expand Down Expand Up @@ -458,6 +463,13 @@ public static function enqueue_modal( $product_id = null ) {
\NEWSPACK_BLOCKS__VERSION,
true
);
wp_localize_script(
'newspack-blocks-modal',
'newspackBlocksModal',
[
'has_newspack_ui' => class_exists( '\Newspack\Newspack_UI' ),
]
);
wp_enqueue_style(
'newspack-blocks-modal',
plugins_url( 'dist/modal.css', \NEWSPACK_BLOCKS__PLUGIN_FILE ),
Expand Down
26 changes: 14 additions & 12 deletions src/modal-checkout/modal.js
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
/* globals newspackBlocksModal */

/**
* Internal dependencies
*/
Expand Down Expand Up @@ -25,6 +27,9 @@ function domReady( callback ) {
document.addEventListener( 'DOMContentLoaded', callback );
}

const CLASSNAME_BASE = newspackBlocksModal.has_newspack_ui ? 'newspack-ui' : 'newspack-blocks';
const MODAL_CLASSNAME_BASE = `${ CLASSNAME_BASE }__modal`;

const triggers =
'.wpbnbd.wpbnbd--platform-wc,.wp-block-newspack-blocks-checkout-button,.newspack-blocks-variation-modal';

Expand All @@ -38,52 +43,49 @@ function closeCheckout() {
if ( iframeResizeObserver ) {
iframeResizeObserver.disconnect();
}
Array.from( document.querySelectorAll( '.newspack-ui__modal-container' ) ).forEach( el => {
Array.from( document.querySelectorAll( `.${ MODAL_CLASSNAME_BASE }-container` ) ).forEach( el => {
closeModal( el );
if ( el.overlayId && window.newspackReaderActivation?.overlays ) {
window.newspackReaderActivation?.overlays.remove( el.overlayId );
}
} );
}

function openModal( el ) {
el.setAttribute( 'data-state', 'open' );
}

function closeModal( el ) {
el.setAttribute( 'data-state', 'closed' );
}

window.newspackCloseModalCheckout = closeCheckout;
function openModal( el ) {
el.setAttribute( 'data-state', 'open' );
}

const MODAL_CLASSNAME_BASE = '.newspack-ui__modal';
window.newspackCloseModalCheckout = closeCheckout;

domReady( () => {
/**
* Initialize modal checkout.
*/
const modalCheckout = document.querySelector( '.newspack-ui__modal-container' );
const modalCheckout = document.querySelector( `.${ MODAL_CLASSNAME_BASE }-container` );
if ( ! modalCheckout ) {
return;
}
const spinner = document.querySelector( '.newspack-ui__spinner' );
const spinner = document.querySelector( `.${ CLASSNAME_BASE }__spinner` );
const iframeName = 'newspack_modal_checkout_iframe';
const modalCheckoutInput = document.createElement( 'input' );
modalCheckoutInput.type = 'hidden';
modalCheckoutInput.name = 'modal_checkout';
modalCheckoutInput.value = '1';
const modalContent = modalCheckout.querySelector( `${ MODAL_CLASSNAME_BASE }__content` );
const modalContent = modalCheckout.querySelector( `.${ MODAL_CLASSNAME_BASE }__content` );
const initialHeight = modalContent.clientHeight + 'px';
const iframe = document.createElement( 'iframe' );
iframe.name = iframeName;
iframe.scrolling = 'no';
modalContent.appendChild( iframe );
modalCheckout.addEventListener( 'click', ev => {
if ( ev.target === modalCheckout ) {
closeCheckout();
}
} );
const closeButtons = modalCheckout.querySelectorAll( `${ MODAL_CLASSNAME_BASE }__close` );
const closeButtons = modalCheckout.querySelectorAll( `.${ MODAL_CLASSNAME_BASE }__close` );
closeButtons.forEach( button => {
button.addEventListener( 'click', ev => {
ev.preventDefault();
Expand Down
146 changes: 141 additions & 5 deletions src/modal-checkout/modal.scss
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,132 @@
@use '../shared/sass/colors';
@use '../shared/sass/variables';

// Checkout modal specific styles.
iframe[name="newspack_modal_checkout_iframe"] {
width: 100%;
height: 100%;
border: none;
}

// Default modal styles when newspack ui is not present.
.newspack-blocks {
&__modal-container {
position: fixed;
z-index: -1;
inset: 0;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
visibility: hidden;
pointer-events: none;

&__overlay {
position: absolute;
z-index: 1;
inset: 0;
opacity: 0;
background: rgba( 0, 0, 0, 0.5 );
transition: opacity 0.1s linear;
}

&[data-state='open'] {
z-index: 99999;
visibility: visible;
pointer-events: auto;
.newspack-blocks__modal-container__overlay {
opacity: 1;
}
.newspack-blocks__modal {
opacity: 1;
transform: translateY( 0 );
}
}

& .newspack-blocks {
&__modal {
position: relative;
z-index: 2;
width: 100%;
transform: translateY( 50px );
opacity: 0;
transition: transform 0.1s linear, opacity 0.1s linear;
border-radius: 6px;
background: colors.$color__background-body;
max-width: 600px;
max-height: 90vh;
min-height: 300px;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: auto;

&__header {
padding: 24px;
box-sizing: border-box;
height: 64px;
border-bottom: 1px solid #ddd;
display: flex;
align-items: center;
justify-content: space-between;
h2 {
font-size: 16px;
}
}

&__content {
padding: 24px;
position: relative;
flex-grow: 1;
> * {
width: 100%;
height: 100%;
border: 0;
border-radius: 6px;
}
}

&__close {
padding: 8px;
border: 0;
background: transparent;
color: colors.$color__text-main;
cursor: pointer;
&:focus,
&:hover {
color: colors.$color__text-light;
}
svg {
display: block;
}
}
}

&__spinner {
align-items: center;
background: #fff;
border-radius: 5px;
display: flex;
justify-content: center;
position: absolute;
top: 0;
bottom: 0;
width: calc( 100% - 24px );
> span {
animation: spin 1s infinite linear;
border: 2px solid colors.$color__background-body;
border-top-color: colors.$color__text-light;
border-radius: 50%;
height: 25px;
width: 25px;
margin-top: -12.5px;
margin-left: -12.5px;
}
}
}
}
}

.newspack-blocks-variation-modal {
.newspack-blocks-modal {
&__content {
Expand Down Expand Up @@ -63,9 +192,16 @@
}
}

// Checkout modal specific styles.
iframe[name="newspack_modal_checkout_iframe"] {
width: 100%;
height: 100%;
border: none;

@keyframes spin {
0% {
transform: rotate( 0deg );
}
50% {
transform: rotate( 180deg );
}
100% {
transform: rotate( 360deg );
}
}

0 comments on commit 1e113bb

Please sign in to comment.