Contact link form, color picker a11y tweaks (#186)

Fixes: pressbooks/ideas#180
Fixes: pressbooks/pressbooks#1659

assets/scripts/customizer-toggle.js

@@ -0,0 +1,33 @@
+document.addEventListener( 'DOMContentLoaded', function () {
+	let checkbox = document.getElementById( '_customize-input-pb_network_contact_form' );
+	let email = document.getElementById( 'customize-control-pb_network_contact_email' );
+	let link = document.getElementById( 'customize-control-pb_network_contact_link' );
+	let title = document.getElementById( 'customize-control-pb_network_contact_form_title' );
+
+	checkbox.addEventListener( 'click', toggleReadOnly );
+
+	function toggleReadOnly() {
+		if ( checkbox.checked === false ) {
+			email.classList.add( 'hidden' );
+			email.style.cssText = null;
+
+			title.classList.add( 'hidden' );
+			title.style.cssText = null;
+
+			link.classList.remove( 'hidden' );
+			link.style.cssText = 'display: list-item;';
+		} else {
+			email.classList.remove( 'hidden' );
+			email.style.cssText = 'display: list-item;';
+
+			title.classList.remove( 'hidden' );
+			title.style.cssText = 'display: list-item;';
+
+			link.classList.add( 'hidden' );
+			link.style.cssText = null;
+		}
+	}
+
+	toggleReadOnly();
+
+} );

dist/mix-manifest.json

@@ -5,5 +5,6 @@
     "/scripts/call-to-action.js": "/scripts/call-to-action.js?id=14b2ac09b5fc52660522",
     "/scripts/catalog-admin.js": "/scripts/catalog-admin.js?id=43511dff74631c962103",
     "/scripts/customizer.js": "/scripts/customizer.js?id=cd5dc6157cc6b89dc521",
-    "/scripts/page-section.js": "/scripts/page-section.js?id=03bd80d7f2c2727b2b4f"
+    "/scripts/customizer-toggle.js": "/scripts/customizer-toggle.js?id=38614b765cca526519d0",
+    "/scripts/page-section.js": "/scripts/page-section.js?id=b62a3319a10d83a36aea"
 }

dist/scripts/customizer-toggle.js

@@ -0,0 +1 @@
+!function(e){var t={};function n(o){if(t[o])return t[o].exports;var r=t[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}n.m=e,n.c=t,n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:o})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)n.d(o,r,function(t){return e[t]}.bind(null,r));return o},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="/",n(n.s=4)}({4:function(e,t,n){e.exports=n("5MvR")},"5MvR":function(e,t){document.addEventListener("DOMContentLoaded",function(){var e=document.getElementById("_customize-input-pb_network_contact_form"),t=document.getElementById("customize-control-pb_network_contact_email"),n=document.getElementById("customize-control-pb_network_contact_link"),o=document.getElementById("customize-control-pb_network_contact_form_title");function r(){!1===e.checked?(t.classList.add("hidden"),t.style.cssText=null,o.classList.add("hidden"),o.style.cssText=null,n.classList.remove("hidden"),n.style.cssText="display: list-item;"):(t.classList.remove("hidden"),t.style.cssText="display: list-item;",o.classList.remove("hidden"),o.style.cssText="display: list-item;",n.classList.add("hidden"),n.style.cssText=null)}e.addEventListener("click",r),r()})}});

dist/scripts/page-section.js

