84 lines
1.9 KiB
JavaScript
84 lines
1.9 KiB
JavaScript
import '../scss/common.scss';
|
|
|
|
/* global ajaxurl */
|
|
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
const dismissNoticeButton = document.querySelectorAll(
|
|
'.smush-dismissible-notice .smush-dismiss-notice-button'
|
|
);
|
|
dismissNoticeButton.forEach((button) => {
|
|
button.addEventListener('click', handleDismissNotice);
|
|
});
|
|
|
|
function handleDismissNotice(event) {
|
|
event.preventDefault();
|
|
|
|
const button = event.target;
|
|
const notice = button.closest('.smush-dismissible-notice');
|
|
const key = notice.getAttribute('data-key');
|
|
|
|
dismissNotice( key, notice );
|
|
}
|
|
|
|
function dismissNotice( key, notice ) {
|
|
const xhr = new XMLHttpRequest();
|
|
xhr.open(
|
|
'POST',
|
|
ajaxurl + '?action=smush_dismiss_notice&key=' + key + '&_ajax_nonce=' + smush_global.nonce,
|
|
true
|
|
);
|
|
xhr.onload = () => {
|
|
if (notice) {
|
|
notice.querySelector('button.notice-dismiss').dispatchEvent(new MouseEvent('click', {
|
|
view: window,
|
|
bubbles: true,
|
|
cancelable: true
|
|
}));
|
|
}
|
|
};
|
|
xhr.send();
|
|
}
|
|
|
|
|
|
// Show header notices.
|
|
const handleHeaderNotice = () => {
|
|
const headerNotice = document.querySelector('.wp-smush-dismissible-header-notice');
|
|
if ( ! headerNotice || ! headerNotice.id ) {
|
|
return;
|
|
}
|
|
|
|
const { dismissKey, message } = headerNotice.dataset;
|
|
if ( ! dismissKey || ! message ) {
|
|
return;
|
|
}
|
|
|
|
headerNotice.onclick = (e) => {
|
|
const classList = e.target.classList;
|
|
const isDismissButton = classList && ( classList.contains('sui-icon-check') || classList.contains('sui-button-icon') );
|
|
if ( ! isDismissButton ) {
|
|
return;
|
|
}
|
|
dismissNotice( dismissKey );
|
|
}
|
|
|
|
const noticeOptions = {
|
|
type: 'warning',
|
|
icon: 'info',
|
|
dismiss: {
|
|
show: true,
|
|
label: wp_smush_msgs.noticeDismiss,
|
|
tooltip: wp_smush_msgs.noticeDismissTooltip,
|
|
},
|
|
};
|
|
|
|
window.SUI.openNotice(
|
|
headerNotice.id,
|
|
message,
|
|
noticeOptions
|
|
);
|
|
}
|
|
|
|
handleHeaderNotice();
|
|
|
|
});
|