| 1 |
/** |
| 2 |
* Script handle admin notices. |
| 3 |
* |
| 4 |
* @since 4.1.7.3.2 |
| 5 |
* @version 1.0.1 |
| 6 |
*/ |
| 7 |
import API from '../api'; |
| 8 |
let elAddonsPage; |
| 9 |
let dataHtml; |
| 10 |
let dataAddons; |
| 11 |
let elLPAddons; |
| 12 |
const queryString = window.location.search; |
| 13 |
const urlParams = new URLSearchParams( queryString ); |
| 14 |
const tab = urlParams.get( 'tab' ); |
| 15 |
let elNotifyActionWrapper; |
| 16 |
const isHandling = []; |
| 17 |
|
| 18 |
// API get list addons. |
| 19 |
const getAddons = ( set = '' ) => { |
| 20 |
const params = tab ? `?tab=${ tab }` : `?${ set }`; |
| 21 |
fetch( API.admin.apiAddons + params, { |
| 22 |
method: 'GET', |
| 23 |
headers: { |
| 24 |
'X-WP-Nonce': lpDataAdmin.nonce, |
| 25 |
}, |
| 26 |
} ).then( ( res ) => |
| 27 |
res.json() |
| 28 |
).then( ( res ) => { |
| 29 |
// console.log(data); |
| 30 |
const { status, message, data } = res; |
| 31 |
if ( status === 'success' ) { |
| 32 |
dataHtml = data.html; |
| 33 |
dataAddons = data.addons; |
| 34 |
} else { |
| 35 |
dataHtml = message; |
| 36 |
} |
| 37 |
} ).catch( ( err ) => { |
| 38 |
console.log( err ); |
| 39 |
} ); |
| 40 |
}; |
| 41 |
// API send action install, update, activate, deactivate. |
| 42 |
const addonsAction = ( data, callBack ) => { |
| 43 |
const addonSlug = data.addon.slug; |
| 44 |
|
| 45 |
if ( isHandling.indexOf( addonSlug ) !== -1 ) { |
| 46 |
return; |
| 47 |
} |
| 48 |
isHandling.push( addonSlug ); |
| 49 |
|
| 50 |
fetch( API.admin.apiAddonAction, { |
| 51 |
method: 'POST', |
| 52 |
headers: { |
| 53 |
'Content-Type': 'application/json', |
| 54 |
'X-WP-Nonce': lpDataAdmin.nonce, |
| 55 |
}, |
| 56 |
body: JSON.stringify( { ...data } ), |
| 57 |
} ).then( ( res ) => |
| 58 |
res.json() |
| 59 |
).then( ( res ) => { |
| 60 |
const indexAddonHanding = isHandling.indexOf( addonSlug ); |
| 61 |
if ( indexAddonHanding !== -1 ) { |
| 62 |
isHandling.splice( indexAddonHanding, 1 ); |
| 63 |
} |
| 64 |
|
| 65 |
const { status, message, data } = res; |
| 66 |
|
| 67 |
if ( callBack ) { |
| 68 |
callBack( status, message, data ); |
| 69 |
} |
| 70 |
|
| 71 |
handleNotify( status, message ); |
| 72 |
} ).catch( ( err ) => { |
| 73 |
handleNotify( 'error', `error js: ${ err }` ); |
| 74 |
console.log( err ); |
| 75 |
} ); |
| 76 |
}; |
| 77 |
// Show notify. |
| 78 |
const handleNotify = ( status, message ) => { |
| 79 |
const elNotifyAction = elNotifyActionWrapper.querySelector( '.lp-notify-action' ); |
| 80 |
const elNotifyActionNew = elNotifyAction.cloneNode( true ); |
| 81 |
elNotifyActionNew.classList.remove( 'clone' ); |
| 82 |
elNotifyActionWrapper.insertBefore( elNotifyActionNew, elNotifyActionWrapper[ 0 ] ); |
| 83 |
const elSuccess = elNotifyActionNew.querySelector( `.${ elNotifyActionNew.classList.value }__success` ); |
| 84 |
const elFailed = elNotifyActionNew.querySelector( `.${ elNotifyActionNew.classList.value }__error` ); |
| 85 |
|
| 86 |
if ( status === 'success' ) { |
| 87 |
elSuccess.classList.add( 'show' ); |
| 88 |
elSuccess.querySelector( '.message' ).innerHTML = message; |
| 89 |
} else { |
| 90 |
elFailed.classList.add( 'show' ); |
| 91 |
elFailed.querySelector( '.message' ).innerHTML = message; |
| 92 |
} |
| 93 |
|
| 94 |
elNotifyActionWrapper.classList.add( 'show' ); |
| 95 |
setTimeout( () => { |
| 96 |
elNotifyActionNew.remove(); |
| 97 |
|
| 98 |
const elNotifyAction = elNotifyActionWrapper.querySelectorAll( '.lp-notify-action' ); |
| 99 |
if ( elNotifyAction.length === 1 ) { |
| 100 |
elNotifyActionWrapper.classList.remove( 'show' ); |
| 101 |
} |
| 102 |
}, status === 'success' ? 3000 : 4000 ); |
| 103 |
}; |
| 104 |
// Get addons when js loaded. |
| 105 |
getAddons(); |
| 106 |
// Search Addons. |
| 107 |
const searchAddons = ( name ) => { |
| 108 |
const elAddonItems = elAddonsPage.querySelectorAll( '.lp-addon-item' ); |
| 109 |
let totalItems = 0; |
| 110 |
|
| 111 |
elAddonItems.forEach( ( elAddonItem ) => { |
| 112 |
const addonName = elAddonItem.querySelector( 'a' ).textContent; |
| 113 |
if ( elAddonItem.classList.contains( 'hide' ) ) { |
| 114 |
return; |
| 115 |
} |
| 116 |
|
| 117 |
if ( addonName.toLowerCase().includes( name.toLowerCase() ) ) { |
| 118 |
elAddonItem.classList.remove( 'search-not-found' ); |
| 119 |
totalItems++; |
| 120 |
} else { |
| 121 |
elAddonItem.classList.add( 'search-not-found' ); |
| 122 |
} |
| 123 |
} ); |
| 124 |
|
| 125 |
setGridItems( totalItems ); |
| 126 |
}; |
| 127 |
// Set grid style items. |
| 128 |
const setGridItems = ( totalItems ) => { |
| 129 |
if ( totalItems < 4 ) { |
| 130 |
elLPAddons.classList.add( 'max-3-items' ); |
| 131 |
} else { |
| 132 |
elLPAddons.classList.remove( 'max-3-items' ); |
| 133 |
} |
| 134 |
}; |
| 135 |
// Check element loaded and data API returned. |
| 136 |
const loadElData = setInterval( () => { |
| 137 |
if ( ! elAddonsPage || ! elNotifyActionWrapper ) { |
| 138 |
elAddonsPage = document.querySelector( '.lp-addons-page' ); |
| 139 |
elNotifyActionWrapper = document.querySelector( '.lp-notify-action-wrapper' ); |
| 140 |
} else if ( dataHtml && elAddonsPage && elNotifyActionWrapper ) { |
| 141 |
elAddonsPage.innerHTML = dataHtml; |
| 142 |
elLPAddons = elAddonsPage.querySelector( '#lp-addons' ); |
| 143 |
const elNavTabWrapper = document.querySelector( '.lp-nav-tab-wrapper' ); |
| 144 |
if ( ! elNavTabWrapper ) { |
| 145 |
clearInterval( loadElData ); |
| 146 |
return; |
| 147 |
} |
| 148 |
|
| 149 |
const elNavTabWrapperClone = elNavTabWrapper.cloneNode( true ); |
| 150 |
elAddonsPage.insertBefore( elNavTabWrapperClone, elAddonsPage.children[ 0 ] ); |
| 151 |
elNavTabWrapperClone.style.display = 'flex'; |
| 152 |
elNavTabWrapper.remove(); |
| 153 |
const elNavActive = elNavTabWrapperClone.querySelector( '.nav-tab.nav-tab-active span' ); |
| 154 |
setGridItems( parseInt( elNavActive.textContent ) ); |
| 155 |
|
| 156 |
clearInterval( loadElData ); |
| 157 |
} |
| 158 |
}, 1 ); |
| 159 |
|
| 160 |
document.addEventListener( 'DOMContentLoaded', ( e ) => { |
| 161 |
} ); |
| 162 |
|
| 163 |
/*** Events ***/ |
| 164 |
document.addEventListener( 'click', ( e ) => { |
| 165 |
let el = e.target; |
| 166 |
const tagName = el.tagName.toLowerCase(); |
| 167 |
if ( tagName === 'span' ) { |
| 168 |
e.preventDefault(); |
| 169 |
const elBtnAction = el.closest( '.btn-addon-action' ); |
| 170 |
if ( elBtnAction ) { |
| 171 |
elBtnAction.click(); |
| 172 |
} |
| 173 |
} |
| 174 |
|
| 175 |
// Events actions: activate, deactivate. |
| 176 |
/*if ( el.classList.contains( 'lp-toggle-switch-label' ) ) { |
| 177 |
//e.preventDefault(); |
| 178 |
|
| 179 |
const elAddonItem = el.closest( '.lp-addon-item' ); |
| 180 |
const idLabel = el.getAttribute( 'for' ); |
| 181 |
const elInput = document.querySelector( `#${ idLabel }` ); |
| 182 |
const action = elInput.getAttribute( 'data-action' ); |
| 183 |
const addon = dataAddons[ elAddonItem.dataset.slug ]; |
| 184 |
const addonSlug = addon.slug; |
| 185 |
const parent = el.closest( '.lp-toggle-switch' ); |
| 186 |
const label = parent.querySelector( `label[for=${ idLabel }]` ); |
| 187 |
const dashicons = parent.querySelector( '.dashicons-update' ); |
| 188 |
dashicons.style.display = 'inline-block'; |
| 189 |
label.style.display = 'none'; |
| 190 |
const data = { action, addon }; |
| 191 |
addonsAction( data, function( status, message, data ) { |
| 192 |
const elAddon = document.querySelector( `#${ addonSlug }` ); |
| 193 |
if ( elAddon ) { |
| 194 |
const parent = elAddon.closest( '.lp-toggle-switch' ); |
| 195 |
if ( parent ) { |
| 196 |
const dashicons = parent.querySelector( '.dashicons-update' ); |
| 197 |
dashicons.style.display = 'none'; |
| 198 |
if ( action === 'deactivate' ) { |
| 199 |
elAddon.setAttribute( 'data-action', 'activate' ); |
| 200 |
} else if ( action === 'activate' ) { |
| 201 |
elAddon.setAttribute( 'data-action', 'deactivate' ); |
| 202 |
} |
| 203 |
const label = parent.querySelector( `label[for=${ addonSlug }]` ); |
| 204 |
label.style.display = 'inline-flex'; |
| 205 |
} |
| 206 |
} |
| 207 |
|
| 208 |
if ( status === 'success' ) { |
| 209 |
if ( action === 'deactivate' ) { |
| 210 |
elAddonItem.classList.remove( 'activated' ); |
| 211 |
} |
| 212 |
if ( action === 'activate' ) { |
| 213 |
elAddonItem.classList.add( 'activated' ); |
| 214 |
} |
| 215 |
} |
| 216 |
} ); |
| 217 |
}*/ |
| 218 |
|
| 219 |
// Events actions: install, update, delete. |
| 220 |
if ( el.closest( '.btn-addon-action' ) ) { |
| 221 |
el = el.closest( '.btn-addon-action' ); |
| 222 |
e.preventDefault(); |
| 223 |
el.classList.add( 'handling' ); |
| 224 |
let purchaseCode = ''; |
| 225 |
const elAddonItem = el.closest( '.lp-addon-item' ); |
| 226 |
const addon = dataAddons[ elAddonItem.dataset.slug ]; |
| 227 |
const action = el.dataset.action; |
| 228 |
const elItemPurchase = elAddonItem.querySelector( '.lp-addon-item__purchase' ); |
| 229 |
//const elToggleSwitchInput = elAddonItem.querySelector( '.lp-toggle-switch-input' ); |
| 230 |
|
| 231 |
if ( action === 'purchase' ) { |
| 232 |
elItemPurchase.style.display = 'block'; |
| 233 |
elItemPurchase.querySelector( '.purchase-install' ).style.display = 'flex'; |
| 234 |
return; |
| 235 |
} else if ( action === 'update-purchase-code' ) { |
| 236 |
elItemPurchase.querySelector( '.purchase-update' ).style.display = 'flex'; |
| 237 |
elItemPurchase.style.display = 'block'; |
| 238 |
return; |
| 239 |
} else if ( action === 'buy' ) { |
| 240 |
const link = el.dataset.link; |
| 241 |
window.open( link, '_blank' ); |
| 242 |
return; |
| 243 |
} else if ( action === 'cancel' ) { |
| 244 |
elItemPurchase.style.display = 'none'; |
| 245 |
return; |
| 246 |
} else if ( action === 'install' ) { |
| 247 |
if ( el.dataset.link ) { |
| 248 |
el.classList.remove( 'handling' ); |
| 249 |
const link = el.dataset.link; |
| 250 |
window.open( link, '_blank' ); |
| 251 |
return; |
| 252 |
} |
| 253 |
} |
| 254 |
|
| 255 |
// Send request to server. |
| 256 |
if ( elItemPurchase ) { |
| 257 |
purchaseCode = elItemPurchase.querySelector( 'input[name=purchase-code]' ).value; |
| 258 |
} |
| 259 |
|
| 260 |
const data = { purchase_code: purchaseCode, action, addon }; |
| 261 |
addonsAction( data, function( status, message, data ) { |
| 262 |
if ( status === 'success' ) { |
| 263 |
if ( action === 'install' ) { |
| 264 |
elAddonItem.classList.add( 'installed', 'activated' ); |
| 265 |
elAddonItem.classList.remove( 'not_installed' ); |
| 266 |
elItemPurchase.style.display = 'none'; |
| 267 |
/*elToggleSwitchInput.setAttribute( 'checked', 'checked' ); |
| 268 |
elToggleSwitchInput.setAttribute( 'data-action', 'deactivate' );*/ |
| 269 |
const elNavInstalled = document.querySelector( '.nav-tab[data-tab=installed] span' ); |
| 270 |
elNavInstalled.textContent = parseInt( elNavInstalled.textContent ) + 1; |
| 271 |
const elNavNoInstalled = document.querySelector( '.nav-tab[data-tab=not_installed] span' ); |
| 272 |
elNavNoInstalled.textContent = parseInt( elNavNoInstalled.textContent ) - 1; |
| 273 |
elItemPurchase.querySelector( '.purchase-install' ).style.display = 'none'; |
| 274 |
elItemPurchase.querySelector( '.purchase-update' ).querySelector( '.enter-purchase-code' ).value = purchaseCode; |
| 275 |
} else if ( action === 'update' ) { |
| 276 |
const elAddonVersionCurrent = elAddonItem.querySelector( '.addon-version-current' ); |
| 277 |
elAddonVersionCurrent.innerHTML = addon.version; |
| 278 |
elAddonItem.classList.remove( 'update' ); |
| 279 |
} else if ( action === 'activate' ) { |
| 280 |
elAddonItem.classList.add( 'activated' ); |
| 281 |
} else if ( action === 'deactivate' ) { |
| 282 |
elAddonItem.classList.remove( 'activated' ); |
| 283 |
} else if ( action === 'update-purchase' ) { |
| 284 |
elItemPurchase.style.display = 'none'; |
| 285 |
} |
| 286 |
} |
| 287 |
|
| 288 |
el.classList.remove( 'handling' ); |
| 289 |
} ); |
| 290 |
} |
| 291 |
|
| 292 |
if ( el.classList.contains( 'nav-tab' ) ) { |
| 293 |
e.preventDefault(); |
| 294 |
const elTabs = document.querySelectorAll( '.nav-tab' ); |
| 295 |
elTabs.forEach( function( elTab ) { |
| 296 |
elTab.classList.remove( 'nav-tab-active' ); |
| 297 |
} ); |
| 298 |
el.classList.add( 'nav-tab-active' ); |
| 299 |
const tabName = el.dataset.tab; |
| 300 |
const elAddonItems = elAddonsPage.querySelectorAll( '.lp-addon-item' ); |
| 301 |
const elSearch = elAddonsPage.querySelector( '#lp-search-addons__input' ); |
| 302 |
elSearch.value = ''; |
| 303 |
|
| 304 |
urlParams.set( 'tab', tabName ); |
| 305 |
window.history.pushState( {}, '', `${ window.location.pathname }?${ urlParams.toString() }` ); |
| 306 |
let totalItems = 0; |
| 307 |
elAddonItems.forEach( ( elAddonItem ) => { |
| 308 |
elAddonItem.classList.remove( 'search-not-found' ); |
| 309 |
if ( 'all' === tabName || elAddonItem.classList.contains( tabName ) ) { |
| 310 |
elAddonItem.classList.remove( 'hide' ); |
| 311 |
totalItems++; |
| 312 |
} else { |
| 313 |
elAddonItem.classList.add( 'hide' ); |
| 314 |
} |
| 315 |
} ); |
| 316 |
|
| 317 |
setGridItems( totalItems ); |
| 318 |
} |
| 319 |
} ); |
| 320 |
|
| 321 |
/*** Event search addons. ***/ |
| 322 |
document.addEventListener( 'input', ( e ) => { |
| 323 |
const el = e.target; |
| 324 |
|
| 325 |
if ( 'lp-search-addons__input' === el.id ) { |
| 326 |
const keyword = el.value; |
| 327 |
searchAddons( keyword ); |
| 328 |
} |
| 329 |
|
| 330 |
// Events change input purchase code. |
| 331 |
if ( el.classList.contains( 'enter-purchase-code' ) ) { |
| 332 |
e.preventDefault(); |
| 333 |
const purchaseCode = el.value; |
| 334 |
const elItemPurchase = el.closest( '.lp-addon-item__purchase' ); |
| 335 |
|
| 336 |
if ( elItemPurchase ) { |
| 337 |
const input = elItemPurchase.querySelector( 'input[name=purchase-code]' ); |
| 338 |
input.value = purchaseCode; |
| 339 |
} |
| 340 |
} |
| 341 |
} ); |
| 342 |
|
