43301 Notification of unsaved changes (#713)

* 43301 notification of unsaved changes * 43301 refactor code * 43301 update unit test * 43301 update unit test * 43301 notification of unsaved changes * 43301 add change detection for sortable list items * 43301 format code * 43301 update notification of unsaved changes when using the admin-bar * Fix typo --------- Co-authored-by: Frederic Alpers <88546396+fredericalpers@users.noreply.github.com> Co-authored-by: andernath <chibineko@gmail.com>
onOffice-Web-Org · May 8, 2024 · 105853b · 105853b
1 parent a141f59
commit 105853b
Show file tree

Hide file tree

Showing 10 changed files with 129 additions and 3 deletions.
diff --git a/dist/onoffice-unsaved-changes-message.min.js b/dist/onoffice-unsaved-changes-message.min.js
diff --git a/js/onoffice-unsaved-changes-message.js b/js/onoffice-unsaved-changes-message.js
@@ -0,0 +1,73 @@
+var onOffice = typeof onOffice_loc_settings !== 'undefined' ? onOffice_loc_settings : onOffice_unsaved_changes_message;
+
+jQuery(document).ready(function($){
+	let checkUnsavedChanges = false;
+	let checkNavigationTriggered = false;
+
+	$('#poststuff :input, form[action="options.php"] :input').on("change", function() {
+		checkUnsavedChanges = true;
+	});
+
+	$('#poststuff span, #poststuff li').on("click", function() {
+		checkUnsavedChanges = true;
+	});
+
+	$('.filter-fields-list').sortable({
+		update: function() {
+			checkUnsavedChanges = true;
+		}
+	});
+
+	function generateUnsavedChangesMessage(href) {
+		return $(`
+			<div class='notice notice-error is-dismissible notice-unsaved-changes-message'>
+				<p>${onOffice.view_unsaved_changes_message} 
+				<a id='leaveWithoutSaving' href='${href}'>${onOffice.view_leave_without_saving_text}</a></p>
+				<button type='button' class='notice-dismiss notice-save-view'></button>
+			</div>
+		`);
+	}
+
+	function handleUnsavedChanges(e, href) {
+		if (checkUnsavedChanges) {
+			$('.notice-unsaved-changes-message').remove();
+			e.preventDefault();
+			let appendUnsavedChangesHtml = generateUnsavedChangesMessage(href);
+			appendUnsavedChangesHtml.insertAfter('.wp-header-end');
+			$('html, body').animate({ scrollTop: 0 }, 1000);
+
+			return false;
+		}
+	}
+
+	$('a[href]').on('click', function(e) {
+		if (!$(this).closest('#adminmenu, #wpadminbar').length) {
+			checkNavigationTriggered = true;
+		}
+	});
+
+	$('#adminmenu a[href], #wpadminbar a[href]').on('click', function(e) {
+		if ($(this).attr('target') === '_blank') {
+			return;
+		}
+		handleUnsavedChanges(e, $(this).attr('href'));
+	});
+
+	window.onbeforeunload = function() {
+		if (checkUnsavedChanges && !checkNavigationTriggered) {
+			return onOffice.view_unsaved_changes_message;
+		}
+	};
+
+	$('#onoffice-ajax').submit(function () {
+		checkUnsavedChanges = false;
+	});
+
+	$(document).on('click', '#leaveWithoutSaving, #submit', function(e) {
+		checkUnsavedChanges = false;
+	});
+
+	$(document).on('click', '.notice-save-view.notice-dismiss', function () {
+		$(this).parent().remove();
+	});
+});
diff --git a/plugin/Controller/AdminViewController.php b/plugin/Controller/AdminViewController.php
@@ -93,6 +93,11 @@ class AdminViewController
 	/** @var AdminPageFormSettingsMain */
 	private $_pAdminPageFormSettings = null;
 
+	/** */
+	const VIEW_UNSAVED_CHANGES_MESSAGE = 'view_unsaved_changes_message';
+
+	/** */
+	const VIEW_LEAVE_WITHOUT_SAVING_TEXT = 'view_leave_without_saving_text';
 
 	/**
 	 *
@@ -336,6 +341,13 @@ public function enqueueExtraJs($hook)
 		wp_localize_script('handle-notification-actions', 'duplicate_check_option_vars', ['ajaxurl' => admin_url('admin-ajax.php')]);
 		wp_localize_script('handle-notification-actions', 'warning_active_plugin_vars', ['ajaxurl' => admin_url('admin-ajax.php')]);
 		wp_enqueue_script('handle-notification-actions');
+		wp_register_script('oo-unsaved-changes-message', plugin_dir_url(ONOFFICE_PLUGIN_DIR.'/index.php').'dist/onoffice-unsaved-changes-message.min.js',
+			['jquery'], '', true);
+		wp_enqueue_script('oo-unsaved-changes-message');
+		wp_localize_script('oo-unsaved-changes-message', 'onOffice_unsaved_changes_message', [
+			self::VIEW_UNSAVED_CHANGES_MESSAGE => __('Your changes have not been saved yet! Do you want to leave the page without saving?', 'onoffice-for-wp-websites'),
+			self::VIEW_LEAVE_WITHOUT_SAVING_TEXT => __('Leave without saving', 'onoffice-for-wp-websites')
+		]);
 
 		if (__String::getNew($hook)->contains($this->_pageSlug.'-settings')) {
 			wp_register_script('handle-visibility-google-recaptcha-keys', plugins_url('dist/onoffice-handle-visibility-google-recaptcha-keys.min.js', ONOFFICE_PLUGIN_DIR . '/index.php'),

diff --git a/plugin/Gui/AdminPageAddressListSettings.php b/plugin/Gui/AdminPageAddressListSettings.php
@@ -357,6 +357,8 @@ public function getEnqueueData(): array
 			self::VIEW_SAVE_FAIL_MESSAGE => __('There was a problem saving the list. Please make sure the name of the list is unique.', 'onoffice-for-wp-websites'),
 			self::ENQUEUE_DATA_MERGE => array(AdminPageSettingsBase::POST_RECORD_ID),
 			AdminPageSettingsBase::POST_RECORD_ID => $this->getListViewId(),
+			self::VIEW_UNSAVED_CHANGES_MESSAGE => __('Your changes have not been saved yet! Do you want to leave the page without saving?', 'onoffice-for-wp-websites'),
+			self::VIEW_LEAVE_WITHOUT_SAVING_TEXT => __('Leave without saving', 'onoffice-for-wp-websites'),
 		);
 	}
 

diff --git a/plugin/Gui/AdminPageEstateDetail.php b/plugin/Gui/AdminPageEstateDetail.php
@@ -101,6 +101,12 @@ class AdminPageEstateDetail
 	/** */
 	const CUSTOM_LABELS = 'customlabels';
 
+	/** */
+	const VIEW_UNSAVED_CHANGES_MESSAGE = 'view_unsaved_changes_message';
+
+	/** */
+	const VIEW_LEAVE_WITHOUT_SAVING_TEXT = 'view_leave_without_saving_text';
+
 	/** */
 	const FORM_VIEW_SEARCH_FIELD_FOR_FIELD_LISTS_CONFIG = 'viewSearchFieldForFieldListsConfig';
 
@@ -437,6 +443,10 @@ public function doExtraEnqueues()
 		wp_register_style('onoffice-multiselect', plugins_url('/css/onoffice-multiselect.css', $pluginPath));
 		wp_enqueue_script('onoffice-multiselect');
 		wp_enqueue_style('onoffice-multiselect');
+
+		wp_register_script('oo-unsaved-changes-message', plugin_dir_url(ONOFFICE_PLUGIN_DIR.'/index.php').'/dist/onoffice-unsaved-changes-message.min.js',
+			['jquery'], '', true);
+		wp_enqueue_script('oo-unsaved-changes-message');
 	}
 
 	/**
@@ -467,6 +477,8 @@ public function getEnqueueData(): array
 			self::ENQUEUE_DATA_MERGE => array(AdminPageEstate::PARAM_TAB),
 			self::CUSTOM_LABELS => $this->readCustomLabels(),
 			'label_custom_label' => __('Custom Label: %s', 'onoffice-for-wp-websites'),
+			self::VIEW_UNSAVED_CHANGES_MESSAGE => __('Your changes have not been saved yet! Do you want to leave the page without saving?', 'onoffice-for-wp-websites'),
+			self::VIEW_LEAVE_WITHOUT_SAVING_TEXT => __('Leave without saving', 'onoffice-for-wp-websites'),
 		);
 	}
 

diff --git a/plugin/Gui/AdminPageEstateListSettingsBase.php b/plugin/Gui/AdminPageEstateListSettingsBase.php
@@ -187,6 +187,8 @@ public function getEnqueueData(): array
 			self::CUSTOM_LABELS => $this->readCustomLabels(),
 			'label_custom_label' => __('Custom Label: %s', 'onoffice-for-wp-websites'),
 			AdminPageSettingsBase::POST_RECORD_ID => $this->getListViewId(),
+			self::VIEW_UNSAVED_CHANGES_MESSAGE => __('Your changes have not been saved yet! Do you want to leave the page without saving?', 'onoffice-for-wp-websites'),
+			self::VIEW_LEAVE_WITHOUT_SAVING_TEXT => __('Leave without saving', 'onoffice-for-wp-websites'),
 		);
 	}
 

diff --git a/plugin/Gui/AdminPageFormSettingsBase.php b/plugin/Gui/AdminPageFormSettingsBase.php
@@ -327,6 +327,8 @@ public function getEnqueueData(): array
 			'fieldList' => $this->getFieldList(),
 			'installed_wp_languages' => $this->getInstalledLanguages(),
 			'language_native' => $pLanguage->getLocale(),
+			self::VIEW_UNSAVED_CHANGES_MESSAGE => __('Your changes have not been saved yet! Do you want to leave the page without saving?', 'onoffice-for-wp-websites'),
+			self::VIEW_LEAVE_WITHOUT_SAVING_TEXT => __('Leave without saving', 'onoffice-for-wp-websites'),
 		];
 	}
 

diff --git a/plugin/Gui/AdminPageSettingsBase.php b/plugin/Gui/AdminPageSettingsBase.php
@@ -86,6 +86,12 @@ abstract class AdminPageSettingsBase
 	/** */
 	const VIEW_SAVE_FAIL_MESSAGE = 'view_save_fail_message';
 
