Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add confirmation dialog when leaving invalid URL screen with unsaved changes #1414

Merged
merged 2 commits into from
Sep 9, 2018
Merged

Add confirmation dialog when leaving invalid URL screen with unsaved changes #1414

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3051529
Dequeue autosave script from amp_invalid_url post edit screen
westonruter Sep 9, 2018
c544536
Display AYS dialog when leaving invalid URL screen without saving cha…
westonruter Sep 9, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 60 additions & 0 deletions assets/js/amp-invalid-url-post-edit-screen.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
/* exported ampInvalidUrlPostEditScreen */

var ampInvalidUrlPostEditScreen = ( function() { // eslint-disable-line no-unused-vars
var component;

component = {
data: {
l10n: {
unsaved_changes: ''
}
}
};

/**
* Boot.
*
* @param {Object} data Data.
* @param {Object} data.l10n Translations.
*/
component.boot = function boot( data ) {
Object.assign( component.data, data );
component.watchForUnsavedChanges();
};

/**
* Watch for unsaved changes.
*
* Add an beforeunload warning when attempting to leave the page when there are unsaved changes,
* unless the user is pressing the trash link or update button.
*/
component.watchForUnsavedChanges = function watchForUnsavedChanges() {
var onChange = function( event ) {
if ( event.target.matches( 'select' ) ) {
document.getElementById( 'amp_validation_errors' ).removeEventListener( 'change', onChange );

window.addEventListener( 'beforeunload', component.onBeforeUnload );

// Remove prompt when clicking trash or update.
document.querySelector( '#major-publishing-actions' ).addEventListener( 'click', function() {
window.removeEventListener( 'beforeunload', component.onBeforeUnload );
} );
}
};
document.getElementById( 'amp_validation_errors' ).addEventListener( 'change', onChange );
};

/**
* Show message at beforeunload.
*
* @param {Event} event - The beforeunload event.
* @return {string} Message.
*/
component.onBeforeUnload = function onBeforeUnload( event ) {
event.preventDefault();
event.returnValue = component.data.l10n.unsaved_changes;
return component.data.l10n.unsaved_changes;
};

return component;
}() );
32 changes: 31 additions & 1 deletion includes/validation/class-amp-invalid-url-post-type.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,11 +128,15 @@ public static function should_show_in_menu() {
public static function add_admin_hooks() {
add_filter( 'dashboard_glance_items', array( __CLASS__, 'filter_dashboard_glance_items' ) );
add_action( 'rightnow_end', array( __CLASS__, 'print_dashboard_glance_styles' ) );

// Edit post screen hooks.
add_action( 'admin_enqueue_scripts', array( __CLASS__, 'enqueue_edit_post_screen_scripts' ) );
add_action( 'add_meta_boxes', array( __CLASS__, 'add_meta_boxes' ) );
add_action( 'edit_form_top', array( __CLASS__, 'print_url_as_title' ) );

// Post list screen hooks.
add_filter( 'the_title', array( __CLASS__, 'filter_the_title_in_post_list_table' ), 10, 2 );
add_action( 'restrict_manage_posts', array( __CLASS__, 'render_post_filters' ), 10, 2 );

add_filter( 'manage_' . self::POST_TYPE_SLUG . '_posts_columns', array( __CLASS__, 'add_post_columns' ) );
add_action( 'manage_posts_custom_column', array( __CLASS__, 'output_custom_column' ), 10, 2 );
add_filter( 'post_row_actions', array( __CLASS__, 'filter_row_actions' ), 10, 2 );
Expand Down Expand Up @@ -1010,6 +1014,32 @@ function( $result ) {
exit();
}

/**
* Enqueue scripts for the edit post screen.
*/
public static function enqueue_edit_post_screen_scripts() {
$current_screen = get_current_screen();
if ( 'post' !== $current_screen->base || self::POST_TYPE_SLUG !== $current_screen->post_type ) {
return;
}

// Eliminate autosave since it is only relevant for the content editor.
wp_dequeue_script( 'autosave' );

$handle = 'amp-invalid-url-post-edit-screen';
wp_enqueue_script( $handle, amp_get_asset_url( "js/$handle.js" ), array(), AMP__VERSION, true );
$data = array(
'l10n' => array(
'unsaved_changes' => __( 'You have unsaved changes. Are you sure you want to leave?', 'amp' ),
),
);
wp_add_inline_script(
$handle,
sprintf( 'document.addEventListener( "DOMContentLoaded", function() { ampInvalidUrlPostEditScreen.boot( %s ); } );', wp_json_encode( $data ) ),
'after'
);
}

/**
* Adds the meta boxes to the CPT post.php page.
*
Expand Down
29 changes: 27 additions & 2 deletions tests/validation/test-class-amp-invalid-url-post-type.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@
* @package AMP
*/

// phpcs:disable WordPress.Variables.GlobalVariables.OverrideProhibited

/**
* Tests for AMP_Invalid_URL_Post_Type class.
*
Expand Down Expand Up @@ -83,11 +85,13 @@ public function test_add_admin_hooks() {

$this->assertEquals( 10, has_filter( 'dashboard_glance_items', array( self::TESTED_CLASS, 'filter_dashboard_glance_items' ) ) );
$this->assertEquals( 10, has_action( 'rightnow_end', array( self::TESTED_CLASS, 'print_dashboard_glance_styles' ) ) );

$this->assertEquals( 10, has_action( 'admin_enqueue_scripts', array( self::TESTED_CLASS, 'enqueue_edit_post_screen_scripts' ) ) );
$this->assertEquals( 10, has_action( 'add_meta_boxes', array( self::TESTED_CLASS, 'add_meta_boxes' ) ) );
$this->assertEquals( 10, has_action( 'edit_form_top', array( self::TESTED_CLASS, 'print_url_as_title' ) ) );
$this->assertEquals( 10, has_filter( 'the_title', array( self::TESTED_CLASS, 'filter_the_title_in_post_list_table' ) ) );
$this->assertEquals( 10, has_filter( 'restrict_manage_posts', array( self::TESTED_CLASS, 'render_post_filters' ), 10, 2 ) );

$this->assertEquals( 10, has_filter( 'the_title', array( self::TESTED_CLASS, 'filter_the_title_in_post_list_table' ) ) );
$this->assertEquals( 10, has_filter( 'restrict_manage_posts', array( self::TESTED_CLASS, 'render_post_filters' ) ) );
$this->assertEquals( 10, has_filter( 'manage_' . AMP_Invalid_URL_Post_Type::POST_TYPE_SLUG . '_posts_columns', array( self::TESTED_CLASS, 'add_post_columns' ) ) );
$this->assertEquals( 10, has_action( 'manage_posts_custom_column', array( self::TESTED_CLASS, 'output_custom_column' ) ) );
$this->assertEquals( 10, has_filter( 'post_row_actions', array( self::TESTED_CLASS, 'filter_row_actions' ) ) );
Expand Down Expand Up @@ -936,6 +940,27 @@ public function test_handle_validation_error_status_update() {
$this->assertStringEndsWith( 'action=edit&amp_taxonomy_terms_updated=1&amp_remaining_errors=0', $exception->getMessage() );
}

/**
* Test for enqueue_edit_post_screen_scripts()
*
* @covers \AMP_Invalid_URL_Post_Type::enqueue_edit_post_screen_scripts()
*/
public function test_enqueue_edit_post_screen_scripts() {
wp_enqueue_script( 'autosave' );
set_current_screen( 'index.php' );
AMP_Invalid_URL_Post_Type::enqueue_edit_post_screen_scripts();
$this->assertTrue( wp_script_is( 'autosave', 'enqueued' ) );
$this->assertFalse( wp_script_is( 'amp-invalid-url-post-edit-screen', 'enqueued' ) );

global $pagenow;
$pagenow = 'post.php';
set_current_screen( AMP_Invalid_URL_Post_Type::POST_TYPE_SLUG );
AMP_Invalid_URL_Post_Type::enqueue_edit_post_screen_scripts();
$this->assertFalse( wp_script_is( 'autosave', 'enqueued' ) );
$this->assertTrue( wp_script_is( 'amp-invalid-url-post-edit-screen', 'enqueued' ) );
$pagenow = null;
}

/**
* Test for add_meta_boxes()
*
Expand Down