Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Improve ajax behavior; miscellanneous fixes #1026

Merged
merged 4 commits into from
Mar 11, 2021
Merged

Improve ajax behavior; miscellanneous fixes #1026

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c18b9cf
implement different types of queues for content and sidebar; implemen…
kouralex Jul 8, 2020
a972eac
moving some general functions to scripts.js
kouralex Jul 9, 2020
7a3ee0e
fix throbber icon not showing on hierarchy whilst ajaxing; fix introd…
kouralex Jul 9, 2020
ebd2d68
Merge branch 'master' into issuexxxx-improve-ajax-behavior
joelit Mar 11, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions resource/css/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1411,6 +1411,10 @@ ul.nav-tabs > li {
margin-left: 350px;
}

.content > .concept-spinner ~ * {
display: none;
}

.wide-content {
margin-left: 0;
}
Expand Down
71 changes: 33 additions & 38 deletions resource/js/docready.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,25 +94,6 @@ $(function() { // DOCUMENT READY
var textColor = $('.search-parameter-highlight').css('color');
countAndSetOffset();

// Make a selection of an element for copy pasting.
function makeSelection(e, elem) {
var $clicked = elem || $(this);
var text = $clicked[0];
var range;
if (document.body.createTextRange) { // ms
range = document.body.createTextRange();
range.moveToElementText(text);
range.select();
} else if (window.getSelection) { // moz, opera, webkit
var selection = window.getSelection();
range = document.createRange();
range.selectNodeContents(text);
selection.removeAllRanges();
selection.addRange(range);
}
return false;
}

function initHierarchyQtip() {
if (!$('#hierarchy').length) {
$('#hierarchy-disabled').attr('id', 'hierarchy');
Expand All @@ -128,15 +109,6 @@ $(function() { // DOCUMENT READY

$(document).on('click','.uri-input-box', makeSelection);

// copy to clipboard
function copyToClipboard() {
var $btn = $(this);
var id = $btn.attr('for');
var $elem = $(id);
makeSelection(undefined, $elem);
document.execCommand('copy');
}

$(document).on('click', 'button.copy-clipboard', copyToClipboard);

var sidebarResizer = debounce(function() {
Expand Down Expand Up @@ -208,6 +180,7 @@ $(function() { // DOCUMENT READY
$('#statistics tr:nth-of-type(1)').after('<tr><td><span class="spinner" /></td></td></tr>');
$.ajax({
url : rest_base_url + vocab + '/vocabularyStatistics',
req_kind: $.ajaxQ.requestKind.GLOBAL,
data: $.param({'lang' : content_lang}),
success : function(data) {
var $spinner = $('#counts tr:nth-of-type(2)');
Expand All @@ -228,6 +201,7 @@ $(function() { // DOCUMENT READY

$.ajax({
url : rest_base_url + vocab + '/labelStatistics',
req_kind: $.ajaxQ.requestKind.GLOBAL,
data: $.param({'lang' : lang}),
success : function(data) {
$('#statistics tr:nth-of-type(2)').detach(); // removing the spinner
Expand Down Expand Up @@ -282,7 +256,7 @@ $(function() { // DOCUMENT READY
// event handler for clicking the hierarchy concepts
$(document).on('click', '.concept-hierarchy a',
function(event) {
event.preventDefault();
$.ajaxQ.abortContentQueries();
var targetUrl = event.target.href;
var parameters = (clang !== lang) ? $.param({'clang' : clang}) : $.param({});
var historyUrl = (clang !== lang) ? targetUrl + '?' + parameters : targetUrl;
Expand All @@ -292,6 +266,7 @@ $(function() { // DOCUMENT READY
$.ajax({
url : targetUrl,
data: parameters,
req_kind: $.ajaxQ.requestKind.CONTENT,
complete: function() { clearTimeout(loading); },
success : function(data) {
$content.empty();
Expand All @@ -314,15 +289,16 @@ $(function() { // DOCUMENT READY
// event handler for clicking the alphabetical/group index concepts
$(document).on('click', '.side-navi a',
function(event) {
$.ajaxQ.abortAll();
$.ajaxQ.abortContentQueries();
$('.activated-concept').removeClass('activated-concept');
$(this).addClass('activated-concept');
var $content = $('.content').empty().append($delayedSpinner.hide());
var loading = delaySpinner();
$.ajax({
url : event.target.href,
req_kind: $.ajaxQ.requestKind.CONTENT,
complete: function() { clearTimeout(loading); },
success : function(data) {
success : function(data, responseCode, jqxhr) {
if (window.history.pushState) { window.history.pushState({}, null, event.target.href); }
$content.empty().append($('.content', data).html());
initHierarchyQtip();
Expand All @@ -342,14 +318,15 @@ $(function() { // DOCUMENT READY
// event handler for clicking the alphabetical index tab
$(document).on('click', '#alpha',
function(event) {
$.ajaxQ.abortAll();
$.ajaxQ.abortSidebarQueries(true);
$('.active').removeClass('active');
$('#alpha').addClass('active');
alpha_complete = false;
$('.sidebar-grey').empty().prepend(spinner);
var targetUrl = event.target.href;
$.ajax({
url : targetUrl,
req_kind: $.ajaxQ.requestKind.SIDEBAR,
success : function(data) {
updateSidebar(data);
$('.nav').scrollTop(0);
Expand All @@ -364,7 +341,7 @@ $(function() { // DOCUMENT READY
// event handler for clicking the changes tab
$(document).on('click', '#changes',
function(event) {
$.ajaxQ.abortAll();
$.ajaxQ.abortSidebarQueries(true);
$('.active').removeClass('active');
$('#changes').addClass('active');
$('.sidebar-grey').empty().prepend(spinner);
Expand All @@ -373,6 +350,7 @@ $(function() { // DOCUMENT READY
var targetUrl = event.target.href;
$.ajax({
url : targetUrl,
req_kind: $.ajaxQ.requestKind.SIDEBAR,
success : function(data) {
updateSidebar(data);
$('.nav').scrollTop(0);
Expand Down Expand Up @@ -424,7 +402,7 @@ $(function() { // DOCUMENT READY
// event handler for clicking the group index tab
$(document).on('click', '#groups > a',
function(event) {
$.ajaxQ.abortAll();
$.ajaxQ.abortSidebarQueries(true);
$('.active').removeClass('active');
var $clicked = $(this);
$clicked.parent().addClass('active');
Expand All @@ -442,11 +420,14 @@ $(function() { // DOCUMENT READY
// event handler for clicking groups
$(document).on('click','div.group-hierarchy a',
function(event) {
$.ajaxQ.abortContentQueries();
var $content = $('.content').empty().append($delayedSpinner.hide());
var loading = delaySpinner();
// ajaxing the sidebar content
$.ajax({
url : event.target.href,
req_kind: $.ajaxQ.requestKind.CONTENT,
complete: function() { clearTimeout(loading); },
success : function(data) {
initHierarchyQtip();
$('#hier-trigger').attr('href', event.target.href);
Expand All @@ -468,14 +449,15 @@ $(function() { // DOCUMENT READY
// event handler for the alphabetical index letters
$(document).on('click','.pagination > li > a',
function(event) {
$.ajaxQ.abortAll();
$.ajaxQ.abortSidebarQueries();
if ($('.alphabet-header').length === 0) {
alpha_complete = false;
var $content = $('.sidebar-grey');
$content.empty().prepend(spinner);
var targetUrl = event.target.href;
$.ajax({
url : targetUrl,
req_kind: $.ajaxQ.requestKind.SIDEBAR,
success : function(data) {
updateSidebar(data);
$('.nav').scrollTop(0);
Expand Down Expand Up @@ -654,9 +636,15 @@ $(function() { // DOCUMENT READY
} else { // if not then ajax the rest api and cache the results.
var typeParam = $.param({'lang' : lang });
var typeUrl = rest_base_url + 'types';
$.getJSON(typeUrl, typeParam, function(response) {
lscache.set('types:' + lang, response, 1440);
processTypeJSON(response);
$.ajax({
dataType: 'json',
url: typeUrl,
req_kind: $.ajaxQ.requestKind.GLOBAL,
data: typeParam,
success: function(response) {
lscache.set('types:' + lang, response, 1440);
processTypeJSON(response);
}
});
}

Expand All @@ -678,6 +666,7 @@ $(function() { // DOCUMENT READY
parameters = $.param({'vocab' : vocabString, 'lang' : '', 'labellang' : ''});
}
settings.url = settings.url + '&' + parameters;
settings.req_kind = $.ajaxQ.requestKind.GLOBAL;
}
},
// changes the response so it can be easily displayed in the handlebars template.
Expand Down Expand Up @@ -842,12 +831,14 @@ $(function() { // DOCUMENT READY
function alphaWaypointCallback() {
// if the pagination is not visible all concepts are already shown
if (!alpha_complete && $('.pagination').length === 1) {
$.ajaxQ.abortSidebarQueries();
alpha_complete = true;
$('.alphabetical-search-results').append($loading);
var parameters = $.param({'offset' : 250, 'clang': content_lang});
var letter = '/' + ($('.pagination > .active')[0] ? $('.pagination > .active > a')[0].innerHTML : $('.pagination > li > a')[0].innerHTML);
$.ajax({
url : vocab + '/' + lang + '/index' + letter,
req_kind: $.ajaxQ.requestKind.SIDEBAR,
data : parameters,
success : function(data) {
$loading.detach();
Expand All @@ -861,11 +852,13 @@ $(function() { // DOCUMENT READY
var changeOffset = 200;

function changeListWaypointCallback() {
$.ajaxQ.abortSidebarQueries();
$('.change-list').append($loading);
var parameters = $.param({'offset' : changeOffset, 'clang': content_lang});
var lastdate = $('.change-list > span:last-of-type')[0].innerHTML;
$.ajax({
url : vocab + '/' + lang + '/new',
req_kind: $.ajaxQ.requestKind.SIDEBAR,
data : parameters,
success : function(data) {
$loading.detach();
Expand All @@ -891,6 +884,7 @@ $(function() { // DOCUMENT READY
var parameters = $.param({'q' : searchTerm, 'vocabs' : vocabSelectionString, 'offset' : offcount * waypoint_results, 'clang' : content_lang, 'type' : typeLimit, 'group' : groupLimit, 'parent': parentLimit, anylang: getUrlParams().anylang, 'scheme' : schemeLimit });
$.ajax({
url : window.location.pathname,
req_kind: $.ajaxQ.requestKind.GLOBAL,
data : parameters,
success : function(data) {
$loading.detach();
Expand Down Expand Up @@ -1050,6 +1044,7 @@ $(function() { // DOCUMENT READY
$('.sidebar-grey').empty().append('<div class="loading-spinner"><span class="spinner-text">'+ loading_text + '</span><span class="spinner" /></div>');
$.ajax({
url : urlLangCorrected,
req_kind: $.ajaxQ.requestKind.SIDEBAR,
success : function(data) {
$('#sidebar').replaceWith($(data).find('#sidebar'));
}
Expand Down
1 change: 1 addition & 0 deletions resource/js/groups.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@ function invokeGroupTree() {
$.ajax({
data: params,
url: json_url,
req_kind: $.ajaxQ.requestKind.SIDEBAR_PRIVILEGED,
success: function (response) {
if (response.groups) { // the default hierarchy query that fires when a page loads.
return cb(buildGroupTree(response.groups));
Expand Down
7 changes: 7 additions & 0 deletions resource/js/hierarchy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,10 @@ function invokeParentTree(tree) {
if ($('#sidebar .mCustomScrollbar').length === 0) {
$sidebarGrey.mCustomScrollbar(hierTreeConf);
}
// fix a bug causing throbber.gif not showing whilst ajaxing
// TODO: a good fix would mean fixing the underlying DOM structure
$('.jstree-container-ul').parent().addClass('jstree-default');

var $leafProper = $('.jstree-leaf-proper');
if ($leafProper.length > 0) {
$sidebarGrey.jstree('select_node', $leafProper.toArray());
Expand Down Expand Up @@ -378,6 +382,7 @@ function getTreeConfiguration() {
$.ajax({
data: $.param({'lang': clang}),
url: rest_base_url + vocab + '/',
req_kind: $.ajaxQ.requestKind.SIDEBAR_PRIVILEGED,
success: function (response) {
schemeObjects = schemeRoot(response.conceptschemes);
// if there are multiple concept schemes display those at the top level
Expand All @@ -388,6 +393,7 @@ function getTreeConfiguration() {
else if(node.id === '#' && $('#vocab-info').length) {
$.ajax({
data: $.param({'lang': clang}),
req_kind: $.ajaxQ.requestKind.SIDEBAR_PRIVILEGED,
url: rest_base_url + vocab + '/topConcepts',
success: function (response) {
return cb(vocabRoot(response.topconcepts));
Expand Down Expand Up @@ -420,6 +426,7 @@ function getTreeConfiguration() {
$.ajax({
data: params,
url: json_url,
req_kind: $.ajaxQ.requestKind.SIDEBAR_PRIVILEGED,
success: function (response) {
if (response.broaderTransitive) { // the default hierarchy query that fires when a page loads.
return cb(buildParentTree(nodeId, response.broaderTransitive, schemeObjects));
Expand Down
Loading