diff options
| -rw-r--r-- | lib/output/getModifiers.js | 3 | ||||
| -rw-r--r-- | lib/output/modifiers/__tests__/fetchRemoteImages.js | 21 | ||||
| -rw-r--r-- | lib/output/modifiers/fetchRemoteImages.js | 14 | ||||
| -rw-r--r-- | lib/output/modifiers/index.js | 1 | ||||
| -rw-r--r-- | lib/output/modifiers/inlineAssets.js | 6 | ||||
| -rw-r--r-- | lib/output/modifiers/resolveImages.js | 33 |
6 files changed, 71 insertions, 7 deletions
diff --git a/lib/output/getModifiers.js b/lib/output/getModifiers.js index 1979063..23cfb1c 100644 --- a/lib/output/getModifiers.js +++ b/lib/output/getModifiers.js @@ -40,6 +40,9 @@ function getModifiers(output, page) { resolveFileToURL.bind(null, output) ), + // Resolve images + Modifiers.resolveImages.bind(null, currentFilePath), + // Annotate text with glossary entries Modifiers.annotateText.bind(null, entries), diff --git a/lib/output/modifiers/__tests__/fetchRemoteImages.js b/lib/output/modifiers/__tests__/fetchRemoteImages.js index 543aca0..f5610a2 100644 --- a/lib/output/modifiers/__tests__/fetchRemoteImages.js +++ b/lib/output/modifiers/__tests__/fetchRemoteImages.js @@ -1,5 +1,8 @@ var cheerio = require('cheerio'); var tmp = require('tmp'); +var path = require('path'); + +var URL = 'https://upload.wikimedia.org/wikipedia/commons/thumb/4/47/PNG_transparency_demonstration_1.png/280px-PNG_transparency_demonstration_1.png'; describe('fetchRemoteImages', function() { var dir; @@ -10,16 +13,28 @@ describe('fetchRemoteImages', function() { }); pit('should download image file', function() { - var $ = cheerio.load('<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/47/PNG_transparency_demonstration_1.png/280px-PNG_transparency_demonstration_1.png" />'); + var $ = cheerio.load('<img src="' + URL + '" />'); - return fetchRemoteImages(dir.name, $) + return fetchRemoteImages(dir.name, 'index.html', $) .then(function() { var $img = $('img'); - var src = '.' + $img.attr('src'); + var src = $img.attr('src'); expect(dir.name).toHaveFile(src); }); }); + + pit('should download image file and replace with relative path', function() { + var $ = cheerio.load('<img src="' + URL + '" />'); + + return fetchRemoteImages(dir.name, 'test/index.html', $) + .then(function() { + var $img = $('img'); + var src = $img.attr('src'); + + expect(dir.name).toHaveFile(path.join('test', src)); + }); + }); }); diff --git a/lib/output/modifiers/fetchRemoteImages.js b/lib/output/modifiers/fetchRemoteImages.js index 792bbb6..ef868b9 100644 --- a/lib/output/modifiers/fetchRemoteImages.js +++ b/lib/output/modifiers/fetchRemoteImages.js @@ -3,21 +3,24 @@ var crc = require('crc'); var editHTMLElement = require('./editHTMLElement'); var fs = require('../../utils/fs'); -var location = require('../../utils/location'); +var LocationUtils = require('../../utils/location'); /** Fetch all remote images @param {String} rootFolder + @param {String} currentFile @param {HTMLDom} $ @return {Promise} */ -function fetchRemoteImages(rootFolder, $) { +function fetchRemoteImages(rootFolder, currentFile, $) { + var currentDirectory = path.dirname(currentFile); + return editHTMLElement($, 'img', function($img) { var src = $img.attr('src'); var extension = path.extname(src); - if (!location.isExternal(src)) { + if (!LocationUtils.isExternal(src)) { return; } @@ -30,7 +33,10 @@ function fetchRemoteImages(rootFolder, $) { return fs.download(src, filePath); }) .then(function() { - $img.replaceWith('<img src="/' + fileName + '" />'); + // Convert to relative + src = LocationUtils.relative(currentDirectory, fileName); + + $img.replaceWith('<img src="' + src + '" />'); }); }); } diff --git a/lib/output/modifiers/index.js b/lib/output/modifiers/index.js index 4cdb01b..f1daa2b 100644 --- a/lib/output/modifiers/index.js +++ b/lib/output/modifiers/index.js @@ -9,6 +9,7 @@ module.exports = { fetchRemoteImages: require('./fetchRemoteImages'), svgToPng: require('./svgToPng'), resolveLinks: require('./resolveLinks'), + resolveImages: require('./resolveImages'), annotateText: require('./annotateText'), highlightCode: require('./highlightCode') }; diff --git a/lib/output/modifiers/inlineAssets.js b/lib/output/modifiers/inlineAssets.js index 4106d69..9f19fd7 100644 --- a/lib/output/modifiers/inlineAssets.js +++ b/lib/output/modifiers/inlineAssets.js @@ -1,5 +1,6 @@ var svgToImg = require('./svgToImg'); var svgToPng = require('./svgToPng'); +var resolveImages = require('./resolveImages'); var fetchRemoteImages = require('./fetchRemoteImages'); var Promise = require('../../utils/promise'); @@ -12,7 +13,12 @@ var Promise = require('../../utils/promise'); function inlineAssets(rootFolder, currentFile) { return function($) { return Promise() + + // Resolving images and fetching external images should be + // done before svg conversion + .then(resolveImages.bind(null, currentFile)) .then(fetchRemoteImages.bind(null, rootFolder, currentFile)) + .then(svgToImg.bind(null, rootFolder, currentFile)) .then(svgToPng.bind(null, rootFolder, currentFile)); }; diff --git a/lib/output/modifiers/resolveImages.js b/lib/output/modifiers/resolveImages.js new file mode 100644 index 0000000..e401cf5 --- /dev/null +++ b/lib/output/modifiers/resolveImages.js @@ -0,0 +1,33 @@ +var path = require('path'); + +var LocationUtils = require('../../utils/location'); +var editHTMLElement = require('./editHTMLElement'); + +/** + Resolve all HTML images: + - /test.png in hello -> ../test.html + + @param {String} currentFile + @param {HTMLDom} $ +*/ +function resolveImages(currentFile, $) { + var currentDirectory = path.dirname(currentFile); + + return editHTMLElement($, 'img', function($img) { + var src = $img.attr('src'); + + if (LocationUtils.isExternal(src)) { + return; + } + + // Calcul absolute path for this + src = LocationUtils.toAbsolute(src, currentDirectory, '.'); + + // Convert back to relative + src = LocationUtils.relative(currentDirectory, src); + + $img.attr('src', src); + }); +} + +module.exports = resolveImages; |