Merge pull request #7 from ITS-Digital-Technology/options_updates

Add extended options, update UI

Author: raymondkingston

README.md

@@ -24,4 +24,13 @@ The global elements package includes a few elements that should be included on a
 2. Add the new plugin through WP Admin, uploading the `.zip` file from step 1.
 3. Activate the new plugin once it has finished uploading.
 4. If you need to stop this plugin from displaying the global header, footer, or TrustArc elements, you can do so from the settings page for this plugin in WP Admin.
-5. If you need more detailed instructions, see this [KB article](https://service.northeastern.edu/tech?id=kb_article_view&sysparm_article=KB000022192).
+5. If you need more detailed instructions, see this [KB article](https://service.northeastern.edu/tech?id=kb_article_view&sysparm_article=KB000022192).
+
+### TrustArc Visibility
+
+Some themes may have a height style on iframes. This can be tested by opening the Cookie Preferences link found as the last item in the footer (front end), where the TrustArc modal may be partly obscured when open. If so, you can override with the following style:
+
+    .truste_popframe {
+        height: var(--truste-popframe-height) !important;
+    }
+    

images/duplicate-wordmark-example.png

@@ -3,7 +3,7 @@
 	"slug" : "global-elements-wordpress",
 	"author" : "<a href='https://its.northeastern.edu/'>ITS Digital Technology & Services</a>",
 	"author_profile" : "https://its.northeastern.edu/",
-	"version" : "1.3.0",
+	"version" : "1.4.0",
 	"download_url" : "https://github.com/ITS-Digital-Technology/global-elements-wordpress/releases/download/v1.3.0/global-elements-wordpress.zip",
 	"requires" : "5.6",
 	"tested" : "6.6.1",
@@ -12,7 +12,7 @@
 	"sections" : {
 		"description" : "A Wordpress plugin developed by the Northeastern University ITS Web Solutions team that inserts the Northeastern University global header, footer, and TrustArc cookie consent manager. Each elemenent can be enabled/disabled from the plugin's settings.",
 		"installation" : "Click the activate button to install. In order for the global header to display, the active theme must support a call to wp_body_open() after the opening &lt;body&gt; tag.",
-		"changelog" : "Fixed 'unexpected output' bug and tweaked TrustArc link formatting."
+		"changelog" : "Added global header options to WP Admin"
 	},
 	"banners" : {
 		"low" : "",

manifest/info.json

@@ -0,0 +1,43 @@
+table.form-table {
+    max-width: 45rem;
+}
+
+.form-table th {
+    width: 80%;
+}
+
+.form-table th {
+    padding-top: 1rem;
+}
+
+.form-table td {
+    padding-bottom: 2rem;
+}
+
+@media screen and (min-width: 783px) {
+    .form-table td {
+        vertical-align: top;
+        text-align:center;
+    }
+
+    .form-table th,
+    .form-table td {
+        padding-top: 1rem;
+        padding-bottom: 1rem;
+    }
+}
+
+.form-table tr:not(:last-child),
+.form-table tr:not(:last-child) {
+    border-bottom: 1px solid rgba(0,0,0,0.3)
+}
+
+.nuge-img-max-width {
+    max-width :300px;
+}
+
+.nuge-skip-link-selector {
+    max-width: 200px;
+}
+
+.sr-only { display: none; }

nu-global-elements-admin.css

@@ -10,72 +10,109 @@
 
 if (!defined('ABSPATH')) { exit; }
 
-const NU_GLOBAL_ELEMENTS_PLUGIN_VER = "1.3.0";
+const NU_GLOBAL_ELEMENTS_PLUGIN_VER = "1.4.0";
 const NU_GLOBAL_ELEMENTS_PLUGIN_MANIFEST_URL = "https://its-digital-technology.github.io/global-elements-wordpress/manifest/info.json";
 
+
 /** 
  * Get options values for plugin
  */
 
 $nu_global_elements_options = get_option( 'nu_global_elements_option_name' );
 
+
 /** 
- * Include global elements CSS, kernl UI and javascript from CDN
+ * Include global elements CSS, kernl UI and javascript from CDN on front end
  */
-add_action('wp_head', function() {
-	echo '
-            <link rel="stylesheet" href="https://global-packages.cdn.northeastern.edu/global-elements/dist/css/index.css">
-            <script src="https://global-packages.cdn.northeastern.edu/global-elements/dist/js/index.umd.js"></script>
-            <script src="https://global-packages.cdn.northeastern.edu/kernl-ui/dist/js/index.umd.js" defer></script>
-            ';
-});
+
+add_action('wp_head', function() { ?>
+	<link rel="stylesheet" href="https://global-packages.cdn.northeastern.edu/global-elements/dist/css/index.css">
+    <script src="https://global-packages.cdn.northeastern.edu/global-elements/dist/js/index.umd.js"></script>
+    <script src="https://global-packages.cdn.northeastern.edu/kernl-ui/dist/js/index.umd.js" defer></script>
+<?php });
+
 
 /** 
  * Include the global NU header, if it is not disabled in the options
  * 
  * NOTE: There must be a wp_body_open() statement under the <body> tag, 
  * most likely in header.php of the theme. 
  */
-if (!isset($nu_global_elements_options['disable_global_header'])){
-        add_action('wp_body_open', function() {
 
-        echo '<div
-                x-data="NUGlobalElements.header({
-                    wordmark: true
-                })"
-                x-init="init()"
-                style="height: 48px; background-color: black"
-            ></div>';
+if (!isset($nu_global_elements_options['disable_global_header'])) {
+
+    add_action('wp_body_open', function() use ($nu_global_elements_options) {
+
+        // Determine whether to show the wordmark
+        $show_wordmark = isset($nu_global_elements_options['show_nu_wordmark']) && $nu_global_elements_options['show_nu_wordmark'];
+
+        // Determine whether to show the menu
+        $disable_menu = isset($nu_global_elements_options['disable_menu']) && $nu_global_elements_options['disable_menu'];
+
+        // Get the skipToMainSelector value, defaulting to "#main"
+        $skip_link_selector = isset($nu_global_elements_options['skip_link_selector']) ? $nu_global_elements_options['skip_link_selector'] : '#main';
+
+        // Create the x-data attribute dynamically with additional options
+        $x_data = sprintf(
+            'x-data="NUGlobalElements.header({ wordmark: %s, menu: %s, skipToMainSelector: \'%s\' })"',
+            $show_wordmark ? 'true' : 'false',
+            $disable_menu ? 'false' : 'true',
+            esc_js($skip_link_selector) // Escape for safe JavaScript insertion
+        );
+
+        // Output the HTML structure
+        echo sprintf(
+            '<div %s x-init="init()" style="height: 48px; background-color: black"></div>',
+            $x_data
+        );
 
     }, 10);
 }
 
+
 /** 
  * Include the global NU footer, if it is not disabled in the options
  */
-if (!isset($nu_global_elements_options['disable_global_footer'])){
-    add_action('wp_footer', function() {
 
+if (!isset($nu_global_elements_options['disable_global_footer'])) {
+    add_action('wp_footer', function() {
         echo '<div x-data="NUGlobalElements.footer()" x-init="init()"></div>';
-
     });
 }
 
+
 /** 
  * Include TrustArc, if it is not disabled in the options
  */
- if (!isset($nu_global_elements_options['disable_trustarc'])){
+
+if (!isset($nu_global_elements_options['disable_trustarc'])){
 
 	if (isset($nu_global_elements_options['disable_global_footer'])){
-		add_action('wp_footer', function() {
-			echo '<style>#trustarc-global-element footer {padding-top: .6rem !important;} #trustarc-global-element footer a {color: #ccc; text-decoration: none;}</style>';
+		add_action('wp_head', function() {
+			echo '<style>
+				#trustarc-global-element footer {padding-top: .6rem !important;}
+				#trustarc-global-element footer a {color: #ccc; text-decoration: none;}
+			</style>';
 		});
 	}
+
 	add_action('wp_footer', function() {
 		echo '<div id="trustarc-global-element" x-data="NUGlobalElements.trustarc()" x-init="init()"></div>';
    	});
 }
 
+// custom plugin styles
+add_action('admin_enqueue_scripts', 'nu_global_elements_admin');
+
+function nu_global_elements_admin($hook) {
+    if ( 'admin.php?page=nu-global-elements' == $hook ) {
+        return;
+    }
+
+    wp_enqueue_style('nu-global-elements-admin', plugins_url('nu-global-elements-admin.css', __FILE__ ));
+}
+
+
 /**
  * Create plugin settings/options menu item, page and fields
  * 
@@ -86,7 +123,7 @@
  * $disable_trustarc = $nu_global_elements_options['disable_trustarc']; // Disable TrustArc
  */
 
- class NUGlobalElements {
+class NUGlobalElements {
 	private $nu_global_elements_options;
 
 	public function __construct() {
@@ -146,6 +183,35 @@ public function nu_global_elements_page_init() {
 			'nu_global_elements_setting_section' // section
 		);
 
+		add_settings_field(
+			'show_nu_wordmark', // id
+			'Show "Northeastern University" Wordmark next to large "N"
+			<p style="font-weight: normal">(uncheck if "Northeastern University" already exists in your website department logo)</p>
+			<img class="nuge-img-max-width" src="' . plugin_dir_url( __FILE__ ) . 'images/duplicate-wordmark-example.png" alt=""><br>
+			<p><i style="font-weight: normal">Avoid duplicate wordmarks in the global and local headers.</i></p>', // title
+			array( $this, 'show_nu_wordmark_callback' ), // callback
+			'nu-global-elements-admin', // page
+			'nu_global_elements_setting_section' // section
+		);
+
+		add_settings_field(
+			'skip_link_selector', // id
+			'Skip link selector
+			<p style="font-weight: normal">Enter the ID selector for the "Skip to main content" destination. Include the <code>#</code> (<i>e.g.</i> <code>#main</code>)</p>
+			<p style="font-weight: normal">Be sure to remove existing skip-to-main elements from your theme.</p>', // title
+			array( $this, 'skip_link_selector_callback' ), // callback
+			'nu-global-elements-admin', // page
+			'nu_global_elements_setting_section' // section
+		);
+
+		add_settings_field(
+			'disable_menu', // id
+			'Hide the "Explore Northeastern" menu', // title
+			array( $this, 'disable_menu_callback' ), // callback
+			'nu-global-elements-admin', // page
+			'nu_global_elements_setting_section' // section
+		);
+
 		add_settings_field(
 			'disable_global_footer', // id
 			'Disable Global Footer', // title
@@ -177,6 +243,18 @@ public function nu_global_elements_sanitize($input) {
 			$sanitary_values['disable_trustarc'] = $input['disable_trustarc'];
 		}
 
+		if ( isset( $input['show_nu_wordmark'] ) ) {
+			$sanitary_values['show_nu_wordmark'] = $input['show_nu_wordmark'];
+		}
+
+		if ( isset( $input['skip_link_selector'] ) ) {
+			$sanitary_values['skip_link_selector'] = $input['skip_link_selector'];
+		}
+
+		if ( isset( $input['disable_menu'] ) ) {
+			$sanitary_values['disable_menu'] = $input['disable_menu'];
+		}
+
 		return $sanitary_values;
 	}
 
@@ -191,6 +269,34 @@ public function disable_global_header_callback() {
 		);
 	}
 
+	public function show_nu_wordmark_callback() {
+		printf(
+			'<input type="checkbox" name="nu_global_elements_option_name[show_nu_wordmark]" id="show_nu_wordmark" value="show_nu_wordmark" %s>',
+			( isset( $this->nu_global_elements_options['show_nu_wordmark'] ) && $this->nu_global_elements_options['show_nu_wordmark'] === 'show_nu_wordmark' ) ? 'checked' : ''
+		);
+	}
+
+	public function skip_link_selector_callback() {
+		// Get the existing value of the skip link selector from the options
+		$skip_link_selector = isset($this->nu_global_elements_options['skip_link_selector']) ? $this->nu_global_elements_options['skip_link_selector'] : '#main';
+
+		// Output the text input field with the existing value
+		printf(
+			'<input type="text" name="nu_global_elements_option_name[skip_link_selector]" id="skip_link_selector" value="%s" class="nuge-skip-link-selector" />',
+			esc_attr($skip_link_selector) // Ensure the value is properly escaped
+		);
+
+		// Provide a description about what the input is for
+		echo '<p class="sr-only">Enter the ID selector for the "Skip to main content" destination (e.g., <code>#main</code>).</p>';
+	}
+
+	public function disable_menu_callback() {
+		printf(
+			'<input type="checkbox" name="nu_global_elements_option_name[disable_menu]" id="disable_menu" value="disable_menu" %s>',
+			( isset( $this->nu_global_elements_options['disable_menu'] ) && $this->nu_global_elements_options['disable_menu'] === 'disable_menu' ) ? 'checked' : ''
+		);
+	}
+
 	public function disable_global_footer_callback() {
 		printf(
 			'<input type="checkbox" name="nu_global_elements_option_name[disable_global_footer]" id="disable_global_footer" value="disable_global_footer" %s>',
@@ -204,23 +310,25 @@ public function disable_trustarc_callback() {
 			( isset( $this->nu_global_elements_options['disable_trustarc'] ) && $this->nu_global_elements_options['disable_trustarc'] === 'disable_trustarc' ) ? 'checked' : ''
 		);
 	}
-
 }
+
 if ( is_admin() )
 	$nu_global_elements = new NUGlobalElements();
 
-
 add_filter( 'plugin_action_links_global-elements-wordpress/nu_global_elements.php', 'nu_global_elements_link' );
 function nu_global_elements_link( $links ) {
-    // Build and escape the URL.
+
+	// Build and escape the URL.
     $url = esc_url( add_query_arg(
         'page',
         'nu-global-elements',
         get_admin_url() . 'admin.php'
     ) );
-    // Create the link.
+
+	// Create the link.
     $settings_link = "<a href='$url'>" . __( 'Settings' ) . '</a>';
-    // Adds the link to the end of the array.
+
+	// Adds the link to the end of the array.
     array_push(
         $links,
         $settings_link
@@ -232,7 +340,6 @@ function nu_global_elements_link( $links ) {
  * Check for updates to this plugin and if available allow updating through WP admin plugin manager
  */
 
-
 if( ! class_exists( 'UpdateChecker' ) ) {
 
 	class UpdateChecker{
@@ -382,7 +489,6 @@ public function purge( $upgrader, $options ){
 
 		}
 
-
 	}
 
 	new UpdateChecker();