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