mirror of
https://github.com/kiwix/kiwix-js.git
synced 2025-09-23 04:28:30 -04:00
Fixes for jQuery/ServiceWorker switch, jQuery mode, and workaround for javascript/css content in ServiceWorker mode
This commit is contained in:
mossroy
parent
a4feca9930
commit
369f8a9b0f
@ -113,7 +113,19 @@ function(util, utf8) {
|
|||||||
else if (regexpCSS.test(titleName)) {
|
else if (regexpCSS.test(titleName)) {
|
||||||
contentType = 'image/css';
|
contentType = 'image/css';
|
||||||
}
|
}
|
||||||
reject("temporarily refuse javascript and css dependencies");
|
var responseInit = {
|
||||||
|
status: 200,
|
||||||
|
statusText: 'OK',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': contentType
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
var httpResponse = new Response(';', responseInit);
|
||||||
|
|
||||||
|
// TODO : temporary before the backend actually sends a proper content
|
||||||
|
resolve(httpResponse);
|
||||||
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Let's instanciate a new messageChannel, to allow app.s to give us the content
|
// Let's instanciate a new messageChannel, to allow app.s to give us the content
|
||||||
|
|||||||
260
www/js/app.js
260
www/js/app.js
@ -363,7 +363,8 @@ define(['jquery', 'abstractBackend', 'util', 'cookies','geometry','osabstraction
|
|||||||
console.log("init message sent to ServiceWorker");
|
console.log("init message sent to ServiceWorker");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
$('input:radio[name=contentInjectionMode]').filter('[value="' + value + '"]').attr('checked', true);
|
$('input:radio[name=contentInjectionMode]').prop('checked', false);
|
||||||
|
$('input:radio[name=contentInjectionMode]').filter('[value="' + value + '"]').prop('checked', true);
|
||||||
contentInjectionMode = value;
|
contentInjectionMode = value;
|
||||||
// Save the value in a cookie, so that to be able to keep it after a reload/restart
|
// Save the value in a cookie, so that to be able to keep it after a reload/restart
|
||||||
cookies.setItem('lastContentInjectionMode', value, Infinity);
|
cookies.setItem('lastContentInjectionMode', value, Infinity);
|
||||||
@ -388,6 +389,9 @@ define(['jquery', 'abstractBackend', 'util', 'cookies','geometry','osabstraction
|
|||||||
if (lastContentInjectionMode) {
|
if (lastContentInjectionMode) {
|
||||||
setContentInjectionMode(lastContentInjectionMode);
|
setContentInjectionMode(lastContentInjectionMode);
|
||||||
}
|
}
|
||||||
|
else {
|
||||||
|
setContentInjectionMode('jquery');
|
||||||
|
}
|
||||||
|
|
||||||
var serviceWorkerRegistration = null;
|
var serviceWorkerRegistration = null;
|
||||||
|
|
||||||
@ -790,13 +794,13 @@ define(['jquery', 'abstractBackend', 'util', 'cookies','geometry','osabstraction
|
|||||||
$('#titleListHeaderMessage').empty();
|
$('#titleListHeaderMessage').empty();
|
||||||
$('#suggestEnlargeMaxDistance').hide();
|
$('#suggestEnlargeMaxDistance').hide();
|
||||||
$('#suggestReduceMaxDistance').hide();
|
$('#suggestReduceMaxDistance').hide();
|
||||||
|
$("#prefix").val("");
|
||||||
findTitleFromTitleIdAndLaunchArticleRead(titleId);
|
findTitleFromTitleIdAndLaunchArticleRead(titleId);
|
||||||
var title = selectedArchive.parseTitleId(titleId);
|
var title = selectedArchive.parseTitleId(titleId);
|
||||||
pushBrowserHistoryState(title.name());
|
pushBrowserHistoryState(title.name());
|
||||||
$("#prefix").val("");
|
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Creates an instance of title from given titleId (including resolving redirects),
|
* Creates an instance of title from given titleId (including resolving redirects),
|
||||||
@ -897,137 +901,145 @@ define(['jquery', 'abstractBackend', 'util', 'cookies','geometry','osabstraction
|
|||||||
// Scroll the iframe to its top
|
// Scroll the iframe to its top
|
||||||
$("#articleContent").contents().scrollTop(0);
|
$("#articleContent").contents().scrollTop(0);
|
||||||
|
|
||||||
// Apply Mediawiki CSS only when it's an Evopedia archive
|
|
||||||
if (selectedArchive.needsWikimediaCSS() === true) {
|
|
||||||
$('#articleContent').contents().find('head').empty();
|
|
||||||
var currentHref = $(location).attr('href');
|
|
||||||
var currentPath = regexpPath.exec(currentHref)[1];
|
|
||||||
$('#articleContent').contents().find('head').append("<link rel='stylesheet' type='text/css' href='" + currentPath + "css/mediawiki-main.css' id='mediawiki-stylesheet' />");
|
|
||||||
}
|
|
||||||
|
|
||||||
// Display the article inside the web page.
|
// Display the article inside the web page.
|
||||||
$('#articleContent').contents().find('body').html(htmlArticle);
|
var ifrm = document.getElementById('articleContent');
|
||||||
|
ifrm = (ifrm.contentWindow) ? ifrm.contentWindow : (ifrm.contentDocument.document) ? ifrm.contentDocument.document : ifrm.contentDocument;
|
||||||
|
ifrm.document.open();
|
||||||
|
ifrm.document.write(htmlArticle);
|
||||||
|
ifrm.document.close();
|
||||||
|
|
||||||
// If the ServiceWorker is not useable, we need to fallback to parse the DOM
|
//$(document.getElementById('#articleContent').contentWindow.document).load(function () {
|
||||||
// to inject math images, and replace some links with javascript calls
|
$('iframe#articleContent').load(function() {
|
||||||
if (contentInjectionMode === 'jquery') {
|
// Apply Mediawiki CSS only when it's an Evopedia archive
|
||||||
|
if (selectedArchive.needsWikimediaCSS() === true) {
|
||||||
|
var currentHref = $(location).attr('href');
|
||||||
|
var currentPath = regexpPath.exec(currentHref)[1];
|
||||||
|
$('#articleContent').contents().find('head').append("<link rel='stylesheet' type='text/css' href='" + currentPath + "css/mediawiki-main.css' id='mediawiki-stylesheet' />");
|
||||||
|
}
|
||||||
|
|
||||||
// Convert links into javascript calls
|
// If the ServiceWorker is not useable, we need to fallback to parse the DOM
|
||||||
$('#articleContent').contents().find('body').find('a').each(function() {
|
// to inject math images, and replace some links with javascript calls
|
||||||
// Store current link's url
|
if (contentInjectionMode === 'jquery') {
|
||||||
var url = $(this).attr("href");
|
|
||||||
if (url === null || url === undefined) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
var lowerCaseUrl = url.toLowerCase();
|
|
||||||
var cssClass = $(this).attr("class");
|
|
||||||
|
|
||||||
if (cssClass === "new") {
|
// Convert links into javascript calls
|
||||||
// It's a link to a missing article : display a message
|
$('#articleContent').contents().find('body').find('a').each(function() {
|
||||||
$(this).on('click', function(e) {
|
// Store current link's url
|
||||||
alert("Missing article in Wikipedia");
|
var url = $(this).attr("href");
|
||||||
return false;
|
if (url === null || url === undefined) {
|
||||||
});
|
return;
|
||||||
}
|
|
||||||
else if (url.slice(0, 1) === "#") {
|
|
||||||
// It's an anchor link : do nothing
|
|
||||||
}
|
|
||||||
else if (url.substring(0, 4) === "http") {
|
|
||||||
// It's an external link : open in a new tab
|
|
||||||
$(this).attr("target", "_blank");
|
|
||||||
}
|
|
||||||
else if (url.match(regexpOtherLanguage)) {
|
|
||||||
// It's a link to another language : change the URL to the online version of wikipedia
|
|
||||||
// The regular expression extracts $1 as the language, and $2 as the title name
|
|
||||||
var onlineWikipediaUrl = url.replace(regexpOtherLanguage, "https://$1.wikipedia.org/wiki/$2");
|
|
||||||
$(this).attr("href", onlineWikipediaUrl);
|
|
||||||
// Open in a new tab
|
|
||||||
$(this).attr("target", "_blank");
|
|
||||||
}
|
|
||||||
else if (url.match(regexpImageLink)
|
|
||||||
&& (util.endsWith(lowerCaseUrl, ".png")
|
|
||||||
|| util.endsWith(lowerCaseUrl, ".svg")
|
|
||||||
|| util.endsWith(lowerCaseUrl, ".jpg")
|
|
||||||
|| util.endsWith(lowerCaseUrl, ".jpeg"))) {
|
|
||||||
// It's a link to a file of wikipedia : change the URL to the online version and open in a new tab
|
|
||||||
var onlineWikipediaUrl = url.replace(regexpImageLink, "https://" + selectedArchive._language + ".wikipedia.org/wiki/File:$1");
|
|
||||||
$(this).attr("href", onlineWikipediaUrl);
|
|
||||||
$(this).attr("target", "_blank");
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
// It's a link to another article
|
|
||||||
// Add an onclick event to go to this article
|
|
||||||
// instead of following the link
|
|
||||||
if (url.length>=2 && url.substring(0, 2) === "./") {
|
|
||||||
url = url.substring(2);
|
|
||||||
}
|
}
|
||||||
$(this).on('click', function(e) {
|
var lowerCaseUrl = url.toLowerCase();
|
||||||
var titleName = decodeURIComponent(url);
|
var cssClass = $(this).attr("class");
|
||||||
pushBrowserHistoryState(titleName);
|
|
||||||
goToArticle(titleName);
|
|
||||||
return false;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Load images
|
if (cssClass === "new") {
|
||||||
$('#articleContent').contents().find('body').find('img').each(function() {
|
// It's a link to a missing article : display a message
|
||||||
var image = $(this);
|
$(this).on('click', function(e) {
|
||||||
var m = image.attr("src").match(regexpMathImageUrl);
|
alert("Missing article in Wikipedia");
|
||||||
if (m) {
|
return false;
|
||||||
// It's a math image (Evopedia archive)
|
|
||||||
selectedArchive.loadMathImage(m[1], function(data) {
|
|
||||||
image.attr("src", 'data:image/png;base64,' + data);
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
// It's a standard image contained in the ZIM file
|
|
||||||
var imageMatch = image.attr("src").match(regexpImageUrl);
|
|
||||||
if (imageMatch) {
|
|
||||||
selectedArchive.getTitleByName(imageMatch[1]).then(function(title) {
|
|
||||||
selectedArchive.readBinaryFile(title, function (readableTitleName, content) {
|
|
||||||
// TODO : add the complete MIME-type of the image (as read from the ZIM file)
|
|
||||||
image.attr("src", 'data:image;base64,' + util.uint8ArrayToBase64(content));
|
|
||||||
});
|
});
|
||||||
}).fail(function () {
|
}
|
||||||
console.error("could not find title for image:" + imageMatch[1]);
|
else if (url.slice(0, 1) === "#") {
|
||||||
});
|
// It's an anchor link : do nothing
|
||||||
}
|
}
|
||||||
}
|
else if (url.substring(0, 4) === "http") {
|
||||||
});
|
// It's an external link : open in a new tab
|
||||||
|
$(this).attr("target", "_blank");
|
||||||
// Load CSS content
|
}
|
||||||
$('#articleContent').contents().find('body').find('link[rel=stylesheet]').each(function() {
|
else if (url.match(regexpOtherLanguage)) {
|
||||||
var link = $(this);
|
// It's a link to another language : change the URL to the online version of wikipedia
|
||||||
var hrefMatch = link.attr("href").match(regexpMetadataUrl);
|
// The regular expression extracts $1 as the language, and $2 as the title name
|
||||||
if (hrefMatch) {
|
var onlineWikipediaUrl = url.replace(regexpOtherLanguage, "https://$1.wikipedia.org/wiki/$2");
|
||||||
// It's a CSS file contained in the ZIM file
|
$(this).attr("href", onlineWikipediaUrl);
|
||||||
selectedArchive.getTitleByName(hrefMatch[1]).then(function(title) {
|
// Open in a new tab
|
||||||
selectedArchive.readBinaryFile(title, function (readableTitleName, content) {
|
$(this).attr("target", "_blank");
|
||||||
link.attr("href", 'data:text/css;charset=UTF-8,' + encodeURIComponent(util.uintToString(content)));
|
}
|
||||||
});
|
else if (url.match(regexpImageLink)
|
||||||
}).fail(function () {
|
&& (util.endsWith(lowerCaseUrl, ".png")
|
||||||
console.error("could not find title for CSS : " + hrefMatch[1]);
|
|| util.endsWith(lowerCaseUrl, ".svg")
|
||||||
|
|| util.endsWith(lowerCaseUrl, ".jpg")
|
||||||
|
|| util.endsWith(lowerCaseUrl, ".jpeg"))) {
|
||||||
|
// It's a link to a file of wikipedia : change the URL to the online version and open in a new tab
|
||||||
|
var onlineWikipediaUrl = url.replace(regexpImageLink, "https://" + selectedArchive._language + ".wikipedia.org/wiki/File:$1");
|
||||||
|
$(this).attr("href", onlineWikipediaUrl);
|
||||||
|
$(this).attr("target", "_blank");
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
// It's a link to another article
|
||||||
|
// Add an onclick event to go to this article
|
||||||
|
// instead of following the link
|
||||||
|
if (url.length>=2 && url.substring(0, 2) === "./") {
|
||||||
|
url = url.substring(2);
|
||||||
|
}
|
||||||
|
$(this).on('click', function(e) {
|
||||||
|
var titleName = decodeURIComponent(url);
|
||||||
|
pushBrowserHistoryState(titleName);
|
||||||
|
goToArticle(titleName);
|
||||||
|
return false;
|
||||||
|
});
|
||||||
|
}
|
||||||
});
|
});
|
||||||
}
|
|
||||||
});
|
// Load images
|
||||||
|
$('#articleContent').contents().find('body').find('img').each(function() {
|
||||||
// Load Javascript content
|
var image = $(this);
|
||||||
$('#articleContent').contents().find('body').find('script').each(function() {
|
var m = image.attr("src").match(regexpMathImageUrl);
|
||||||
var script = $(this);
|
if (m) {
|
||||||
var srcMatch = script.attr("src").match(regexpMetadataUrl);
|
// It's a math image (Evopedia archive)
|
||||||
// TODO check that the type of the script is text/javascript or application/javascript
|
selectedArchive.loadMathImage(m[1], function(data) {
|
||||||
if (srcMatch) {
|
image.attr("src", 'data:image/png;base64,' + data);
|
||||||
// It's a Javascript file contained in the ZIM file
|
});
|
||||||
selectedArchive.getTitleByName(srcMatch[1]).then(function(title) {
|
} else {
|
||||||
selectedArchive.readBinaryFile(title, function (readableTitleName, content) {
|
// It's a standard image contained in the ZIM file
|
||||||
script.attr("src", 'data:text/javascript;charset=UTF-8,' + encodeURIComponent(util.uintToString(content)));
|
var imageMatch = image.attr("src").match(regexpImageUrl);
|
||||||
});
|
if (imageMatch) {
|
||||||
}).fail(function () {
|
selectedArchive.getTitleByName(imageMatch[1]).then(function(title) {
|
||||||
console.error("could not find title for javascript : " + srcMatch[1]);
|
selectedArchive.readBinaryFile(title, function (readableTitleName, content) {
|
||||||
|
// TODO : add the complete MIME-type of the image (as read from the ZIM file)
|
||||||
|
image.attr("src", 'data:image;base64,' + util.uint8ArrayToBase64(content));
|
||||||
|
});
|
||||||
|
}).fail(function () {
|
||||||
|
console.error("could not find title for image:" + imageMatch[1]);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Load CSS content
|
||||||
|
$('#articleContent').contents().find('body').find('link[rel=stylesheet]').each(function() {
|
||||||
|
var link = $(this);
|
||||||
|
var hrefMatch = link.attr("href").match(regexpMetadataUrl);
|
||||||
|
if (hrefMatch) {
|
||||||
|
// It's a CSS file contained in the ZIM file
|
||||||
|
selectedArchive.getTitleByName(hrefMatch[1]).then(function(title) {
|
||||||
|
selectedArchive.readBinaryFile(title, function (readableTitleName, content) {
|
||||||
|
link.attr("href", 'data:text/css;charset=UTF-8,' + encodeURIComponent(util.uintToString(content)));
|
||||||
|
});
|
||||||
|
}).fail(function () {
|
||||||
|
console.error("could not find title for CSS : " + hrefMatch[1]);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Load Javascript content
|
||||||
|
$('#articleContent').contents().find('body').find('script').each(function() {
|
||||||
|
var script = $(this);
|
||||||
|
var srcMatch = script.attr("src").match(regexpMetadataUrl);
|
||||||
|
// TODO check that the type of the script is text/javascript or application/javascript
|
||||||
|
if (srcMatch) {
|
||||||
|
// It's a Javascript file contained in the ZIM file
|
||||||
|
selectedArchive.getTitleByName(srcMatch[1]).then(function(title) {
|
||||||
|
selectedArchive.readBinaryFile(title, function (readableTitleName, content) {
|
||||||
|
script.attr("src", 'data:text/javascript;charset=UTF-8,' + encodeURIComponent(util.uintToString(content)));
|
||||||
|
});
|
||||||
|
}).fail(function () {
|
||||||
|
console.error("could not find title for javascript : " + srcMatch[1]);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
}
|
}
|
||||||
});
|
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user