From e609924044d9c956df90c7d1f958a2748f9e15c9 Mon Sep 17 00:00:00 2001
From: MoyuScript <i@moyu.moe>
Date: Tue, 12 Dec 2017 19:43:59 +0800
Subject: [PATCH] Update website demo
---
.npmignore | 3 +
bower.json | 9 -
www/package-lock.json | 8 +
www/package.json | 1 +
www/src/components/example.css | 0
www/src/components/example.js | 201 ++++++++++++++++++++
www/src/images/ic_camera_alt_black_24px.svg | 5 +
www/src/images/ic_close_black_24px.svg | 4 +
www/src/layouts/index.js | 2 +
www/src/pages/index.js | 11 +-
10 files changed, 234 insertions(+), 10 deletions(-)
delete mode 100644 bower.json
create mode 100644 www/src/components/example.css
create mode 100644 www/src/components/example.js
create mode 100644 www/src/images/ic_camera_alt_black_24px.svg
create mode 100644 www/src/images/ic_close_black_24px.svg
diff --git a/.npmignore b/.npmignore
index c32fc8c..45a3c29 100644
--- a/.npmignore
+++ b/.npmignore
@@ -1,12 +1,15 @@
build/
+docs/
examples/
scripts/
src/
tests/
+www/
.github/
*.iml
.babelrc
.idea/
+.editorconfig
.npmignore
.eslintrc
.travis.yml
diff --git a/bower.json b/bower.json
deleted file mode 100644
index 10cc54b..0000000
--- a/bower.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
- "name": "html2canvas",
- "description": "Screenshots with JavaScript",
- "main": "dist/html2canvas.js",
- "ignore": [
- "tests",
- ".travis.yml"
- ]
-}
diff --git a/www/package-lock.json b/www/package-lock.json
index 1003504..f87f82c 100644
--- a/www/package-lock.json
+++ b/www/package-lock.json
@@ -4894,6 +4894,14 @@
"resolved": "https://registry.npmjs.org/html-void-elements/-/html-void-elements-1.0.2.tgz",
"integrity": "sha1-nSLgyjKsyVs/RbjVtPb73AWv/VU="
},
+ "html2canvas": {
+ "version": "1.0.0-alpha.3",
+ "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.0.0-alpha.3.tgz",
+ "integrity": "sha1-0QeAa+W1kuRr0iI7B3KTgaBIGzo=",
+ "requires": {
+ "punycode": "2.1.0"
+ }
+ },
"htmlparser2": {
"version": "3.3.0",
"resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.3.0.tgz",
diff --git a/www/package.json b/www/package.json
index f60ddc9..828dbb8 100644
--- a/www/package.json
+++ b/www/package.json
@@ -18,6 +18,7 @@
"gatsby-source-filesystem": "^1.5.9",
"gatsby-transformer-remark": "^1.7.23",
"gzip-size": "^4.1.0",
+ "html2canvas": "1.0.0-alpha.3",
"mkdirp": "^0.5.1",
"typography": "^0.16.6",
"typography-theme-github": "^0.15.10"
diff --git a/www/src/components/example.css b/www/src/components/example.css
new file mode 100644
index 0000000..e69de29
diff --git a/www/src/components/example.js b/www/src/components/example.js
new file mode 100644
index 0000000..54fac83
--- /dev/null
+++ b/www/src/components/example.js
@@ -0,0 +1,201 @@
+import React, {Component} from 'react';
+import './example.css';
+import icon from '../images/ic_camera_alt_black_24px.svg';
+import close from '../images/ic_close_black_24px.svg';
+import html2canvas from 'html2canvas';
+
+class CanvasContainer extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {open: false, complete: false};
+ }
+
+ componentDidMount() {
+ if (this.container) {
+ this.container.appendChild(this.props.canvas);
+ setTimeout(() => {
+ this.props.canvas.style.opacity = '1';
+ this.props.canvas.style.transform = 'scale(0.8)';
+ }, 10);
+ }
+ }
+
+ render() {
+ return (
+ <div
+ css={{
+ background: 'rgba(0, 0, 0, 0.5)',
+ position: 'fixed',
+ top: 0,
+ left: 0,
+ zIndex: '99999998',
+ width: '100%',
+ height: '100%'
+ }}
+ ref={container => (this.container = container)}
+ onClick={() => this.props.onClose()}
+ >
+ <img
+ src={close}
+ css={{position: 'absolute', right: '20px', top: '20px', cursor: 'pointer'}}
+ />
+ </div>
+ );
+ }
+}
+
+export default class Example extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {open: false, canvas: null};
+ }
+
+ render() {
+ return (
+ <div data-html2canvas-ignore>
+ {this.state.canvas
+ ? <CanvasContainer
+ canvas={this.state.canvas}
+ onClose={() => this.setState({canvas: null})}
+ />
+ : null}
+ <div
+ css={{
+ width: '800px',
+ height: '800px',
+ position: 'fixed',
+ zIndex: '1000',
+ right: '-348.4px',
+ bottom: '-327.2px'
+ }}
+ >
+ <div
+ css={{
+ position: 'absolute',
+ top: '344px',
+ left: '344px',
+ width: '112px',
+ height: '112px',
+ borderRadius: '50%',
+ zIndex: 100001,
+ ':before': {
+ content: ' ',
+ backgroundColor: '#fff',
+ borderRadius: '50%',
+ position: 'absolute',
+ width: '100%',
+ height: '100%',
+ opacity: this.state.open ? 1 : 0,
+ transition:
+ 'transform 0.3s cubic-bezier(0.42, 0, 0.58, 1),opacity 0.3s cubic-bezier(0.42, 0, 0.58, 1),-webkit-transform 0.3s cubic-bezier(0.42, 0, 0.58, 1)',
+ transform: this.state.open ? 'scale(1)' : 'scale(0)'
+ }
+ }}
+ >
+ <div
+ id="tryhtml2canvas"
+ css={{
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center',
+ width: '56px',
+ height: '56px',
+ backgroundColor: '#33691e',
+ position: 'absolute',
+ left: '50%',
+ top: '50%',
+ cursor: 'pointer',
+ transform: 'translate(-50%, -50%)',
+ borderRadius: '50%',
+ 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)'
+ }}
+ onClick={() => this.setState(({open}) => ({open: !open}))}
+ >
+ <img
+ src={icon}
+ css={{
+ width: '30px',
+ height: '30px',
+ flex: 1,
+ margin: 0
+ }}
+ />
+ </div>
+ </div>
+ <div
+ css={{
+ backgroundColor: '#33691e',
+ borderRadius: '50%',
+ opacity: this.state.open ? 0.95 : 0,
+ transition:
+ 'transform 0.3s cubic-bezier(0.42, 0, 0.58, 1),opacity 0.3s cubic-bezier(0.42, 0, 0.58, 1),-webkit-transform 0.3s cubic-bezier(0.42, 0, 0.58, 1)',
+ transform: this.state.open ? 'scale(1)' : 'scale(0)',
+ position: 'absolute',
+ width: '100%',
+ height: '100%',
+ zIndex: 100000
+ }}
+ >
+ <div
+ css={{
+ width: '456px',
+ height: '600px',
+ right: '56px',
+ bottom: '56px',
+ padding: '56px',
+ position: 'fixed',
+ left: 0,
+ color: '#fff'
+ }}
+ >
+ <h4>Try out html2canvas</h4>
+ <p css={{color: '#fff'}}>
+ Test out html2canvas by rendering the viewport from the current
+ page.
+ </p>
+ <div
+ css={{
+ padding: '4px 8px',
+ margin: '10px',
+ border: '2px solid #fff',
+ color: '#fff',
+ display: 'inline-block',
+ cursor: 'pointer'
+ }}
+ onClick={() => {
+ html2canvas(document.body, {
+ allowTaint: true,
+ width: window.innerWidth,
+ height: window.innerHeight,
+ scrollX: window.pageXOffset,
+ scrollY: window.pageYOffset,
+ x: window.pageXOffset,
+ y: window.pageYOffset
+ })
+ .then(canvas => {
+ this.setState({canvas});
+
+ canvas.style.position = 'fixed';
+ canvas.style.top = '0';
+ canvas.style.left = '0';
+ canvas.style.opacity = '0';
+ canvas.style.transform = 'scale(0)';
+ canvas.style.zIndex = '99999999';
+ canvas.style.transition =
+ 'transform 0.3s cubic-bezier(0.42, 0, 0.58, 1),opacity 0.3s cubic-bezier(0.42, 0, 0.58, 1),-webkit-transform 0.3s cubic-bezier(0.42, 0, 0.58, 1)';
+ })
+ .catch(e => {
+ console.log(e);
+ });
+ }}
+ >
+ Capture
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ );
+ }
+}
diff --git a/www/src/images/ic_camera_alt_black_24px.svg b/www/src/images/ic_camera_alt_black_24px.svg
new file mode 100644
index 0000000..7d28ebc
--- /dev/null
+++ b/www/src/images/ic_camera_alt_black_24px.svg
@@ -0,0 +1,5 @@
+<svg fill="#ffffff" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+ <circle cx="12" cy="12" r="3.2"/>
+ <path d="M9 2L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z"/>
+ <path d="M0 0h24v24H0z" fill="none"/>
+</svg>
diff --git a/www/src/images/ic_close_black_24px.svg b/www/src/images/ic_close_black_24px.svg
new file mode 100644
index 0000000..4bc46d3
--- /dev/null
+++ b/www/src/images/ic_close_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="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
+ <path d="M0 0h24v24H0z" fill="none"/>
+</svg>
diff --git a/www/src/layouts/index.js b/www/src/layouts/index.js
index 7977bfa..66d7039 100644
--- a/www/src/layouts/index.js
+++ b/www/src/layouts/index.js
@@ -3,11 +3,13 @@ import PropTypes from 'prop-types';
import Helmet from 'react-helmet';
require('prismjs/themes/prism-solarizedlight.css');
import './index.css';
+import Example from '../components/example';
const TemplateWrapper = ({children}) =>
<div>
<Helmet title="html2canvas - Screenshots with JavaScript" />
{children()}
+ <Example />
</div>;
TemplateWrapper.propTypes = {
diff --git a/www/src/pages/index.js b/www/src/pages/index.js
index c661b56..b05a52f 100644
--- a/www/src/pages/index.js
+++ b/www/src/pages/index.js
@@ -87,7 +87,16 @@ export default ({data}) => {
</div>
<div css={{margin: '20px'}}>
- <Link css={linkStyle}>Try it out</Link>
+ <a
+ href="#"
+ css={linkStyle}
+ onClick={e => {
+ e.preventDefault();
+ document.querySelector('#tryhtml2canvas').click();
+ }}
+ >
+ Try it out
+ </a>
<Link to={'/documentation'} css={linkStyle}>
Documentation
</Link>