@@ -1 +1 @@
-!function(e){var t={};function n(i){if(t[i])return t[i].exports;var a=t[i]={i:i,l:!1,exports:{}};return e[i].call(a.exports,a,a.exports,n),a.l=!0,a.exports}n.m=e,n.c=t,n.d=function(e,t,i){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:i})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var a in e)n.d(i,a,function(t){return e[t]}.bind(null,a));return i},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="/",n(n.s=4)}({4:function(e,t,n){e.exports=n("eeN9")},eeN9:function(e,t){tinymce.create("tinymce.plugins.aldine_page_section",{init:function(e,t){e.addButton("aldine_page_section",{title:aldine.page_section.title,icon:"icon dashicons-layout",onclick:function(){e.windowManager.open({title:aldine.page_section.title,body:[{type:"textbox",name:"title",label:aldine.page_section.title_label,value:aldine.page_section.title},{type:"listbox",name:"variant",label:"Variant",values:[{text:aldine.page_section.standard,value:""},{text:aldine.page_section.accent,value:"accent"},{text:aldine.page_section.bordered,value:"bordered"},{text:aldine.page_section.borderless,value:"borderless"}],value:""}],onsubmit:function(t){e.insertContent('[aldine_page_section title="'+t.data.title+'" variant="'+t.data.variant+'"]<p>Insert your page section content here.</p>[/aldine_page_section]')}})}})},createControl:function(e,t){return null}}),tinymce.PluginManager.add("aldine_page_section",tinymce.plugins.aldine_page_section)}});
+!function(e){var t={};function n(i){if(t[i])return t[i].exports;var a=t[i]={i:i,l:!1,exports:{}};return e[i].call(a.exports,a,a.exports,n),a.l=!0,a.exports}n.m=e,n.c=t,n.d=function(e,t,i){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:i})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var a in e)n.d(i,a,function(t){return e[t]}.bind(null,a));return i},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="/",n(n.s=5)}({5:function(e,t,n){e.exports=n("eeN9")},eeN9:function(e,t){tinymce.create("tinymce.plugins.aldine_page_section",{init:function(e,t){e.addButton("aldine_page_section",{title:aldine.page_section.title,icon:"icon dashicons-layout",onclick:function(){e.windowManager.open({title:aldine.page_section.title,body:[{type:"textbox",name:"title",label:aldine.page_section.title_label,value:aldine.page_section.title},{type:"listbox",name:"variant",label:"Variant",values:[{text:aldine.page_section.standard,value:""},{text:aldine.page_section.accent,value:"accent"},{text:aldine.page_section.bordered,value:"bordered"},{text:aldine.page_section.borderless,value:"borderless"}],value:""}],onsubmit:function(t){e.insertContent('[aldine_page_section title="'+t.data.title+'" variant="'+t.data.variant+'"]<p>Insert your page section content here.</p>[/aldine_page_section]')}})}})},createControl:function(e,t){return null}}),tinymce.PluginManager.add("aldine_page_section",tinymce.plugins.aldine_page_section)}});

footer.php

@@ -15,6 +15,17 @@
 $network_facebook = get_option( 'pb_network_facebook' );
 $network_twitter = get_option( 'pb_network_twitter' );
 $pb_network_contact_form = get_option( 'pb_network_contact_form' );
+$pb_network_contact_link = get_option( 'pb_network_contact_link' );
+
+if ( $pb_network_contact_form ) {
+	$contact_link = network_home_url( '/#contact' );
+} else {
+	if ( ! empty( $pb_network_contact_link ) ) {
+		$contact_link = $pb_network_contact_link;
+	} else {
+		$contact_link = 'mailto:' . get_option( 'admin_email' );
+	}
+}
 
 ?>
 
@@ -77,7 +88,7 @@ $pb_network_contact_form = get_option( 'pb_network_contact_form' );
 				<p class="footer__pressbooks__links__title"><a href="https://pressbooks.com"><?php printf( __( 'Powered by %s', 'pressbooks-aldine' ), '<span class="pressbooks">Pressbooks</span>' ); ?></a></p>
 				<ul class="footer__pressbooks__links__list">
 					<li><a href="https://pressbooks.education/help-and-support/"><?php _e( 'Guides and Tutorials', 'pressbooks-aldine' ); ?></a> |</li>
