kiwix/kiwix-js
1
0
Fork 0
mirror of https://github.com/kiwix/kiwix-js.git synced 2025-09-08 06:37:04 -04:00
Code Issues Packages Projects Releases Wiki Activity

Convert further jQuery statements to native JS #920 (#927)

Browse Source 
Signed off by @dheerajdlalwani.
This commit is contained in:
Dheeraj Lalwani 2022-11-27 13:52:32 +05:30 committed by GitHub
parent 4042cbc5c3
commit 23d596b309
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 68 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

97
www/js/app.js
View File

@ -240,7 +240,7 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys
// Do not initiate the same search if it is already in progress
if (appstate.search.prefix === prefix && !/^(cancelled|complete)$/.test(appstate.search.status)) return;
document.getElementById('welcomeText').style.display = 'none';
$('.kiwix-alert').hide();
document.querySelector('.kiwix-alert').style.display = 'none';
document.getElementById('searchingArticles').style.display = '';
pushBrowserHistoryState(null, prefix);
// Initiate the search
@ -322,7 +322,7 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys
});
// Restore the search results if user goes back into prefix field
$('#prefix').on('focus', function() {
if ($('#prefix').val() !== '')
if (document.getElementById('prefix').value !== '')
document.getElementById('articleListWithHeader').style.display = '';
});
// Hide the search results if user moves out of prefix field
@ -333,15 +333,15 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys
document.getElementById('articleListWithHeader').style.display = 'none';
}
});
$("#btnRandomArticle").on("click", function() {
$('#prefix').val("");
$('#btnRandomArticle').on('click', function() {
document.getElementById('prefix').value = '';
goToRandomArticle();
document.getElementById('welcomeText').style.display = 'none';
document.getElementById('articleListWithHeader').style.display = 'none';
$('.navbar-collapse').collapse('hide');
});
$('#btnRescanDeviceStorage').on("click", function() {
$('#btnRescanDeviceStorage').on('click', function() {
searchForArchivesInStorage();
});
// Bottom bar :
@ -358,7 +358,8 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys
return false;
});
$('#btnTop').on('click', function() {
$("#articleContent").contents().scrollTop(0);
var articleContent = document.getElementById('articleContent');
articleContent.contentWindow.scrollTo({top: 0, behavior: 'smooth'});
// We return true, so that the link to #top is still triggered (useful in the About section)
return true;
});
@ -384,15 +385,15 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys
// Give the focus to the search field, and clean up the page contents
document.getElementById('prefix').value = '';
document.getElementById('prefix').focus();
let articleList = document.getElementById('articleList');
let articleListHeaderMessage = document.getElementById('articleListHeaderMessage');
var articleList = document.getElementById('articleList');
var articleListHeaderMessage = document.getElementById('articleListHeaderMessage');
while (articleList.firstChild) articleList.removeChild(articleList.firstChild);
while (articleListHeaderMessage.firstChild) articleListHeaderMessage.removeChild(articleListHeaderMessage.firstChild);
document.getElementById('searchingArticles').style.display = 'none';
document.getElementById('articleContent').style.display = 'none';
// Empty and purge the article contents
let articleContent = document.getElementById('articleContent');
let articleContentDoc = articleContent ? articleContent.contentDocument : null;
var articleContent = document.getElementById('articleContent');
var articleContentDoc = articleContent ? articleContent.contentDocument : null;
while (articleContentDoc.firstChild) articleContentDoc.removeChild(articleContentDoc.firstChild);
if (selectedArchive !== null && selectedArchive.isReady()) {
document.getElementById('welcomeText').style.display = 'none';
@ -421,7 +422,7 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys
document.getElementById('formArticleSearch').style.display = 'none';
document.getElementById('welcomeText').style.display = 'none';
document.getElementById('searchingArticles').style.display = 'none';
$('.kiwix-alert').hide();
document.querySelector('.kiwix-alert').style.display = 'none';
refreshAPIStatus();
refreshCacheStatus();
uiUtil.checkUpdateStatus(appstate);
@ -449,7 +450,7 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys
document.getElementById('welcomeText').style.display = 'none';
document.getElementById('articleListWithHeader').style.display = 'none';
document.getElementById('searchingArticles').style.display = 'none';
$('.kiwix-alert').hide();
document.querySelector('.kiwix-alert').style.display = 'none';
// Use a timeout of 400ms because uiUtil.applyAnimationToSection uses a timeout of 300ms
setTimeout(resizeIFrame, 400);
return false;
@ -630,32 +631,34 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys
var apiStatusPanel = document.getElementById('apiStatusDiv');
apiStatusPanel.classList.remove('card-success', 'card-warning', 'card-danger');
var apiPanelClass = 'card-success';
var messageChannelStatus = document.getElementById('messageChannelStatus');
var serviceWorkerStatus = document.getElementById('serviceWorkerStatus');
if (isMessageChannelAvailable()) {
$('#messageChannelStatus').html("MessageChannel API available");
$('#messageChannelStatus').removeClass("apiAvailable apiUnavailable")
.addClass("apiAvailable");
messageChannelStatus.innerHTML = 'MessageChannel API available';
messageChannelStatus.classList.remove('apiAvailable', 'apiUnavailable');
messageChannelStatus.classList.add('apiAvailable');
} else {
apiPanelClass = 'card-warning';
$('#messageChannelStatus').html("MessageChannel API unavailable");
$('#messageChannelStatus').removeClass("apiAvailable apiUnavailable")
.addClass("apiUnavailable");
messageChannelStatus.innerHTML = 'MessageChannel API unavailable';
messageChannelStatus.classList.remove('apiAvailable', 'apiUnavailable');
messageChannelStatus.classList.add('apiUnavailable');
}
if (isServiceWorkerAvailable()) {
if (isServiceWorkerReady()) {
$('#serviceWorkerStatus').html("ServiceWorker API available, and registered");
$('#serviceWorkerStatus').removeClass("apiAvailable apiUnavailable")
.addClass("apiAvailable");
serviceWorkerStatus.innerHTML = 'ServiceWorker API available, and registered';
serviceWorkerStatus.classList.remove('apiAvailable', 'apiUnavailable');
serviceWorkerStatus.classList.add('apiAvailable');
} else {
apiPanelClass = 'card-warning';
$('#serviceWorkerStatus').html("ServiceWorker API available, but not registered");
$('#serviceWorkerStatus').removeClass("apiAvailable apiUnavailable")
.addClass("apiUnavailable");
serviceWorkerStatus.innerHTML = 'ServiceWorker API available, but not registered';
serviceWorkerStatus.classList.remove('apiAvailable', 'apiUnavailable');
serviceWorkerStatus.classList.add('apiUnavailable');
}
} else {
apiPanelClass = 'card-warning';
$('#serviceWorkerStatus').html("ServiceWorker API unavailable");
$('#serviceWorkerStatus').removeClass("apiAvailable apiUnavailable")
.addClass("apiUnavailable");
serviceWorkerStatus.innerHTML = 'ServiceWorker API unavailable';
serviceWorkerStatus.classList.remove('apiAvailable', 'apiUnavailable');
serviceWorkerStatus.classList.add('apiUnavailable');
}
// Update Settings Store section of API panel with API name
var settingsStoreStatusDiv = document.getElementById('settingsStoreStatus');
@ -864,7 +867,8 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys
return;
}
if (!isServiceWorkerReady()) {
$('#serviceWorkerStatus').html("ServiceWorker API available : trying to register it...");
var serviceWorkerStatus = document.getElementById('serviceWorkerStatus');
serviceWorkerStatus.innerHTML = 'ServiceWorker API available : trying to register it...';
if (navigator.serviceWorker.controller) {
console.log("Active Service Worker found, no need to register");
serviceWorkerRegistration = true;
@ -1103,8 +1107,7 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys
if (event.state) {
var title = event.state.title;
var titleSearch = event.state.titleSearch;
$('#prefix').val("");
document.getElementById('prefix').value = '';
document.getElementById('welcomeText').style.display = 'none';
document.getElementById('searchingArticles').style.display = 'none';
$('.navbar-collapse').collapse('hide');
@ -1115,7 +1118,7 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys
if (title && !(""===title)) {
goToArticle(title);
} else if (titleSearch && titleSearch !== '') {
$('#prefix').val(titleSearch);
document.getElementById('prefix').value = titleSearch;
if (titleSearch !== appstate.search.prefix) {
searchDirEntriesFromPrefix(titleSearch);
} else {
@ -1151,7 +1154,7 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys
if (lastSelectedArchive !== null && lastSelectedArchive !== undefined && lastSelectedArchive !== '') {
// Attempt to select the corresponding item in the list, if it exists
if ($("#archiveList option[value='"+lastSelectedArchive+"']").length > 0) {
$('#archiveList').val(lastSelectedArchive);
document.getElementById('archiveList').value = lastSelectedArchive;
}
}
// Set the localArchive as the last selected (or the first one if it has never been selected)
@ -1172,7 +1175,7 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys
* Sets the localArchive from the selected archive in the drop-down list
*/
function setLocalArchiveFromArchiveList() {
var archiveDirectory = $('#archiveList').val();
var archiveDirectory = document.getElementById('archiveList').value;
if (archiveDirectory && archiveDirectory.length > 0) {
// Now, try to find which DeviceStorage has been selected by the user
// It is the prefix of the archive directory
@ -1411,7 +1414,7 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys
// Do not allow cancelled searches to report
if (reportingSearch.status === 'cancelled') return;
var stillSearching = reportingSearch.status === 'interim';
var articleListHeaderMessageDiv = $('#articleListHeaderMessage');
var articleListHeaderMessageDiv = document.getElementById('articleListHeaderMessage');
var nbDirEntry = dirEntryArray ? dirEntryArray.length : 0;
var message;
@ -1425,9 +1428,9 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys
);
}
articleListHeaderMessageDiv.html(message);
articleListHeaderMessageDiv.innerHTML = message;
var articleListDiv = $('#articleList');
var articleListDiv = document.getElementById('articleList');
var articleListDivHtml = '';
var listLength = dirEntryArray.length < params.maxSearchResultsSize ? dirEntryArray.length : params.maxSearchResultsSize;
for (var i = 0; i < listLength; i++) {
@ -1440,7 +1443,7 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys
articleListDivHtml += '<a href="#" dirEntryId="' + dirEntryStringId +
'" class="list-group-item">' + dirEntry.getTitleOrUrl() + '</a>';
}
articleListDiv.html(articleListDivHtml);
articleListDiv.innerHTML = articleListDivHtml;
// We have to use mousedown below instead of click as otherwise the prefix blur event fires first
// and prevents this event from firing; note that touch also triggers mousedown
$('#articleList a').on('mousedown', function (e) {
@ -1526,7 +1529,7 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys
var iframeArticleContent = document.getElementById('articleContent');
iframeArticleContent.onload = function () {
// The content is fully loaded by the browser : we can hide the spinner
$("#cachingAssets").html("Caching assets...");
document.getElementById('cachingAssets').innerHTML = 'Caching assets...';
document.getElementById('cachingAssets').style.display = 'none';
document.getElementById('searchingArticles').style.display = 'none';
// Set the requested appTheme
@ -1567,10 +1570,12 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys
iframeArticleContent.contentWindow.onunload = function () {
// remove eventListener to avoid memory leaks
iframeArticleContent.contentWindow.removeEventListener('keydown', focusPrefixOnHomeKey);
$("#articleList").empty();
$('#articleListHeaderMessage').empty();
var articleList = document.getElementById('articleList');
var articleListHeaderMessage = document.getElementById('articleListHeaderMessage');
while (articleList.firstChild) articleList.removeChild(articleList.firstChild);
while (articleListHeaderMessage.firstChild) articleListHeaderMessage.removeChild(articleListHeaderMessage.firstChild);
document.getElementById('articleListWithHeader').style.display = 'none';
$("#prefix").val("");
document.getElementById('prefix').value = '';
document.getElementById('searchingArticles').style.display = '';
};
}
@ -1722,10 +1727,12 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys
iframeArticleContent.onload = function() {
iframeArticleContent.onload = function(){};
$("#articleList").empty();
$('#articleListHeaderMessage').empty();
var articleList = document.getElementById('articleList');
var articleListHeaderMessage = document.getElementById('articleListHeaderMessage');
while (articleList.firstChild) articleList.removeChild(articleList.firstChild);
while (articleListHeaderMessage.firstChild) articleListHeaderMessage.removeChild(articleListHeaderMessage.firstChild);
document.getElementById('articleListWithHeader').style.display = 'none';
$("#prefix").val("");
document.getElementById('prefix').value = '';
var iframeContentDocument = iframeArticleContent.contentDocument;
if (!iframeContentDocument && window.location.protocol === 'file:') {
@ -1951,7 +1958,7 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys
// until all CSS content is available [kiwix-js #381]
function renderIfCSSFulfilled(title) {
if (cssFulfilled >= cssCount) {
$('#cachingAssets').html('Caching assets...');
document.getElementById('cachingAssets').innerHTML = 'Caching assets...';
document.getElementById('cachingAssets').style.display = 'none';
document.getElementById('searchingArticles').style.display = 'none';
document.getElementById('articleContent').style.display = '';

26
www/js/lib/uiUtil.js
View File

@ -406,9 +406,15 @@ define(rqDef, function(settingsStore) {
* Removes the animation effect between various sections
*/
function removeAnimationClasses() {
$('#about').removeClass('slideIn_L').removeClass('slideOut_R');
$('#configuration').removeClass('slideIn_L').removeClass('slideIn_R').removeClass('slideOut_L').removeClass('slideOut_R');
$('#articleContent').removeClass('slideIn_R').removeClass('slideOut_L');
var configuration = document.getElementById('configuration');
configuration.classList.remove('slideIn_L');
configuration.classList.remove('slideIn_R');
configuration.classList.remove('slideOut_L');
configuration.classList.remove('slideOut_R');
document.getElementById('about').classList.remove('slideIn_L');
document.getElementById('about').classList.remove('slideOut_R');
document.getElementById('articleContent').classList.remove('slideIn_R');
document.getElementById('articleContent').classList.remove('slideOut_L');
}
/**
@ -420,13 +426,13 @@ define(rqDef, function(settingsStore) {
function applyAnimationToSection(section) {
if (section == 'home') {
if (!$('#configuration').is(':hidden')) {
$('#configuration').addClass('slideOut_R');
document.getElementById('configuration').classList.add('slideOut_R');
setTimeout(function () {
document.getElementById('configuration').style.display = 'none';
}, 300);
}
if (!$('#about').is(':hidden')) {
$('#about').addClass('slideOut_R');
document.getElementById('about').classList.add('slideOut_R');
setTimeout(function () {
document.getElementById('about').style.display = 'none';
}, 300);
@ -443,8 +449,8 @@ define(rqDef, function(settingsStore) {
document.getElementById('about').style.display = 'none';
}, 300);
} else if (!$('#articleContent').is(':hidden')) {
$('#articleContent').addClass('slideOut_L');
$('#configuration').addClass('slideIn_L');
document.getElementById('configuration').classList.add('slideIn_L');
document.getElementById('articleContent').classList.add('slideOut_L');
setTimeout(function () {
document.getElementById('articleContent').style.display = 'none';
}, 300);
@ -454,18 +460,18 @@ define(rqDef, function(settingsStore) {
}, 300);
} else if (section == 'about') {
if (!$('#configuration').is(':hidden')) {
$('#configuration').addClass('slideOut_L');
document.getElementById('configuration').classList.add('slideOut_L');
setTimeout(function () {
document.getElementById('configuration').style.display = 'none';
}, 300);
}
if (!$('#articleContent').is(':hidden')) {
$('#articleContent').addClass('slideOut_L');
document.getElementById('articleContent').classList.add('slideOut_L');
setTimeout(function () {
document.getElementById('articleContent').style.display = 'none';
}, 300);
}
$('#about').addClass('slideIn_L');
document.getElementById('about').classList.add('slideIn_L');
setTimeout(function () {
document.getElementById('about').style.display = '';
}, 300);