In jQuery mode, display images, javascript and CSS dependencies.

Images seem to work fine. I could not test JS and CSS for now
See #136
This commit is contained in:
mossroy 2016-01-06 18:39:40 +01:00
parent f9ccc51145
commit a4feca9930
3 changed files with 99 additions and 29 deletions

View File

@ -25,32 +25,6 @@
// TODO : remove requirejs if it's really useless here
importScripts('./www/js/lib/require.js');
/**
* From https://stackoverflow.com/questions/16245767/creating-a-blob-from-a-base64-string-in-javascript
*/
function b64toBlob(b64Data, contentType, sliceSize) {
contentType = contentType || '';
sliceSize = sliceSize || 512;
var byteCharacters = atob(b64Data);
var byteArrays = [];
for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
var slice = byteCharacters.slice(offset, offset + sliceSize);
var byteNumbers = new Array(slice.length);
for (var i = 0; i < slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i);
}
var byteArray = new Uint8Array(byteNumbers);
byteArrays.push(byteArray);
}
var blob = new Blob(byteArrays, {type: contentType});
return blob;
}
self.addEventListener('install', function(event) {
event.waitUntil(self.skipWaiting());

View File

@ -375,7 +375,7 @@ define(['jquery', 'abstractBackend', 'util', 'cookies','geometry','osabstraction
* @returns {Boolean} true if they're compatible
*/
function checkSelectedArchiveCompatibilityWithInjectionMode() {
if (selectedArchive.needsWikimediaCSS() && contentInjectionMode === 'serviceworker') {
if (selectedArchive && selectedArchive.needsWikimediaCSS() && contentInjectionMode === 'serviceworker') {
alert('You seem to want to use ServiceWorker mode for an Evopedia archive : this is not supported. Please use the JQuery mode or use a ZIM file');
$("#btnConfigure").click();
return false;
@ -881,6 +881,8 @@ define(['jquery', 'abstractBackend', 'util', 'cookies','geometry','osabstraction
var regexpImageLink = /^.?\/?[^:]+:(.*)/;
var regexpMathImageUrl = /^\/math.*\/([0-9a-f]{32})\.png$/;
var regexpPath = /^(.*\/)[^\/]+$/;
var regexpImageUrl = /^\.\.\/I\/(.*)$/;
var regexpMetadataUrl = /^\.\.\/-\/(.*)$/;
/**
* Display the the given HTML article in the web page,
@ -969,14 +971,61 @@ define(['jquery', 'abstractBackend', 'util', 'cookies','geometry','osabstraction
});
}
// Load math images
// Load images
$('#articleContent').contents().find('body').find('img').each(function() {
var image = $(this);
var m = image.attr("src").match(regexpMathImageUrl);
if (m) {
// 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]);
});
}
}
});
// 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]);
});
}
});
}

View File

@ -159,6 +159,51 @@ define(['q'], function(q) {
return mid;
});
};
/**
* Converts a Base64 Content to a Blob
* From https://stackoverflow.com/questions/16245767/creating-a-blob-from-a-base64-string-in-javascript
*
* @param {String} b64Data Base64-encoded data
* @param {String} contentType
* @param {Integer} sliceSize
* @returns {Blob}
*/
function b64toBlob(b64Data, contentType, sliceSize) {
contentType = contentType || '';
sliceSize = sliceSize || 512;
var byteCharacters = atob(b64Data);
var byteArrays = [];
for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
var slice = byteCharacters.slice(offset, offset + sliceSize);
var byteNumbers = new Array(slice.length);
for (var i = 0; i < slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i);
}
var byteArray = new Uint8Array(byteNumbers);
byteArrays.push(byteArray);
}
var blob = new Blob(byteArrays, {type: contentType});
return blob;
}
/**
* Converts a UInt Array to a UTF-8 encoded string
*
* @param {UIntArray} uintArray
* @returns {String}
*/
function uintToString(uintArray) {
var encodedString = String.fromCharCode.apply(null, uintArray),
decodedString = decodeURIComponent(escape(encodedString));
return decodedString;
}
/**
* Functions and classes exposed by this module
@ -171,6 +216,8 @@ define(['q'], function(q) {
uint8ArrayToHex : uint8ArrayToHex,
uint8ArrayToBase64 : uint8ArrayToBase64,
readFileSlice : readFileSlice,
binarySearch: binarySearch
binarySearch: binarySearch,
b64toBlob: b64toBlob,
uintToString: uintToString
};
});