v1.0.0-alpha.10

Fix window reference for node tests
Fix version logging (Fix #1421 )
2023-08-10 21:13:10 +03:00 · 2018-02-15 22:50:40 +08:00 · 2018-02-15 22:19:25 +08:00 · 2018-02-15 22:07:40 +08:00 · 2018-02-15 21:40:48 +08:00 · 2018-02-15 21:28:11 +08:00
19 changed files with 269 additions and 78 deletions
--- a/.travis.yml
+++ b/.travis.yml
@ -9,7 +9,7 @@ addons:
  chrome: stable
  firefox: latest
 dist: trusty
-sudo: false
+sudo: true
 before_script:
  - export DISPLAY=:99.0
  - sh -e /etc/init.d/xvfb start
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,5 +1,10 @@
 ### Changelog ###

+#### v1.0.0-alpha.10 - 15.2.2018 ####
+ * Re-introduce `onclone` option (Fix #1434)
+ * Add `ignoreElements` predicate function option
+ * Fix version console logging
+
 #### v1.0.0-alpha.9 - 7.1.2018 ####
 * Fix dynamic style sheets
 * Fix > 50% border-radius values
--- a/docs/configuration.md
+++ b/docs/configuration.md
@ -1,5 +1,5 @@
 ---
-title: "Configuration"
+title: "Options"
 description: "Explore the different configuration options available for html2canvas"
 previousUrl: "/getting-started"
 previousTitle: "Getting Started"
@ -17,7 +17,9 @@ These are all of the available configuration options.
 | canvas | `null` | Existing `canvas` element to use as a base for drawing on
 | foreignObjectRendering | `false` | Whether to use ForeignObject rendering if the browser supports it
 | imageTimeout | `15000` | Timeout for loading an image (in milliseconds). Set to `0` to disable timeout.
+| ignoreElements | `(element) => false` | Predicate function which removes the matching elements from the render.
 | logging | `true` | Enable logging for debug purposes
+| onclone | `null` | Callback function which is called when the Document has been cloned for rendering, can be used to modify the contents that will be rendered without affecting the original source document.
 | proxy | `null` | Url to the [proxy](/proxy/) which is to be used for loading cross-origin images. If left empty, cross-origin images won't be loaded.
 | removeContainer | `true` | Whether to cleanup the cloned DOM elements html2canvas creates temporarily
 | scale | `window.devicePixelRatio` | The scale to use for rendering. Defaults to the browsers device pixel ratio.
--- a/package.json
+++ b/package.json
@ -3,7 +3,7 @@
  "name": "html2canvas",
  "description": "Screenshots with JavaScript",
  "main": "dist/npm/index.js",
-  "version": "1.0.0-alpha.9",
+  "version": "1.0.0-alpha.10",
  "author": {
    "name": "Niklas von Hertzen",
    "email": "niklasvh@gmail.com",
@ -65,7 +65,7 @@
    "build": "rimraf dist/ && node scripts/create-reftest-list && npm run build:npm && npm run build:browser",
    "build:npm": "babel src/ -d dist/npm/ --plugins=dev-expression,transform-es2015-modules-commonjs && replace-in-file __VERSION__ '\"$npm_package_version\"' dist/npm/index.js",
    "build:browser": "webpack",
-    "format": "prettier --single-quote --no-bracket-spacing --tab-width 4 --print-width 100 --write \"{src,www,tests,scripts}/**/*.js\"",
+    "format": "prettier --single-quote --no-bracket-spacing --tab-width 4 --print-width 100 --write \"{src,www/src,tests,scripts}/**/*.js\"",
    "flow": "flow",
    "lint": "eslint src/**",
    "test": "npm run flow && npm run lint && npm run test:node && npm run karma",
--- a/src/Clone.js
+++ b/src/Clone.js
@ -268,8 +268,12 @@ export class DocumentCloner {
        for (let child = node.firstChild; child; child = child.nextSibling) {
            if (
                child.nodeType !== Node.ELEMENT_NODE ||
-                // $FlowFixMe
-                (child.nodeName !== 'SCRIPT' && !child.hasAttribute(IGNORE_ATTRIBUTE))
+                (child.nodeName !== 'SCRIPT' &&
+                    // $FlowFixMe
+                    !child.hasAttribute(IGNORE_ATTRIBUTE) &&
+                    (typeof this.options.ignoreElements !== 'function' ||
+                        // $FlowFixMe
+                        !this.options.ignoreElements(child)))
            ) {
                if (!this.copyStyles || child.nodeName !== 'STYLE') {
                    clone.appendChild(this.cloneNode(child));
@ -607,14 +611,21 @@ export const cloneWindow = (
                documentClone.documentElement.style.left = -bounds.left + 'px';
                documentClone.documentElement.style.position = 'absolute';
            }
+
+            const result = Promise.resolve([
+                cloneIframeContainer,
+                cloner.clonedReferenceElement,
+                cloner.resourceLoader
+            ]);
+
+            const onclone = options.onclone;
+
            return cloner.clonedReferenceElement instanceof cloneWindow.HTMLElement ||
            cloner.clonedReferenceElement instanceof ownerDocument.defaultView.HTMLElement ||
            cloner.clonedReferenceElement instanceof HTMLElement
-                ? Promise.resolve([
-                      cloneIframeContainer,
-                      cloner.clonedReferenceElement,
-                      cloner.resourceLoader
-                  ])
+                ? typeof onclone === 'function'
+                  ? Promise.resolve().then(() => onclone(documentClone)).then(() => result)
+                  : result
                : Promise.reject(
                      __DEV__
                          ? `Error finding the ${referenceElement.nodeName} in the cloned document`
--- a/src/Logger.js
+++ b/src/Logger.js
@ -7,7 +7,7 @@ export default class Logger {
    id: ?string;

    constructor(enabled: boolean, id: ?string, start: ?number) {
-        this.enabled = enabled;
+        this.enabled = typeof window !== 'undefined' && enabled;
        this.start = start ? start : Date.now();
        this.id = id;
    }
--- a/src/index.js
+++ b/src/index.js
@ -14,8 +14,10 @@ export type Options = {
    backgroundColor: string,
    canvas: ?HTMLCanvasElement,
    foreignObjectRendering: boolean,
+    ignoreElements?: HTMLElement => boolean,
    imageTimeout: number,
    logging: boolean,
+    onclone?: Document => void,
    proxy: ?string,
    removeContainer: ?boolean,
    scale: number,
@ -32,14 +34,9 @@ export type Options = {
 };

 const html2canvas = (element: HTMLElement, conf: ?Options): Promise<*> => {
-    // eslint-disable-next-line no-console
-    if (typeof console === 'object' && typeof console.log === 'function') {
-        // eslint-disable-next-line no-console
-        console.log(`html2canvas ${__VERSION__}`);
-    }
-
    const config = conf || {};
    const logger = new Logger(typeof config.logging === 'boolean' ? config.logging : true);
+    logger.log(`html2canvas ${__VERSION__}`);

    if (__DEV__ && typeof config.onrendered === 'function') {
        logger.error(
--- a/src/renderer/CanvasRenderer.js
+++ b/src/renderer/CanvasRenderer.js
@ -250,7 +250,7 @@ export default class CanvasRenderer implements RenderTarget<HTMLCanvasElement> {
                            const {baseline} = this.options.fontMetrics.getMetrics(font);
                            this.rectangle(
                                text.bounds.left,
-                                Math.round(text.bounds.top + text.bounds.height - baseline),
+                                Math.round(text.bounds.top + baseline),
                                text.bounds.width,
                                1,
                                textDecorationColor
--- a/tests/reftests/dynamicstyle.html
+++ b/tests/reftests/dynamicstyle.html
@ -18,9 +18,14 @@
            padding: 20px;
        }
        .div1 {
-            background: darkgreen;
+            background: darkred;
            color: white;
        }
+        @media (min-width: 10px) {
+            .div1 {
+                background: darkgreen;
+            }
+        }
    </style>
    <script>
        document.querySelector('#style').sheet.insertRule(
--- a/tests/reftests/options/ignore.html
+++ b/tests/reftests/options/ignore.html
@ -4,7 +4,9 @@
    <title>element render test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script>
-
+        h2cOptions = {ignoreElements: function(element) {
+            return element.className === 'ignored';
+        }};
    </script>
    <script type="text/javascript" src="../../test.js"></script>
    <style>
@ -15,7 +17,7 @@
            background: green;
        }

-        #ignored {
+        #ignored, .ignored {
            background: red;
            width: 100px;
            height: 100px;
@ -32,10 +34,11 @@
 <div id="ignored" data-html2canvas-ignore>
    great failure
 </div>
+<div class="ignored">
+    ignore predicate
+</div>
 <div id="div1">
    great success
 </div>
-
-
 </body>
 </html>
--- a/tests/reftests/options/onclone.html
+++ b/tests/reftests/options/onclone.html
@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>element render test</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <script>
+        h2cOptions = {onclone: function(document) {
+            const remove = document.querySelector('.ignored');
+            remove.parentNode.removeChild(remove);
+        }};
+    </script>
+    <script type="text/javascript" src="../../test.js"></script>
+    <style>
+        #div1 {
+
+            width: 100px;
+            height: 100px;
+            background: green;
+        }
+
+        #ignored, .ignored {
+            background: red;
+            width: 100px;
+            height: 100px;
+        }
+
+        body, html {
+            margin: 0;
+            padding: 0;
+        }
+    </style>
+
+</head>
+<body>
+<div class="ignored">
+    ignore during onclone
+</div>
+<div id="div1">
+    great success
+</div>
+</body>
+</html>
--- a/www/package-lock.json
+++ b/www/package-lock.json
@ -4903,9 +4903,9 @@
      "integrity": "sha1-nSLgyjKsyVs/RbjVtPb73AWv/VU="
    },
    "html2canvas": {
-      "version": "1.0.0-alpha.8",
-      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.0.0-alpha.8.tgz",
-      "integrity": "sha1-LXxW+ErC43dnmdUBd0JrmLEb+ms=",
+      "version": "1.0.0-alpha.9",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.0.0-alpha.9.tgz",
+      "integrity": "sha1-/2A9gINa/rbCdm6GEEdooc7xyAE=",
      "requires": {
        "css-line-break": "1.0.1"
      }
--- a/www/package.json
+++ b/www/package.json
@ -18,7 +18,7 @@
    "gatsby-source-filesystem": "^1.5.9",
    "gatsby-transformer-remark": "^1.7.23",
    "gzip-size": "^4.1.0",
-    "html2canvas": "^1.0.0-alpha.8",
+    "html2canvas": "^1.0.0-alpha.9",
    "mkdirp": "^0.5.1",
    "typography": "^0.16.6",
    "typography-theme-github": "^0.15.10"
@ -28,7 +28,7 @@
  "scripts": {
    "copybuild": "mkdirp public/dist && cpy ../dist/*.js public/dist",
    "build": "npm run copybuild && gatsby build",
-    "develop": "gatsby develop",
+    "start": "gatsby develop",
    "test": "echo \"Error: no test specified\" && exit 1"
  }
 }
--- a/www/src/components/footer.js
+++ b/www/src/components/footer.js
@ -4,14 +4,25 @@ export default () =>
    <footer
        css={{
            backgroundColor: '#558b2f',
-            color: 'rgba(255,255,255,0.8)',
+            color: 'rgba(255,255,255, 0.8)',
            fontWeight: 300,
            minHeight: '50px',
            lineHeight: '50px',
            padding: '10px 0px'
        }}
    >
-        <div css={{margin: '0 auto', width: '85%'}}>
+        <div
+            css={{
+                margin: '0 auto',
+                fontSize: '10.5px',
+                textAlign: 'center',
+                '@media(min-width: 1000px)': {
+                    textAlign: 'left',
+                    width: '85%',
+                    fontSize: '14.5px'
+                }
+            }}
+        >
            Created by{' '}
            <a href="https://hertzen.com" css={{color: '#fff', fontWeight: 'bold'}}>
                Niklas von Hertzen
--- a/www/src/components/navigation.js
+++ b/www/src/components/navigation.js
@ -1,6 +1,7 @@
-import React from 'react';
+import React, {Component} from 'react';
 import Link from 'gatsby-link';
 import logo from '../images/logo.svg';
+import menu from '../images/ic_menu_black_24px.svg';

 const lineLinkStyle = {
    lineHeight: '44px',
@ -16,15 +17,17 @@ const lineLinkStyle = {
 };

 const navStyle = {
-    height: '100%',
-    width: '300px',
-    position: 'fixed',
-    top: 0,
-    left: 0,
+    '@media(min-width: 1000px)': {
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        width: '300px',
+        boxShadow:
+            '0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2)',
+        height: '100%'
+    },
    fontSize: '13px',
-    backgroundColor: '#fff',
-    boxShadow:
-        '0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2)'
+    backgroundColor: '#fff'
 };

 const links = [
@ -36,31 +39,70 @@ const links = [
    {href: '/faq', text: 'FAQ'}
 ];

-export default () =>
-    <div css={navStyle}>
-        <Link to="/" css={{background: '#558b2f', display: 'block', padding: '24px 30px 24px'}}>
-            <img src={logo} css={{margin: 0}} />
-        </Link>
-        <ul
-            style={{
-                listStyle: 'none',
-                margin: 0,
-                padding: 0
-            }}
-        >
-            {links.map(({href, text}, i) =>
-                <li style={{padding: 0, margin: 0}} key={i}>
-                    <Link
-                        to={href}
-                        css={lineLinkStyle}
-                        activeStyle={{
-                            backgroundColor: '#7cb342',
-                            color: '#fff'
+export default class Navigation extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {open: false};
+    }
+    render() {
+        return (
+            <div css={navStyle}>
+                <div
+                    css={{
+                        background: '#558b2f',
+                        alignItems: 'center',
+                        padding: '24px 30px 24px 0px',
+                        display: 'flex',
+                        '@media(min-width: 1000px)': {
+                            padding: '24px 30px 24px 30px'
+                        }
+                    }}
+                >
+                    <img
+                        src={menu}
+                        onClick={() => this.setState(s => ({open: !s.open}))}
+                        css={{
+                            width: '50px',
+                            cursor: 'pointer',
+                            margin: '0 20px 0',
+                            display: 'block',
+                            '@media(min-width: 1000px)': {
+                                display: 'none'
+                            }
                        }}
-                    >
-                        {text}
+                    />
+                    <Link to="/">
+                        <img src={logo} css={{margin: 0}} />
                    </Link>
-                </li>
-            )}
-        </ul>
-    </div>;
+                </div>
+
+                <ul
+                    css={{
+                        display: this.state.open ? 'block' : 'none',
+                        listStyle: 'none',
+                        margin: 0,
+                        padding: 0,
+                        '@media(min-width: 1000px)': {
+                            display: 'block'
+                        }
+                    }}
+                >
+                    {links.map(({href, text}, i) =>
+                        <li style={{padding: 0, margin: 0}} key={i}>
+                            <Link
+                                to={href}
+                                css={lineLinkStyle}
+                                activeStyle={{
+                                    backgroundColor: '#7cb342',
+                                    color: '#fff'
+                                }}
+                            >
+                                {text}
+                            </Link>
+                        </li>
+                    )}
+                </ul>
+            </div>
+        );
+    }
+}
--- a/www/src/images/ic_menu_black_24px.svg
+++ b/www/src/images/ic_menu_black_24px.svg
@ -0,0 +1,4 @@
+<svg fill="#ffffff" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0 0h24v24H0z" fill="none"/>
+    <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
+</svg>
--- a/www/src/layouts/index.css
+++ b/www/src/layouts/index.css
@ -36,9 +36,22 @@ table {
    border: 1px solid #ddd;
 }

+table tr:nth-child(odd) {
+    background-color: #f9f9f9;
+}
+
 th {
    padding: 8px;
    border: 1px solid #ddd;
+    border-bottom-width: 2px;
+}
+
+td {
+    padding: 8px;
+}
+
+th:first-child, td:first-child {
+    padding-left: 8px;
 }

 :not(pre) > code {
--- a/www/src/pages/index.js
+++ b/www/src/pages/index.js
@ -55,8 +55,24 @@ export default ({data}) => {
                        Screenshots with JavaScript
                    </h4>

-                    <div css={{display: 'flex', justifyContent: 'center'}}>
-                        <div>
+                    <div
+                        css={{
+                            display: 'flex',
+                            justifyContent: 'center',
+                            flexDirection: 'column',
+                            '@media(min-width: 1000px)': {
+                                flexDirection: 'row'
+                            }
+                        }}
+                    >
+                        <div
+                            css={{
+                                display: 'none',
+                                '@media(min-width: 1000px)': {
+                                    display: 'block'
+                                }
+                            }}
+                        >
                            <h4>HTML</h4>
                            <div
                                css={{marginRight: '5px'}}
@ -70,7 +86,14 @@ export default ({data}) => {
                                }}
                            />
                        </div>
-                        <div>
+                        <div
+                            css={{
+                                display: 'none',
+                                '@media(min-width: 1000px)': {
+                                    display: 'block'
+                                }
+                            }}
+                        >
                            <h4>JavaScript</h4>
                            <div
                                css={{marginLeft: '5px'}}
@ -101,14 +124,25 @@ export default ({data}) => {
                            Documentation
                        </Link>
                    </div>
-                    <div css={{display: 'flex'}}>
+                    <div
+                        css={{
+                            display: 'flex',
+                            flexDirection: 'column',
+                            '@media(min-width: 1000px)': {
+                                flexDirection: 'row'
+                            }
+                        }}
+                    >
                        <div
                            css={{
                                flex: 1,
                                backgroundColor: '#558b2f',
                                padding: '10px 20px',
                                borderRadius: '10px',
-                                marginRight: '5px'
+                                marginBottom: '10px',
+                                '@media(min-width: 1000px)': {
+                                    marginRight: '5px'
+                                }
                            }}
                        >
                            <Carbon />
@ -116,12 +150,16 @@ export default ({data}) => {
                        <div
                            css={{
                                flex: 1,
-                                marginLeft: '5px',
+
                                backgroundColor: '#558b2f',
                                padding: '10px 20px',
                                borderRadius: '10px',
                                textAlign: 'left',
-                                marginRight: '5px'
+                                marginBottom: '10px',
+                                '@media(min-width: 1000px)': {
+                                    marginLeft: '5px',
+                                    marginRight: '5px'
+                                }
                            }}
                        >
                            <h6>Install NPM</h6>
@ -143,11 +181,14 @@ export default ({data}) => {
                        <div
                            css={{
                                flex: 1,
-                                marginLeft: '5px',
                                backgroundColor: '#558b2f',
                                padding: '10px 20px',
                                borderRadius: '10px',
-                                textAlign: 'left'
+                                textAlign: 'left',
+                                marginBottom: '10px',
+                                '@media(min-width: 1000px)': {
+                                    marginLeft: '5px'
+                                }
                            }}
                        >
                            <h5>Connect</h5>
--- a/www/src/templates/docs.js
+++ b/www/src/templates/docs.js
@ -19,7 +19,9 @@ export default ({data}) => {
            <Navigation />
            <div
                css={{
-                    marginLeft: '300px',
+                    '@media(min-width: 1000px)': {
+                        marginLeft: '300px'
+                    },
                    display: 'flex',
                    minHeight: '100vh',
                    flexDirection: 'column'
@ -37,10 +39,23 @@ export default ({data}) => {
                    <div css={{maxWidth: '960px'}}>
                        <div css={{width: '85%', margin: '0 auto', display: 'flex'}}>
                            <div css={{flex: 1}}>
-                                <h1 css={{padding: '20px 0'}}>
+                                <h1
+                                    css={{
+                                        padding: '20px 0',
+                                        fontSize: '2.8rem',
+                                        '@media(min-width: 1000px)': {fontSize: '4.2rem'}
+                                    }}
+                                >
                                    {post.frontmatter.title}
                                </h1>
-                                <h4 css={{fontWeight: 300, color: 'rgba(255, 255, 255, 0.6)'}}>
+                                <h4
+                                    css={{
+                                        fontWeight: 300,
+                                        color: 'rgba(255, 255, 255, 0.6)',
+                                        fontSize: '1.8rem',
+                                        '@media(min-width: 1000px)': {fontSize: '2.28rem'}
+                                    }}
+                                >
                                    {post.frontmatter.description}
                                </h4>
                            </div>
Author	SHA1	Message	Date
Niklas von Hertzen	102b5a1282	v1.0.0-alpha.10	2018-02-15 22:50:40 +08:00
Niklas von Hertzen	01e4920876	Fix window reference for node tests	2018-02-15 22:19:25 +08:00
Niklas von Hertzen	da2794f7f7	Fix version logging (Fix #1421 )	2018-02-15 22:07:40 +08:00
Niklas von Hertzen	9fb9898894	Re-introduce onclone option (Fix #1434 )	2018-02-15 21:40:48 +08:00
Niklas von Hertzen	952eb4cf7c	Fix Travis chrome tests	2018-02-15 21:28:11 +08:00
Niklas von Hertzen	fad4f837c9	Add ignoreElements predicate function option	2018-02-15 21:26:09 +08:00
Niklas von Hertzen	e6c44afca1	Merge pull request #1417 from eKoopmans/bugfix/underlines Revert "Fix underlines, relative to 'bottom' baseline"	2018-02-15 21:00:48 +08:00
Erik Koopmans	d023de0b99	Revert "Fix underlines, relative to 'bottom' baseline" This reverts commit `0c8d38d9c0`.	2018-01-26 18:10:15 +11:00
Niklas von Hertzen	0f01810005	Update website styles	2018-01-08 22:21:11 +08:00
Niklas von Hertzen	bf03cf5237	Make website responsive	2018-01-08 21:38:54 +08:00
Niklas von Hertzen	a555dfc085	Revert "Revert "Update html2canvas version"" This reverts commit `69fb48969e`.	2018-01-08 20:42:48 +08:00
Niklas von Hertzen	69fb48969e	Revert "Update html2canvas version" This reverts commit `c9a60c4ff9`. # Conflicts: # www/package-lock.json # www/package.json	2018-01-07 23:19:47 +08:00
Niklas von Hertzen	974c35c368	Update website html2canvas package	2018-01-07 22:14:16 +08:00