MS_Helper_Html

Helper class for rendering HTML components.

Defined (1)

The class is defined in the following location(s).

/app/helper/class-ms-helper-html.php  
  1. class MS_Helper_Html extends MS_Helper { 
  2.  
  3. /** Constants for default HTML input elements. */ 
  4. const INPUT_TYPE_HIDDEN = 'hidden'; 
  5. const INPUT_TYPE_TEXT_AREA = 'textarea'; 
  6. const INPUT_TYPE_SELECT = 'select'; 
  7. const INPUT_TYPE_RADIO = 'radio'; 
  8. const INPUT_TYPE_SUBMIT = 'submit'; 
  9. const INPUT_TYPE_BUTTON = 'button'; 
  10. const INPUT_TYPE_CHECKBOX = 'checkbox'; 
  11. const INPUT_TYPE_IMAGE = 'image'; 
  12. // Different input types 
  13. const INPUT_TYPE_TEXT = 'text'; 
  14. const INPUT_TYPE_PASSWORD = 'password'; 
  15. const INPUT_TYPE_NUMBER = 'number'; 
  16. const INPUT_TYPE_EMAIL = 'email'; 
  17. const INPUT_TYPE_URL = 'url'; 
  18. const INPUT_TYPE_TIME = 'time'; 
  19. const INPUT_TYPE_SEARCH = 'search'; 
  20. const INPUT_TYPE_FILE = 'file'; 
  21.  
  22. /** Constants for advanced HTML input elements. */ 
  23. const INPUT_TYPE_WP_EDITOR = 'wp_editor'; 
  24. const INPUT_TYPE_DATEPICKER = 'datepicker'; 
  25. const INPUT_TYPE_RADIO_SLIDER = 'radio_slider'; 
  26. const INPUT_TYPE_TAG_SELECT = 'tag_select'; 
  27. const INPUT_TYPE_WP_PAGES = 'wp_pages'; 
  28.  
  29. /** Constants for default HTML elements. */ 
  30. const TYPE_HTML_LINK = 'html_link'; 
  31. const TYPE_HTML_SEPARATOR = 'html_separator'; 
  32. const TYPE_HTML_TEXT = 'html_text'; 
  33. const TYPE_HTML_TABLE = 'html_table'; 
  34.  
  35. /** 
  36. * Method for creating HTML elements/fields. 
  37. * Pass in array with field arguments. See $defaults for argmuments. 
  38. * Use constants to specify field type. e.g. MS_Helper_Html::INPUT_TYPE_TEXT 
  39. * @since 1.0.0 
  40. * @return void|string If $return param is false the HTML will be echo'ed,  
  41. * otherwise returned as string 
  42. */ 
  43. public static function html_element( $field_args, $return = false ) { 
  44. return lib3()->html->element( $field_args, $return ); 
  45.  
  46.  
  47. /** 
  48. * Echo the header part of a settings form, including the title and 
  49. * description. 
  50. * @since 1.0.0 
  51. * @param array $args Title, description and breadcrumb infos. 
  52. */ 
  53. public static function settings_header( $args = null ) { 
  54. $defaults = array( 
  55. 'title' => '',  
  56. 'title_icon_class' => '',  
  57. 'desc' => '',  
  58. 'bread_crumbs' => null,  
  59. ); 
  60. $args = wp_parse_args( $args, $defaults ); 
  61. $args = apply_filters( 'ms_helper_html_settings_header_args', $args ); 
  62. extract( $args ); 
  63.  
  64. if ( ! is_array( $desc ) ) { 
  65. $desc = array( $desc ); 
  66.  
  67. MS_Helper_Html::bread_crumbs( $bread_crumbs ); 
  68. ?> 
  69. <h2 class="ms-settings-title"> 
  70. <?php if ( ! empty( $title_icon_class ) ) : ?> 
  71. <i class="<?php echo esc_attr( $title_icon_class ); ?>"></i> 
  72. <?php endif; ?> 
  73. <?php printf( $title ); ?> 
  74. </h2> 
  75. <div class="ms-settings-desc-wrapper"> 
  76. <?php foreach ( $desc as $description ) : ?> 
  77. <div class="ms-settings-desc ms-description"> 
  78. <?php printf( $description ); ?> 
  79. </div> 
  80. <?php endforeach; ?> 
  81. </div> 
  82. <?php 
  83.  
  84. /** 
  85. * Echo the footer section of a settings form. 
  86. * @since 1.0.0 
  87. * @param null|array $fields List of fields to display in the footer. 
  88. * @param bool|array $submit_info What kind of submit button to add. 
  89. */ 
  90. public static function settings_footer( $fields = null, $submit_info = null ) { 
  91. // Default Submit-Button is "Next >>" 
  92. if ( true === $submit_info ) { 
  93. $submit_info = array( 
  94. 'id' => 'next',  
  95. 'value' => __( 'Next', 'membership2' ),  
  96. 'action' => 'next',  
  97. ); 
  98.  
  99. if ( empty( $fields ) ) { 
  100. $fields = array(); 
  101.  
  102. if ( $submit_info ) { 
  103. $submit_fields = array( 
  104. 'next' => array( 
  105. 'id' => @$submit_info['id'],  
  106. 'type' => MS_Helper_Html::INPUT_TYPE_SUBMIT,  
  107. 'value' => @$submit_info['value'],  
  108. ),  
  109. 'action' => array( 
  110. 'id' => 'action',  
  111. 'type' => MS_Helper_Html::INPUT_TYPE_HIDDEN,  
  112. 'value' => @$submit_info['action'],  
  113. ),  
  114. '_wpnonce' => array( 
  115. 'id' => '_wpnonce',  
  116. 'type' => MS_Helper_Html::INPUT_TYPE_HIDDEN,  
  117. 'value' => wp_create_nonce( @$submit_info['action'] ),  
  118. ),  
  119. ); 
  120.  
  121. foreach ( $submit_fields as $key => $field ) { 
  122. if ( ! isset( $fields[ $key ] ) ) { 
  123. $fields[ $key ] = $field; 
  124.  
  125. $args = array( 
  126. 'saving_text' => __( 'Saving changes...', 'membership2' ),  
  127. 'saved_text' => __( 'All changes saved.', 'membership2' ),  
  128. 'error_text' => __( 'Could not save changes.', 'membership2' ),  
  129. 'fields' => $fields,  
  130. ); 
  131. $args = apply_filters( 'ms_helper_html_settings_footer_args', $args ); 
  132. $fields = $args['fields']; 
  133. unset( $args['fields'] ); 
  134.  
  135. ?> 
  136. <div class="ms-settings-footer"> 
  137. <form method="post" action=""> 
  138. <?php 
  139. foreach ( $fields as $field ) { 
  140. MS_Helper_Html::html_element( $field ); 
  141. self::save_text( $args ); 
  142. ?> 
  143. </form> 
  144. </div> 
  145. </div> 
  146. <?php 
  147.  
  148. public static function settings_tab_header( $args = null ) { 
  149. $defaults = array( 
  150. 'title' => '',  
  151. 'desc' => array(),  
  152. 'class' => '',  
  153. ); 
  154.  
  155. $args = wp_parse_args( $args, $defaults ); 
  156. $args = apply_filters( 'ms_helper_html_settings_header_args', $args ); 
  157. extract( $args ); 
  158.  
  159. if ( ! is_array( $desc ) ) { 
  160. $desc = array( $desc ); 
  161. foreach ( $desc as $id => $text ) { 
  162. if ( empty( $text ) ) { unset( $desc[$id] ); } 
  163.  
  164. ?> 
  165. <div class="ms-settings-wrapper <?php echo esc_attr( $class ); ?>"> 
  166. <?php if ( ! empty( $title ) || ! empty( $desc ) ) : ?> 
  167. <div class="ms-header"> 
  168. <?php if ( ! empty( $title ) ) : ?> 
  169. <div class="ms-settings-tab-title"> 
  170. <h3><?php printf( $title ); ?></h3> 
  171. </div> 
  172. <?php endif; ?> 
  173.  
  174. <?php if ( ! empty( $desc ) ) : ?> 
  175. <div class="ms-settings-description"> 
  176. <?php foreach ( $desc as $description ): ?> 
  177. <div class="ms-description"> 
  178. <?php echo '' . $description; ?> 
  179. </div> 
  180. <?php endforeach; ?> 
  181. </div> 
  182. <?php endif; ?> 
  183.  
  184. <?php self::html_separator(); ?> 
  185. </div> 
  186. <?php endif; ?> 
  187. <?php 
  188.  
  189. /** 
  190. * Echo a single content box including the header and footer of the box. 
  191. * The fields-list will be used to render the box body. 
  192. * @since 1.0.0 
  193. * @param array $fields_in List of fields to render 
  194. * @param string $title Box title 
  195. * @param string $description Description to display 
  196. * @param string $state Toggle-state of the box: static/open/closed 
  197. */ 
  198. public static function settings_box( $fields_in, $title = '', $description = '', $state = 'static', $class = '' ) { 
  199. // If its a fields array, great, if not, make a fields array. 
  200. $fields = $fields_in; 
  201. if ( ! is_array( $fields_in ) ) { 
  202. $fields = array(); 
  203. $fields[] = $fields_in; 
  204.  
  205. self::settings_box_header( $title, $description, $state, $class ); 
  206. foreach ( $fields as $field ) { 
  207. MS_Helper_Html::html_element( $field ); 
  208. self::save_text(); 
  209. self::settings_box_footer(); 
  210.  
  211. /** 
  212. * Echo the header of a content box. That box has a similar layout to a 
  213. * normal WordPress meta-box. 
  214. * The box has a title and description and can optionally be collapsible. 
  215. * @since 1.0.0 
  216. * @param string $title Box title displayed in the top 
  217. * @param string $description Description to display 
  218. * @param string $state Toggle-state of the box: static/open/closed 
  219. */ 
  220. public static function settings_box_header( $title = '', $description = '', $state = 'static', $class = '' ) { 
  221. do_action( 'ms_helper_settings_box_header_init', $title, $description, $state ); 
  222.  
  223. $handle = ''; 
  224. if ( 'static' !== $state ) { 
  225. $state = ('closed' === $state ? 'closed' : 'open'); 
  226. $handle = sprintf( 
  227. '<div class="handlediv" title="%s"></div>',  
  228. __( 'Click to toggle' ) // Intentionally no text-domain, so we use WordPress default translation. 
  229. ); 
  230. $box_class = $state; 
  231. if ( ! strlen( $title ) && ! strlen( $description ) ) { 
  232. $box_class .= ' nohead'; 
  233.  
  234. ?> 
  235. <div class="ms-settings-box-wrapper <?php echo esc_attr( $class ); ?>"> 
  236. <div class="ms-settings-box <?php echo esc_attr( $box_class ); ?>"> 
  237. <div class="ms-header"> 
  238. <?php printf( $handle ); ?> 
  239. <?php if ( ! empty( $title ) ) : ?> 
  240. <h3><?php printf( $title ); ?></h3> 
  241. <?php endif; ?> 
  242. <?php if ( ! empty( $description ) ) : ?> 
  243. <span class="ms-settings-description ms-description"><?php echo '' . $description; ?></span> 
  244. <?php endif; ?> 
  245. </div> 
  246. <div class="inside"> 
  247. <?php 
  248. do_action( 'ms_helper_settings_box_header_end', $title, $description, $state ); 
  249.  
  250. /** 
  251. * Echo the footer of a content box. 
  252. * @since 1.0.0 
  253. */ 
  254. public static function settings_box_footer() { 
  255. do_action( 'ms_helper_settings_box_footer_init' ); 
  256. ?> 
  257. </div> <!-- .inside --> 
  258. </div> <!-- .ms-settings-box --> 
  259. </div> <!-- .ms-settings-box-wrapper --> 
  260. <?php 
  261. do_action( 'ms_helper_settings_box_footer_end' ); 
  262.  
  263. /** 
  264. * Method for creating submit button. 
  265. * Pass in array with field arguments. See $defaults for argmuments. 
  266. * @since 1.0.0 
  267. * @return void But does output HTML. 
  268. */ 
  269. public static function html_submit( $args = array(), $return = false ) { 
  270. $defaults = array( 
  271. 'id' => 'submit',  
  272. 'value' => __( 'Save Changes', 'membership2' ),  
  273. 'class' => 'button button-primary',  
  274. ); 
  275. wp_parse_args( $args, $defaults ); 
  276.  
  277. $args['type'] = self::INPUT_TYPE_SUBMIT; 
  278.  
  279. if ( $return ) { 
  280. return self::html_element( $args, true ); 
  281. } else { 
  282. self::html_element( $args ); 
  283.  
  284. /** 
  285. * Method for creating html link. 
  286. * Pass in array with link arguments. See $defaults for arguments. 
  287. * @since 1.0.0 
  288. * @return string But does output HTML. 
  289. */ 
  290. public static function html_link( $args = array(), $return = false ) { 
  291. $defaults = array( 
  292. 'id' => '',  
  293. 'title' => '',  
  294. 'value' => '',  
  295. 'class' => '',  
  296. 'url' => '',  
  297. ); 
  298. wp_parse_args( $args, $defaults ); 
  299.  
  300. $args['type'] = self::TYPE_HTML_LINK; 
  301.  
  302. if ( $return ) { 
  303. return self::html_element( $args, true ); 
  304. } else { 
  305. self::html_element( $args ); 
  306.  
  307. /** 
  308. * Method for outputting vertical tabs. 
  309. * Returns the active tab key. Vertical tabs need to be wrapped in additional code. 
  310. * @since 1.0.0 
  311. * @param array $tabs 
  312. * @param string $active_tab 
  313. * @param array $persistent 
  314. * @return string Active tab. 
  315. */ 
  316. public static function html_admin_vertical_tabs( $tabs, $active_tab = null, $persistent = array( 'edit' ) ) { 
  317. reset( $tabs ); 
  318. $first_key = key( $tabs ); 
  319.  
  320. // Setup navigation tabs. 
  321. if ( empty( $active_tab ) ) { 
  322. $active_tab = ! empty( $_GET['tab'] ) ? $_GET['tab'] : $first_key; 
  323.  
  324. if ( ! array_key_exists( $active_tab, $tabs ) ) { 
  325. $active_tab = $first_key; 
  326.  
  327. // Render tabbed interface. 
  328. ?> 
  329. <div class="ms-tab-container"> 
  330. <ul id="sortable-units" class="ms-tabs" style=""> 
  331. <?php foreach ( $tabs as $tab_name => $tab ) : 
  332. $tab_class = $tab_name == $active_tab ? 'active' : ''; 
  333. $title = esc_html( $tab['title'] ); 
  334. $url = $tab['url']; 
  335. $attributes = array(); 
  336.  
  337. foreach ( $persistent as $param ) { 
  338. lib3()->array->equip_request( $param ); 
  339. $value = $_REQUEST[ $param ]; 
  340. $url = esc_url_raw( 
  341. add_query_arg( $param, $value, $url ) 
  342. ); 
  343.  
  344. $attributes[] = 'class="ms-tab-link"'; 
  345. $attributes[] = 'href="' . esc_url( $url ) .'"'; 
  346. if ( isset( $tab['target'] ) ) { 
  347. $attributes[] = 'target="' . esc_attr( $tab['target'] ) .'"'; 
  348. if ( '_blank' == $tab['target'] ) { 
  349. $title .= ' <i class="wpmui-fa wpmui-fa-external-link-square"></i>'; 
  350. ?> 
  351. <li class="ms-tab <?php echo esc_attr( $tab_class ); ?>"> 
  352. <a <?php echo implode( ' ', $attributes ); ?>> 
  353. <?php echo $title; ?> 
  354. </a> 
  355. </li> 
  356. <?php endforeach; ?> 
  357. </ul> 
  358. </div> 
  359. <?php 
  360.  
  361. // Return current active tab. 
  362. return $active_tab; 
  363.  
  364. /** 
  365. * Method for outputting tooltips. 
  366. * @since 1.0.0 
  367. * @return string But does output HTML. 
  368. */ 
  369. public static function tooltip( $tip = '', $return = false ) { 
  370. if ( empty( $tip ) ) { 
  371. return; 
  372.  
  373. if ( $return ) { ob_start(); } 
  374. ?> 
  375. <div class="wpmui-tooltip-wrapper"> 
  376. <div class="wpmui-tooltip-info"><i class="wpmui-fa wpmui-fa-info-circle"></i></div> 
  377. <div class="wpmui-tooltip"> 
  378. <div class="wpmui-tooltip-button">×</div> 
  379. <div class="wpmui-tooltip-content"> 
  380. <?php printf( $tip ); ?> 
  381. </div> 
  382. </div> 
  383. </div> 
  384. <?php 
  385. if ( $return ) { return ob_get_clean(); } 
  386.  
  387. /** 
  388. * Echo HTML separator element. 
  389. * Vertical separators will be on the right side of the parent element. 
  390. * @since 1.0.0 
  391. * @param string $type Either 'horizontal' or 'vertical' 
  392. */ 
  393. public static function html_separator( $type = 'horizontal' ) { 
  394. lib3()->html->element( 
  395. array( 
  396. 'type' => self::TYPE_HTML_SEPARATOR,  
  397. 'value' => $type,  
  398. ); 
  399.  
  400. /** 
  401. * Echo HTML structure for save-text and animation. 
  402. * @since 1.0.0 
  403. * @param array $texts Optionally override the default save-texts. 
  404. * @param bool $return If set to true the HTML code will be returned. 
  405. * @param bool $animation If an animation should be displayed while saving. 
  406. */ 
  407. public static function save_text( $texts = array(), $animation = false, $return = false ) { 
  408. $defaults = array( 
  409. 'saving_text' => __( 'Saving changes...', 'membership2' ),  
  410. 'saved_text' => __( 'All changes saved.', 'membership2' ),  
  411. 'error_text' => __( 'Could not save changes.', 'membership2' ),  
  412. ); 
  413. extract( wp_parse_args( $texts, $defaults ) ); 
  414.  
  415. if ( $return ) { 
  416. $command = 'sprintf'; 
  417. } else { 
  418. $command = 'printf'; 
  419.  
  420. if ( $animation ) { 
  421. $saving_text = '<div class="loading-animation"></div> ' . $saved_text; 
  422.  
  423. return $command( 
  424. '<span class="ms-save-text-wrapper"> 
  425. <span class="ms-saving-text">%1$s</span> 
  426. <span class="ms-saved-text">%2$s</span> 
  427. <span class="ms-error-text">%3$s<span class="err-code"></span></span> 
  428. </span>',  
  429. $saving_text,  
  430. $saved_text,  
  431. $error_text 
  432. ); 
  433.  
  434. /** 
  435. * Used by the overview views to display a list of available content items. 
  436. * The items are typically formatted like a taglist via CSS. 
  437. * @since 1.0.0 
  438. * @param WP_Post $item The item to display. 
  439. * @param string $tag The tag will be wrapped inside this HTML tag. 
  440. */ 
  441. public static function content_tag( $item, $tag = 'li' ) { 
  442. $label = property_exists( $item, 'post_title' ) ? $item->post_title : $item->name; 
  443.  
  444. if ( ! empty( $item->id ) && is_a( $item, 'WP_Post' ) ) { 
  445. printf( 
  446. '<%1$s class="ms-content-tag"><a href="%3$s">%2$s</a></%1$s>',  
  447. esc_attr( $tag ),  
  448. esc_html( $label ),  
  449. get_edit_post_link( $item->id ) 
  450. ); 
  451. else { 
  452. printf( 
  453. '<%1$s class="ms-content-tag"><span>%2$s</span></%1$s>',  
  454. esc_attr( $tag ),  
  455. esc_html( $label ) 
  456. ); 
  457.  
  458. /** 
  459. * Return bread crumb navigation HTML code. 
  460. * @since 1.0.0 
  461. * @param array $bread_crumbs 
  462. * @return string 
  463. */ 
  464. public static function bread_crumbs( $bread_crumbs ) { 
  465. $crumbs = array(); 
  466. $html = ''; 
  467.  
  468. if ( is_array( $bread_crumbs ) ) { 
  469. foreach ( $bread_crumbs as $key => $bread_crumb ) { 
  470. if ( ! empty( $bread_crumb['url'] ) ) { 
  471. $crumbs[] = sprintf( 
  472. '<span class="ms-bread-crumb-%s"><a href="%s">%s</a></span>',  
  473. esc_attr( $key ),  
  474. $bread_crumb['url'],  
  475. $bread_crumb['title'] 
  476. ); 
  477. elseif ( ! empty( $bread_crumb['title'] ) ) { 
  478. $crumbs[] = sprintf( 
  479. '<span class="ms-bread-crumb-%s">%s</span>',  
  480. esc_attr( $key ),  
  481. $bread_crumb['title'] 
  482. ); 
  483.  
  484. if ( count( $crumbs ) > 0 ) { 
  485. $html = '<div class="ms-bread-crumb">'; 
  486. $html .= implode( '<span class="ms-bread-crumb-sep"> » </span>', $crumbs ); 
  487. $html .= '</div>'; 
  488. $html = apply_filters( 'ms_helper_html_bread_crumbs', $html ); 
  489.  
  490. printf( $html ); 
  491.  
  492. /** 
  493. * Return HTML code that displays a human readable Period representation. 
  494. * @since 1.0.0 
  495. * @param array $period 
  496. * @param string $class 
  497. * @return string 
  498. */ 
  499. public static function period_desc( $period, $class = '' ) { 
  500. $html = sprintf( 
  501. '<span class="ms-period-desc %s"> <span class="ms-period-unit">%s</span> <span class="ms-period-type">%s</span></span>',  
  502. esc_attr( $class ),  
  503. $period['period_unit'],  
  504. $period['period_type'] 
  505. ); 
  506.  
  507. return apply_filters( 'ms_helper_html_period_desc', $html ); 
  508.  
  509. /** 
  510. * Removes lines breaks and tralining/leading whitespace. 
  511. * Use this function: $code = apply_filters( 'ms_compact_code', $code ); 
  512. * Intention of this function is to make HTML code compatible with certain 
  513. * Themes that would add <br> tags at every newline, even when the newline 
  514. * was inside an HTML tag. 
  515. * e.g. <div class="myclass" 
  516. * id="myid"> 
  517. * was replaced by <div class="myclass" <br> 
  518. * id="myid"> 
  519. * @since 1.0.1.0 
  520. * @param string $html HTML code. 
  521. * @return string Compressed HTML code. 
  522. */ 
  523. public static function compact_code( $html ) { 
  524. $html = str_replace( array( "\r\n", "\r" ), "\n", $html ); 
  525. $lines = explode( "\n", $html ); 
  526. $new_lines = array(); 
  527.  
  528. foreach ( $lines as $i => $line ) { 
  529. $line = trim( $line ); 
  530. if ( ! empty( $line ) ) { 
  531. $new_lines[] = $line; 
  532. $html = implode( ' ', $new_lines ); 
  533.  
  534. return $html; 
  535.