+	/** */
+	const VIEW_UNSAVED_CHANGES_MESSAGE = 'view_unsaved_changes_message';
+
+	/** */
+	const VIEW_LEAVE_WITHOUT_SAVING_TEXT = 'view_leave_without_saving_text';
+
 	/** @var string */
 	private $_pageTitle = null;
 
@@ -598,6 +604,10 @@ public function doExtraEnqueues()
 		wp_register_script('oo-copy-shortcode',
 		plugin_dir_url(ONOFFICE_PLUGIN_DIR.'/index.php').'/dist/onoffice-copycode.min.js',
 			['jquery'], '', true);
+
+		wp_register_script('oo-unsaved-changes-message', plugin_dir_url(ONOFFICE_PLUGIN_DIR.'/index.php').'/dist/onoffice-unsaved-changes-message.min.js',
+			['jquery'], '', true);
+		wp_enqueue_script('oo-unsaved-changes-message');
 	}
 
 

diff --git a/plugin/Gui/AdminPageSimilarEstates.php b/plugin/Gui/AdminPageSimilarEstates.php
@@ -88,6 +88,12 @@ class AdminPageSimilarEstates
 	/** */
 	const FORM_VIEW_PICTURE_TYPES = 'viewpicturetypes';
 
+	/** */
+	const VIEW_UNSAVED_CHANGES_MESSAGE = 'view_unsaved_changes_message';
+
+	/** */
+	const VIEW_LEAVE_WITHOUT_SAVING_TEXT = 'view_leave_without_saving_text';
+
 	/** */
 	const FORM_VIEW_SEARCH_FIELD_FOR_FIELD_LISTS_CONFIG = 'viewSearchFieldForFieldListsConfig';
 
