Add a Tour Component

assets/css/style.css

@@ -94,6 +94,8 @@
 	--gp-color-status-waiting-subtle: #ffffc2;
 	--gp-color-status-rejected-subtle: #ff8e8e;
 	--gp-color-status-changesrequested-subtle: #87ceeb;
+
+	--gp-color-tour: var( --gp-color-primary );
 }
 
 *,
@@ -1608,3 +1610,77 @@ table.form-table td {
 		flex-direction: column;
 	}
 }
+
+.pulse {
+		border-radius: 50%;
+		position: relative;
+		cursor: pointer;
+		top: -2em;
+		left: -0.4em;
+		width: 12px;
+		height: 12px;
+		margin: -6px;
+}
+
+.pulse-wrapper {
+	border: 2px dashed transparent;
+	padding: 0.4em;
+	border-radius: 3px;
+	margin-left: calc( -0.4em - 2px );
+	margin-top: calc( -0.4em - 2px );
+	margin-bottom: calc( -0.4em - 2px );
+}
+
+.webui-popover .webui-popover-content {
+	font-size: .9em;
+	color: #fff;
+}
+.pulse-border {
+	border: 2px dashed var( --gp-color-tour );
+}
+
+a.tour-button {
+	text-decoration: none;
+	border-radius: 3px;
+	font-weight: bold;
+	padding: 3px 10px;
+	border: rgba( 255, 255, 255, .5 ) thin solid;
+	color: #fff;
+}
+a.tour-button:hover {
+	border: #fff thin solid;
+	background: rgba( 255, 255, 255, .25 );
+}
+
+a.previous-tour-item {
+	margin-right: 0.5em;
+}
+
+a.tour-button.button-primary {
+	background: #fff;
+	color: #2f99ee;
+	color: var( --gp-color-tour );
+	border: #fff thin solid;
+}
+a.tour-button.button-primary:hover {
+	background: rgba( 255,255,255,.75 );
+}
+
+.popover-nav-btns {
+	margin-top: 11px;
+}
+
+.webui-popover.in{
+	background: var( --gp-color-tour );
+}
+
+.webui-popover .webui-popover-title {
+	border-radius: 4px 4px 0 0; // Make webui-popover outside and inner borders radius concentric.
+	background: #fff;
+	font-weight: bold;
+	color: var( --gp-color-tour );
+}
+
+.webui-popover a {
+	color: #fff;
+}

assets/js/tour.js

