Skip to content

Commit

Permalink
Merge pull request #1883 from Codeinwp/feat/screen-size-condition-hide
Browse files Browse the repository at this point in the history 
Add screen size condition
  • Loading branch information
@HardeepAsrani
HardeepAsrani authored Nov 2, 2023
2 parents 680a32d + 714986f commit 1ffba94
Show file tree
Hide file tree
Showing 4 changed files with 363 additions and 46 deletions.
80 changes: 67 additions & 13 deletions inc/class-registration.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,18 +49,19 @@ class Registration {
* @var array
*/
public static $scripts_loaded = array(
'circle-counter' => false,
'countdown' => false,
'form' => false,
'google-map' => false,
'leaflet-map' => false,
'lottie' => false,
'slider' => false,
'sticky' => false,
'tabs' => false,
'popup' => false,
'progress-bar' => false,
'accordion' => false,
'circle-counter' => false,
'countdown' => false,
'form' => false,
'google-map' => false,
'leaflet-map' => false,
'lottie' => false,
'slider' => false,
'sticky' => false,
'tabs' => false,
'popup' => false,
'progress-bar' => false,
'accordion' => false,
'condition_hide_on' => false,
);

/**
Expand Down Expand Up @@ -90,6 +91,7 @@ public function init() {
add_filter( 'render_block', array( $this, 'load_sticky' ), 900, 2 );
add_filter( 'render_block', array( $this, 'subscribe_fa' ), 10, 2 );
add_filter( 'dynamic_sidebar_params', array( $this, 'watch_used_widgets' ), 9999 );
add_filter( 'render_block', array( $this, 'load_condition_hide_on_styles' ), 10, 2 );

add_action(
'wp_footer',
Expand Down Expand Up @@ -973,7 +975,7 @@ public function load_sticky( $block_content, $block ) {
}

/**
* Add styles for sticky blocks.
* Get styles for sticky blocks.
*
* @static
* @since 2.0.14
Expand All @@ -983,6 +985,58 @@ public static function sticky_style() {
echo '<style id="o-sticky-inline-css">.o-sticky.o-sticky-float { height: 0px; } </style>';
}

/**
* Load the Hide on condition styles.
*
* @param string $block_content The block content.
* @param array $block The block data.
* @return string
*/
public function load_condition_hide_on_styles( $block_content, $block ) {
if ( self::$scripts_loaded['condition_hide_on'] ) {
return $block_content;
}

if ( empty( $block['attrs']['otterConditions'] ) || ! is_array( $block['attrs']['otterConditions'] ) ) {
return $block_content;
}

$has_condition = false;

foreach ( $block['attrs']['otterConditions'] as $group ) {
foreach ( $group as $condition ) {
if ( 'screenSize' === $condition['type'] && isset( $condition['screen_sizes'] ) && is_array( $condition['screen_sizes'] ) ) {
$has_condition = true;
break;
}
}

if ( $has_condition ) {
break;
}
}

if ( ! $has_condition ) {
return $block_content;
}

add_action( 'wp_footer', array( $this, 'condition_hide_on_style' ) );
self::$scripts_loaded['condition_hide_on'] = true;

return $block_content;
}

/**
* Get the styles for Hide on condition.
*
* @static
* @since 2.4
* @access public
*/
public static function condition_hide_on_style() {
echo '<style id="o-condition-hide-inline-css">@media (max-width:768px){.o-hide-on-mobile{display:none!important}}@media (min-width:767px) and (max-width:1024px){.o-hide-on-tablet{display:none!important}}@media (min-width:1023px){.o-hide-on-desktop{display:none!important}}</style>';
}

/**
* Get the content of all active widgets.
*
Expand Down
100 changes: 99 additions & 1 deletion inc/plugins/class-block-conditions.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,11 +42,18 @@ public function init() {
*/
public function render_blocks( $block_content, $block ) {
if ( ! is_admin() && ! ( defined( 'REST_REQUEST' ) && REST_REQUEST ) && isset( $block['attrs']['otterConditions'] ) ) {

$display = $this->evaluate_condition_collection( $block['attrs']['otterConditions'] );

if ( false === $display ) {
return;
}

$enhanced_content = $this->should_add_hide_css_class( $this->get_hide_css_condition( $block['attrs']['otterConditions'] ), $block_content );

if ( false !== $enhanced_content ) {
return $enhanced_content;
}
}

return $block_content;
Expand Down Expand Up @@ -83,10 +90,32 @@ public function evaluate_condition_collection( $collection ) {
$display = false;
}
}

return $display;
}

