Skip to content

Commit

Permalink
Tweak: ZigZag updates + bug fix [TMZ-323] (#179)
Browse files Browse the repository at this point in the history
  • Loading branch information
@mserino
mserino authored Jan 30, 2025
1 parent fa1fb44 commit 27af49b
Show file tree
Hide file tree
Showing 5 changed files with 368 additions and 585 deletions.
51 changes: 33 additions & 18 deletions classes/ehp-button.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@
class Ehp_Button {
private $context = [];
private $defaults = [];
private $widget_settings = [];
private ?Widget_Base $widget = null;

const EHP_PREFIX = 'ehp-';
Expand All @@ -33,19 +34,18 @@ public function set_context( array $context ) {
}

public function render() {
$settings = $this->widget->get_settings_for_display();
$type = $this->context['type'] ?? '';
$widget_name = $this->context['widget_name'];

$button_text = $settings[ $type . '_cta_button_text' ] ?? '';
$button_link = $settings[ $type . '_cta_button_link' ] ?? [];
$button_icon = $settings[ $type . '_cta_button_icon' ] ?? '';
$button_hover_animation = $settings[ $type . '_button_hover_animation' ] ?? '';
$button_has_border = $settings[ $type . '_show_button_border' ] ?? '';
$button_corner_shape = $settings[ $type . '_button_shape' ] ?? '';
$button_corner_shape_mobile = $settings[ $type . '_button_shape_mobile' ] ?? '';
$button_corner_shape_tablet = $settings[ $type . '_button_shape_tablet' ] ?? '';
$button_type = $settings[ $type . '_button_type' ] ?? '';
$button_text = $this->get_control_value( 'button_text', '', 'cta_button_text' );
$button_link = $this->get_control_value( 'button_link', [], 'cta_button_link' );
$button_icon = $this->get_control_value( 'button_icon', '', 'cta_button_icon' );
$button_hover_animation = $this->get_control_value( 'button_hover_animation', '' );
$button_has_border = $this->get_control_value( 'show_button_border', '' );
$button_corner_shape = $this->get_control_value( 'button_shape', '' );
$button_corner_shape_mobile = $this->get_control_value( 'button_shape_mobile', '' );
$button_corner_shape_tablet = $this->get_control_value( 'button_shape_tablet', '' );
$button_type = $this->get_control_value( 'button_type', '' );

$button_classnames = [
self::CLASSNAME_BUTTON,
Expand Down Expand Up @@ -100,6 +100,15 @@ public function render() {
<?php
}

/**
* @return mixed
*/
protected function get_control_value( string $defaults_key, $default_value, ?string $settings_key = null ) {
$type = ! empty( $this->context['type'] ) ? $this->context['type'] . '_' : '';
$settings_key = $type . ( $settings_key ?? $defaults_key );
return $this->defaults[ $defaults_key ] ?? $this->widget_settings[ $settings_key ] ?? $default_value;
}

public function add_content_section() {
$defaults = [
'secondary_cta_show' => $this->defaults['secondary_cta_show'] ?? 'yes',
Expand Down Expand Up @@ -287,9 +296,10 @@ public function add_style_controls() {
public function add_button_type_controls( array $options = [] ) {
$defaults = [
'has_secondary_cta' => $this->defaults['has_secondary_cta'] ?? true,
'button_default_type' => $this->defaults['button_default_type'] ?? 'button',
];
$type = $options['type'];
$add_condition = $options['add_condition'] ?? false;
$add_condition = $options['add_condition'] ?? [];

$widget_name = $this->context['widget_name'];

Expand All @@ -302,6 +312,14 @@ public function add_button_type_controls( array $options = [] ) {
$type . '_cta_show' => 'yes',
] : [];

if ( isset( $options['ignore_icon_value_condition'] ) && true === $options['ignore_icon_value_condition'] ) {
$icon_condition = $add_type_condition;
} else {
$icon_condition = array_merge( [
$type . '_cta_button_icon[value]!' => '',
], $add_type_condition );
}

if ( $defaults['has_secondary_cta'] ) {
$this->widget->add_control(
$type . '_button_label',
Expand All @@ -319,7 +337,7 @@ public function add_button_type_controls( array $options = [] ) {
[
'label' => esc_html__( 'Type', 'hello-plus' ),
'type' => Controls_Manager::SELECT,
'default' => 'button',
'default' => $defaults['button_default_type'],
'options' => [
'button' => esc_html__( 'Button', 'hello-plus' ),
'link' => esc_html__( 'Link', 'hello-plus' ),
Expand Down Expand Up @@ -364,9 +382,7 @@ public function add_button_type_controls( array $options = [] ) {
'selectors' => [
'{{WRAPPER}} .ehp-' . $widget_name . '__button--' . $type => 'flex-direction: {{VALUE}};',
],
'condition' => array_merge([
$type . '_cta_button_icon[value]!' => '',
], $add_type_condition),
'condition' => $icon_condition,
]
);

Expand All @@ -393,9 +409,7 @@ public function add_button_type_controls( array $options = [] ) {
'selectors' => [
'{{WRAPPER}} .ehp-' . $widget_name => '--' . $widget_name . '-button-' . $type . '-icon-spacing: {{SIZE}}{{UNIT}};',
],
'condition' => array_merge([
$type . '_cta_button_icon[value]!' => '',
], $add_type_condition),
'condition' => $icon_condition,
]
);

Expand Down Expand Up @@ -637,5 +651,6 @@ public function __construct( Widget_Base $widget, $context = [], $defaults = []
$this->widget = $widget;
$this->context = $context;
$this->defaults = $defaults;
$this->widget_settings = $widget->get_settings_for_display();
}
}
194 changes: 115 additions & 79 deletions modules/content/assets/scss/hello-plus-zigzag.scss
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,6 @@
@import "../../../../assets/dev/scss/variables";

.ehp-zigzag {
--zigzag-button-icon-size: 16px;
--zigzag-button-icon-spacing: 10px;
--zigzag-button-text-color: #555963;
--zigzag-button-text-color-hover: #555963;
--zigzag-button-border-width: 1px;
--zigzag-button-border-color: #000000;
--zigzag-button-border-radius: 0;
--zigzag-title-color: #000000;
--zigzag-description-color: #000000;
--zigzag-rows-spacing: 60px;
Expand All @@ -18,12 +11,7 @@
--zigzag-image-width: 50%;
--zigzag-icon-width: 50%;
--zigzag-image-position: center center;
--zigzag-button-padding-block-end: 8px;
--zigzag-button-padding-block-start: 8px;
--zigzag-button-padding-inline-end: 16px;
--zigzag-button-padding-inline-start: 16px;
--zigzag-elements-gap: 32px;
--zigzag-content-width: 1304px;
--zigzag-icon-size: 256px;
--zigzag-icon-color: #555963;
--zigzag-icon-color-alternate: #61CE70;
Expand All @@ -40,6 +28,21 @@
--zigzag-animation-duration-normal: 1s;
--zigzag-animation-duration-fast: 0.8s;

--zigzag-button-primary-icon-spacing: 10px;
--zigzag-button-primary-icon-size: 16px;
--zigzag-button-primary-text-color: #{$global-colors-white};
--zigzag-button-primary-text-color-hover: #{$global-colors-text};
--zigzag-button-primary-border-width: 0;
--zigzag-button-primary-border-color: transparent;
--zigzag-button-primary-padding-block-end: 8px;
--zigzag-button-primary-padding-block-start: 8px;
--zigzag-button-primary-padding-inline-end: 16px;
--zigzag-button-primary-padding-inline-start: 16px;
--zigzag-button-primary-border-radius-block-end: #{$corners-shape-default};
--zigzag-button-primary-border-radius-block-start: #{$corners-shape-default};
--zigzag-button-primary-border-radius-inline-end: #{$corners-shape-default};
--zigzag-button-primary-border-radius-inline-start: #{$corners-shape-default};

align-items: center;
background-color: transparent;
display: flex;
Expand All @@ -61,74 +64,22 @@
border-radius: var(--zigzag-wrapper-border-radius);
}

&__button-icon {
fill: currentColor;
height: var(--zigzag-button-icon-size);
width: var(--zigzag-button-icon-size);
}

& a.ehp-zigzag__button,
& a.ehp-zigzag__button:not([href]):not([tabindex]) {
align-items: center;
color: var(--zigzag-button-text-color);
display: flex;
gap: var(--zigzag-button-icon-spacing);
text-decoration: none;
transition: $transition;

&:hover,
&:focus {
color: var(--zigzag-button-text-color-hover);
transition: $transition;
}

&.has-border {
border-color: var(--zigzag-button-border-color);
border-style: solid;
border-width: var(--zigzag-button-border-width);
border-radius: var(--zigzag-button-border-radius);
}

&.is-type {

&-button {
padding-block-end: var(--zigzag-button-padding-block-end);
padding-block-start: var(--zigzag-button-padding-block-start);
padding-inline-end: var(--zigzag-button-padding-inline-end);
padding-inline-start: var(--zigzag-button-padding-inline-start);
text-decoration: none;
}

&-link,
&-link:not([href]):not([tabindex]) {
background: none;
text-decoration: underline;

&:hover,
&:focus {
background: none;
}
}
}

&.has-shape {

&-sharp {
border-radius: $corners-shape-sharp;
}

&-rounded {
border-radius: $corners-shape-rounded;
}

&-round {
border-radius: $corners-shape-round;
}

&-default {
border-radius: $corners-shape-default;
}
}
--ehp-button-primary-icon-spacing: var(--zigzag-button-primary-icon-spacing);
--ehp-button-primary-icon-size: var(--zigzag-button-primary-icon-size);
--ehp-button-primary-text-color: var(--zigzag-button-primary-text-color);
--ehp-button-primary-text-color-hover: var(--zigzag-button-primary-text-color-hover);
--ehp-button-primary-border-width: var(--zigzag-button-primary-border-width);
--ehp-button-primary-border-color: var(--zigzag-button-primary-border-color);
--ehp-button-primary-padding-block-end: var(--zigzag-button-primary-padding-block-end);
--ehp-button-primary-padding-block-start: var(--zigzag-button-primary-padding-block-start);
--ehp-button-primary-padding-inline-end: var(--zigzag-button-primary-padding-inline-end);
--ehp-button-primary-padding-inline-start: var(--zigzag-button-primary-padding-inline-start);
--ehp-button-primary-border-radius-block-end: var(--zigzag-button-primary-border-radius-block-end);
--ehp-button-primary-border-radius-block-start: var(--zigzag-button-primary-border-radius-block-start);
--ehp-button-primary-border-radius-inline-end: var(--zigzag-button-primary-border-radius-inline-end);
--ehp-button-primary-border-radius-inline-start: var(--zigzag-button-primary-border-radius-inline-start);
}

&__button-container {
Expand Down Expand Up @@ -173,8 +124,9 @@
&.has-image {
width: var(--zigzag-image-width);

img {
.elementor & img {
aspect-ratio: 16 / 9;
height: var(--zigzag-image-height);
object-fit: cover;
object-position: var(--zigzag-image-position);
width: 100%;
Expand Down Expand Up @@ -307,4 +259,88 @@
width: 100%;
}
}


&.has-image-stretch {
--zigzag-image-width: 50%;
--zigzag-icon-width: 50%;

& .ehp-zigzag__item-container {
padding-inline: 0;

@media screen and (max-width: $screen-tablet-max) {
padding-block: 0;
}
}

.ehp-zigzag__text-container {
@media screen and (max-width: $screen-tablet-max) {
padding-inline-start: var(--zigzag-box-padding-inline-start);
padding-inline-end: var(--zigzag-box-padding-inline-end);
}
}

&.has-direction {
&-start {

.ehp-zigzag__text-container {
@media screen and (max-width: $screen-tablet-max) {
padding-block-end: var(--zigzag-box-padding-block-end);
}
}

.ehp-zigzag__item-wrapper:nth-child(odd) {
.ehp-zigzag__text-container {
@media screen and (min-width: $screen-desktop-min) {
padding-inline-end: var(--zigzag-box-padding-inline-end);
}
}
}

.ehp-zigzag__item-wrapper:nth-child(even) {
.ehp-zigzag__text-container {

@media screen and (min-width: $screen-desktop-min) {
padding-inline-start: var(--zigzag-box-padding-inline-start);
}
}
}
}

&-end {

.ehp-zigzag__text-container {
@media screen and (max-width: $screen-tablet-max) {
padding-block-start: var(--zigzag-box-padding-block-start);
}
}

.ehp-zigzag__item-wrapper:nth-child(odd) {
.ehp-zigzag__text-container {

@media screen and (max-width: $screen-tablet-max) {
padding-block-start: var(--zigzag-box-padding-block-start);
}

@media screen and (min-width: $screen-desktop-min) {
padding-inline-start: var(--zigzag-box-padding-inline-start);
}
}
}

.ehp-zigzag__item-wrapper:nth-child(even) {
.ehp-zigzag__text-container {

@media screen and (max-width: $screen-tablet-max) {
padding-block-start: var(--zigzag-box-padding-block-start);
}

@media screen and (min-width: $screen-desktop-min) {
padding-inline-end: var(--zigzag-box-padding-inline-end);
}
}
}
}
}
}
}
Loading

0 comments on commit 27af49b

Please sign in to comment.