PluginProbe
Borderless – Addons and Templates for Elementor / trunk
Borderless – Addons and Templates for Elementor vtrunk
trunk 1.0.0 1.0.1 1.0.2 1.0.3 1.0.4 1.0.5 1.0.6 1.0.7 1.0.8 1.0.9 1.1.0 1.1.1 1.1.2 1.1.3 1.1.4 1.1.5 1.1.6 1.1.7 1.1.8 1.1.9 1.2.0 1.2.1 1.2.2 1.2.3 All 78 releases
borderless / modules / wpbakery / elements / infobox.php

infobox.php in Borderless – Addons and Templates for Elementor trunk, at modules/wpbakery/elements/infobox.php

600 lines 23.8 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 <?php
2 if ( ! defined( 'ABSPATH' ) ) {
3 die( '-1' );
4 }
5
6 /*-----------------------------------------------------------------------------------*/
7 /* Infobox
8 /*-----------------------------------------------------------------------------------*/
9
10 class WPBakeryShortCode_borderless_wpbakery_infobox extends WPBakeryShortCode {
11 protected function content( $atts, $content = null ) {
12 extract( shortcode_atts( array(
13 'title' => '',
14 'link' => '',
15 'icon_display' => '',
16 'custom_image_icon' => '',
17 'custom_svg_icon' => '',
18 'icon' => '',
19 'icon_color' => '',
20 'custom_icon_color' => '',
21 'shape' => '',
22 'color_shape' => '',
23 'icon_size' => '',
24 'icon_spacing' => '',
25 'icon_gap' => '0',
26 'height' => 'auto',
27 'width' => '100px',
28 'style' => 'column',
29 'alignment' => 'flex-start',
30 'animations' => '',
31 'animation_delay' => '',
32 'animation_speed' => 'slower animated infinite',
33 'title_tag' => 'h3',
34 'title_size' => '',
35 'title_line_height' => '',
36 'title_spacing' => '',
37 'title_alignment' => '',
38 'title_color' => '',
39 //Static
40 'el_id' => '',
41 'el_class' => '',
42 'css' => '',
43 'css_animation' => ''
44 ), $atts ) );
45
46 // SECURITY: Ensure that only allowed tags are used in $title_tag
47 $accepted_tags = array( 'h1', 'h2', 'h3', 'h4', 'h5', 'h6' );
48 $title_tag = in_array( $title_tag, $accepted_tags, true ) ? $title_tag : 'h2';
49
50 $output = '';
51
52 // Assets.
53 wp_enqueue_style(
54 'borderless-wpbakery-style',
55 BORDERLESS__STYLES . 'wpbakery.min.css',
56 false,
57 BORDERLESS__VERSION
58 );
59
60 // Retrieve data from the database.
61 $options = get_option( 'borderless' );
62
63 // Set default values
64 $borderless_primary_color = isset( $options['primary_color'] ) ? esc_attr( $options['primary_color'] ) : '#3379fc';
65 $borderless_secondary_color = isset( $options['secondary_color'] ) ? esc_attr( $options['secondary_color'] ) : '#3379fc';
66 $borderless_text_color = isset( $options['text_color'] ) ? esc_attr( $options['text_color'] ) : '';
67 $borderless_accent_color = isset( $options['accent_color'] ) ? esc_attr( $options['accent_color'] ) : '#3379fc';
68
69 // Default Extra Class, CSS and CSS animation
70 $css = isset( $atts['css'] ) ? esc_attr( $atts['css'] ) : '';
71 $el_id = isset( $atts['el_id'] ) ? 'id="' . esc_attr( $atts['el_id'] ) . '"' : '';
72 $el_class = isset( $atts['el_class'] ) ? esc_attr( $atts['el_class'] ) : '';
73 if ( '' !== $css_animation ) {
74 wp_enqueue_script( 'waypoints' );
75 $css_animation_style = ' wpb_animate_when_almost_visible wpb_' . esc_attr( $css_animation );
76 }
77 $class_to_filter = vc_shortcode_custom_css_class( $css, ' ' ) . $this->getExtraClass( $el_class ) . $this->getCSSAnimation( $css_animation );
78 $css_class = apply_filters( VC_SHORTCODE_CUSTOM_CSS_FILTER_TAG, $class_to_filter, $this->settings['base'], $atts );
79
80 // Link
81 if ( $link != '' ) {
82 $link = vc_build_link( $link );
83 $link_start = '<a href="' . esc_url( $link['url'] ) . '">';
84 $link_finish = '</a>';
85 } else {
86 $link_start = '';
87 $link_finish = '';
88 }
89
90 // Title
91 $title_color = $title_color ? 'color:' . esc_attr( $title_color ) . ';' : 'color:' . esc_attr( $borderless_primary_color ) . ';';
92 $title_size = $title_size ? 'font-size:' . esc_attr( $title_size ) . ';' : '';
93 $title_line_height = $title_line_height ? 'line-height:' . esc_attr( $title_line_height ) . ';' : '';
94 $title_spacing = $title_spacing ? 'margin:' . esc_attr( $title_spacing ) . ';' : '';
95 $title_alignment = $title_alignment ? 'text-align:' . esc_attr( $title_alignment ) . ';' : '';
96 $title_content = $link_start . '<' . esc_attr( $title_tag ) . ' style="' . esc_attr( $title_size . $title_line_height . $title_spacing . $title_alignment . $title_color ) . '">' . esc_html( $title ) . '</' . esc_attr( $title_tag ) . '>' . $link_finish;
97
98 // Icon
99 $icon_content = '';
100 if ( $icon_display == 'image_icon' ) {
101 $default_src = vc_asset_url( 'vc/no_image.png' );
102 $img = wp_get_attachment_image_src( $custom_image_icon );
103 $src = $img[0];
104 $custom_src = $src ? esc_url( $src ) : esc_url( $default_src );
105 $icon_content = '<img src="' . $custom_src . '" >';
106 } elseif ( $icon_display == 'svg_icon' ) {
107 $default_src = vc_asset_url( 'vc/no_image.png' );
108 $img = wp_get_attachment_image_src( $custom_svg_icon );
109 $src = $img[0];
110 $custom_src = $src ? esc_url( $src ) : esc_url( $default_src );
111 $icon_content = '<div class="borderless-wpbakery-infobox-svg" style="height:' . esc_attr( $height ) . ';width:' . esc_attr( $width ) . ';"><img class="borderless-svg-img" src="' . $custom_src . '" ></div>';
112 } else {
113 $icon_class = isset( $icon ) ? esc_attr( $icon ) : 'fa fa-adjust';
114 $custom_icon_color = $icon_color ? 'color:' . esc_attr( $custom_icon_color ) . ';' : 'color:' . esc_attr( $borderless_primary_color ) . ';';
115 $font_size_reference = $icon_size;
116 if($icon_size != '') {
117 $icon_size = 'font-size:' . esc_attr( $icon_size ) . ';';
118 }
119 if ( $shape != '' ) {
120 if($shape == 'rounded' || $shape == 'square' || $shape == 'round') {
121 $color_shape = $color_shape ? 'background-color:'.esc_attr( $color_shape ).';' : 'background-color:'.esc_attr( $borderless_primary_color ).';';
122 } else {
123 $color_shape = $color_shape ? 'border-color:'.esc_attr( $color_shape ).';' : 'border-color:'.esc_attr( $borderless_primary_color ).';';
124 }
125 if($icon_spacing != '') {
126 $icon_spacing = 'height:'.esc_attr( $icon_spacing ).'; width:'.esc_attr( $icon_spacing ).';';
127 } else {
128 $icon_spacing = 'height:calc('.esc_attr( $font_size_reference ).' + 2em); width:calc('.esc_attr( $font_size_reference ).' + 2em);';
129 }
130 $shape_render_start = '<div class="borderless-wpbakery-infobox-type '.$shape.'" style="'.$color_shape.''.$icon_spacing.'">';
131 $shape_render_finish = '</div>';
132 } else {
133 $shape_render_start = $shape_render_finish = '';
134 }
135 $icon_content = $shape_render_start . '<span class="' . esc_attr( $icon_class ) . '" style="' . esc_attr( $custom_icon_color . $icon_size ) . '"></span>' . $shape_render_finish;
136 }
137
138 // Gap
139 $icon_gap = 'style="margin:' . esc_attr( $icon_gap ) . ';"';
140
141 // Style
142 $style_alignment = 'style="flex-direction:' . esc_attr( $style ) . '; align-items:' . esc_attr( $alignment ) . ';"';
143
144 // Output
145 $output .= '<div ' . $el_id . ' class="borderless-wpbakery-infobox ' . esc_attr( $css_class ) . '" ' . $style_alignment . '>';
146 $output .= '<div class="borderless-wpbakery-infobox-icon ' . esc_attr( $animations . ' ' . $animation_delay . ' ' . $animation_speed ) . '" ' . $icon_gap . '>';
147 $output .= $icon_content;
148 $output .= '</div>';
149 $output .= '<div class="borderless-wpbakery-infobox-content">';
150 $output .= $title_content;
151 $output .= wp_kses_post( $content );
152 $output .= '</div>';
153 $output .= '</div>';
154
155 return $output;
156 }
157 }
158
159
160 return array(
161 'name' => __( 'Infobox', 'borderless' ),
162 'base' => 'borderless_wpbakery_infobox',
163 'icon' => plugins_url('../images/infobox.png', __FILE__),
164 'show_settings_on_create' => true,
165 'category' => __( 'Borderless', 'borderless' ),
166 'description' => __( 'Create nice looking infoboxes', 'borderless' ),
167 'params' => array(
168
169 array(
170 'type' => 'textfield',
171 'heading' => __( 'Title', 'borderless' ),
172 'param_name' => 'title',
173 'description' => __( 'Enter the title here.', 'borderless' ),
174 ),
175
176 array(
177 'type' => 'vc_link',
178 'heading' => __( 'URL (Link)', 'borderless' ),
179 'param_name' => 'link',
180 'description' => __( 'Add link to infobox title.', 'borderless' ),
181 ),
182
183 array(
184 'type' => 'textarea_html',
185 'holder' => 'div',
186 'heading' => __( 'Description', 'borderless' ),
187 'param_name' => 'content',
188 'description' => __( 'Provide the description for this Infobox.', 'borderless' ),
189 'value' => __( '<p>I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>', 'borderless' ),
190 ),
191
192 /*
193 * Icon Tab
194 */
195
196 array(
197 'type' => 'dropdown',
198 'heading' => __( 'Icon to display', 'borderless' ),
199 'param_name' => 'icon_display',
200 'value' => array(
201 __( 'Icon Manager', 'borderless' ) => 'icon_manager',
202 __( 'Image Icon', 'borderless' ) => 'image_icon',
203 __( 'SVG Icon', 'borderless' ) => 'svg_icon',
204 ),
205 'description' => __( 'Enable Icon Library.', 'borderless' ),
206 'group' => 'Icon',
207 ),
208
209 array(
210 'type' => 'attach_image',
211 'heading' => __( 'Upload Image Icon', 'borderless' ),
212 'param_name' => 'custom_image_icon',
213 'description' => __( 'Upload the custom image icon.', 'borderless' ),
214 'group' => 'Icon',
215 'dependency' => array(
216 'element' => 'icon_display',
217 'value' => array( 'image_icon' ),
218 ),
219 ),
220
221 array(
222 'type' => 'attach_image',
223 'heading' => __( 'Upload SVG Icon', 'borderless' ),
224 'param_name' => 'custom_svg_icon',
225 'description' => __( 'Upload the custom svg icon.', 'borderless' ),
226 'group' => 'Icon',
227 'dependency' => array(
228 'element' => 'icon_display',
229 'value' => array( 'svg_icon' ),
230 ),
231 ),
232
233 array(
234 'type' => 'iconmanager',
235 'heading' => __( 'Icon', 'borderless' ),
236 'param_name' => 'icon',
237 'description' => __( 'Select icon from library.', 'borderless' ),
238 'group' => 'Icon',
239 'dependency' => array(
240 'element' => 'icon_display',
241 'value' => array( 'icon_manager' ),
242 ),
243 ),
244
245 array(
246 'type' => 'dropdown',
247 'heading' => __( 'Icon color', 'borderless' ),
248 'param_name' => 'icon_color',
249 'value' => array(
250 __( 'Preset Color', 'borderless' ) => '',
251 __( 'Custom Color', 'borderless' ) => 'custom',
252 ),
253 'description' => __( 'Select icon color.', 'borderless' ),
254 'dependency' => array(
255 'element' => 'icon_display',
256 'value' => array( 'icon_manager' ),
257 ),
258 'group' => 'Icon',
259 ),
260 array(
261 'type' => 'colorpicker',
262 'heading' => __( 'Custom Icon Color', 'borderless' ),
263 'param_name' => 'custom_icon_color',
264 'description' => __( 'Select custom icon color.', 'borderless' ),
265 'group' => 'Icon',
266 'dependency' => array(
267 'element' => 'icon_color',
268 'value' => array( 'custom' ),
269 ),
270 ),
271 array(
272 'type' => 'dropdown',
273 'heading' => __( 'Shape', 'borderless' ),
274 'description' => __( 'Select icon shape.', 'borderless' ),
275 'param_name' => 'shape',
276 'group' => 'Icon',
277 'dependency' => array(
278 'element' => 'icon_display',
279 'value' => array( 'icon_manager' ),
280 ),
281 'value' => array(
282 __( 'None', 'borderless' ) => '',
283 __( 'Rounded', 'borderless' ) => 'rounded',
284 __( 'Square', 'borderless' ) => 'square',
285 __( 'Round', 'borderless' ) => 'round',
286 __( 'Outline Rounded', 'borderless' ) => 'outline-rounded',
287 __( 'Outline Square', 'borderless' ) => 'outline-square',
288 __( 'Outline Round', 'borderless' ) => 'outline-round',
289 ),
290 ),
291 array(
292 'type' => 'colorpicker',
293 'heading' => __( 'Color Shape', 'borderless' ),
294 'param_name' => 'color_shape',
295 'description' => __( 'Select custom shape background color.', 'borderless' ),
296 'group' => 'Icon',
297 'dependency' => array(
298 'element' => 'shape',
299 'value' => array( 'rounded','square','round','outline-rounded','outline-square','outline-round', ),
300 ),
301 ),
302 array(
303 'type' => 'textfield',
304 'heading' => __( 'Size', 'borderless' ),
305 'param_name' => 'icon_size',
306 'description' => __( 'Icon size. Default value is 16px.', 'borderless' ),
307 'dependency' => array(
308 'element' => 'icon_display',
309 'value' => array( 'icon_manager' ),
310 ),
311 'group' => 'Icon',
312 ),
313 array(
314 'type' => 'textfield',
315 'heading' => __( 'Spacing', 'borderless' ),
316 'param_name' => 'icon_spacing',
317 'description' => __( 'Select icon spacing. e.g. 16px.', 'borderless' ),
318 'dependency' => array(
319 'element' => 'icon_display',
320 'value' => array( 'icon_manager' ),
321 ),
322 'group' => 'Icon',
323 ),
324 array(
325 'type' => 'textfield',
326 'heading' => __( 'Height', 'borderless' ),
327 'param_name' => 'height',
328 'description' => __( 'Insert the SVG height.', 'borderless' ),
329 'dependency' => array(
330 'element' => 'icon_display',
331 'value' => array( 'svg_icon' ),
332 ),
333 'group' => 'Icon',
334 ),
335 array(
336 'type' => 'textfield',
337 'heading' => __( 'Width', 'borderless' ),
338 'param_name' => 'width',
339 'description' => __( 'Insert the SVG width.', 'borderless' ),
340 'dependency' => array(
341 'element' => 'icon_display',
342 'value' => array( 'svg_icon' ),
343 ),
344 'group' => 'Icon',
345 ),
346 array(
347 'type' => 'textfield',
348 'heading' => __( 'Gap', 'borderless' ),
349 'param_name' => 'icon_gap',
350 'description' => __( 'Select icon gap. e.g. 16px.', 'borderless' ),
351 'group' => 'Icon',
352 ),
353 array(
354 'type' => 'dropdown',
355 'heading' => __( 'Style', 'borderless' ),
356 'param_name' => 'style',
357 'value' => array(
358 __( 'Icon at Top', 'borderless' ) => 'column',
359 __( 'Icon at Bottom', 'borderless' ) => 'column-reverse',
360 __( 'Icon at Left', 'borderless' ) => 'row',
361 __( 'Icon at Right', 'borderless' ) => 'row-reverse',
362 ),
363 'description' => __( 'Select icon position. Icon box style will be changed according to the icon position.', 'borderless' ),
364 'group' => 'Icon',
365 ),
366
367 array(
368 'type' => 'dropdown',
369 'heading' => __( 'Alignment', 'borderless' ),
370 'param_name' => 'alignment',
371 'value' => array(
372 __( 'Start', 'borderless' ) => 'flex-start',
373 __( 'Center', 'borderless' ) => 'center',
374 __( 'End', 'borderless' ) => 'flex-end',
375 ),
376 'description' => __( 'Select icon alignment.', 'borderless' ),
377 'group' => 'Icon',
378 ),
379
380 array(
381 'type' => 'dropdown',
382 'heading' => __( 'Animations', 'borderless' ),
383 'param_name' => 'animations',
384 'value' => array(
385 __( 'No Animation', 'borderless' ) => '',
386 __( 'Bounce', 'borderless' ) => 'bounce',
387 __( 'Flash', 'borderless' ) => 'flash',
388 __( 'Pulse', 'borderless' ) => 'pulse',
389 __( 'Rubber Band', 'borderless' ) => 'rubberBand',
390 __( 'Shake', 'borderless' ) => 'shake',
391 __( 'Head Shake', 'borderless' ) => 'headShake',
392 __( 'Swing', 'borderless' ) => 'swing',
393 __( 'Tada', 'borderless' ) => 'tada',
394 __( 'Wobble', 'borderless' ) => 'wobble',
395 __( 'Jello', 'borderless' ) => 'jello',
396 __( 'Bounce In', 'borderless' ) => 'bounceIn',
397 __( 'Bounce In Down', 'borderless' ) => 'bounceInDown',
398 __( 'Bounce In Left', 'borderless' ) => 'bounceInLeft',
399 __( 'Bounce In Right', 'borderless' ) => 'bounceInRight',
400 __( 'Bounce In Up', 'borderless' ) => 'bounceInUp',
401 __( 'Bounce Out', 'borderless' ) => 'bounceOut',
402 __( 'Bounce Out Down', 'borderless' ) => 'bounceOutDown',
403 __( 'Bounce Out Left', 'borderless' ) => 'bounceOutLeft',
404 __( 'Bounce Out Right', 'borderless' ) => 'bounceOutRight',
405 __( 'Bounce Out Up', 'borderless' ) => 'bounceOutUp',
406 __( 'Fade In', 'borderless' ) => 'fadeIn',
407 __( 'Fade In Down', 'borderless' ) => 'fadeInDown',
408 __( 'Fade In Down Big', 'borderless' ) => 'fadeInDownBig',
409 __( 'Fade In Left', 'borderless' ) => 'fadeInLeft',
410 __( 'Fade In Left Big', 'borderless' ) => 'fadeInLeftBig',
411 __( 'Fade In Right', 'borderless' ) => 'fadeInRight',
412 __( 'Fade In Right Big', 'borderless' ) => 'fadeInRightBig',
413 __( 'Fade In Up', 'borderless' ) => 'fadeInUp',
414 __( 'Fade In Up Big', 'borderless' ) => 'fadeInUpBig',
415 __( 'Fade Out', 'borderless' ) => 'fadeOut',
416 __( 'Fade Out Down', 'borderless' ) => 'fadeOutDown',
417 __( 'Fade Out Down Big', 'borderless' ) => 'fadeOutDownBig',
418 __( 'Fade Out Left', 'borderless' ) => 'fadeOutLeft',
419 __( 'Fade Out Left Big', 'borderless' ) => 'fadeOutLeftBig',
420 __( 'Fade Out Right', 'borderless' ) => 'fadeOutRight',
421 __( 'Fade Out Right Big', 'borderless' ) => 'fadeOutRightBig',
422 __( 'Fade Out Up', 'borderless' ) => 'fadeOutUp',
423 __( 'Fade Out Up Big', 'borderless' ) => 'fadeOutUpBig',
424 __( 'Flip In X', 'borderless' ) => 'flipInX',
425 __( 'Flip In Y', 'borderless' ) => 'flipInY',
426 __( 'Flip Out X', 'borderless' ) => 'flipOutX',
427 __( 'Flip Out Y', 'borderless' ) => 'flipOutY',
428 __( 'Light Speed In', 'borderless' ) => 'lightSpeedIn',
429 __( 'Light Speed Out', 'borderless' ) => 'lightSpeedOut',
430 __( 'Rotate In', 'borderless' ) => 'rotateIn',
431 __( 'Rotate In Down Left', 'borderless' ) => 'rotateInDownLeft',
432 __( 'Rotate In Down Right', 'borderless' ) => 'rotateInDownRight',
433 __( 'Rotate In Up Left', 'borderless' ) => 'rotateInUpLeft',
434 __( 'Rotate In Up Right', 'borderless' ) => 'rotateInUpRight',
435 __( 'Rotate Out', 'borderless' ) => 'rotateOut',
436 __( 'Rotate Out Down Left', 'borderless' ) => 'rotateOutDownLeft',
437 __( 'Rotate Out Down Right', 'borderless' ) => 'rotateOutDownRight',
438 __( 'Rotate Out Up Left', 'borderless' ) => 'rotateOutUpLeft',
439 __( 'Rotate Out Up Right', 'borderless' ) => 'rotateOutUpRight',
440 __( 'Hinge', 'borderless' ) => 'hinge',
441 __( 'Jack In The Box', 'borderless' ) => 'jackInTheBox',
442 __( 'Roll In', 'borderless' ) => 'rollIn',
443 __( 'Roll Out', 'borderless' ) => 'rollOut',
444 __( 'Zoom In', 'borderless' ) => 'zoomIn',
445 __( 'Zoom In Down', 'borderless' ) => 'zoomInDown',
446 __( 'Zoom In Left', 'borderless' ) => 'zoomInLeft',
447 __( 'Zoom In Right', 'borderless' ) => 'zoomInRight',
448 __( 'Zoom In Up', 'borderless' ) => 'zoomInUp',
449 __( 'Zoom Out', 'borderless' ) => 'zoomOut',
450 __( 'Zoom Out Down', 'borderless' ) => 'zoomOutDown',
451 __( 'Zoom Out Left', 'borderless' ) => 'zoomOutLeft',
452 __( 'Zoom Out Right', 'borderless' ) => 'zoomOutRight',
453 __( 'Zoom Out Up', 'borderless' ) => 'zoomOutUp',
454 __( 'Slide In Down', 'borderless' ) => 'slideInDown',
455 __( 'Slide In Left', 'borderless' ) => 'slideInLeft',
456 __( 'Slide In Right', 'borderless' ) => 'slideInRight',
457 __( 'Slide In Up', 'borderless' ) => 'slideInUp',
458 __( 'Slide Out Down', 'borderless' ) => 'slideOutDown',
459 __( 'Slide Out Left', 'borderless' ) => 'slideOutLeft',
460 __( 'Slide Out Right', 'borderless' ) => 'slideOutRight',
461 __( 'Slide Out Up', 'borderless' ) => 'slideOutUp',
462 __( 'Heart Beat', 'borderless' ) => 'heartBeat',
463
464 ),
465 'description' => __( 'Select the type of animation you want on hover.', 'borderless' ),
466 'group' => 'Icon',
467 ),
468
469 array(
470 'type' => 'dropdown',
471 'heading' => __( 'Animation Delay', 'borderless' ),
472 'param_name' => 'animation_delay',
473 'value' => array(
474 __( 'No Delay', 'borderless' ) => '',
475 __( 'Delay 1 second', 'borderless' ) => 'delay-1s',
476 __( 'Delay 2 seconds', 'borderless' ) => 'delay-2s',
477 __( 'Delay 3 seconds', 'borderless' ) => 'delay-3s',
478 __( 'Delay 4 seconds', 'borderless' ) => 'delay-4s',
479 __( 'Delay 5 seconds', 'borderless' ) => 'delay-5s',
480
481 ),
482 'dependency' => array(
483 'element' => 'animations',
484 'value' => array( 'bounce','flash','pulse','rubberBand','shake','headShake','swing','tada','wobble','jello','bounceIn','bounceInDown','bounceInLeft','bounceInRight','bounceInUp','bounceOut','bounceOutDown','bounceOutLeft','bounceOutRight','bounceOutUp','fadeIn','fadeInDown','fadeInDownBig','fadeInLeft','fadeInLeftBig','fadeInRight','fadeInRightBig','fadeInUp','fadeInUpBig','fadeOut','fadeOutDown','fadeOutDownBig','fadeOutLeft','fadeOutLeftBig','fadeOutRight','fadeOutRightBig','fadeOutUp','fadeOutUpBig','flipInX','flipInY','flipOutX','flipOutY','lightSpeedIn','lightSpeedOut','rotateIn','rotateInDownLeft','rotateInDownRight','rotateInUpLeft','rotateInUpRight','rotateOut','rotateOutDownLeft','rotateOutDownRight','rotateOutUpLeft','rotateOutUpRight','hinge','jackInTheBox','rollIn','rollOut','zoomIn','zoomInDown','zoomInLeft','zoomInRight','zoomInUp','zoomOut','zoomOutDown','zoomOutLeft','zoomOutRight','zoomOutUp','slideInDown','slideInLeft','slideInRight','slideInUp','slideOutDown','slideOutLeft','slideOutRight','slideOutUp','heartBeat' ),
485 ),
486 'description' => __( 'Select delay for animation.', 'borderless' ),
487 'group' => 'Icon',
488 ),
489
490 array(
491 'type' => 'dropdown',
492 'heading' => __( 'Animation Speed', 'borderless' ),
493 'param_name' => 'animation_speed',
494 'value' => array(
495 __( 'Slower - 3s', 'borderless' ) => 'slower animated infinite',
496 __( 'Slow - 2s', 'borderless' ) => 'slow animated infinite',
497 __( 'Fast - 800ms', 'borderless' ) => 'fast animated infinite',
498 __( 'Faster - 500ms', 'borderless' ) => 'faster animated infinite',
499
500 ),
501 'dependency' => array(
502 'element' => 'animations',
503 'value' => array( 'bounce','flash','pulse','rubberBand','shake','headShake','swing','tada','wobble','jello','bounceIn','bounceInDown','bounceInLeft','bounceInRight','bounceInUp','bounceOut','bounceOutDown','bounceOutLeft','bounceOutRight','bounceOutUp','fadeIn','fadeInDown','fadeInDownBig','fadeInLeft','fadeInLeftBig','fadeInRight','fadeInRightBig','fadeInUp','fadeInUpBig','fadeOut','fadeOutDown','fadeOutDownBig','fadeOutLeft','fadeOutLeftBig','fadeOutRight','fadeOutRightBig','fadeOutUp','fadeOutUpBig','flipInX','flipInY','flipOutX','flipOutY','lightSpeedIn','lightSpeedOut','rotateIn','rotateInDownLeft','rotateInDownRight','rotateInUpLeft','rotateInUpRight','rotateOut','rotateOutDownLeft','rotateOutDownRight','rotateOutUpLeft','rotateOutUpRight','hinge','jackInTheBox','rollIn','rollOut','zoomIn','zoomInDown','zoomInLeft','zoomInRight','zoomInUp','zoomOut','zoomOutDown','zoomOutLeft','zoomOutRight','zoomOutUp','slideInDown','slideInLeft','slideInRight','slideInUp','slideOutDown','slideOutLeft','slideOutRight','slideOutUp','heartBeat' ),
504 ),
505 'description' => __( 'Select Speed for animation.', 'borderless' ),
506 'group' => 'Icon',
507 ),
508
509 /*
510 * Typography Tab
511 */
512
513 array(
514 'type' => 'dropdown',
515 'heading' => __( 'Title Tag', 'borderless' ),
516 'param_name' => 'title_tag',
517 'group' => 'Typography',
518 'value' => array(
519 __( 'H1', 'borderless' ) => 'h1',
520 __( 'H2', 'borderless' ) => 'h2',
521 __( 'H3', 'borderless' ) => 'h3',
522 __( 'H4', 'borderless' ) => 'h4',
523 __( 'H5', 'borderless' ) => 'h5',
524 __( 'H6', 'borderless' ) => 'h6',
525 __( 'p', 'borderless' ) => 'p',
526 __( 'div', 'borderless' ) => 'div',
527 ),
528 'default' => 'h3',
529 'description' => __( 'Select title tag.', 'borderless' ),
530 ),
531
532 array(
533 'type' => 'textfield',
534 'heading' => __( 'Title Font Size', 'borderless' ),
535 'param_name' => 'title_size',
536 'description' => __( 'Enter font size.', 'borderless' ),
537 'group' => 'Typography',
538 ),
539
540 array(
541 'type' => 'textfield',
542 'heading' => __( 'Title Line Height', 'borderless' ),
543 'param_name' => 'title_line_height',
544 'description' => __( 'Enter line height.', 'borderless' ),
545 'group' => 'Typography',
546 ),
547
548 array(
549 'type' => 'textfield',
550 'heading' => __( 'Title Spacing', 'borderless' ),
551 'param_name' => 'title_spacing',
552 'description' => __( 'Select title spacing. e.g. 16px.', 'borderless' ),
553 'group' => 'Typography',
554 ),
555 array(
556 'type' => 'dropdown',
557 'heading' => __( 'Title Alignment', 'borderless' ),
558 'param_name' => 'title_alignment',
559 'value' => array(
560 __( 'Left', 'borderless' ) => 'left',
561 __( 'Right', 'borderless' ) => 'right',
562 __( 'Center', 'borderless' ) => 'center',
563 ),
564 'description' => __( 'Select title alignment.', 'borderless' ),
565 'group' => 'Typography',
566 ),
567
568 array(
569 'type' => 'colorpicker',
570 'heading' => __( 'Title Color', 'borderless' ),
571 'param_name' => 'title_color',
572 'description' => __( 'Select custom color for the title.', 'borderless' ),
573 'group' => 'Typography',
574 ),
575
576 // Animation
577 vc_map_add_css_animation(),
578
579 array(
580 'type' => 'el_id',
581 'heading' => __( 'Element ID', 'borderless' ),
582 'param_name' => 'el_id',
583 'description' => sprintf( __( 'Enter element ID (Note: make sure it is unique and valid according to %sw3c specification%s).', 'borderless' ), '<a href="https://www.w3schools.com/tags/att_global_id.asp" target="_blank">', '</a>' ),
584 ),
585
586 array(
587 'type' => 'textfield',
588 'heading' => __( 'Extra class name', 'borderless' ),
589 'param_name' => 'el_class',
590 'description' => __( 'Style particular content element differently - add a class name and refer to it in custom CSS.', 'borderless' ),
591 ),
592
593 array(
594 'type' => 'css_editor',
595 'heading' => __( 'CSS box', 'borderless' ),
596 'param_name' => 'css',
597 'group' => __( 'Design Options', 'borderless' ),
598 ),
599 ),
600 );