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

Convert jQuery .on event listeners to their native JS equivalents #1035

Merged
merged 7 commits into from
Aug 8, 2023
Merged

Convert jQuery .on event listeners to their native JS equivalents #1035

Changes from 3 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
50ec9c9
[REFACTOR] Convert jQuery .on event listeners to their native JS equi…
Rishabhg71 Jul 25, 2023
437c101
[REFACTOR] Requested changes by @Jaifroid
Rishabhg71 Jul 27, 2023
f11fb9a
[FIX] forward button not working
Rishabhg71 Aug 2, 2023
293e981
Merge branch 'main' into main
Rishabhg71 Aug 7, 2023
08ff3ca
[REFACTOR] minor changes requested @jaifroid
Rishabhg71 Aug 7, 2023
d715412
[FIx] Broken radio for SW and Jquery select
Rishabhg71 Aug 8, 2023
3631e3b
Merge branch 'kiwix:main' into main
Rishabhg71 Aug 8, 2023
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
117 changes: 64 additions & 53 deletions www/js/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -247,12 +247,13 @@ function resizeIFrame () {
}, 100);
}
}
$(document).ready(resizeIFrame);
$(window).resize(resizeIFrame);
document.addEventListener('DOMContentLoaded', resizeIFrame);
window.addEventListener('resize', resizeIFrame);

