From 9cc7cb9ff04576e33cd69420856c1afb6af7a472 Mon Sep 17 00:00:00 2001
From: Jaifroid <egk10@cam.ac.uk>
Date: Sat, 4 May 2019 20:22:17 +0100
Subject: [PATCH] Add support for area tag in jQuery mode #484 (#492)

Closes #484.
---
 www/js/app.js | 39 ++++++++++++++++++++-------------------
 1 file changed, 20 insertions(+), 19 deletions(-)

diff --git a/www/js/app.js b/www/js/app.js
index ac6a83a2..df09ee26 100644
--- a/www/js/app.js
+++ b/www/js/app.js
@@ -940,43 +940,44 @@ define(['jquery', 'zimArchiveLoader', 'util', 'uiUtil', 'cookies','abstractFiles
             var escapedUrl = encodeURIComponent(dirEntry.url).replace(/([\\$^.|?*+\/()[{])/g, '\\$1');
             // Pattern to match a local anchor in an href even if prefixed by escaped url; will also match # on its own
             var regexpLocalAnchorHref = new RegExp('^(?:#|' + escapedUrl + '#)([^#]*$)');
-            $('#articleContent').contents().find('body').find('a').each(function () {
+            var iframe = iframeArticleContent.contentDocument;
+            Array.prototype.slice.call(iframe.querySelectorAll('a, area')).forEach(function (anchor) { 
                 // Attempts to access any properties of 'this' with malformed URLs causes app crash in Edge/UWP [kiwix-js #430]
                 try {
-                    var testHref = this.href;
+                    var testHref = anchor.href;
                 } catch (err) {
-                    console.error("Malformed href caused error:" + err.message);
+                    console.error('Malformed href caused error:' + err.message);
                     return;
                 }
-                var href = this.getAttribute('href');
+                var href = anchor.getAttribute('href');
                 if (href === null || href === undefined) return;
                 // Compute current link's url (with its namespace), if applicable
-                // NB We need to access 'this.href' here because, unlike 'this.getAttribute("href")', it contains the fully qualified URL [kiwix-js #432]
-                var zimUrl = regexpZIMUrlWithNamespace.test(this.href) ? this.href.match(regexpZIMUrlWithNamespace)[1] : '';
+                // NB We need to access 'anchor.href' here because, unlike 'anchor.getAttribute("href")', it contains the fully qualified URL [kiwix-js #432]
+                var zimUrl = regexpZIMUrlWithNamespace.test(anchor.href) ? anchor.href.match(regexpZIMUrlWithNamespace)[1] : '';
                 if (href.length === 0) {
                     // It's a link with an empty href, pointing to the current page.
                     // Because of the base tag, we need to modify it
-                    $(this).on('click', function (e) {
-                        return false;
+                    anchor.addEventListener('click', function (e) {
+                        e.preventDefault();
                     });
                 } else if (regexpLocalAnchorHref.test(href)) {
                     // It's an anchor link : we need to make it work with javascript because of the base tag
                     var anchorRef = href.replace(regexpLocalAnchorHref, '$1');
                     // DEV: If jQuery mode ever supports JS-in-the-ZIM, the check for an onclick event may need to be revisited
-                    var onClickAttr = this.getAttribute('onclick');
-                    $(this).on('click', function (e) {
+                    var onClickAttr = anchor.getAttribute('onclick');
+                    anchor.addEventListener('click', function (e) {
                         var iframeWindow = document.getElementById('articleContent').contentWindow;
                         if (anchorRef)
                             iframeWindow.location.hash = anchorRef;
                         else if (!onClickAttr)
                             // It's just a single # and there is no onclick in the HTML, so scroll to top
                             iframeWindow.scrollTo({ top: 0, behavior: 'smooth' });
-                        return false;
+                        e.preventDefault();
                     });
-                } else if (this.protocol !== currentProtocol ||
-                    this.host !== currentHost) {
+                } else if (anchor.protocol !== currentProtocol ||
+                    anchor.host !== currentHost) {
                     // It's an external URL : we should open it in a new tab
-                    this.target = "_blank";
+                    anchor.target = '_blank';
                 } else {
                     // It's a link to an article or file in the ZIM
                     var uriComponent = uiUtil.removeUrlParameters(zimUrl);
@@ -988,18 +989,18 @@ define(['jquery', 'zimArchiveLoader', 'util', 'uiUtil', 'cookies','abstractFiles
                     // For Boolean values, getAttribute can return any of the following: download="" download="download" download="true"
                     // So we need to test hasAttribute first: see https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute
                     // However, we cannot rely on the download attribute having been set, so we also need to test for known download file types
-                    var isDownloadableLink = this.hasAttribute('download') || regexpDownloadLinks.test(href);
+                    var isDownloadableLink = anchor.hasAttribute('download') || regexpDownloadLinks.test(href);
                     if (isDownloadableLink) {
-                        downloadAttrValue = this.getAttribute('download');
+                        downloadAttrValue = anchor.getAttribute('download');
                         // Normalize the value to a true Boolean or a filename string or true if there is no download attribute
                         downloadAttrValue = /^(download|true|\s*)$/i.test(downloadAttrValue) || downloadAttrValue || true;
-                        contentType = this.getAttribute('type');
+                        contentType = anchor.getAttribute('type');
                     }    
                     // Add an onclick event to extract this article or file from the ZIM
                     // instead of following the link
-                    $(this).on('click', function (e) {
+                    anchor.addEventListener('click', function (e) {
                         goToArticle(decodedURL, downloadAttrValue, contentType);
-                        return false;
+                        e.preventDefault();
                     });
                 }
             });