position-horizontal-vertical.php
3 years ago
position-offset.php
5 years ago
template.php
6 years ago
tpl--floating-social.php
6 years ago
tpl--inline-content.php
5 years ago
tpl--position-settings.php
3 years ago
tpl--shortcode.php
10 months ago
tpl--widget.php
3 years ago
position-offset.php
148 lines
| 1 | <?php |
| 2 | /** |
| 3 | * Positioning - offset section. |
| 4 | * |
| 5 | * @package Hustle |
| 6 | * @since 4.3.0 |
| 7 | */ |
| 8 | |
| 9 | ob_start(); |
| 10 | ?> |
| 11 | <div class="sui-form-field hustle-css-selector"> |
| 12 | |
| 13 | <label for="hustle-offset--<?php echo esc_attr( $prefix ); ?>-selector" class="sui-label"><?php esc_html_e( 'CSS selector of the element', 'hustle' ); ?></label> |
| 14 | |
| 15 | <input |
| 16 | type="text" |
| 17 | name="<?php echo esc_html( $prefix ); ?>_css_selector" |
| 18 | data-attribute="<?php echo esc_html( $prefix ); ?>_css_selector" |
| 19 | value="<?php echo esc_attr( $settings[ $prefix . '_css_selector' ] ); ?>" |
| 20 | placeholder="#css-id" |
| 21 | id="hustle-offset--<?php echo esc_html( $prefix ); ?>-selector" |
| 22 | class="sui-form-control" |
| 23 | /> |
| 24 | |
| 25 | <span class="sui-error-message" style="display: none; text-align: right;"><?php esc_html_e( 'CSS selector is required.', 'hustle' ); ?></span> |
| 26 | |
| 27 | </div> |
| 28 | <?php |
| 29 | $content = ob_get_clean(); |
| 30 | |
| 31 | $options = array( |
| 32 | 'screen' => array( |
| 33 | 'value' => 'screen', |
| 34 | 'label' => __( 'Screen', 'hustle' ), |
| 35 | ), |
| 36 | 'css_selector' => array( |
| 37 | 'value' => 'css_selector', |
| 38 | 'label' => __( 'CSS Selector', 'hustle' ), |
| 39 | 'content' => $content, |
| 40 | ), |
| 41 | ); |
| 42 | ?> |
| 43 | |
| 44 | <div class="sui-form-field"> |
| 45 | |
| 46 | <span class="sui-settings-label"><?php esc_html_e( 'Offset', 'hustle' ); ?></span> |
| 47 | <span class="sui-description"><?php esc_html_e( "You can choose to offset the Floating Social relative to the screen of visitor's device or a specific CSS selector.", 'hustle' ); ?></span> |
| 48 | |
| 49 | </div> |
| 50 | |
| 51 | <?php // SETTINGS: Relative to. ?> |
| 52 | <div class="sui-form-field"> |
| 53 | |
| 54 | <label class="sui-label"><?php esc_html_e( 'Relative to', 'hustle' ); ?></label> |
| 55 | |
| 56 | <?php |
| 57 | $this->render( |
| 58 | 'admin/global/sui-components/sui-tabs', |
| 59 | array( |
| 60 | 'name' => $prefix . '_offset', |
| 61 | 'radio' => true, |
| 62 | 'saved_value' => $settings[ $prefix . '_offset' ], |
| 63 | 'sidetabs' => true, |
| 64 | 'content' => true, |
| 65 | 'content_class' => 'sui-tabs-content-lg', |
| 66 | 'options' => $options, |
| 67 | ) |
| 68 | ); |
| 69 | ?> |
| 70 | |
| 71 | </div> |
| 72 | |
| 73 | <?php // SETTINGS: Offset value. ?> |
| 74 | <div class="sui-row"> |
| 75 | |
| 76 | <div |
| 77 | id="hustle-<?php echo esc_attr( $prefix ); ?>-offset-x-wrapper" |
| 78 | class="sui-col<?php echo 'center' === $settings[ $prefix . '_position' ] ? ' sui-hidden' : ''; ?>" |
| 79 | > |
| 80 | |
| 81 | <div class="sui-form-field"> |
| 82 | |
| 83 | <label |
| 84 | for="hustle-<?php echo esc_html( $prefix ); ?>-offset-pixels-x" |
| 85 | id="hustle-<?php echo esc_attr( $prefix ); ?>-left-offset-label" |
| 86 | class="sui-label<?php echo 'right' === $settings[ $prefix . '_position' ] ? ' sui-hidden' : ''; ?>" |
| 87 | > |
| 88 | <?php esc_html_e( 'Left offset value (px)', 'hustle' ); ?> |
| 89 | </label> |
| 90 | |
| 91 | <label |
| 92 | for="hustle-<?php echo esc_html( $prefix ); ?>-offset-pixels-x" |
| 93 | id="hustle-<?php echo esc_attr( $prefix ); ?>-right-offset-label" |
| 94 | class="sui-label<?php echo 'right' !== $settings[ $prefix . '_position' ] ? ' sui-hidden' : ''; ?>" |
| 95 | > |
| 96 | <?php esc_html_e( 'Right offset value (px)', 'hustle' ); ?> |
| 97 | </label> |
| 98 | |
| 99 | <input |
| 100 | type="number" |
| 101 | name="<?php echo esc_html( $prefix ); ?>_offset_x" |
| 102 | value="<?php echo esc_attr( $settings[ $prefix . '_offset_x' ] ); ?>" |
| 103 | placeholder="0" |
| 104 | id="hustle-<?php echo esc_html( $prefix ); ?>-offset-pixels-x" |
| 105 | class="sui-form-control" |
| 106 | data-attribute="<?php echo esc_html( $prefix ); ?>_offset_x" |
| 107 | /> |
| 108 | |
| 109 | </div> |
| 110 | |
| 111 | </div> |
| 112 | |
| 113 | <div class="sui-col"> |
| 114 | |
| 115 | <div class="sui-form-field"> |
| 116 | |
| 117 | <label |
| 118 | for="hustle-<?php echo esc_html( $prefix ); ?>-offset-pixels-y" |
| 119 | id="hustle-<?php echo esc_attr( $prefix ); ?>-top-offset-label" |
| 120 | class="sui-label<?php echo 'top' !== $settings[ $prefix . '_position_y' ] ? ' sui-hidden' : ''; ?>" |
| 121 | > |
| 122 | <?php esc_html_e( 'Top offset value (px)', 'hustle' ); ?> |
| 123 | </label> |
| 124 | |
| 125 | <label |
| 126 | for="hustle-<?php echo esc_html( $prefix ); ?>-offset-pixels-y" |
| 127 | id="hustle-<?php echo esc_attr( $prefix ); ?>-bottom-offset-label" |
| 128 | class="sui-label<?php echo 'top' === $settings[ $prefix . '_position_y' ] ? ' sui-hidden' : ''; ?>" |
| 129 | > |
| 130 | <?php esc_html_e( 'Bottom offset value (px)', 'hustle' ); ?> |
| 131 | </label> |
| 132 | |
| 133 | <input |
| 134 | type="number" |
| 135 | name="<?php echo esc_html( $prefix ); ?>_offset_y" |
| 136 | data-attribute="<?php echo esc_html( $prefix ); ?>_offset_y" |
| 137 | value="<?php echo esc_attr( $settings[ $prefix . '_offset_y' ] ); ?>" |
| 138 | placeholder="0" |
| 139 | id="hustle-<?php echo esc_html( $prefix ); ?>-offset-pixels-y" |
| 140 | class="sui-form-control" |
| 141 | /> |
| 142 | |
| 143 | </div> |
| 144 | |
| 145 | </div> |
| 146 | |
| 147 | </div> |
| 148 |