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

Converts jQuery statements to native JS and regularize quotation marks #927

Merged
merged 8 commits into from
Nov 27, 2022
Merged

Converts jQuery statements to native JS and regularize quotation marks #927

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
f4b882b
Converts jQuery statements to native JS and regularize quotation marks
dheerajdlalwani Nov 23, 2022
184189e
Change `.scrollTop(0)` to native JS and rearrange code
dheerajdlalwani Nov 25, 2022
85061a6
Remove console logs and make spaces consistent
dheerajdlalwani Nov 26, 2022
30a36f7
Add a missing space
dheerajdlalwani Nov 26, 2022
93e245e
Fix IE 11 animation issue
dheerajdlalwani Nov 26, 2022
946d8b3
Make code more concise
dheerajdlalwani Nov 26, 2022
22bb1df
Change all let variables to var variables
dheerajdlalwani Nov 26, 2022
31a4e10
Change let to var
dheerajdlalwani Nov 27, 2022
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
90 changes: 49 additions & 41 deletions www/js/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand All @@ -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() {
Jaifroid marked this conversation as resolved.
Show resolved Hide resolved
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() {
Jaifroid marked this conversation as resolved.
Show resolved Hide resolved
searchForArchivesInStorage();
});
// Bottom bar :
Expand All @@ -358,7 +358,9 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys
return false;
});
$('#btnTop').on('click', function() {
$("#articleContent").contents().scrollTop(0);
let articleContent = document.getElementById('articleContent');
console.log(articleContent.contentWindow);
Jaifroid marked this conversation as resolved.
Show resolved Hide resolved
articleContent.contentWindow.scrollTo({top:0,behavior: 'smooth'});
Jaifroid marked this conversation as resolved.
Show resolved Hide resolved
// We return true, so that the link to #top is still triggered (useful in the About section)
return true;
});
Expand Down Expand Up @@ -421,7 +423,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);
Expand Down Expand Up @@ -449,7 +451,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;
Expand Down Expand Up @@ -630,32 +632,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';
let messageChannelStatus = document.getElementById('messageChannelStatus');
let 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');
Expand Down Expand Up @@ -864,7 +868,8 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys
return;
}
if (!isServiceWorkerReady()) {
$('#serviceWorkerStatus').html("ServiceWorker API available : trying to register it...");
let serviceWorkerStatus = document.getElementById('serviceWorkerStatus');
Jaifroid marked this conversation as resolved.
Show resolved Hide resolved
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;
Expand Down Expand Up @@ -1103,8 +1108,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');
Expand All @@ -1115,7 +1119,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 {
Expand Down Expand Up @@ -1151,7 +1155,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) {
Jaifroid marked this conversation as resolved.
Show resolved Hide resolved
$('#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)
Expand All @@ -1172,7 +1176,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
Expand Down Expand Up @@ -1411,7 +1415,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;
Expand All @@ -1425,9 +1429,9 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys
);
}

articleListHeaderMessageDiv.html(message);
articleListHeaderMessageDiv.innerHTML = message;
Jaifroid marked this conversation as resolved.
Show resolved Hide resolved

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++) {
Expand All @@ -1440,7 +1444,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) {
Expand Down Expand Up @@ -1526,7 +1530,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
Expand Down Expand Up @@ -1567,10 +1571,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();
let articleList = document.getElementById('articleList');
let 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 = '';
};
}
Expand Down Expand Up @@ -1722,10 +1728,12 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys

iframeArticleContent.onload = function() {
iframeArticleContent.onload = function(){};
$("#articleList").empty();
$('#articleListHeaderMessage').empty();
let articleList = document.getElementById('articleList');
let 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:') {
Expand Down Expand Up @@ -1951,7 +1959,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 = '';
Expand Down
20 changes: 10 additions & 10 deletions www/js/lib/uiUtil.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -406,9 +406,9 @@ 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');
document.getElementById('about').classList.remove('slideIn_L','slideOut_R');
Jaifroid marked this conversation as resolved.
Show resolved Hide resolved
document.getElementById('configuration').classList.remove('slideIn_L', 'slideIn_R', 'slideOut_L', 'slideOut_R');
document.getElementById('articleContent').classList.remove('slideIn_R', 'slideOut_L');
}

/**
Expand All @@ -420,13 +420,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);
Expand All @@ -443,8 +443,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);
Expand All @@ -454,18 +454,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);
Expand Down