| @@ -1,412 +1,407 @@ | ||
| 1 | -<?php | |
| 2 | -/** | |
| 3 | - * Merchant_Custom_CSS Class. | |
| 4 | - */ | |
| 5 | - | |
| 6 | -if ( ! defined( 'ABSPATH' ) ) { | |
| 7 | - exit; // Exit if accessed directly | |
| 8 | -} | |
| 9 | - | |
| 10 | -if ( ! class_exists( 'Merchant_Custom_CSS' ) ) { | |
| 11 | - class Merchant_Custom_CSS { | |
| 12 | - | |
| 13 | - /** | |
| 14 | - * The single class instance. | |
| 15 | - */ | |
| 16 | - private static $instance = null; | |
| 17 | - | |
| 18 | - /** | |
| 19 | - * Instance. | |
| 20 | - */ | |
| 21 | - public static function instance() { | |
| 22 | - if ( is_null( self::$instance ) ) { | |
| 23 | - self::$instance = new self(); | |
| 24 | - } | |
| 25 | - | |
| 26 | - return self::$instance; | |
| 27 | - } | |
| 28 | - | |
| 29 | - /** | |
| 30 | - * Constructor. | |
| 31 | - */ | |
| 32 | - public function __construct() { | |
| 33 | - add_action( 'wp_enqueue_scripts', array( $this, 'print_styles' ), 15 ); | |
| 34 | - add_action( 'admin_enqueue_scripts', array( $this, 'print_styles_admin' ), 15 ); | |
| 35 | - } | |
| 36 | - | |
| 37 | - /** | |
| 38 | - * Print Styles. | |
| 39 | - */ | |
| 40 | - public function print_styles() { | |
| 41 | - $css = $this->output_css(); | |
| 42 | - | |
| 43 | - wp_add_inline_style( 'merchant', $css ); | |
| 44 | - } | |
| 45 | - | |
| 46 | - /** | |
| 47 | - * Print Styles In Admin | |
| 48 | - */ | |
| 49 | - public function print_styles_admin() { | |
| 50 | - $page = ( ! empty( $_GET['page'] ) ) ? sanitize_text_field( wp_unslash( $_GET['page'] ) ) : ''; // phpcs:ignore WordPress.Security.NonceVerification.Recommended | |
| 51 | - $module = ( ! empty( $_GET['module'] ) ) ? sanitize_text_field( wp_unslash( $_GET['module'] ) ) : ''; // phpcs:ignore WordPress.Security.NonceVerification.Recommended | |
| 52 | - | |
| 53 | - if ( ! empty( $page ) && false !== strpos( $page, 'merchant' ) && ! empty( $module ) ) { | |
| 54 | - $css = $this->output_css(); | |
| 55 | - | |
| 56 | - wp_add_inline_style( 'merchant-admin', $css ); | |
| 57 | - } | |
| 58 | - } | |
| 59 | - | |
| 60 | - /** | |
| 61 | - * Output CSS. | |
| 62 | - */ | |
| 63 | - public function output_css() { | |
| 64 | - $css = ''; | |
| 65 | - | |
| 66 | - // Scroll To Top Button | |
| 67 | - if ( Merchant_Modules::is_module_active( 'scroll-to-top-button' ) ) { | |
| 68 | - $css .= $this->get_variable_css( 'scroll-to-top-button', 'icon-color', '#ffffff', '.merchant-scroll-to-top-button', '--merchant-icon-color' ); | |
| 69 | - $css .= $this->get_variable_css( 'scroll-to-top-button', 'icon-hover-color', '#ffffff', '.merchant-scroll-to-top-button', '--merchant-icon-hover-color' ); | |
| 70 | - $css .= $this->get_variable_css( 'scroll-to-top-button', 'text-color', '#ffffff', '.merchant-scroll-to-top-button', '--merchant-text-color' ); | |
| 71 | - $css .= $this->get_variable_css( 'scroll-to-top-button', 'text-hover-color', '#ffffff', '.merchant-scroll-to-top-button', '--merchant-text-hover-color' ); | |
| 72 | - $css .= $this->get_variable_css( 'scroll-to-top-button', 'border-color', '#212121', '.merchant-scroll-to-top-button', '--merchant-border-color' ); | |
| 73 | - $css .= $this->get_variable_css( 'scroll-to-top-button', 'border-hover-color', '#757575', '.merchant-scroll-to-top-button', '--merchant-border-hover-color' ); | |
| 74 | - $css .= $this->get_variable_css( 'scroll-to-top-button', 'background-color', '#212121', '.merchant-scroll-to-top-button', '--merchant-background-color' ); | |
| 75 | - $css .= $this->get_variable_css( 'scroll-to-top-button', 'background-hover-color', '#757575', '.merchant-scroll-to-top-button', '--merchant-background-hover-color' ); | |
| 76 | - $css .= $this->get_variable_css( 'scroll-to-top-button', 'border-radius', 30, '.merchant-scroll-to-top-button', '--merchant-border-radius', 'px' ); | |
| 77 | - $css .= $this->get_variable_css( 'scroll-to-top-button', 'padding', 15, '.merchant-scroll-to-top-button', '--merchant-padding', 'px' ); | |
| 78 | - $css .= $this->get_variable_css( 'scroll-to-top-button', 'text-size', 18, '.merchant-scroll-to-top-button', '--merchant-text-size', 'px' ); | |
| 79 | - $css .= $this->get_variable_css( 'scroll-to-top-button', 'icon-size', 18, '.merchant-scroll-to-top-button', '--merchant-icon-size', 'px' ); | |
| 80 | - $css .= $this->get_variable_css( 'scroll-to-top-button', 'border-size', 2, '.merchant-scroll-to-top-button', '--merchant-border-size', 'px' ); | |
| 81 | - $css .= $this->get_variable_css( 'scroll-to-top-button', 'side-offset', 30, '.merchant-scroll-to-top-button', '--merchant-side-offset', 'px' ); | |
| 82 | - $css .= $this->get_variable_css( 'scroll-to-top-button', 'bottom-offset', 30, '.merchant-scroll-to-top-button', '--merchant-bottom-offset', 'px' ); | |
| 83 | - | |
| 84 | - // Mobile Styles | |
| 85 | - $css .= '@media (max-width: 768px) {'; | |
| 86 | - $css .= $this->get_variable_css( 'scroll-to-top-button', 'side-offset-mobile', '30', '.merchant-scroll-to-top-button', '--merchant-side-offset', 'px' ); | |
| 87 | - $css .= $this->get_variable_css( 'scroll-to-top-button', 'bottom-offset-mobile', '30', '.merchant-scroll-to-top-button', '--merchant-bottom-offset', 'px' ); | |
| 88 | - $css .= '}'; | |
| 89 | - } | |
| 90 | - | |
| 91 | - // Cookie Banner | |
| 92 | - if ( Merchant_Modules::is_module_active( 'cookie-banner' ) ) { | |
| 93 | - $css .= $this->get_variable_css( 'cookie-banner', 'modal_width', 750, '.merchant-cookie-banner', '--merchant-modal-width', 'px' ); | |
| 94 | - $css .= $this->get_variable_css( 'cookie-banner', 'modal_height', 50, '.merchant-cookie-banner', '--merchant-modal-height', 'px' ); | |
| 95 | - $css .= $this->get_variable_css( 'cookie-banner', 'background_color', '#000000', '.merchant-cookie-banner', '--merchant-background' ); | |
| 96 | - $css .= $this->get_variable_css( 'cookie-banner', 'text_color', '#ffffff', '.merchant-cookie-banner', '--merchant-text-color' ); | |
| 97 | - $css .= $this->get_variable_css( 'cookie-banner', 'link_color', '#aeaeae', '.merchant-cookie-banner', '--merchant-link-color' ); | |
| 98 | - $css .= $this->get_variable_css( 'cookie-banner', 'button_background_color', '#dddddd', '.merchant-cookie-banner', '--merchant-button-background' ); | |
| 99 | - $css .= $this->get_variable_css( 'cookie-banner', 'button_text_color', '#222222', '.merchant-cookie-banner', '--merchant-button-text-color' ); | |
| 100 | - } | |
| 101 | - | |
| 102 | - // Real Time Search | |
| 103 | - if ( Merchant_Modules::is_module_active( 'real-time-search' ) ) { | |
| 104 | - $css .= $this->get_variable_css( 'real-time-search', 'results_box_width', 500, '.merchant-ajax-search-wrapper', '--merchant-results-box-width', 'px' ); | |
| 105 | - } | |
| 106 | - | |
| 107 | - // Code Snippets | |
| 108 | - if ( Merchant_Modules::is_module_active( 'code-snippets' ) ) { | |
| 109 | - $css .= Merchant_Option::get( 'code-snippets', 'custom_css', '' ); | |
| 110 | - } | |
| 111 | - | |
| 112 | - // Global Settings. | |
| 113 | - if ( ! is_admin() ) { | |
| 114 | - $css .= Merchant_Option::get( 'global-settings', 'custom_css', '' ); | |
| 115 | - } | |
| 116 | - | |
| 117 | - /** | |
| 118 | - * Hook: merchant_custom_css | |
| 119 | - * | |
| 120 | - * @since 1.0 | |
| 121 | - */ | |
| 122 | - $css .= apply_filters( 'merchant_custom_css', '', $this ); | |
| 123 | - | |
| 124 | - $css = $this->minify( $css ); | |
| 125 | - | |
| 126 | - return $css; | |
| 127 | - } | |
| 128 | - | |
| 129 | - /** | |
| 130 | - * Get variable CSS | |
| 131 | - * | |
| 132 | - * @param string $module Module name. | |
| 133 | - * @param string $setting Setting name. | |
| 134 | - * @param string $default Default value. | |
| 135 | - * @param string $selector CSS selector. | |
| 136 | - * @param string $variable CSS variable. | |
| 137 | - * @param string $unit CSS unit. | |
| 138 | - * @param string $condition CSS condition. | |
| 139 | - * | |
| 140 | - */ | |
| 141 | - public static function get_variable_css( $module, $setting = '', $default = null, $selector = '', $variable = '', $unit = '', $condition = '' ) { | |
| 142 | - $value = self::get_option( $module, $setting, $default ); | |
| 143 | - | |
| 144 | - if ( '' === $value || null === $value ) { | |
| 145 | - return ''; | |
| 146 | - } | |
| 147 | - | |
| 148 | - if ( ! empty( $condition ) ) { | |
| 149 | - switch ( $condition ) { | |
| 150 | - case 'pass_empty': | |
| 151 | - if ( empty( $value ) ) { | |
| 152 | - return; | |
| 153 | - } | |
| 154 | - | |
| 155 | - break; | |
| 156 | - } | |
| 157 | - } | |
| 158 | - | |
| 159 | - // Remove everything after ":"in case a selector like a:hover is used. | |
| 160 | - if ( ( $position = strpos( $selector, ':' ) ) !== false ) { | |
| 161 | - $selector = substr( $selector, 0, $position ); | |
| 162 | - } | |
| 163 | - | |
| 164 | - if ( class_exists( 'Merchant_Admin_Preview' ) ) { | |
| 165 | - Merchant_Admin_Preview::instance()->set_css( $setting, $selector, $variable, $unit ); | |
| 166 | - } | |
| 167 | - | |
| 168 | - return $selector . '{ ' . esc_attr( $variable ) . ':' . esc_attr( $value ) . esc_attr( $unit ) . '; }' . "\n"; | |
| 169 | - } | |
| 170 | - | |
| 171 | - /** | |
| 172 | - * CSS (can pass css prop and unit) | |
| 173 | - * | |
| 174 | - * @param string $module Module name. | |
| 175 | - * @param string $setting Setting name. | |
| 176 | - * @param string $default Default value. | |
| 177 | - * @param string $selector CSS selector. | |
| 178 | - * @param string $css_prop CSS prop. | |
| 179 | - * @param string $unit Unit value. | |
| 180 | - * @param bool $important Important rule. | |
| 181 | - * @param bool|string $variable Whether to auto-create a variable | |
| 182 | - * | |
| 183 | - * @return string | |
| 184 | - */ | |
| 185 | - public static function get_css( $module, $setting = '', $default = '', $selector = '', $css_prop = '', $unit = 'px', $important = false, $variable = false ) { | |
| 186 | - $css_output = ''; | |
| 187 | - | |
| 188 | - if ( $variable === false ) { | |
| 189 | - $css_value = self::get_option( $module, $setting, $default ) . ( isset( $css['unit'] ) ? $css['unit'] : '' ); | |
| 190 | - } else { | |
| 191 | - $css_variable = is_string( $variable ) ? $variable : '--merchant-' . str_replace( '_', '-', sanitize_title( $setting ) ); | |
| 192 | - $css_value = "var({$css_variable})"; | |
| 193 | - $css_output .= static::get_variable_css( $module, $setting, $default, $selector, $css_variable, $unit ); | |
| 194 | - } | |
| 195 | - | |
| 196 | - if( is_array( $css_prop ) ) { | |
| 197 | - foreach( $css_prop as $css ) { | |
| 198 | - $css_output .= $selector . '{ '. $css['prop'] .':' . esc_attr( $css_value ) . ( $important ? '!important' : '' ) . ';}' . "\n"; | |
| 199 | - } | |
| 200 | - } else { | |
| 201 | - $css_output .= $selector . '{ '. $css_prop .':' . esc_attr( $css_value ) . ( $important ? '!important' : '' ) . ';}' . "\n"; | |
| 202 | - } | |
| 203 | - | |
| 204 | - return $css_output; | |
| 205 | - } | |
| 206 | - | |
| 207 | - /** | |
| 208 | - * Get color CSS | |
| 209 | - * | |
| 210 | - * @param string $module Module name. | |
| 211 | - * @param string $setting Setting name. | |
| 212 | - * @param string $default Default value. | |
| 213 | - * @param string $selector CSS selector. | |
| 214 | - * @param bool $important Important rule. | |
| 215 | - * @param bool|string $variable Whether to auto-create a variable | |
| 216 | - * | |
| 217 | - * @return string | |
| 218 | - */ | |
| 219 | - public static function get_color_css( $module, $setting = '', $default = '', $selector = '', $important = false, $variable = false ) { | |
| 220 | - return self::get_css( $module, $setting, $default, $selector, 'color', '', $important, $variable ); | |
| 221 | - } | |
| 222 | - | |
| 223 | - /** | |
| 224 | - * Get border color CSS | |
| 225 | - * | |
| 226 | - * @param string $module Module name. | |
| 227 | - * @param string $setting Setting name. | |
| 228 | - * @param string $default Default value. | |
| 229 | - * @param string $selector CSS selector. | |
| 230 | - * @param bool $important Important rule. | |
| 231 | - * @param bool|string $variable Whether to auto-create a variable | |
| 232 | - * | |
| 233 | - * @return string | |
| 234 | - */ | |
| 235 | - public static function get_border_color_css( $module, $setting = '', $default = '', $selector = '', $important = false, $variable = false ) { | |
| 236 | - return self::get_css( $module, $setting, $default, $selector, 'border-color', '', $important, $variable ); | |
| 237 | - } | |
| 238 | - | |
| 239 | - /** | |
| 240 | - * Get background color CSS | |
| 241 | - * | |
| 242 | - * @param string $module Module name. | |
| 243 | - * @param string $setting Setting name. | |
| 244 | - * @param string $default Default value. | |
| 245 | - * @param string $selector CSS selector. | |
| 246 | - * @param bool $important Important rule. | |
| 247 | - * @param bool|string $variable Whether to auto-create a variable | |
| 248 | - * | |
| 249 | - * @return string | |
| 250 | - */ | |
| 251 | - public static function get_background_color_css( $module, $setting = '', $default = '', $selector = '', $important = false, $variable = false ) { | |
| 252 | - return self::get_css( $module, $setting, $default, $selector, 'background-color', '', $important, $variable ); | |
| 253 | - } | |
| 254 | - | |
| 255 | - /** | |
| 256 | - * Responsive dimensions | |
| 257 | - * | |
| 258 | - * @param string $module Module name. | |
| 259 | - * @param string $setting Setting name. | |
| 260 | - * @param array $defaults Default values. | |
| 261 | - * @param string $selector CSS selector. | |
| 262 | - * @param string $css_prop CSS prop. | |
| 263 | - * @param bool $important Important rule. | |
| 264 | - * | |
| 265 | - * @return string | |
| 266 | - */ | |
| 267 | - public static function get_responsive_dimensions_css( $module, $setting = '', $defaults = array(), $selector = '', $css_prop = '', $important = false ) { | |
| 268 | - $devices = array( | |
| 269 | - 'desktop' => '@media (min-width: 992px)', | |
| 270 | - 'tablet' => '@media (min-width: 576px) and (max-width: 991px)', | |
| 271 | - 'mobile' => '@media (max-width: 575px)' | |
| 272 | - ); | |
| 273 | - | |
| 274 | - $css = ''; | |
| 275 | - | |
| 276 | - foreach ( $devices as $device => $media ) { | |
| 277 | - $value = self::get_option( $module, $setting, $defaults )[ $device ]; | |
| 278 | - | |
| 279 | - $value['top'] = ! isset( $value['top'] ) || $value['top'] === '' ? 0 : $value['top']; | |
| 280 | - $value['right'] = ! isset( $value['right'] ) || $value['right'] === '' ? 0 : $value['right']; | |
| 281 | - $value['bottom'] = ! isset( $value['bottom'] ) || $value['bottom'] === '' ? 0 : $value['bottom']; | |
| 282 | - $value['left'] = ! isset( $value['left'] ) || $value['left'] === '' ? 0 : $value['left']; | |
| 283 | - | |
| 284 | - $css_prop_value = "{$value['top']}{$value['unit']} {$value['right']}{$value['unit']} {$value['bottom']}{$value['unit']} {$value['left']}{$value['unit']}"; | |
| 285 | - $css .= $media . ' { ' . $selector . ' { ' . $css_prop . ':' . esc_attr( $css_prop_value ) . ( $important ? '!important' : '' ) . '; } }' . "\n"; | |
| 286 | - } | |
| 287 | - | |
| 288 | - return $css; | |
| 289 | - } | |
| 290 | - | |
| 291 | - /** | |
| 292 | - * Dimensions | |
| 293 | - * | |
| 294 | - * @param string $module Module name. | |
| 295 | - * @param string $setting Setting name. | |
| 296 | - * @param string $default Default value. | |
| 297 | - * @param string $selector CSS selector. | |
| 298 | - * @param string $css_prop CSS prop. | |
| 299 | - * @param bool $important Important rule. | |
| 300 | - * | |
| 301 | - * @return string | |
| 302 | - */ | |
| 303 | - public static function get_dimensions_css( $module, $setting = '', $default = '', $selector = '', $css_prop = '', $important = false ) { | |
| 304 | - $value = self::get_option( $module, $setting, $default ); | |
| 305 | - | |
| 306 | - $value['top'] = ! isset( $value['top'] ) || $value['top'] === '' ? 0 : $value['top']; | |
| 307 | - $value['right'] = ! isset( $value['right'] ) || $value['right'] === '' ? 0 : $value['right']; | |
| 308 | - $value['bottom'] = ! isset( $value['bottom'] ) || $value['bottom'] === '' ? 0 : $value['bottom']; | |
| 309 | - $value['left'] = ! isset( $value['left'] ) || $value['left'] === '' ? 0 : $value['left']; | |
| 310 | - | |
| 311 | - $css_prop_value = "{$value['top']}{$value['unit']} {$value['right']}{$value['unit']} {$value['bottom']}{$value['unit']} {$value['left']}{$value['unit']}"; | |
| 312 | - | |
| 313 | - if ( is_array( $css_prop ) ) { | |
| 314 | - $css_output = ''; | |
| 315 | - | |
| 316 | - foreach ( $css_prop as $css ) { | |
| 317 | - $css_output .= $selector . '{ ' . $css['prop'] . ':' . esc_attr( $css_prop_value ) . ( $important ? '!important' : '' ) . ';}' . "\n"; | |
| 318 | - } | |
| 319 | - | |
| 320 | - return $css_output; | |
| 321 | - } else { | |
| 322 | - return $selector . '{ ' . $css_prop . ':' . esc_attr( $css_prop_value ) . ( $important ? '!important' : '' ) . ';}' . "\n"; | |
| 323 | - } | |
| 324 | - } | |
| 325 | - | |
| 326 | - /** | |
| 327 | - * Responsive CSS (can pass css prop and unit) | |
| 328 | - * | |
| 329 | - * @param string $module Module name. | |
| 330 | - * @param string $setting Setting name. | |
| 331 | - * @param array $defaults Default values. | |
| 332 | - * @param string $selector CSS selector. | |
| 333 | - * @param string $css_prop CSS prop. | |
| 334 | - * @param string $unit Unit value. | |
| 335 | - * @param bool $important Important rule. | |
| 336 | - * | |
| 337 | - * @return string | |
| 338 | - */ | |
| 339 | - public static function get_responsive_css( $module, $setting = '', $defaults = array(), $selector = '', $css_prop = '', $unit = 'px', $important = false ) { | |
| 340 | - $devices = array( | |
| 341 | - 'desktop' => '@media (min-width: 992px)', | |
| 342 | - 'tablet' => '@media (min-width: 576px) and (max-width: 991px)', | |
| 343 | - 'mobile' => '@media (max-width: 575px)' | |
| 344 | - ); | |
| 345 | - | |
| 346 | - $css = ''; | |
| 347 | - | |
| 348 | - foreach ( $devices as $device => $media ) { | |
| 349 | - $default = ( isset( $defaults[ $device ] ) ) ? $defaults[ $device ] : $defaults; | |
| 350 | - | |
| 351 | - $setting = self::get_option( $module, $setting . '_' . $device, $default ); | |
| 352 | - | |
| 353 | - // Some properties need to be converted to be compatible with the respective css property | |
| 354 | - $type = ''; | |
| 355 | - if ( strpos( $setting, '_visibility' ) !== false && $css_prop === 'display' ) { | |
| 356 | - $type = 'display'; | |
| 357 | - } | |
| 358 | - | |
| 359 | - // Check and convert value to be compatible with 'display' css property | |
| 360 | - if ( $css_prop === 'display' ) { | |
| 361 | - if ( $setting === 'hidden' ) { | |
| 362 | - $setting = 'none'; | |
| 363 | - } else { | |
| 364 | - continue; | |
| 365 | - } | |
| 366 | - } | |
| 367 | - | |
| 368 | - $css .= $media . ' { ' . $selector . ' { ' . $css_prop . ':' . esc_attr( $setting ) . ( $unit ? $unit : '' ) . ( $important ? '!important' : '' ) . '; } }' . "\n"; | |
| 369 | - } | |
| 370 | - | |
| 371 | - return $css; | |
| 372 | - } | |
| 373 | - | |
| 374 | - /** | |
| 375 | - * Get option | |
| 376 | - * | |
| 377 | - * @param string $module Module name. | |
| 378 | - * @param string $setting Setting name. | |
| 379 | - * @param mixed $default Default value. | |
| 380 | - * | |
| 381 | - * @return mixed | |
| 382 | - */ | |
| 383 | - public static function get_option( $module, $setting, $default ) { | |
| 384 | - $options = get_option( 'merchant', array() ); | |
| 385 | - | |
| 386 | - $value = $default; | |
| 387 | - | |
| 388 | - if ( isset( $options[ $module ] ) && isset( $options[ $module ][ $setting ] ) ) { | |
| 389 | - $value = $options[ $module ][ $setting ]; | |
| 390 | - } | |
| 391 | - | |
| 392 | - return $value; | |
| 393 | - } | |
| 394 | - | |
| 395 | - /** | |
| 396 | - * CSS code minification. | |
| 397 | - */ | |
| 398 | - private function minify( $css ) { | |
| 399 | - $css = preg_replace( '/\s+/', ' ', $css ); | |
| 400 | - $css = preg_replace( '/\/\*[^\!](.*?)\*\//', '', $css ); | |
| 401 | - $css = preg_replace( '/(,|:|;|\{|}) /', '$1', $css ); | |
| 402 | - $css = preg_replace( '/ (,|;|\{|})/', '$1', $css ); | |
| 403 | - $css = preg_replace( '/(:| )0\.([0-9]+)(%|em|ex|px|in|cm|mm|pt|pc)/i', '${1}.${2}${3}', $css ); | |
| 404 | - $css = preg_replace( '/(:| )(\.?)0(%|em|ex|px|in|cm|mm|pt|pc)/i', '${1}0', $css ); | |
| 405 | - | |
| 406 | - return trim( $css ); | |
| 407 | - } | |
| 408 | - | |
| 409 | - } | |
| 410 | - | |
| 411 | - Merchant_Custom_CSS::instance(); | |
| 412 | -} | |
| 1 | +<?php | |
| 2 | +/** | |
| 3 | + * Merchant_Custom_CSS Class. | |
| 4 | + */ | |
| 5 | + | |
| 6 | +if ( ! defined( 'ABSPATH' ) ) { | |
| 7 | + exit; // Exit if accessed directly | |
| 8 | +} | |
| 9 | + | |
| 10 | +if ( ! class_exists( 'Merchant_Custom_CSS' ) ) { | |
| 11 | + class Merchant_Custom_CSS { | |
| 12 | + | |
| 13 | + /** | |
| 14 | + * The single class instance. | |
| 15 | + */ | |
| 16 | + private static $instance = null; | |
| 17 | + | |
| 18 | + /** | |
| 19 | + * Instance. | |
| 20 | + */ | |
| 21 | + public static function instance() { | |
| 22 | + if ( is_null( self::$instance ) ) { | |
| 23 | + self::$instance = new self(); | |
| 24 | + } | |
| 25 | + | |
| 26 | + return self::$instance; | |
| 27 | + } | |
| 28 | + | |
| 29 | + /** | |
| 30 | + * Constructor. | |
| 31 | + */ | |
| 32 | + public function __construct() { | |
| 33 | + add_action( 'wp_enqueue_scripts', array( $this, 'print_styles' ), 15 ); | |
| 34 | + add_action( 'admin_enqueue_scripts', array( $this, 'print_styles_admin' ), 15 ); | |
| 35 | + } | |
| 36 | + | |
| 37 | + /** | |
| 38 | + * Print Styles. | |
| 39 | + */ | |
| 40 | + public function print_styles() { | |
| 41 | + $css = $this->output_css(); | |
| 42 | + | |
| 43 | + wp_add_inline_style( 'merchant', $css ); | |
| 44 | + } | |
| 45 | + | |
| 46 | + /** | |
| 47 | + * Print Styles In Admin | |
| 48 | + */ | |
| 49 | + public function print_styles_admin() { | |
| 50 | + $page = ( ! empty( $_GET['page'] ) ) ? sanitize_text_field( wp_unslash( $_GET['page'] ) ) : ''; // phpcs:ignore WordPress.Security.NonceVerification.Recommended | |
| 51 | + $module = ( ! empty( $_GET['module'] ) ) ? sanitize_text_field( wp_unslash( $_GET['module'] ) ) : ''; // phpcs:ignore WordPress.Security.NonceVerification.Recommended | |
| 52 | + | |
| 53 | + if ( ! empty( $page ) && false !== strpos( $page, 'merchant' ) && ! empty( $module ) ) { | |
| 54 | + $css = $this->output_css(); | |
| 55 | + | |
| 56 | + wp_add_inline_style( 'merchant-admin', $css ); | |
| 57 | + } | |
| 58 | + } | |
| 59 | + | |
| 60 | + /** | |
| 61 | + * Output CSS. | |
| 62 | + */ | |
| 63 | + public function output_css() { | |
| 64 | + $css = ''; | |
| 65 | + | |
| 66 | + // Scroll To Top Button | |
| 67 | + if ( Merchant_Modules::is_module_active( 'scroll-to-top-button' ) ) { | |
| 68 | + $css .= $this->get_variable_css( 'scroll-to-top-button', 'icon-color', '#ffffff', '.merchant-scroll-to-top-button', '--merchant-icon-color' ); | |
| 69 | + $css .= $this->get_variable_css( 'scroll-to-top-button', 'icon-hover-color', '#ffffff', '.merchant-scroll-to-top-button', '--merchant-icon-hover-color' ); | |
| 70 | + $css .= $this->get_variable_css( 'scroll-to-top-button', 'text-color', '#ffffff', '.merchant-scroll-to-top-button', '--merchant-text-color' ); | |
| 71 | + $css .= $this->get_variable_css( 'scroll-to-top-button', 'text-hover-color', '#ffffff', '.merchant-scroll-to-top-button', '--merchant-text-hover-color' ); | |
| 72 | + $css .= $this->get_variable_css( 'scroll-to-top-button', 'border-color', '#212121', '.merchant-scroll-to-top-button', '--merchant-border-color' ); | |
| 73 | + $css .= $this->get_variable_css( 'scroll-to-top-button', 'border-hover-color', '#757575', '.merchant-scroll-to-top-button', '--merchant-border-hover-color' ); | |
| 74 | + $css .= $this->get_variable_css( 'scroll-to-top-button', 'background-color', '#212121', '.merchant-scroll-to-top-button', '--merchant-background-color' ); | |
| 75 | + $css .= $this->get_variable_css( 'scroll-to-top-button', 'background-hover-color', '#757575', '.merchant-scroll-to-top-button', '--merchant-background-hover-color' ); | |
| 76 | + $css .= $this->get_variable_css( 'scroll-to-top-button', 'border-radius', 30, '.merchant-scroll-to-top-button', '--merchant-border-radius', 'px' ); | |
| 77 | + $css .= $this->get_variable_css( 'scroll-to-top-button', 'padding', 15, '.merchant-scroll-to-top-button', '--merchant-padding', 'px' ); | |
| 78 | + $css .= $this->get_variable_css( 'scroll-to-top-button', 'text-size', 18, '.merchant-scroll-to-top-button', '--merchant-text-size', 'px' ); | |
| 79 | + $css .= $this->get_variable_css( 'scroll-to-top-button', 'icon-size', 18, '.merchant-scroll-to-top-button', '--merchant-icon-size', 'px' ); | |
| 80 | + $css .= $this->get_variable_css( 'scroll-to-top-button', 'border-size', 2, '.merchant-scroll-to-top-button', '--merchant-border-size', 'px' ); | |
| 81 | + $css .= $this->get_variable_css( 'scroll-to-top-button', 'side-offset', 30, '.merchant-scroll-to-top-button', '--merchant-side-offset', 'px' ); | |
| 82 | + $css .= $this->get_variable_css( 'scroll-to-top-button', 'bottom-offset', 30, '.merchant-scroll-to-top-button', '--merchant-bottom-offset', 'px' ); | |
| 83 | + | |
| 84 | + // Mobile Styles | |
| 85 | + $css .= '@media (max-width: 768px) {'; | |
| 86 | + $css .= $this->get_variable_css( 'scroll-to-top-button', 'side-offset-mobile', '30', '.merchant-scroll-to-top-button', '--merchant-side-offset', 'px' ); | |
| 87 | + $css .= $this->get_variable_css( 'scroll-to-top-button', 'bottom-offset-mobile', '30', '.merchant-scroll-to-top-button', '--merchant-bottom-offset', 'px' ); | |
| 88 | + $css .= '}'; | |
| 89 | + } | |
| 90 | + | |
| 91 | + // Cookie Banner | |
| 92 | + if ( Merchant_Modules::is_module_active( 'cookie-banner' ) ) { | |
| 93 | + $css .= $this->get_variable_css( 'cookie-banner', 'modal_width', 750, '.merchant-cookie-banner', '--merchant-modal-width', 'px' ); | |
| 94 | + $css .= $this->get_variable_css( 'cookie-banner', 'modal_height', 50, '.merchant-cookie-banner', '--merchant-modal-height', 'px' ); | |
| 95 | + $css .= $this->get_variable_css( 'cookie-banner', 'background_color', '#000000', '.merchant-cookie-banner', '--merchant-background' ); | |
| 96 | + $css .= $this->get_variable_css( 'cookie-banner', 'text_color', '#ffffff', '.merchant-cookie-banner', '--merchant-text-color' ); | |
| 97 | + $css .= $this->get_variable_css( 'cookie-banner', 'link_color', '#aeaeae', '.merchant-cookie-banner', '--merchant-link-color' ); | |
| 98 | + $css .= $this->get_variable_css( 'cookie-banner', 'button_background_color', '#dddddd', '.merchant-cookie-banner', '--merchant-button-background' ); | |
| 99 | + $css .= $this->get_variable_css( 'cookie-banner', 'button_text_color', '#222222', '.merchant-cookie-banner', '--merchant-button-text-color' ); | |
| 100 | + } | |
| 101 | + | |
| 102 | + // Real Time Search | |
| 103 | + if ( Merchant_Modules::is_module_active( 'real-time-search' ) ) { | |
| 104 | + $css .= $this->get_variable_css( 'real-time-search', 'results_box_width', 500, '.merchant-ajax-search-wrapper', '--merchant-results-box-width', 'px' ); | |
| 105 | + } | |
| 106 | + | |
| 107 | + // Global Settings. | |
| 108 | + if ( ! is_admin() ) { | |
| 109 | + $css .= Merchant_Option::get( 'global-settings', 'custom_css', '' ); | |
| 110 | + } | |
| 111 | + | |
| 112 | + /** | |
| 113 | + * Hook: merchant_custom_css | |
| 114 | + * | |
| 115 | + * @since 1.0 | |
| 116 | + */ | |
| 117 | + $css .= apply_filters( 'merchant_custom_css', '', $this ); | |
| 118 | + | |
| 119 | + $css = $this->minify( $css ); | |
| 120 | + | |
| 121 | + return $css; | |
| 122 | + } | |
| 123 | + | |
| 124 | + /** | |
| 125 | + * Get variable CSS | |
| 126 | + * | |
| 127 | + * @param string $module Module name. | |
| 128 | + * @param string $setting Setting name. | |
| 129 | + * @param string $default_val Default value. | |
| 130 | + * @param string $selector CSS selector. | |
| 131 | + * @param string $variable CSS variable. | |
| 132 | + * @param string $unit CSS unit. | |
| 133 | + * @param string $condition CSS condition. | |
| 134 | + * | |
| 135 | + */ | |
| 136 | + public static function get_variable_css( $module, $setting = '', $default_val = null, $selector = '', $variable = '', $unit = '', $condition = '' ) { | |
| 137 | + $value = self::get_option( $module, $setting, $default_val ); | |
| 138 | + | |
| 139 | + if ( '' === $value || null === $value ) { | |
| 140 | + return ''; | |
| 141 | + } | |
| 142 | + | |
| 143 | + if ( ! empty( $condition ) ) { | |
| 144 | + switch ( $condition ) { | |
| 145 | + case 'pass_empty': | |
| 146 | + if ( empty( $value ) ) { | |
| 147 | + return; | |
| 148 | + } | |
| 149 | + | |
| 150 | + break; | |
| 151 | + } | |
| 152 | + } | |
| 153 | + | |
| 154 | + // Remove everything after ":"in case a selector like a:hover is used. | |
| 155 | + // phpcs:ignore WordPress.CodeAnalysis.AssignmentInCondition.Found | |
| 156 | + if ( ( $position = strpos( $selector, ':' ) ) !== false ) { | |
| 157 | + $selector = substr( $selector, 0, $position ); | |
| 158 | + } | |
| 159 | + | |
| 160 | + if ( class_exists( 'Merchant_Admin_Preview' ) ) { | |
| 161 | + Merchant_Admin_Preview::instance()->set_css( $setting, $selector, $variable, $unit ); | |
| 162 | + } | |
| 163 | + | |
| 164 | + return $selector . '{ ' . esc_attr( $variable ) . ':' . esc_attr( $value ) . esc_attr( $unit ) . '; }' . "\n"; | |
| 165 | + } | |
| 166 | + | |
| 167 | + /** | |
| 168 | + * CSS (can pass css prop and unit) | |
| 169 | + * | |
| 170 | + * @param string $module Module name. | |
| 171 | + * @param string $setting Setting name. | |
| 172 | + * @param string $default_val Default value. | |
| 173 | + * @param string $selector CSS selector. | |
| 174 | + * @param string $css_prop CSS prop. | |
| 175 | + * @param string $unit Unit value. | |
| 176 | + * @param bool $important Important rule. | |
| 177 | + * @param bool|string $variable Whether to auto-create a variable | |
| 178 | + * | |
| 179 | + * @return string | |
| 180 | + */ | |
| 181 | + public static function get_css( $module, $setting = '', $default_val = '', $selector = '', $css_prop = '', $unit = 'px', $important = false, $variable = false ) { | |
| 182 | + $css_output = ''; | |
| 183 | + | |
| 184 | + if ( $variable === false ) { | |
| 185 | + $css_value = self::get_option( $module, $setting, $default_val ) . ( isset( $css['unit'] ) ? $css['unit'] : '' ); | |
| 186 | + } else { | |
| 187 | + $css_variable = is_string( $variable ) ? $variable : '--merchant-' . str_replace( '_', '-', sanitize_title( $setting ) ); | |
| 188 | + $css_value = "var({$css_variable})"; | |
| 189 | + $css_output .= static::get_variable_css( $module, $setting, $default_val, $selector, $css_variable, $unit ); | |
| 190 | + } | |
| 191 | + | |
| 192 | + if( is_array( $css_prop ) ) { | |
| 193 | + foreach( $css_prop as $css ) { | |
| 194 | + $css_output .= $selector . '{ '. $css['prop'] .':' . esc_attr( $css_value ) . ( $important ? '!important' : '' ) . ';}' . "\n"; | |
| 195 | + } | |
| 196 | + } else { | |
| 197 | + $css_output .= $selector . '{ '. $css_prop .':' . esc_attr( $css_value ) . ( $important ? '!important' : '' ) . ';}' . "\n"; | |
| 198 | + } | |
| 199 | + | |
| 200 | + return $css_output; | |
| 201 | + } | |
| 202 | + | |
| 203 | + /** | |
| 204 | + * Get color CSS | |
| 205 | + * | |
| 206 | + * @param string $module Module name. | |
| 207 | + * @param string $setting Setting name. | |
| 208 | + * @param string $default_val Default value. | |
| 209 | + * @param string $selector CSS selector. | |
| 210 | + * @param bool $important Important rule. | |
| 211 | + * @param bool|string $variable Whether to auto-create a variable | |
| 212 | + * | |
| 213 | + * @return string | |
| 214 | + */ | |
| 215 | + public static function get_color_css( $module, $setting = '', $default_val = '', $selector = '', $important = false, $variable = false ) { | |
| 216 | + return self::get_css( $module, $setting, $default_val, $selector, 'color', '', $important, $variable ); | |
| 217 | + } | |
| 218 | + | |
| 219 | + /** | |
| 220 | + * Get border color CSS | |
| 221 | + * | |
| 222 | + * @param string $module Module name. | |
| 223 | + * @param string $setting Setting name. | |
| 224 | + * @param string $default_val Default value. | |
| 225 | + * @param string $selector CSS selector. | |
| 226 | + * @param bool $important Important rule. | |
| 227 | + * @param bool|string $variable Whether to auto-create a variable | |
| 228 | + * | |
| 229 | + * @return string | |
| 230 | + */ | |
| 231 | + public static function get_border_color_css( $module, $setting = '', $default_val = '', $selector = '', $important = false, $variable = false ) { | |
| 232 | + return self::get_css( $module, $setting, $default_val, $selector, 'border-color', '', $important, $variable ); | |
| 233 | + } | |
| 234 | + | |
| 235 | + /** | |
| 236 | + * Get background color CSS | |
| 237 | + * | |
| 238 | + * @param string $module Module name. | |
| 239 | + * @param string $setting Setting name. | |
| 240 | + * @param string $default_val Default value. | |
| 241 | + * @param string $selector CSS selector. | |
| 242 | + * @param bool $important Important rule. | |
| 243 | + * @param bool|string $variable Whether to auto-create a variable | |
| 244 | + * | |
| 245 | + * @return string | |
| 246 | + */ | |
| 247 | + public static function get_background_color_css( $module, $setting = '', $default_val = '', $selector = '', $important = false, $variable = false ) { | |
| 248 | + return self::get_css( $module, $setting, $default_val, $selector, 'background-color', '', $important, $variable ); | |
| 249 | + } | |
| 250 | + | |
| 251 | + /** | |
| 252 | + * Responsive dimensions | |
| 253 | + * | |
| 254 | + * @param string $module Module name. | |
| 255 | + * @param string $setting Setting name. | |
| 256 | + * @param array $defaults Default values. | |
| 257 | + * @param string $selector CSS selector. | |
| 258 | + * @param string $css_prop CSS prop. | |
| 259 | + * @param bool $important Important rule. | |
| 260 | + * | |
| 261 | + * @return string | |
| 262 | + */ | |
| 263 | + public static function get_responsive_dimensions_css( $module, $setting = '', $defaults = array(), $selector = '', $css_prop = '', $important = false ) { | |
| 264 | + $devices = array( | |
| 265 | + 'desktop' => '@media (min-width: 992px)', | |
| 266 | + 'tablet' => '@media (min-width: 576px) and (max-width: 991px)', | |
| 267 | + 'mobile' => '@media (max-width: 575px)', | |
| 268 | + ); | |
| 269 | + | |
| 270 | + $css = ''; | |
| 271 | + | |
| 272 | + foreach ( $devices as $device => $media ) { | |
| 273 | + $value = self::get_option( $module, $setting, $defaults )[ $device ]; | |
| 274 | + | |
| 275 | + $value['top'] = ! isset( $value['top'] ) || $value['top'] === '' ? 0 : $value['top']; | |
| 276 | + $value['right'] = ! isset( $value['right'] ) || $value['right'] === '' ? 0 : $value['right']; | |
| 277 | + $value['bottom'] = ! isset( $value['bottom'] ) || $value['bottom'] === '' ? 0 : $value['bottom']; | |
| 278 | + $value['left'] = ! isset( $value['left'] ) || $value['left'] === '' ? 0 : $value['left']; | |
| 279 | + | |
| 280 | + $css_prop_value = "{$value['top']}{$value['unit']} {$value['right']}{$value['unit']} {$value['bottom']}{$value['unit']} {$value['left']}{$value['unit']}"; | |
| 281 | + $css .= $media . ' { ' . $selector . ' { ' . $css_prop . ':' . esc_attr( $css_prop_value ) . ( $important ? '!important' : '' ) . '; } }' . "\n"; | |
| 282 | + } | |
| 283 | + | |
| 284 | + return $css; | |
| 285 | + } | |
| 286 | + | |
| 287 | + /** | |
| 288 | + * Dimensions | |
| 289 | + * | |
| 290 | + * @param string $module Module name. | |
| 291 | + * @param string $setting Setting name. | |
| 292 | + * @param string $default_val Default value. | |
| 293 | + * @param string $selector CSS selector. | |
| 294 | + * @param string $css_prop CSS prop. | |
| 295 | + * @param bool $important Important rule. | |
| 296 | + * | |
| 297 | + * @return string | |
| 298 | + */ | |
| 299 | + public static function get_dimensions_css( $module, $setting = '', $default_val = '', $selector = '', $css_prop = '', $important = false ) { | |
| 300 | + $value = self::get_option( $module, $setting, $default_val ); | |
| 301 | + | |
| 302 | + $value['top'] = ! isset( $value['top'] ) || $value['top'] === '' ? 0 : $value['top']; | |
| 303 | + $value['right'] = ! isset( $value['right'] ) || $value['right'] === '' ? 0 : $value['right']; | |
| 304 | + $value['bottom'] = ! isset( $value['bottom'] ) || $value['bottom'] === '' ? 0 : $value['bottom']; | |
| 305 | + $value['left'] = ! isset( $value['left'] ) || $value['left'] === '' ? 0 : $value['left']; | |
| 306 | + | |
| 307 | + $css_prop_value = "{$value['top']}{$value['unit']} {$value['right']}{$value['unit']} {$value['bottom']}{$value['unit']} {$value['left']}{$value['unit']}"; | |
| 308 | + | |
| 309 | + if ( is_array( $css_prop ) ) { | |
| 310 | + $css_output = ''; | |
| 311 | + | |
| 312 | + foreach ( $css_prop as $css ) { | |
| 313 | + $css_output .= $selector . '{ ' . $css['prop'] . ':' . esc_attr( $css_prop_value ) . ( $important ? '!important' : '' ) . ';}' . "\n"; | |
| 314 | + } | |
| 315 | + | |
| 316 | + return $css_output; | |
| 317 | + } else { | |
| 318 | + return $selector . '{ ' . $css_prop . ':' . esc_attr( $css_prop_value ) . ( $important ? '!important' : '' ) . ';}' . "\n"; | |
| 319 | + } | |
| 320 | + } | |
| 321 | + | |
| 322 | + /** | |
| 323 | + * Responsive CSS (can pass css prop and unit) | |
| 324 | + * | |
| 325 | + * @param string $module Module name. | |
| 326 | + * @param string $setting Setting name. | |
| 327 | + * @param array $defaults Default values. | |
| 328 | + * @param string $selector CSS selector. | |
| 329 | + * @param string $css_prop CSS prop. | |
| 330 | + * @param string $unit Unit value. | |
| 331 | + * @param bool $important Important rule. | |
| 332 | + * | |
| 333 | + * @return string | |
| 334 | + */ | |
| 335 | + public static function get_responsive_css( $module, $setting = '', $defaults = array(), $selector = '', $css_prop = '', $unit = 'px', $important = false ) { | |
| 336 | + $devices = array( | |
| 337 | + 'desktop' => '@media (min-width: 992px)', | |
| 338 | + 'tablet' => '@media (min-width: 576px) and (max-width: 991px)', | |
| 339 | + 'mobile' => '@media (max-width: 575px)', | |
| 340 | + ); | |
| 341 | + | |
| 342 | + $css = ''; | |
| 343 | + | |
| 344 | + foreach ( $devices as $device => $media ) { | |
| 345 | + $default = ( isset( $defaults[ $device ] ) ) ? $defaults[ $device ] : $defaults; | |
| 346 | + | |
| 347 | + $setting = self::get_option( $module, $setting . '_' . $device, $default ); | |
| 348 | + | |
| 349 | + // Some properties need to be converted to be compatible with the respective css property | |
| 350 | + $type = ''; | |
| 351 | + if ( strpos( $setting, '_visibility' ) !== false && $css_prop === 'display' ) { | |
| 352 | + $type = 'display'; | |
| 353 | + } | |
| 354 | + | |
| 355 | + // Check and convert value to be compatible with 'display' css property | |
| 356 | + if ( $css_prop === 'display' ) { | |
| 357 | + if ( $setting === 'hidden' ) { | |
| 358 | + $setting = 'none'; | |
| 359 | + } else { | |
| 360 | + continue; | |
| 361 | + } | |
| 362 | + } | |
| 363 | + | |
| 364 | + $css .= $media . ' { ' . $selector . ' { ' . $css_prop . ':' . esc_attr( $setting ) . ( $unit ? $unit : '' ) . ( $important ? '!important' : '' ) . '; } }' . "\n"; | |
| 365 | + } | |
| 366 | + | |
| 367 | + return $css; | |
| 368 | + } | |
| 369 | + | |
| 370 | + /** | |
| 371 | + * Get option | |
| 372 | + * | |
| 373 | + * @param string $module Module name. | |
| 374 | + * @param string $setting Setting name. | |
| 375 | + * @param mixed $default_val Default value. | |
| 376 | + * | |
| 377 | + * @return mixed | |
| 378 | + */ | |
| 379 | + public static function get_option( $module, $setting, $default_val ) { | |
| 380 | + $options = get_option( 'merchant', array() ); | |
| 381 | + | |
| 382 | + $value = $default_val; | |
| 383 | + | |
| 384 | + if ( isset( $options[ $module ] ) && isset( $options[ $module ][ $setting ] ) ) { | |
| 385 | + $value = $options[ $module ][ $setting ]; | |
| 386 | + } | |
| 387 | + | |
| 388 | + return $value; | |
| 389 | + } | |
| 390 | + | |
| 391 | + /** | |
| 392 | + * CSS code minification. | |
| 393 | + */ | |
| 394 | + private function minify( $css ) { | |
| 395 | + $css = preg_replace( '/\s+/', ' ', $css ); | |
| 396 | + $css = preg_replace( '/\/\*[^\!](.*?)\*\//', '', $css ); | |
| 397 | + $css = preg_replace( '/(,|:|;|\{|}) /', '$1', $css ); | |
| 398 | + $css = preg_replace( '/ (,|;|\{|})/', '$1', $css ); | |
| 399 | + $css = preg_replace( '/(:| )0\.([0-9]+)(%|em|ex|px|in|cm|mm|pt|pc)/i', '${1}.${2}${3}', $css ); | |
| 400 | + $css = preg_replace( '/(:| )(\.?)0(%|em|ex|px|in|cm|mm|pt|pc)/i', '${1}0', $css ); | |
| 401 | + | |
| 402 | + return trim( $css ); | |
| 403 | + } | |
| 404 | + } | |
| 405 | + | |
| 406 | + Merchant_Custom_CSS::instance(); | |
| 407 | +} | |
