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