Skip to content

Commit

Permalink
Decoupled messaging system from AJAX, so it can be used by JSON and n…
Browse files Browse the repository at this point in the history 
…on-JSON requests.
  • Loading branch information
@Dan0sz
Dan0sz committed Apr 4, 2024
1 parent 891f583 commit 1124336
Show file tree
Hide file tree
Showing 5 changed files with 234 additions and 171 deletions.
180 changes: 104 additions & 76 deletions assets/src/js/admin/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,11 @@ document.addEventListener('DOMContentLoaded', () => {
this.stepElems[i].addEventListener('click', this.saveOptionOnNext);
}
}

/**
* Run once on pageload.
*/
this.showMessages();
},

/**
Expand Down Expand Up @@ -121,63 +126,7 @@ document.addEventListener('DOMContentLoaded', () => {
form.append('is_list', button.dataset.list);
form.append('_nonce', plausible.nonce);

let result = plausible.ajax(form, null);

result.then(function (response) {
if (response.success === false) {
plausible.toggleOption(e, false);

return;
}

let is_wizard = document.getElementById('plausible-analytics-wizard');

if (is_wizard !== null) {
return;
}

if (response.additional !== undefined) {
plausible.renderAdditionalMessages(response.additional, e.target);
} else {
plausible.removeAdditionalMessage(e.target);
}
});
},

/**
* Renders a HTML box containing additional information about the enabled option.
*
* @param html
* @param target
*/
renderAdditionalMessages: function (html, target) {
let container = target.closest('.plausible-analytics-group');

container.innerHTML += html;
},

/**
* Removes the additional information box when the option is disabled.
*
* @param target
*/
removeAdditionalMessage: function (target) {
let container = target.closest('.plausible-analytics-group');
let additionalMessage;

if (container.children.length > 0) {
for (let i = 0; i < container.children.length; i++) {
if (container.children[i].classList.contains('plausible-analytics-hook')) {
additionalMessage = container.children[i];

break;
}
}
}

if (additionalMessage !== undefined) {
container.removeChild(additionalMessage);
}
plausible.ajax(form);
},