@@ -337,6 +343,10 @@ public function doExtraEnqueues()
 		wp_register_style('onoffice-multiselect', plugins_url('/css/onoffice-multiselect.css', $pluginPath));
 		wp_enqueue_script('onoffice-multiselect');
 		wp_enqueue_style('onoffice-multiselect');
+
+		wp_register_script('oo-unsaved-changes-message', plugin_dir_url(ONOFFICE_PLUGIN_DIR.'/index.php').'/dist/onoffice-unsaved-changes-message.min.js',
+			['jquery'], '', true);
+		wp_enqueue_script('oo-unsaved-changes-message');
 	}
 
 	/**
@@ -367,6 +377,8 @@ public function getEnqueueData(): array
 			self::ENQUEUE_DATA_MERGE => array(AdminPageEstate::PARAM_TAB),
 			self::CUSTOM_LABELS => $this->readCustomLabels(),
 			'label_custom_label' => __('Custom Label: %s', 'onoffice-for-wp-websites'),
+			self::VIEW_UNSAVED_CHANGES_MESSAGE => __('Your changes have not been saved yet! Do you want to leave the page without saving?', 'onoffice-for-wp-websites'),
+			self::VIEW_LEAVE_WITHOUT_SAVING_TEXT => __('Leave without saving', 'onoffice-for-wp-websites'),
 		);
 	}
 

diff --git a/tests/TestClassAdminViewController.php b/tests/TestClassAdminViewController.php
@@ -174,7 +174,7 @@ public function testEnqueueExtraJs(AdminViewController $pAdminViewController)
 		$adminPage = new AdminPageEstateDetail('admin_page_onoffice-editlistview');
 		$pWpHook->callbacks = [[['function' => [$adminPage]]]];
 		$pAdminViewController->enqueueExtraJs("admin_page_onoffice-editlistview");
-		$this->assertEquals(['handle-notification-actions', 'admin-js', 'postbox', 'oo-copy-shortcode','onoffice-custom-form-label-js','onoffice-multiselect'], wp_scripts()->queue);
+		$this->assertEquals(['handle-notification-actions', 'oo-unsaved-changes-message', 'admin-js', 'postbox', 'oo-copy-shortcode','onoffice-custom-form-label-js','onoffice-multiselect'], wp_scripts()->queue);
 	}
 
 	/**
@@ -192,7 +192,7 @@ public function testEnqueueExtraJsWithNullHook(AdminViewController $pAdminViewCo
 		$pWpHook = $wp_filter['admin_page_onoffice-editlistview'];
 		$pWpHook->callbacks = [[['function' => ['a']]]];
 		$pAdminViewController->enqueueExtraJs("admin_onoffice_test");
-		$this->assertCount(1, wp_scripts()->queue);
+		$this->assertCount(2, wp_scripts()->queue);
 	}
 
 	public function testAdminPageAjax()
@@ -352,6 +352,6 @@ public function testEnqueueExtraJsWithHandleRecaptcha(AdminViewController $pAdmi
 		$adminPage = new AdminPageApiSettings('admin_page_onoffice-settings');
 		$pWpHook->callbacks = [[['function' => [$adminPage]]]];
 		$pAdminViewController->enqueueExtraJs("admin_page_onoffice-settings");
-		$this->assertEquals(['handle-notification-actions', 'handle-visibility-google-recaptcha-keys'], wp_scripts()->queue);
+		$this->assertEquals(['handle-notification-actions', 'oo-unsaved-changes-message', 'handle-visibility-google-recaptcha-keys'], wp_scripts()->queue);
 	}
 }