tonyair/webpack-bootstrap-ui-kit
1
0
Fork 0
mirror of https://github.com/a2nt/webpack-bootstrap-ui-kit.git synced 2024-10-22 11:05:45 +02:00
Code Issues Projects Releases Wiki Activity

IMPR: stop and resume AJAX on OFFLINE/ONLINE states

Browse Source
This commit is contained in:
Tony Air 2020-08-02 21:53:23 +07:00
parent 6612b3946d
commit 4a35a7bba5
3 changed files with 90 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
src/js/_components/_ui.ajax.js
View File

@ -1,4 +1,4 @@
"use strict"; 'use strict';
import $ from 'jquery'; import $ from 'jquery';
import Events from '../_events'; import Events from '../_events';
@ -21,12 +21,12 @@ const AjaxUI = (($) => {
const $element = $(this._element); const $element = $(this._element);
$element.addClass(`${NAME}-active`); $element.addClass(`${NAME}-active`);
$element.bind('click', function(e) { $element.bind('click', function (e) {
e.preventDefault(); e.preventDefault();
const $this = $(this); const $this = $(this);
$('.ajax').each(function() { $('.ajax').each(function () {
const $this = $(this); const $this = $(this);
$this.removeClass('active'); $this.removeClass('active');
$this.parents('.nav-item').removeClass('active'); $this.parents('.nav-item').removeClass('active');
@ -52,12 +52,17 @@ const AjaxUI = (($) => {
// update document location // update document location
G.MainUI.updateLocation(url); G.MainUI.updateLocation(url);
const absoluteLocation = G.URLDetails['base'] + G.URLDetails['relative'].substring(1); const absoluteLocation =
G.URLDetails['base'] + G.URLDetails['relative'].substring(1);
if (absoluteLocation !== G.location.href) { if (absoluteLocation !== G.location.href) {
G.history.pushState({ G.history.pushState(
ajax: true, {
page: absoluteLocation, ajax: true,
}, document.title, absoluteLocation); page: absoluteLocation,
},
document.title,
absoluteLocation,
);
} }
$.ajax({ $.ajax({
@ -96,31 +101,31 @@ const AjaxUI = (($) => {
const js = jqXHR.getResponseHeader('X-Include-JS').split(',') || []; const js = jqXHR.getResponseHeader('X-Include-JS').split(',') || [];
// Replace HTML regions // Replace HTML regions
if (typeof(data.regions) === 'object') { if (typeof data.regions === 'object') {
for (const key in data.regions) { for (const key in data.regions) {
if (typeof(data.regions[key]) === 'string') { if (typeof data.regions[key] === 'string') {
AjaxUI.replaceRegion(data.regions[key], key); AjaxUI.replaceRegion(data.regions[key], key);
} }
} }
} }
// remove already loaded scripts // remove already loaded scripts
$('link[type="text/css"]').each(function() { $('link[type="text/css"]').each(function () {
const i = css.indexOf($(this).attr('href')); const i = css.indexOf($(this).attr('href'));
if (i > -1) { if (i > -1) {
css.splice(i, 1); css.splice(i, 1);
} else if (!$Body.data('unload-blocked')) { } else if (!$Body.data('unload-blocked')) {
console.log(`Unloading: ${ $(this).attr('href')}`); console.log(`Unloading: ${$(this).attr('href')}`);
$(this).remove(); $(this).remove();
} }
}); });
$('script[type="text/javascript"]').each(function() { $('script[type="text/javascript"]').each(function () {
const i = js.indexOf($(this).attr('src')); const i = js.indexOf($(this).attr('src'));
if (i > -1) { if (i > -1) {
js.splice(i, 1); js.splice(i, 1);
} else if (!$Body.data('unload-blocked')) { } else if (!$Body.data('unload-blocked')) {
console.log(`Unloading: ${ $(this).attr('src')}`); console.log(`Unloading: ${$(this).attr('src')}`);
$(this).remove(); $(this).remove();
} }
}); });
@ -129,20 +134,23 @@ const AjaxUI = (($) => {
this.preload(css).then(() => { this.preload(css).then(() => {
const $head = $('head'); const $head = $('head');
css.forEach((el) => { css.forEach((el) => {
$head.append(`<link rel="stylesheet" type="text/css" href="${el}" />`); $head.append(
`<link rel="stylesheet" type="text/css" href="${el}" />`,
);
}); });
// preload JS // preload JS
this.preload(js, 'script').then(() => { this.preload(js, 'script').then(() => {
js.forEach((el) => { js.forEach((el) => {
$Body.append(`<script type="text/javascript" charset="UTF-8" src="${el}"></script>`); $Body.append(
`<script type="text/javascript" charset="UTF-8" src="${el}"></script>`,
);
}); });
console.log('New page is loaded!'); console.log('New page is loaded!');
// trigger events // trigger events
if (typeof(data.events) === 'object') { if (typeof data.events === 'object') {
for (const eventName in data.events) { for (const eventName in data.events) {
$(D).trigger(eventName, [data.events[eventName]]); $(D).trigger(eventName, [data.events[eventName]]);
} }
@ -203,7 +211,7 @@ const AjaxUI = (($) => {
} }
static _jQueryInterface() { static _jQueryInterface() {
return this.each(function() { return this.each(function () {
// attach functionality to element // attach functionality to element
const $element = $(this); const $element = $(this);
let data = $element.data(DATA_KEY); let data = $element.data(DATA_KEY);
@ -219,7 +227,7 @@ const AjaxUI = (($) => {
// jQuery interface // jQuery interface
$.fn[NAME] = AjaxUI._jQueryInterface; $.fn[NAME] = AjaxUI._jQueryInterface;
$.fn[NAME].Constructor = AjaxUI; $.fn[NAME].Constructor = AjaxUI;
$.fn[NAME].noConflict = function() { $.fn[NAME].noConflict = function () {
$.fn[NAME] = JQUERY_NO_CONFLICT; $.fn[NAME] = JQUERY_NO_CONFLICT;
return AjaxUI._jQueryInterface; return AjaxUI._jQueryInterface;
}; };
@ -241,8 +249,8 @@ const AjaxUI = (($) => {
}); });
// Back/Forward functionality // Back/Forward functionality
G.onpopstate = function(event) { G.onpopstate = function (event) {
const $existingLink = $(`a[href^="${ D.location }"]`); const $existingLink = $(`a[href^="${D.location}"]`);
if (event.state !== null && event.state.ajax) { if (event.state !== null && event.state.ajax) {
console.log('GOBACK (AJAX state)'); console.log('GOBACK (AJAX state)');
@ -256,6 +264,54 @@ const AjaxUI = (($) => {
} }
}; };
// 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(`AJAX request is paused (${jqXHR.opts.url})`);
}
},
restoreAll: () => {
for (let url in $.xhrPool.requests) {
const jqXHR = $.xhrPool.requests[url];
$.ajax(jqXHR.opts);
console.log(`AJAX request is restored (${jqXHR.opts.url})`);
}
$.xhrPool.paused = false;
},
};
$.ajaxSetup({
beforeSend: (jqXHR) => {}, // and connection to list
complete: (jqXHR) => {
if (!$.xhrPool.paused) {
console.log(`AJAX request is done (${jqXHR.opts.url})`);
delete $.xhrPool.requests[jqXHR.opts.url];
}
},
});
// attach events
$Body.on(`${Events.OFFLINE}`, () => {
$.xhrPool.pauseAll();
});
$Body.on(`${Events.ONLINE}`, () => {
$.xhrPool.restoreAll();
});
return AjaxUI; return AjaxUI;
})($); })($);

20
src/js/_components/_ui.sidebar.js
View File

@ -25,7 +25,6 @@ const SidebarUI = (($) => {
//const fontSize = parseInt($Body.css('font-size')); //const fontSize = parseInt($Body.css('font-size'));
const fontSize = 0; const fontSize = 0;
const contentElement = $(`.${CONTENTHOLDER}`)[0]; const contentElement = $(`.${CONTENTHOLDER}`)[0];
console.log(contentElement);
//$(`.${CLASSNAME}`).wrapInner(`<div class="${INNERWRAPPER}"></div>`); //$(`.${CLASSNAME}`).wrapInner(`<div class="${INNERWRAPPER}"></div>`);
const $el = $(`.${CLASSNAME}`); const $el = $(`.${CLASSNAME}`);
@ -42,23 +41,28 @@ const SidebarUI = (($) => {
$Body.on(`${Events.SCROLL} ${Events.RESIZE}`, (e) => { $Body.on(`${Events.SCROLL} ${Events.RESIZE}`, (e) => {
const contentOffset = parseInt(contentElement.offsetTop) + fontSize; const contentOffset = parseInt(contentElement.offsetTop) + fontSize;
const contentOffsetHeight = parseInt(contentElement.offsetHeight) - fontSize; const contentOffsetHeight =
parseInt(contentElement.offsetHeight) - fontSize;
const sidebarWidth = $el[0].offsetWidth; const sidebarWidth = $el[0].offsetWidth;
const scrollPos = parseInt($Body.scrollTop()); const scrollPos = parseInt($Body.scrollTop());
// normal pos // normal pos
if(contentOffset >= scrollPos){ if (contentOffset >= scrollPos) {
$innerWrapper.attr('style', ''); $innerWrapper.attr('style', '');
}else if(scrollPos >= (contentOffset + contentOffsetHeight - $innerWrapper[0].offsetHeight)){ } else if (
scrollPos >=
contentOffset + contentOffsetHeight - $innerWrapper[0].offsetHeight
) {
// bottom pos // bottom pos
$innerWrapper.attr('style', `position:absolute;bottom:${fontSize}px`); $innerWrapper.attr('style', `position:absolute;bottom:${fontSize}px`);
}else { } else {
// scrolled pos // scrolled pos
$innerWrapper.attr('style', `position:fixed;top:${fontSize}px;width:${sidebarWidth}px`); $innerWrapper.attr(
'style',
`position:fixed;top:${fontSize}px;width:${sidebarWidth}px`,
);
} }
}); });
} }

1
src/js/_main.js
View File

@ -436,7 +436,6 @@ const MainUI = (($) => {
$el.trigger(`${Events.LAZYIMAGEREADY}`); $el.trigger(`${Events.LAZYIMAGEREADY}`);
}); });
}); });
} }
}); });