/**
Expand All @@ -203,7 +152,7 @@ document.addEventListener('DOMContentLoaded', () => {
button.children[0].classList.remove('hidden');
button.setAttribute('disabled', 'disabled');

plausible.ajax(form, button, null);
plausible.ajax(form, button);
},

/**
Expand All @@ -228,7 +177,7 @@ document.addEventListener('DOMContentLoaded', () => {
data.append('options', JSON.stringify(options));
data.append('_nonce', plausible.nonce);

plausible.ajax(data, null, false);
plausible.ajax(data);
}
},

Expand Down Expand Up @@ -296,7 +245,7 @@ document.addEventListener('DOMContentLoaded', () => {
data.append('action', 'plausible_analytics_show_wizard');
data.append('_nonce', e.target.dataset.nonce);

plausible.ajax(data, null);
plausible.ajax(data);
},

/**
Expand Down Expand Up @@ -364,14 +313,15 @@ document.addEventListener('DOMContentLoaded', () => {
},

/**
* Do AJAX request and (optionally) show a notice or (optionally) reload the page.
* Do AJAX request.
*
* @param data
* @param button
* @param showMessages
*
* @return object
*/
ajax: function (data, button = null) {
ajax: function (data, button = null, showMessages = true) {
return fetch(
ajaxurl,
{
Expand All @@ -390,14 +340,8 @@ document.addEventListener('DOMContentLoaded', () => {

return false;
}).then(response => {
if (response.success === true) {
if (response.data !== undefined && response.data.message !== undefined) {
plausible.notice(response.data.message);
}
} else {
if (response.data !== undefined && response.data.message !== undefined) {
plausible.notice(response.data.message, true);
}
if (showMessages === true) {
plausible.showMessages();
}

let event = new CustomEvent('plausibleAjaxDone', {detail: response});
Expand All @@ -408,19 +352,66 @@ document.addEventListener('DOMContentLoaded', () => {
});
},

/**
* Show messages on screen.
*/
showMessages: function () {
let messages = plausible.fetchMessages();

messages.then(function (messages) {
if (messages.error !== false) {
plausible.showMessage(messages.error, 'error');
} else if (messages.notice !== false) {
plausible.showMessage(messages.notice, 'notice');
} else if (messages.success !== false) {
plausible.showMessage(messages.success, 'success');
}

if (messages.additional.length === 0) {
return;
}

if (messages.additional.id !== undefined && messages.additional.message) {
plausible.showAdditionalMessage(messages.additional.message, messages.additional.id);
} else if (messages.additional.id !== undefined && messages.additional.message === '') {
plausible.removeAdditionalMessage(messages.additional.id);
}
});
},

/**
* Fetch the messages for display.
*/
fetchMessages: function () {
let data = new FormData();
data.append('action', 'plausible_analytics_messages');

let result = plausible.ajax(data, null, false);

return result.then(function (response) {
return response;
});
},

/**
* Displays a notice or error message.
*
* @param message
* @param isError
* @param type error|warning|success Defaults to success.
*/
notice: function (message, isError = false) {
if (isError === true) {
showMessage: function (message, type = 'success') {
if (type === 'error') {
document.getElementById('icon-error').classList.remove('hidden');
document.getElementById('icon-success').classList += ' hidden';
document.getElementById('icon-success').classList.add('hidden');
document.getElementById('icon-notice').classList.add('hidden');
} else if (type === 'notice') {
document.getElementById('icon-notice').classList.remove('hidden');
document.getElementById('icon-error').classList.add('hidden');
document.getElementById('icon-success').classList.add('hidden');
} else {
document.getElementById('icon-success').classList.remove('hidden');
document.getElementById('icon-error').classList += ' hidden';
document.getElementById('icon-error').classList.add('hidden');
document.getElementById('icon-notice').classList.add('hidden');
}

let notice = document.getElementById('plausible-analytics-notice');
Expand All @@ -433,14 +424,51 @@ document.addEventListener('DOMContentLoaded', () => {
notice.classList.replace('opacity-0', 'opacity-100');
}, 200)

if (isError === false) {
if (type !== 'error') {
setTimeout(function () {
notice.classList.replace('opacity-100', 'opacity-0');
setTimeout(function () {
notice.classList += ' hidden';
}, 200)
}, 2000);
}
},
/**
* Renders a HTML box containing additional information about the enabled option.
*
* @param html
* @param target
*/
showAdditionalMessage: function (html, target) {
let targetElem = document.querySelector(`[name='${target}']`);
let container = targetElem.closest('.plausible-analytics-group');

container.innerHTML += html;
},

/**
* Removes the additional information box when the option is disabled.
*
* @param target
*/
removeAdditionalMessage: function (target) {
let targetElem = document.querySelector(`[name="${target}"]`);
let container = targetElem.closest('.plausible-analytics-group');
let additionalMessage;

if (container.children.length > 0) {
for (let i = 0; i < container.children.length; i++) {
if (container.children[i].classList.contains('plausible-analytics-hook')) {
additionalMessage = container.children[i];

break;
}
}
}

if (additionalMessage !== undefined) {
container.removeChild(additionalMessage);
}
}
}

Expand Down
38 changes: 36 additions & 2 deletions src/Admin/Messages.php
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<?php
/**
* Plausible Analytics | Admin Actions.
*
* @since 2.0.6
* @package WordPress
* @subpackage Plausible Analytics
Expand All @@ -14,6 +15,26 @@
* This class provides an alternative to the JS/Client approach to display error/notice messages in the Admin interface.
*/
class Messages {
const ERROR_TRANSIENT = 'plausible_analytics_error';

const NOTICE_TRANSIENT = 'plausible_analytics_notice';

const SUCCESS_TRANSIENT = 'plausible_analytics_success';

const ADDITIONAL_TRANSIENT = 'plausible_analytics_additional';

/**
* Sets a success message.
*
* @param $message
* @param $expiration
*
* @return void
*/
public static function set_success( $message, $expiration = 5 ) {
set_transient( self::SUCCESS_TRANSIENT, $message, $expiration );
}

/**
* Sets an error.
*
Expand All @@ -23,7 +44,7 @@ class Messages {
* @return void
*/
public static function set_error( $message, $expiration = 5 ) {
set_transient( 'plausible_analytics_error', $message, $expiration );
set_transient( self::ERROR_TRANSIENT, $message, $expiration );
}

/**
Expand All @@ -35,6 +56,19 @@ public static function set_error( $message, $expiration = 5 ) {
* @return void
*/
public static function set_notice( $message, $expiration = 5 ) {
set_transient( 'plausible_analytics_notice', $message, $expiration );
set_transient( self::NOTICE_TRANSIENT, $message, $expiration );
}

/**
* Sets an additional message.
*
* @param string $message The message to be displayed.
* @param string $id ID of the option where this additional message should be displayed.
* @param int $expiration Expiration in seconds.
*
* @return void
*/
public static function set_additional( $message, $id, $expiration = 5 ) {
set_transient( self::ADDITIONAL_TRANSIENT, [ $id => $message ], $expiration );
}
}
25 changes: 9 additions & 16 deletions src/Admin/Settings/API.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -377,50 +377,43 @@ class="plausible-analytics-wizard-completed-step flex hidden items-start mb-6">
* @return void
*/
private function render_notices_field() {
/**
* If this var contains a value, the notice box will be shown on next pageloads until the transient is expired.
*/
$show_error = get_transient( 'plausible_analytics_error' );
$show_notice = get_transient( 'plausible_analytics_notice' );
?>
<!-- notices -->
<div
class="z-50 fixed inset-0 top-5 flex items-end justify-center px-6 py-8 pointer-events-none sm:p-6 sm:items-start sm:justify-end">
<div id="plausible-analytics-notice"
class="<?php echo $show_error || $show_notice ? '' :
'hidden'; ?> max-w-sm w-full bg-white dark:bg-gray-800 shadow-lg rounded-lg pointer-events-auto transition-opacity ease-in-out duration-200 <?php echo $show_error ||
$show_notice ? 'opacity-100' : 'opacity-0'; ?>">
class="hidden max-w-sm w-full bg-white dark:bg-gray-800 shadow-lg rounded-lg pointer-events-auto transition-opacity ease-in-out duration-200 opacity-0">
<div class="rounded-lg ring-1 ring-black ring-opacity-5 overflow-hidden">
<div class="p-4">
<div class="flex items-start">
<div id="icon-success" class="flex-shrink-0 <?php echo $show_error || $show_notice ? 'hidden' : ''; ?>">
<!-- Success -->
<div id="icon-success" class="flex-shrink-0 hidden">
<svg class="h-8 w-6 text-green-400" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
<div id="icon-error" class="flex-shrink-0 <?php echo $show_error ? '' : 'hidden'; ?>">
<!-- Error -->
<div id="icon-error" class="flex-shrink-0 hidden">
<svg class="h-8 w-6 text-red-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
d="m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
</svg>
</div>
<div id="icon-notice" class="flex-shrink-0 <?php echo $show_notice ? '' : 'hidden'; ?>">
<!-- Warning -->
<div id="icon-notice" class="flex-shrink-0 hidden">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
class="w-6 h-8 text-yellow-400">
<path stroke-linecap="round" stroke-linejoin="round"
d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z"/>
</svg>

</div>
<div class="ml-3 w-0 flex-1 pt-0.5">
<! -- message -->
<p id="plausible-analytics-notice-text" class="mt-1 text-sm leading-5 text-gray-500 dark:text-gray-200">
<?php echo $show_error ?: $show_notice ?: ''; ?>
</p>
<!-- message -->
<p id="plausible-analytics-notice-text" class="mt-1 text-sm leading-5 text-gray-500 dark:text-gray-200"></p>
</div>
</div>
</div>
Expand Down
Loading

0 comments on commit 1124336

Please sign in to comment.