126 lines
3.2 KiB
JavaScript
126 lines
3.2 KiB
JavaScript
/* 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 );
|
|
} );
|
|
}
|
|
} );
|
|
} );
|