diff --git a/assets/css/frontend.css b/assets/css/frontend.css new file mode 100644 index 00000000..5c6f7809 --- /dev/null +++ b/assets/css/frontend.css @@ -0,0 +1,116 @@ +.mc_error_msg, .mc_error_msg a { + color: red; + margin-bottom: 1.0em; +} +.mc_success_msg { + color: green; + margin-bottom: 1.0em; +} +div.mc_interest{ + width:100%; +} +#mc_signup_form label.mc_interest_label { + display:inline; +} +.mc_signup_submit { + text-align:center; +} +ul.mc_list { + list-style-type: none; + margin-left: 0; + padding-left: 0; +} +ul.mc_list li { + font-size: 14px; +} +#ui-datepicker-div .ui-datepicker-year { + display: none; +} +#ui-datepicker-div.show .ui-datepicker-year { + display: inline; + padding-left: 3px +} +.widget_mailchimpsf_widget .widget-title { + line-height: 1.4em; + margin-bottom: 0.75em; +} +.mc_custom_border_hdr, +#mc_subheader { + line-height: 1.25em; + margin-bottom: 18px; +} +.mc_merge_var { + padding:0; + margin:0; + margin-bottom: 1.0em; +} +.mc_var_label, +.mc_interest_label { + display: block; + margin-bottom: 0.5em; +} +.mc_input { + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + padding: 10px 8px; + width: 100%; +} +.mc_input.mc_phone { + width: auto; +} +select.mc_select { + margin-top: 0.5em; + padding: 10px 8px; + width: 100%; +} +.mc_address_label { + margin-top: 1.0em; + margin-bottom: 0.5em; + display: block; +} +.mc_address_label ~ select { + padding: 10px 8px; + width: 100%; +} +.mc_list li { + list-style: none; + background: none !important; +} +.mc_interests_header { + font-weight:bold; + margin-top: 1.0em; + margin-bottom: 0.5em; +} +.mc_interest label, +.mc_interest input { + margin-bottom: 0.4em; +} +#mc_signup_submit { + margin-top: 1.5em; + padding: 10px 8px; + width: 80%; +} +#mc_unsub_link a { + font-size: 0.75em; +} +#mc_unsub_link { + margin-top: 1.0em; +} +.mc_header_address, +.mc_email_format { + display: block; + font-weight: bold; + margin-top: 1.0em; + margin-bottom: 0.5em; +} +.mc_email_options { + margin-top: 0.5em; +} +.mc_email_type { + padding-left: 4px; +} +#mc-indicates-required { + width:100%; + margin-top: 1em; +} diff --git a/assets/js/mailchimp.js b/assets/js/mailchimp.js index 78e61513..a27900ea 100644 --- a/assets/js/mailchimp.js +++ b/assets/js/mailchimp.js @@ -51,3 +51,46 @@ }); }); })(window.jQuery); + +/* Datepicker functions for the Mailchimp Widget */ +(function ($) { + if ($('.date-pick').length > 0) { + // Datepicker for the date-pick class + $('.date-pick').each(function () { + let format = $(this).data('format') || 'mm/dd/yyyy'; + format = format.replace(/yyyy/i, 'yy'); + $(this).datepicker({ + autoFocusNextInput: true, + constrainInput: false, + changeMonth: true, + changeYear: true, + // eslint-disable-next-line no-unused-vars + beforeShow(input, inst) { + $('#ui-datepicker-div').addClass('show'); + }, + dateFormat: format.toLowerCase(), + }); + }); + } + + if ($('.birthdate-pick').length > 0) { + const d = new Date(); + $('.birthdate-pick').each(function () { + let format = $(this).data('format') || 'mm/dd'; + format = format.replace(/yyyy/i, 'yy'); + $(this).datepicker({ + autoFocusNextInput: true, + constrainInput: false, + changeMonth: true, + changeYear: false, + minDate: new Date(d.getFullYear(), 1 - 1, 1), + maxDate: new Date(d.getFullYear(), 12 - 1, 31), + // eslint-disable-next-line no-unused-vars + beforeShow(input, inst) { + $('#ui-datepicker-div').removeClass('show'); + }, + dateFormat: format.toLowerCase(), + }); + }); + } +})(window.jQuery); diff --git a/includes/blocks/class-mailchimp-list-subscribe-form-blocks.php b/includes/blocks/class-mailchimp-list-subscribe-form-blocks.php index fbc13408..45496dca 100644 --- a/includes/blocks/class-mailchimp-list-subscribe-form-blocks.php +++ b/includes/blocks/class-mailchimp-list-subscribe-form-blocks.php @@ -82,10 +82,11 @@ public function register_blocks() { $data = 'window.mailchimp_sf_block_data = ' . wp_json_encode( $data ); wp_add_inline_script( 'mailchimp-mailchimp-editor-script', $data, 'before' ); - ob_start(); - require_once MCSF_DIR . '/views/css/frontend.php'; - $data = ob_get_clean(); - wp_add_inline_style( 'mailchimp-mailchimp-editor-style', $data ); + // Backwards compatibility. TODO: Remove this in a future version. + if ( get_option( 'mc_custom_style' ) === 'on' ) { + $custom_css = mailchimp_sf_custom_style_css(); + wp_add_inline_style( 'mailchimp-mailchimp-editor-style', $custom_css ); + } } /** diff --git a/includes/blocks/mailchimp/editor.css b/includes/blocks/mailchimp/editor.css index 5862848a..31229236 100644 --- a/includes/blocks/mailchimp/editor.css +++ b/includes/blocks/mailchimp/editor.css @@ -1,4 +1,22 @@ /* Leave this file - wp_add_inline_style relies on this file existing */ +div.mc_interest{ + width:100%; +} +#mc_signup_form label.mc_interest_label { + display:inline; +} +.mc_signup_submit { + text-align:center; +} +ul.mc_list { + list-style-type: none; + margin-left: 0; + padding-left: 0; +} +ul.mc_list li { + font-size: 14px; +} + #mc_message { display: none; } @@ -65,8 +83,7 @@ div#mc_subheader:has(h3 span:empty) { margin-bottom: 1em; } -.mc_var_label, -.mc_interest_label { +.mc_var_label { display: block; margin-bottom: 0.5em; } @@ -103,7 +120,6 @@ select.mc_select { margin-top: 1.0em; margin-bottom: 0.5em; } -.mc_interest label, .mc_interest input { margin-bottom: 0.4em; } diff --git a/includes/blocks/mailchimp/markup.php b/includes/blocks/mailchimp/markup.php index a7085dbd..843e5da1 100644 --- a/includes/blocks/mailchimp/markup.php +++ b/includes/blocks/mailchimp/markup.php @@ -80,94 +80,6 @@ function ( $single_list ) { - -
localize( - 'mailchimp_sf_main_js', - 'mailchimpSF', - array( - 'ajax_url' => trailingslashit( home_url() ), - ) - ); - - // Datepicker theme - wp_enqueue_style( 'flick', MCSF_URL . 'assets/css/flick/flick.css', array(), MCSF_VER ); - - // Datepicker JS - wp_enqueue_script( 'jquery-ui-datepicker' ); - } - - if ( get_option( 'mc_nuke_all_styles' ) !== '1' ) { - wp_enqueue_style( 'mailchimp_sf_main_css', home_url( '?mcsf_action=main_css&ver=' . MCSF_VER, 'relative' ), array(), MCSF_VER ); - global $wp_styles; - $wp_styles->add_data( 'mailchimp_sf_ie_css', 'conditional', 'IE' ); - } -} + wp_enqueue_script( 'mailchimp_sf_main_js', MCSF_URL . 'assets/js/mailchimp.js', array( 'jquery', 'jquery-form', 'jquery-ui-datepicker' ), MCSF_VER, true ); + // some javascript to get ajax version submitting to the proper location + global $wp_scripts; + $wp_scripts->localize( + 'mailchimp_sf_main_js', + 'mailchimpSF', + array( + 'ajax_url' => trailingslashit( home_url() ), + ) + ); -/** - * Loads jQuery Datepicker for the date-pick class - **/ -function mc_datepicker_load() { - require_once MCSF_DIR . '/views/datepicker.php'; -} + // Datepicker theme + wp_enqueue_style( 'flick', MCSF_URL . 'assets/css/flick/flick.css', array(), MCSF_VER ); -if ( ! is_admin() ) { - add_action( 'wp_head', 'mc_datepicker_load' ); -} + // CSS + if ( get_option( 'mc_nuke_all_styles' ) !== '1' ) { + wp_enqueue_style( 'mailchimp_sf_main_css', MCSF_URL . 'assets/css/frontend.css', array(), MCSF_VER ); -/** - * Handles requests that as light-weight a load as possible. - * typically, JS or CSS - * - * @return void - */ -function mailchimp_sf_early_request_handler() { - if ( isset( $_GET['mcsf_action'] ) ) { // phpcs:ignore WordPress.Security.NonceVerification.Recommended -- ignoring because this is only adding CSS - switch ( $_GET['mcsf_action'] ) { // phpcs:ignore WordPress.Security.NonceVerification.Recommended -- ignoring because this is only adding CSS - case 'main_css': - header( 'Content-type: text/css' ); - mailchimp_sf_main_css(); - exit; + // Backwards compatibility. TODO: Remove this in a future version. + if ( get_option( 'mc_custom_style' ) === 'on' ) { + $custom_css = mailchimp_sf_custom_style_css(); + wp_add_inline_style( 'mailchimp_sf_main_css', $custom_css ); } } } -add_action( 'init', 'mailchimp_sf_early_request_handler', 0 ); - /** - * Outputs the front-end CSS. This checks several options, so it - * was best to put it in a Request-handled script, as opposed to - * a static file. + * Custom styles CSS + * + * @return string */ -function mailchimp_sf_main_css() { - require_once MCSF_DIR . '/views/css/frontend.php'; +function mailchimp_sf_custom_style_css() { + ob_start(); + ?> + #mc_signup_form { + padding:5px; + border-width: px; + border-style: ; + border-color: #; + color: #; + background-color: #; + } + - -
diff --git a/views/css/frontend.php b/views/css/frontend.php deleted file mode 100644 index 4ab5d4ad..00000000 --- a/views/css/frontend.php +++ /dev/null @@ -1,74 +0,0 @@ - -.mc_error_msg, .mc_error_msg a { - color: red; - margin-bottom: 1.0em; -} -.mc_success_msg { - color: green; - margin-bottom: 1.0em; -} -.mc_merge_var{ - padding:0; - margin:0; -} - - #mc_signup_form { - padding:5px; - border-width: px; - border-style: ; - border-color: #; - color: #; - background-color: #; - } - - #mc_signup_container {} - #mc_signup_form {} - #mc_signup_form .mc_var_label {} - #mc_signup_form .mc_input {} - #mc-indicates-required { - width:100%; - } - .mc_interests_header { - font-weight:bold; - } - div.mc_interest{ - width:100%; - } - #mc_signup_form input.mc_interest {} - #mc_signup_form select {} - #mc_signup_form label.mc_interest_label { - display:inline; - } - .mc_signup_submit { - text-align:center; - } - ul.mc_list { - list-style-type: none; - margin-left: 0; - padding-left: 0; - } - ul.mc_list li { - font-size: 14px; - } - #ui-datepicker-div .ui-datepicker-year { - display: none; - } - #ui-datepicker-div.show .ui-datepicker-year { - display: inline; - padding-left: 3px - } diff --git a/views/datepicker.php b/views/datepicker.php deleted file mode 100644 index 8985e319..00000000 --- a/views/datepicker.php +++ /dev/null @@ -1,41 +0,0 @@ - -