Fix: Zigzag Widget alternate color & icon [TMZ-273] (#147)

elementor · Dec 25, 2024 · b68887e · b68887e
1 parent 068ebe5
commit b68887e
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 39 deletions.
diff --git a/modules/content/assets/scss/hello-plus-zigzag.scss b/modules/content/assets/scss/hello-plus-zigzag.scss
@@ -127,11 +127,49 @@
 		display: flex;
 	}
 
+	&.has-alternate-icon-color {
+		.ehp-zigzag__item-wrapper:nth-child(odd) {
+			.ehp-zigzag__graphic-element-container {
+				color: var(--zigzag-icon-color-alternate);
+			}
+		}
+	}
+
+	&.has-direction {
+		&-start {
+			.ehp-zigzag__item-wrapper:nth-child(odd) {
+				.ehp-zigzag__item-container {
+					flex-direction: row;
+				}
+			}
+
+			.ehp-zigzag__item-wrapper:nth-child(even) {
+				.ehp-zigzag__item-container {
+					flex-direction: row-reverse;
+				}
+			}
+		}
+
+		&-end {
+			.ehp-zigzag__item-wrapper:nth-child(odd) {
+				.ehp-zigzag__item-container {
+					flex-direction: row-reverse;
+				}
+			}
+
+			.ehp-zigzag__item-wrapper:nth-child(even) {
+				.ehp-zigzag__item-container {
+					flex-direction: row;
+				}
+			}
+		}
+	}
+
 	&__text-container {
 		display: flex;
 		flex-direction: column;
 		justify-content: var(--zigzag-content-position);
-		
+
 		&.is-graphic-image {
 			width: calc(100% - var(--zigzag-image-width));
 		}
@@ -162,7 +200,7 @@
 				object-fit: cover;
 				object-position: var(--zigzag-image-position);
 				width: 100%;
-			}	
+			}
 		}
 
 		&.has-icon {
@@ -191,21 +229,6 @@
 		padding-inline-end: var(--zigzag-box-padding-inline-end);
 		max-width: var(--zigzag-content-width);
 		width: 100%;
-
-		&.row-even {
-			flex-direction: row;
-
-			&.has-alternate-icon-color {
-
-				.ehp-zigzag__graphic-element-container {
-					color: var(--zigzag-icon-color-alternate);
-				}
-			}
-		}
-
-		&.row-odd {
-			flex-direction: row-reverse;
-		}
 
 		@media screen and (max-width: $screen-tablet-max) {
 			gap: var(--zigzag-elements-gap);

diff --git a/modules/content/classes/render/widget-zig-zag-render.php b/modules/content/classes/render/widget-zig-zag-render.php
@@ -27,11 +27,17 @@ public function __construct( Zig_Zag $widget ) {
 	}
 
 	public function render(): void {
-		$layout_classnames = self::LAYOUT_CLASSNAME;
 		$first_zigzag_direction = $this->settings['first_zigzag_direction'];
 		$has_alternate_icon_color = $this->settings['has_alternate_icon_color'];
 
-		$layout_classnames .= ' has-direction-' . $first_zigzag_direction;
+		$layout_classnames = [
+			self::LAYOUT_CLASSNAME,
+			'has-direction-' . $first_zigzag_direction,
+		];
+
+		if ( 'yes' === $has_alternate_icon_color ) {
+			$layout_classnames[] = 'has-alternate-icon-color';
+		}
 
 		$this->widget->add_render_attribute( 'layout', [
 			'class' => $layout_classnames,
@@ -40,24 +46,12 @@ public function render(): void {
 		?>
 		<div <?php $this->widget->print_render_attribute_string( 'layout' ); ?>>
 			<?php
-			$remainder = 'right' === $first_zigzag_direction ? 1 : 0;
-
 			$graphic_element = $this->settings['graphic_element'];
 			$repeater = 'image' === $graphic_element ? $this->settings['image_zigzag_items'] : $this->settings['icon_zigzag_items'];
 
 			foreach ( $repeater as $key => $item ) {
-				$is_even = $remainder === $key % 2;
-
-				$item_class = self::ITEM_CLASSNAME;
-
-				$item_class .= ' row' . ( $is_even ? '-even' : '-odd' );
-
-				if ( $has_alternate_icon_color && $is_even ) {
-					$item_class .= ' has-alternate-icon-color';
-				}
-
 				$this->widget->add_render_attribute( 'zigzag-item-' . $key, [
-					'class' => $item_class,
+					'class' => self::ITEM_CLASSNAME,
 				] );
 				?>
 				<div class="ehp-zigzag__item-wrapper">

diff --git a/modules/content/widgets/zig-zag.php b/modules/content/widgets/zig-zag.php
@@ -269,16 +269,16 @@ private function add_style_zigzags_section() {
 				'label' => esc_html__( 'Align First Graphic', 'hello-plus' ),
 				'type' => Controls_Manager::CHOOSE,
 				'options' => [
-					'left' => [
-						'title' => esc_html__( 'Left', 'hello-plus' ),
-						'icon' => 'eicon-order-start',
+					'start' => [
+						'title' => esc_html__( 'Start', 'hello-plus' ),
+						'icon' => 'eicon-order-' . ( is_rtl() ? 'end' : 'start' ),
 					],
-					'right' => [
-						'title' => esc_html__( 'Right', 'hello-plus' ),
-						'icon' => 'eicon-order-end',
+					'end' => [
+						'title' => esc_html__( 'End', 'hello-plus' ),
+						'icon' => 'eicon-order-' . ( is_rtl() ? 'start' : 'end' ),
 					],
 				],
-				'default' => 'left',
+				'default' => 'start',
 				'description' => esc_html__( 'Content will be stacked on smaller screens', 'hello-plus' ),
 			]
 		);