/**
* Get the hide CSS condition.
*
* @param array<array> $collection The conditions collection to evaluate.
* @return array|bool The hide CSS condition, or false if none is found.
*/
public function get_hide_css_condition( $collection ) {
foreach ( $collection as $group ) {
if ( 0 === count( $group ) ) {
continue;
}

foreach ( $group as $condition ) {
if ( ! empty( $condition['type'] ) && ! empty( $condition['screen_sizes'] ) ) {
return $condition;
}
}
}

return false;
}

/**
* Adds the `otterConditions` attributes to all blocks, to avoid `Invalid parameter(s): attributes`
* error in Gutenberg.
Expand Down Expand Up @@ -175,6 +204,10 @@ public function evaluate_condition( $condition ) {
}
}

if ( 'screenSize' === $condition['type'] ) {
return true;
}

if ( 'stripePurchaseHistory' === $condition['type'] ) {
if ( isset( $condition['product'] ) && Stripe_API::has_keys() ) {
if ( $visibility ) {
Expand Down Expand Up @@ -274,6 +307,71 @@ public function has_stripe_product( $product ) {
return $stripe->check_purchase( $product );
}

/**
* If the block has a hide condition, add the appropriate CSS class.
*
* @param array $condition Condition.
* @param string $block_content Reference to block content.
* @return string|bool
*/
public function should_add_hide_css_class( $condition, $block_content ) {

if ( empty( $condition['type'] ) || empty( $condition['screen_sizes'] ) ) {
return false;
}

$screen_sizes = $condition['screen_sizes'];
$hide_css_classes = '';

if ( in_array( 'mobile', $screen_sizes ) ) {
$hide_css_classes .= ' o-hide-on-mobile';
}

if ( in_array( 'tablet', $screen_sizes ) ) {
$hide_css_classes .= ' o-hide-on-tablet';
}

if ( in_array( 'desktop', $screen_sizes ) ) {
$hide_css_classes .= ' o-hide-on-desktop';
}

if ( empty( $hide_css_classes ) ) {
return false;
}

// Get the parent node.
$html_nodes_matches = array();
preg_match( '/<[^>]+>/', $block_content, $html_nodes_matches, PREG_OFFSET_CAPTURE );

// If we have not match, then the content might not be a valid HTML element.
if ( empty( $html_nodes_matches ) ) {
return false;
}

$parent_node = $html_nodes_matches[0][0];
$hide_css_classes = ltrim( $hide_css_classes, ' ' );

// If we have a class attribute, append the CSS class to it. Otherwise, add the class attribute.
if ( false !== strpos( $parent_node, 'class="' ) ) {
$before_class = strstr( $block_content, 'class="', true );
$after_class = strstr( $block_content, 'class="' );
$after_class = substr( $after_class, strlen( 'class="' ) );
$block_content = $before_class . 'class="' . $hide_css_classes . ' ' . $after_class;
} elseif ( false !== strpos( $parent_node, "class='" ) ) {
// Special case with single quotes.
$before_class = strstr( $block_content, "class='", true );
$after_class = strstr( $block_content, "class='" );
$after_class = substr( $after_class, strlen( "class='" ) );
$block_content = $before_class . "class='" . $hide_css_classes . ' ' . $after_class;
} else {
$class_attribute_string = ' class="' . $hide_css_classes . '"';
$enhanced_parent_node = preg_replace( '/>$/', $class_attribute_string . '>', $parent_node );
$block_content = str_replace( $parent_node, $enhanced_parent_node, $block_content );
}

return $block_content;
}

/**
* The instance method for the static class.
* Defines and returns the instance of the static class.
Expand Down
Loading

0 comments on commit 1ffba94

Please sign in to comment.