shortcode-vc-tta-tabs.php 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217
  1. <?php
  2. if ( ! defined( 'ABSPATH' ) ) {
  3. die( '-1' );
  4. }
  5. return array(
  6. 'name' => esc_html__( 'Tabs', 'js_composer' ),
  7. 'base' => 'vc_tta_tabs',
  8. 'icon' => 'icon-wpb-ui-tab-content',
  9. 'is_container' => true,
  10. 'show_settings_on_create' => false,
  11. 'as_parent' => array(
  12. 'only' => 'vc_tta_section',
  13. ),
  14. 'category' => esc_html__( 'Content', 'js_composer' ),
  15. 'description' => esc_html__( 'Tabbed content', 'js_composer' ),
  16. 'params' => array(
  17. array(
  18. 'type' => 'textfield',
  19. 'param_name' => 'title',
  20. 'heading' => esc_html__( 'Widget title', 'js_composer' ),
  21. 'description' => esc_html__( 'Enter text used as widget title (Note: located above content element).', 'js_composer' ),
  22. ),
  23. array(
  24. 'type' => 'dropdown',
  25. 'param_name' => 'style',
  26. 'value' => array(
  27. esc_html__( 'Classic', 'js_composer' ) => 'classic',
  28. esc_html__( 'Modern', 'js_composer' ) => 'modern',
  29. esc_html__( 'Flat', 'js_composer' ) => 'flat',
  30. esc_html__( 'Outline', 'js_composer' ) => 'outline',
  31. ),
  32. 'heading' => esc_html__( 'Style', 'js_composer' ),
  33. 'description' => esc_html__( 'Select tabs display style.', 'js_composer' ),
  34. ),
  35. array(
  36. 'type' => 'dropdown',
  37. 'param_name' => 'shape',
  38. 'value' => array(
  39. esc_html__( 'Rounded', 'js_composer' ) => 'rounded',
  40. esc_html__( 'Square', 'js_composer' ) => 'square',
  41. esc_html__( 'Round', 'js_composer' ) => 'round',
  42. ),
  43. 'heading' => esc_html__( 'Shape', 'js_composer' ),
  44. 'description' => esc_html__( 'Select tabs shape.', 'js_composer' ),
  45. ),
  46. array(
  47. 'type' => 'dropdown',
  48. 'param_name' => 'color',
  49. 'heading' => esc_html__( 'Color', 'js_composer' ),
  50. 'description' => esc_html__( 'Select tabs color.', 'js_composer' ),
  51. 'value' => vc_get_shared( 'colors-dashed' ),
  52. 'std' => 'grey',
  53. 'param_holder_class' => 'vc_colored-dropdown',
  54. ),
  55. array(
  56. 'type' => 'checkbox',
  57. 'param_name' => 'no_fill_content_area',
  58. 'heading' => esc_html__( 'Do not fill content area?', 'js_composer' ),
  59. 'description' => esc_html__( 'Do not fill content area with color.', 'js_composer' ),
  60. ),
  61. array(
  62. 'type' => 'dropdown',
  63. 'param_name' => 'spacing',
  64. 'value' => array(
  65. esc_html__( 'None', 'js_composer' ) => '',
  66. '1px' => '1',
  67. '2px' => '2',
  68. '3px' => '3',
  69. '4px' => '4',
  70. '5px' => '5',
  71. '10px' => '10',
  72. '15px' => '15',
  73. '20px' => '20',
  74. '25px' => '25',
  75. '30px' => '30',
  76. '35px' => '35',
  77. ),
  78. 'heading' => esc_html__( 'Spacing', 'js_composer' ),
  79. 'description' => esc_html__( 'Select tabs spacing.', 'js_composer' ),
  80. 'std' => '1',
  81. ),
  82. array(
  83. 'type' => 'dropdown',
  84. 'param_name' => 'gap',
  85. 'value' => array(
  86. esc_html__( 'None', 'js_composer' ) => '',
  87. '1px' => '1',
  88. '2px' => '2',
  89. '3px' => '3',
  90. '4px' => '4',
  91. '5px' => '5',
  92. '10px' => '10',
  93. '15px' => '15',
  94. '20px' => '20',
  95. '25px' => '25',
  96. '30px' => '30',
  97. '35px' => '35',
  98. ),
  99. 'heading' => esc_html__( 'Gap', 'js_composer' ),
  100. 'description' => esc_html__( 'Select tabs gap.', 'js_composer' ),
  101. ),
  102. array(
  103. 'type' => 'dropdown',
  104. 'param_name' => 'tab_position',
  105. 'value' => array(
  106. esc_html__( 'Top', 'js_composer' ) => 'top',
  107. esc_html__( 'Bottom', 'js_composer' ) => 'bottom',
  108. ),
  109. 'heading' => esc_html__( 'Position', 'js_composer' ),
  110. 'description' => esc_html__( 'Select tabs navigation position.', 'js_composer' ),
  111. ),
  112. array(
  113. 'type' => 'dropdown',
  114. 'param_name' => 'alignment',
  115. 'value' => array(
  116. esc_html__( 'Left', 'js_composer' ) => 'left',
  117. esc_html__( 'Right', 'js_composer' ) => 'right',
  118. esc_html__( 'Center', 'js_composer' ) => 'center',
  119. ),
  120. 'heading' => esc_html__( 'Alignment', 'js_composer' ),
  121. 'description' => esc_html__( 'Select tabs section title alignment.', 'js_composer' ),
  122. ),
  123. array(
  124. 'type' => 'dropdown',
  125. 'param_name' => 'autoplay',
  126. 'value' => array(
  127. esc_html__( 'None', 'js_composer' ) => 'none',
  128. '1' => '1',
  129. '2' => '2',
  130. '3' => '3',
  131. '4' => '4',
  132. '5' => '5',
  133. '10' => '10',
  134. '20' => '20',
  135. '30' => '30',
  136. '40' => '40',
  137. '50' => '50',
  138. '60' => '60',
  139. ),
  140. 'std' => 'none',
  141. 'heading' => esc_html__( 'Autoplay', 'js_composer' ),
  142. 'description' => esc_html__( 'Select auto rotate for tabs in seconds (Note: disabled by default).', 'js_composer' ),
  143. ),
  144. array(
  145. 'type' => 'textfield',
  146. 'param_name' => 'active_section',
  147. 'heading' => esc_html__( 'Active section', 'js_composer' ),
  148. 'value' => 1,
  149. 'description' => esc_html__( 'Enter active section number (Note: to have all sections closed on initial load enter non-existing number).', 'js_composer' ),
  150. ),
  151. array(
  152. 'type' => 'dropdown',
  153. 'param_name' => 'pagination_style',
  154. 'value' => array(
  155. esc_html__( 'None', 'js_composer' ) => '',
  156. esc_html__( 'Square Dots', 'js_composer' ) => 'outline-square',
  157. esc_html__( 'Radio Dots', 'js_composer' ) => 'outline-round',
  158. esc_html__( 'Point Dots', 'js_composer' ) => 'flat-round',
  159. esc_html__( 'Fill Square Dots', 'js_composer' ) => 'flat-square',
  160. esc_html__( 'Rounded Fill Square Dots', 'js_composer' ) => 'flat-rounded',
  161. ),
  162. 'heading' => esc_html__( 'Pagination style', 'js_composer' ),
  163. 'description' => esc_html__( 'Select pagination style.', 'js_composer' ),
  164. ),
  165. array(
  166. 'type' => 'dropdown',
  167. 'param_name' => 'pagination_color',
  168. 'value' => vc_get_shared( 'colors-dashed' ),
  169. 'heading' => esc_html__( 'Pagination color', 'js_composer' ),
  170. 'description' => esc_html__( 'Select pagination color.', 'js_composer' ),
  171. 'param_holder_class' => 'vc_colored-dropdown',
  172. 'std' => 'grey',
  173. 'dependency' => array(
  174. 'element' => 'pagination_style',
  175. 'not_empty' => true,
  176. ),
  177. ),
  178. vc_map_add_css_animation(),
  179. array(
  180. 'type' => 'el_id',
  181. 'heading' => esc_html__( 'Element ID', 'js_composer' ),
  182. 'param_name' => 'el_id',
  183. 'description' => sprintf( esc_html__( 'Enter element ID (Note: make sure it is unique and valid according to %sw3c specification%s).', 'js_composer' ), '<a href="https://www.w3schools.com/tags/att_global_id.asp" target="_blank">', '</a>' ),
  184. ),
  185. array(
  186. 'type' => 'textfield',
  187. 'heading' => esc_html__( 'Extra class name', 'js_composer' ),
  188. 'param_name' => 'el_class',
  189. 'description' => esc_html__( 'If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file.', 'js_composer' ),
  190. ),
  191. array(
  192. 'type' => 'css_editor',
  193. 'heading' => esc_html__( 'CSS box', 'js_composer' ),
  194. 'param_name' => 'css',
  195. 'group' => esc_html__( 'Design Options', 'js_composer' ),
  196. ),
  197. ),
  198. 'js_view' => 'VcBackendTtaTabsView',
  199. 'custom_markup' => '
  200. <div class="vc_tta-container" data-vc-action="collapse">
  201. <div class="vc_general vc_tta vc_tta-tabs vc_tta-color-backend-tabs-white vc_tta-style-flat vc_tta-shape-rounded vc_tta-spacing-1 vc_tta-tabs-position-top vc_tta-controls-align-left">
  202. <div class="vc_tta-tabs-container">' . '<ul class="vc_tta-tabs-list">' . '<li class="vc_tta-tab" data-vc-tab data-vc-target-model-id="{{ model_id }}" data-element_type="vc_tta_section"><a href="javascript:;" data-vc-tabs data-vc-container=".vc_tta" data-vc-target="[data-model-id=\'{{ model_id }}\']" data-vc-target-model-id="{{ model_id }}"><span class="vc_tta-title-text">{{ section_title }}</span></a></li>' . '</ul>
  203. </div>
  204. <div class="vc_tta-panels vc_clearfix {{container-class}}">
  205. {{ content }}
  206. </div>
  207. </div>
  208. </div>',
  209. 'default_content' => '
  210. [vc_tta_section title="' . sprintf( '%s %d', esc_html__( 'Tab', 'js_composer' ), 1 ) . '"][/vc_tta_section]
  211. [vc_tta_section title="' . sprintf( '%s %d', esc_html__( 'Tab', 'js_composer' ), 2 ) . '"][/vc_tta_section]
  212. ',
  213. 'admin_enqueue_js' => array(
  214. vc_asset_url( 'lib/vc_tabs/vc-tabs.min.js' ),
  215. ),
  216. );