319 lines
8.1 KiB
JavaScript
319 lines
8.1 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;
|