form-01--form-container.php
3 years ago
form-02--form-fields.php
3 years ago
form-03--input.php
5 months ago
form-04--select2.php
5 months ago
form-05--select2-dropdown.php
3 years ago
form-06--timepicker-dropdown.php
3 years ago
form-07--radio.php
5 months ago
form-08--checkbox.php
5 months ago
form-09--calendar.php
3 years ago
form-10--submit.php
5 months ago
form-11--options-container.php
3 years ago
form-12--options-title.php
5 months ago
form-13--gdpr.php
5 months ago
form-14--error-message.php
5 months ago
form-15--success-message.php
2 years ago
form-16--recaptcha.php
5 months ago
general-01--module-container.php
3 years ago
general-02--main-layout.php
1 month ago
general-03--layout-header.php
3 years ago
general-04--layout-content.php
3 years ago
general-05--layout-footer.php
3 years ago
general-06--image-size.php
5 months ago
general-07--image-fitting.php
3 years ago
general-08--image-position.php
5 months ago
general-09--content-wrapper.php
3 years ago
general-10--title.php
5 months ago
general-11--subtitle.php
5 months ago
general-12--content.php
5 months ago
general-13--cta-container.php
3 years ago
general-14--cta-button.php
5 months ago
general-15--cta-alignment.php
3 years ago
general-16--nsa-link.php
5 months ago
general-17--close-button.php
3 years ago
general-18--popup-mask.php
3 years ago
general-19--cta-helper-text.php
5 months ago
module-size-embed.php
5 months ago
module-size-popup.php
5 months ago
module-size-slidein.php
3 years ago
general-15--cta-alignment.php
129 lines
| 1 | <?php |
| 2 | /** |
| 3 | * CTA Button Alignment. |
| 4 | * |
| 5 | * @package Hustle |
| 6 | * @since 4.3.0 |
| 7 | */ |
| 8 | |
| 9 | global $wp_locale; |
| 10 | |
| 11 | $is_rtl = $wp_locale->is_rtl(); |
| 12 | |
| 13 | $container = '.hustle-layout .hustle-cta-container'; |
| 14 | $component = $container . ' .hustle-button-cta'; |
| 15 | |
| 16 | // CONDITIONALS: Check if module has mobile appearance settings enabled. |
| 17 | $is_mobile_enabled = ( '1' === $design['enable_mobile_settings'] ); |
| 18 | $is_mobile_disabled = ( '1' !== $design['enable_mobile_settings'] ); |
| 19 | |
| 20 | // CONDITIONALS: Has button. |
| 21 | $has_cta = ( '0' !== $content['show_cta'] && ( '' !== $content['cta_label'] && '' !== $content['cta_url'] ) ); |
| 22 | |
| 23 | // SETTINGS: Alignment. |
| 24 | $alignment = ( ! $is_rtl ) ? $design['cta_buttons_alignment'] : 'right'; |
| 25 | $mobile_alignment = ( $is_mobile_enabled ) ? $design['cta_buttons_alignment_mobile'] : $alignment; |
| 26 | $align_items = ( 'left' === $alignment ) ? 'flex-start' : ( ( 'right' === $alignment ) ? 'flex-end' : 'center' ); |
| 27 | $mobile_align_items = ( $is_mobile_enabled ) ? ( 'left' === $mobile_alignment ) ? 'flex-start' : ( ( 'right' === $mobile_alignment ) ? 'flex-end' : 'center' ) : $align_items; |
| 28 | |
| 29 | // SETTINGS: Gap. |
| 30 | $gap_value = ( '' !== $design['cta_buttons_layout_gap_value'] ) ? $design['cta_buttons_layout_gap_value'] : '0'; |
| 31 | $mobile_gap_value = ( '' !== $design['cta_buttons_layout_gap_value_mobile'] ) ? $design['cta_buttons_layout_gap_value_mobile'] : '0'; |
| 32 | $gap_unit = ( '' !== $design['cta_buttons_layout_gap_unit'] ) ? $design['cta_buttons_layout_gap_unit'] : 'px'; |
| 33 | $mobile_gap_unit = ( '' !== $design['cta_buttons_layout_gap_unit_mobile'] ) ? $design['cta_buttons_layout_gap_unit_mobile'] : 'px'; |
| 34 | $gap = $gap_value . $gap_unit; |
| 35 | $mobile_gap = ( $is_mobile_enabled ) ? $mobile_gap_value . $mobile_gap_unit : $gap; |
| 36 | |
| 37 | // SETTINGS: Layout. |
| 38 | $layout = ( '' !== $design['cta_buttons_layout_type'] ) ? $design['cta_buttons_layout_type'] : 'inline'; |
| 39 | $mobile_layout = ( $is_mobile_enabled ) ? $design['cta_buttons_layout_type_mobile'] : $layout; |
| 40 | |
| 41 | // ================================================== |
| 42 | // Check if call to action button exists. |
| 43 | if ( $has_cta ) { |
| 44 | |
| 45 | $style .= ' '; |
| 46 | |
| 47 | // Mobile styles. |
| 48 | if ( 'full' === $mobile_alignment ) { |
| 49 | $style .= $prefix_mobile . $container . ' {'; |
| 50 | $style .= 'display: flex;'; |
| 51 | $style .= ( 'stacked' === $mobile_layout ) ? 'flex-direction: column;' : ''; |
| 52 | $style .= '}'; |
| 53 | $style .= $prefix_mobile . $component . ' {'; |
| 54 | $style .= 'width: 100%;'; |
| 55 | $style .= 'display: block;'; |
| 56 | $style .= '}'; |
| 57 | |
| 58 | if ( '2' === $content['show_cta'] ) { |
| 59 | $style .= $prefix_mobile . $component . ':last-child {'; |
| 60 | $style .= ( 'inline' !== $mobile_layout ) ? 'margin:' . $mobile_gap . ' 0 0 0;' : 'margin: 0 0 0 ' . $mobile_gap . ';'; |
| 61 | $style .= '}'; |
| 62 | } |
| 63 | } else { |
| 64 | $style .= $prefix_mobile . $container . ' {'; |
| 65 | $style .= ( 'inline' === $mobile_layout ) ? 'justify-content: ' . $mobile_alignment . ';' : 'align-items: ' . $mobile_align_items . ';'; |
| 66 | $style .= ( 'stacked' === $mobile_layout ) ? 'flex-direction: column;' : ''; |
| 67 | $style .= 'display: flex;'; |
| 68 | $style .= '}'; |
| 69 | $style .= $prefix_mobile . $component . ' {'; |
| 70 | $style .= 'width: auto;'; |
| 71 | $style .= 'display: inline-block;'; |
| 72 | $style .= '}'; |
| 73 | |
| 74 | if ( '2' === $content['show_cta'] ) { |
| 75 | $style .= $prefix_mobile . $component . ':last-child {'; |
| 76 | $style .= ( 'inline' === $mobile_layout ) ? 'margin: 0 0 0 ' . $mobile_gap . ';' : 'margin: ' . $mobile_gap . ' 0 0 0;'; |
| 77 | $style .= '}'; |
| 78 | } |
| 79 | } |
| 80 | |
| 81 | // Desktop styles. |
| 82 | if ( $is_mobile_enabled ) { |
| 83 | |
| 84 | if ( 'full' === $alignment ) { |
| 85 | $style .= $breakpoint . ' {'; |
| 86 | $style .= $prefix_desktop . $container . ' {'; |
| 87 | $style .= 'display: flex;'; |
| 88 | $style .= ( 'stacked' === $layout ) ? 'flex-direction: column;' : 'flex-direction: unset;'; |
| 89 | $style .= '}'; |
| 90 | $style .= '}'; |
| 91 | |
| 92 | $style .= $breakpoint . ' {'; |
| 93 | $style .= $prefix_desktop . $component . ' {'; |
| 94 | $style .= 'width: 100%;'; |
| 95 | $style .= 'display: block;'; |
| 96 | $style .= '}'; |
| 97 | $style .= '}'; |
| 98 | |
| 99 | if ( '2' === $content['show_cta'] ) { |
| 100 | $style .= $breakpoint . ' {'; |
| 101 | $style .= $prefix_mobile . $component . ':last-child {'; |
| 102 | $style .= ( 'inline' !== $layout ) ? 'margin:' . $gap . ' 0 0 0;' : 'margin: 0 0 0 ' . $gap . ';'; |
| 103 | $style .= '}'; |
| 104 | $style .= '}'; |
| 105 | } |
| 106 | } else { |
| 107 | $style .= $breakpoint . ' {'; |
| 108 | $style .= $prefix_desktop . $container . ' {'; |
| 109 | $style .= ( 'inline' === $layout ) ? 'justify-content: ' . $alignment . ';' : 'align-items: ' . $align_items . ';'; |
| 110 | $style .= 'display: flex;'; |
| 111 | $style .= ( 'stacked' === $layout ) ? 'flex-direction: column;' : 'flex-direction: unset;'; |
| 112 | $style .= '}'; |
| 113 | $style .= $prefix_desktop . $component . ' {'; |
| 114 | $style .= 'width: auto;'; |
| 115 | $style .= 'display: inline-block;'; |
| 116 | $style .= '}'; |
| 117 | $style .= '}'; |
| 118 | |
| 119 | if ( '2' === $content['show_cta'] ) { |
| 120 | $style .= $breakpoint . ' {'; |
| 121 | $style .= $prefix_mobile . $component . ':last-child {'; |
| 122 | $style .= ( 'inline' === $layout ) ? 'margin: 0 0 0 ' . $gap . ';' : 'margin: ' . $gap . ' 0 0 0;'; |
| 123 | $style .= '}'; |
| 124 | $style .= '}'; |
| 125 | } |
| 126 | } |
| 127 | } |
| 128 | } |
| 129 |