shortcode-vc-btn.php 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364
  1. <?php
  2. if ( ! defined( 'ABSPATH' ) ) {
  3. die( '-1' );
  4. }
  5. /**
  6. * New button implementation
  7. * array_merge is needed due to merging other shortcode data into params.
  8. * @since 4.5
  9. */
  10. $pixel_icons = vc_pixel_icons();
  11. require_once vc_path_dir( 'CONFIG_DIR', 'content/vc-icon-element.php' );
  12. $icons_params = vc_map_integrate_shortcode( vc_icon_element_params(), 'i_', '', array(
  13. 'include_only_regex' => '/^(type|icon_\w*)/',
  14. // we need only type, icon_fontawesome, icon_blabla..., NOT color and etc
  15. ), array(
  16. 'element' => 'add_icon',
  17. 'value' => 'true',
  18. ) );
  19. // populate integrated vc_icons params.
  20. if ( is_array( $icons_params ) && ! empty( $icons_params ) ) {
  21. foreach ( $icons_params as $key => $param ) {
  22. if ( is_array( $param ) && ! empty( $param ) ) {
  23. if ( 'i_type' === $param['param_name'] ) {
  24. // append pixelicons to dropdown
  25. $icons_params[ $key ]['value'][ esc_html__( 'Pixel', 'js_composer' ) ] = 'pixelicons';
  26. }
  27. if ( isset( $param['admin_label'] ) ) {
  28. // remove admin label
  29. unset( $icons_params[ $key ]['admin_label'] );
  30. }
  31. }
  32. }
  33. }
  34. $color_value = array_merge( array(
  35. // Btn1 Colors
  36. esc_html__( 'Classic Grey', 'js_composer' ) => 'default',
  37. esc_html__( 'Classic Blue', 'js_composer' ) => 'primary',
  38. esc_html__( 'Classic Turquoise', 'js_composer' ) => 'info',
  39. esc_html__( 'Classic Green', 'js_composer' ) => 'success',
  40. esc_html__( 'Classic Orange', 'js_composer' ) => 'warning',
  41. esc_html__( 'Classic Red', 'js_composer' ) => 'danger',
  42. esc_html__( 'Classic Black', 'js_composer' ) => 'inverse',
  43. // + Btn2 Colors (default color set)
  44. ), vc_get_shared( 'colors-dashed' ) );
  45. $params = array_merge( array(
  46. array(
  47. 'type' => 'textfield',
  48. 'heading' => esc_html__( 'Text', 'js_composer' ),
  49. 'param_name' => 'title',
  50. // fully compatible to btn1 and btn2
  51. 'value' => esc_html__( 'Text on the button', 'js_composer' ),
  52. ),
  53. array(
  54. 'type' => 'vc_link',
  55. 'heading' => esc_html__( 'URL (Link)', 'js_composer' ),
  56. 'param_name' => 'link',
  57. 'description' => esc_html__( 'Add link to button.', 'js_composer' ),
  58. // compatible with btn2 and converted from href{btn1}
  59. ),
  60. array(
  61. 'type' => 'dropdown',
  62. 'heading' => esc_html__( 'Style', 'js_composer' ),
  63. 'description' => esc_html__( 'Select button display style.', 'js_composer' ),
  64. 'param_name' => 'style',
  65. // partly compatible with btn2, need to be converted shape+style from btn2 and btn1
  66. 'value' => array(
  67. esc_html__( 'Modern', 'js_composer' ) => 'modern',
  68. esc_html__( 'Classic', 'js_composer' ) => 'classic',
  69. esc_html__( 'Flat', 'js_composer' ) => 'flat',
  70. esc_html__( 'Outline', 'js_composer' ) => 'outline',
  71. esc_html__( '3d', 'js_composer' ) => '3d',
  72. esc_html__( 'Custom', 'js_composer' ) => 'custom',
  73. esc_html__( 'Outline custom', 'js_composer' ) => 'outline-custom',
  74. esc_html__( 'Gradient', 'js_composer' ) => 'gradient',
  75. esc_html__( 'Gradient Custom', 'js_composer' ) => 'gradient-custom',
  76. ),
  77. ),
  78. array(
  79. 'type' => 'dropdown',
  80. 'heading' => esc_html__( 'Gradient Color 1', 'js_composer' ),
  81. 'param_name' => 'gradient_color_1',
  82. 'description' => esc_html__( 'Select first color for gradient.', 'js_composer' ),
  83. 'param_holder_class' => 'vc_colored-dropdown vc_btn3-colored-dropdown',
  84. 'value' => vc_get_shared( 'colors-dashed' ),
  85. 'std' => 'turquoise',
  86. 'dependency' => array(
  87. 'element' => 'style',
  88. 'value' => array( 'gradient' ),
  89. ),
  90. 'edit_field_class' => 'vc_col-sm-6',
  91. ),
  92. array(
  93. 'type' => 'dropdown',
  94. 'heading' => esc_html__( 'Gradient Color 2', 'js_composer' ),
  95. 'param_name' => 'gradient_color_2',
  96. 'description' => esc_html__( 'Select second color for gradient.', 'js_composer' ),
  97. 'param_holder_class' => 'vc_colored-dropdown vc_btn3-colored-dropdown',
  98. 'value' => vc_get_shared( 'colors-dashed' ),
  99. 'std' => 'blue',
  100. // must have default color grey
  101. 'dependency' => array(
  102. 'element' => 'style',
  103. 'value' => array( 'gradient' ),
  104. ),
  105. 'edit_field_class' => 'vc_col-sm-6',
  106. ),
  107. array(
  108. 'type' => 'colorpicker',
  109. 'heading' => esc_html__( 'Gradient Color 1', 'js_composer' ),
  110. 'param_name' => 'gradient_custom_color_1',
  111. 'description' => esc_html__( 'Select first color for gradient.', 'js_composer' ),
  112. 'param_holder_class' => 'vc_colored-dropdown vc_btn3-colored-dropdown',
  113. 'value' => '#dd3333',
  114. 'dependency' => array(
  115. 'element' => 'style',
  116. 'value' => array( 'gradient-custom' ),
  117. ),
  118. 'edit_field_class' => 'vc_col-sm-4',
  119. ),
  120. array(
  121. 'type' => 'colorpicker',
  122. 'heading' => esc_html__( 'Gradient Color 2', 'js_composer' ),
  123. 'param_name' => 'gradient_custom_color_2',
  124. 'description' => esc_html__( 'Select second color for gradient.', 'js_composer' ),
  125. 'param_holder_class' => 'vc_colored-dropdown vc_btn3-colored-dropdown',
  126. 'value' => '#eeee22',
  127. 'dependency' => array(
  128. 'element' => 'style',
  129. 'value' => array( 'gradient-custom' ),
  130. ),
  131. 'edit_field_class' => 'vc_col-sm-4',
  132. ),
  133. array(
  134. 'type' => 'colorpicker',
  135. 'heading' => esc_html__( 'Button Text Color', 'js_composer' ),
  136. 'param_name' => 'gradient_text_color',
  137. 'description' => esc_html__( 'Select button text color.', 'js_composer' ),
  138. 'param_holder_class' => 'vc_colored-dropdown vc_btn3-colored-dropdown',
  139. 'value' => '#ffffff',
  140. // must have default color grey
  141. 'dependency' => array(
  142. 'element' => 'style',
  143. 'value' => array( 'gradient-custom' ),
  144. ),
  145. 'edit_field_class' => 'vc_col-sm-4',
  146. ),
  147. array(
  148. 'type' => 'colorpicker',
  149. 'heading' => esc_html__( 'Background', 'js_composer' ),
  150. 'param_name' => 'custom_background',
  151. 'description' => esc_html__( 'Select custom background color for your element.', 'js_composer' ),
  152. 'dependency' => array(
  153. 'element' => 'style',
  154. 'value' => array( 'custom' ),
  155. ),
  156. 'edit_field_class' => 'vc_col-sm-6',
  157. 'std' => '#ededed',
  158. ),
  159. array(
  160. 'type' => 'colorpicker',
  161. 'heading' => esc_html__( 'Text', 'js_composer' ),
  162. 'param_name' => 'custom_text',
  163. 'description' => esc_html__( 'Select custom text color for your element.', 'js_composer' ),
  164. 'dependency' => array(
  165. 'element' => 'style',
  166. 'value' => array( 'custom' ),
  167. ),
  168. 'edit_field_class' => 'vc_col-sm-6',
  169. 'std' => '#666',
  170. ),
  171. array(
  172. 'type' => 'colorpicker',
  173. 'heading' => esc_html__( 'Outline and Text', 'js_composer' ),
  174. 'param_name' => 'outline_custom_color',
  175. 'description' => esc_html__( 'Select outline and text color for your element.', 'js_composer' ),
  176. 'dependency' => array(
  177. 'element' => 'style',
  178. 'value' => array( 'outline-custom' ),
  179. ),
  180. 'edit_field_class' => 'vc_col-sm-4',
  181. 'std' => '#666',
  182. ),
  183. array(
  184. 'type' => 'colorpicker',
  185. 'heading' => esc_html__( 'Hover background', 'js_composer' ),
  186. 'param_name' => 'outline_custom_hover_background',
  187. 'description' => esc_html__( 'Select hover background color for your element.', 'js_composer' ),
  188. 'dependency' => array(
  189. 'element' => 'style',
  190. 'value' => array( 'outline-custom' ),
  191. ),
  192. 'edit_field_class' => 'vc_col-sm-4',
  193. 'std' => '#666',
  194. ),
  195. array(
  196. 'type' => 'colorpicker',
  197. 'heading' => esc_html__( 'Hover text', 'js_composer' ),
  198. 'param_name' => 'outline_custom_hover_text',
  199. 'description' => esc_html__( 'Select hover text color for your element.', 'js_composer' ),
  200. 'dependency' => array(
  201. 'element' => 'style',
  202. 'value' => array( 'outline-custom' ),
  203. ),
  204. 'edit_field_class' => 'vc_col-sm-4',
  205. 'std' => '#fff',
  206. ),
  207. array(
  208. 'type' => 'dropdown',
  209. 'heading' => esc_html__( 'Shape', 'js_composer' ),
  210. 'description' => esc_html__( 'Select button shape.', 'js_composer' ),
  211. 'param_name' => 'shape',
  212. // need to be converted
  213. 'value' => array(
  214. esc_html__( 'Rounded', 'js_composer' ) => 'rounded',
  215. esc_html__( 'Square', 'js_composer' ) => 'square',
  216. esc_html__( 'Round', 'js_composer' ) => 'round',
  217. ),
  218. ),
  219. array(
  220. 'type' => 'dropdown',
  221. 'heading' => esc_html__( 'Color', 'js_composer' ),
  222. 'param_name' => 'color',
  223. 'description' => esc_html__( 'Select button color.', 'js_composer' ),
  224. // compatible with btn2, need to be converted from btn1
  225. 'param_holder_class' => 'vc_colored-dropdown vc_btn3-colored-dropdown',
  226. 'value' => $color_value,
  227. 'std' => 'grey',
  228. // must have default color grey
  229. 'dependency' => array(
  230. 'element' => 'style',
  231. 'value_not_equal_to' => array(
  232. 'custom',
  233. 'outline-custom',
  234. 'gradient',
  235. 'gradient-custom',
  236. ),
  237. ),
  238. ),
  239. array(
  240. 'type' => 'dropdown',
  241. 'heading' => esc_html__( 'Size', 'js_composer' ),
  242. 'param_name' => 'size',
  243. 'description' => esc_html__( 'Select button display size.', 'js_composer' ),
  244. // compatible with btn2, default md, but need to be converted from btn1 to btn2
  245. 'std' => 'md',
  246. 'value' => vc_get_shared( 'sizes' ),
  247. ),
  248. array(
  249. 'type' => 'dropdown',
  250. 'heading' => esc_html__( 'Alignment', 'js_composer' ),
  251. 'param_name' => 'align',
  252. 'description' => esc_html__( 'Select button alignment.', 'js_composer' ),
  253. // compatible with btn2, default left to be compatible with btn1
  254. 'value' => array(
  255. esc_html__( 'Inline', 'js_composer' ) => 'inline',
  256. // default as well
  257. esc_html__( 'Left', 'js_composer' ) => 'left',
  258. // default as well
  259. esc_html__( 'Right', 'js_composer' ) => 'right',
  260. esc_html__( 'Center', 'js_composer' ) => 'center',
  261. ),
  262. ),
  263. array(
  264. 'type' => 'checkbox',
  265. 'heading' => esc_html__( 'Set full width button?', 'js_composer' ),
  266. 'param_name' => 'button_block',
  267. 'dependency' => array(
  268. 'element' => 'align',
  269. 'value_not_equal_to' => 'inline',
  270. ),
  271. ),
  272. array(
  273. 'type' => 'checkbox',
  274. 'heading' => esc_html__( 'Add icon?', 'js_composer' ),
  275. 'param_name' => 'add_icon',
  276. ),
  277. array(
  278. 'type' => 'dropdown',
  279. 'heading' => esc_html__( 'Icon Alignment', 'js_composer' ),
  280. 'description' => esc_html__( 'Select icon alignment.', 'js_composer' ),
  281. 'param_name' => 'i_align',
  282. 'value' => array(
  283. esc_html__( 'Left', 'js_composer' ) => 'left',
  284. // default as well
  285. esc_html__( 'Right', 'js_composer' ) => 'right',
  286. ),
  287. 'dependency' => array(
  288. 'element' => 'add_icon',
  289. 'value' => 'true',
  290. ),
  291. ),
  292. ), $icons_params, array(
  293. array(
  294. 'type' => 'iconpicker',
  295. 'heading' => esc_html__( 'Icon', 'js_composer' ),
  296. 'param_name' => 'i_icon_pixelicons',
  297. 'value' => 'vc_pixel_icon vc_pixel_icon-alert',
  298. 'settings' => array(
  299. 'emptyIcon' => false,
  300. // default true, display an "EMPTY" icon?
  301. 'type' => 'pixelicons',
  302. 'source' => $pixel_icons,
  303. ),
  304. 'dependency' => array(
  305. 'element' => 'i_type',
  306. 'value' => 'pixelicons',
  307. ),
  308. 'description' => esc_html__( 'Select icon from library.', 'js_composer' ),
  309. ),
  310. ), array(
  311. vc_map_add_css_animation( true ),
  312. array(
  313. 'type' => 'el_id',
  314. 'heading' => esc_html__( 'Element ID', 'js_composer' ),
  315. 'param_name' => 'el_id',
  316. '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>' ),
  317. ),
  318. array(
  319. 'type' => 'textfield',
  320. 'heading' => esc_html__( 'Extra class name', 'js_composer' ),
  321. 'param_name' => 'el_class',
  322. 'description' => esc_html__( 'Style particular content element differently - add a class name and refer to it in custom CSS.', 'js_composer' ),
  323. ),
  324. array(
  325. 'type' => 'checkbox',
  326. 'heading' => esc_html__( 'Advanced on click action', 'js_composer' ),
  327. 'param_name' => 'custom_onclick',
  328. 'description' => esc_html__( 'Insert inline onclick javascript action.', 'js_composer' ),
  329. ),
  330. array(
  331. 'type' => 'textfield',
  332. 'heading' => esc_html__( 'On click code', 'js_composer' ),
  333. 'param_name' => 'custom_onclick_code',
  334. 'description' => esc_html__( 'Enter onclick action code.', 'js_composer' ),
  335. 'dependency' => array(
  336. 'element' => 'custom_onclick',
  337. 'not_empty' => true,
  338. ),
  339. ),
  340. array(
  341. 'type' => 'css_editor',
  342. 'heading' => esc_html__( 'CSS box', 'js_composer' ),
  343. 'param_name' => 'css',
  344. 'group' => esc_html__( 'Design Options', 'js_composer' ),
  345. ),
  346. ) );
  347. /**
  348. * @class WPBakeryShortCode_Vc_Btn
  349. */
  350. return array(
  351. 'name' => esc_html__( 'Button', 'js_composer' ),
  352. 'base' => 'vc_btn',
  353. 'icon' => 'icon-wpb-ui-button',
  354. 'category' => array(
  355. esc_html__( 'Content', 'js_composer' ),
  356. ),
  357. 'description' => esc_html__( 'Eye catching button', 'js_composer' ),
  358. 'params' => $params,
  359. 'js_view' => 'VcButton3View',
  360. 'custom_markup' => '{{title}}<div class="vc_btn3-container"><button class="vc_general vc_btn3 vc_btn3-size-sm vc_btn3-shape-{{ params.shape }} vc_btn3-style-{{ params.style }} vc_btn3-color-{{ params.color }}">{{{ params.title }}}</button></div>',
  361. );