frontend-assets.php
| 1 | <?php |
| 2 | /** |
| 3 | * SureForms Public Class. |
| 4 | * |
| 5 | * Class file for public functions. |
| 6 | * |
| 7 | * @package SureForms |
| 8 | */ |
| 9 | |
| 10 | namespace SRFM\Inc; |
| 11 | |
| 12 | use SRFM\Inc\Traits\Get_Instance; |
| 13 | |
| 14 | if ( ! defined( 'ABSPATH' ) ) { |
| 15 | exit; // Exit if accessed directly. |
| 16 | } |
| 17 | |
| 18 | /** |
| 19 | * Public Class |
| 20 | * |
| 21 | * @since 0.0.1 |
| 22 | */ |
| 23 | class Frontend_Assets { |
| 24 | use Get_Instance; |
| 25 | |
| 26 | /** |
| 27 | * JS Assets. |
| 28 | * |
| 29 | * @since 0.0.11 |
| 30 | * @var array<string> |
| 31 | */ |
| 32 | public static $js_assets = [ |
| 33 | 'form-submit' => 'formSubmit', |
| 34 | 'frontend' => 'frontend', |
| 35 | ]; |
| 36 | |
| 37 | /** |
| 38 | * CSS Assets. |
| 39 | * |
| 40 | * @since 0.0.11 |
| 41 | * @var array<string> |
| 42 | */ |
| 43 | public static $css_assets = [ |
| 44 | 'frontend-default' => 'blocks/default/frontend', |
| 45 | 'common' => 'common', |
| 46 | 'form' => 'frontend/form', |
| 47 | 'single' => 'single', |
| 48 | ]; |
| 49 | |
| 50 | /** |
| 51 | * External CSS Assets. |
| 52 | * |
| 53 | * @since 0.0.11 |
| 54 | * @var array<string> |
| 55 | */ |
| 56 | public static $css_external_assets = [ |
| 57 | 'tom-select' => 'tom-select', |
| 58 | 'intl-tel-input' => 'intl/intlTelInput.min', |
| 59 | ]; |
| 60 | |
| 61 | /** |
| 62 | * Constructor |
| 63 | * |
| 64 | * @since 0.0.1 |
| 65 | */ |
| 66 | public function __construct() { |
| 67 | add_filter( 'template_include', [ $this, 'page_template' ], PHP_INT_MAX ); |
| 68 | add_action( 'wp_enqueue_scripts', [ $this, 'register_scripts' ] ); |
| 69 | add_filter( 'render_block', [ $this, 'generate_render_script' ], 10, 2 ); |
| 70 | } |
| 71 | |
| 72 | /** |
| 73 | * Enqueue Script. |
| 74 | * |
| 75 | * @return void |
| 76 | * @since 0.0.1 |
| 77 | */ |
| 78 | public function register_scripts() { |
| 79 | $file_prefix = defined( 'SRFM_DEBUG' ) && SRFM_DEBUG ? '' : '.min'; |
| 80 | $dir_name = defined( 'SRFM_DEBUG' ) && SRFM_DEBUG ? 'unminified' : 'minified'; |
| 81 | $js_uri = SRFM_URL . 'assets/js/' . $dir_name . '/'; |
| 82 | $css_uri = SRFM_URL . 'assets/css/' . $dir_name . '/'; |
| 83 | $css_vendor = SRFM_URL . 'assets/css/minified/deps/'; |
| 84 | $is_rtl = is_rtl(); |
| 85 | $rtl = $is_rtl ? '-rtl' : ''; |
| 86 | |
| 87 | $security_setting_options = get_option( 'srfm_security_settings_options' ); |
| 88 | $is_set_v2_site_key = false; |
| 89 | if ( is_array( $security_setting_options ) && isset( $security_setting_options['srfm_v2_invisible_site_key'] ) && ! empty( $security_setting_options['srfm_v2_invisible_site_key'] ) ) { |
| 90 | $is_set_v2_site_key = true; |
| 91 | } |
| 92 | |
| 93 | // Styles based on meta style. |
| 94 | foreach ( self::$css_assets as $handle => $path ) { |
| 95 | wp_register_style( SRFM_SLUG . '-' . $handle, $css_uri . $path . $file_prefix . $rtl . '.css', [], SRFM_VER ); |
| 96 | } |
| 97 | |
| 98 | // External styles. |
| 99 | foreach ( self::$css_external_assets as $handle => $path ) { |
| 100 | wp_register_style( SRFM_SLUG . '-' . $handle, $css_vendor . $path . '.css', [], SRFM_VER ); |
| 101 | } |
| 102 | |
| 103 | // Scripts. |
| 104 | foreach ( self::$js_assets as $handle => $name ) { |
| 105 | if ( 'form-submit' === $handle ) { |
| 106 | wp_register_script( |
| 107 | SRFM_SLUG . '-' . $handle, |
| 108 | SRFM_URL . 'assets/build/' . $name . '.js', |
| 109 | [ 'wp-api-fetch' ], |
| 110 | SRFM_VER, |
| 111 | true |
| 112 | ); |
| 113 | } else { |
| 114 | wp_register_script( |
| 115 | SRFM_SLUG . '-' . $handle, |
| 116 | $js_uri . $name . $file_prefix . '.js', |
| 117 | [], |
| 118 | SRFM_VER, |
| 119 | true |
| 120 | ); |
| 121 | } |
| 122 | } |
| 123 | |
| 124 | wp_localize_script( |
| 125 | SRFM_SLUG . '-form-submit', |
| 126 | SRFM_SLUG . '_submit', |
| 127 | [ |
| 128 | 'site_url' => site_url(), |
| 129 | 'nonce' => wp_create_nonce( 'wp_rest' ), |
| 130 | 'messages' => Translatable::get_frontend_validation_messages(), |
| 131 | 'is_rtl' => $is_rtl, |
| 132 | ] |
| 133 | ); |
| 134 | |
| 135 | $current_post = get_post(); |
| 136 | |
| 137 | // Let's conditionally load form assets if current requested page has our forms. |
| 138 | if ( $current_post instanceof \WP_Post ) { |
| 139 | // Handles condition for Instant Form, Block Embedded, and Shortcode Embedded forms. |
| 140 | $load_assets = ( SRFM_FORMS_POST_TYPE === $current_post->post_type || ( false !== strpos( $current_post->post_content, 'wp:srfm/form' ) || has_shortcode( $current_post->post_content, 'sureforms' ) ) ); |
| 141 | |
| 142 | if ( $load_assets ) { |
| 143 | // Load needed styles in head tag if current requested page has SureForms form. |
| 144 | self::enqueue_scripts_and_styles(); |
| 145 | } |
| 146 | } |
| 147 | } |
| 148 | |
| 149 | /** |
| 150 | * Enqueue scripts and styles. |
| 151 | * |
| 152 | * @return void |
| 153 | * @since 0.0.11 |
| 154 | */ |
| 155 | public static function enqueue_scripts_and_styles() { |
| 156 | // Load the styles. |
| 157 | foreach ( self::$css_assets as $handle => $path ) { |
| 158 | |
| 159 | // Skip single form styles if not on single form page. |
| 160 | if ( 'single' === $handle && ! is_singular( SRFM_FORMS_POST_TYPE ) ) { |
| 161 | continue; |
| 162 | } |
| 163 | |
| 164 | wp_enqueue_style( SRFM_SLUG . '-' . $handle ); |
| 165 | } |
| 166 | |
| 167 | // Load the external styles. Like Phone and Tom Select. |
| 168 | foreach ( self::$css_external_assets as $handle => $path ) { |
| 169 | wp_enqueue_style( SRFM_SLUG . '-' . $handle ); |
| 170 | } |
| 171 | |
| 172 | // Load the scripts. |
| 173 | foreach ( self::$js_assets as $handle => $path ) { |
| 174 | wp_enqueue_script( SRFM_SLUG . '-' . $handle ); |
| 175 | } |
| 176 | } |
| 177 | |
| 178 | /** |
| 179 | * Enqueue block scripts |
| 180 | * |
| 181 | * @param string $block_type block name. |
| 182 | * @since 0.0.1 |
| 183 | * @return void |
| 184 | */ |
| 185 | public function enqueue_srfm_script( $block_type ) { |
| 186 | $block_name = str_replace( 'srfm/', '', $block_type ); |
| 187 | // associative array to keep the count of block that requires scripts to work. |
| 188 | $script_dep_blocks = [ |
| 189 | 'dropdown' => 0, |
| 190 | 'multi-choice' => 0, |
| 191 | 'number' => 0, |
| 192 | 'textarea' => 0, |
| 193 | 'url' => 0, |
| 194 | 'phone' => 0, |
| 195 | 'input' => 0, |
| 196 | ]; |
| 197 | |
| 198 | $file_prefix = defined( 'SRFM_DEBUG' ) && SRFM_DEBUG ? '' : '.min'; |
| 199 | $dir_name = defined( 'SRFM_DEBUG' ) && SRFM_DEBUG ? 'unminified' : 'minified'; |
| 200 | |
| 201 | // Check if block is in the array and check if block is already enqueued. |
| 202 | if ( |
| 203 | in_array( $block_name, array_keys( $script_dep_blocks ), true ) && |
| 204 | 0 === $script_dep_blocks[ $block_name ] |
| 205 | ) { |
| 206 | $script_dep_blocks[ $block_name ] += 1; |
| 207 | $js_uri = SRFM_URL . 'assets/js/' . $dir_name . '/blocks/'; |
| 208 | $js_vendor_uri = SRFM_URL . 'assets/js/minified/deps/'; |
| 209 | |
| 210 | if ( 'phone' === $block_name |
| 211 | ) { |
| 212 | wp_enqueue_script( SRFM_SLUG . "-{$block_name}-intl-input-deps", $js_vendor_uri . 'intl/intTelInputWithUtils.min.js', [], SRFM_VER, true ); |
| 213 | } |
| 214 | |
| 215 | if ( 'dropdown' === $block_name ) { |
| 216 | // if the dropdown / address-compact block is after any other block, then we need to dequeue the srfm-form-submit script and enqueue it again and load it with tom-select dependency. |
| 217 | wp_dequeue_script( SRFM_SLUG . '-form-submit' ); |
| 218 | wp_enqueue_script( SRFM_SLUG . '-dropdown', $js_uri . 'dropdown' . $file_prefix . '.js', [ 'wp-a11y' ], SRFM_VER, true ); |
| 219 | wp_enqueue_script( SRFM_SLUG . '-tom-select', $js_vendor_uri . 'tom-select.min.js', [], SRFM_VER, true ); |
| 220 | // frontend utils using dropdown dependency. |
| 221 | wp_enqueue_script( |
| 222 | SRFM_SLUG . '-form-submit', |
| 223 | SRFM_URL . 'assets/build/formSubmit.js', |
| 224 | [ |
| 225 | 'srfm-tom-select', |
| 226 | 'srfm-dropdown', |
| 227 | 'wp-api-fetch', |
| 228 | ], |
| 229 | SRFM_VER, |
| 230 | true |
| 231 | ); |
| 232 | } |
| 233 | |
| 234 | if ( 'dropdown' !== $block_name ) { |
| 235 | wp_enqueue_script( SRFM_SLUG . "-{$block_name}", $js_uri . $block_name . $file_prefix . '.js', [], SRFM_VER, true ); |
| 236 | } |
| 237 | |
| 238 | if ( 'input' === $block_name ) { |
| 239 | // Input mask JS. |
| 240 | wp_enqueue_script( SRFM_SLUG . '-inputmask', $js_vendor_uri . 'inputmask.min.js', [], SRFM_VER, true ); |
| 241 | } |
| 242 | } |
| 243 | } |
| 244 | |
| 245 | /** |
| 246 | * Render function. |
| 247 | * |
| 248 | * @param string $block_content Entire Block Content. |
| 249 | * @param array<string> $block Block Properties As An Array. |
| 250 | * @return string |
| 251 | */ |
| 252 | public function generate_render_script( $block_content, $block ) { |
| 253 | |
| 254 | if ( isset( $block['attrs']['isEditing'] ) ) { |
| 255 | // Only load block assets on the frontend. |
| 256 | return $block_content; |
| 257 | } |
| 258 | |
| 259 | if ( isset( $block['blockName'] ) ) { |
| 260 | self::enqueue_srfm_script( $block['blockName'] ); |
| 261 | } |
| 262 | return $block_content; |
| 263 | } |
| 264 | |
| 265 | /** |
| 266 | * Form Template filter. |
| 267 | * |
| 268 | * @param string $template Template. |
| 269 | * @return string Template. |
| 270 | * @since 0.0.1 |
| 271 | */ |
| 272 | public function page_template( $template ) { |
| 273 | |
| 274 | if ( ! is_singular( SRFM_FORMS_POST_TYPE ) ) { |
| 275 | // Bail if not SureForms post type. |
| 276 | return $template; |
| 277 | } |
| 278 | |
| 279 | $file_name = 'single-form.php'; |
| 280 | $template = locate_template( $file_name ); |
| 281 | |
| 282 | /** |
| 283 | * Hook: srfm_form_template filter. |
| 284 | * |
| 285 | * @since 0.0.1 |
| 286 | */ |
| 287 | return apply_filters( 'srfm_form_template', $template ? $template : SRFM_DIR . '/templates/' . $file_name ); |
| 288 | } |
| 289 | |
| 290 | } |
| 291 |