-					<li><a href="<?php echo network_home_url( '/#contact' ); ?>"><?php _e( 'Contact', 'pressbooks-aldine' ); ?></a> </li>
+					<li><a href="<?php echo $contact_link; ?>"><?php _e( 'Contact', 'pressbooks-aldine' ); ?></a> </li>
 				</ul>
 			</div>
 			<div class="footer__pressbooks__social">

functions.php

@@ -65,6 +65,8 @@ add_action( 'updated_option', '\Aldine\Actions\add_color_variants', 10, 3 );
 add_action( 'customize_register', '\Aldine\Customizer\customize_register' );
 add_action( 'customize_preview_init', '\Aldine\Customizer\customize_preview_js' );
 add_action( 'customize_controls_enqueue_scripts', '\Aldine\Customizer\enqueue_color_contrast_validator' );
+add_action( 'customize_controls_enqueue_scripts', '\Aldine\Customizer\enqueue_contact_form_tweaks' );
+add_action( 'customize_controls_enqueue_scripts', '\Aldine\Customizer\enqueue_pb_a11y_in_customizer' );
 
 // Shortcodes
 add_shortcode( 'aldine_page_section', '\Aldine\Shortcodes\page_section' );

inc/customizer/namespace.php

@@ -15,7 +15,6 @@ use PressbooksMix\Assets;
  * @param \WP_Customize_Manager $wp_customize Theme Customizer object.
  */
 function customize_register( \WP_Customize_Manager $wp_customize ) {
-
 	// Remove unsupported WP controls, @see \WP_Customize_Manager::register_controls
 
 	$wp_customize->remove_control( 'display_header_text' );
@@ -235,6 +234,18 @@ function customize_register( \WP_Customize_Manager $wp_customize ) {
 			'settings' => 'pb_network_contact_email',
 		]
 	);
+	$wp_customize->add_setting(
+		'pb_network_contact_link', [
+			'type' => 'option',
+		]
+	);
+	$wp_customize->add_control(
+		'pb_network_contact_link', [
+			'label' => __( 'Contact Link', 'pressbooks-aldine' ),
+			'section' => 'pb_network_contact_form',
+			'settings' => 'pb_network_contact_link',
+		]
+	);
 }
 
 /**
@@ -276,3 +287,20 @@ function enqueue_color_contrast_validator() {
 		sprintf( 'var _validateWCAGColorContrastExports = %s;', wp_json_encode( $exports ) )
 	);
 }
+
+/**
+ * Contact form UI tweaks (checkbox should toggle either/or)
+ */
+function enqueue_contact_form_tweaks() {
+	$assets = new Assets( 'pressbooks-aldine', 'theme' );
+	$assets->setSrcDirectory( 'assets' )->setDistDirectory( 'dist' );
+	wp_enqueue_script( 'aldine/customizer-toggle', $assets->getPath( 'scripts/customizer-toggle.js' ) );
+}
+
+/**
+ * Enqueue pb-a11y hacks in customizer
+ */
+function enqueue_pb_a11y_in_customizer() {
+	$pb_a11y_script = plugin_dir_url( 'pressbooks' ) . 'pressbooks/assets/src/scripts/a11y.js';
+	wp_enqueue_script( 'pb-a11y', $pb_a11y_script, [ 'wp-i18n' ], false, true );
+}

package-lock.json

