Source: wp-accessibility-toolbar.php

  1. <?php
  2. /**
  3. * Generate Toolbar HTML & JS
  4. *
  5. * @category Toolbar
  6. * @package WP Accessibility
  7. * @author Joe Dolson
  8. * @license GPLv2 or later
  9. * @link https://www.joedolson.com/wp-accessibility/
  10. */
  11. /**
  12. * Toolbar class.
  13. */
  14. require_once __DIR__ . '/class-wp-accessibility-toolbar.php';
  15. add_action( 'widgets_init', 'wpa_register_toolbar_widget' );
  16. /**
  17. * Register toolbar widget.
  18. */
  19. function wpa_register_toolbar_widget() {
  20. register_widget( 'Wp_Accessibility_Toolbar' );
  21. }
  22. add_action( 'wp_enqueue_scripts', 'wpa_register_scripts' );
  23. /**
  24. * Register jQuery scripts.
  25. */
  26. function wpa_register_scripts() {
  27. $wpa_version = ( SCRIPT_DEBUG ) ? wp_rand( 10000, 100000 ) : wpa_check_version();
  28. $wpatb = ( SCRIPT_DEBUG ) ? plugins_url( 'js/wpa-toolbar.js', __FILE__ ) : plugins_url( 'js/wpa-toolbar.min.js', __FILE__ );
  29. wp_register_script( 'wpa-toolbar', $wpatb, array(), $wpa_version, true );
  30. $wpaui = ( SCRIPT_DEBUG ) ? plugins_url( 'js/a11y.js', __FILE__ ) : plugins_url( 'js/a11y.min.js', __FILE__ );
  31. wp_register_script( 'ui-a11y', $wpaui, array( 'jquery' ), $wpa_version, true );
  32. }
  33. add_action( 'wp_enqueue_scripts', 'wpa_toolbar_enqueue_scripts' );
  34. /**
  35. * Enqueue Toolbar scripts dependent on options.
  36. */
  37. function wpa_toolbar_enqueue_scripts() {
  38. $wpa_version = ( SCRIPT_DEBUG ) ? wp_rand( 10000, 100000 ) : wpa_check_version();
  39. wp_enqueue_script( 'jquery' );
  40. if ( 'on' === get_option( 'wpa_toolbar' ) ) {
  41. // Enqueue Toolbar JS if enabled.
  42. wp_enqueue_script( 'wpa-toolbar' );
  43. wp_localize_script( 'wpa-toolbar', 'wpatb', wpa_toolbar_js() );
  44. }
  45. wp_enqueue_script( 'ui-a11y' );
  46. // High Contrast CSS.
  47. $plugin_path = plugins_url( 'toolbar/css/a11y-contrast.css', __FILE__ );
  48. if ( file_exists( get_stylesheet_directory() . '/a11y-contrast.css' ) ) {
  49. $plugin_path = get_stylesheet_directory_uri() . '/a11y-contrast.css';
  50. }
  51. $plugin_path = array(
  52. 'path' => add_query_arg( 'version', $wpa_version, $plugin_path ),
  53. );
  54. wp_localize_script( 'ui-a11y', 'wpa11y', $plugin_path );
  55. // Font files for toolbar.
  56. wp_register_style( 'ui-font', plugins_url( 'toolbar/fonts/css/a11y-toolbar.css', __FILE__ ), array(), $wpa_version );
  57. // Toolbar CSS.
  58. /**
  59. * Filter URL for toolbar CSS.
  60. *
  61. * @hook wpa_toolbar_css
  62. *
  63. * @param {string} $url URL to stylesheet for accessibility toolbar.
  64. *
  65. * @return string
  66. */
  67. $toolbar_styles = apply_filters( 'wpa_toolbar_css', plugins_url( 'toolbar/css/a11y.css', __FILE__ ) );
  68. wp_register_style( 'ui-a11y', $toolbar_styles, array( 'ui-font' ), $wpa_version );
  69. // Font resizing stylesheet.
  70. $fontsize_stylesheet = ( 'on' === get_option( 'wpa_alternate_fontsize' ) ) ? 'a11y-fontsize-alt' : 'a11y-fontsize';
  71. /**
  72. * Filter the URL to the stylesheet controlling large font views.
  73. *
  74. * @hook wpa_fontsize_css
  75. *
  76. * @param {string} $stylesheet URL for increased font size stylesheet.
  77. *
  78. * @return string
  79. */
  80. $fontsize = apply_filters( 'wpa_fontsize_css', plugins_url( 'toolbar/css/' . $fontsize_stylesheet . '.css', __FILE__ ) );
  81. wp_register_style( 'ui-fontsize.css', $fontsize, array(), $wpa_version );
  82. if ( 'on' === get_option( 'wpa_alternate_fontsize' ) ) {
  83. $vars = 'html { --wpa-font-size: 150%; }';
  84. } else {
  85. $vars = 'html { --wpa-font-size: clamp( 24px, 1.5rem, 36px ); --wpa-h1-size : clamp( 48px, 3rem, 72px ); --wpa-h2-size : clamp( 40px, 2.5rem, 60px ); --wpa-h3-size : clamp( 32px, 2rem, 48px ); --wpa-h4-size : clamp( 28px, 1.75rem, 42px ); --wpa-sub-list-size: 1.1em; --wpa-sub-sub-list-size: 1em; } ';
  86. }
  87. wp_add_inline_style( 'ui-fontsize.css', $vars );
  88. // Control toolbar font size.
  89. $toolbar_size = get_option( 'wpa_toolbar_size' );
  90. $toolbar_size = ( false === stripos( $toolbar_size, 'em' ) ) ? $toolbar_size . 'px' : $toolbar_size;
  91. // Only enable styles when required by options.
  92. if ( get_option( 'wpa_toolbar_size' ) && 'on' === get_option( 'wpa_toolbar' ) ) {
  93. wp_add_inline_style( 'ui-a11y', '.a11y-toolbar ul li button { font-size: ' . $toolbar_size . ' !important; }' );
  94. }
  95. if ( $toolbar_styles && $fontsize ) {
  96. wp_enqueue_style( 'ui-a11y' );
  97. wp_enqueue_style( 'ui-fontsize.css' );
  98. }
  99. }
  100. add_shortcode( 'wpa_toolbar', 'wpa_toolbar_shortcode' );
  101. /**
  102. * Output Toolbar shortcode
  103. *
  104. * @param array $atts Shortcode attributes.
  105. * @param string $content Contained content.
  106. *
  107. * @return string
  108. */
  109. function wpa_toolbar_shortcode( $atts, $content ) {
  110. $args = shortcode_atts(
  111. array(
  112. 'type' => 'widget',
  113. 'control' => 'button',
  114. ),
  115. $atts,
  116. 'wpa_toolbar'
  117. );
  118. return wpa_toolbar_html( $args['type'], $args['control'] );
  119. }
  120. /**
  121. * Generate Toolbar as HTML.
  122. *
  123. * @param string $type widget, shortcode, js generated.
  124. * @param string $control Control type: button or not.
  125. *
  126. * @return string HTML.
  127. */
  128. function wpa_toolbar_html( $type = 'widget', $control = 'button' ) {
  129. $contrast = esc_html__( 'Toggle High Contrast', 'wp-accessibility' );
  130. $grayscale = esc_html__( 'Toggle Grayscale', 'wp-accessibility' );
  131. $fontsize = esc_html__( 'Toggle Font size', 'wp-accessibility' );
  132. $enable_grayscale = ( 'on' === get_option( 'wpa_toolbar_gs' ) && current_user_can( 'manage_options' ) ) ? true : false;
  133. $enable_contrast = ( 'off' === get_option( 'wpa_toolbar_ct' ) ) ? false : true;
  134. $enable_fontsize = ( 'off' === get_option( 'wpa_toolbar_fs' ) ) ? false : true;
  135. $responsive = ( 'on' === get_option( 'wpa_toolbar_mobile' ) ) ? 'a11y-responsive ' : '';
  136. $is_rtl = ( is_rtl() ) ? ' rtl' : ' ltr';
  137. $is_reversed = ( 'on' === get_option( 'wpa_toolbar_right' ) ) ? ' reverse' : ' default';
  138. $toolbar_type = ( 'widget' === $type ) ? 'a11y-toolbar-widget' : 'a11y-toolbar';
  139. $control_type = ( 'button' !== $control ) ? 'a href="#" role="button"' : 'button type="button"'; // button control does not work in Edge.
  140. $closure = ( 'button' !== $control ) ? 'a' : 'button'; // button control does not work in Edge.
  141. $toolbar = '
  142. <!-- a11y toolbar widget -->
  143. <div class="' . $responsive . ' ' . $is_rtl . ' ' . $is_reversed . ' ' . $toolbar_type . '">
  144. <ul>';
  145. if ( $enable_contrast ) {
  146. $toolbar .= '<li><' . $control_type . ' class="a11y-toggle a11y-toggle-contrast toggle-contrast" id="is_normal_contrast" aria-pressed="false"><span class="offscreen">' . $contrast . '</span> <span class="aticon aticon-adjust" aria-hidden="true"></span></' . $closure . '></li>';
  147. }
  148. if ( $enable_grayscale ) {
  149. $toolbar .= '<li><' . $control_type . ' class="a11y-toggle a11y-toggle-grayscale toggle-grayscale" id="is_normal_color" aria-pressed="false"><span class="offscreen">' . $grayscale . '</span> <span class="aticon aticon-tint" aria-hidden="true"></span></' . $closure . '></li>';
  150. }
  151. if ( $enable_fontsize ) {
  152. $toolbar .= '<li><' . $control_type . ' class="a11y-toggle a11y-toggle-fontsize toggle-fontsize" id="is_normal_fontsize" aria-pressed="false"><span class="offscreen">' . $fontsize . '</span> <span class="aticon aticon-font" aria-hidden="true"></span></' . $closure . '></li>';
  153. }
  154. $toolbar .= '
  155. </ul>
  156. </div>
  157. <!-- // a11y toolbar widget -->';
  158. return $toolbar;
  159. }
  160. /**
  161. * Generate Toolbar variables for localization in JS.
  162. */
  163. function wpa_toolbar_js() {
  164. $default = ( false !== (bool) trim( get_option( 'wpa_toolbar_default' ) ) ) ? get_option( 'wpa_toolbar_default' ) : 'body';
  165. /**
  166. * Filter attachment location of the toolbar. Default `body`.
  167. *
  168. * @hook wpa_move_toolbar
  169. *
  170. * @param {string} $el Target element selector.
  171. *
  172. * @return string
  173. */
  174. $location = apply_filters( 'wpa_move_toolbar', $default );
  175. $is_rtl = ( is_rtl() ) ? 'rtl' : 'ltr';
  176. $is_reversed = ( 'on' === get_option( 'wpa_toolbar_right' ) ) ? 'reversed' : 'default';
  177. $responsive = ( 'on' === get_option( 'wpa_toolbar_mobile' ) ) ? 'a11y-responsive' : 'a11y-non-responsive';
  178. $custom_location = ( '' !== get_option( 'wpa_toolbar_default' ) ) ? 'custom-location' : 'standard-location';
  179. $contrast = esc_html__( 'Toggle High Contrast', 'wp-accessibility' );
  180. $grayscale = esc_html__( 'Toggle Grayscale', 'wp-accessibility' );
  181. $fontsize = esc_html__( 'Toggle Font size', 'wp-accessibility' );
  182. $enable_grayscale = ( 'on' === get_option( 'wpa_toolbar_gs' ) && current_user_can( 'manage_options' ) ) ? 'true' : 'false';
  183. $enable_fontsize = ( 'off' === get_option( 'wpa_toolbar_fs' ) ) ? 'false' : 'true';
  184. $enable_contrast = ( 'off' === get_option( 'wpa_toolbar_ct' ) ) ? 'false' : 'true';
  185. return array(
  186. 'location' => $location,
  187. 'is_rtl' => $is_rtl,
  188. 'is_right' => $is_reversed,
  189. 'responsive' => $responsive,
  190. 'contrast' => $contrast,
  191. 'grayscale' => $grayscale,
  192. 'fontsize' => $fontsize,
  193. 'custom_location' => $custom_location,
  194. 'enable_grayscale' => $enable_grayscale,
  195. 'enable_fontsize' => $enable_fontsize,
  196. 'enable_contrast' => $enable_contrast,
  197. );
  198. }