319 lines
8.0 KiB
JavaScript
319 lines
8.0 KiB
JavaScript
'use strict'
|
|
|
|
import $ from 'jquery'
|
|
import Events from '../_events'
|
|
import Spinner from './_ui.spinner'
|
|
|
|
const AjaxUI = (($) => {
|
|
// Constants
|
|
const G = window
|
|
const D = document
|
|
const $Html = $('html')
|
|
const $Body = $('body')
|
|
|
|
const NAME = 'jsAjaxUI'
|
|
const DATA_KEY = NAME
|
|
|
|
class AjaxUI {
|
|
// Constructor
|
|
constructor (element) {
|
|
this._element = element
|
|
const $element = $(this._element)
|
|
$element.addClass(`${NAME}-active`)
|
|
|
|
$element.bind('click', function (e) {
|
|
e.preventDefault()
|
|
|
|
const $this = $(this)
|
|
|
|
$('.ajax').each(function () {
|
|
const $this = $(this)
|
|
$this.removeClass('active')
|
|
$this.parents('.nav-item').removeClass('active')
|
|
})
|
|
|
|
$this.addClass('loading')
|
|
|
|
AjaxUI.load($this.attr('href'), () => {
|
|
$this.removeClass('loading')
|
|
$this.parents('.nav-item').addClass('active')
|
|
$this.addClass('active')
|
|
})
|
|
})
|
|
}
|
|
|
|
// Public methods
|
|
static load (url, callback) {
|
|
// show spinner
|
|
Spinner.show(() => {
|
|
$Body.removeClass('loaded')
|
|
})
|
|
|
|
// update document location
|
|
G.MainUI.updateLocation(url)
|
|
|
|
const absoluteLocation =
|
|
G.URLDetails.base + G.URLDetails.relative.substring(1)
|
|
if (absoluteLocation !== G.location.href) {
|
|
G.history.pushState(
|
|
{
|
|
ajax: true,
|
|
page: absoluteLocation,
|
|
},
|
|
document.title,
|
|
absoluteLocation
|
|
)
|
|
}
|
|
|
|
$.ajax({
|
|
sync: false,
|
|
async: true,
|
|
url,
|
|
dataType: 'json',
|
|
method: 'GET',
|
|
cache: false,
|
|
error (jqXHR) {
|
|
console.warn(`${NAME}: AJAX request failure: ${jqXHR.statusText}`)
|
|
G.location.href = url
|
|
|
|
// google analytics
|
|
if (typeof G.ga === 'function') {
|
|
G.ga('send', 'event', 'error', 'AJAX ERROR', jqXHR.statusText)
|
|
}
|
|
},
|
|
success (data, status, jqXHR) {
|
|
AjaxUI.process(data, jqXHR, callback)
|
|
|
|
// google analytics
|
|
if (typeof G.ga === 'function') {
|
|
G.ga('set', {
|
|
page: G.URLDetails.relative + G.URLDetails.hash,
|
|
title: jqXHR.getResponseHeader('X-Title'),
|
|
})
|
|
G.ga('send', 'pageview')
|
|
}
|
|
},
|
|
})
|
|
}
|
|
|
|
static process (data, jqXHR, callback) {
|
|
const css = jqXHR.getResponseHeader('X-Include-CSS').split(',') || []
|
|
const js = jqXHR.getResponseHeader('X-Include-JS').split(',') || []
|
|
|
|
// Replace HTML regions
|
|
if (typeof data.regions === 'object') {
|
|
for (const key in data.regions) {
|
|
if (typeof data.regions[key] === 'string') {
|
|
AjaxUI.replaceRegion(data.regions[key], key)
|
|
}
|
|
}
|
|
}
|
|
|
|
// remove already loaded scripts
|
|
$('link[type="text/css"]').each(function () {
|
|
const i = css.indexOf($(this).attr('href'))
|
|
if (i > -1) {
|
|
css.splice(i, 1)
|
|
} else if (!$Body.data('unload-blocked')) {
|
|
console.log(`${NAME}: Unloading | ${$(this).attr('href')}`)
|
|
$(this).remove()
|
|
}
|
|
})
|
|
|
|
$('script[type="text/javascript"]').each(function () {
|
|
const i = js.indexOf($(this).attr('src'))
|
|
if (i > -1) {
|
|
js.splice(i, 1)
|
|
} else if (!$Body.data('unload-blocked')) {
|
|
console.log(`${NAME}: Unloading | ${$(this).attr('src')}`)
|
|
$(this).remove()
|
|
}
|
|
})
|
|
|
|
// preload CSS
|
|
this.preload(css).then(() => {
|
|
const $head = $('head')
|
|
css.forEach((el) => {
|
|
$head.append(
|
|
`<link rel="stylesheet" type="text/css" href="${el}" />`
|
|
)
|
|
})
|
|
|
|
// preload JS
|
|
this.preload(js, 'script').then(() => {
|
|
js.forEach((el) => {
|
|
$Body.append(
|
|
`<script type="text/javascript" charset="UTF-8" src="${el}"></script>`
|
|
)
|
|
})
|
|
|
|
console.log(`${NAME}: New page is loaded!`)
|
|
|
|
// trigger events
|
|
if (typeof data.events === 'object') {
|
|
for (const eventName in data.events) {
|
|
$(D).trigger(eventName, [data.events[eventName]])
|
|
}
|
|
}
|
|
|
|
if (typeof callback !== 'undefined') {
|
|
callback()
|
|
}
|
|
|
|
$(G).trigger(Events.AJAX)
|
|
})
|
|
})
|
|
}
|
|
|
|
static preload (items, type = 'text', cache = true, itemCallback = false) {
|
|
if (!items.length) {
|
|
return $.Deferred().resolve().promise()
|
|
}
|
|
|
|
const dfds = []
|
|
items.forEach((url, i) => {
|
|
const dfd = $.Deferred()
|
|
|
|
$.ajax({
|
|
dataType: type,
|
|
cache,
|
|
url,
|
|
}).always(() => {
|
|
dfd.resolve()
|
|
if (itemCallback) {
|
|
itemCallback(i, url)
|
|
}
|
|
})
|
|
|
|
dfds.push(dfd)
|
|
})
|
|
|
|
// return a master promise object which will resolve when all the deferred objects have resolved
|
|
return $.when(...dfds)
|
|
}
|
|
|
|
static replaceRegion (html, key) {
|
|
const $region = $(`[data-ajax-region="${key}"]`)
|
|
|
|
if ($region.length) {
|
|
$region.empty().append(html)
|
|
} else {
|
|
console.warn(`${NAME}: Region returned without class or id!`)
|
|
}
|
|
}
|
|
|
|
dispose () {
|
|
const $element = $(this._element)
|
|
|
|
$element.removeClass(`${NAME}-active`)
|
|
$.removeData(this._element, DATA_KEY)
|
|
this._element = null
|
|
}
|
|
|
|
static _jQueryInterface () {
|
|
return this.each(function () {
|
|
// attach functionality to element
|
|
const $element = $(this)
|
|
let data = $element.data(DATA_KEY)
|
|
|
|
if (!data) {
|
|
data = new AjaxUI(this)
|
|
$element.data(DATA_KEY, data)
|
|
}
|
|
})
|
|
}
|
|
}
|
|
|
|
// jQuery interface
|
|
$.fn[NAME] = AjaxUI._jQueryInterface
|
|
$.fn[NAME].Constructor = AjaxUI
|
|
$.fn[NAME].noConflict = function () {
|
|
$.fn[NAME] = JQUERY_NO_CONFLICT
|
|
return AjaxUI._jQueryInterface
|
|
}
|
|
|
|
// auto-apply
|
|
$('.ajax').ready(() => {
|
|
$('.ajax').jsAjaxUI()
|
|
})
|
|
|
|
// AJAX update browser title
|
|
$(D).on('layoutRefresh', (e, data) => {
|
|
D.title = data.Title
|
|
|
|
$Html.attr('class', '')
|
|
if (data.ClassName) {
|
|
$Html.addClass(data.ClassName)
|
|
}
|
|
// data.Link = (data.Link === '/home/') ? '/' : data.Link;
|
|
})
|
|
|
|
// Back/Forward functionality
|
|
G.onpopstate = function (event) {
|
|
const $existingLink = $(`a[href^="${D.location}"]`)
|
|
|
|
if (event.state !== null && event.state.ajax) {
|
|
console.log(`${NAME}: GOBACK (AJAX state)`)
|
|
AjaxUI.load(event.state.page)
|
|
} else if ($existingLink.length && $existingLink.hasClass('ajax')) {
|
|
console.log(`${NAME}: GOBACK (AJAX link)`)
|
|
$existingLink.trigger('click')
|
|
} else if (D.location.href !== G.location.href) {
|
|
console.log(`${NAME}: GOBACK (HTTP)`)
|
|
G.location.href = D.location
|
|
}
|
|
}
|
|
|
|
// manage AJAX requests
|
|
$.ajaxPrefilter((options, originalOptions, jqXHR) => {
|
|
jqXHR.opts = options
|
|
$.xhrPool.requests[jqXHR.opts.url] = jqXHR
|
|
})
|
|
|
|
$.xhrPool = {
|
|
requests: {},
|
|
paused: false,
|
|
pauseAll: () => {
|
|
$.xhrPool.paused = true
|
|
|
|
/* for (let url in $.xhrPool.requests) {
|
|
const jqXHR = $.xhrPool.requests[url];
|
|
jqXHR.abort();
|
|
console.log(`${NAME}: AJAX request is paused (${jqXHR.opts.url})`);
|
|
} */
|
|
},
|
|
restoreAll: () => {
|
|
for (const url in $.xhrPool.requests) {
|
|
const jqXHR = $.xhrPool.requests[url]
|
|
$.ajax(jqXHR.opts)
|
|
console.log(`${NAME}: AJAX request is restored (${jqXHR.opts.url})`)
|
|
}
|
|
|
|
$.xhrPool.paused = false
|
|
},
|
|
}
|
|
|
|
$.ajaxSetup({
|
|
beforeSend: (jqXHR) => {}, // and connection to list
|
|
complete: (jqXHR) => {
|
|
if (!$.xhrPool.paused) {
|
|
// console.log(`${NAME}: AJAX request is done (${jqXHR.opts.url})`);
|
|
delete $.xhrPool.requests[jqXHR.opts.url]
|
|
}
|
|
},
|
|
})
|
|
|
|
// attach events
|
|
$Body.on(`${Events.OFFLINE}`, () => {
|
|
$.xhrPool.pauseAll()
|
|
})
|
|
|
|
$Body.on(`${Events.BACKONLINE}`, () => {
|
|
$.xhrPool.restoreAll()
|
|
})
|
|
|
|
return AjaxUI
|
|
})($)
|
|
|
|
export default AjaxUI
|