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;
|