| 1 |
<?php |
| 2 |
|
| 3 |
if ( ! defined( 'ABSPATH' ) ) { |
| 4 |
exit; // Exit if accessed directly. |
| 5 |
} |
| 6 |
|
| 7 |
class Bricksable_Lottie extends \Bricks\Element { |
| 8 |
public $category = 'bricksable'; |
| 9 |
public $name = 'ba-lottie'; |
| 10 |
public $icon = 'ti-wand'; |
| 11 |
public $scripts = array( 'bricksableLottie' ); |
| 12 |
|
| 13 |
public function get_label() { |
| 14 |
return esc_html__( 'Lottie', 'bricksable' ); |
| 15 |
} |
| 16 |
public function set_control_groups() { |
| 17 |
$this->control_groups['lottie_file'] = array( |
| 18 |
'title' => esc_html__( 'Lottie File', 'bricksable' ), |
| 19 |
'tab' => 'content', |
| 20 |
); |
| 21 |
$this->control_groups['link'] = array( |
| 22 |
'title' => esc_html__( 'Link', 'bricksable' ), |
| 23 |
'tab' => 'content', |
| 24 |
); |
| 25 |
$this->control_groups['lottie_settings'] = array( |
| 26 |
'title' => esc_html__( 'Lottie Settings', 'bricksable' ), |
| 27 |
'tab' => 'content', |
| 28 |
); |
| 29 |
|
| 30 |
} |
| 31 |
public function set_controls() { |
| 32 |
// File. |
| 33 |
$this->controls['source_separator'] = array( |
| 34 |
'tab' => 'content', |
| 35 |
'group' => 'lottie_file', |
| 36 |
'label' => esc_html__( 'Source', 'bricksable' ), |
| 37 |
'type' => 'separator', |
| 38 |
'description' => esc_html__( 'Note: Upload JSON file via Media through Editor will be added once Bricks added a media upload file. For now please use URL method.', 'bricksable' ), |
| 39 |
); |
| 40 |
$this->controls['source_type'] = array( |
| 41 |
'tab' => 'content', |
| 42 |
'group' => 'lottie_file', |
| 43 |
'label' => esc_html__( 'Source Type', 'bricksable' ), |
| 44 |
'type' => 'select', |
| 45 |
'options' => array( |
| 46 |
'url' => esc_html__( 'External URL', 'bricksable' ), |
| 47 |
'media' => esc_html__( 'Upload JSON File (Coming)', 'bricksable' ), |
| 48 |
), |
| 49 |
'default' => 'url', |
| 50 |
'placeholder' => esc_html__( 'External URL', 'bricksable' ), |
| 51 |
); |
| 52 |
$this->controls['url'] = array( |
| 53 |
'tab' => 'content', |
| 54 |
'group' => 'lottie_file', |
| 55 |
'label' => esc_html__( 'Lottie URL', 'bricksable' ), |
| 56 |
'type' => 'text', |
| 57 |
'placeholder' => esc_html__( 'https://assets5.lottiefiles.com/private_files/lf30_hhvn1H.json', 'bricksable' ), |
| 58 |
); |
| 59 |
// Link To. |
| 60 |
$this->controls['linkToSeparator'] = array( |
| 61 |
'tab' => 'content', |
| 62 |
'group' => 'link', |
| 63 |
'type' => 'separator', |
| 64 |
'label' => esc_html__( 'Link To', 'bricksable' ), |
| 65 |
); |
| 66 |
$this->controls['link'] = array( |
| 67 |
'tab' => 'content', |
| 68 |
'group' => 'link', |
| 69 |
'type' => 'select', |
| 70 |
'options' => array( |
| 71 |
'url' => esc_html__( 'Other (URL)', 'bricksable' ), |
| 72 |
), |
| 73 |
'placeholder' => esc_html__( 'None', 'bricksable' ), |
| 74 |
); |
| 75 |
$this->controls['link_url'] = array( |
| 76 |
'tab' => 'content', |
| 77 |
'group' => 'link', |
| 78 |
'label' => esc_html__( 'Link type', 'bricksable' ), |
| 79 |
'type' => 'link', |
| 80 |
'required' => array( 'link', '=', 'url' ), |
| 81 |
); |
| 82 |
// Settings. |
| 83 |
$this->controls['trigger'] = array( |
| 84 |
'tab' => 'content', |
| 85 |
'group' => 'lottie_settings', |
| 86 |
'label' => esc_html__( 'Trigger', 'bricksable' ), |
| 87 |
'type' => 'select', |
| 88 |
'options' => array( |
| 89 |
'viewport' => esc_html__( 'Viewport', 'bricksable' ), |
| 90 |
'click' => esc_html__( 'On Click', 'bricksable' ), |
| 91 |
'hover' => esc_html__( 'On Hover', 'bricksable' ), |
| 92 |
'scroll' => esc_html__( 'Scroll', 'bricksable' ), |
| 93 |
'none' => esc_html__( 'None', 'bricksable' ), |
| 94 |
), |
| 95 |
'default' => 'viewport', |
| 96 |
'placeholder' => esc_html__( 'Viewport', 'bricksable' ), |
| 97 |
); |
| 98 |
$this->controls['mouseout_action'] = array( |
| 99 |
'tab' => 'content', |
| 100 |
'group' => 'lottie_settings', |
| 101 |
'label' => esc_html__( 'Mouseout Action', 'bricksable' ), |
| 102 |
'type' => 'select', |
| 103 |
'options' => array( |
| 104 |
'no_action' => esc_html__( 'No Action', 'bricksable' ), |
| 105 |
'stop' => esc_html__( 'Stop', 'bricksable' ), |
| 106 |
'pause' => esc_html__( 'Pause', 'bricksable' ), |
| 107 |
'reverse' => esc_html__( 'Reverse', 'bricksable' ), |
| 108 |
), |
| 109 |
'default' => 'no_action', |
| 110 |
'placeholder' => esc_html__( 'No Action', 'bricksable' ), |
| 111 |
'required' => array( 'trigger', '=', 'hover' ), |
| 112 |
); |
| 113 |
$this->controls['scroll_trigger'] = array( |
| 114 |
'tab' => 'content', |
| 115 |
'group' => 'lottie_settings', |
| 116 |
'label' => esc_html__( 'On Scroll Animation', 'bricksable' ), |
| 117 |
'type' => 'select', |
| 118 |
'options' => array( |
| 119 |
'document' => esc_html__( 'Body', 'bricksable' ), |
| 120 |
'section' => esc_html__( 'Section', 'bricksable' ), |
| 121 |
), |
| 122 |
'default' => 'document', |
| 123 |
'placeholder' => esc_html__( 'Body', 'bricksable' ), |
| 124 |
'required' => array( 'trigger', '=', 'scroll' ), |
| 125 |
); |
| 126 |
$this->controls['loop'] = array( |
| 127 |
'tab' => 'content', |
| 128 |
'group' => 'lottie_settings', |
| 129 |
'label' => esc_html__( 'Loop', 'bricksable' ), |
| 130 |
'type' => 'checkbox', |
| 131 |
'default' => true, |
| 132 |
'required' => array( 'trigger', '!=', 'scroll' ), |
| 133 |
); |
| 134 |
$this->controls['use_number_loop'] = array( |
| 135 |
'tab' => 'content', |
| 136 |
'group' => 'lottie_settings', |
| 137 |
'label' => esc_html__( 'Use Number of Loops', 'bricksable' ), |
| 138 |
'type' => 'checkbox', |
| 139 |
'required' => array( 'loop', '=', true ), |
| 140 |
|
| 141 |
); |
| 142 |
$this->controls['number_loop'] = array( |
| 143 |
'tab' => 'content', |
| 144 |
'group' => 'lottie_settings', |
| 145 |
'label' => esc_html__( 'Number of Loop', 'bricksable' ), |
| 146 |
'type' => 'slider', |
| 147 |
'unitless' => true, |
| 148 |
'min' => 1, |
| 149 |
'max' => 10, |
| 150 |
'step' => '1', |
| 151 |
'default' => '2', |
| 152 |
'placeholder' => esc_html__( '1', 'bricksable' ), |
| 153 |
'description' => esc_html__( 'This option is only available if True is selected for Loop. Enter the number of times you wish to have the animation loop before stopping.', 'bricksable' ), |
| 154 |
'required' => array( 'use_number_loop', '=', true ), |
| 155 |
); |
| 156 |
$this->controls['direction'] = array( |
| 157 |
'tab' => 'content', |
| 158 |
'group' => 'lottie_settings', |
| 159 |
'label' => esc_html__( 'Reverse', 'bricksable' ), |
| 160 |
'type' => 'checkbox', |
| 161 |
'required' => array( 'loop', '=', true ), |
| 162 |
); |
| 163 |
$this->controls['speed'] = array( |
| 164 |
'tab' => 'content', |
| 165 |
'group' => 'lottie_settings', |
| 166 |
'label' => esc_html__( 'Animation Speed', 'bricksable' ), |
| 167 |
'type' => 'slider', |
| 168 |
'unitless' => true, |
| 169 |
'min' => 1, |
| 170 |
'max' => 5, |
| 171 |
'step' => '1', |
| 172 |
'default' => '1', |
| 173 |
'placeholder' => esc_html__( '1', 'bricksable' ), |
| 174 |
'description' => esc_html__( 'Increase or decrease the animation speed.', 'bricksable' ), |
| 175 |
'required' => array( 'trigger', '!=', 'scroll' ), |
| 176 |
); |
| 177 |
} |
| 178 |
|
| 179 |
public function enqueue_scripts() { |
| 180 |
if ( ! bricks_is_builder_iframe() ) { |
| 181 |
wp_enqueue_script( 'ba-lottie' ); |
| 182 |
wp_localize_script( |
| 183 |
'ba-lottie', |
| 184 |
'bricksableLottieData', |
| 185 |
array( |
| 186 |
'lottieInstances' => array(), |
| 187 |
) |
| 188 |
); |
| 189 |
} |
| 190 |
} |
| 191 |
|
| 192 |
public function render() { |
| 193 |
$settings = $this->settings; |
| 194 |
|
| 195 |
$url = isset( $settings['url'] ) ? esc_url( $settings['url'] ) : 'https://assets5.lottiefiles.com/private_files/lf30_hhvn1H.json'; |
| 196 |
$number_loop = isset( $settings['use_number_loop'] ) ? true : false; |
| 197 |
$trigger = isset( $settings['trigger'] ) ? $settings['trigger'] : 'viewport'; |
| 198 |
$mouseout_action = isset( $settings['mouseout_action'] ) ? $settings['mouseout_action'] : 'no_action'; |
| 199 |
$mouseout = 'hover' === $trigger ? $mouseout_action : false; |
| 200 |
|
| 201 |
$lottie_options = array( |
| 202 |
'url' => $url, |
| 203 |
'trigger' => $trigger, |
| 204 |
'loop' => isset( $settings['loop'] ) ? true : false, |
| 205 |
'usenumberLoop' => isset( $settings['use_number_loop'] ) ? true : false, |
| 206 |
'numberLoop' => isset( $settings['number_loop'] ) ? intval( $settings['number_loop'] ) : 2, |
| 207 |
'speed' => isset( $settings['speed'] ) ? intval( $settings['speed'] ) : 1, |
| 208 |
'direction' => isset( $settings['direction'] ) ? -1 : 1, |
| 209 |
'mouseout' => $mouseout, |
| 210 |
'scroll' => isset( $settings['scroll_trigger'] ) ? $settings['scroll_trigger'] : 'document', |
| 211 |
); |
| 212 |
|
| 213 |
$this->set_attribute( 'wrapper', 'id', 'ba-bricks-lottie-' . $this->id ); |
| 214 |
$this->set_attribute( 'wrapper', 'class', 'ba-lottie-wrapper' ); |
| 215 |
$this->set_attribute( 'wrapper', 'data-ba-bricks-lottie-options', wp_json_encode( $lottie_options ) ); |
| 216 |
|
| 217 |
// Render. |
| 218 |
$close_a_tag = false; |
| 219 |
|
| 220 |
if ( isset( $settings['link_url'] ) && 'url' === $settings['link'] && isset( $settings['link_url'] ) ) { |
| 221 |
$close_a_tag = true; |
| 222 |
|
| 223 |
// Link. |
| 224 |
$this->set_link_attributes( 'a', $settings['link_url'] ); |
| 225 |
|
| 226 |
echo '<a ' . $this->render_attributes( 'a' ) . '>'; //phpcs:ignore |
| 227 |
} |
| 228 |
|
| 229 |
//phpcs:ignore |
| 230 |
echo '<div ' . $this->render_attributes( 'wrapper' ) . '>'; |
| 231 |
echo '</div>'; |
| 232 |
if ( $close_a_tag ) { |
| 233 |
echo '</a>'; |
| 234 |
} |
| 235 |
} |
| 236 |
} |
| 237 |
|