@@ -0,0 +1,117 @@
+/* global wp, document, window, WebuiPopovers, gp_tour */
+/* eslint camelcase: "off" */
+
+jQuery( document ).ready(
+	function() {
+		jQuery( document ).on( 'click', '.close-tour, .dismiss-tour', function() {
+			jQuery( this ).closest( '.webui-popover' ).hide();
+			jQuery( '.pulse-wrapper' ).removeClass( 'pulse-border' );
+			return false;
+		} );
+		jQuery( document ).on( 'click', '.next-tour-item', function() {
+			jQuery( '.pulse-wrapper .tour-' + jQuery( this ).data( 'tourname' ) + ':visible' ).first().click();
+			return false;
+		} );
+		jQuery( document ).on( 'click', '.previous-tour-item', function() {
+			var currentPopover = jQuery( this ).closest( '.webui-popover' );
+			if ( currentPopover.prev().hasClass( 'webui-popover' ) ) {
+				currentPopover.hide();
+				currentPopover.prev().show();
+			}
+			return false;
+		} );
+		jQuery( document ).on( 'click', '.reveal-next-tour-item', function() {
+			jQuery( this ).closest( '.webui-popover' ).hide();
+			jQuery( jQuery( this ).data( 'reveal' ) ).first().click();
+			return false;
+		} );
+
+		jQuery( document ).on( 'click', '.pulse', function() {
+			var wrapper = jQuery( this ).closest( '.pulse-wrapper' );
+			var tourName = wrapper.data( 'tourname' );
+			var nextItem = 1 + wrapper.data( 'tourindex' );
+			var tourEndsHere = typeof window.tour[ tourName ][ nextItem ] === 'undefined';
+			var showPreviousBtn = wrapper.data( 'tourindex' ) > 1;
+			var popoverContent = wrapper.data( 'popover-content' );
+			var item = window.tour[ tourName ][ nextItem ];
+			jQuery( '.pulse-wrapper' ).removeClass( 'pulse-border' );
+			jQuery( '.webui-popover:visible' ).hide();
+			wrapper.addClass( 'pulse-border' );
+
+			if ( tourEndsHere ) {
+				popoverContent += '<br/><br/><a href="" class="close-tour">' + wp.i18n.__( 'Close', 'glotpress' ) + '</a>';
+			} else if ( typeof window.tour[ tourName ][ nextItem ] !== 'undefined' && typeof window.tour[ tourName ][ nextItem ].reveal === 'undefined' ) {
+				popoverContent += '<div class="popover-nav-btns">';
+				popoverContent += showPreviousBtn ? '<br/><br/><a href="" class="tour-button previous-tour-item" data-tourname="' + tourName + '">' + wp.i18n.__( 'Previous', 'glotpress' ) + '</a>' : '';
+				popoverContent += '<a href="" class="tour-button next-tour-item button-primary" data-tourname="' + tourName + '">Next</a>';
+				popoverContent += '</div>';
+			} else if ( typeof window.tour[ tourName ][ nextItem ].reveal !== 'undefined' ) {
+				popoverContent += '<br/><br/><a href="" class="reveal-next-tour-item" data-reveal="' + window.tour[ tourName ][ nextItem ].reveal + '">' + wp.i18n.__( 'Reveal Next Step', 'glotpress' ) + '</a>';
+			}
+			if ( ! tourEndsHere ) {
+				popoverContent += '<br/><small><a href="" class="dismiss-tour">' + wp.i18n.__( 'Dismiss this tour', 'glotpress' );
+			}
+			WebuiPopovers.show( this, { title: window.tour[ tourName ][ 0 ].title, content: popoverContent, width: 300, dismissible: true } );
+			jQuery( '.tour-' + tourName ).remove();
+
+			if ( tourEndsHere ) {
+				return;
+			}
+
+			addPulse( jQuery( item.selector ), item, tourName, nextItem );
+		} );
+		function addPulse( field, item, tourName, index ) {
+			var div = jQuery( '<div class="pulse-wrapper">' );
+			var pulse = jQuery( '<div class="pulse tour-' + tourName + '">' );
+			var cssString = '';
+			div.data( 'tourname', tourName ).data( 'tourindex', index ).data( 'popover-content', item.html );
+			field.wrap( div );
+			field.parent().append( pulse );
+			if ( typeof item.css !== 'undefined' ) {
+				cssString = cssObjectToString( item.css );
+				jQuery( item.selector ).closest( '.pulse-wrapper' ).css( 'cssText', cssString );
+			}
+		}
+
+		// Convert the CSS object to a CSS string
+		function cssObjectToString( cssObject ) {
+			return jQuery.map( cssObject, function( value, property ) {
+				return property + ': ' + value;
+			} ).join( '; ' );
+		}
+
+		window.tour = gp_tour;
+		window.loadTour = function() {
+			var color1 = '';
+			var color2 = '';
+			var sheet = {};
+			var n;
+			for ( n in window.tour ) {
+				color1 = window.tour[ n ][ 0 ].color + '00';
+				color2 = window.tour[ n ][ 0 ].color + 'a0';
+				sheet = document.styleSheets[ 0 ];
+				sheet.insertRule( '@keyframes animation-' + n + ' {' +
+					'0% {' +
+					'box-shadow: 0 0 0 0 ' + color2 + ';' +
+					'}' +
+					'70% {' +
+					'box-shadow: 0 0 0 10px ' + color1 + ';' +
+					'}' +
+					'100% {' +
+					'box-shadow: 0 0 0 0 ' + color1 + ';' +
+					'}' +
+					'}',
+				sheet.cssRules.length );
+
+				sheet.insertRule( '.tour-' + n + '{' +
+					'box-shadow: 0 0 0 ' + color2 + ';' +
+					'background: ' + color1 + ';' +
+					'-webkit-animation: animation-' + n + ' 2s infinite;' +
+					'animation: animation-' + n + ' 2s infinite; }',
+				sheet.cssRules.length );
+				addPulse( jQuery( window.tour[ n ][ 1 ].selector ), window.tour[ n ][ 1 ], n, 1 );
+			}
+		};
+		window.loadTour();
+	}
+);

glotpress.php

@@ -38,7 +38,7 @@
 define( 'GP_INC', 'gp-includes/' );
 define( 'GP_WP_REQUIRED_VERSION', '4.6' );
 define( 'GP_PHP_REQUIRED_VERSION', '7.4' );
