laipower/wp-content/plugins/easy-digital-downloads/assets/js/admin/components/notifications/index.js

126 lines
3.2 KiB
JavaScript
Raw Normal View History

/* global edd_vars */
document.addEventListener( 'alpine:init', () => {
Alpine.store( 'eddNotifications', {
isPanelOpen: false,
notificationsLoaded: false,
numberActiveNotifications: 0,
activeNotifications: [],
inactiveNotifications: [],
init: function() {
const eddNotifications = this;
/*
* The bubble starts out hidden until AlpineJS is initialized. Once it is, we remove
* the hidden class. This prevents a flash of the bubble's visibility in the event that there
* are no notifications.
*/
const notificationCountBubble = document.querySelector( '#edd-notification-button .edd-number' );
if ( notificationCountBubble ) {
notificationCountBubble.classList.remove( 'edd-hidden' );
}
document.addEventListener( 'keydown', function( e ) {
if ( e.key === 'Escape' ) {
eddNotifications.closePanel();
}
} );
const params = new URLSearchParams( window.location.search );
const triggerNotifications = params.has( 'notifications' );
if ( triggerNotifications && 'true' === params.get( 'notifications' ) ) {
eddNotifications.openPanel();
}
},
openPanel: function() {
const panelHeader = document.getElementById( 'edd-notifications-header' );
if ( this.notificationsLoaded ) {
this.isPanelOpen = true;
if ( panelHeader ) {
setTimeout( function() {
panelHeader.focus();
} );
}
return;
}
this.isPanelOpen = true;
this.apiRequest( '/notifications', 'GET' )
.then( data => {
this.activeNotifications = data.active;
this.inactiveNotifications = data.dismissed;
this.notificationsLoaded = true;
if ( panelHeader ) {
panelHeader.focus();
}
} )
.catch( error => {
console.log( 'Notification error', error );
} );
},
closePanel: function() {
if ( ! this.isPanelOpen ) {
return;
}
this.isPanelOpen = false;
const notificationButton = document.getElementById( 'edd-notification-button' );
if ( notificationButton ) {
notificationButton.focus();
}
},
apiRequest: function( endpoint, method ) {
return fetch( edd_vars.restBase + endpoint, {
method: method,
credentials: 'same-origin',
headers: {
'Content-Type': 'application/json',
'X-WP-Nonce': edd_vars.restNonce
}
} ).then( response => {
if ( ! response.ok ) {
return Promise.reject( response );
}
/*
* Returning response.text() instead of response.json() because dismissing
* a notification doesn't return a JSON response, so response.json() will break.
*/
return response.text();
//return response.json();
} ).then( data => {
return data ? JSON.parse( data ) : null;
} );
} ,
dismiss: function( event, index ) {
if ( 'undefined' === typeof this.activeNotifications[ index ] ) {
return;
}
event.target.disabled = true;
const notification = this.activeNotifications[ index ];
this.apiRequest( '/notifications/' + notification.id, 'DELETE' )
.then( response => {
this.activeNotifications.splice( index, 1 );
this.numberActiveNotifications = this.activeNotifications.length;
} )
.catch( error => {
console.log( 'Dismiss error', error );
} );
}
} );
} );