diff --git a/README.md b/README.md index 6116dad..4077d6e 100644 --- a/README.md +++ b/README.md @@ -11,9 +11,47 @@ iframify(HTMLElement, [options]) Where options is an object where keys can be: -* `styles` *(string)*: extra styles to be injected in a `' : '') + + options.metaCharset + + options.metaViewport + + options.stylesheets + + options.styles + '' + - '' + + '' + node.innerHTML + '' + ''; @@ -52,7 +51,6 @@ * @return {String} */ function formatAttributes (attrObj) { - attrObj = attrObj || {}; var attributes = []; for (var attribute in attrObj) { @@ -79,6 +77,19 @@ ); } + function getOptions (options) { + var opts = options || {}; + opts.htmlAttr = formatAttributes(opts.htmlAttr || {}); + opts.bodyAttr = formatAttributes(opts.bodyAttr || {}); + opts.sizingTimeout = opts.sizingTimeout || 500; + opts.styles = (opts.styles ? '' : ''); + opts.stylesheets = getStylingNodes(opts.stylesSelector || 'link[rel*=stylesheet], style'); + opts.metaCharset = opts.metaCharset || metaCharset.outerHTML; + opts.metaViewport = opts.metaViewport || metaViewport.outerHTML; + + return opts; + } + /** * Transform a collection of nodes into an iframe version of themselves * including all the styles they need to perform correctly. @@ -88,7 +99,8 @@ * @return undefined */ function iframify (node, options) { - options = options || {}; + options = getOptions(options); + var iframe = document.createElement('iframe'); var html = getIframeContentForNode(node, options); iframe.srcdoc = html; @@ -108,7 +120,7 @@ setTimeout(function () { var iframeDocument = iframe.contentDocument || iframe.contentWindow.document; iframe.height = getDocumentHeight(iframeDocument); - }, 500); + }, options.sizingTimeout); return iframe; } diff --git a/tests/index.css b/tests/index.css index 9c2c7f0..ba496f6 100644 --- a/tests/index.css +++ b/tests/index.css @@ -17,3 +17,7 @@ color: rgb(0, 42, 0); } } + +.component--test-15 { + color: deeppink; +} diff --git a/tests/index.html b/tests/index.html index 1469678..1ca7921 100644 --- a/tests/index.html +++ b/tests/index.html @@ -118,6 +118,30 @@ + +
+
+
+

Custom meta charset import.

+
+
+
+ +
+
+
+

Custom meta viewport import.

+
+
+
+ +
+
+
+

Custom styles selector.

+
+
+
diff --git a/tests/index.js b/tests/index.js index 7c36d84..5bbb38c 100644 --- a/tests/index.js +++ b/tests/index.js @@ -198,4 +198,52 @@ describe('iframify', function () { done(); }; }); + + it('should allow passing a custom meta charset', function (done) { + var test = document.querySelector('.test-13 > .iframify'); + var iframe = iframify(test, { + metaCharset: '' + }); + + iframe.onload = function () { + var iframeDocument = iframe.contentDocument || iframe.contentWindow.document; + var meta = iframeDocument.querySelector('meta[charset]'); + var actual = meta.getAttribute('charset'); + var expected = 'utf-16'; + expect(actual).to.be.equal(expected); + done(); + }; + }); + + it('should allow passing a custom meta viewport', function (done) { + var test = document.querySelector('.test-14 > .iframify'); + var iframe = iframify(test, { + metaViewport: '' + }); + + iframe.onload = function () { + var iframeDocument = iframe.contentDocument || iframe.contentWindow.document; + var meta = iframeDocument.querySelector('meta[name="viewport"]'); + var actual = meta.getAttribute('content'); + var expected = 'initial-scale=1'; + expect(actual).to.be.equal(expected); + done(); + }; + }); + + it('should allow passing a custom styles selector', function (done) { + var test = document.querySelector('.test-15 > .iframify'); + var iframe = iframify(test, { + stylesSelector: 'style' + }); + + iframe.onload = function () { + var iframeDocument = iframe.contentDocument || iframe.contentWindow.document; + var component = iframeDocument.querySelector('.component'); + var actual = iframe.contentWindow.getComputedStyle(component).getPropertyValue('color'); + var expected = 'rgb(0, 0, 0)'; + expect(actual).to.be.equal(expected); + done(); + }; + }); });