@@ -6806,7 +6806,8 @@
 				},
 				"ansi-regex": {
 					"version": "2.1.1",
-					"bundled": true
+					"bundled": true,
+					"optional": true
 				},
 				"aproba": {
 					"version": "1.2.0",
@@ -6824,11 +6825,13 @@
 				},
 				"balanced-match": {
 					"version": "1.0.0",
-					"bundled": true
+					"bundled": true,
+					"optional": true
 				},
 				"brace-expansion": {
 					"version": "1.1.11",
 					"bundled": true,
+					"optional": true,
 					"requires": {
 						"balanced-match": "^1.0.0",
 						"concat-map": "0.0.1"
@@ -6841,15 +6844,18 @@
 				},
 				"code-point-at": {
 					"version": "1.1.0",
-					"bundled": true
+					"bundled": true,
+					"optional": true
 				},
 				"concat-map": {
 					"version": "0.0.1",
-					"bundled": true
+					"bundled": true,
+					"optional": true
 				},
 				"console-control-strings": {
 					"version": "1.1.0",
-					"bundled": true
+					"bundled": true,
+					"optional": true
 				},
 				"core-util-is": {
 					"version": "1.0.2",
@@ -6952,7 +6958,8 @@
 				},
 				"inherits": {
 					"version": "2.0.3",
-					"bundled": true
+					"bundled": true,
+					"optional": true
 				},
 				"ini": {
 					"version": "1.3.5",
@@ -6962,6 +6969,7 @@
 				"is-fullwidth-code-point": {
 					"version": "1.0.0",
 					"bundled": true,
+					"optional": true,
 					"requires": {
 						"number-is-nan": "^1.0.0"
 					}
@@ -6974,17 +6982,20 @@
 				"minimatch": {
 					"version": "3.0.4",
 					"bundled": true,
+					"optional": true,
 					"requires": {
 						"brace-expansion": "^1.1.7"
 					}
 				},
 				"minimist": {
 					"version": "0.0.8",
-					"bundled": true
+					"bundled": true,
+					"optional": true
 				},
 				"minipass": {
 					"version": "2.3.5",
 					"bundled": true,
+					"optional": true,
 					"requires": {
 						"safe-buffer": "^5.1.2",
 						"yallist": "^3.0.0"
@@ -7001,6 +7012,7 @@
 				"mkdirp": {
 					"version": "0.5.1",
 					"bundled": true,
+					"optional": true,
 					"requires": {
 						"minimist": "0.0.8"
 					}
@@ -7073,7 +7085,8 @@
 				},
 				"number-is-nan": {
 					"version": "1.0.1",
-					"bundled": true
+					"bundled": true,
+					"optional": true
 				},
 				"object-assign": {
 					"version": "4.1.1",
@@ -7083,6 +7096,7 @@
 				"once": {
 					"version": "1.4.0",
 					"bundled": true,
+					"optional": true,
 					"requires": {
 						"wrappy": "1"
 					}
@@ -7158,7 +7172,8 @@
 				},
 				"safe-buffer": {
 					"version": "5.1.2",
-					"bundled": true
+					"bundled": true,
+					"optional": true
 				},
 				"safer-buffer": {
 					"version": "2.1.2",
@@ -7188,6 +7203,7 @@
 				"string-width": {
 					"version": "1.0.2",
 					"bundled": true,
+					"optional": true,
 					"requires": {
 						"code-point-at": "^1.0.0",
 						"is-fullwidth-code-point": "^1.0.0",
@@ -7205,6 +7221,7 @@
 				"strip-ansi": {
 					"version": "3.0.1",
 					"bundled": true,
+					"optional": true,
 					"requires": {
 						"ansi-regex": "^2.0.0"
 					}
@@ -7243,11 +7260,13 @@
 				},
 				"wrappy": {
 					"version": "1.0.2",
-					"bundled": true
+					"bundled": true,
+					"optional": true
 				},
 				"yallist": {
 					"version": "3.0.3",
-					"bundled": true
+					"bundled": true,
+					"optional": true
 				}
 			}
 		},

webpack.mix.js

@@ -45,6 +45,7 @@ mix
 	.js( `${assets}/scripts/call-to-action.js`, `${dist}/scripts` )
 	.js( `${assets}/scripts/catalog-admin.js`, `${dist}/scripts` )
 	.js( `${assets}/scripts/customizer.js`, `${dist}/scripts` )
+	.js( `${assets}/scripts/customizer-toggle.js`, `${dist}/scripts` )
 	.js( `${assets}/scripts/page-section.js`, `${dist}/scripts` );
 
 // Assets