// Define behavior of HTML elements
var searchArticlesFocused = false;
$('#searchArticles').on('click', function () {
const searchArticle = document.getElementById('searchArticles')
searchArticle.addEventListener('click', function () {
var prefix = document.getElementById('prefix').value;
// Do not initiate the same search if it is already in progress
if (appstate.search.prefix === prefix && !/^(cancelled|complete)$/.test(appstate.search.status)) return;
Expand All @@ -267,17 +268,16 @@ $('#searchArticles').on('click', function () {
// This flag is set to true in the mousedown event below
searchArticlesFocused = false;
});
$('#searchArticles').on('mousedown', function () {
searchArticle.addEventListener('mousedown', function () {
// We set the flag so that the blur event of #prefix can know that the searchArticles button has been clicked
searchArticlesFocused = true;
});
$('#formArticleSearch').on('submit', function () {
document.getElementById('formArticleSearch').addEventListener('submit', function () {
document.getElementById('searchArticles').click();
return false;
});
// Handle keyboard events in the prefix (article search) field
var keyPressHandled = false;
$('#prefix').on('keydown', function (e) {
document.getElementById('prefix').addEventListener('keydown', function (e) {
// If user presses Escape...
// IE11 returns "Esc" and the other browsers "Escape"; regex below matches both
if (/^Esc/.test(e.key)) {
Expand Down Expand Up @@ -328,57 +328,60 @@ $('#prefix').on('keydown', function (e) {
}
});
// Search for titles as user types characters
$('#prefix').on('keyup', function (e) {
const prefixElement = document.getElementById('prefix')
Rishabhg71 marked this conversation as resolved.
Show resolved Hide resolved
prefixElement.addEventListener('keyup', function (e) {
if (selectedArchive !== null && selectedArchive.isReady()) {
// Prevent processing by keyup event if we already handled the keypress in keydown event
if (keyPressHandled) { keyPressHandled = false; } else { onKeyUpPrefix(e); }
}
});
// Restore the search results if user goes back into prefix field
$('#prefix').on('focus', function () {
prefixElement.addEventListener('focus', function () {
if (document.getElementById('prefix').value !== '') { document.getElementById('articleListWithHeader').style.display = ''; }
});
// Hide the search results if user moves out of prefix field
$('#prefix').on('blur', function () {
prefixElement.addEventListener('blur', function () {
if (!searchArticlesFocused) {
appstate.search.status = 'cancelled';
document.getElementById('searchingArticles').style.display = 'none';
document.getElementById('articleListWithHeader').style.display = 'none';
}
});
$('#btnRandomArticle').on('click', function () {
document.getElementById('btnRandomArticle').addEventListener('click', function (event) {
event.preventDefault()
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 () {
document.getElementById('btnRescanDeviceStorage').addEventListener('click', function () {
searchForArchivesInStorage();
});
// Bottom bar :
$('#btnBack').on('click', function () {
document.getElementById('btnBack').addEventListener('click', function (event) {
event.preventDefault()
history.back();
return false;
});
$('#btnForward').on('click', function () {
document.getElementById('btnForward').addEventListener('click', function (event) {
event.preventDefault()
history.forward();
return false;
});
$('#btnHomeBottom').on('click', function () {

document.getElementById('btnHomeBottom').addEventListener('click', function (event) {
event.preventDefault()
document.getElementById('btnHome').click();
return false;
});
$('#btnTop').on('click', function () {
document.getElementById('btnTop').addEventListener('click', function (event) {
event.preventDefault()
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;
});
// Top menu :
$('#btnHome').on('click', function () {
document.getElementById('btnHome').addEventListener('click', function (event) {
// Highlight the selected section in the navbar
event.preventDefault()
Rishabhg71 marked this conversation as resolved.
Show resolved Hide resolved
document.getElementById('liHomeNav').setAttribute('class', 'active');
document.getElementById('liConfigureNav').setAttribute('class', '');
document.getElementById('liAboutNav').setAttribute('class', '');
Expand Down Expand Up @@ -414,9 +417,8 @@ $('#btnHome').on('click', function () {
}
// Use a timeout of 400ms because uiUtil.applyAnimationToSection uses a timeout of 300ms
setTimeout(resizeIFrame, 400);
return false;
});
$('#btnConfigure').on('click', function () {
document.getElementById('btnConfigure').addEventListener('click', function () {
Rishabhg71 marked this conversation as resolved.
Show resolved Hide resolved
// Highlight the selected section in the navbar
document.getElementById('liHomeNav').setAttribute('class', '');
document.getElementById('liConfigureNav').setAttribute('class', 'active');
Expand All @@ -441,9 +443,8 @@ $('#btnConfigure').on('click', function () {
uiUtil.checkUpdateStatus(appstate);
// Use a timeout of 400ms because uiUtil.applyAnimationToSection uses a timeout of 300ms
setTimeout(resizeIFrame, 400);
return false;
});
$('#btnAbout').on('click', function () {
document.getElementById('btnAbout').addEventListener('click', function () {
Rishabhg71 marked this conversation as resolved.
Show resolved Hide resolved
// Highlight the selected section in the navbar
document.getElementById('liHomeNav').setAttribute('class', '');
document.getElementById('liConfigureNav').setAttribute('class', '');
Expand All @@ -466,11 +467,12 @@ $('#btnAbout').on('click', function () {
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;
});
$('input:radio[name=contentInjectionMode]').on('change', function () {
// Do the necessary to enable or disable the Service Worker
setContentInjectionMode(this.value);
document.querySelectorAll('input[name="contentInjectionMode"][type="checkbox"]').forEach(function (element) {
Rishabhg71 marked this conversation as resolved.
Show resolved Hide resolved
element.addEventListener('change', function () {
// Do the necessary to enable or disable the Service Worker
setContentInjectionMode(this.value);
})
});
document.getElementById('useCanvasElementsCheck').addEventListener('change', function () {
if (this.checked) {
Expand Down Expand Up @@ -512,22 +514,30 @@ document.getElementById('disableDragAndDropCheck').addEventListener('change', fu
}
});
});
$('input:checkbox[name=hideActiveContentWarning]').on('change', function () {
params.hideActiveContentWarning = !!this.checked;
settingsStore.setItem('hideActiveContentWarning', params.hideActiveContentWarning, Infinity);
});
$('input:checkbox[name=showUIAnimations]').on('change', function () {
params.showUIAnimations = !!this.checked;
settingsStore.setItem('showUIAnimations', params.showUIAnimations, Infinity);
document.querySelectorAll('input[type="checkbox"][name=hideActiveContentWarning]').forEach(function (element) {
Rishabhg71 marked this conversation as resolved.
Show resolved Hide resolved
element.addEventListener('change', function () {
params.hideActiveContentWarning = !!this.checked;
settingsStore.setItem('hideActiveContentWarning', params.hideActiveContentWarning, Infinity);
})
});
$('input:checkbox[name=useHomeKeyToFocusSearchBar]').on('change', function () {
params.useHomeKeyToFocusSearchBar = !!this.checked;
settingsStore.setItem('useHomeKeyToFocusSearchBar', params.useHomeKeyToFocusSearchBar, Infinity);
switchHomeKeyToFocusSearchBar();
document.querySelectorAll('input[type="checkbox"][name=showUIAnimations]').forEach(function (element) {
element.addEventListener('change', function () {
params.showUIAnimations = !!this.checked;
settingsStore.setItem('showUIAnimations', params.showUIAnimations, Infinity);
})
});
$('input:checkbox[name=openExternalLinksInNewTabs]').on('change', function () {
params.openExternalLinksInNewTabs = !!this.checked;
settingsStore.setItem('openExternalLinksInNewTabs', params.openExternalLinksInNewTabs, Infinity);
document.querySelectorAll('input[type="checkbox"][name=useHomeKeyToFocusSearchBar]').forEach(function (element) {
element.addEventListener('change', function () {
params.useHomeKeyToFocusSearchBar = !!this.checked;
settingsStore.setItem('useHomeKeyToFocusSearchBar', params.useHomeKeyToFocusSearchBar, Infinity);
switchHomeKeyToFocusSearchBar();
})
})
document.querySelectorAll('input[type="checkbox"][name=openExternalLinksInNewTabs]').forEach(function (element) {
element.addEventListener('change', function () {
params.openExternalLinksInNewTabs = !!this.checked;
settingsStore.setItem('openExternalLinksInNewTabs', params.openExternalLinksInNewTabs, Infinity);
})
});
document.getElementById('appThemeSelect').addEventListener('change', function (e) {
params.appTheme = e.target.value;
Expand Down Expand Up @@ -612,7 +622,7 @@ function switchHomeKeyToFocusSearchBar () {
// in any other case listener gets removed on reloading of iFrame content
iframeContentWindow.addEventListener('keydown', focusPrefixOnHomeKey);
} else {
// When the feature is not active, remove event listener for window (outside iframe)
// When the feature is not active, remove event listener for window (outside iframe)
window.removeEventListener('keydown', focusPrefixOnHomeKey);
// if feature is deactivated and no zim content is loaded yet
iframeContentWindow.removeEventListener('keydown', focusPrefixOnHomeKey);
Expand Down Expand Up @@ -1196,8 +1206,7 @@ function populateDropDownListOfArchives (archiveDirectories) {
}
// Store the list of archives in the Settings Store, to avoid rescanning at each start
settingsStore.setItem('listOfArchives', archiveDirectories.join('|'), Infinity);

$('#archiveList').on('change', setLocalArchiveFromArchiveList);
document.getElementById('archiveList').addEventListener('change', setLocalArchiveFromArchiveList);
if (comboArchiveList.options.length > 0) {
var lastSelectedArchive = settingsStore.getItem('lastSelectedArchive');
if (lastSelectedArchive !== null && lastSelectedArchive !== undefined && lastSelectedArchive !== '') {
Expand Down Expand Up @@ -1497,12 +1506,14 @@ function populateListOfArticles (dirEntryArray, reportingSearch) {
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) {
// Cancel search immediately
appstate.search.status = 'cancelled';
handleTitleClick(e);
return false;
});
document.querySelectorAll('#articleList a').forEach(function (link) {
link.addEventListener('mousedown', function (e) {
// Cancel search immediately
appstate.search.status = 'cancelled';
handleTitleClick(e);
return false;
});
});
if (!stillSearching) document.getElementById('searchingArticles').style.display = 'none';
document.getElementById('articleListWithHeader').style.display = '';
}
Expand Down
Loading