From 7f8476d136c01e060e4e183743ab906e01d37d3a Mon Sep 17 00:00:00 2001 From: Dheeraj Lalwani Date: Tue, 22 Nov 2022 19:18:02 +0530 Subject: [PATCH] Replace `.click()`, `.focus()` and `.attr()` jQuery functions with equivalent native JS #919 (#925) Signed off by @dheerajdlalwani --- www/js/app.js | 91 +++++++++++++++++++++++++++------------------------ 1 file changed, 48 insertions(+), 43 deletions(-) diff --git a/www/js/app.js b/www/js/app.js index 19ff515cc..df9d41a95 100644 --- a/www/js/app.js +++ b/www/js/app.js @@ -268,7 +268,7 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys e.preventDefault(); e.stopPropagation(); document.getElementById('articleListWithHeader').style.display = 'none'; - $('#articleContent').focus(); + document.getElementById('articleContent').focus(); keyPressHandled = true; } // Arrow-key selection code adapted from https://stackoverflow.com/a/14747926/9727685 @@ -354,7 +354,7 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys return false; }); $('#btnHomeBottom').on('click', function() { - $('#btnHome').click(); + document.getElementById('btnHome').click(); return false; }); $('#btnTop').on('click', function() { @@ -365,9 +365,9 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys // Top menu : $('#btnHome').on('click', function() { // Highlight the selected section in the navbar - $('#liHomeNav').attr("class","active"); - $('#liConfigureNav').attr("class",""); - $('#liAboutNav').attr("class",""); + document.getElementById('liHomeNav').setAttribute('class', 'active'); + document.getElementById('liConfigureNav').setAttribute('class', ''); + document.getElementById('liAboutNav').setAttribute('class', ''); $('.navbar-collapse').collapse('hide'); // Show the selected content in the page uiUtil.removeAnimationClasses(); @@ -382,13 +382,18 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys document.getElementById('formArticleSearch').style.display = ''; document.getElementById('welcomeText').style.display = ''; // Give the focus to the search field, and clean up the page contents - $("#prefix").val(""); - $('#prefix').focus(); - $("#articleList").empty(); - $('#articleListHeaderMessage').empty(); + document.getElementById('prefix').value = ''; + document.getElementById('prefix').focus(); + 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('searchingArticles').style.display = 'none'; document.getElementById('articleContent').style.display = 'none'; - $("#articleContent").contents().empty(); + // Empty and purge the article contents + let articleContent = document.getElementById('articleContent'); + let articleContentDoc = articleContent ? articleContent.contentDocument : null; + while (articleContentDoc.firstChild) articleContentDoc.removeChild(articleContentDoc.firstChild); if (selectedArchive !== null && selectedArchive.isReady()) { document.getElementById('welcomeText').style.display = 'none'; goToMainArticle(); @@ -399,14 +404,14 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys }); $('#btnConfigure').on('click', function() { // Highlight the selected section in the navbar - $('#liHomeNav').attr("class",""); - $('#liConfigureNav').attr("class","active"); - $('#liAboutNav').attr("class",""); + document.getElementById('liHomeNav').setAttribute('class', ''); + document.getElementById('liConfigureNav').setAttribute('class', 'active'); + document.getElementById('liAboutNav').setAttribute('class', ''); $('.navbar-collapse').collapse('hide'); // Show the selected content in the page uiUtil.removeAnimationClasses(); if (params.showUIAnimations) { - uiUtil.applyAnimationToSection("config"); + uiUtil.applyAnimationToSection('config'); } else { document.getElementById('about').style.display = 'none'; document.getElementById('configuration').style.display = ''; @@ -426,9 +431,9 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys }); $('#btnAbout').on('click', function() { // Highlight the selected section in the navbar - $('#liHomeNav').attr("class",""); - $('#liConfigureNav').attr("class",""); - $('#liAboutNav').attr("class","active"); + document.getElementById('liHomeNav').setAttribute('class', ''); + document.getElementById('liConfigureNav').setAttribute('class', ''); + document.getElementById('liAboutNav').setAttribute('class', 'active'); $('.navbar-collapse').collapse('hide'); // Show the selected content in the page uiUtil.removeAnimationClasses(); @@ -1061,7 +1066,7 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys } function searchForArchivesInStorage() { // If DeviceStorage is available, we look for archives in it - $("#btnConfigure").click(); + document.getElementById('btnConfigure').click(); document.getElementById('scanningForArchives').style.display = ''; zimArchiveLoader.scanForArchives(storages, populateDropDownListOfArchives, function () { // callbackError function is called in case of an error @@ -1089,7 +1094,7 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys // Archive files are already selected, setLocalArchiveFromFileSelect(); } else { - $("#btnConfigure").click(); + document.getElementById('btnConfigure').click(); } } @@ -1114,7 +1119,7 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys if (titleSearch !== appstate.search.prefix) { searchDirEntriesFromPrefix(titleSearch); } else { - $('#prefix').focus(); + document.getElementById('prefix').focus(); } } } @@ -1131,33 +1136,33 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys comboArchiveList.options.length = 0; for (var i = 0; i < archiveDirectories.length; i++) { var archiveDirectory = archiveDirectories[i]; - if (archiveDirectory === "/") { - uiUtil.systemAlert("It looks like you have put some archive files at the root of your sdcard (or internal storage). Please move them in a subdirectory", "Error: invalid archive files location"); + if (archiveDirectory === '/') { + uiUtil.systemAlert('It looks like you have put some archive files at the root of your sdcard (or internal storage). Please move them in a subdirectory', 'Error: invalid archive files location'); } else { comboArchiveList.options[i] = new Option(archiveDirectory, archiveDirectory); } } // Store the list of archives in the Settings Store, to avoid rescanning at each start - settingsStore.setItem("listOfArchives", archiveDirectories.join('|'), Infinity); + settingsStore.setItem('listOfArchives', archiveDirectories.join('|'), Infinity); $('#archiveList').on('change', setLocalArchiveFromArchiveList); if (comboArchiveList.options.length > 0) { - var lastSelectedArchive = settingsStore.getItem("lastSelectedArchive"); - if (lastSelectedArchive !== null && lastSelectedArchive !== undefined && lastSelectedArchive !== "") { + var lastSelectedArchive = settingsStore.getItem('lastSelectedArchive'); + 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); + $('#archiveList').val(lastSelectedArchive); } } // Set the localArchive as the last selected (or the first one if it has never been selected) setLocalArchiveFromArchiveList(); } else { - uiUtil.systemAlert("Welcome to Kiwix! This application needs at least a ZIM file in your SD-card (or internal storage). Please download one and put it on the device (see About section). Also check that your device is not connected to a computer through USB device storage (which often locks the SD-card content)", "Welcome") + uiUtil.systemAlert('Welcome to Kiwix! This application needs at least a ZIM file in your SD-card (or internal storage). Please download one and put it on the device (see About section). Also check that your device is not connected to a computer through USB device storage (which often locks the SD-card content)', 'Welcome') .then(function () { - $("#btnAbout").click(); - var isAndroid = (navigator.userAgent.indexOf("Android") !== -1); + document.getElementById('btnAbout').click(); + var isAndroid = (navigator.userAgent.indexOf('Android') !== -1); if (isAndroid) { - uiUtil.systemAlert("You seem to be using an Android device with DeviceStorage API. That must be a quite old Firefox version because this API has been removed in 2016. Be aware that there was a bug on Firefox, that prevents finding Wikipedia archives in a SD-card (at least on some devices). Please put the archive in the internal storage if the application can't find it.", "Warning"); + uiUtil.systemAlert("You seem to be using an Android device with DeviceStorage API. That must be a quite old Firefox version because this API has been removed in 2016. Be aware that there was a bug on Firefox, that prevents finding Wikipedia archives in a SD-card (at least on some devices). Please put the archive in the internal storage if the application can't find it.", 'Warning'); } }); } @@ -1184,7 +1189,7 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys } } if (selectedStorage === null) { - uiUtil.systemAlert("Unable to find which device storage corresponds to directory " + archiveDirectory, "Error: no matching storage"); + uiUtil.systemAlert('Unable to find which device storage corresponds to directory ' + archiveDirectory, 'Error: no matching storage'); } } else { // This happens when the archiveDirectory is not prefixed by the name of the storage @@ -1193,16 +1198,16 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys if (storages.length === 1) { selectedStorage = storages[0]; } else { - uiUtil.systemAlert("Something weird happened with the DeviceStorage API : found a directory without prefix : " - + archiveDirectory + ", but there were " + storages.length - + " storages found with getDeviceStorages instead of 1", "Error: unprefixed directory"); + uiUtil.systemAlert('Something weird happened with the DeviceStorage API : found a directory without prefix : ' + + archiveDirectory + ', but there were ' + storages.length + + ' storages found with getDeviceStorages instead of 1', 'Error: unprefixed directory'); } } resetCssCache(); selectedArchive = zimArchiveLoader.loadArchiveFromDeviceStorage(selectedStorage, archiveDirectory, function () { - settingsStore.setItem("lastSelectedArchive", archiveDirectory, Infinity); + settingsStore.setItem('lastSelectedArchive', archiveDirectory, Infinity); // The archive is set : go back to home page to start searching - $("#btnHome").click(); + document.getElementById('btnHome').click(); }, function (message, label) { // callbackError which is called in case of an error uiUtil.systemAlert(message, label); @@ -1292,7 +1297,7 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys resetCssCache(); selectedArchive = zimArchiveLoader.loadArchiveFromFiles(files, function () { // The archive is set : go back to home page to start searching - $("#btnHome").click(); + document.getElementById('btnHome').click(); document.getElementById('downloadInstruction').style.display = 'none'; }, function (message, label) { // callbackError which is called in case of an error @@ -1362,9 +1367,9 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys window.clearTimeout(window.timeoutKeyUpPrefix); } window.timeoutKeyUpPrefix = window.setTimeout(function () { - var prefix = $("#prefix").val(); + var prefix = document.getElementById('prefix').value; if (prefix && prefix.length > 0 && prefix !== appstate.search.prefix) { - $('#searchArticles').click(); + document.getElementById('searchArticles').click(); } }, 500); } @@ -1390,9 +1395,9 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys document.getElementById('searchingArticles').style.display = 'none'; // We have to remove the focus from the search field, // so that the keyboard does not stay above the message - $("#searchArticles").focus(); - uiUtil.systemAlert("Archive not set : please select an archive", "No archive selected").then(function () { - $("#btnConfigure").click(); + document.getElementById('searchArticles').focus(); + uiUtil.systemAlert('Archive not set : please select an archive', 'No archive selected').then(function () { + document.getElementById('btnConfigure').click(); }); } } @@ -2110,7 +2115,7 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys } else { // Showing the relevant error message and redirecting to config page for adding the ZIM file uiUtil.systemAlert('Archive not set : please select an archive', 'No archive selected').then(function () { - $('#btnConfigure').click(); + document.getElementById('btnConfigure').click(); }); } }