-
+define( 'GP_SCRIPT_DEBUG', true );
 /**
  * Displays an admin notice on the plugins page that GlotPress has been disabled and why..
  *

gp-includes/assets-loader.php

@@ -12,10 +12,11 @@
 function gp_register_default_styles() {
 	$url = gp_plugin_url( 'assets/css' );
 
-	$suffix = SCRIPT_DEBUG ? '.css' : '.min.css';
+	$suffix = SCRIPT_DEBUG || GP_SCRIPT_DEBUG ? '.css' : '.min.css';
 
 	// Register our base style.
 	wp_register_style( 'gp-base', $url . '/style' . $suffix, array(), '20230725' );
+	wp_register_style( 'gp-jquery-webui-popover', $url . '/jquery.webui-popover' . $suffix, array( 'gp-base' ), '20230503' );
 }
 
 add_action( 'init', 'gp_register_default_styles' );
@@ -26,7 +27,7 @@ function gp_register_default_styles() {
 function gp_register_default_scripts() {
 	$url = gp_plugin_url( 'assets/js' );
 
-	$suffix = SCRIPT_DEBUG ? '.js' : '.min.js';
+	$suffix = SCRIPT_DEBUG || GP_SCRIPT_DEBUG ? '.js' : '.min.js';
 
 	// Register our standard scripts.
 	wp_register_script( 'tablesorter', $url . '/vendor/jquery.tablesorter' . $suffix, array( 'jquery' ), '20210429' );
@@ -35,11 +36,15 @@ function gp_register_default_scripts() {
 	wp_register_script( 'gp-glossary', $url . '/glossary' . $suffix, array( 'gp-editor' ), '20230808' );
 	wp_register_script( 'gp-translations-page', $url . '/translations-page' . $suffix, array( 'gp-editor' ), '20230808' );
 	wp_register_script( 'gp-mass-create-sets-page', $url . '/mass-create-sets-page' . $suffix, array( 'gp-editor' ), '20230808' );
+	wp_register_script( 'gp-tour', $url . '/tour' . $suffix, array( 'jquery', 'gp-jquery-webui-popover' ), '20230728', false );
 
 	wp_set_script_translations( 'gp-common', 'glotpress' );
 	wp_set_script_translations( 'gp-editor', 'glotpress' );
 	wp_set_script_translations( 'gp-glossary', 'glotpress' );
 	wp_set_script_translations( 'gp-mass-create-sets-page', 'glotpress' );
+	wp_set_script_translations( 'gp-tour', 'glotpress' );
+	wp_register_script( 'gp-jquery-webui-popover', $url . '/jquery.webui-popover' . $suffix, array( 'jquery' ), '20210429', false );
+	wp_localize_script( 'gp-tour', 'gp_tour', apply_filters( 'gp_tour', array() ) );
 }
 
 add_action( 'init', 'gp_register_default_scripts' );

gp-templates/header.php

@@ -6,7 +6,8 @@
 
 	<?php
 	// Enqueue the base style so we don't have to load it manually on each page.
-	gp_enqueue_styles( 'gp-base' );
+	gp_enqueue_styles( array( 'gp-base', 'gp-jquery-webui-popover' ) );
+	gp_enqueue_scripts( array( 'gp-jquery-webui-popover', 'gp-tour' ) );
 
 	gp_head();
 	?>

gp-templates/translations.php

@@ -36,7 +36,6 @@
 $editor_options = compact( 'can_approve', 'can_write', 'url', 'discard_warning_url', 'set_priority_url', 'set_status_url', 'word_count_type' );
 
 wp_localize_script( 'gp-editor', '$gp_editor_options', $editor_options );
-
 gp_tmpl_header();
 $i = 0;
 ?>
@@ -440,20 +439,20 @@
 	</tr>
 	</thead>
 <?php
-	foreach ( $translations as $translation ) {
-		if ( ! $translation->translation_set_id ) {
-			$translation->translation_set_id = $translation_set->id;
-		}
+foreach ( $translations as $translation ) {
+	if ( ! $translation->translation_set_id ) {
+		$translation->translation_set_id = $translation_set->id;
+	}
 
 	$can_approve_translation = GP::$permission->current_user_can( 'approve', 'translation', $translation->id, array( 'translation' => $translation ) );
 	gp_tmpl_load( 'translation-row', get_defined_vars() );
 }
 ?>
 <?php
-	if ( ! $translations ) :
-?>
+if ( ! $translations ) :
+	?>
 	<tr><td colspan="<?php echo $can_approve ? 5 : 4; ?>"><?php _e( 'No translations were found!', 'glotpress' ); ?></td></tr>
-<?php
+	<?php
 	endif;
 ?>
 </table>