diff --git a/assets/src/css/frontend/donation-grid.scss b/assets/src/css/frontend/donation-grid.scss deleted file mode 100644 index 1538770768..0000000000 --- a/assets/src/css/frontend/donation-grid.scss +++ /dev/null @@ -1,265 +0,0 @@ -// @mixin mobile { -// @media screen and ( max-width: 480px ) { -// @content; -// } -// } - -// @mixin tablet { -// @media screen and ( max-width: 786px ) { -// @content; -// } -// } - -// @mixin tabel-to-desktop { -// @media screen and ( min-width: 787px ) and ( max-width: 1024px ) { -// @content; -// } -// } - -// .give-donation-grid-container { -// display: flex; -// flex-flow: row wrap; - -// .give-donation-grid-item { -// display: flex; -// margin-bottom: .5rem; -// padding: 0 .25rem; - -// .box { -// display: flex; -// flex-flow: column; -// padding: 1rem; -// width: 100%; -// box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12); -// border-radius: 2px; -// overflow: hidden; -// transition: box-shadow .15s ease; - -// &:hover { -// box-shadow: 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12), 0 5px 5px -3px rgba(0, 0, 0, .2); - -// .progress.active .bar { -// animation: progress-bar-stripes 2s linear infinite; -// } -// } - -// img { -// height: 200px; -// object-fit: cover; -// } -// } - -// .donation-grid-featured-image { -// margin: -1rem -1rem 0 -1rem; -// padding: .5rem; -// } - -// .donation-grid-title { -// margin: 1rem 0 .25rem 0; -// font-size: 1.15rem; -// font-weight: bold; -// } - -// .give-goal-progress .give-progress-bar { -// height: 12px; -// } - -// .raised { -// margin-bottom: 4px; -// font-size: 0.8rem; -// color: #999; -// } - -// .donor-grid-excerpt { -// margin-bottom: 1.5rem; -// font-size: .90rem; -// } - -// .grid-donate-now { -// margin: auto 0 0 0; -// padding: .5rem; -// background-color: #68bb6c; -// color: #fff; -// font-weight: bold; -// text-align: center; -// text-decoration: none; -// text-transform: uppercase; -// border-radius: 2px; -// transition: background-color .15s ease; -// cursor: pointer; - -// &:hover { -// background-color: #429446; -// } -// } -// } - -// .give-grid-col-1 { -// width: 100%; -// } - -// .give-grid-col-2 { -// width: 50%; - -// @include mobile { -// width: 100%; -// } -// } - -// .give-grid-col-3 { -// width: calc( 100% / 3 ); - -// @include tablet { -// width: 50%; -// } - -// @include mobile { -// width: 100%; -// } -// } - -// .give-grid-col-4 { -// width: 25%; - -// @include tabel-to-desktop { -// width: calc( 100% / 3 ); -// } - -// @include tablet { -// width: 50%; -// } - -// @include mobile { -// width: 100%; -// } -// } -// } - -.give-donation-grid-item-form { - position: relative; - margin: 0 auto; - max-width: 550px; - background-color: #fff; - padding: 1rem; - height: 85vh; - overflow-y: auto; - - #give-payment-mode-select, - #give_purchase_form_wrap { - display: block !important; - } - - .give-btn-reveal, - .give-btn-modal { - display: none !important; - } - - .mfp-close:hover { - background-color: rgba(0, 0, 0, 0); - } -} - -// .progress { -// overflow: hidden; -// background-image: linear-gradient(top, #f5f5f5, #f9f9f9); -// background-repeat: repeat-x; -// filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#f9f9f9', GradientType=0); -// box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); - -// .bar { -// background-image: linear-gradient(top, #149bdf, #0480be); -// background-repeat: repeat-x; -// filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#149bdf', endColorstr='#0480be', GradientType=0); -// box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); -// box-sizing: border-box; -// transition: width 0.6s ease; -// } -// } - -// .progress-striped .bar { -// background-color: #89949B; -// background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); -// background-size: 40px 40px; -// } - -// .progress-danger .bar { -// background-color: #89949B; -// background-image: linear-gradient(top, #89949B, #c43c35); -// background-repeat: repeat-x; -// filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0); -// } - -// .progress-danger.progress-striped .bar { -// background-color: #1ABC9C; -// background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); -// } - - -// @keyframes progress-bar-stripes { -// from { -// background-position: 0 0; -// } - -// to { -// background-position: 40px 0; -// } -// } - -.mfp-hide { - display: none; -} - -.my-mfp-zoom-in .zoom-anim-dialog { - opacity: 0; - transition: all 0.2s ease-in-out; -} - -.my-mfp-zoom-in.mfp-ready .zoom-anim-dialog { - opacity: 1; -} - -.my-mfp-zoom-in.mfp-removing .zoom-anim-dialog { - opacity: 0; -} - -.my-mfp-zoom-in.mfp-bg { - opacity: 0; - transition: opacity 0.25s ease-out; -} - -.my-mfp-zoom-in.mfp-ready.mfp-bg { - opacity: 0.8; -} - -.my-mfp-zoom-in.mfp-removing.mfp-bg { - opacity: 0; -} - -.my-mfp-slide-bottom .zoom-anim-dialog { - opacity: 0; - transform: translateY(-200px); - transition: all 0.25s ease-out; -} - -.my-mfp-slide-bottom.mfp-ready .zoom-anim-dialog { - opacity: 1; - transform: translateY(0); -} - -.my-mfp-slide-bottom.mfp-removing .zoom-anim-dialog { - opacity: 0; - transform: translateY(-200px); -} - -.my-mfp-slide-bottom.mfp-bg { - opacity: 0; - transition: opacity 0.25s ease-out; -} - -.my-mfp-slide-bottom.mfp-ready.mfp-bg { - opacity: 0.8; -} - -.my-mfp-slide-bottom.mfp-removing.mfp-bg { - opacity: 0; -} diff --git a/assets/src/css/frontend/forms.scss b/assets/src/css/frontend/forms.scss index 4bea245dd6..c1475e10ad 100644 --- a/assets/src/css/frontend/forms.scss +++ b/assets/src/css/frontend/forms.scss @@ -383,11 +383,11 @@ form[id*='give-form'] { } .give-display-button-only > *:not(form) { - display: none !important; + display: none; } .give-display-button-only form > *:not(.give-btn-modal) { - display: none !important; + display: none; } /*--------------------------------- diff --git a/assets/src/css/frontend/give-frontend.scss b/assets/src/css/frontend/give-frontend.scss index 2bcfc26d1e..7747eb7281 100644 --- a/assets/src/css/frontend/give-frontend.scss +++ b/assets/src/css/frontend/give-frontend.scss @@ -22,7 +22,6 @@ @import 'tables'; @import 'theme-compatibility'; @import 'donation-history'; -@import 'donation-grid'; @import 'modal'; // Wrapper increases specificity for defensive styling against themes. diff --git a/assets/src/css/frontend/modal.scss b/assets/src/css/frontend/modal.scss index feba3608a2..40193a8773 100644 --- a/assets/src/css/frontend/modal.scss +++ b/assets/src/css/frontend/modal.scss @@ -9,109 +9,109 @@ // Wrapper for popup .give-modal { - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: $mfp-z-index-base + 2147482500; - position: fixed; - overflow:hidden; - outline: none !important; - -webkit-backface-visibility: hidden; // fixes webkit bug that can cause "false" scrollbar - -webkit-overflow-scrolling: touch; - -webkit-transform: translateZ(0); - - form[id*='give-form'] { - margin-bottom: 0; - .give-submit { - margin-bottom: 0; - } - .give-payment-mode-label { - margin-top: 0; - padding-top: 0; - } - @media (max-width: 580px) { - .give-input { - font-size:16px; // Prevents mobile zoom to inputs. - } - } + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: $mfp-z-index-base + 2147482500; + position: fixed; + overflow:hidden; + outline: none !important; + -webkit-backface-visibility: hidden; // fixes webkit bug that can cause "false" scrollbar + -webkit-overflow-scrolling: touch; + -webkit-transform: translateZ(0); + + form[id*='give-form'] { + margin-bottom: 0; + .give-submit { + margin-bottom: 0; } - - // Popup content holder - .mfp-content { - box-sizing: border-box; - position: relative; - background: #FFF; - padding: 20px; - width: auto; - max-width: 500px; - margin: 40px auto; - z-index: $mfp-z-index-base + 2147482600; - - [id*='give-form'] #give-payment-mode-select, - [id*='give-form'] #give_purchase_form_wrap, - [id*='give-form'].give-display-button-only .give-donation-amount, - [id*='give-form'].give-display-button-only .give-donation-levels-wrap { - display: block; - } - - .mfp-close:hover { - background-color: transparent; - } - + .give-payment-mode-label { + margin-top: 0; + padding-top: 0; + } + @media (max-width: 580px) { + .give-input { + font-size:16px; // Prevents mobile zoom to inputs. + } } + } - form.give-form button.mfp-close { - position: absolute; - display: block !important; + // Popup content holder + .mfp-content { + box-sizing: border-box; + position: relative; + background: #FFF; + padding: 20px; + width: auto; + max-width: 500px; + margin: 40px auto; + z-index: $mfp-z-index-base + 2147482600; + + [id*='give-form'] #give-payment-mode-select, + [id*='give-form'] #give_purchase_form_wrap, + [id*='give-form'].give-display-button-only .give-donation-amount, + [id*='give-form'].give-display-button-only .give-donation-levels-wrap { + display: block; } - .mfp-container:after { - display: none; + .mfp-close:hover { + background-color: transparent; } + } + + form.give-form button.mfp-close { + position: absolute; + display: block !important; + } + + .mfp-container:after { + display: none; + } + } // Move-from-top effect. .give-modal { + .mfp-content { + vertical-align:middle; + opacity: 0; + transition: all 0.2s; + transform: translateY(-100px); + } + + &.mfp-bg { + opacity: 0; + transition: all 0.2s; + } + + /* animate in */ + &.mfp-ready { .mfp-content { - vertical-align:middle; - opacity: 0; - transition: all 0.2s; - transform: translateY(-100px); + opacity: 1; + transform: translateY(0); } - &.mfp-bg { - opacity: 0; - transition: all 0.2s; - } - - /* animate in */ - &.mfp-ready { - .mfp-content { - opacity: 1; - transform: translateY(0); - } - &.mfp-bg { - opacity: 0.8; - } + opacity: 0.8; } + } - /* animate out */ - &.mfp-removing { - - .mfp-content { - transform: translateY(-50px); - opacity: 0; - } - &.mfp-bg { - opacity: 0; - } + /* animate out */ + &.mfp-removing { + .mfp-content { + transform: translateY(-50px); + opacity: 0; + } + &.mfp-bg { + opacity: 0; } + } + } @@ -169,4 +169,21 @@ .mfp-close:hover { background-color: rgba(0, 0, 0, 0); +} + +/** + * Display Style Button + */ +.mfp-content { + .give-display-button-only .give-form-title { + display: none; + } + + .give-display-button-only > *:not(form) { + display: block; + } + + .give-display-button-only form > *:not(.give-btn-modal) { + display: block; + } } \ No newline at end of file diff --git a/assets/src/js/frontend/give-ajax.js b/assets/src/js/frontend/give-ajax.js index 9a014f73f7..c1a6fddb6b 100644 --- a/assets/src/js/frontend/give-ajax.js +++ b/assets/src/js/frontend/give-ajax.js @@ -115,7 +115,6 @@ jQuery( document ).ready( function( $ ) { //Switch the gateway on gateway selection field change $( 'select#give-gateway, input.give-gateway' ).on( 'change', function( e ) { - e.preventDefault(); //Which payment gateway to load? diff --git a/assets/src/js/frontend/give-donations.js b/assets/src/js/frontend/give-donations.js index beb62b1982..ac853a28d1 100644 --- a/assets/src/js/frontend/give-donations.js +++ b/assets/src/js/frontend/give-donations.js @@ -732,6 +732,7 @@ Give.form = { var $form_wrapper = jQuery( 'body' ).find( '#give-form-' + form_id + '-wrap' ), $form = $form_wrapper.find( 'form.give-form' ), display_modal = $form_wrapper.hasClass( 'give-display-modal' ), + display_button = $form_wrapper.hasClass( 'give-display-button' ), display_reveal = $form_wrapper.hasClass( 'give-display-reveal' ); // Update payment mode radio so it's correctly checked. @@ -751,8 +752,28 @@ Give.form = { this.autoSetMultiLevel( level_field ); } + let give_form_wrap = jQuery( '.give-form-wrap' ), + is_form_grid = give_form_wrap.hasClass( 'give-form-grid-wrap' ); + + if ( is_form_grid && 1 === jQuery( '#give-modal-form-' + form_id ).length ) { + jQuery.magnificPopup.open( { + items: { + type: 'inline', + src: '#give-modal-form-' + form_id, + }, + fixedContentPos: true, + fixedBgPos: true, + closeBtnInside: true, + midClick: true, + removalDelay: 300, + mainClass: 'modal-fade-slide', + }); + + return; + } + // This form is modal display so show the modal. - if ( display_modal ) { + if ( display_modal || display_button ) { give_open_form_modal( $form_wrapper, $form ); } else if ( display_reveal ) { // This is a reveal form, show it. diff --git a/assets/src/js/frontend/give-misc.js b/assets/src/js/frontend/give-misc.js index 8b3ce37883..336771d5e2 100644 --- a/assets/src/js/frontend/give-misc.js +++ b/assets/src/js/frontend/give-misc.js @@ -18,7 +18,7 @@ jQuery( function( $ ) { closeBtnInside: true, midClick: true, removalDelay: 300, - mainClass: 'my-mfp-slide-bottom', + mainClass: 'modal-fade-slide', }); // Disable button if it have give-disabled class init. diff --git a/includes/forms/template.php b/includes/forms/template.php index 89df7ed87e..f453e144c4 100644 --- a/includes/forms/template.php +++ b/includes/forms/template.php @@ -2040,3 +2040,70 @@ function add_give_goal_progress_bar_class( $class_bar ) { return $class_bar; } + +/** + * Add a class to the form wrap on the grid page. + * + * @param array $class Array of form wrapper classes. + * @param int $id ID of the form. + * @param array $args Additional args. + * + * @since 2.1 + * + * @return array + */ +function add_class_for_form_grid( $class, $id, $args ) { + $class[] = 'give-form-grid-wrap'; + + return $class; +} + +/** + * Add hidden field to Form Grid page + * + * @param int $form_id The form ID. + * @param array $args An array of form arguments. + * @param Give_Donate_Form $form Form object. + * + * @since 2.1 + */ +function give_is_form_grid_page_hidden_field( $id, $args, $form ) { + echo ''; +} + +/** + * Redirect to the same paginated URL on the Form Grid page + * and adds query parameters to open the popup again after + * redirection. + * + * @param string $redirect URL for redirection. + * @param array $args Array of additional args. + * + * @since 2.1 + * @return string + */ +function give_redirect_and_popup_form( $redirect, $args ) { + + // Check the page has Form Grid. + $is_form_grid = isset( $_POST['is-form-grid'] ) ? give_clean( $_POST['is-form-grid'] ) : ''; + + if ( 'true' === $is_form_grid ) { + + $payment_mode = give_clean( $_POST['payment-mode'] ); + $form_id = $args['form-id']; + + // Get the URL without Query parameters. + $redirect = strtok( $redirect, '?' ); + + // Add query parameters 'form-id' and 'payment-mode'. + $redirect = add_query_arg( array( + 'form-id' => $form_id, + 'payment-mode' => $payment_mode, + ), $redirect ); + } + + // Return the modified URL. + return $redirect; +} + +add_filter( 'give_send_back_to_checkout', 'give_redirect_and_popup_form', 10, 2 ); \ No newline at end of file diff --git a/includes/process-donation.php b/includes/process-donation.php index 15641958ff..6130354553 100644 --- a/includes/process-donation.php +++ b/includes/process-donation.php @@ -25,6 +25,7 @@ * @return mixed */ function give_process_donation_form() { + $is_ajax = isset( $_POST['give_ajax'] ); // Verify donation form nonce. @@ -1325,4 +1326,4 @@ function give_donation_form_validate_name_fields() { if ( $is_first_name || $is_last_name ) { give_set_error( 'invalid_name', esc_html__( ' cannot contain email address.', 'give' ) ); } -} \ No newline at end of file +} diff --git a/includes/shortcodes.php b/includes/shortcodes.php index 12e7796f34..a8958aa15a 100644 --- a/includes/shortcodes.php +++ b/includes/shortcodes.php @@ -758,7 +758,7 @@ function give_form_grid_shortcode( $atts ) { 'image_size' => 'medium', 'image_height' => 'auto', 'excerpt_length' => 16, - 'display_style' => 'redirect', + 'display_style' => 'modal_reveal', 'status' => '' // open or closed ), $atts ); @@ -838,6 +838,8 @@ function give_form_grid_shortcode( $atts ) { add_filter( 'add_give_goal_progress_class', 'add_give_goal_progress_class', 10, 1 ); add_filter( 'add_give_goal_progress_bar_class', 'add_give_goal_progress_bar_class', 10, 1 ); + add_filter( 'give_form_wrap_classes', 'add_class_for_form_grid', 10, 3 ); + add_action( 'give_donation_form_top', 'give_is_form_grid_page_hidden_field', 10, 3 ); echo '
'; echo '
'; diff --git a/templates/shortcode-form-grid.php b/templates/shortcode-form-grid.php index 23fbd09031..8875fa6fca 100644 --- a/templates/shortcode-form-grid.php +++ b/templates/shortcode-form-grid.php @@ -25,7 +25,7 @@ esc_attr( $form_id ), esc_attr( get_the_permalink() ) ); - } elseif ( 'modal' === $atts['display_style'] ) { + } elseif ( 'modal_reveal' === $atts['display_style'] ) { printf( '', esc_attr( $form_id ) @@ -110,9 +110,9 @@ ', + '
', $form_id ); give_get_donation_form( $form_id );