From d8678e3a83bf47b71f4edeed3eed9b934b8869a4 Mon Sep 17 00:00:00 2001 From: mossroy Date: Thu, 7 Jan 2016 20:18:16 +0100 Subject: [PATCH] Enable CSS stylesheets read from the backend. #115 It works both in jQuery and ServiceWorker modes. But, for now, in jQuery mode, it freezes the UI on Firefox OS. The javascript content is still not available for now. --- service-worker.js | 33 ++++++++++++++++++--------------- www/js/app.js | 17 +++++++++++------ www/js/lib/util.js | 22 ++++++++++++++++++---- 3 files changed, 47 insertions(+), 25 deletions(-) diff --git a/service-worker.js b/service-worker.js index 095f9885..998af580 100644 --- a/service-worker.js +++ b/service-worker.js @@ -123,25 +123,28 @@ function(util) { console.log("It's a layout dependency : " + titleName); if (regexpJS.test(titleName)) { contentType = 'text/javascript'; + 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; } else if (regexpCSS.test(titleName)) { - contentType = 'image/css'; + contentType = 'text/css'; } - 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; } + // We need to remove the potential parameters in the URL + titleName = util.removeUrlParameters(titleName); + titleNameWithNameSpace = nameSpace + '/' + titleName; // Let's instanciate a new messageChannel, to allow app.s to give us the content @@ -156,7 +159,7 @@ function(util) { 'Content-Type': contentType } }; - + var httpResponse = new Response(event.data.content, responseInit); console.log('ServiceWorker responding to the HTTP request for ' + titleNameWithNameSpace + ' (size=' + event.data.content.length + ' octets)' , httpResponse); diff --git a/www/js/app.js b/www/js/app.js index d38e9ca1..5e352193 100644 --- a/www/js/app.js +++ b/www/js/app.js @@ -1000,14 +1000,16 @@ define(['jquery', 'abstractBackend', 'util', 'cookies','geometry','osabstraction }); // Load CSS content - $('#articleContent').contents().find('body').find('link[rel=stylesheet]').each(function() { + $('#articleContent').contents().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) { + var titleName = util.removeUrlParameters(hrefMatch[1]); + selectedArchive.getTitleByName(titleName).then(function(title) { selectedArchive.readBinaryFile(title, function (readableTitleName, content) { - link.attr("href", 'data:text/css;charset=UTF-8,' + encodeURIComponent(util.uintToString(content))); + var cssContent = encodeURIComponent(util.uintToString(content)); + link.attr("href", 'data:text/css;charset=UTF-8,' + cssContent); }); }).fail(function () { console.error("could not find title for CSS : " + hrefMatch[1]); @@ -1016,15 +1018,18 @@ define(['jquery', 'abstractBackend', 'util', 'cookies','geometry','osabstraction }); // Load Javascript content - $('#articleContent').contents().find('body').find('script').each(function() { + $('#articleContent').contents().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) { + var titleName = util.removeUrlParameters(srcMatch[1]); + selectedArchive.getTitleByName(titleName).then(function(title) { selectedArchive.readBinaryFile(title, function (readableTitleName, content) { - script.attr("src", 'data:text/javascript;charset=UTF-8,' + encodeURIComponent(util.uintToString(content))); + // TODO : I have to disable javascript for now + // var jsContent = encodeURIComponent(util.uintToString(content)); + //script.attr("src", 'data:text/javascript;charset=UTF-8,' + jsContent); }); }).fail(function () { console.error("could not find title for javascript : " + srcMatch[1]); diff --git a/www/js/lib/util.js b/www/js/lib/util.js index ff1bf9d8..7fbfb511 100644 --- a/www/js/lib/util.js +++ b/www/js/lib/util.js @@ -195,14 +195,27 @@ define(['q'], function(q) { /** * Converts a UInt Array to a UTF-8 encoded string + * source : http://michael-rushanan.blogspot.de/2014/03/javascript-uint8array-hacks-and-cheat.html * * @param {UIntArray} uintArray * @returns {String} */ function uintToString(uintArray) { - var encodedString = String.fromCharCode.apply(null, uintArray), - decodedString = decodeURIComponent(escape(encodedString)); - return decodedString; + var s = ''; + for (var i = 0; i < uintArray.length; i++) { + s += String.fromCharCode(uintArray[i]); + } + return s; + } + + var regexpRemoveUrlParameters = new RegExp(/([^\?]+)\?.*$/); + + function removeUrlParameters(url) { + if (regexpRemoveUrlParameters.test(url)) { + return regexpRemoveUrlParameters.exec(url)[1]; + } else { + return url; + } } /** @@ -218,6 +231,7 @@ define(['q'], function(q) { readFileSlice : readFileSlice, binarySearch: binarySearch, b64toBlob: b64toBlob, - uintToString: uintToString + uintToString: uintToString, + removeUrlParameters: removeUrlParameters }; });