Showing preview only (2,440K chars total). Download the full file or copy to clipboard to get everything.
Repository: marciolopesjr/HTML-GL
Branch: master
Commit: 6e58d6adc4d3
Files: 45
Total size: 2.3 MB
Directory structure:
gitextract_das9wpov/
├── .gitignore
├── README.md
├── bower.json
├── demo/
│ ├── advanced-content-dom.html
│ ├── advanced-content-webgl.html
│ ├── assets/
│ │ ├── css/
│ │ │ ├── appstyle.css
│ │ │ └── style.css
│ │ └── fonts/
│ │ └── README-FONTS.txt
│ ├── basic-dom.html
│ ├── basic-webgl-jquery.html
│ ├── basic-webgl.html
│ ├── filters.html
│ ├── js/
│ │ ├── slider.js
│ │ └── vendor/
│ │ ├── html2canvas.js
│ │ └── velocity.js
│ ├── nested-content-webgl.html
│ └── ripples.html
├── dist/
│ ├── htmlgl-effects.js
│ └── htmlgl.js
├── figures/
│ ├── htmlgl-flow-diagram.ep
│ └── logo.psd
├── gulpfile.js
├── package.json
├── page/
│ ├── css/
│ │ └── style.css
│ ├── index.html
│ └── js/
│ ├── basics.js
│ ├── dat.gui.js
│ ├── effects.js
│ └── slider.js
└── src/
├── effects/
│ ├── ascii.js
│ ├── bloom.js
│ ├── diagonal-blur.js
│ ├── dotscreen.js
│ ├── invert.js
│ ├── noise.js
│ ├── pixelate.js
│ ├── rgbsplit.js
│ ├── ripples.js
│ └── twist.js
├── gl-context.js
├── gl-effects-manager.js
├── gl-element-resolver.js
├── gl-element.js
├── images-loaded.js
└── util.js
================================================
FILE CONTENTS
================================================
================================================
FILE: .gitignore
================================================
bower_components
.idea
================================================
FILE: README.md
================================================
<img alt="HTML GL" src="http://pixelscommander.com/polygon/htmlgl/figures/logo-blue.png"/>
60 FPS and amazing effects by rendering HTML/CSS in WebGL, framework agnostic
=======================================================================================
[](https://gitter.im/PixelsCommander/HTML-GL)
HTML GL solves "the slow DOM problem" by creating WebGL representations of DOM elements and hiding actual DOM after. This speeds up HTML/CSS animations and transformations by using 3D hardware acceleration and allows to apply OpenGL effects as modern 3D games have.
- [Demo](http://pixelscommander.com/polygon/htmlgl/demo/filters.html)
- [Project page](http://htmlgl.com)
- [Theory behind HTML GL](http://pixelscommander.com/en/web-applications-performance/render-html-css-in-webgl-to-get-highest-performance-possibl/)
Using HTML GL you still work with HTML/CSS as you are common to, but DOM elements are just facades to their WebGL representations. These GPU accelerated textures are very effective from resources consuming perspective and are very cheap to transform or animate.
Install
-------
npm:
```bash
npm install --save html-gl
```
Bower:
```bash
bower install --save htmlgl
```
Usage
-----
As Web Component
```html
<html-gl>
This element`s content is rendered in <h1>WebGL</h1>
<span style="color: green;">was it easy?</span>
Feel free to use CSS, images and all you are common to in HTML/CSS world.
</html-gl>
```
As jQuery plugin
```js
$('.some div').htmlgl();
```
No DOM + WebGL rendering = highest FPS possible for Web platform
-------------------------------------------------------
<img alt="HTML GL flow diagram" src="http://pixelscommander.com/polygon/htmlgl/figures/htmlgl-flow-diagram.png"/>
Demos
-----
- [Filters](http://pixelscommander.com/polygon/htmlgl/demo/filters.html) WebGL is not only about performance. It breaks any HTML/CSS limits in terms of animations and interactivity
- [Mobile effects](http://pixelscommander.com/polygon/htmlgl/demo/ripples.html) use attribute `effects` on `<html-gl>` element to specify effects you use, this one is nice for mobile
- [Basic HTML GL](http://pixelscommander.com/polygon/htmlgl/demo/basic-webgl.html) demo shows how to use HTML GL and animate GL Elements. It also demonstrate that HTML GL handle content change events and repaints element`s WebGL representation
- [Basic DOM](http://pixelscommander.com/polygon/htmlgl/demo/basic-dom.html) this is the same project as previous. The only difference is that htmlgl.js is not included
- [Advanced content HTML GL](http://pixelscommander.com/polygon/htmlgl/demo/advanced-content-webgl.html) slider with nested content rendered via WebGL and animated, ability to drag with mouse horizontaly, click event listeners on boxes
- [Advanced content DOM](http://pixelscommander.com/polygon/htmlgl/demo/advanced-content-dom.html)
How to use?
-----------
Include HTMLGL.js into project. Use tag name `<html-gl>` or jQuery plugin `$(myElement).htmlgl()` for elements you are going to animate. These elements will be rendered in WebGL and their CSS Transform properties will be mapped to WebGL representation transformations. So DOM node itself will not be animated or displayed in order to avoid resources consuming.
HTML GL is framework agnostic and is easy to inject into existing project which needs performance tweaking.
Rasterization API
-----------------
In order to improve technology we are trying to promote standardized native Rasterization API for JavaScript. Help us to be better and to add this cool feature to browsers by spreading the [article](http://pixelscommander.com/en/javascript/state-of-html-content-rasterization-draw-html-to-canvas-image/) and [proposal draft](https://gist.github.com/PixelsCommander/a0b5882139cbb8a1781c#file-proposal-md).
Fast way to animate
-------------------
The most performant way to animate HTML-GL tags is to operate on tag's `styleGL.transform` in the same way you operate on `style.transform`. E.g. `style.transform = 'translateX(100px) translateY(50px)'`.
Velocity.js copy from HTML-GL repository (https://github.com/PixelsCommander/HTML-GL/blob/master/demo/js/vendor/velocity.js) have this optimization built-in. Feel free to use it in the way described in official Velocity.js documentation.
Animating HTML-GL tag children
------------------------------
Since it is very efficient to make transformations (move, rotate, scale, change opacity) on HTML-GL tags it becomes very slow to animate it's children until they are HTML-GL tags too. This happens because of necessity to rasterize and send HTML-GL tag texture to GPU.
Running demos from repository
-----------------------------
Please run `bower install` before running demos
License
-------
MIT: http://mit-license.org/
Copyright 2015 Denis Radin aka [PixelsCommander](http://pixelscommander.com)
================================================
FILE: bower.json
================================================
{
"name": "htmlgl",
"authors": [
"PixelsCommander <denis.radin@gmail.com>"
],
"license": "MIT",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"dependencies": {
"pixi": "~3.0.7",
"webcomponents.js": "~0.5.5",
"promise-polyfill": "~2.0.0",
"jquery": "~2.1.3",
"tween.js": "https://github.com/tweenjs/tween.js.git"
},
"keywords": ["web-components"]
}
================================================
FILE: demo/advanced-content-dom.html
================================================
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./assets/css/style.css">
<title>DOM content</title>
<meta name="viewport" content="width=1024 maximum-scale=1.0 minimum-scale=1.0 initial-scale=1.0, user-scalable=no" />
</head>
<body>
<div class="content_wrapper">
<h1>MENU RENDERED IN DOM</h1>
<nav class="top_nav">
<ul class="menu expanded">
<li><a target="_blank" href="http://pixelscommander.com/en/web-applications-performance/render-html-css-in-webgl-to-get-highest-performance-possibl/">ABOUT HTML-GL</a></li>
<li><a target="_blank" href="https://github.com/PixelsCommander/HTML-GL">GITHUB REPO</a></li>
<li><a target="_blank" href="https://github.com/PixelsCommander/HTML-GL/archive/master.zip">DOWNLOAD</a></li>
</ul>
<ul class="submenu">
<li>MOVIES</li>
<li>TV</li>
<li>KIDS</li>
<li>
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style">
<iframe style="display: inline-block;"
src="http://ghbtns.com/github-btn.html?user=PixelsCommander&repo=HTML-GL&type=watch"
allowtransparency="true" frameborder="0" scrolling="0" width="62" height="20"></iframe>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_google_plusone" g:plusone:size="medium"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-4ea2f9164143bcfb"></script>
<!-- AddThis Button END -->
</li>
</ul>
</nav>
<section class="broadcasts_list">
<h1>DOM SLIDER SINCE HTML GL IS DISABLED FOR THIS DEMO</h1>
<html-gl class="horizontal_carusel">
<li class="broadcast" onclick="alert('Clicked Argo')">
<div class="image_background"></div>
<img src="./pic/boxes/box_argo.png" width="186px" height="270px">
<p>
Select me with DevTools
</p>
<p>
<img src="./assets/img/imdb.png" width="52px" height="24px">
<span>7.8<span>/10</span></span>
</p>
</li>
<li class="broadcast" onclick="alert('Clicked Avatar')">
<div class="image_background"></div>
<img src="./pic/boxes/box_avatar.png" width="186px" height="270px">
<p>
Change me in DevTools
</p>
<p>
<img src="./assets/img/imdb.png" width="52px" height="24px">
<span>8.0<span>/10</span></span>
</p>
</li>
<li class="broadcast" onclick="alert('Clicked Breaking Bad')">
<div class="image_background"></div>
<img src="./pic/boxes/box_breaking_bad.png" width="186px" height="270px">
<p>
Breaking bad
</p>
<p>
<img src="./assets/img/imdb.png" width="52px" height="24px">
<span>9.6<span>/10</span></span>
</p>
</li>
<li class="broadcast" onclick="alert('Quantum of solace')">
<div class="image_background"></div>
<img src="./pic/boxes/box_quantum_of_solace.png" width="186px" height="270px">
<p>
Quantum of solace
</p>
<p>
<img src="./assets/img/imdb.png" width="52px" height="24px">
<span>6.7<span>/10</span></span>
</p>
</li>
<li class="broadcast" onclick="alert('Quantum of solace')">
<div class="image_background"></div>
<img src="./pic/boxes/box_quantum_of_solace.png" width="186px" height="270px">
<p>
Quantum of solace
</p>
<p>
<img src="./assets/img/imdb.png" width="52px" height="24px">
<span>7.4<span>/10</span></span>
</p>
</li>
<li class="broadcast" onclick="alert('Quantum of solace')">
<div class="image_background"></div>
<img src="./pic/boxes/box_quantum_of_solace.png" width="186px" height="270px">
<p>
Quantum of solace
</p>
<p>
<img src="./assets/img/imdb.png" width="52px" height="24px">
<span>7.4<span>/10</span></span>
</p>
</li>
<li class="broadcast" onclick="alert('Quantum of solace')">
<div class="image_background"></div>
<img src="./pic/boxes/box_quantum_of_solace.png" width="186px" height="270px">
<p>
Quantum of solace
</p>
<p>
<img src="./assets/img/imdb.png" width="52px" height="24px">
<span>7.4<span>/10</span></span>
</p>
</li>
<li class="broadcast" onclick="alert('Quantum of solace')">
<div class="image_background"></div>
<img src="./pic/boxes/box_quantum_of_solace.png" width="186px" height="270px">
<p>
Quantum of solace
</p>
<p>
<img src="./assets/img/imdb.png" width="52px" height="24px">
<span>7.4<span>/10</span></span>
</p>
</li>
<li class="broadcast" onclick="alert('Quantum of solace')">
<div class="image_background"></div>
<img src="./pic/boxes/box_quantum_of_solace.png" width="186px" height="270px">
<p>
Quantum of solace
</p>
<p>
<img src="./assets/img/imdb.png" width="52px" height="24px">
<span>7.4<span>/10</span></span>
</p>
</li>
<li class="broadcast" onclick="alert('Quantum of solace')">
<div class="image_background"></div>
<img src="./pic/boxes/box_quantum_of_solace.png" width="186px" height="270px">
<p>
Quantum of solace
</p>
<p>
<img src="./assets/img/imdb.png" width="52px" height="24px">
<span>7.4<span>/10</span></span>
</p>
</li>
<div class="">
</div>
</html-gl>
</section>
</div>
<script src="./js/vendor/velocity.js"></script>
<script src="./js/slider.js"></script>
<script>
window.addEventListener('load', function () {
setTimeout(function () {
Velocity(document.getElementsByTagName('html-gl')[0], {translateX: 408}, {duration: 500});
}, 500);
});
</script>
</body>
</html>
================================================
FILE: demo/advanced-content-webgl.html
================================================
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./assets/css/style.css">
<title>HTML GL nested content</title>
<meta name="viewport" content="width=1024 maximum-scale=1.0 minimum-scale=1.0 initial-scale=1.0, user-scalable=no" />
</head>
<body>
<div class="content_wrapper">
<h1>MENU RENDERED IN DOM</h1>
<nav class="top_nav">
<ul class="menu expanded">
<li><a target="_blank" href="http://pixelscommander.com/en/web-applications-performance/render-html-css-in-webgl-to-get-highest-performance-possibl/">ABOUT HTML-GL</a></li>
<li><a target="_blank" href="https://github.com/PixelsCommander/HTML-GL">GITHUB REPO</a></li>
<li><a target="_blank" href="https://github.com/PixelsCommander/HTML-GL/archive/master.zip">DOWNLOAD</a></li>
</ul>
<ul class="submenu">
<li>MOVIES</li>
<li>TV</li>
<li>KIDS</li>
<li>
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style">
<iframe style="display: inline-block;"
src="http://ghbtns.com/github-btn.html?user=PixelsCommander&repo=HTML-GL&type=watch"
allowtransparency="true" frameborder="0" scrolling="0" width="62" height="20"></iframe>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_google_plusone" g:plusone:size="medium"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-4ea2f9164143bcfb"></script>
<!-- AddThis Button END -->
</li>
</ul>
</nav>
<section class="broadcasts_list">
<h1>SLIDER BELOW IS RENDERED IN WEBGL, DRAG IT</h1>
<html-gl class="horizontal_carusel">
<li class="broadcast" onclick="alert('Clicked Argo')">
<div class="image_background"></div>
<img src="./pic/boxes/box_argo.png" width="186px" height="270px">
<p>
Select me with DevTools
</p>
<p>
<img src="./assets/img/imdb.png" width="52px" height="24px">
<span>7.8<span>/10</span></span>
</p>
</li>
<li class="broadcast" onclick="alert('Clicked Avatar')">
<div class="image_background"></div>
<img src="./pic/boxes/box_avatar.png" width="186px" height="270px">
<p>
Change me in DevTools
</p>
<p>
<img src="./assets/img/imdb.png" width="52px" height="24px">
<span>8.0<span>/10</span></span>
</p>
</li>
<li class="broadcast" onclick="alert('Clicked Breaking Bad')">
<div class="image_background"></div>
<img src="./pic/boxes/box_breaking_bad.png" width="186px" height="270px">
<p>
Breaking bad
</p>
<p>
<img src="./assets/img/imdb.png" width="52px" height="24px">
<span>9.6<span>/10</span></span>
</p>
</li>
<li class="broadcast" onclick="alert('Quantum of solace')">
<div class="image_background"></div>
<img src="./pic/boxes/box_quantum_of_solace.png" width="186px" height="270px">
<p>
Quantum of solace
</p>
<p>
<img src="./assets/img/imdb.png" width="52px" height="24px">
<span>6.7<span>/10</span></span>
</p>
</li>
<li class="broadcast" onclick="alert('Quantum of solace')">
<div class="image_background"></div>
<img src="./pic/boxes/box_quantum_of_solace.png" width="186px" height="270px">
<p>
Quantum of solace
</p>
<p>
<img src="./assets/img/imdb.png" width="52px" height="24px">
<span>7.4<span>/10</span></span>
</p>
</li>
<li class="broadcast" onclick="alert('Quantum of solace')">
<div class="image_background"></div>
<img src="./pic/boxes/box_quantum_of_solace.png" width="186px" height="270px">
<p>
Quantum of solace
</p>
<p>
<img src="./assets/img/imdb.png" width="52px" height="24px">
<span>7.4<span>/10</span></span>
</p>
</li>
<li class="broadcast" onclick="alert('Quantum of solace')">
<div class="image_background"></div>
<img src="./pic/boxes/box_quantum_of_solace.png" width="186px" height="270px">
<p>
Quantum of solace
</p>
<p>
<img src="./assets/img/imdb.png" width="52px" height="24px">
<span>7.4<span>/10</span></span>
</p>
</li>
<li class="broadcast" onclick="alert('Quantum of solace')">
<div class="image_background"></div>
<img src="./pic/boxes/box_quantum_of_solace.png" width="186px" height="270px">
<p>
Quantum of solace
</p>
<p>
<img src="./assets/img/imdb.png" width="52px" height="24px">
<span>7.4<span>/10</span></span>
</p>
</li>
<li class="broadcast" onclick="alert('Quantum of solace')">
<div class="image_background"></div>
<img src="./pic/boxes/box_quantum_of_solace.png" width="186px" height="270px">
<p>
Quantum of solace
</p>
<p>
<img src="./assets/img/imdb.png" width="52px" height="24px">
<span>7.4<span>/10</span></span>
</p>
</li>
<li class="broadcast" onclick="alert('Quantum of solace')">
<div class="image_background"></div>
<img src="./pic/boxes/box_quantum_of_solace.png" width="186px" height="270px">
<p>
Quantum of solace
</p>
<p>
<img src="./assets/img/imdb.png" width="52px" height="24px">
<span>7.4<span>/10</span></span>
</p>
</li>
<div class="">
</div>
</html-gl>
</section>
</div>
<script src="../dist/htmlgl.js"></script>
<script src="../bower_components/webcomponents.js/CustomElements.min.js"></script>
<script src="./js/vendor/velocity.js"></script>
<script src="./js/vendor/html2canvas.js"></script>
<script src="../bower_components/pixi/bin/pixi.js"></script>
<script src="../src/util.js"></script>
<script src="../src/gl-element-resolver.js"></script>
<script src="../src/gl-context.js"></script>
<script src="../src/images-loaded.js"></script>
<script src="../src/gl-element.js"></script>
<script src="./js/slider.js"></script>
<script>
window.addEventListener('load', function () {
setTimeout(function () {
Velocity(document.getElementsByTagName('html-gl')[0], {translateX: 408}, {duration: 500});
}, 500);
});
document.getElementsByTagName('html-gl')[0].addEventListener('htmlglReady', function(e){
alert('htmlglReady');
});
</script>
</body>
</html>
================================================
FILE: demo/assets/css/appstyle.css
================================================
/** Generated by FG **/
@font-face {
font-family: 'Conv_InterstatePro-Bold';
src: url('../fonts/InterstatePro-Bold.eot');
src: local('☺'), url('../fonts/InterstatePro-Bold.woff') format('woff'), url('../fonts/InterstatePro-Bold.ttf') format('truetype'), url('../fonts/InterstatePro-Bold.svg') format('svg');
font-weight: normal;
font-style: normal;
}
/** Generated by FG **/
@font-face {
font-family: 'Conv_InterstatePro-Light';
src: url('../fonts/InterstatePro-Light.eot');
src: local('☺'), url('../fonts/InterstatePro-Light.woff') format('woff'), url('../fonts/InterstatePro-Light.ttf') format('truetype'), url('../fonts/InterstatePro-Light.svg') format('svg');
font-weight: normal;
font-style: normal;
}
/** Generated by FG **/
@font-face {
font-family: 'Conv_InterstatePro-ExtraLight';
src: url('../fonts/InterstatePro-ExtraLight.eot');
src: local('☺'), url('../fonts/InterstatePro-ExtraLight.woff') format('woff'), url('../fonts/InterstatePro-ExtraLight.ttf') format('truetype'), url('../fonts/InterstatePro-ExtraLight.svg') format('svg');
font-weight: normal;
font-style: normal;
}
/** Generated by FG **/
@font-face {
font-family: 'Conv_InterstatePro-Regular';
src: url('../fonts/InterstatePro-Regular.eot');
src: local('☺'), url('../fonts/InterstatePro-Regular.woff') format('woff'), url('../fonts/InterstatePro-Regular.ttf') format('truetype'), url('../fonts/InterstatePro-Regular.svg') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "UPCDigital";
src: url(../fonts/DAWN-UPCDiRg.ttf) format("truetype");
font-weight: 400;
}
@font-face {
font-family: 'UPCDigital-bold';
src: url(../fonts/DAWN-UPCDiBd.ttf) format('truetype');
}
body {
box-sizing: border-box;
/* padding: 20px 43px 0 43px; */
margin: 0;
font-family: Conv_InterstatePro-Regular;
font-weight: normal;
font-size: 24px;
color: #2c3e50;
width: 100%;
height: 100%;
background-color: #ecf0f1;
overflow-x: hidden;
}
ul {
list-style: none;
}
li {
text-align: center;
display: inline-block;
vertical-align:top;
padding: 20px;
}
p {
width: 128px;
margin-top: 15px;
}
================================================
FILE: demo/assets/css/style.css
================================================
/** Generated by FG **/
@font-face {
font-family: 'Conv_InterstatePro-Bold';
src: url('../fonts/InterstatePro-Bold.eot');
src: local('☺'), url('../fonts/InterstatePro-Bold.woff') format('woff'), url('../fonts/InterstatePro-Bold.ttf') format('truetype'), url('../fonts/InterstatePro-Bold.svg') format('svg');
font-weight: normal;
font-style: normal;
}
/** Generated by FG **/
@font-face {
font-family: 'Conv_InterstatePro-Light';
src: url('../fonts/InterstatePro-Light.eot');
src: local('☺'), url('../fonts/InterstatePro-Light.woff') format('woff'), url('../fonts/InterstatePro-Light.ttf') format('truetype'), url('../fonts/InterstatePro-Light.svg') format('svg');
font-weight: normal;
font-style: normal;
}
/** Generated by FG **/
@font-face {
font-family: 'Conv_InterstatePro-ExtraLight';
src: url('../fonts/InterstatePro-ExtraLight.eot');
src: local('☺'), url('../fonts/InterstatePro-ExtraLight.woff') format('woff'), url('../fonts/InterstatePro-ExtraLight.ttf') format('truetype'), url('../fonts/InterstatePro-ExtraLight.svg') format('svg');
font-weight: normal;
font-style: normal;
}
/** Generated by FG **/
@font-face {
font-family: 'Conv_InterstatePro-Regular';
src: url('../fonts/InterstatePro-Regular.eot');
src: local('☺'), url('../fonts/InterstatePro-Regular.woff') format('woff'), url('../fonts/InterstatePro-Regular.ttf') format('truetype'), url('../fonts/InterstatePro-Regular.svg') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "UPCDigital";
src: url(../fonts/DAWN-UPCDiRg.ttf) format("truetype");
font-weight: 400;
}
@font-face {
font-family: 'UPCDigital-bold';
src: url(../fonts/DAWN-UPCDiBd.ttf) format('truetype');
}
html {
overflow-x: hidden;
}
body {
box-sizing: border-box;
padding: 30px 93px 0 93px;
margin: 0;
font-family: Conv_InterstatePro-Regular;
font-weight: normal;
color: #ffffff;
width: 100%;
height: 100%;
background: url("../../pic/bgs/Descendants.png") no-repeat #000000;
overflow-x: hidden;
}
html-gl {
display: block;
}
h1 {
font-family: verdana, sans-serif;
font-size: 16px;
margin: 0 0 30px 0;
font-weight: 300;
color: #858382;
}
.menu {
font-size: 30px;
}
.menu.expanded {
border-bottom: 1px solid #858382;
}
a {
font-family: verdana, sans-serif;
margin: 0 0 30px 0;
font-weight: 300;
color: #ffffff;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
ul.menu,
ul.submenu {
list-style: none;
margin: 0;
padding: 0;
line-height: 1em;
padding: 0 0 6px 0;
}
ul.submenu {
padding: 6px 0 0 0;
}
.menu li {
display: inline;
padding-right: 30px;
}
.submenu {
font-size: 26px;
}
.submenu li {
overflow: hidden;
height: 24px;
display: inline-block;
padding-right: 30px;
}
.broadcasts_list {
margin: 36px 0 0 0;
padding: 0 0 36px 0;
/* TODO Implement overflow masks in WebGL
overflow-x: hidden;*/
}
.broadcasts_list h1 {
font-family: Conv_InterstatePro-Light;
font-size: 22px;
font-weight: 300;
margin: 0 0 5px 0;
line-height: 1em;
}
.broadcasts_list ul {
list-style: none;
padding: 0;
margin: 0;
white-space: nowrap;
}
.broadcasts_list li {
display: inline-block;
width: 186px;
margin-right: 15px;
}
.broadcast {
position: relative;
font-family: "UPCDigital";
font-size: 16px;
line-height: 24px;
}
.image_overlay,
.image_background,
.broadcast > img {
width: 186px;
height: 270px;
}
.image_background {
position: absolute;
left: 0;
top: 0;
background-color: #000000;
}
.broadcast > img {
width: 186px;
height: 270px;
border: 1px solid #858382;
box-sizing: border-box;
opacity: 0.8;
}
.image_overlay {
position: absolute;
left: 0;
top: 0;
background-color: #000000;
opacity: 0.2;
}
.broadcast p {
line-height: 20px;
margin: 0 0 3px 0;
padding: 0;
color: #D2D2D2;
}
.broadcast p img {
width: 52px;
height: 24px;
display: inline-block;
}
.broadcast p > span {
font-family: UPCDigital-bold;
display: inline-block;
color: #ffffff;
vertical-align: top;
font-size: 16px;
margin-left: 3px;
}
.broadcast p > span span {
color: #808080;
display: inline-block;
vertical-align: baseline;
font-size: 12px;
}
================================================
FILE: demo/assets/fonts/README-FONTS.txt
================================================
we experienced that web apps could reference their own versions of fonts our app uses
in some cases this broke DAWN for example, special characters began to display incorrectly
in order to avoid this situation, we're namespacing our fonts with the 'DAWN-' prefix
the rename function of the Typelite application (http://www.cr8software.net/typex.html) was used
to accomplish this initially
================================================
FILE: demo/basic-dom.html
================================================
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>HTML GL demo</title>
<style>
html-gl {
display: inline-block;
}
</style>
<script src="./js/vendor/velocity.js"></script>
</head>
<body>
<h1>HTML GL demo</h1>
<html-gl>
This layer is rendered as a <h1>DOM</h1> <span style="color: red;">because</span> <b>HTML GL</b> is disabled
</html-gl>
<button onclick="window.animate()">Animate WebGL layer</button>
<button onclick="window.changeNodeContent()">Change layer content</button>
<button onclick="window.changeNodeTransform()">Simply change layer`s style.transform</button>
<h2>
TODO
</h2>
<ul>
<li>Switch to WebGL for more performant animations</li>
</ul>
<script>
window.changeNodeContent = function () {
document.getElementsByTagName('html-gl')[0].textContent = 'DOM is a bit slower, but still ok on desktop. However for mobile WebGL is a way better.';
}
window.changeNodeTransform = function () {
var element = document.getElementsByTagName('html-gl')[0];
element.style.webkitTransform = 'translateX(400px) translateY(100px)';
element.style.transform = 'translateX(400px) translateY(100px)';
}
window.animate = function () {
var element = document.getElementsByTagName('html-gl')[0];
Velocity(element, {
translateX: 100,
translateY: 100,
translateZ: 0,
scaleX: 4,
scaleY: 4,
rotateZ: "360deg"
}, {duration: 5000})
.then(function () {
Velocity(element, {
translateX: 0,
translateY: 0,
translateZ: 0,
scaleX: 1,
scaleY: 1,
rotateZ: "0"
}, {duration: 5000});
});
}
</script>
</body>
</html>
================================================
FILE: demo/basic-webgl-jquery.html
================================================
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>HTML GL demo</title>
<script src="../bower_components/promise-polyfill/Promise.min.js"></script>
<script src="../bower_components/webcomponents.js/CustomElements.min.js"></script>
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
<script src="./js/vendor/velocity.js"></script>
<script src="./js/vendor/html2canvas.js"></script>
<script src="../bower_components/pixi/bin/pixi.dev.js"></script>
<script src="../src/util.js"></script>
<script src="../src/gl-element-resolver.js"></script>
<script src="../src/gl-context.js"></script>
<script src="../src/images-loaded.js"></script>
<script src="../src/gl-element.js"></script>
</head>
<!-- Adding style since demo is designed for inline-block, otherwise will have full screen width -->
<style>
#htmlgl-content {
display: inline-block;
}
</style>
<body>
<h1>HTML GL demo</h1>
<div id="htmlgl-content">
This layer is rendered in <h1>WebGL</h1> <span style="color: red;">because</span> it have tag name <b>html-gl</b>
</div>
<button onclick="window.animate()">Animate WebGL layer</button>
<button onclick="window.changeNodeContent()">Change layer content</button>
<button onclick="window.changeNodeTransform()">Simply change layer`s style.transform</button>
<h2>
TODO
</h2>
<ul>
<li>Add retina support in order to avoid blurry content</li>
</ul>
<script>
$('#htmlgl-content').htmlgl();
window.changeNodeContent = function () {
document.getElementsByTagName('div')[0].textContent = 'Animation was smooth, was not it? This is a new content. It is still visible in dev tools, affects HTML layout and is rendered via WebGL.';
}
window.changeNodeTransform = function () {
var element = document.getElementsByTagName('div')[0];
element.style.webkitTransform = 'translateX(400px) translateY(100px)';
element.style.transform = 'translateX(400px) translateY(100px)';
}
window.animate = function () {
$('#htmlgl-content').velocity({
translateX: 100,
translateY: 100,
scaleX: 4,
scaleY: 4,
rotateZ: "360deg"
}, { duration: 1000 }).velocity({
translateX: 0,
translateY: 0,
scaleX: 1,
scaleY: 1,
rotateZ: "0"
}, { duration: 1000 });
}
</script>
</body>
</html>
================================================
FILE: demo/basic-webgl.html
================================================
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>HTML GL demo</title>
</head>
<body style="height: 1024px;">
<h1>HTML GL demo</h1>
<html-gl>
This layer is rendered in <h1>WebGL</h1> <span style="color: red;">because</span> it have tag name <b>html-gl</b>
</html-gl>
<button onclick="window.animate()">Animate WebGL layer</button>
<button onclick="window.changeNodeContent()">Change layer content</button>
<button onclick="window.changeNodeTransform()">Simply change layer`s style.transform</button>
<h2>
TODO
</h2>
<ul>
<li>Add more effects presets</li>
</ul>
<script src="../dist/htmlgl.js"></script>
<script>
window.changeNodeContent = function () {
document.getElementsByTagName('html-gl')[0].textContent = 'Animation was smooth, was not it? This is a new content. It is still visible in dev tools, affects HTML layout and is rendered via WebGL.';
}
window.changeNodeTransform = function () {
var element = document.getElementsByTagName('html-gl')[0];
element.style.webkitTransform = 'translateX(400px) translateY(100px)';
element.style.transform = 'translateX(400px) translateY(100px)';
}
document.addEventListener('keydown', function(){
window.devicePixelRatio = window.devicePixelRatio === 1 ? 2 : 1;
HTMLGL.context.resizeViewer();
});
window.animate = function () {
var element = document.getElementsByTagName('html-gl')[0];
var v = Velocity(element, {
translateX: 100,
translateY: 100,
scaleX: 4,
scaleY: 4,
rotateZ: "360deg"
}, {duration: 5000}).then(function () {
Velocity(element, {
translateX: 0,
translateY: 0,
scaleX: 1,
scaleY: 1,
rotateZ: "0"
}, {duration: 5000});
});
}
</script>
</body>
</html>
================================================
FILE: demo/filters.html
================================================
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./assets/css/style.css">
<title>HTML GL filters demo</title>
<meta name="viewport" content="width=1024 maximum-scale=1.0 minimum-scale=1.0 initial-scale=1.0, user-scalable=no" />
</head>
<body>
<div class="content_wrapper">
<h1>MENU RENDERED IN DOM</h1>
<nav class="top_nav">
<ul class="menu expanded">
<li><a target="_blank" href="http://pixelscommander.com/en/web-applications-performance/render-html-css-in-webgl-to-get-highest-performance-possibl/">ABOUT HTML-GL</a></li>
<li><a target="_blank" href="https://github.com/PixelsCommander/HTML-GL">GITHUB REPO</a></li>
</ul>
<ul class="submenu">
<li><a target="_blank" href="https://github.com/PixelsCommander/HTML-GL/archive/master.zip">DOWNLOAD</a></li>
<li>
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style">
<iframe style="display: inline-block;"
src="http://ghbtns.com/github-btn.html?user=PixelsCommander&repo=HTML-GL&type=watch"
allowtransparency="true" frameborder="0" scrolling="0" width="62" height="20"></iframe>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_google_plusone" g:plusone:size="medium"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-4ea2f9164143bcfb"></script>
<!-- AddThis Button END -->
</li>
</ul>
</nav>
<section class="broadcasts_list">
<h1>SLIDER BELOW IS RENDERED IN WEBGL, DRAG IT</h1>
<html-gl class="horizontal_carusel">
<li class="broadcast" onclick="alert('Clicked Argo')">
<div class="image_background"></div>
<img src="./pic/boxes/box_argo.png" width="186px" height="270px">
<p>
Select me with DevTools
</p>
<p>
<img src="./assets/img/imdb.png" width="52px" height="24px">
<span>7.8<span>/10</span></span>
</p>
</li>
<li class="broadcast" onclick="alert('Clicked Avatar')">
<div class="image_background"></div>
<img src="./pic/boxes/box_avatar.png" width="186px" height="270px">
<p>
Change me in DevTools
</p>
<p>
<img src="./assets/img/imdb.png" width="52px" height="24px">
<span>8.0<span>/10</span></span>
</p>
</li>
<li class="broadcast" onclick="alert('Clicked Breaking Bad')">
<div class="image_background"></div>
<img src="./pic/boxes/box_breaking_bad.png" width="186px" height="270px">
<p>
Breaking bad
</p>
<p>
<img src="./assets/img/imdb.png" width="52px" height="24px">
<span>9.6<span>/10</span></span>
</p>
</li>
<li class="broadcast" onclick="alert('Quantum of solace')">
<div class="image_background"></div>
<img src="./pic/boxes/box_quantum_of_solace.png" width="186px" height="270px">
<p>
Quantum of solace
</p>
<p>
<img src="./assets/img/imdb.png" width="52px" height="24px">
<span>6.7<span>/10</span></span>
</p>
</li>
<li class="broadcast" onclick="alert('Quantum of solace')">
<div class="image_background"></div>
<img src="./pic/boxes/box_quantum_of_solace.png" width="186px" height="270px">
<p>
Quantum of solace
</p>
<p>
<img src="./assets/img/imdb.png" width="52px" height="24px">
<span>7.4<span>/10</span></span>
</p>
</li>
<li class="broadcast" onclick="alert('Quantum of solace')">
<div class="image_background"></div>
<img src="./pic/boxes/box_quantum_of_solace.png" width="186px" height="270px">
<p>
Quantum of solace
</p>
<p>
<img src="./assets/img/imdb.png" width="52px" height="24px">
<span>7.4<span>/10</span></span>
</p>
</li>
<li class="broadcast" onclick="alert('Quantum of solace')">
<div class="image_background"></div>
<img src="./pic/boxes/box_quantum_of_solace.png" width="186px" height="270px">
<p>
Quantum of solace
</p>
<p>
<img src="./assets/img/imdb.png" width="52px" height="24px">
<span>7.4<span>/10</span></span>
</p>
</li>
<li class="broadcast" onclick="alert('Quantum of solace')">
<div class="image_background"></div>
<img src="./pic/boxes/box_quantum_of_solace.png" width="186px" height="270px">
<p>
Quantum of solace
</p>
<p>
<img src="./assets/img/imdb.png" width="52px" height="24px">
<span>7.4<span>/10</span></span>
</p>
</li>
<li class="broadcast" onclick="alert('Quantum of solace')">
<div class="image_background"></div>
<img src="./pic/boxes/box_quantum_of_solace.png" width="186px" height="270px">
<p>
Quantum of solace
</p>
<p>
<img src="./assets/img/imdb.png" width="52px" height="24px">
<span>7.4<span>/10</span></span>
</p>
</li>
<li class="broadcast" onclick="alert('Quantum of solace')">
<div class="image_background"></div>
<img src="./pic/boxes/box_quantum_of_solace.png" width="186px" height="270px">
<p>
Quantum of solace
</p>
<p>
<img src="./assets/img/imdb.png" width="52px" height="24px">
<span>7.4<span>/10</span></span>
</p>
</li>
<div class="">
</div>
</html-gl>
</section>
</div>
<script src="../bower_components/promise-polyfill/Promise.min.js"></script>
<script src="../bower_components/webcomponents.js/CustomElements.min.js"></script>
<script src="./js/vendor/velocity.js"></script>
<script src="./js/vendor/html2canvas.js"></script>
<script src="../bower_components/pixi/bin/pixi.js"></script>
<script src="../src/util.js"></script>
<script src="../src/gl-element-resolver.js"></script>
<script src="../src/gl-context.js"></script>
<script src="../src/images-loaded.js"></script>
<script src="../src/gl-element.js"></script>
<script src="./js/slider.js"></script>
<script src="./js/vendor/dat.gui.min.js"></script>
<script>
var renderer = window.HTMLGL.renderer;
var filtersSwitchs = [true, false, false, false, false, false, false, false, false, false, false];
var gui = new dat.GUI({});
var displacementSprite = new PIXI.TilingSprite.fromImage("assets/img/displacement_map.jpg");
window.HTMLGL.stage.addChild(displacementSprite);
var displacementFilter = new PIXI.filters.DisplacementFilter(displacementSprite);
var displacementFolder = gui.addFolder('Displacement');
displacementFolder.add(filtersSwitchs, '0').name("apply");
displacementFolder.add(displacementFilter.scale, 'x', 1, 200).name("scaleX");
displacementFolder.add(displacementFilter.scale, 'y', 1, 200).name("scaleY");
displacementFolder.open();
var blurFilter = new PIXI.filters.BlurFilter();
var blurFolder = gui.addFolder('Blur');
blurFolder.add(filtersSwitchs, '1').name("apply");
blurFolder.add(blurFilter, 'blurX', 0, 32).name("blurX");
blurFolder.add(blurFilter, 'blurY', 0, 32).name("blurY");
////
var pixelateFilter = new PIXI.filters.PixelateFilter();
var pixelateFolder = gui.addFolder('Pixelate');
pixelateFolder.add(filtersSwitchs, '2').name("apply");
pixelateFolder.add(pixelateFilter.size, 'x', 1, 32).name("PixelSizeX");
pixelateFolder.add(pixelateFilter.size, 'y', 1, 32).name("PixelSizeY");
////
var invertFilter = new PIXI.filters.InvertFilter();
var invertFolder = gui.addFolder('Invert');
invertFolder.add(filtersSwitchs, '3').name("apply");
invertFolder.add(invertFilter, 'invert', 0, 1).name("Invert");
////
var grayFilter = new PIXI.filters.GrayFilter();
var grayFolder = gui.addFolder('Gray');
grayFolder.add(filtersSwitchs, '4').name("apply");
grayFolder.add(grayFilter, 'gray', 0, 1).name("Gray");
////
var sepiaFilter = new PIXI.filters.SepiaFilter();
var sepiaFolder = gui.addFolder('Sepia');
sepiaFolder.add(filtersSwitchs, '5').name("apply");
sepiaFolder.add(sepiaFilter, 'sepia', 0, 1).name("Sepia");
////
var twistFilter = new PIXI.filters.TwistFilter();
var twistFolder = gui.addFolder('Twist');
twistFolder.add(filtersSwitchs, '6').name("apply");
twistFolder.add(twistFilter, 'angle', 0, 10).name("Angle");
twistFolder.add(twistFilter, 'radius', 0, 1).name("Radius");
twistFolder.add(twistFilter.offset, 'x', 0, 1).name("offset.x");;
twistFolder.add(twistFilter.offset, 'y', 0, 1).name("offset.y");;
////
var dotScreenFilter = new PIXI.filters.DotScreenFilter();
var dotScreenFolder = gui.addFolder('DotScreen');
dotScreenFolder.add(filtersSwitchs, '7').name("apply");
dotScreenFolder.add(dotScreenFilter, 'angle', 0, 10);
dotScreenFolder.add(dotScreenFilter, 'scale', 0, 1);
////
var colorStepFilter = new PIXI.filters.ColorStepFilter();
var colorStepFolder = gui.addFolder('ColorStep');
colorStepFolder.add(filtersSwitchs, '8').name("apply");
colorStepFolder.add(colorStepFilter, 'step', 1, 100);
colorStepFolder.add(colorStepFilter, 'step', 1, 100);
////
var crossHatchFilter = new PIXI.filters.CrossHatchFilter();
var crossHatchFolder = gui.addFolder('CrossHatch');
crossHatchFolder.add(filtersSwitchs, '9').name("apply");
var rgbSplitterFilter = new PIXI.filters.RGBSplitFilter();
rgbSplitterFilter.blue = new PIXI.Point(10, 10);
rgbSplitterFilter.green = new PIXI.Point(-10, 10);
rgbSplitterFilter.red = new PIXI.Point(10, -10);
var rgbSplitFolder = gui.addFolder('RGB Splitter');
rgbSplitFolder.add(filtersSwitchs, '10').name("apply");
var filterCollection = [displacementFilter, blurFilter, pixelateFilter, invertFilter, grayFilter, sepiaFilter, twistFilter, dotScreenFilter, colorStepFilter, crossHatchFilter, rgbSplitterFilter];
// create an new instance of a pixi stage
var stage = window.HTMLGL.stage;
var pondContainer = window.HTMLGL.document;
stage.addChild(pondContainer);
stage.interactive = true;
var padding = 100;
var bounds = new PIXI.Rectangle(-padding, -padding, window.HTMLGL.renderer.width + padding * 2, window.HTMLGL.renderer.height + padding * 2)
var overlay = new PIXI.TilingSprite(PIXI.Texture.fromImage("assets/img/zeldaWaves.png"), window.HTMLGL.renderer.width, window.HTMLGL.renderer.height);
overlay.alpha = 0.1//0.2
pondContainer.addChild(overlay);
displacementFilter.scale.x = 50;
displacementFilter.scale.y = 50;
var count = 0;
var switchy = false;
function animate() {
count += 0.1;
var blurAmount = Math.cos(count) ;
var blurAmount2 = Math.sin(count * 0.8) ;
var filtersToApply = [];
filtersSwitchs[0] ? overlay.visible = true : overlay.visible = false;
for (var i = 0; i < filterCollection.length; i++) {
if(filtersSwitchs[i])filtersToApply.push(filterCollection[i]);
};
var rgbFilterIndex = filtersToApply.indexOf(rgbSplitterFilter);
if (rgbFilterIndex !== -1) {
HTMLGL.elements[0].sprite.filters = [rgbSplitterFilter];
filtersToApply.splice(rgbFilterIndex, 1);
} else {
if (HTMLGL.elements[0].sprite.filters) {
var rgbFilterIndexOnSlider = HTMLGL.elements[0].sprite.filters.indexOf(rgbSplitterFilter);
if (rgbFilterIndexOnSlider !== -1) {
HTMLGL.elements[0].sprite.filters = null;
}
}
}
pondContainer.filters = filtersToApply.length > 0 ? filtersToApply : null;
displacementSprite.x = count * 10;
displacementSprite.y = count * 10;
overlay.tilePosition.x = count * -10;
overlay.tilePosition.y = count * -10;
renderer.render(stage);
requestAnimationFrame( animate );
}
renderer.render(stage);
requestAnimationFrame( animate );
</script>
</body>
</html>
================================================
FILE: demo/js/slider.js
================================================
//Slider logic, written in HTML / JS.
//The only difference between HTML GL and basic HTML is that you should use element.styleGL.transform instead of element.style.transform
var images = document.getElementsByTagName('img'),
dragStart = false,
slider = document.getElementsByTagName('html-gl')[0],
startX = 0,
startLeft = 0,
transformPropertyName = document.body.style.transform !== undefined ? 'transform' : 'WebkitTransform';
for (var i = 0; i < images.length; i++) {
images[i].ondragstart = function () {
return false;
};
}
function setSliderX(x) {
(slider.styleGL || slider.style)[transformPropertyName] = 'translateZ(0) translateX(' + (startLeft - (startX - (x || 0))) + 'px)';
}
function getSliderX() {
return parseInt(parseCSSTransform((slider.styleGL || slider.style)[transformPropertyName]).translateX) || 0
}
function onDragStart(event) {
dragStart = true;
startX = (event.pageX || event.x) || event.touches[0].pageX;
startLeft = getSliderX();
}
function onDragEnd() {
dragStart = false;
}
function onMove(event) {
if (dragStart) {
var pageX = (event.pageX || event.x) || event.touches[0].pageX,
moveTime = new Date();
setSliderX(pageX);
}
}
slider.addEventListener('mousedown', onDragStart);
slider.addEventListener('mouseup', onDragEnd);
slider.addEventListener('mousemove', onMove);
slider.addEventListener('touchstart', onDragStart);
slider.addEventListener('touchend', onDragEnd);
slider.addEventListener('touchmove', onMove);
parseCSSTransform = function (transformString) {
return (transformString.match(/([\w]+)\(([^\)]+)\)/g) || [])
//make pairs of prop and value
.map(function (it) {
return it.replace(/\)$/, "").split(/\(/)
})
//convert to key-value map/object
.reduce(function (m, it) {
return m[it[0]] = it[1], m
}, {});
}
================================================
FILE: demo/js/vendor/html2canvas.js
================================================
/*
html2canvas 0.5.0-alpha2 <http://html2canvas.hertzen.com>
Copyright (c) 2015 Niklas von Hertzen
Released under MIT License
*/
(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.html2canvas = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
(function (process,global){
/*!
* @overview es6-promise - a tiny implementation of Promises/A+.
* @copyright Copyright (c) 2014 Yehuda Katz, Tom Dale, Stefan Penner and contributors (Conversion to ES6 API by Jake Archibald)
* @license Licensed under MIT license
* See https://raw.githubusercontent.com/jakearchibald/es6-promise/master/LICENSE
* @version 2.3.0
*/
(function() {
"use strict";
function lib$es6$promise$utils$$objectOrFunction(x) {
return typeof x === 'function' || (typeof x === 'object' && x !== null);
}
function lib$es6$promise$utils$$isFunction(x) {
return typeof x === 'function';
}
function lib$es6$promise$utils$$isMaybeThenable(x) {
return typeof x === 'object' && x !== null;
}
var lib$es6$promise$utils$$_isArray;
if (!Array.isArray) {
lib$es6$promise$utils$$_isArray = function (x) {
return Object.prototype.toString.call(x) === '[object Array]';
};
} else {
lib$es6$promise$utils$$_isArray = Array.isArray;
}
var lib$es6$promise$utils$$isArray = lib$es6$promise$utils$$_isArray;
var lib$es6$promise$asap$$len = 0;
var lib$es6$promise$asap$$toString = {}.toString;
var lib$es6$promise$asap$$vertxNext;
var lib$es6$promise$asap$$customSchedulerFn;
var lib$es6$promise$asap$$asap = function asap(callback, arg) {
lib$es6$promise$asap$$queue[lib$es6$promise$asap$$len] = callback;
lib$es6$promise$asap$$queue[lib$es6$promise$asap$$len + 1] = arg;
lib$es6$promise$asap$$len += 2;
if (lib$es6$promise$asap$$len === 2) {
// If len is 2, that means that we need to schedule an async flush.
// If additional callbacks are queued before the queue is flushed, they
// will be processed by this flush that we are scheduling.
if (lib$es6$promise$asap$$customSchedulerFn) {
lib$es6$promise$asap$$customSchedulerFn(lib$es6$promise$asap$$flush);
} else {
lib$es6$promise$asap$$scheduleFlush();
}
}
}
function lib$es6$promise$asap$$setScheduler(scheduleFn) {
lib$es6$promise$asap$$customSchedulerFn = scheduleFn;
}
function lib$es6$promise$asap$$setAsap(asapFn) {
lib$es6$promise$asap$$asap = asapFn;
}
var lib$es6$promise$asap$$browserWindow = (typeof window !== 'undefined') ? window : undefined;
var lib$es6$promise$asap$$browserGlobal = lib$es6$promise$asap$$browserWindow || {};
var lib$es6$promise$asap$$BrowserMutationObserver = lib$es6$promise$asap$$browserGlobal.MutationObserver || lib$es6$promise$asap$$browserGlobal.WebKitMutationObserver;
var lib$es6$promise$asap$$isNode = typeof process !== 'undefined' && {}.toString.call(process) === '[object process]';
// test for web worker but not in IE10
var lib$es6$promise$asap$$isWorker = typeof Uint8ClampedArray !== 'undefined' &&
typeof importScripts !== 'undefined' &&
typeof MessageChannel !== 'undefined';
// node
function lib$es6$promise$asap$$useNextTick() {
var nextTick = process.nextTick;
// node version 0.10.x displays a deprecation warning when nextTick is used recursively
// setImmediate should be used instead instead
var version = process.versions.node.match(/^(?:(\d+)\.)?(?:(\d+)\.)?(\*|\d+)$/);
if (Array.isArray(version) && version[1] === '0' && version[2] === '10') {
nextTick = setImmediate;
}
return function() {
nextTick(lib$es6$promise$asap$$flush);
};
}
// vertx
function lib$es6$promise$asap$$useVertxTimer() {
return function() {
lib$es6$promise$asap$$vertxNext(lib$es6$promise$asap$$flush);
};
}
function lib$es6$promise$asap$$useMutationObserver() {
var iterations = 0;
var observer = new lib$es6$promise$asap$$BrowserMutationObserver(lib$es6$promise$asap$$flush);
var node = document.createTextNode('');
observer.observe(node, { characterData: true });
return function() {
node.data = (iterations = ++iterations % 2);
};
}
// web worker
function lib$es6$promise$asap$$useMessageChannel() {
var channel = new MessageChannel();
channel.port1.onmessage = lib$es6$promise$asap$$flush;
return function () {
channel.port2.postMessage(0);
};
}
function lib$es6$promise$asap$$useSetTimeout() {
return function() {
setTimeout(lib$es6$promise$asap$$flush, 1);
};
}
var lib$es6$promise$asap$$queue = new Array(1000);
function lib$es6$promise$asap$$flush() {
for (var i = 0; i < lib$es6$promise$asap$$len; i+=2) {
var callback = lib$es6$promise$asap$$queue[i];
var arg = lib$es6$promise$asap$$queue[i+1];
callback(arg);
lib$es6$promise$asap$$queue[i] = undefined;
lib$es6$promise$asap$$queue[i+1] = undefined;
}
lib$es6$promise$asap$$len = 0;
}
function lib$es6$promise$asap$$attemptVertex() {
try {
var r = require;
var vertx = r('vertx');
lib$es6$promise$asap$$vertxNext = vertx.runOnLoop || vertx.runOnContext;
return lib$es6$promise$asap$$useVertxTimer();
} catch(e) {
return lib$es6$promise$asap$$useSetTimeout();
}
}
var lib$es6$promise$asap$$scheduleFlush;
// Decide what async method to use to triggering processing of queued callbacks:
if (lib$es6$promise$asap$$isNode) {
lib$es6$promise$asap$$scheduleFlush = lib$es6$promise$asap$$useNextTick();
} else if (lib$es6$promise$asap$$BrowserMutationObserver) {
lib$es6$promise$asap$$scheduleFlush = lib$es6$promise$asap$$useMutationObserver();
} else if (lib$es6$promise$asap$$isWorker) {
lib$es6$promise$asap$$scheduleFlush = lib$es6$promise$asap$$useMessageChannel();
} else if (lib$es6$promise$asap$$browserWindow === undefined && typeof require === 'function') {
lib$es6$promise$asap$$scheduleFlush = lib$es6$promise$asap$$attemptVertex();
} else {
lib$es6$promise$asap$$scheduleFlush = lib$es6$promise$asap$$useSetTimeout();
}
function lib$es6$promise$$internal$$noop() {}
var lib$es6$promise$$internal$$PENDING = void 0;
var lib$es6$promise$$internal$$FULFILLED = 1;
var lib$es6$promise$$internal$$REJECTED = 2;
var lib$es6$promise$$internal$$GET_THEN_ERROR = new lib$es6$promise$$internal$$ErrorObject();
function lib$es6$promise$$internal$$selfFullfillment() {
return new TypeError("You cannot resolve a promise with itself");
}
function lib$es6$promise$$internal$$cannotReturnOwn() {
return new TypeError('A promises callback cannot return that same promise.');
}
function lib$es6$promise$$internal$$getThen(promise) {
try {
return promise.then;
} catch(error) {
lib$es6$promise$$internal$$GET_THEN_ERROR.error = error;
return lib$es6$promise$$internal$$GET_THEN_ERROR;
}
}
function lib$es6$promise$$internal$$tryThen(then, value, fulfillmentHandler, rejectionHandler) {
try {
then.call(value, fulfillmentHandler, rejectionHandler);
} catch(e) {
return e;
}
}
function lib$es6$promise$$internal$$handleForeignThenable(promise, thenable, then) {
lib$es6$promise$asap$$asap(function(promise) {
var sealed = false;
var error = lib$es6$promise$$internal$$tryThen(then, thenable, function(value) {
if (sealed) { return; }
sealed = true;
if (thenable !== value) {
lib$es6$promise$$internal$$resolve(promise, value);
} else {
lib$es6$promise$$internal$$fulfill(promise, value);
}
}, function(reason) {
if (sealed) { return; }
sealed = true;
lib$es6$promise$$internal$$reject(promise, reason);
}, 'Settle: ' + (promise._label || ' unknown promise'));
if (!sealed && error) {
sealed = true;
lib$es6$promise$$internal$$reject(promise, error);
}
}, promise);
}
function lib$es6$promise$$internal$$handleOwnThenable(promise, thenable) {
if (thenable._state === lib$es6$promise$$internal$$FULFILLED) {
lib$es6$promise$$internal$$fulfill(promise, thenable._result);
} else if (thenable._state === lib$es6$promise$$internal$$REJECTED) {
lib$es6$promise$$internal$$reject(promise, thenable._result);
} else {
lib$es6$promise$$internal$$subscribe(thenable, undefined, function(value) {
lib$es6$promise$$internal$$resolve(promise, value);
}, function(reason) {
lib$es6$promise$$internal$$reject(promise, reason);
});
}
}
function lib$es6$promise$$internal$$handleMaybeThenable(promise, maybeThenable) {
if (maybeThenable.constructor === promise.constructor) {
lib$es6$promise$$internal$$handleOwnThenable(promise, maybeThenable);
} else {
var then = lib$es6$promise$$internal$$getThen(maybeThenable);
if (then === lib$es6$promise$$internal$$GET_THEN_ERROR) {
lib$es6$promise$$internal$$reject(promise, lib$es6$promise$$internal$$GET_THEN_ERROR.error);
} else if (then === undefined) {
lib$es6$promise$$internal$$fulfill(promise, maybeThenable);
} else if (lib$es6$promise$utils$$isFunction(then)) {
lib$es6$promise$$internal$$handleForeignThenable(promise, maybeThenable, then);
} else {
lib$es6$promise$$internal$$fulfill(promise, maybeThenable);
}
}
}
function lib$es6$promise$$internal$$resolve(promise, value) {
if (promise === value) {
lib$es6$promise$$internal$$reject(promise, lib$es6$promise$$internal$$selfFullfillment());
} else if (lib$es6$promise$utils$$objectOrFunction(value)) {
lib$es6$promise$$internal$$handleMaybeThenable(promise, value);
} else {
lib$es6$promise$$internal$$fulfill(promise, value);
}
}
function lib$es6$promise$$internal$$publishRejection(promise) {
if (promise._onerror) {
promise._onerror(promise._result);
}
lib$es6$promise$$internal$$publish(promise);
}
function lib$es6$promise$$internal$$fulfill(promise, value) {
if (promise._state !== lib$es6$promise$$internal$$PENDING) { return; }
promise._result = value;
promise._state = lib$es6$promise$$internal$$FULFILLED;
if (promise._subscribers.length !== 0) {
lib$es6$promise$asap$$asap(lib$es6$promise$$internal$$publish, promise);
}
}
function lib$es6$promise$$internal$$reject(promise, reason) {
if (promise._state !== lib$es6$promise$$internal$$PENDING) { return; }
promise._state = lib$es6$promise$$internal$$REJECTED;
promise._result = reason;
lib$es6$promise$asap$$asap(lib$es6$promise$$internal$$publishRejection, promise);
}
function lib$es6$promise$$internal$$subscribe(parent, child, onFulfillment, onRejection) {
var subscribers = parent._subscribers;
var length = subscribers.length;
parent._onerror = null;
subscribers[length] = child;
subscribers[length + lib$es6$promise$$internal$$FULFILLED] = onFulfillment;
subscribers[length + lib$es6$promise$$internal$$REJECTED] = onRejection;
if (length === 0 && parent._state) {
lib$es6$promise$asap$$asap(lib$es6$promise$$internal$$publish, parent);
}
}
function lib$es6$promise$$internal$$publish(promise) {
var subscribers = promise._subscribers;
var settled = promise._state;
if (subscribers.length === 0) { return; }
var child, callback, detail = promise._result;
for (var i = 0; i < subscribers.length; i += 3) {
child = subscribers[i];
callback = subscribers[i + settled];
if (child) {
lib$es6$promise$$internal$$invokeCallback(settled, child, callback, detail);
} else {
callback(detail);
}
}
promise._subscribers.length = 0;
}
function lib$es6$promise$$internal$$ErrorObject() {
this.error = null;
}
var lib$es6$promise$$internal$$TRY_CATCH_ERROR = new lib$es6$promise$$internal$$ErrorObject();
function lib$es6$promise$$internal$$tryCatch(callback, detail) {
try {
return callback(detail);
} catch(e) {
lib$es6$promise$$internal$$TRY_CATCH_ERROR.error = e;
return lib$es6$promise$$internal$$TRY_CATCH_ERROR;
}
}
function lib$es6$promise$$internal$$invokeCallback(settled, promise, callback, detail) {
var hasCallback = lib$es6$promise$utils$$isFunction(callback),
value, error, succeeded, failed;
if (hasCallback) {
value = lib$es6$promise$$internal$$tryCatch(callback, detail);
if (value === lib$es6$promise$$internal$$TRY_CATCH_ERROR) {
failed = true;
error = value.error;
value = null;
} else {
succeeded = true;
}
if (promise === value) {
lib$es6$promise$$internal$$reject(promise, lib$es6$promise$$internal$$cannotReturnOwn());
return;
}
} else {
value = detail;
succeeded = true;
}
if (promise._state !== lib$es6$promise$$internal$$PENDING) {
// noop
} else if (hasCallback && succeeded) {
lib$es6$promise$$internal$$resolve(promise, value);
} else if (failed) {
lib$es6$promise$$internal$$reject(promise, error);
} else if (settled === lib$es6$promise$$internal$$FULFILLED) {
lib$es6$promise$$internal$$fulfill(promise, value);
} else if (settled === lib$es6$promise$$internal$$REJECTED) {
lib$es6$promise$$internal$$reject(promise, value);
}
}
function lib$es6$promise$$internal$$initializePromise(promise, resolver) {
try {
resolver(function resolvePromise(value){
lib$es6$promise$$internal$$resolve(promise, value);
}, function rejectPromise(reason) {
lib$es6$promise$$internal$$reject(promise, reason);
});
} catch(e) {
lib$es6$promise$$internal$$reject(promise, e);
}
}
function lib$es6$promise$enumerator$$Enumerator(Constructor, input) {
var enumerator = this;
enumerator._instanceConstructor = Constructor;
enumerator.promise = new Constructor(lib$es6$promise$$internal$$noop);
if (enumerator._validateInput(input)) {
enumerator._input = input;
enumerator.length = input.length;
enumerator._remaining = input.length;
enumerator._init();
if (enumerator.length === 0) {
lib$es6$promise$$internal$$fulfill(enumerator.promise, enumerator._result);
} else {
enumerator.length = enumerator.length || 0;
enumerator._enumerate();
if (enumerator._remaining === 0) {
lib$es6$promise$$internal$$fulfill(enumerator.promise, enumerator._result);
}
}
} else {
lib$es6$promise$$internal$$reject(enumerator.promise, enumerator._validationError());
}
}
lib$es6$promise$enumerator$$Enumerator.prototype._validateInput = function(input) {
return lib$es6$promise$utils$$isArray(input);
};
lib$es6$promise$enumerator$$Enumerator.prototype._validationError = function() {
return new Error('Array Methods must be provided an Array');
};
lib$es6$promise$enumerator$$Enumerator.prototype._init = function() {
this._result = new Array(this.length);
};
var lib$es6$promise$enumerator$$default = lib$es6$promise$enumerator$$Enumerator;
lib$es6$promise$enumerator$$Enumerator.prototype._enumerate = function() {
var enumerator = this;
var length = enumerator.length;
var promise = enumerator.promise;
var input = enumerator._input;
for (var i = 0; promise._state === lib$es6$promise$$internal$$PENDING && i < length; i++) {
enumerator._eachEntry(input[i], i);
}
};
lib$es6$promise$enumerator$$Enumerator.prototype._eachEntry = function(entry, i) {
var enumerator = this;
var c = enumerator._instanceConstructor;
if (lib$es6$promise$utils$$isMaybeThenable(entry)) {
if (entry.constructor === c && entry._state !== lib$es6$promise$$internal$$PENDING) {
entry._onerror = null;
enumerator._settledAt(entry._state, i, entry._result);
} else {
enumerator._willSettleAt(c.resolve(entry), i);
}
} else {
enumerator._remaining--;
enumerator._result[i] = entry;
}
};
lib$es6$promise$enumerator$$Enumerator.prototype._settledAt = function(state, i, value) {
var enumerator = this;
var promise = enumerator.promise;
if (promise._state === lib$es6$promise$$internal$$PENDING) {
enumerator._remaining--;
if (state === lib$es6$promise$$internal$$REJECTED) {
lib$es6$promise$$internal$$reject(promise, value);
} else {
enumerator._result[i] = value;
}
}
if (enumerator._remaining === 0) {
lib$es6$promise$$internal$$fulfill(promise, enumerator._result);
}
};
lib$es6$promise$enumerator$$Enumerator.prototype._willSettleAt = function(promise, i) {
var enumerator = this;
lib$es6$promise$$internal$$subscribe(promise, undefined, function(value) {
enumerator._settledAt(lib$es6$promise$$internal$$FULFILLED, i, value);
}, function(reason) {
enumerator._settledAt(lib$es6$promise$$internal$$REJECTED, i, reason);
});
};
function lib$es6$promise$promise$all$$all(entries) {
return new lib$es6$promise$enumerator$$default(this, entries).promise;
}
var lib$es6$promise$promise$all$$default = lib$es6$promise$promise$all$$all;
function lib$es6$promise$promise$race$$race(entries) {
/*jshint validthis:true */
var Constructor = this;
var promise = new Constructor(lib$es6$promise$$internal$$noop);
if (!lib$es6$promise$utils$$isArray(entries)) {
lib$es6$promise$$internal$$reject(promise, new TypeError('You must pass an array to race.'));
return promise;
}
var length = entries.length;
function onFulfillment(value) {
lib$es6$promise$$internal$$resolve(promise, value);
}
function onRejection(reason) {
lib$es6$promise$$internal$$reject(promise, reason);
}
for (var i = 0; promise._state === lib$es6$promise$$internal$$PENDING && i < length; i++) {
lib$es6$promise$$internal$$subscribe(Constructor.resolve(entries[i]), undefined, onFulfillment, onRejection);
}
return promise;
}
var lib$es6$promise$promise$race$$default = lib$es6$promise$promise$race$$race;
function lib$es6$promise$promise$resolve$$resolve(object) {
/*jshint validthis:true */
var Constructor = this;
if (object && typeof object === 'object' && object.constructor === Constructor) {
return object;
}
var promise = new Constructor(lib$es6$promise$$internal$$noop);
lib$es6$promise$$internal$$resolve(promise, object);
return promise;
}
var lib$es6$promise$promise$resolve$$default = lib$es6$promise$promise$resolve$$resolve;
function lib$es6$promise$promise$reject$$reject(reason) {
/*jshint validthis:true */
var Constructor = this;
var promise = new Constructor(lib$es6$promise$$internal$$noop);
lib$es6$promise$$internal$$reject(promise, reason);
return promise;
}
var lib$es6$promise$promise$reject$$default = lib$es6$promise$promise$reject$$reject;
var lib$es6$promise$promise$$counter = 0;
function lib$es6$promise$promise$$needsResolver() {
throw new TypeError('You must pass a resolver function as the first argument to the promise constructor');
}
function lib$es6$promise$promise$$needsNew() {
throw new TypeError("Failed to construct 'Promise': Please use the 'new' operator, this object constructor cannot be called as a function.");
}
var lib$es6$promise$promise$$default = lib$es6$promise$promise$$Promise;
/**
Promise objects represent the eventual result of an asynchronous operation. The
primary way of interacting with a promise is through its `then` method, which
registers callbacks to receive either a promise's eventual value or the reason
why the promise cannot be fulfilled.
Terminology
-----------
- `promise` is an object or function with a `then` method whose behavior conforms to this specification.
- `thenable` is an object or function that defines a `then` method.
- `value` is any legal JavaScript value (including undefined, a thenable, or a promise).
- `exception` is a value that is thrown using the throw statement.
- `reason` is a value that indicates why a promise was rejected.
- `settled` the final resting state of a promise, fulfilled or rejected.
A promise can be in one of three states: pending, fulfilled, or rejected.
Promises that are fulfilled have a fulfillment value and are in the fulfilled
state. Promises that are rejected have a rejection reason and are in the
rejected state. A fulfillment value is never a thenable.
Promises can also be said to *resolve* a value. If this value is also a
promise, then the original promise's settled state will match the value's
settled state. So a promise that *resolves* a promise that rejects will
itself reject, and a promise that *resolves* a promise that fulfills will
itself fulfill.
Basic Usage:
------------
```js
var promise = new Promise(function(resolve, reject) {
// on success
resolve(value);
// on failure
reject(reason);
});
promise.then(function(value) {
// on fulfillment
}, function(reason) {
// on rejection
});
```
Advanced Usage:
---------------
Promises shine when abstracting away asynchronous interactions such as
`XMLHttpRequest`s.
```js
function getJSON(url) {
return new Promise(function(resolve, reject){
var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.onreadystatechange = handler;
xhr.responseType = 'json';
xhr.setRequestHeader('Accept', 'application/json');
xhr.send();
function handler() {
if (this.readyState === this.DONE) {
if (this.status === 200) {
resolve(this.response);
} else {
reject(new Error('getJSON: `' + url + '` failed with status: [' + this.status + ']'));
}
}
};
});
}
getJSON('/posts.json').then(function(json) {
// on fulfillment
}, function(reason) {
// on rejection
});
```
Unlike callbacks, promises are great composable primitives.
```js
Promise.all([
getJSON('/posts'),
getJSON('/comments')
]).then(function(values){
values[0] // => postsJSON
values[1] // => commentsJSON
return values;
});
```
@class Promise
@param {function} resolver
Useful for tooling.
@constructor
*/
function lib$es6$promise$promise$$Promise(resolver) {
this._id = lib$es6$promise$promise$$counter++;
this._state = undefined;
this._result = undefined;
this._subscribers = [];
if (lib$es6$promise$$internal$$noop !== resolver) {
if (!lib$es6$promise$utils$$isFunction(resolver)) {
lib$es6$promise$promise$$needsResolver();
}
if (!(this instanceof lib$es6$promise$promise$$Promise)) {
lib$es6$promise$promise$$needsNew();
}
lib$es6$promise$$internal$$initializePromise(this, resolver);
}
}
lib$es6$promise$promise$$Promise.all = lib$es6$promise$promise$all$$default;
lib$es6$promise$promise$$Promise.race = lib$es6$promise$promise$race$$default;
lib$es6$promise$promise$$Promise.resolve = lib$es6$promise$promise$resolve$$default;
lib$es6$promise$promise$$Promise.reject = lib$es6$promise$promise$reject$$default;
lib$es6$promise$promise$$Promise._setScheduler = lib$es6$promise$asap$$setScheduler;
lib$es6$promise$promise$$Promise._setAsap = lib$es6$promise$asap$$setAsap;
lib$es6$promise$promise$$Promise._asap = lib$es6$promise$asap$$asap;
lib$es6$promise$promise$$Promise.prototype = {
constructor: lib$es6$promise$promise$$Promise,
/**
The primary way of interacting with a promise is through its `then` method,
which registers callbacks to receive either a promise's eventual value or the
reason why the promise cannot be fulfilled.
```js
findUser().then(function(user){
// user is available
}, function(reason){
// user is unavailable, and you are given the reason why
});
```
Chaining
--------
The return value of `then` is itself a promise. This second, 'downstream'
promise is resolved with the return value of the first promise's fulfillment
or rejection handler, or rejected if the handler throws an exception.
```js
findUser().then(function (user) {
return user.name;
}, function (reason) {
return 'default name';
}).then(function (userName) {
// If `findUser` fulfilled, `userName` will be the user's name, otherwise it
// will be `'default name'`
});
findUser().then(function (user) {
throw new Error('Found user, but still unhappy');
}, function (reason) {
throw new Error('`findUser` rejected and we're unhappy');
}).then(function (value) {
// never reached
}, function (reason) {
// if `findUser` fulfilled, `reason` will be 'Found user, but still unhappy'.
// If `findUser` rejected, `reason` will be '`findUser` rejected and we're unhappy'.
});
```
If the downstream promise does not specify a rejection handler, rejection reasons will be propagated further downstream.
```js
findUser().then(function (user) {
throw new PedagogicalException('Upstream error');
}).then(function (value) {
// never reached
}).then(function (value) {
// never reached
}, function (reason) {
// The `PedgagocialException` is propagated all the way down to here
});
```
Assimilation
------------
Sometimes the value you want to propagate to a downstream promise can only be
retrieved asynchronously. This can be achieved by returning a promise in the
fulfillment or rejection handler. The downstream promise will then be pending
until the returned promise is settled. This is called *assimilation*.
```js
findUser().then(function (user) {
return findCommentsByAuthor(user);
}).then(function (comments) {
// The user's comments are now available
});
```
If the assimliated promise rejects, then the downstream promise will also reject.
```js
findUser().then(function (user) {
return findCommentsByAuthor(user);
}).then(function (comments) {
// If `findCommentsByAuthor` fulfills, we'll have the value here
}, function (reason) {
// If `findCommentsByAuthor` rejects, we'll have the reason here
});
```
Simple Example
--------------
Synchronous Example
```javascript
var result;
try {
result = findResult();
// success
} catch(reason) {
// failure
}
```
Errback Example
```js
findResult(function(result, err){
if (err) {
// failure
} else {
// success
}
});
```
Promise Example;
```javascript
findResult().then(function(result){
// success
}, function(reason){
// failure
});
```
Advanced Example
--------------
Synchronous Example
```javascript
var author, books;
try {
author = findAuthor();
books = findBooksByAuthor(author);
// success
} catch(reason) {
// failure
}
```
Errback Example
```js
function foundBooks(books) {
}
function failure(reason) {
}
findAuthor(function(author, err){
if (err) {
failure(err);
// failure
} else {
try {
findBoooksByAuthor(author, function(books, err) {
if (err) {
failure(err);
} else {
try {
foundBooks(books);
} catch(reason) {
failure(reason);
}
}
});
} catch(error) {
failure(err);
}
// success
}
});
```
Promise Example;
```javascript
findAuthor().
then(findBooksByAuthor).
then(function(books){
// found books
}).catch(function(reason){
// something went wrong
});
```
@method then
@param {Function} onFulfilled
@param {Function} onRejected
Useful for tooling.
@return {Promise}
*/
then: function(onFulfillment, onRejection) {
var parent = this;
var state = parent._state;
if (state === lib$es6$promise$$internal$$FULFILLED && !onFulfillment || state === lib$es6$promise$$internal$$REJECTED && !onRejection) {
return this;
}
var child = new this.constructor(lib$es6$promise$$internal$$noop);
var result = parent._result;
if (state) {
var callback = arguments[state - 1];
lib$es6$promise$asap$$asap(function(){
lib$es6$promise$$internal$$invokeCallback(state, child, callback, result);
});
} else {
lib$es6$promise$$internal$$subscribe(parent, child, onFulfillment, onRejection);
}
return child;
},
/**
`catch` is simply sugar for `then(undefined, onRejection)` which makes it the same
as the catch block of a try/catch statement.
```js
function findAuthor(){
throw new Error('couldn't find that author');
}
// synchronous
try {
findAuthor();
} catch(reason) {
// something went wrong
}
// async with promises
findAuthor().catch(function(reason){
// something went wrong
});
```
@method catch
@param {Function} onRejection
Useful for tooling.
@return {Promise}
*/
'catch': function(onRejection) {
return this.then(null, onRejection);
}
};
function lib$es6$promise$polyfill$$polyfill() {
var local;
if (typeof global !== 'undefined') {
local = global;
} else if (typeof self !== 'undefined') {
local = self;
} else {
try {
local = Function('return this')();
} catch (e) {
throw new Error('polyfill failed because global object is unavailable in this environment');
}
}
var P = local.Promise;
if (P && Object.prototype.toString.call(P.resolve()) === '[object Promise]' && !P.cast) {
return;
}
local.Promise = lib$es6$promise$promise$$default;
}
var lib$es6$promise$polyfill$$default = lib$es6$promise$polyfill$$polyfill;
var lib$es6$promise$umd$$ES6Promise = {
'Promise': lib$es6$promise$promise$$default,
'polyfill': lib$es6$promise$polyfill$$default
};
/* global define:true module:true window: true */
if (typeof define === 'function' && define['amd']) {
define(function() { return lib$es6$promise$umd$$ES6Promise; });
} else if (typeof module !== 'undefined' && module['exports']) {
module['exports'] = lib$es6$promise$umd$$ES6Promise;
} else if (typeof this !== 'undefined') {
this['ES6Promise'] = lib$es6$promise$umd$$ES6Promise;
}
lib$es6$promise$polyfill$$default();
}).call(this);
}).call(this,require('_process'),typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
},{"_process":2}],2:[function(require,module,exports){
// shim for using process in browser
var process = module.exports = {};
var queue = [];
var draining = false;
var currentQueue;
var queueIndex = -1;
function cleanUpNextTick() {
draining = false;
if (currentQueue.length) {
queue = currentQueue.concat(queue);
} else {
queueIndex = -1;
}
if (queue.length) {
drainQueue();
}
}
function drainQueue() {
if (draining) {
return;
}
var timeout = setTimeout(cleanUpNextTick);
draining = true;
var len = queue.length;
while(len) {
currentQueue = queue;
queue = [];
while (++queueIndex < len) {
currentQueue[queueIndex].run();
}
queueIndex = -1;
len = queue.length;
}
currentQueue = null;
draining = false;
clearTimeout(timeout);
}
process.nextTick = function (fun) {
var args = new Array(arguments.length - 1);
if (arguments.length > 1) {
for (var i = 1; i < arguments.length; i++) {
args[i - 1] = arguments[i];
}
}
queue.push(new Item(fun, args));
if (queue.length === 1 && !draining) {
setTimeout(drainQueue, 0);
}
};
// v8 likes predictible objects
function Item(fun, array) {
this.fun = fun;
this.array = array;
}
Item.prototype.run = function () {
this.fun.apply(null, this.array);
};
process.title = 'browser';
process.browser = true;
process.env = {};
process.argv = [];
process.version = ''; // empty string to avoid regexp issues
process.versions = {};
function noop() {}
process.on = noop;
process.addListener = noop;
process.once = noop;
process.off = noop;
process.removeListener = noop;
process.removeAllListeners = noop;
process.emit = noop;
process.binding = function (name) {
throw new Error('process.binding is not supported');
};
// TODO(shtylman)
process.cwd = function () { return '/' };
process.chdir = function (dir) {
throw new Error('process.chdir is not supported');
};
process.umask = function() { return 0; };
},{}],3:[function(require,module,exports){
(function (global){
/*! https://mths.be/punycode v1.3.2 by @mathias */
;(function(root) {
/** Detect free variables */
var freeExports = typeof exports == 'object' && exports &&
!exports.nodeType && exports;
var freeModule = typeof module == 'object' && module &&
!module.nodeType && module;
var freeGlobal = typeof global == 'object' && global;
if (
freeGlobal.global === freeGlobal ||
freeGlobal.window === freeGlobal ||
freeGlobal.self === freeGlobal
) {
root = freeGlobal;
}
/**
* The `punycode` object.
* @name punycode
* @type Object
*/
var punycode,
/** Highest positive signed 32-bit float value */
maxInt = 2147483647, // aka. 0x7FFFFFFF or 2^31-1
/** Bootstring parameters */
base = 36,
tMin = 1,
tMax = 26,
skew = 38,
damp = 700,
initialBias = 72,
initialN = 128, // 0x80
delimiter = '-', // '\x2D'
/** Regular expressions */
regexPunycode = /^xn--/,
regexNonASCII = /[^\x20-\x7E]/, // unprintable ASCII chars + non-ASCII chars
regexSeparators = /[\x2E\u3002\uFF0E\uFF61]/g, // RFC 3490 separators
/** Error messages */
errors = {
'overflow': 'Overflow: input needs wider integers to process',
'not-basic': 'Illegal input >= 0x80 (not a basic code point)',
'invalid-input': 'Invalid input'
},
/** Convenience shortcuts */
baseMinusTMin = base - tMin,
floor = Math.floor,
stringFromCharCode = String.fromCharCode,
/** Temporary variable */
key;
/*--------------------------------------------------------------------------*/
/**
* A generic error utility function.
* @private
* @param {String} type The error type.
* @returns {Error} Throws a `RangeError` with the applicable error message.
*/
function error(type) {
throw RangeError(errors[type]);
}
/**
* A generic `Array#map` utility function.
* @private
* @param {Array} array The array to iterate over.
* @param {Function} callback The function that gets called for every array
* item.
* @returns {Array} A new array of values returned by the callback function.
*/
function map(array, fn) {
var length = array.length;
var result = [];
while (length--) {
result[length] = fn(array[length]);
}
return result;
}
/**
* A simple `Array#map`-like wrapper to work with domain name strings or email
* addresses.
* @private
* @param {String} domain The domain name or email address.
* @param {Function} callback The function that gets called for every
* character.
* @returns {Array} A new string of characters returned by the callback
* function.
*/
function mapDomain(string, fn) {
var parts = string.split('@');
var result = '';
if (parts.length > 1) {
// In email addresses, only the domain name should be punycoded. Leave
// the local part (i.e. everything up to `@`) intact.
result = parts[0] + '@';
string = parts[1];
}
// Avoid `split(regex)` for IE8 compatibility. See #17.
string = string.replace(regexSeparators, '\x2E');
var labels = string.split('.');
var encoded = map(labels, fn).join('.');
return result + encoded;
}
/**
* Creates an array containing the numeric code points of each Unicode
* character in the string. While JavaScript uses UCS-2 internally,
* this function will convert a pair of surrogate halves (each of which
* UCS-2 exposes as separate characters) into a single code point,
* matching UTF-16.
* @see `punycode.ucs2.encode`
* @see <https://mathiasbynens.be/notes/javascript-encoding>
* @memberOf punycode.ucs2
* @name decode
* @param {String} string The Unicode input string (UCS-2).
* @returns {Array} The new array of code points.
*/
function ucs2decode(string) {
var output = [],
counter = 0,
length = string.length,
value,
extra;
while (counter < length) {
value = string.charCodeAt(counter++);
if (value >= 0xD800 && value <= 0xDBFF && counter < length) {
// high surrogate, and there is a next character
extra = string.charCodeAt(counter++);
if ((extra & 0xFC00) == 0xDC00) { // low surrogate
output.push(((value & 0x3FF) << 10) + (extra & 0x3FF) + 0x10000);
} else {
// unmatched surrogate; only append this code unit, in case the next
// code unit is the high surrogate of a surrogate pair
output.push(value);
counter--;
}
} else {
output.push(value);
}
}
return output;
}
/**
* Creates a string based on an array of numeric code points.
* @see `punycode.ucs2.decode`
* @memberOf punycode.ucs2
* @name encode
* @param {Array} codePoints The array of numeric code points.
* @returns {String} The new Unicode string (UCS-2).
*/
function ucs2encode(array) {
return map(array, function(value) {
var output = '';
if (value > 0xFFFF) {
value -= 0x10000;
output += stringFromCharCode(value >>> 10 & 0x3FF | 0xD800);
value = 0xDC00 | value & 0x3FF;
}
output += stringFromCharCode(value);
return output;
}).join('');
}
/**
* Converts a basic code point into a digit/integer.
* @see `digitToBasic()`
* @private
* @param {Number} codePoint The basic numeric code point value.
* @returns {Number} The numeric value of a basic code point (for use in
* representing integers) in the range `0` to `base - 1`, or `base` if
* the code point does not represent a value.
*/
function basicToDigit(codePoint) {
if (codePoint - 48 < 10) {
return codePoint - 22;
}
if (codePoint - 65 < 26) {
return codePoint - 65;
}
if (codePoint - 97 < 26) {
return codePoint - 97;
}
return base;
}
/**
* Converts a digit/integer into a basic code point.
* @see `basicToDigit()`
* @private
* @param {Number} digit The numeric value of a basic code point.
* @returns {Number} The basic code point whose value (when used for
* representing integers) is `digit`, which needs to be in the range
* `0` to `base - 1`. If `flag` is non-zero, the uppercase form is
* used; else, the lowercase form is used. The behavior is undefined
* if `flag` is non-zero and `digit` has no uppercase form.
*/
function digitToBasic(digit, flag) {
// 0..25 map to ASCII a..z or A..Z
// 26..35 map to ASCII 0..9
return digit + 22 + 75 * (digit < 26) - ((flag != 0) << 5);
}
/**
* Bias adaptation function as per section 3.4 of RFC 3492.
* http://tools.ietf.org/html/rfc3492#section-3.4
* @private
*/
function adapt(delta, numPoints, firstTime) {
var k = 0;
delta = firstTime ? floor(delta / damp) : delta >> 1;
delta += floor(delta / numPoints);
for (/* no initialization */; delta > baseMinusTMin * tMax >> 1; k += base) {
delta = floor(delta / baseMinusTMin);
}
return floor(k + (baseMinusTMin + 1) * delta / (delta + skew));
}
/**
* Converts a Punycode string of ASCII-only symbols to a string of Unicode
* symbols.
* @memberOf punycode
* @param {String} input The Punycode string of ASCII-only symbols.
* @returns {String} The resulting string of Unicode symbols.
*/
function decode(input) {
// Don't use UCS-2
var output = [],
inputLength = input.length,
out,
i = 0,
n = initialN,
bias = initialBias,
basic,
j,
index,
oldi,
w,
k,
digit,
t,
/** Cached calculation results */
baseMinusT;
// Handle the basic code points: let `basic` be the number of input code
// points before the last delimiter, or `0` if there is none, then copy
// the first basic code points to the output.
basic = input.lastIndexOf(delimiter);
if (basic < 0) {
basic = 0;
}
for (j = 0; j < basic; ++j) {
// if it's not a basic code point
if (input.charCodeAt(j) >= 0x80) {
error('not-basic');
}
output.push(input.charCodeAt(j));
}
// Main decoding loop: start just after the last delimiter if any basic code
// points were copied; start at the beginning otherwise.
for (index = basic > 0 ? basic + 1 : 0; index < inputLength; /* no final expression */) {
// `index` is the index of the next character to be consumed.
// Decode a generalized variable-length integer into `delta`,
// which gets added to `i`. The overflow checking is easier
// if we increase `i` as we go, then subtract off its starting
// value at the end to obtain `delta`.
for (oldi = i, w = 1, k = base; /* no condition */; k += base) {
if (index >= inputLength) {
error('invalid-input');
}
digit = basicToDigit(input.charCodeAt(index++));
if (digit >= base || digit > floor((maxInt - i) / w)) {
error('overflow');
}
i += digit * w;
t = k <= bias ? tMin : (k >= bias + tMax ? tMax : k - bias);
if (digit < t) {
break;
}
baseMinusT = base - t;
if (w > floor(maxInt / baseMinusT)) {
error('overflow');
}
w *= baseMinusT;
}
out = output.length + 1;
bias = adapt(i - oldi, out, oldi == 0);
// `i` was supposed to wrap around from `out` to `0`,
// incrementing `n` each time, so we'll fix that now:
if (floor(i / out) > maxInt - n) {
error('overflow');
}
n += floor(i / out);
i %= out;
// Insert `n` at position `i` of the output
output.splice(i++, 0, n);
}
return ucs2encode(output);
}
/**
* Converts a string of Unicode symbols (e.g. a domain name label) to a
* Punycode string of ASCII-only symbols.
* @memberOf punycode
* @param {String} input The string of Unicode symbols.
* @returns {String} The resulting Punycode string of ASCII-only symbols.
*/
function encode(input) {
var n,
delta,
handledCPCount,
basicLength,
bias,
j,
m,
q,
k,
t,
currentValue,
output = [],
/** `inputLength` will hold the number of code points in `input`. */
inputLength,
/** Cached calculation results */
handledCPCountPlusOne,
baseMinusT,
qMinusT;
// Convert the input in UCS-2 to Unicode
input = ucs2decode(input);
// Cache the length
inputLength = input.length;
// Initialize the state
n = initialN;
delta = 0;
bias = initialBias;
// Handle the basic code points
for (j = 0; j < inputLength; ++j) {
currentValue = input[j];
if (currentValue < 0x80) {
output.push(stringFromCharCode(currentValue));
}
}
handledCPCount = basicLength = output.length;
// `handledCPCount` is the number of code points that have been handled;
// `basicLength` is the number of basic code points.
// Finish the basic string - if it is not empty - with a delimiter
if (basicLength) {
output.push(delimiter);
}
// Main encoding loop:
while (handledCPCount < inputLength) {
// All non-basic code points < n have been handled already. Find the next
// larger one:
for (m = maxInt, j = 0; j < inputLength; ++j) {
currentValue = input[j];
if (currentValue >= n && currentValue < m) {
m = currentValue;
}
}
// Increase `delta` enough to advance the decoder's <n,i> state to <m,0>,
// but guard against overflow
handledCPCountPlusOne = handledCPCount + 1;
if (m - n > floor((maxInt - delta) / handledCPCountPlusOne)) {
error('overflow');
}
delta += (m - n) * handledCPCountPlusOne;
n = m;
for (j = 0; j < inputLength; ++j) {
currentValue = input[j];
if (currentValue < n && ++delta > maxInt) {
error('overflow');
}
if (currentValue == n) {
// Represent delta as a generalized variable-length integer
for (q = delta, k = base; /* no condition */; k += base) {
t = k <= bias ? tMin : (k >= bias + tMax ? tMax : k - bias);
if (q < t) {
break;
}
qMinusT = q - t;
baseMinusT = base - t;
output.push(
stringFromCharCode(digitToBasic(t + qMinusT % baseMinusT, 0))
);
q = floor(qMinusT / baseMinusT);
}
output.push(stringFromCharCode(digitToBasic(q, 0)));
bias = adapt(delta, handledCPCountPlusOne, handledCPCount == basicLength);
delta = 0;
++handledCPCount;
}
}
++delta;
++n;
}
return output.join('');
}
/**
* Converts a Punycode string representing a domain name or an email address
* to Unicode. Only the Punycoded parts of the input will be converted, i.e.
* it doesn't matter if you call it on a string that has already been
* converted to Unicode.
* @memberOf punycode
* @param {String} input The Punycoded domain name or email address to
* convert to Unicode.
* @returns {String} The Unicode representation of the given Punycode
* string.
*/
function toUnicode(input) {
return mapDomain(input, function(string) {
return regexPunycode.test(string)
? decode(string.slice(4).toLowerCase())
: string;
});
}
/**
* Converts a Unicode string representing a domain name or an email address to
* Punycode. Only the non-ASCII parts of the domain name will be converted,
* i.e. it doesn't matter if you call it with a domain that's already in
* ASCII.
* @memberOf punycode
* @param {String} input The domain name or email address to convert, as a
* Unicode string.
* @returns {String} The Punycode representation of the given domain name or
* email address.
*/
function toASCII(input) {
return mapDomain(input, function(string) {
return regexNonASCII.test(string)
? 'xn--' + encode(string)
: string;
});
}
/*--------------------------------------------------------------------------*/
/** Define the public API */
punycode = {
/**
* A string representing the current Punycode.js version number.
* @memberOf punycode
* @type String
*/
'version': '1.3.2',
/**
* An object of methods to convert from JavaScript's internal character
* representation (UCS-2) to Unicode code points, and back.
* @see <https://mathiasbynens.be/notes/javascript-encoding>
* @memberOf punycode
* @type Object
*/
'ucs2': {
'decode': ucs2decode,
'encode': ucs2encode
},
'decode': decode,
'encode': encode,
'toASCII': toASCII,
'toUnicode': toUnicode
};
/** Expose `punycode` */
// Some AMD build optimizers, like r.js, check for specific condition patterns
// like the following:
if (
typeof define == 'function' &&
typeof define.amd == 'object' &&
define.amd
) {
define('punycode', function() {
return punycode;
});
} else if (freeExports && freeModule) {
if (module.exports == freeExports) { // in Node.js or RingoJS v0.8.0+
freeModule.exports = punycode;
} else { // in Narwhal or RingoJS v0.7.0-
for (key in punycode) {
punycode.hasOwnProperty(key) && (freeExports[key] = punycode[key]);
}
}
} else { // in Rhino or a web browser
root.punycode = punycode;
}
}(this));
}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
},{}],4:[function(require,module,exports){
var log = require('./log');
var Promise = require('./promise');
function restoreOwnerScroll(ownerDocument, x, y) {
if (ownerDocument.defaultView && (x !== ownerDocument.defaultView.pageXOffset || y !== ownerDocument.defaultView.pageYOffset)) {
ownerDocument.defaultView.scrollTo(x, y);
}
}
function cloneCanvasContents(canvas, clonedCanvas) {
try {
if (clonedCanvas) {
clonedCanvas.width = canvas.width;
clonedCanvas.height = canvas.height;
clonedCanvas.getContext("2d").putImageData(canvas.getContext("2d").getImageData(0, 0, canvas.width, canvas.height), 0, 0);
}
} catch(e) {
log("Unable to copy canvas content from", canvas, e);
}
}
function cloneNode(node, javascriptEnabled) {
var clone = node.nodeType === 3 ? document.createTextNode(node.nodeValue) : node.cloneNode(false);
var child = node.firstChild;
while(child) {
if (javascriptEnabled === true || child.nodeType !== 1 || child.nodeName !== 'SCRIPT') {
clone.appendChild(cloneNode(child, javascriptEnabled));
}
child = child.nextSibling;
}
if (node.nodeType === 1 && node.tagName !== 'BODY') {
clone._scrollTop = node.scrollTop;
clone._scrollLeft = node.scrollLeft;
if (node.nodeName === "CANVAS") {
cloneCanvasContents(node, clone);
} else if (node.nodeName === "TEXTAREA" || node.nodeName === "SELECT") {
clone.value = node.value;
}
}
return clone;
}
function initNode(node) {
if (node.nodeType === 1) {
node.scrollTop = node._scrollTop;
node.scrollLeft = node._scrollLeft;
var child = node.firstChild;
while(child) {
initNode(child);
child = child.nextSibling;
}
}
}
module.exports = function(ownerDocument, containerDocument, width, height, options, x ,y) {
var documentElement = cloneNode(ownerDocument.documentElement, options.javascriptEnabled);
var container = containerDocument.createElement("iframe");
container.className = "html2canvas-container";
container.style.visibility = "hidden";
container.style.position = "fixed";
container.style.left = "-10000px";
container.style.top = "0px";
container.style.border = "0";
container.style.border = "0";
container.width = width;
container.height = height;
container.scrolling = "no"; // ios won't scroll without it
containerDocument.body.appendChild(container);
return new Promise(function(resolve) {
var documentClone = container.contentWindow.document;
/* Chrome doesn't detect relative background-images assigned in inline <style> sheets when fetched through getComputedStyle
if window url is about:blank, we can assign the url to current by writing onto the document
*/
container.contentWindow.onload = container.onload = function() {
var interval = setInterval(function() {
if (documentClone.body.childNodes.length > 0) {
initNode(documentClone.documentElement);
clearInterval(interval);
if (options.type === "view") {
container.contentWindow.scrollTo(x, y);
if ((/(iPad|iPhone|iPod)/g).test(navigator.userAgent) && (container.contentWindow.scrollY !== y || container.contentWindow.scrollX !== x)) {
documentClone.documentElement.style.top = (-y) + "px";
documentClone.documentElement.style.left = (-x) + "px";
documentClone.documentElement.style.position = 'absolute';
}
}
resolve(container);
}
}, 50);
};
documentClone.open();
documentClone.write("<!DOCTYPE html><html></html>");
// Chrome scrolls the parent document for some reason after the write to the cloned window???
restoreOwnerScroll(ownerDocument, x, y);
documentClone.replaceChild(documentClone.adoptNode(documentElement), documentClone.documentElement);
documentClone.close();
});
};
},{"./log":15,"./promise":18}],5:[function(require,module,exports){
// http://dev.w3.org/csswg/css-color/
function Color(value) {
this.r = 0;
this.g = 0;
this.b = 0;
this.a = null;
var result = this.fromArray(value) ||
this.namedColor(value) ||
this.rgb(value) ||
this.rgba(value) ||
this.hex6(value) ||
this.hex3(value);
}
Color.prototype.darken = function(amount) {
var a = 1 - amount;
return new Color([
Math.round(this.r * a),
Math.round(this.g * a),
Math.round(this.b * a),
this.a
]);
};
Color.prototype.isTransparent = function() {
return this.a === 0;
};
Color.prototype.isBlack = function() {
return this.r === 0 && this.g === 0 && this.b === 0;
};
Color.prototype.fromArray = function(array) {
if (Array.isArray(array)) {
this.r = Math.min(array[0], 255);
this.g = Math.min(array[1], 255);
this.b = Math.min(array[2], 255);
if (array.length > 3) {
this.a = array[3];
}
}
return (Array.isArray(array));
};
var _hex3 = /^#([a-f0-9]{3})$/i;
Color.prototype.hex3 = function(value) {
var match = null;
if ((match = value.match(_hex3)) !== null) {
this.r = parseInt(match[1][0] + match[1][0], 16);
this.g = parseInt(match[1][1] + match[1][1], 16);
this.b = parseInt(match[1][2] + match[1][2], 16);
}
return match !== null;
};
var _hex6 = /^#([a-f0-9]{6})$/i;
Color.prototype.hex6 = function(value) {
var match = null;
if ((match = value.match(_hex6)) !== null) {
this.r = parseInt(match[1].substring(0, 2), 16);
this.g = parseInt(match[1].substring(2, 4), 16);
this.b = parseInt(match[1].substring(4, 6), 16);
}
return match !== null;
};
var _rgb = /^rgb\((\d{1,3}) *, *(\d{1,3}) *, *(\d{1,3})\)$/;
Color.prototype.rgb = function(value) {
var match = null;
if ((match = value.match(_rgb)) !== null) {
this.r = Number(match[1]);
this.g = Number(match[2]);
this.b = Number(match[3]);
}
return match !== null;
};
var _rgba = /^rgba\((\d{1,3}) *, *(\d{1,3}) *, *(\d{1,3}) *, *(\d+\.?\d*)\)$/;
Color.prototype.rgba = function(value) {
var match = null;
if ((match = value.match(_rgba)) !== null) {
this.r = Number(match[1]);
this.g = Number(match[2]);
this.b = Number(match[3]);
this.a = Number(match[4]);
}
return match !== null;
};
Color.prototype.toString = function() {
return this.a !== null && this.a !== 1 ?
"rgba(" + [this.r, this.g, this.b, this.a].join(",") + ")" :
"rgb(" + [this.r, this.g, this.b].join(",") + ")";
};
Color.prototype.namedColor = function(value) {
var color = colors[value.toLowerCase()];
if (color) {
this.r = color[0];
this.g = color[1];
this.b = color[2];
} else if (value.toLowerCase() === "transparent") {
this.r = this.g = this.b = this.a = 0;
return true;
}
return !!color;
};
Color.prototype.isColor = true;
// JSON.stringify([].slice.call($$('.named-color-table tr'), 1).map(function(row) { return [row.childNodes[3].textContent, row.childNodes[5].textContent.trim().split(",").map(Number)] }).reduce(function(data, row) {data[row[0]] = row[1]; return data}, {}))
var colors = {
"aliceblue": [240, 248, 255],
"antiquewhite": [250, 235, 215],
"aqua": [0, 255, 255],
"aquamarine": [127, 255, 212],
"azure": [240, 255, 255],
"beige": [245, 245, 220],
"bisque": [255, 228, 196],
"black": [0, 0, 0],
"blanchedalmond": [255, 235, 205],
"blue": [0, 0, 255],
"blueviolet": [138, 43, 226],
"brown": [165, 42, 42],
"burlywood": [222, 184, 135],
"cadetblue": [95, 158, 160],
"chartreuse": [127, 255, 0],
"chocolate": [210, 105, 30],
"coral": [255, 127, 80],
"cornflowerblue": [100, 149, 237],
"cornsilk": [255, 248, 220],
"crimson": [220, 20, 60],
"cyan": [0, 255, 255],
"darkblue": [0, 0, 139],
"darkcyan": [0, 139, 139],
"darkgoldenrod": [184, 134, 11],
"darkgray": [169, 169, 169],
"darkgreen": [0, 100, 0],
"darkgrey": [169, 169, 169],
"darkkhaki": [189, 183, 107],
"darkmagenta": [139, 0, 139],
"darkolivegreen": [85, 107, 47],
"darkorange": [255, 140, 0],
"darkorchid": [153, 50, 204],
"darkred": [139, 0, 0],
"darksalmon": [233, 150, 122],
"darkseagreen": [143, 188, 143],
"darkslateblue": [72, 61, 139],
"darkslategray": [47, 79, 79],
"darkslategrey": [47, 79, 79],
"darkturquoise": [0, 206, 209],
"darkviolet": [148, 0, 211],
"deeppink": [255, 20, 147],
"deepskyblue": [0, 191, 255],
"dimgray": [105, 105, 105],
"dimgrey": [105, 105, 105],
"dodgerblue": [30, 144, 255],
"firebrick": [178, 34, 34],
"floralwhite": [255, 250, 240],
"forestgreen": [34, 139, 34],
"fuchsia": [255, 0, 255],
"gainsboro": [220, 220, 220],
"ghostwhite": [248, 248, 255],
"gold": [255, 215, 0],
"goldenrod": [218, 165, 32],
"gray": [128, 128, 128],
"green": [0, 128, 0],
"greenyellow": [173, 255, 47],
"grey": [128, 128, 128],
"honeydew": [240, 255, 240],
"hotpink": [255, 105, 180],
"indianred": [205, 92, 92],
"indigo": [75, 0, 130],
"ivory": [255, 255, 240],
"khaki": [240, 230, 140],
"lavender": [230, 230, 250],
"lavenderblush": [255, 240, 245],
"lawngreen": [124, 252, 0],
"lemonchiffon": [255, 250, 205],
"lightblue": [173, 216, 230],
"lightcoral": [240, 128, 128],
"lightcyan": [224, 255, 255],
"lightgoldenrodyellow": [250, 250, 210],
"lightgray": [211, 211, 211],
"lightgreen": [144, 238, 144],
"lightgrey": [211, 211, 211],
"lightpink": [255, 182, 193],
"lightsalmon": [255, 160, 122],
"lightseagreen": [32, 178, 170],
"lightskyblue": [135, 206, 250],
"lightslategray": [119, 136, 153],
"lightslategrey": [119, 136, 153],
"lightsteelblue": [176, 196, 222],
"lightyellow": [255, 255, 224],
"lime": [0, 255, 0],
"limegreen": [50, 205, 50],
"linen": [250, 240, 230],
"magenta": [255, 0, 255],
"maroon": [128, 0, 0],
"mediumaquamarine": [102, 205, 170],
"mediumblue": [0, 0, 205],
"mediumorchid": [186, 85, 211],
"mediumpurple": [147, 112, 219],
"mediumseagreen": [60, 179, 113],
"mediumslateblue": [123, 104, 238],
"mediumspringgreen": [0, 250, 154],
"mediumturquoise": [72, 209, 204],
"mediumvioletred": [199, 21, 133],
"midnightblue": [25, 25, 112],
"mintcream": [245, 255, 250],
"mistyrose": [255, 228, 225],
"moccasin": [255, 228, 181],
"navajowhite": [255, 222, 173],
"navy": [0, 0, 128],
"oldlace": [253, 245, 230],
"olive": [128, 128, 0],
"olivedrab": [107, 142, 35],
"orange": [255, 165, 0],
"orangered": [255, 69, 0],
"orchid": [218, 112, 214],
"palegoldenrod": [238, 232, 170],
"palegreen": [152, 251, 152],
"paleturquoise": [175, 238, 238],
"palevioletred": [219, 112, 147],
"papayawhip": [255, 239, 213],
"peachpuff": [255, 218, 185],
"peru": [205, 133, 63],
"pink": [255, 192, 203],
"plum": [221, 160, 221],
"powderblue": [176, 224, 230],
"purple": [128, 0, 128],
"rebeccapurple": [102, 51, 153],
"red": [255, 0, 0],
"rosybrown": [188, 143, 143],
"royalblue": [65, 105, 225],
"saddlebrown": [139, 69, 19],
"salmon": [250, 128, 114],
"sandybrown": [244, 164, 96],
"seagreen": [46, 139, 87],
"seashell": [255, 245, 238],
"sienna": [160, 82, 45],
"silver": [192, 192, 192],
"skyblue": [135, 206, 235],
"slateblue": [106, 90, 205],
"slategray": [112, 128, 144],
"slategrey": [112, 128, 144],
"snow": [255, 250, 250],
"springgreen": [0, 255, 127],
"steelblue": [70, 130, 180],
"tan": [210, 180, 140],
"teal": [0, 128, 128],
"thistle": [216, 191, 216],
"tomato": [255, 99, 71],
"turquoise": [64, 224, 208],
"violet": [238, 130, 238],
"wheat": [245, 222, 179],
"white": [255, 255, 255],
"whitesmoke": [245, 245, 245],
"yellow": [255, 255, 0],
"yellowgreen": [154, 205, 50]
};
module.exports = Color;
},{}],6:[function(require,module,exports){
var Promise = require('./promise');
var Support = require('./support');
var CanvasRenderer = require('./renderers/canvas');
var ImageLoader = require('./imageloader');
var NodeParser = require('./nodeparser');
var NodeContainer = require('./nodecontainer');
var log = require('./log');
var utils = require('./utils');
var createWindowClone = require('./clone');
var loadUrlDocument = require('./proxy').loadUrlDocument;
var getBounds = utils.getBounds;
var html2canvasNodeAttribute = "data-html2canvas-node";
var html2canvasCloneIndex = 0;
function html2canvas(nodeList, options) {
var index = html2canvasCloneIndex++;
options = options || {};
if (options.logging) {
window.html2canvas.logging = true;
window.html2canvas.start = Date.now();
}
options.async = typeof(options.async) === "undefined" ? true : options.async;
options.allowTaint = typeof(options.allowTaint) === "undefined" ? false : options.allowTaint;
options.removeContainer = typeof(options.removeContainer) === "undefined" ? true : options.removeContainer;
options.javascriptEnabled = typeof(options.javascriptEnabled) === "undefined" ? false : options.javascriptEnabled;
options.imageTimeout = typeof(options.imageTimeout) === "undefined" ? 10000 : options.imageTimeout;
options.renderer = typeof(options.renderer) === "function" ? options.renderer : CanvasRenderer;
options.strict = !!options.strict;
if (typeof(nodeList) === "string") {
if (typeof(options.proxy) !== "string") {
return Promise.reject("Proxy must be used when rendering url");
}
var width = options.width != null ? options.width : window.innerWidth;
var height = options.height != null ? options.height : window.innerHeight;
return loadUrlDocument(absoluteUrl(nodeList), options.proxy, document, width, height, options).then(function(container) {
return renderWindow(container.contentWindow.document.documentElement, container, options, width, height);
});
}
var node = ((nodeList === undefined) ? [document.documentElement] : ((nodeList.length) ? nodeList : [nodeList]))[0];
node.setAttribute(html2canvasNodeAttribute + index, index);
return renderDocument(node.ownerDocument, options, node.ownerDocument.defaultView.innerWidth, node.ownerDocument.defaultView.innerHeight, index).then(function(canvas) {
if (typeof(options.onrendered) === "function") {
log("options.onrendered is deprecated, html2canvas returns a Promise containing the canvas");
options.onrendered(canvas);
}
return canvas;
});
}
html2canvas.Promise = Promise;
html2canvas.CanvasRenderer = CanvasRenderer;
html2canvas.NodeContainer = NodeContainer;
html2canvas.log = log;
html2canvas.utils = utils;
module.exports = (typeof(document) === "undefined" || typeof(Object.create) !== "function" || typeof(document.createElement("canvas").getContext) !== "function") ? function() {
return Promise.reject("No canvas support");
} : html2canvas;
function renderDocument(document, options, windowWidth, windowHeight, html2canvasIndex) {
return createWindowClone(document, document, windowWidth, windowHeight, options, document.defaultView.pageXOffset, document.defaultView.pageYOffset).then(function(container) {
log("Document cloned");
var attributeName = html2canvasNodeAttribute + html2canvasIndex;
var selector = "[" + attributeName + "='" + html2canvasIndex + "']";
document.querySelector(selector).removeAttribute(attributeName);
var clonedWindow = container.contentWindow;
var node = clonedWindow.document.querySelector(selector);
node.style.opacity === "0" && node.getAttribute('renderer') === "webgl" ? node.style.opacity = 1 : null;
var oncloneHandler = (typeof(options.onclone) === "function") ? Promise.resolve(options.onclone(clonedWindow.document)) : Promise.resolve(true);
return oncloneHandler.then(function() {
return renderWindow(node, container, options, windowWidth, windowHeight);
});
});
}
function renderWindow(node, container, options, windowWidth, windowHeight) {
var clonedWindow = container.contentWindow;
var support = new Support(clonedWindow.document);
var imageLoader = new ImageLoader(options, support);
var bounds = getBounds(node);
var width = options.type === "view" ? windowWidth : documentWidth(clonedWindow.document);
var height = options.type === "view" ? windowHeight : documentHeight(clonedWindow.document);
var renderer = new options.renderer(width, height, imageLoader, options, document);
var parser = new NodeParser(node, renderer, support, imageLoader, options);
return parser.ready.then(function() {
log("Finished rendering");
var canvas;
if (options.type === "view") {
canvas = crop(renderer.canvas, {width: renderer.canvas.width, height: renderer.canvas.height, top: 0, left: 0, x: 0, y: 0});
} else if (node === clonedWindow.document.body || node === clonedWindow.document.documentElement || options.canvas != null) {
canvas = renderer.canvas;
} else {
//If retina - increase bounds by two since we ve got 2x canvas from renderer
if (window.devicePixelRatio !== 1) {
bounds.top = bounds.top * window.devicePixelRatio;
bounds.left = bounds.left * window.devicePixelRatio;
bounds.right = bounds.right * window.devicePixelRatio;
bounds.bottom = bounds.bottom * window.devicePixelRatio;
}
canvas = crop(renderer.canvas, {width: options.width != null ? options.width : bounds.width, height: options.height != null ? options.height : bounds.height, top: bounds.top, left: bounds.left, x: clonedWindow.pageXOffset, y: clonedWindow.pageYOffset});
}
cleanupContainer(container, options);
return canvas;
});
}
function cleanupContainer(container, options) {
if (options.removeContainer) {
container.parentNode.removeChild(container);
log("Cleaned up container");
}
}
function crop(canvas, bounds) {
var croppedCanvas = document.createElement("canvas");
var x1 = Math.min(canvas.width - 1, Math.max(0, bounds.left));
var x2 = Math.min(canvas.width, Math.max(1, bounds.left + bounds.width));
var y1 = Math.min(canvas.height - 1, Math.max(0, bounds.top));
var y2 = Math.min(canvas.height, Math.max(1, bounds.top + bounds.height));
croppedCanvas.width = bounds.width;
croppedCanvas.height = bounds.height;
log("Cropping canvas at:", "left:", bounds.left, "top:", bounds.top, "width:", (x2-x1), "height:", (y2-y1));
log("Resulting crop with width", bounds.width, "and height", bounds.height, " with x", x1, "and y", y1);
croppedCanvas.getContext("2d").drawImage(canvas, x1, y1, x2-x1, y2-y1, bounds.x, bounds.y, x2-x1, y2-y1);
return croppedCanvas;
}
function documentWidth (doc) {
return Math.max(
Math.max(doc.body.scrollWidth, doc.documentElement.scrollWidth),
Math.max(doc.body.offsetWidth, doc.documentElement.offsetWidth),
Math.max(doc.body.clientWidth, doc.documentElement.clientWidth)
);
}
function documentHeight (doc) {
return Math.max(
Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight),
Math.max(doc.body.offsetHeight, doc.documentElement.offsetHeight),
Math.max(doc.body.clientHeight, doc.documentElement.clientHeight)
);
}
function absoluteUrl(url) {
var link = document.createElement("a");
link.href = url;
link.href = link.href;
return link;
}
},{"./clone":4,"./imageloader":13,"./log":15,"./nodecontainer":16,"./nodeparser":17,"./promise":18,"./proxy":19,"./renderers/canvas":23,"./support":25,"./utils":29}],7:[function(require,module,exports){
var Promise = require('./promise');
var log = require('./log');
var smallImage = require('./utils').smallImage;
function DummyImageContainer(src) {
this.src = src;
log("DummyImageContainer for", src);
if (!this.promise || !this.image) {
log("Initiating DummyImageContainer");
DummyImageContainer.prototype.image = new Image();
var image = this.image;
DummyImageContainer.prototype.promise = new Promise(function(resolve, reject) {
image.onload = resolve;
image.onerror = reject;
image.src = smallImage();
if (image.complete === true) {
resolve(image);
}
});
}
}
module.exports = DummyImageContainer;
},{"./log":15,"./promise":18,"./utils":29}],8:[function(require,module,exports){
var smallImage = require('./utils').smallImage;
function Font(family, size) {
var container = document.createElement('div'),
img = document.createElement('img'),
span = document.createElement('span'),
sampleText = 'Hidden Text',
baseline,
middle;
container.style.visibility = "hidden";
container.style.fontFamily = family;
container.style.fontSize = size;
container.style.margin = 0;
container.style.padding = 0;
document.body.appendChild(container);
img.src = smallImage();
img.width = 1;
img.height = 1;
img.style.margin = 0;
img.style.padding = 0;
img.style.verticalAlign = "baseline";
span.style.fontFamily = family;
span.style.fontSize = size;
span.style.margin = 0;
span.style.padding = 0;
span.appendChild(document.createTextNode(sampleText));
container.appendChild(span);
container.appendChild(img);
baseline = (img.offsetTop - span.offsetTop) + 1;
container.removeChild(span);
container.appendChild(document.createTextNode(sampleText));
container.style.lineHeight = "normal";
img.style.verticalAlign = "super";
middle = (img.offsetTop-container.offsetTop) + 1;
document.body.removeChild(container);
this.baseline = baseline;
this.lineWidth = 1;
this.middle = middle;
}
module.exports = Font;
},{"./utils":29}],9:[function(require,module,exports){
var Font = require('./font');
function FontMetrics() {
this.data = {};
}
FontMetrics.prototype.getMetrics = function(family, size) {
if (this.data[family + "-" + size] === undefined) {
this.data[family + "-" + size] = new Font(family, size);
}
return this.data[family + "-" + size];
};
module.exports = FontMetrics;
},{"./font":8}],10:[function(require,module,exports){
var utils = require('./utils');
var Promise = require('./promise');
var getBounds = utils.getBounds;
var loadUrlDocument = require('./proxy').loadUrlDocument;
function FrameContainer(container, sameOrigin, options) {
this.image = null;
this.src = container;
var self = this;
var bounds = getBounds(container);
this.promise = (!sameOrigin ? this.proxyLoad(options.proxy, bounds, options) : new Promise(function(resolve) {
if (container.contentWindow.document.URL === "about:blank" || container.contentWindow.document.documentElement == null) {
container.contentWindow.onload = container.onload = function() {
resolve(container);
};
} else {
resolve(container);
}
})).then(function(container) {
var html2canvas = require('./core');
return html2canvas(container.contentWindow.document.documentElement, {type: 'view', width: container.width, height: container.height, proxy: options.proxy, javascriptEnabled: options.javascriptEnabled, removeContainer: options.removeContainer, allowTaint: options.allowTaint, imageTimeout: options.imageTimeout / 2});
}).then(function(canvas) {
return self.image = canvas;
});
}
FrameContainer.prototype.proxyLoad = function(proxy, bounds, options) {
var container = this.src;
return loadUrlDocument(container.src, proxy, container.ownerDocument, bounds.width, bounds.height, options);
};
module.exports = FrameContainer;
},{"./core":6,"./promise":18,"./proxy":19,"./utils":29}],11:[function(require,module,exports){
var Promise = require('./promise');
function GradientContainer(imageData) {
this.src = imageData.value;
this.colorStops = [];
this.type = null;
this.x0 = 0.5;
this.y0 = 0.5;
this.x1 = 0.5;
this.y1 = 0.5;
this.promise = Promise.resolve(true);
}
GradientContainer.prototype.TYPES = {
LINEAR: 1,
RADIAL: 2
};
module.exports = GradientContainer;
},{"./promise":18}],12:[function(require,module,exports){
var Promise = require('./promise');
function ImageContainer(src, cors) {
this.src = src;
this.image = new Image();
var self = this;
this.tainted = null;
this.promise = new Promise(function(resolve, reject) {
self.image.onload = resolve;
self.image.onerror = reject;
if (cors) {
self.image.crossOrigin = "anonymous";
}
self.image.src = src;
if (self.image.complete === true) {
resolve(self.image);
}
});
}
module.exports = ImageContainer;
},{"./promise":18}],13:[function(require,module,exports){
var Promise = require('./promise');
var log = require('./log');
var ImageContainer = require('./imagecontainer');
var DummyImageContainer = require('./dummyimagecontainer');
var ProxyImageContainer = require('./proxyimagecontainer');
var FrameContainer = require('./framecontainer');
var SVGContainer = require('./svgcontainer');
var SVGNodeContainer = require('./svgnodecontainer');
var LinearGradientContainer = require('./lineargradientcontainer');
var WebkitGradientContainer = require('./webkitgradientcontainer');
var bind = require('./utils').bind;
function ImageLoader(options, support) {
this.link = null;
this.options = options;
this.support = support;
this.origin = this.getOrigin(window.location.href);
}
ImageLoader.prototype.findImages = function(nodes) {
var images = [];
nodes.reduce(function(imageNodes, container) {
switch(container.node.nodeName) {
case "IMG":
return imageNodes.concat([{
args: [container.node.src],
method: "url"
}]);
case "svg":
case "IFRAME":
return imageNodes.concat([{
args: [container.node],
method: container.node.nodeName
}]);
}
return imageNodes;
}, []).forEach(this.addImage(images, this.loadImage), this);
return images;
};
ImageLoader.prototype.findBackgroundImage = function(images, container) {
container.parseBackgroundImages().filter(this.hasImageBackground).forEach(this.addImage(images, this.loadImage), this);
return images;
};
ImageLoader.prototype.addImage = function(images, callback) {
return function(newImage) {
newImage.args.forEach(function(image) {
if (!this.imageExists(images, image)) {
images.splice(0, 0, callback.call(this, newImage));
log('Added image #' + (images.length), typeof(image) === "string" ? image.substring(0, 100) : image);
}
}, this);
};
};
ImageLoader.prototype.hasImageBackground = function(imageData) {
return imageData.method !== "none";
};
ImageLoader.prototype.loadImage = function(imageData) {
if (imageData.method === "url") {
var src = imageData.args[0];
if (this.isSVG(src) && !this.support.svg && !this.options.allowTaint) {
return new SVGContainer(src);
} else if (src.match(/data:image\/.*;base64,/i)) {
return new ImageContainer(src.replace(/url\(['"]{0,}|['"]{0,}\)$/ig, ''), false);
} else if (this.isSameOrigin(src) || this.options.allowTaint === true || this.isSVG(src)) {
return new ImageContainer(src, false);
} else if (this.support.cors && !this.options.allowTaint && this.options.useCORS) {
return new ImageContainer(src, true);
} else if (this.options.proxy) {
return new ProxyImageContainer(src, this.options.proxy);
} else {
return new DummyImageContainer(src);
}
} else if (imageData.method === "linear-gradient") {
return new LinearGradientContainer(imageData);
} else if (imageData.method === "gradient") {
return new WebkitGradientContainer(imageData);
} else if (imageData.method === "svg") {
return new SVGNodeContainer(imageData.args[0], this.support.svg);
} else if (imageData.method === "IFRAME") {
return new FrameContainer(imageData.args[0], this.isSameOrigin(imageData.args[0].src), this.options);
} else {
return new DummyImageContainer(imageData);
}
};
ImageLoader.prototype.isSVG = function(src) {
return src.substring(src.length - 3).toLowerCase() === "svg" || SVGContainer.prototype.isInline(src);
};
ImageLoader.prototype.imageExists = function(images, src) {
return images.some(function(image) {
return image.src === src;
});
};
ImageLoader.prototype.isSameOrigin = function(url) {
return (this.getOrigin(url) === this.origin);
};
ImageLoader.prototype.getOrigin = function(url) {
var link = this.link || (this.link = document.createElement("a"));
link.href = url;
link.href = link.href; // IE9, LOL! - http://jsfiddle.net/niklasvh/2e48b/
return link.protocol + link.hostname + link.port;
};
ImageLoader.prototype.getPromise = function(container) {
return this.timeout(container, this.options.imageTimeout)['catch'](function() {
var dummy = new DummyImageContainer(container.src);
return dummy.promise.then(function(image) {
container.image = image;
});
});
};
ImageLoader.prototype.get = function(src) {
var found = null;
return this.images.some(function(img) {
return (found = img).src === src;
}) ? found : null;
};
ImageLoader.prototype.fetch = function(nodes) {
this.images = nodes.reduce(bind(this.findBackgroundImage, this), this.findImages(nodes));
this.images.forEach(function(image, index) {
image.promise.then(function() {
log("Succesfully loaded image #"+ (index+1), image);
}, function(e) {
log("Failed loading image #"+ (index+1), image, e);
});
});
this.ready = Promise.all(this.images.map(this.getPromise, this));
log("Finished searching images");
return this;
};
ImageLoader.prototype.timeout = function(container, timeout) {
var timer;
var promise = Promise.race([container.promise, new Promise(function(res, reject) {
timer = setTimeout(function() {
log("Timed out loading image", container);
reject(container);
}, timeout);
})]).then(function(container) {
clearTimeout(timer);
return container;
});
promise['catch'](function() {
clearTimeout(timer);
});
return promise;
};
module.exports = ImageLoader;
},{"./dummyimagecontainer":7,"./framecontainer":10,"./imagecontainer":12,"./lineargradientcontainer":14,"./log":15,"./promise":18,"./proxyimagecontainer":20,"./svgcontainer":26,"./svgnodecontainer":27,"./utils":29,"./webkitgradientcontainer":30}],14:[function(require,module,exports){
var GradientContainer = require('./gradientcontainer');
var Color = require('./color');
function LinearGradientContainer(imageData) {
GradientContainer.apply(this, arguments);
this.type = this.TYPES.LINEAR;
var hasDirection = imageData.args[0].match(this.stepRegExp) === null;
if (hasDirection) {
imageData.args[0].split(" ").reverse().forEach(function(position) {
switch(position) {
case "left":
this.x0 = 0;
this.x1 = 1;
break;
case "top":
this.y0 = 0;
this.y1 = 1;
break;
case "right":
this.x0 = 1;
this.x1 = 0;
break;
case "bottom":
this.y0 = 1;
this.y1 = 0;
break;
case "to":
var y0 = this.y0;
var x0 = this.x0;
this.y0 = this.y1;
this.x0 = this.x1;
this.x1 = x0;
this.y1 = y0;
break;
}
}, this);
} else {
this.y0 = 0;
this.y1 = 1;
}
this.colorStops = imageData.args.slice(hasDirection ? 1 : 0).map(function(colorStop) {
var colorStopMatch = colorStop.match(/((?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\)|\w+)\s*(\d{1,3})?(%|px)?/);
return {
color: new Color(colorStopMatch[1]),
stop: colorStopMatch[3] === "%" ? colorStopMatch[2] / 100 : null
};
}, this);
if (this.colorStops[0].stop === null) {
this.colorStops[0].stop = 0;
}
if (this.colorStops[this.colorStops.length - 1].stop === null) {
this.colorStops[this.colorStops.length - 1].stop = 1;
}
this.colorStops.forEach(function(colorStop, index) {
if (colorStop.stop === null) {
this.colorStops.slice(index).some(function(find, count) {
if (find.stop !== null) {
colorStop.stop = ((find.stop - this.colorStops[index - 1].stop) / (count + 1)) + this.colorStops[index - 1].stop;
return true;
} else {
return false;
}
}, this);
}
}, this);
}
LinearGradientContainer.prototype = Object.create(GradientContainer.prototype);
LinearGradientContainer.prototype.stepRegExp = /((?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\))\s*(\d{1,3})?(%|px)?/;
module.exports = LinearGradientContainer;
},{"./color":5,"./gradientcontainer":11}],15:[function(require,module,exports){
module.exports = function() {
if (window.html2canvas.logging && window.console && window.console.log) {
Function.prototype.bind.call(window.console.log, (window.console)).apply(window.console, [(Date.now() - window.html2canvas.start) + "ms", "html2canvas:"].concat([].slice.call(arguments, 0)));
}
};
},{}],16:[function(require,module,exports){
var Color = require('./color');
var utils = require('./utils');
var getBounds = utils.getBounds;
var parseBackgrounds = utils.parseBackgrounds;
var offsetBounds = utils.offsetBounds;
function NodeContainer(node, parent) {
this.node = node;
this.parent = parent;
this.stack = null;
this.bounds = null;
this.borders = null;
this.clip = [];
this.backgroundClip = [];
this.offsetBounds = null;
this.visible = null;
this.computedStyles = null;
this.colors = {};
this.styles = {};
this.backgroundImages = null;
this.transformData = null;
this.transformMatrix = null;
this.isPseudoElement = false;
this.opacity = null;
}
NodeContainer.prototype.cloneTo = function(stack) {
stack.visible = this.visible;
stack.borders = this.borders;
stack.bounds = this.bounds;
stack.clip = this.clip;
stack.backgroundClip = this.backgroundClip;
stack.computedStyles = this.computedStyles;
stack.styles = this.styles;
stack.backgroundImages = this.backgroundImages;
stack.opacity = this.opacity;
};
NodeContainer.prototype.getOpacity = function() {
return this.opacity === null ? (this.opacity = this.cssFloat('opacity')) : this.opacity;
};
NodeContainer.prototype.assignStack = function(stack) {
this.stack = stack;
stack.children.push(this);
};
NodeContainer.prototype.isElementVisible = function() {
return this.node.nodeType === Node.TEXT_NODE ? this.parent.visible : (
this.css('display') !== "none" &&
this.css('visibility') !== "hidden" &&
!this.node.hasAttribute("data-html2canvas-ignore") &&
(this.node.nodeName !== "INPUT" || this.node.getAttribute("type") !== "hidden")
);
};
NodeContainer.prototype.css = function(attribute) {
if (!this.computedStyles) {
this.computedStyles = this.isPseudoElement ? this.parent.computedStyle(this.before ? ":before" : ":after") : this.computedStyle(null);
}
return this.styles[attribute] || (this.styles[attribute] = this.computedStyles[attribute]);
};
NodeContainer.prototype.prefixedCss = function(attribute) {
var prefixes = ["webkit", "moz", "ms", "o"];
var value = this.css(attribute);
if (value === undefined) {
prefixes.some(function(prefix) {
value = this.css(prefix + attribute.substr(0, 1).toUpperCase() + attribute.substr(1));
return value !== undefined;
}, this);
}
return value === undefined ? null : value;
};
NodeContainer.prototype.computedStyle = function(type) {
return this.node.ownerDocument.defaultView.getComputedStyle(this.node, type);
};
NodeContainer.prototype.cssInt = function(attribute) {
var value = parseInt(this.css(attribute), 10);
return (isNaN(value)) ? 0 : value; // borders in old IE are throwing 'medium' for demo.html
};
NodeContainer.prototype.color = function(attribute) {
return this.colors[attribute] || (this.colors[attribute] = new Color(this.css(attribute)));
};
NodeContainer.prototype.cssFloat = function(attribute) {
var value = parseFloat(this.css(attribute));
return (isNaN(value)) ? 0 : value;
};
NodeContainer.prototype.fontWeight = function() {
var weight = this.css("fontWeight");
switch(parseInt(weight, 10)){
case 401:
weight = "bold";
break;
case 400:
weight = "normal";
break;
}
return weight;
};
NodeContainer.prototype.parseClip = function() {
var matches = this.css('clip').match(this.CLIP);
if (matches) {
return {
top: parseInt(matches[1], 10),
right: parseInt(matches[2], 10),
bottom: parseInt(matches[3], 10),
left: parseInt(matches[4], 10)
};
}
return null;
};
NodeContainer.prototype.parseBackgroundImages = function() {
return this.backgroundImages || (this.backgroundImages = parseBackgrounds(this.css("backgroundImage")));
};
NodeContainer.prototype.cssList = function(property, index) {
var value = (this.css(property) || '').split(',');
value = value[index || 0] || value[0] || 'auto';
value = value.trim().split(' ');
if (value.length === 1) {
value = [value[0], isPercentage(value[0]) ? 'auto' : value[0]];
}
return value;
};
NodeContainer.prototype.parseBackgroundSize = function(bounds, image, index) {
var size = this.cssList("backgroundSize", index);
var width, height;
if (isPercentage(size[0])) {
width = bounds.width * parseFloat(size[0]) / 100;
} else if (/contain|cover/.test(size[0])) {
var targetRatio = bounds.width / bounds.height, currentRatio = image.width / image.height;
return (targetRatio < currentRatio ^ size[0] === 'contain') ? {width: bounds.height * currentRatio, height: bounds.height} : {width: bounds.width, height: bounds.width / currentRatio};
} else {
width = parseInt(size[0], 10);
}
if (size[0] === 'auto' && size[1] === 'auto') {
height = image.height;
} else if (size[1] === 'auto') {
height = width / image.width * image.height;
} else if (isPercentage(size[1])) {
height = bounds.height * parseFloat(size[1]) / 100;
} else {
height = parseInt(size[1], 10);
}
if (size[0] === 'auto') {
width = height / image.height * image.width;
}
return {width: width, height: height};
};
NodeContainer.prototype.parseBackgroundPosition = function(bounds, image, index, backgroundSize) {
var position = this.cssList('backgroundPosition', index);
var left, top;
if (isPercentage(position[0])){
left = (bounds.width - (backgroundSize || image).width) * (parseFloat(position[0]) / 100);
} else {
left = parseInt(position[0], 10);
}
if (position[1] === 'auto') {
top = left / image.width * image.height;
} else if (isPercentage(position[1])){
top = (bounds.height - (backgroundSize || image).height) * parseFloat(position[1]) / 100;
} else {
top = parseInt(position[1], 10);
}
if (position[0] === 'auto') {
left = top / image.height * image.width;
}
return {left: left, top: top};
};
NodeContainer.prototype.parseBackgroundRepeat = function(index) {
return this.cssList("backgroundRepeat", index)[0];
};
NodeContainer.prototype.parseTextShadows = function() {
var textShadow = this.css("textShadow");
var results = [];
if (textShadow && textShadow !== 'none') {
var shadows = textShadow.match(this.TEXT_SHADOW_PROPERTY);
for (var i = 0; shadows && (i < shadows.length); i++) {
var s = shadows[i].match(this.TEXT_SHADOW_VALUES);
results.push({
color: new Color(s[0]),
offsetX: s[1] ? parseFloat(s[1].replace('px', '')) : 0,
offsetY: s[2] ? parseFloat(s[2].replace('px', '')) : 0,
blur: s[3] ? s[3].replace('px', '') : 0
});
}
}
return results;
};
NodeContainer.prototype.parseTransform = function() {
if (!this.transformData) {
if (this.hasTransform()) {
var offset = this.parseBounds();
var origin = this.prefixedCss("transformOrigin").split(" ").map(removePx).map(asFloat);
origin[0] += offset.left;
origin[1] += offset.top;
this.transformData = {
origin: origin,
matrix: this.parseTransformMatrix()
};
} else {
this.transformData = {
origin: [0, 0],
matrix: [1, 0, 0, 1, 0, 0]
};
}
}
return this.transformData;
};
NodeContainer.prototype.parseTransformMatrix = function() {
if (!this.transformMatrix) {
var transform = this.prefixedCss("transform");
var matrix = transform ? parseMatrix(transform.match(this.MATRIX_PROPERTY)) : null;
this.transformMatrix = matrix ? matrix : [1, 0, 0, 1, 0, 0];
}
return this.transformMatrix;
};
NodeContainer.prototype.parseBounds = function() {
return this.bounds || (this.bounds = this.hasTransform() ? offsetBounds(this.node) : getBounds(this.node));
};
NodeContainer.prototype.hasTransform = function() {
return this.parseTransformMatrix().join(",") !== "1,0,0,1,0,0" || (this.parent && this.parent.hasTransform());
};
NodeContainer.prototype.getValue = function() {
var value = this.node.value || "";
if (this.node.tagName === "SELECT") {
value = selectionValue(this.node);
} else if (this.node.type === "password") {
value = Array(value.length + 1).join('\u2022'); // jshint ignore:line
}
return value.length === 0 ? (this.node.placeholder || "") : value;
};
NodeContainer.prototype.MATRIX_PROPERTY = /(matrix|matrix3d)\((.+)\)/;
NodeContainer.prototype.TEXT_SHADOW_PROPERTY = /((rgba|rgb)\([^\)]+\)(\s-?\d+px){0,})/g;
NodeContainer.prototype.TEXT_SHADOW_VALUES = /(-?\d+px)|(#.+)|(rgb\(.+\))|(rgba\(.+\))/g;
NodeContainer.prototype.CLIP = /^rect\((\d+)px,? (\d+)px,? (\d+)px,? (\d+)px\)$/;
function selectionValue(node) {
var option = node.options[node.selectedIndex || 0];
return option ? (option.text || "") : "";
}
function parseMatrix(match) {
if (match && match[1] === "matrix") {
return match[2].split(",").map(function(s) {
return parseFloat(s.trim());
});
} else if (match && match[1] === "matrix3d") {
var matrix3d = match[2].split(",").map(function(s) {
return parseFloat(s.trim());
});
return [matrix3d[0], matrix3d[1], matrix3d[4], matrix3d[5], matrix3d[12], matrix3d[13]];
}
}
function isPercentage(value) {
return value.toString().indexOf("%") !== -1;
}
function removePx(str) {
return str.replace("px", "");
}
function asFloat(str) {
return parseFloat(str);
}
module.exports = NodeContainer;
},{"./color":5,"./utils":29}],17:[function(require,module,exports){
var log = require('./log');
var punycode = require('punycode');
var NodeContainer = require('./nodecontainer');
var TextContainer = require('./textcontainer');
var PseudoElementContainer = require('./pseudoelementcontainer');
var FontMetrics = require('./fontmetrics');
var Color = require('./color');
var Promise = require('./promise');
var StackingContext = require('./stackingcontext');
var utils = require('./utils');
var bind = utils.bind;
var getBounds = utils.getBounds;
var parseBackgrounds = utils.parseBackgrounds;
var offsetBounds = utils.offsetBounds;
function NodeParser(element, renderer, support, imageLoader, options) {
log("Starting NodeParser");
this.renderer = renderer;
this.options = options;
this.range = null;
this.support = support;
this.renderQueue = [];
this.stack = new StackingContext(true, 1, element.ownerDocument, null);
var parent = new NodeContainer(element, null);
if (options.background) {
renderer.rectangle(0, 0, renderer.width, renderer.height, new Color(options.background));
}
if (element === element.ownerDocument.documentElement) {
// http://www.w3.org/TR/css3-background/#special-backgrounds
var canvasBackground = new NodeContainer(parent.color('backgroundColor').isTransparent() ? element.ownerDocument.body : element.ownerDocument.documentElement, null);
renderer.rectangle(0, 0, renderer.width, renderer.height, canvasBackground.color('backgroundColor'));
}
parent.visibile = parent.isElementVisible();
this.createPseudoHideStyles(element.ownerDocument);
this.disableAnimations(element.ownerDocument);
this.nodes = flatten([parent].concat(this.getChildren(parent)).filter(function(container) {
return container.visible = container.isElementVisible();
}).map(this.getPseudoElements, this));
this.fontMetrics = new FontMetrics();
log("Fetched nodes, total:", this.nodes.length);
log("Calculate overflow clips");
this.calculateOverflowClips();
log("Start fetching images");
this.images = imageLoader.fetch(this.nodes.filter(isElement));
this.ready = this.images.ready.then(bind(function() {
log("Images loaded, starting parsing");
log("Creating stacking contexts");
this.createStackingContexts();
log("Sorting stacking contexts");
this.sortStackingContexts(this.stack);
this.parse(this.stack);
log("Render queue created with " + this.renderQueue.length + " items");
return new Promise(bind(function(resolve) {
if (!options.async) {
this.renderQueue.forEach(this.paint, this);
resolve();
} else if (typeof(options.async) === "function") {
options.async.call(this, this.renderQueue, resolve);
} else if (this.renderQueue.length > 0){
this.renderIndex = 0;
this.asyncRenderer(this.renderQueue, resolve);
} else {
resolve();
}
}, this));
}, this));
}
NodeParser.prototype.calculateOverflowClips = function() {
this.nodes.forEach(function(container) {
if (isElement(container)) {
if (isPseudoElement(container)) {
container.appendToDOM();
}
container.borders = this.parseBorders(container);
var clip = (container.css('overflow') === "hidden") ? [container.borders.clip] : [];
var cssClip = container.parseClip();
if (cssClip && ["absolute", "fixed"].indexOf(container.css('position')) !== -1) {
clip.push([["rect",
container.bounds.left + cssClip.left,
container.bounds.top + cssClip.top,
cssClip.right - cssClip.left,
cssClip.bottom - cssClip.top
]]);
}
container.clip = hasParentClip(container) ? container.parent.clip.concat(clip) : clip;
container.backgroundClip = (container.css('overflow') !== "hidden") ? container.clip.concat([container.borders.clip]) : container.clip;
if (isPseudoElement(container)) {
container.cleanDOM();
}
} else if (isTextNode(container)) {
container.clip = hasParentClip(container) ? container.parent.clip : [];
}
if (!isPseudoElement(container)) {
container.bounds = null;
}
}, this);
};
function hasParentClip(container) {
return container.parent && container.parent.clip.length;
}
NodeParser.prototype.asyncRenderer = function(queue, resolve, asyncTimer) {
asyncTimer = asyncTimer || Date.now();
this.paint(queue[this.renderIndex++]);
if (queue.length === this.renderIndex) {
resolve();
} else if (asyncTimer + 20 > Date.now()) {
this.asyncRenderer(queue, resolve, asyncTimer);
} else {
setTimeout(bind(function() {
this.asyncRenderer(queue, resolve);
}, this), 0);
}
};
NodeParser.prototype.createPseudoHideStyles = function(document) {
this.createStyles(document, '.' + PseudoElementContainer.prototype.PSEUDO_HIDE_ELEMENT_CLASS_BEFORE + ':before { content: "" !important; display: none !important; }' +
'.' + PseudoElementContainer.prototype.PSEUDO_HIDE_ELEMENT_CLASS_AFTER + ':after { content: "" !important; display: none !important; }');
};
NodeParser.prototype.disableAnimations = function(document) {
this.createStyles(document, '* { -webkit-animation: none !important; -moz-animation: none !important; -o-animation: none !important; animation: none !important; ' +
'-webkit-transition: none !important; -moz-transition: none !important; -o-transition: none !important; transition: none !important;}');
};
NodeParser.prototype.createStyles = function(document, styles) {
var hidePseudoElements = document.createElement('style');
hidePseudoElements.innerHTML = styles;
document.body.appendChild(hidePseudoElements);
};
NodeParser.prototype.getPseudoElements = function(container) {
var nodes = [[container]];
if (container.node.nodeType === Node.ELEMENT_NODE) {
var before = this.getPseudoElement(container, ":before");
var after = this.getPseudoElement(container, ":after");
if (before) {
nodes.push(before);
}
if (after) {
nodes.push(after);
}
}
return flatten(nodes);
};
function toCamelCase(str) {
return str.replace(/(\-[a-z])/g, function(match){
return match.toUpperCase().replace('-','');
});
}
NodeParser.prototype.getPseudoElement = function(container, type) {
var style = container.computedStyle(type);
if(!style || !style.content || style.content === "none" || style.content === "-moz-alt-content" || style.display === "none") {
return null;
}
var content = stripQuotes(style.content);
var isImage = content.substr(0, 3) === 'url';
var pseudoNode = document.createElement(isImage ? 'img' : 'html2canvaspseudoelement');
var pseudoContainer = new PseudoElementContainer(pseudoNode, container, type);
for (var i = style.length-1; i >= 0; i--) {
var property = toCamelCase(style.item(i));
pseudoNode.style[property] = style[property];
}
pseudoNode.className = PseudoElementContainer.prototype.PSEUDO_HIDE_ELEMENT_CLASS_BEFORE + " " + PseudoElementContainer.prototype.PSEUDO_HIDE_ELEMENT_CLASS_AFTER;
if (isImage) {
pseudoNode.src = parseBackgrounds(content)[0].args[0];
return [pseudoContainer];
} else {
var text = document.createTextNode(content);
pseudoNode.appendChild(text);
return [pseudoContainer, new TextContainer(text, pseudoContainer)];
}
};
NodeParser.prototype.getChildren = function(parentContainer) {
return flatten([].filter.call(parentContainer.node.childNodes, renderableNode).map(function(node) {
var container = [node.nodeType === Node.TEXT_NODE ? new TextContainer(node, parentContainer) : new NodeContainer(node, parentContainer)].filter(nonIgnoredElement);
return node.nodeType === Node.ELEMENT_NODE && container.length && node.tagName !== "TEXTAREA" ? (container[0].isElementVisible() ? container.concat(this.getChildren(container[0])) : []) : container;
}, this));
};
NodeParser.prototype.newStackingContext = function(container, hasOwnStacking) {
var stack = new StackingContext(hasOwnStacking, container.getOpacity(), container.node, container.parent);
container.cloneTo(stack);
var parentStack = hasOwnStacking ? stack.getParentStack(this) : stack.parent.stack;
parentStack.contexts.push(stack);
container.stack = stack;
};
NodeParser.prototype.createStackingContexts = function() {
this.nodes.forEach(function(container) {
if (isElement(container) && (this.isRootElement(container) || hasOpacity(container) || isPositionedForStacking(container) || this.isBodyWithTransparentRoot(container) || container.hasTransform())) {
this.newStackingContext(container, true);
} else if (isElement(container) && ((isPositioned(container) && zIndex0(container)) || isInlineBlock(container) || isFloating(container))) {
this.newStackingContext(container, false);
} else {
container.assignStack(container.parent.stack);
}
}, this);
};
NodeParser.prototype.isBodyWithTransparentRoot = function(container) {
return container.node.nodeName === "BODY" && container.parent.color('backgroundColor').isTransparent();
};
NodeParser.prototype.isRootElement = function(container) {
return container.parent === null;
};
NodeParser.prototype.sortStackingContexts = function(stack) {
stack.contexts.sort(zIndexSort(stack.contexts.slice(0)));
stack.contexts.forEach(this.sortStackingContexts, this);
};
NodeParser.prototype.parseTextBounds = function(container) {
return function(text, index, textList) {
if (container.parent.css("textDecoration").substr(0, 4) !== "none" || text.trim().length !== 0) {
if (this.support.rangeBounds && !container.parent.hasTransform()) {
var offset = textList.slice(0, index).join("").length;
return this.getRangeBounds(container.node, offset, text.length);
} else if (container.node && typeof(container.node.data) === "string") {
var replacementNode = container.node.splitText(text.length);
var bounds = this.getWrapperBounds(container.node, container.parent.hasTransform());
container.node = replacementNode;
return bounds;
}
} else if(!this.support.rangeBounds || container.parent.hasTransform()){
container.node = container.node.splitText(text.length);
}
return {};
};
};
NodeParser.prototype.getWrapperBounds = function(node, transform) {
var wrapper = node.ownerDocument.createElement('html2canvaswrapper');
var parent = node.parentNode,
backupText = node.cloneNode(true);
wrapper.appendChild(node.cloneNode(true));
parent.replaceChild(wrapper, node);
var bounds = transform ? offsetBounds(wrapper) : getBounds(wrapper);
parent.replaceChild(backupText, wrapper);
return bounds;
};
NodeParser.prototype.getRangeBounds = function(node, offset, length) {
var range = this.range || (this.range = node.ownerDocument.createRange());
range.setStart(node, offset);
range.setEnd(node, offset + length);
return range.getBoundingClientRect();
};
function ClearTransform() {}
NodeParser.prototype.parse = function(stack) {
// http://www.w3.org/TR/CSS21/visuren.html#z-index
var negativeZindex = stack.contexts.filter(negativeZIndex); // 2. the child stacking contexts with negative stack levels (most negative first).
var descendantElements = stack.children.filter(isElement);
var descendantNonFloats = descendantElements.filter(not(isFloating));
var nonInlineNonPositionedDescendants = descendantNonFloats.filter(not(isPositioned)).filter(not(inlineLevel)); // 3 the in-flow, non-inline-level, non-positioned descendants.
var nonPositionedFloats = descendantElements.filter(not(isPositioned)).filter(isFloating); // 4. the non-positioned floats.
var inFlow = descendantNonFloats.filter(not(isPositioned)).filter(inlineLevel); // 5. the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.
var stackLevel0 = stack.contexts.concat(descendantNonFloats.filter(isPositioned)).filter(zIndex0); // 6. the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.
var text = stack.children.filter(isTextNode).filter(hasText);
var positiveZindex = stack.contexts.filter(positiveZIndex); // 7. the child stacking contexts with positive stack levels (least positive first).
negativeZindex.concat(nonInlineNonPositionedDescendants).concat(nonPositionedFloats)
.concat(inFlow).concat(stackLevel0).concat(text).concat(positiveZindex).forEach(function(container) {
this.renderQueue.push(container);
if (isStackingContext(container)) {
this.parse(container);
this.renderQueue.push(new ClearTransform());
}
}, this);
};
NodeParser.prototype.paint = function(container) {
try {
if (container instanceof ClearTransform) {
this.renderer.ctx.restore();
} else if (isTextNode(container)) {
if (isPseudoElement(container.parent)) {
container.parent.appendToDOM();
}
this.paintText(container);
if (isPseudoElement(container.parent)) {
container.parent.cleanDOM();
}
} else {
this.paintNode(container);
}
} catch(e) {
log(e);
if (this.options.strict) {
throw e;
}
}
};
NodeParser.prototype.paintNode = function(container) {
if (isStackingContext(container)) {
this.renderer.setOpacity(container.opacity);
this.renderer.ctx.save();
if (container.hasTransform()) {
this.renderer.setTransform(container.parseTransform());
}
}
if (container.node.nodeName === "INPUT" && container.node.type === "checkbox") {
this.paintCheckbox(container);
} else if (container.node.nodeName === "INPUT" && container.node.type === "radio") {
this.paintRadio(container);
} else {
this.paintElement(container);
}
};
NodeParser.prototype.paintElement = function(container) {
var bounds = container.parseBounds();
this.renderer.clip(container.backgroundClip, function() {
this.renderer.renderBackground(container, bounds, container.borders.borders.map(getWidth));
}, this);
this.renderer.clip(container.clip, function() {
this.renderer.renderBorders(container.borders.borders);
}, this);
this.renderer.clip(container.backgroundClip, function() {
switch (container.node.nodeName) {
case "svg":
case "IFRAME":
var imgContainer = this.images.get(container.node);
if (imgContainer) {
this.renderer.renderImage(container, bounds, container.borders, imgContainer);
} else {
log("Error loading <" + container.node.nodeName + ">", container.node);
}
break;
case "IMG":
var imageContainer = this.images.get(container.node.src);
if (imageContainer) {
this.renderer.renderImage(container, bounds, container.borders, imageContainer);
} else {
log("Error loading <img>", container.node.src);
}
break;
case "CANVAS":
this.renderer.renderImage(container, bounds, container.borders, {image: container.node});
break;
case "SELECT":
case "INPUT":
case "TEXTAREA":
this.paintFormValue(container);
break;
}
}, this);
};
NodeParser.prototype.paintCheckbox = function(container) {
var b = container.parseBounds();
var size = Math.min(b.width, b.height);
var bounds = {width: size - 1, height: size - 1, top: b.top, left: b.left};
var r = [3, 3];
var radius = [r, r, r, r];
var borders = [1,1,1,1].map(function(w) {
return {color: new Color('#A5A5A5'), width: w};
});
var borderPoints = calculateCurvePoints(bounds, radius, borders);
this.renderer.clip(container.backgroundClip, function() {
this.renderer.rectangle(bounds.left + 1, bounds.top + 1, bounds.width - 2, bounds.height - 2, new Color("#DEDEDE"));
this.renderer.renderBorders(calculateBorders(borders, bounds, borderPoints, radius));
if (container.node.checked) {
this.renderer.font(new Color('#424242'), 'normal', 'normal', 'bold', (size - 3) + "px", 'arial');
this.renderer.text("\u2714", bounds.left + size / 6, bounds.top + size - 1);
}
}, this);
};
NodeParser.prototype.paintRadio = function(container) {
var bounds = container.parseBounds();
var size = Math.min(bounds.width, bounds.height) - 2;
this.renderer.clip(container.backgroundClip, function() {
this.renderer.circleStroke(bounds.left + 1, bounds.top + 1, size, new Color('#DEDEDE'), 1, new Color('#A5A5A5'));
if (container.node.checked) {
this.renderer.circle(Math.ceil(bounds.left + size / 4) + 1, Math.ceil(bounds.top + size / 4) + 1, Math.floor(size / 2), new Color('#424242'));
}
}, this);
};
NodeParser.prototype.paintFormValue = function(container) {
var value = container.getValue();
if (value.length > 0) {
var document = container.node.ownerDocument;
var wrapper = document.createElement('html2canvaswrapper');
var properties = ['lineHeight', 'textAlign', 'fontFamily', 'fontWeight', 'fontSize', 'color',
'paddingLeft', 'paddingTop', 'paddingRight', 'paddingBottom',
'width', 'height', 'borderLeftStyle', 'borderTopStyle', 'borderLeftWidth', 'borderTopWidth',
'boxSizing', 'whiteSpace', 'wordWrap'];
properties.forEach(function(property) {
try {
wrapper.style[property] = container.css(property);
} catch(e) {
// Older IE has issues with "border"
log("html2canvas: Parse: Exception caught in renderFormValue: " + e.message);
}
});
var bounds = container.parseBounds();
wrapper.style.position = "fixed";
wrapper.style.left = bounds.left + "px";
wrapper.style.top = bounds.top + "px";
wrapper.textContent = value;
document.body.appendChild(wrapper);
this.paintText(new TextContainer(wrapper.firstChild, container));
document.body.removeChild(wrapper);
}
};
NodeParser.prototype.paintText = function(container) {
container.applyTextTransform();
var characters = punycode.ucs2.decode(container.node.data);
var textList = (!this.options.letterRendering || noLetterSpacing(container)) && !hasUnicode(container.node.data) ? getWords(characters) : characters.map(function(character) {
return punycode.ucs2.encode([character]);
});
var weight = container.parent.fontWeight();
var size = container.parent.css('fontSize');
var family = container.parent.css('fontFamily');
var shadows = container.parent.parseTextShadows();
this.renderer.font(container.parent.color('color'), container.parent.css('fontStyle'), container.parent.css('fontVariant'), weight, size, family);
if (shadows.length) {
// TODO: support multiple text shadows
this.renderer.fontShadow(shadows[0].color, shadows[0].offsetX, shadows[0].offsetY, shadows[0].blur);
} else {
this.renderer.clearShadow();
}
this.renderer.clip(container.parent.clip, function() {
textList.map(this.parseTextBounds(container), this).forEach(function(bounds, index) {
if (bounds) {
this.renderer.text(textList[index], bounds.left, bounds.bottom);
this.renderTextDecoration(container.parent, bounds, this.fontMetrics.getMetrics(family, size));
}
}, this);
}, this);
};
NodeParser.prototype.renderTextDecoration = function(container, bounds, metrics) {
switch(container.css("textDecoration").split(" ")[0]) {
case "underline":
// Draws a line at the baseline of the font
// TODO As some browsers display the line as more than 1px if the font-size is big, need to take that into account both in position and size
this.renderer.rectangle(bounds.left, Math.round(bounds.top + metrics.baseline + metrics.lineWidth), bounds.width, 1, container.color("color"));
break;
case "overline":
this.renderer.rectangle(bounds.left, Math.round(bounds.top), bounds.width, 1, container.color("color"));
break;
case "line-through":
// TODO try and find exact position for line-through
this.renderer.rectangle(bounds.left, Math.ceil(bounds.top + metrics.middle + metrics.lineWidth), bounds.width, 1, container.color("color"));
break;
}
};
var borderColorTransforms = {
inset: [
["darken", 0.60],
["darken", 0.10],
["darken", 0.10],
["darken", 0.60]
]
};
NodeParser.prototype.parseBorders = function(container) {
var nodeBounds = container.parseBounds();
var radius = getBorderRadiusData(container);
var borders = ["Top", "Right", "Bottom", "Left"].map(function(side, index) {
var style = container.css('border' + side + 'Style');
var color = container.color('border' + side + 'Color');
if (style === "inset" && color.isBlack()) {
color = new Color([255, 255, 255, color.a]); // this is wrong, but
}
var colorTransform = borderColorTransforms[style] ? borderColorTransforms[style][index] : null;
return {
width: container.cssInt('border' + side + 'Width'),
color: colorTransform ? color[colorTransform[0]](colorTransform[1]) : color,
args: null
};
});
var borderPoints = calculateCurvePoints(nodeBounds, radius, borders);
return {
clip: this.parseBackgroundClip(container, borderPoints, borders, radius, nodeBounds),
borders: calculateBorders(borders, nodeBounds, borderPoints, radius)
};
};
function calculateBorders(borders, nodeBounds, borderPoints, radius) {
return borders.map(function(border, borderSide) {
if (border.width > 0) {
var bx = nodeBounds.left;
var by = nodeBounds.top;
var bw = nodeBounds.width;
var bh = nodeBounds.height - (borders[2].width);
switch(borderSide) {
case 0:
// top border
bh = borders[0].width;
border.args = drawSide({
c1: [bx, by],
c2: [bx + bw, by],
c3: [bx + bw - borders[1].width, by + bh],
c4: [bx + borders[3].width, by + bh]
}, radius[0], radius[1],
borderPoints.topLeftOuter, borderPoints.topLeftInner, borderPoints.topRightOuter, borderPoints.topRightInner);
break;
case 1:
// right border
bx = nodeBounds.left + nodeBounds.width - (borders[1].width);
bw = borders[1].width;
border.args = drawSide({
c1: [bx + bw, by],
c2: [bx + bw, by + bh + borders[2].width],
c3: [bx, by + bh],
c4: [bx, by + borders[0].width]
}, radius[1], radius[2],
borderPoints.topRightOuter, borderPoints.topRightInner, borderPoints.bottomRightOuter, borderPoints.bottomRightInner);
break;
case 2:
// bottom border
by = (by + nodeBounds.height) - (borders[2].width);
bh = borders[2].width;
border.args = drawSide({
c1: [bx + bw, by + bh],
c2: [bx, by + bh],
c3: [bx + borders[3].width, by],
c4: [bx + bw - borders[3].width, by]
}, radius[2], radius[3],
borderPoints.bottomRightOuter, borderPoints.bottomRightInner, borderPoints.bottomLeftOuter, borderPoints.bottomLeftInner);
break;
case 3:
// left border
bw = borders[3].width;
border.args = drawSide({
c1: [bx, by + bh + borders[2].width],
c2: [bx, by],
c3: [bx + bw, by + borders[0].width],
c4: [bx + bw, by + bh]
}, radius[3], radius[0],
borderPoints.bottomLeftOuter, borderPoints.bottomLeftInner, borderPoints.topLeftOuter, borderPoints.topLeftInner);
break;
}
}
return border;
});
}
NodeParser.prototype.parseBackgroundClip = function(container, borderPoints, borders, radius, bounds) {
var backgroundClip = container.css('backgroundClip'),
borderArgs = [];
switch(backgroundClip) {
case "content-box":
case "padding-box":
parseCorner(borderArgs, radius[0], radius[1], borderPoints.topLeftInner, borderPoints.topRightInner, bounds.left + borders[3].width, bounds.top + borders[0].width);
parseCorner(borderArgs, radius[1], radius[2], borderPoints.topRightInner, borderPoints.bottomRightInner, bounds.left + bounds.width - borders[1].width, bounds.top + borders[0].width);
parseCorner(borderArgs, radius[2], radius[3], borderPoints.bottomRightInner, borderPoints.bottomLeftInner, bounds.left + bounds.width - borders[1].width, bounds.top + bounds.height - borders[2].width);
parseCorner(borderArgs, radius[3], radius[0], borderPoints.bottomLeftInner, borderPoints.topLeftInner, bounds.left + borders[3].width, bounds.top + bounds.height - borders[2].width);
break;
default:
parseCorner(borderArgs, radius[0], radius[1], borderPoints.topLeftOuter, borderPoints.topRightOuter, bounds.left, bounds.top);
parseCorner(borderArgs, radius[1], radius[2], borderPoints.topRightOuter, borderPoints.bottomRightOuter, bounds.left + bounds.width, bounds.top);
parseCorner(borderArgs, radius[2], radius[3], borderPoints.bottomRightOuter, borderPoints.bottomLeftOuter, bounds.left + bounds.width, bounds.top + bounds.height);
parseCorner(borderArgs, radius[3], radius[0], borderPoints.bottomLeftOuter, borderPoints.topLeftOuter, bounds.left, bounds.top + bounds.height);
break;
}
return borderArgs;
};
function getCurvePoints(x, y, r1, r2) {
var kappa = 4 * ((Math.sqrt(2) - 1) / 3);
var ox = (r1) * kappa, // control point offset horizontal
oy = (r2) * kappa, // control point offset vertical
xm = x + r1, // x-middle
ym = y + r2; // y-middle
return {
topLeft: bezierCurve({x: x, y: ym}, {x: x, y: ym - oy}, {x: xm - ox, y: y}, {x: xm, y: y}),
topRight: bezierCurve({x: x, y: y}, {x: x + ox,y: y}, {x: xm, y: ym - oy}, {x: xm, y: ym}),
bottomRight: bezierCurve({x: xm, y: y}, {x: xm, y: y + oy}, {x: x + ox, y: ym}, {x: x, y: ym}),
bottomLeft: bezierCurve({x: xm, y: ym}, {x: xm - ox, y: ym}, {x: x, y: y + oy}, {x: x, y:y})
};
}
function calculateCurvePoints(bounds, borderRadius, borders) {
var x = bounds.left,
y = bounds.top,
width = bounds.width,
height = bounds.height,
tlh = borderRadius[0][0],
tlv = borderRadius[0][1],
trh = borderRadius[1][0],
trv = borderRadius[1][1],
brh = borderRadius[2][0],
brv = borderRadius[2][1],
blh = borderRadius[3][0],
blv = borderRadius[3][1];
var halfHeight = Math.floor(height / 2);
tlh = tlh > halfHeight ? halfHeight : tlh;
tlv = tlv > halfHeight ? halfHeight : tlv;
trh = trh > halfHeight ? halfHeight : trh;
trv = trv > halfHeight ? halfHeight : trv;
brh = brh > halfHeight ? halfHeight : brh;
brv = brv > halfHeight ? halfHeight : brv;
blh = blh > halfHeight ? halfHeight : blh;
blv = blv > halfHeight ? halfHeight : blv;
var topWidth = width - trh,
rightHeight = height - brv,
bottomWidth = width - brh,
leftHeight = height - blv;
return {
topLeftOuter: getCurvePoints(x, y, tlh, tlv).topLeft.subdivide(0.5),
topLeftInner: getCurvePoints(x + borders[3].width, y + borders[0].width, Math.max(0, tlh - borders[3].width), Math.max(0, tlv - borders[0].width)).topLeft.subdivide(0.5),
topRightOuter: getCurvePoints(x + topWidth, y, trh, trv).topRight.subdivide(0.5),
topRightInner: getCurvePoints(x + Math.min(topWidth, width + borders[3].width), y + borders[0].width, (topWidth > width + borders[3].width) ? 0 :trh - borders[3].width, trv - borders[0].width).topRight.subdivide(0.5),
bottomRightOuter: getCurvePoints(x + bottomWidth, y + rightHeight, brh, brv).bottomRight.subdivide(0.5),
bottomRightInner: getCurvePoints(x + Math.min(bottomWidth, width - borders[3].width), y + Math.min(rightHeight, height + borders[0].width), Math.max(0, brh - borders[1].width), brv - borders[2].width).bottomRight.subdivide(0.5),
bottomLeftOuter: getCurvePoints(x, y + leftHeight, blh, blv).bottomLeft.subdivide(0.5),
bottomLeftInner: getCurvePoints(x + borders[3].width, y + leftHeight, Math.max(0, blh - borders[3].width), blv - borders[2].width).bottomLeft.subdivide(0.5)
};
}
function bezierCurve(start, startControl, endControl, end) {
var lerp = function (a, b, t) {
return {
x: a.x + (b.x - a.x) * t,
y: a.y + (b.y - a.y) * t
};
};
return {
start: start,
startControl: startControl,
endControl: endControl,
end: end,
subdivide: function(t) {
var ab = lerp(start, startControl, t),
bc = lerp(startControl, endControl, t),
cd = lerp(endControl, end, t),
abbc = lerp(ab, bc, t),
bccd = lerp(bc, cd, t),
dest = lerp(abbc, bccd, t);
return [bezierCurve(start, ab, abbc, dest), bezierCurve(dest, bccd, cd, end)];
},
curveTo: function(borderArgs) {
borderArgs.push(["bezierCurve", startControl.x, startControl.y, endControl.x, endControl.y, end.x, end.y]);
},
curveToReversed: function(borderArgs) {
borderArgs.push(["bezierCurve", endControl.x, endControl.y, startControl.x, startControl.y, start.x, start.y]);
}
};
}
function drawSide(borderData, radius1, radius2, outer1, inner1, outer2, inner2) {
var borderArgs = [];
if (radius1[0] > 0 || radius1[1] > 0) {
borderArgs.push(["line", outer1[1].start.x, outer1[1].start.y]);
outer1[1].curveTo(borderArgs);
} else {
borderArgs.push([ "line", borderData.c1[0], borderData.c1[1]]);
}
if (radius2[0] > 0 || radius2[1] > 0) {
borderArgs.push(["line", outer2[0].start.x, outer2[0].start.y]);
outer2[0].curveTo(borderArgs);
borderArgs.push(["line", inner2[0].end.x, inner2[0].end.y]);
inner2[0].curveToReversed(borderArgs);
} else {
borderArgs.push(["line", borderData.c2[0], borderData.c2[1]]);
borderArgs.push(["line", borderData.c3[0], borderData.c3[1]]);
}
if (radius1[0] > 0 || radius1[1] > 0) {
borderArgs.push(["line", inner1[1].end.x, inner1[1].end.y]);
inner1[1].curveToReversed(borderArgs);
} else {
borderArgs.push(["line", borderData.c4[0], borderData.c4[1]]);
}
return borderArgs;
}
function parseCorner(borderArgs, radius1, radius2, corner1, corner2, x, y) {
if (radius1[0] > 0 || radius1[1] > 0) {
borderArgs.push(["line", corner1[0].start.x, corner1[0].start.y]);
corner1[0].curveTo(borderArgs);
corner1[1].curveTo(borderArgs);
} else {
borderArgs.push(["line", x, y]);
}
if (radius2[0] > 0 || radius2[1] > 0) {
borderArgs.push(["line", corner2[0].start.x, corner2[0].start.y]);
}
}
function negativeZIndex(container) {
return container.cssInt("zIndex") < 0;
}
function positiveZIndex(container) {
return container.cssInt("zIndex") > 0;
}
function zIndex0(container) {
return container.cssInt("zIndex") === 0;
}
function inlineLevel(container) {
return ["inline", "inline-block", "inline-table"].indexOf(container.css("display")) !== -1;
}
function isStackingContext(container) {
return (container instanceof StackingContext);
}
function hasText(container) {
return container.node.data.trim().length > 0;
}
function noLetterSpacing(container) {
return (/^(normal|none|0px)$/.test(container.parent.css("letterSpacing")));
}
function getBorderRadiusData(container) {
return ["TopLeft", "TopRight", "BottomRight", "BottomLeft"].map(function(side) {
var value = container.css('border' + side + 'Radius');
var arr = value.split(" ");
if (arr.length <= 1) {
arr[1] = arr[0];
}
return arr.map(asInt);
});
}
function renderableNode(node) {
return (node.nodeType === Node.TEXT_NODE || node.nodeType === Node.ELEMENT_NODE);
}
function isPositionedForStacking(container) {
var position = container.css("position");
var zIndex = (["absolute", "relative", "fixed"].indexOf(position) !== -1) ? container.css("zIndex") : "auto";
return zIndex !== "auto";
}
function isPositioned(container) {
return container.css("position") !== "static";
}
function isFloating(container) {
return container.css("float") !== "none";
}
function isInlineBlock(container) {
return ["inline-block", "inline-table"].indexOf(container.css("display")) !== -1;
}
function not(callback) {
var context = this;
return function() {
return !callback.apply(context, arguments);
};
}
function isElement(container) {
return container.node.nodeType === Node.ELEMENT_NODE;
}
function isPseudoElement(container) {
return container.isPseudoElement === true;
}
function isTextNode(container) {
return container.node.nodeType === Node.TEXT_NODE;
}
function zIndexSort(contexts) {
return function(a, b) {
return (a.cssInt("zIndex") + (contexts.indexOf(a) / contexts.length)) - (b.cssInt("zIndex") + (contexts.indexOf(b) / contexts.length));
};
}
function hasOpacity(container) {
return container.getOpacity() < 1;
}
function asInt(value) {
return parseInt(value, 10);
}
function getWidth(border) {
return border.width;
}
function nonIgnoredElement(nodeContainer) {
return (nodeContainer.node.nodeType !== Node.ELEMENT_NODE || ["SCRIPT", "HEAD", "TITLE", "OBJECT", "BR", "OPTION"].indexOf(nodeContainer.node.nodeName) === -1);
}
function flatten(arrays) {
return [].concat.apply([], arrays);
}
function stripQuotes(content) {
var first = content.substr(0, 1);
return (first === content.substr(content.length - 1) && first.match(/'|"/)) ? content.substr(1, content.length - 2) : content;
}
function getWords(characters) {
var words = [], i = 0, onWordBoundary = false, word;
while(characters.length) {
if (isWordBoundary(characters[i]) === onWordBoundary) {
word = characters.splice(0, i);
if (word.length) {
words.push(punycode.ucs2.encode(word));
}
onWordBoundary =! onWordBoundary;
i = 0;
} else {
i++;
}
if (i >= characters.length) {
word = characters.splice(0, i);
if (word.length) {
words.push(punycode.ucs2.encode(word));
}
}
}
return words;
}
function isWordBoundary(characterCode) {
return [
32, // <space>
13, // \r
10, // \n
9, // \t
45 // -
].indexOf(characterCode) !== -1;
}
function hasUnicode(string) {
return (/[^\u0000-\u00ff]/).test(string);
}
module.exports = NodeParser;
},{"./color":5,"./fontmetrics":9,"./log":15,"./nodecontainer":16,"./promise":18,"./pseudoelementcontainer":21,"./stackingcontext":24,"./textcontainer":28,"./utils":29,"punycode":3}],18:[function(require,module,exports){
module.exports = require('es6-promise').Promise;
},{"es6-promise":1}],19:[function(require,module,exports){
var Promise = require('./promise');
var XHR = require('./xhr');
var utils = require('./utils');
var log = require('./log');
var createWindowClone = require('./clone');
var decode64 = utils.decode64;
function Proxy(src, proxyUrl, document) {
var supportsCORS = ('withCredentials' in new XMLHttpRequest());
if (!proxyUrl) {
return Promise.reject("No proxy configured");
}
var callback = createCallback(supportsCORS);
var url = createProxyUrl(proxyUrl, src, callback);
return supportsCORS ? XHR(url) : (jsonp(document, url, callback).then(function(response) {
return decode64(response.content);
}));
}
var proxyCount = 0;
function ProxyURL(src, proxyUrl, document) {
var supportsCORSImage = ('crossOrigin' in new Image());
var callback = createCallback(supportsCORSImage);
var url = createProxyUrl(proxyUrl, src, callback);
return (supportsCORSImage ? Promise.resolve(url) : jsonp(document, url, callback).then(function(response) {
return "data:" + response.type + ";base64," + response.content;
}));
}
function jsonp(document, url, callback) {
return new Promise(function(resolve, reject) {
var s = document.createElement("script");
var cleanup = function() {
delete window.html2canvas.proxy[callback];
document.body.removeChild(s);
};
window.html2canvas.proxy[callback] = function(response) {
cleanup();
resolve(response);
};
s.src = url;
s.onerror = function(e) {
cleanup();
reject(e);
};
document.body.appendChild(s);
});
}
function createCallback(useCORS) {
return !useCORS ? "html2canvas_" + Date.now() + "_" + (++proxyCount) + "_" + Math.round(Math.random() * 100000) : "";
}
function createProxyUrl(proxyUrl, src, callback) {
return proxyUrl + "?url=" + encodeURIComponent(src) + (callback.length ? "&callback=html2canvas.proxy." + callback : "");
}
function documentFromHTML(src) {
return function(html) {
var parser = new DOMParser(), doc;
try {
doc = parser.parseFromString(html, "text/html");
} catch(e) {
log("DOMParser not supported, falling back to createHTMLDocument");
doc = document.implementation.createHTMLDocument("");
try {
doc.open();
doc.write(html);
doc.close();
} catch(ee) {
log("createHTMLDocument write not supported, falling back to document.body.innerHTML");
doc.body.innerHTML = html; // ie9 doesnt support writing to documentElement
}
}
var b = doc.querySelector("base");
if (!b || !b.href.host) {
var base = doc.createElement("base");
base.href = src;
doc.head.insertBefore(base, doc.head.firstChild);
}
return doc;
};
}
function loadUrlDocument(src, proxy, document, width, height, options) {
return new Proxy(src, proxy, window.document).then(documentFromHTML(src)).then(function(doc) {
return createWindowClone(doc, document, width, height, options, 0, 0);
});
}
exports.Proxy = Proxy;
exports.ProxyURL = ProxyURL;
exports.loadUrlDocument = loadUrlDocument;
},{"./clone":4,"./log":15,"./promise":18,"./utils":29,"./xhr":31}],20:[function(require,module,exports){
var ProxyURL = require('./proxy').ProxyURL;
var Promise = require('./promise');
function ProxyImageContainer(src, proxy) {
var link = document.createElement("a");
link.href = src;
src = link.href;
this.src = src;
this.image = new Image();
var self = this;
this.promise = new Promise(function(resolve, reject) {
self.image.crossOrigin = "Anonymous";
self.image.onload = resolve;
self.image.onerror = reject;
new ProxyURL(src, proxy, document).then(function(url) {
self.image.src = url;
})['catch'](reject);
});
}
module.exports = ProxyImageContainer;
},{"./promise":18,"./proxy":19}],21:[function(require,module,exports){
var NodeContainer = require('./nodecontainer');
function PseudoElementContainer(node, parent, type) {
NodeContainer.call(this, node, parent);
this.isPseudoElement = true;
this.before = type === ":before";
}
PseudoElementContainer.prototype.cloneTo = function(stack) {
PseudoElementContainer.prototype.cloneTo.call(this, stack);
stack.isPseudoElement = true;
stack.before = this.before;
};
PseudoElementContainer.prototype = Object.create(NodeContainer.prototype);
PseudoElementContainer.prototype.appendToDOM = function() {
if (this.before) {
this.parent.node.insertBefore(this.node, this.parent.node.firstChild);
} else {
this.parent.node.appendChild(this.node);
}
this.parent.node.className += " " + this.getHideClass();
};
PseudoElementContainer.prototype.cleanDOM = function() {
this.node.parentNode.removeChild(this.node);
this.parent.node.className = this.parent.node.className.replace(this.getHideClass(), "");
};
PseudoElementContainer.prototype.getHideClass = function() {
return this["PSEUDO_HIDE_ELEMENT_CLASS_" + (this.before ? "BEFORE" : "AFTER")];
};
PseudoElementContainer.prototype.PSEUDO_HIDE_ELEMENT_CLASS_BEFORE = "___html2canvas___pseudoelement_before";
PseudoElementContainer.prototype.PSEUDO_HIDE_ELEMENT_CLASS_AFTER = "___html2canvas___pseudoelement_after";
module.exports = PseudoElementContainer;
},{"./nodecontainer":16}],22:[function(require,module,exports){
var log = require('./log');
function Renderer(width, height, images, options, document) {
this.width = width;
this.height = height;
this.images = images;
this.options = options;
this.document = document;
}
Renderer.prototype.renderImage = function(container, bounds, borderData, imageContainer) {
var paddingLeft = container.cssInt('paddingLeft'),
paddingTop = container.cssInt('paddingTop'),
paddingRight = container.cssInt('paddingRight'),
paddingBottom = container.cssInt('paddingBottom'),
borders = borderData.borders;
var width = bounds.width - (borders[1].width + borders[3].width + paddingLeft + paddingRight);
var height = bounds.height - (borders[0].width + borders[2].width + paddingTop + paddingBottom);
this.drawImage(
imageContainer,
0,
0,
imageContainer.image.width || width,
imageContainer.image.height || height,
bounds.left + paddingLeft + borders[3].width,
bounds.top + paddingTop + borders[0].width,
width,
height
);
};
Renderer.prototype.renderBackground = function(container, bounds, borderData) {
if (bounds.height > 0 && bounds.width > 0) {
this.renderBackgroundColor(container, bounds);
this.renderBackgroundImage(container, bounds, borderData);
}
};
Renderer.prototype.renderBackgroundColor = function(container, bounds) {
var color = container.color("backgroundColor");
if (!color.isTransparent()) {
this.rectangle(bounds.left, bounds.top, bounds.width, bounds.height, color);
}
};
Renderer.prototype.renderBorders = function(borders) {
borders.forEach(this.renderBorder, this);
};
Renderer.prototype.renderBorder = function(data) {
if (!data.color.isTransparent() && data.args !== null) {
this.drawShape(data.args, data.color);
}
};
Renderer.prototype.renderBackgroundImage = function(container, bounds, borderData) {
var backgroundImages = container.parseBackgroundImages();
backgroundImages.reverse().forEach(function(backgroundImage, index, arr) {
switch(backgroundImage.method) {
case "url":
var image = this.images.get(backgroundImage.args[0]);
if (image) {
this.renderBackgroundRepeating(container, bounds, image, arr.length - (index+1), borderData);
} else {
log("Error loading background-image", backgroundImage.args[0]);
}
break;
case "linear-gradient":
case "gradient":
var gradientImage = this.images.get(backgroundImage.value);
if (gradientImage) {
this.renderBackgroundGradient(gradientImage, bounds, borderData);
} else {
log("Error loading background-image", backgroundImage.args[0]);
}
break;
case "none":
break;
default:
log("Unknown background-image type", backgroundImage.args[0]);
}
}, this);
};
Renderer.prototype.renderBackgroundRepeating = function(container, bounds, imageContainer, index, borderData) {
var size = container.parseBackgroundSize(bounds, imageContainer.image, index);
var position = container.parseBackgroundPosition(bounds, imageContainer.image, index, size);
var repeat = container.parseBackgroundRepeat(index);
switch (repeat) {
case "repeat-x":
case "repeat no-repeat":
this.backgroundRepeatShape(imageContainer, position, size, bounds, bounds.left + borderData[3], bounds.top + position.top + borderData[0], 99999, size.height, borderData);
break;
case "repeat-y":
case "no-repeat repeat":
this.backgroundRepeatShape(imageContainer, position, size, bounds, bounds.left + position.left + borderData[3], bounds.top + borderData[0], size.width, 99999, borderData);
break;
case "no-repeat":
this.backgroundRepeatShape(imageContainer, position, size, bounds, bounds.left + position.left + borderData[3], bounds.top + position.top + borderData[0], size.width, size.height, borderData);
break;
default:
this.renderBackgroundRepeat(imageContainer, position, size, {top: bounds.top, left: bounds.left}, borderData[3], borderData[0]);
break;
}
};
module.exports = Renderer;
},{"./log":15}],23:[function(require,module,exports){
var Renderer = require('../renderer');
var LinearGradientContainer = require('../lineargradientcontainer');
var Utils = require('../utils');
var log = require('../log');
function CanvasRenderer(width, height) {
this.ratio = Utils.getDeviceRatio();
width = Utils.applyRatio(width);
height = Utils.applyRatio(height);
Renderer.apply(this, arguments);
this.canvas = this.options.canvas || this.document.createElement("canvas");
if (!this.options.canvas) {
this.canvas.width = width;
this.canvas.height = height;
if (this.ratio !== 1) {
var scale = 1 / this.ratio;
this.canvas.style.transform = 'scaleX(' + scale + ') scaleY(' + scale + ')';
this.canvas.style.transformOrigin = '0 0';
}
}
this.ctx = this.canvas.getContext("2d");
this.taintCtx = this.document.createElement("canvas").getContext("2d");
this.ctx.textBaseline = "bottom";
this.variables = {};
log("Initialized CanvasRenderer with size", width, "x", height);
}
CanvasRenderer.prototype = Object.create(Renderer.prototype);
CanvasRenderer.prototype.setFillStyle = function(fillStyle) {
this.ctx.fillStyle = typeof(fillStyle) === "object" && !!fillStyle.isColor ? fillStyle.toString() : fillStyle;
return this.ctx;
};
CanvasRenderer.prototype.rectangle = function(left, top, width, height, color) {
left = Utils.applyRatio(left);
top = Utils.applyRatio(top);
width = Utils.applyRatio(width);
height = Utils.applyRatio(height);
this.setFillStyle(color).fillRect(left, top, width, height);
};
CanvasRenderer.prototype.circle = function(left, top, size, color) {
this.setFillStyle(color);
this.ctx.beginPath();
this.ctx.arc(left + size / 2, top + size / 2, size / 2, 0, Math.PI*2, true);
this.ctx.closePath();
this.ctx.fill();
};
CanvasRenderer.prototype.circleStroke = function(left, top, size, color, stroke, strokeColor) {
left = Utils.applyRatio(left);
top = Utils.applyRatio(top);
size = Utils.applyRatio(size);
this.circle(left, top, size, color);
this.ctx.strokeStyle = strokeColor.toString();
this.ctx.stroke();
};
CanvasRenderer.prototype.drawShape = function(shape, color) {
shape = Utils.applyRatioToShape(shape);
this.shape(shape);
this.setFillStyle(color).fill();
};
CanvasRenderer.prototype.taints = function(imageContainer) {
if (imageContainer.tainted === null) {
this.taintCtx.drawImage(imageContainer.image, 0, 0);
try {
this.taintCtx.getImageData(0, 0, 1, 1);
imageContainer.tainted = false;
} catch(e) {
this.taintCtx = document.createElement("canvas").getContext("2d");
imageContainer.tainted = true;
}
}
return imageContainer.tainted;
};
CanvasRenderer.prototype.drawImage = function(imageContainer, sx, sy, sw, sh, dx, dy, dw, dh) {
//Do not scale source coordinates
//sx = Utils.applyRatio(sx);
//sy = Utils.applyRatio(sy);
//sw = Utils.applyRatio(sw);
//sh = Utils.applyRatio(sh);
dx = Utils.applyRatio(dx);
dy = Utils.applyRatio(dy);
dw = Utils.applyRatio(dw);
dh = Utils.applyRatio(dh);
if (!this.taints(imageContainer) || this.options.allowTaint) {
this.ctx.drawImage(imageContainer.image, sx, sy, sw, sh, dx, dy, dw, dh);
}
};
CanvasRenderer.prototype.clip = function(shapes, callback, context) {
this.ctx.save();
shapes.filter(hasEntries).forEach(function(shape) {
shape = Utils.applyRatioToShape(shape);
this.shape(shape)//.clip();
}, this);
callback.call(context);
this.ctx.restore();
};
CanvasRenderer.prototype.shape = function(shape) {
this.ctx.beginPath();
shape.forEach(function(point, index) {
if (point[0] === "rect") {
this.ctx.rect.apply(this.ctx, point.slice(1));
} else {
this.ctx[(index === 0) ? "moveTo" : point[0] + "To" ].apply(this.ctx, point.slice(1));
}
}, this);
this.ctx.closePath();
return this.ctx;
};
CanvasRenderer.prototype.font = function(color, style, variant, weight, size, family) {
size = Utils.applyRatioToFontSize(size);
this.setFillStyle(color).font = [style, variant, weight, size, family].join(" ").split(",")[0];
};
CanvasRenderer.prototype.fontShadow = function(color, offsetX, offsetY, blur) {
offsetX = Utils.applyRatio(offsetX);
offsetY = Utils.applyRatio(offsetY);
this.setVariable("shadowColor", color.toString())
.setVariable("shadowOffsetY", offsetX)
.setVariable("shadowOffsetX", offsetY)
.setVariable("shadowBlur", blur);
};
CanvasRenderer.prototype.clearShadow = function() {
this.setVariable("shadowColor", "rgba(0,0,0,0)");
};
CanvasRenderer.prototype.setOpacity = function(opacity) {
this.ctx.globalAlpha = opacity;
};
CanvasRenderer.prototype.setTransform = function(transform) {
debugger;
this.ctx.translate(transform.origin[0], transform.origin[1]);
this.ctx.transform.apply(this.ctx, transform.matrix);
this.ctx.translate(-transform.origin[0], -transform.origin[1]);
};
CanvasRenderer.prototype.setVariable = function(property, value) {
if (this.variables[property] !== value) {
this.variables[property] = this.ctx[property] = value;
}
return this;
};
CanvasRenderer.prototype.text = function(text, left, bottom) {
left = Utils.applyRatio(left);
bottom = Utils.applyRatio(bottom);
this.ctx.fillText(text, left, bottom);
};
CanvasRenderer.prototype.backgroundRepeatShape = function(imageContainer, backgroundPosition, size, bounds, left, top, width, height, borderData) {
debugger;
size = Utils.applyRatio(size);
bounds = Utils.applyRatioToBounds(bounds);
left = Utils.applyRatio(left);
top = Utils.applyRatio(top);
width = Utils.applyRatio(width);
height = Utils.applyRatio(height);
var shape = [
["line", Math.round(left), Math.round(top)],
["line", Math.round(left + width), Math.round(top)],
["line", Math.round(left + width), Math.round(height + top)],
["line", Math.round(left), Math.round(height + top)]
];
this.clip([shape], function() {
this.renderBackgroundRepeat(imageContainer, backgroundPosition, size, bounds, borderData[3], borderData[0]);
}, this);
};
CanvasRenderer.prototype.renderBackgroundRepeat = function(imageContainer, backgroundPosition, size, bounds, borderLeft, borderTop) {
debugger;
bounds = Utils.applyRatioToBounds(bounds);
size = Utils.applyRatioToBounds(size);
b
gitextract_das9wpov/
├── .gitignore
├── README.md
├── bower.json
├── demo/
│ ├── advanced-content-dom.html
│ ├── advanced-content-webgl.html
│ ├── assets/
│ │ ├── css/
│ │ │ ├── appstyle.css
│ │ │ └── style.css
│ │ └── fonts/
│ │ └── README-FONTS.txt
│ ├── basic-dom.html
│ ├── basic-webgl-jquery.html
│ ├── basic-webgl.html
│ ├── filters.html
│ ├── js/
│ │ ├── slider.js
│ │ └── vendor/
│ │ ├── html2canvas.js
│ │ └── velocity.js
│ ├── nested-content-webgl.html
│ └── ripples.html
├── dist/
│ ├── htmlgl-effects.js
│ └── htmlgl.js
├── figures/
│ ├── htmlgl-flow-diagram.ep
│ └── logo.psd
├── gulpfile.js
├── package.json
├── page/
│ ├── css/
│ │ └── style.css
│ ├── index.html
│ └── js/
│ ├── basics.js
│ ├── dat.gui.js
│ ├── effects.js
│ └── slider.js
└── src/
├── effects/
│ ├── ascii.js
│ ├── bloom.js
│ ├── diagonal-blur.js
│ ├── dotscreen.js
│ ├── invert.js
│ ├── noise.js
│ ├── pixelate.js
│ ├── rgbsplit.js
│ ├── ripples.js
│ └── twist.js
├── gl-context.js
├── gl-effects-manager.js
├── gl-element-resolver.js
├── gl-element.js
├── images-loaded.js
└── util.js
SYMBOL INDEX (639 symbols across 9 files)
FILE: demo/js/slider.js
function setSliderX (line 17) | function setSliderX(x) {
function getSliderX (line 21) | function getSliderX() {
function onDragStart (line 25) | function onDragStart(event) {
function onDragEnd (line 31) | function onDragEnd() {
function onMove (line 35) | function onMove(event) {
FILE: demo/js/vendor/html2canvas.js
function s (line 8) | function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&re...
function lib$es6$promise$utils$$objectOrFunction (line 20) | function lib$es6$promise$utils$$objectOrFunction(x) {
function lib$es6$promise$utils$$isFunction (line 24) | function lib$es6$promise$utils$$isFunction(x) {
function lib$es6$promise$utils$$isMaybeThenable (line 28) | function lib$es6$promise$utils$$isMaybeThenable(x) {
function lib$es6$promise$asap$$setScheduler (line 63) | function lib$es6$promise$asap$$setScheduler(scheduleFn) {
function lib$es6$promise$asap$$setAsap (line 67) | function lib$es6$promise$asap$$setAsap(asapFn) {
function lib$es6$promise$asap$$useNextTick (line 82) | function lib$es6$promise$asap$$useNextTick() {
function lib$es6$promise$asap$$useVertxTimer (line 96) | function lib$es6$promise$asap$$useVertxTimer() {
function lib$es6$promise$asap$$useMutationObserver (line 102) | function lib$es6$promise$asap$$useMutationObserver() {
function lib$es6$promise$asap$$useMessageChannel (line 114) | function lib$es6$promise$asap$$useMessageChannel() {
function lib$es6$promise$asap$$useSetTimeout (line 122) | function lib$es6$promise$asap$$useSetTimeout() {
function lib$es6$promise$asap$$flush (line 129) | function lib$es6$promise$asap$$flush() {
function lib$es6$promise$asap$$attemptVertex (line 143) | function lib$es6$promise$asap$$attemptVertex() {
function lib$es6$promise$$internal$$noop (line 168) | function lib$es6$promise$$internal$$noop() {}
function lib$es6$promise$$internal$$selfFullfillment (line 176) | function lib$es6$promise$$internal$$selfFullfillment() {
function lib$es6$promise$$internal$$cannotReturnOwn (line 180) | function lib$es6$promise$$internal$$cannotReturnOwn() {
function lib$es6$promise$$internal$$getThen (line 184) | function lib$es6$promise$$internal$$getThen(promise) {
function lib$es6$promise$$internal$$tryThen (line 193) | function lib$es6$promise$$internal$$tryThen(then, value, fulfillmentHand...
function lib$es6$promise$$internal$$handleForeignThenable (line 201) | function lib$es6$promise$$internal$$handleForeignThenable(promise, thena...
function lib$es6$promise$$internal$$handleOwnThenable (line 226) | function lib$es6$promise$$internal$$handleOwnThenable(promise, thenable) {
function lib$es6$promise$$internal$$handleMaybeThenable (line 240) | function lib$es6$promise$$internal$$handleMaybeThenable(promise, maybeTh...
function lib$es6$promise$$internal$$resolve (line 258) | function lib$es6$promise$$internal$$resolve(promise, value) {
function lib$es6$promise$$internal$$publishRejection (line 268) | function lib$es6$promise$$internal$$publishRejection(promise) {
function lib$es6$promise$$internal$$fulfill (line 276) | function lib$es6$promise$$internal$$fulfill(promise, value) {
function lib$es6$promise$$internal$$reject (line 287) | function lib$es6$promise$$internal$$reject(promise, reason) {
function lib$es6$promise$$internal$$subscribe (line 295) | function lib$es6$promise$$internal$$subscribe(parent, child, onFulfillme...
function lib$es6$promise$$internal$$publish (line 310) | function lib$es6$promise$$internal$$publish(promise) {
function lib$es6$promise$$internal$$ErrorObject (line 332) | function lib$es6$promise$$internal$$ErrorObject() {
function lib$es6$promise$$internal$$tryCatch (line 338) | function lib$es6$promise$$internal$$tryCatch(callback, detail) {
function lib$es6$promise$$internal$$invokeCallback (line 347) | function lib$es6$promise$$internal$$invokeCallback(settled, promise, cal...
function lib$es6$promise$$internal$$initializePromise (line 385) | function lib$es6$promise$$internal$$initializePromise(promise, resolver) {
function lib$es6$promise$enumerator$$Enumerator (line 397) | function lib$es6$promise$enumerator$$Enumerator(Constructor, input) {
function lib$es6$promise$promise$all$$all (line 495) | function lib$es6$promise$promise$all$$all(entries) {
function lib$es6$promise$promise$race$$race (line 499) | function lib$es6$promise$promise$race$$race(entries) {
function lib$es6$promise$promise$resolve$$resolve (line 527) | function lib$es6$promise$promise$resolve$$resolve(object) {
function lib$es6$promise$promise$reject$$reject (line 540) | function lib$es6$promise$promise$reject$$reject(reason) {
function lib$es6$promise$promise$$needsResolver (line 551) | function lib$es6$promise$promise$$needsResolver() {
function lib$es6$promise$promise$$needsNew (line 555) | function lib$es6$promise$promise$$needsNew() {
function lib$es6$promise$promise$$Promise (line 663) | function lib$es6$promise$promise$$Promise(resolver) {
function lib$es6$promise$polyfill$$polyfill (line 940) | function lib$es6$promise$polyfill$$polyfill() {
function cleanUpNextTick (line 993) | function cleanUpNextTick() {
function drainQueue (line 1005) | function drainQueue() {
function Item (line 1041) | function Item(fun, array) {
function noop (line 1055) | function noop() {}
function error (line 1143) | function error(type) {
function map (line 1155) | function map(array, fn) {
function mapDomain (line 1174) | function mapDomain(string, fn) {
function ucs2decode (line 1203) | function ucs2decode(string) {
function ucs2encode (line 1237) | function ucs2encode(array) {
function basicToDigit (line 1259) | function basicToDigit(codePoint) {
function digitToBasic (line 1283) | function digitToBasic(digit, flag) {
function adapt (line 1294) | function adapt(delta, numPoints, firstTime) {
function decode (line 1311) | function decode(input) {
function encode (line 1412) | function encode(input) {
function toUnicode (line 1530) | function toUnicode(input) {
function toASCII (line 1549) | function toASCII(input) {
function restoreOwnerScroll (line 1614) | function restoreOwnerScroll(ownerDocument, x, y) {
function cloneCanvasContents (line 1620) | function cloneCanvasContents(canvas, clonedCanvas) {
function cloneNode (line 1632) | function cloneNode(node, javascriptEnabled) {
function initNode (line 1656) | function initNode(node) {
function Color (line 1721) | function Color(value) {
function html2canvas (line 2007) | function html2canvas(nodeList, options) {
function renderDocument (line 2055) | function renderDocument(document, options, windowWidth, windowHeight, ht...
function renderWindow (line 2072) | function renderWindow(node, container, options, windowWidth, windowHeigh...
function cleanupContainer (line 2106) | function cleanupContainer(container, options) {
function crop (line 2113) | function crop(canvas, bounds) {
function documentWidth (line 2127) | function documentWidth (doc) {
function documentHeight (line 2135) | function documentHeight (doc) {
function absoluteUrl (line 2143) | function absoluteUrl(url) {
function DummyImageContainer (line 2155) | function DummyImageContainer(src) {
function Font (line 2178) | function Font(family, size) {
function FontMetrics (line 2232) | function FontMetrics() {
function FrameContainer (line 2251) | function FrameContainer(container, sameOrigin, options) {
function GradientContainer (line 2282) | function GradientContainer(imageData) {
function ImageContainer (line 2303) | function ImageContainer(src, cors) {
function ImageLoader (line 2336) | function ImageLoader(options, support) {
function LinearGradientContainer (line 2487) | function LinearGradientContainer(imageData) {
function NodeContainer (line 2577) | function NodeContainer(node, parent) {
function selectionValue (line 2836) | function selectionValue(node) {
function parseMatrix (line 2841) | function parseMatrix(match) {
function isPercentage (line 2854) | function isPercentage(value) {
function removePx (line 2858) | function removePx(str) {
function asFloat (line 2862) | function asFloat(str) {
function NodeParser (line 2884) | function NodeParser(element, renderer, support, imageLoader, options) {
function hasParentClip (line 2968) | function hasParentClip(container) {
function toCamelCase (line 3019) | function toCamelCase(str) {
function ClearTransform (line 3132) | function ClearTransform() {}
function calculateBorders (line 3382) | function calculateBorders(borders, nodeBounds, borderPoints, radius) {
function getCurvePoints (line 3468) | function getCurvePoints(x, y, r1, r2) {
function calculateCurvePoints (line 3482) | function calculateCurvePoints(bounds, borderRadius, borders) {
function bezierCurve (line 3524) | function bezierCurve(start, startControl, endControl, end) {
function drawSide (line 3555) | function drawSide(borderData, radius1, radius2, outer1, inner1, outer2, ...
function parseCorner (line 3585) | function parseCorner(borderArgs, radius1, radius2, corner1, corner2, x, ...
function negativeZIndex (line 3599) | function negativeZIndex(container) {
function positiveZIndex (line 3603) | function positiveZIndex(container) {
function zIndex0 (line 3607) | function zIndex0(container) {
function inlineLevel (line 3611) | function inlineLevel(container) {
function isStackingContext (line 3615) | function isStackingContext(container) {
function hasText (line 3619) | function hasText(container) {
function noLetterSpacing (line 3623) | function noLetterSpacing(container) {
function getBorderRadiusData (line 3627) | function getBorderRadiusData(container) {
function renderableNode (line 3638) | function renderableNode(node) {
function isPositionedForStacking (line 3642) | function isPositionedForStacking(container) {
function isPositioned (line 3648) | function isPositioned(container) {
function isFloating (line 3652) | function isFloating(container) {
function isInlineBlock (line 3656) | function isInlineBlock(container) {
function not (line 3660) | function not(callback) {
function isElement (line 3667) | function isElement(container) {
function isPseudoElement (line 3671) | function isPseudoElement(container) {
function isTextNode (line 3675) | function isTextNode(container) {
function zIndexSort (line 3679) | function zIndexSort(contexts) {
function hasOpacity (line 3685) | function hasOpacity(container) {
function asInt (line 3689) | function asInt(value) {
function getWidth (line 3693) | function getWidth(border) {
function nonIgnoredElement (line 3697) | function nonIgnoredElement(nodeContainer) {
function flatten (line 3701) | function flatten(arrays) {
function stripQuotes (line 3705) | function stripQuotes(content) {
function getWords (line 3710) | function getWords(characters) {
function isWordBoundary (line 3734) | function isWordBoundary(characterCode) {
function hasUnicode (line 3744) | function hasUnicode(string) {
function Proxy (line 3761) | function Proxy(src, proxyUrl, document) {
function ProxyURL (line 3775) | function ProxyURL(src, proxyUrl, document) {
function jsonp (line 3784) | function jsonp(document, url, callback) {
function createCallback (line 3804) | function createCallback(useCORS) {
function createProxyUrl (line 3808) | function createProxyUrl(proxyUrl, src, callback) {
function documentFromHTML (line 3812) | function documentFromHTML(src) {
function loadUrlDocument (line 3841) | function loadUrlDocument(src, proxy, document, width, height, options) {
function ProxyImageContainer (line 3855) | function ProxyImageContainer(src, proxy) {
function PseudoElementContainer (line 3878) | function PseudoElementContainer(node, parent, type) {
function Renderer (line 3918) | function Renderer(width, height, images, options, document) {
function CanvasRenderer (line 4031) | function CanvasRenderer(width, height) {
function hasEntries (line 4266) | function hasEntries(array) {
function StackingContext (line 4275) | function StackingContext(hasOwnStacking, opacity, element, parent) {
function Support (line 4293) | function Support(document) {
function SVGContainer (line 4350) | function SVGContainer(src) {
function SVGNodeContainer (line 4404) | function SVGNodeContainer(node, _native) {
function TextContainer (line 4431) | function TextContainer(node, parent) {
function capitalize (line 4455) | function capitalize(m, p1, p2) {
function WebkitGradientContainer (line 4689) | function WebkitGradientContainer(imageData) {
function XHR (line 4701) | function XHR(url) {
FILE: demo/js/vendor/velocity.js
function isArraylike (line 55) | function isArraylike (obj) {
function $makeArray (line 240) | function $makeArray (arr, results) {
function offsetParent (line 348) | function offsetParent() {
function compactSparseArray (line 481) | function compactSparseArray (array) {
function sanitizeElements (line 497) | function sanitizeElements (elements) {
function Data (line 671) | function Data (element) {
function generateStep (line 684) | function generateStep (steps) {
function generateBezier (line 691) | function generateBezier (mX1, mY1, mX2, mY2) {
function springAccelerationForState (line 819) | function springAccelerationForState (state) {
function springEvaluateStateWithDerivative (line 823) | function springEvaluateStateWithDerivative (initialState, dt, derivative) {
function springIntegrateState (line 834) | function springIntegrateState (state, dt) {
function getEasing (line 943) | function getEasing(value, duration) {
function computePropertyValue (line 1614) | function computePropertyValue (element, property) {
function getTransformFloat (line 1886) | function getTransformFloat (transformProperty) {
function getChain (line 2007) | function getChain () {
function processElement (line 2349) | function processElement () {
function tick (line 3341) | function tick (timestamp) {
function completeCall (line 3596) | function completeCall (callIndex, isStopped) {
FILE: dist/htmlgl-effects.js
function redraw (line 174) | function redraw() {
FILE: dist/htmlgl.js
function b (line 2) | function b(a,b){return function(){a.apply(b,arguments)}}
function c (line 2) | function c(a){if("object"!=typeof this)throw new TypeError("Promises mus...
function d (line 2) | function d(a){var b=this;return null===this._state?void this._deferreds....
function e (line 2) | function e(a){try{if(a===this)throw new TypeError("A promise cannot be r...
function f (line 2) | function f(a){this._state=!1,this._value=a,g.call(this)}
function g (line 2) | function g(){for(var a=0,b=this._deferreds.length;b>a;a++)d.call(this,th...
function h (line 2) | function h(a,b,c,d){this.onFulfilled="function"==typeof a?a:null,this.on...
function i (line 2) | function i(a,b,c){var d=!1;try{a(function(a){d||(d=!0,b(a))},function(a)...
function d (line 2) | function d(f,g){try{if(g&&("object"==typeof g||"function"==typeof g)){va...
function t (line 13) | function t(e,t){o(e,function(e){return t(e)?!0:void n(e,t)}),n(e,t)}
function o (line 13) | function o(e,t,n){var r=e.firstElementChild;if(!r)for(r=e.firstChild;r&&...
function n (line 13) | function n(e,o){for(var n=e.shadowRoot;n;)t(n,o),n=n.olderShadowRoot}
function r (line 13) | function r(e,t){i=[],a(e,t),i=null}
function a (line 13) | function a(e,t){if(e=wrap(e),!(i.indexOf(e)>=0)){i.push(e);for(var o,n=e...
function t (line 13) | function t(e){return o(e)||n(e)}
function o (line 13) | function o(t){return e.upgrade(t)?!0:void u(t)}
function n (line 13) | function n(e){y(e,function(e){return o(e)?!0:void 0})}
function r (line 13) | function r(e){u(e),f(e)&&y(e,function(e){u(e)})}
function a (line 13) | function a(e){M.push(e),C||(C=!0,setTimeout(i))}
function i (line 13) | function i(){C=!1;for(var e,t=M,o=0,n=t.length;n>o&&(e=t[o]);o++)e();M=[]}
function u (line 13) | function u(e){E?a(function(){d(e)}):d(e)}
function d (line 13) | function d(e){e.__upgraded__&&(e.attachedCallback||e.detachedCallback)&&...
function c (line 13) | function c(e){s(e),y(e,function(e){s(e)})}
function s (line 13) | function s(e){E?a(function(){l(e)}):l(e)}
function l (line 13) | function l(e){e.__upgraded__&&(e.attachedCallback||e.detachedCallback)&&...
function f (line 13) | function f(e){for(var t=e,o=wrap(document);t;){if(t==o)return!0;t=t.pare...
function p (line 13) | function p(e){if(e.shadowRoot&&!e.shadowRoot.__watched){_.dom&&console.l...
function m (line 13) | function m(e){if(_.dom){var o=e[0];if(o&&"childList"===o.type&&o.addedNo...
function w (line 13) | function w(e){for(e=wrap(e),e||(e=wrap(document));e.parentNode;)e=e.pare...
function h (line 13) | function h(e){if(!e.__observer){var t=new MutationObserver(m);t.observe(...
function g (line 13) | function g(e){e=wrap(e),_.dom&&console.group("upgradeDocument: ",e.baseU...
function v (line 13) | function v(e){b(e,g)}
function t (line 13) | function t(t){if(!t.__upgraded__&&t.nodeType===Node.ELEMENT_NODE){var n=...
function o (line 13) | function o(t,o){return i.upgrade&&console.group("upgrade:",t.localName),...
function n (line 13) | function n(e,t){Object.__proto__?e.__proto__=t.prototype:(r(e,t.prototyp...
function r (line 13) | function r(e,t,o){for(var n={},r=t;r!==o&&r!==HTMLElement.prototype;){fo...
function a (line 13) | function a(e){e.createdCallback&&e.createdCallback()}
function t (line 13) | function t(t,n){var d=n||{};if(!t)throw new Error("document.registerElem...
function o (line 13) | function o(e){if(!e.setAttribute._polyfilled){var t=e.setAttribute;e.set...
function n (line 13) | function n(e,t,o){e=e.toLowerCase();var n=this.getAttribute(e);o.apply(t...
function r (line 13) | function r(e){for(var t=0;t<b.length;t++)if(e===b[t])return!0}
function a (line 13) | function a(e){var t=c(e);return t?a(t["extends"]).concat([t]):[]}
function i (line 13) | function i(e){for(var t,o=e["extends"],n=0;t=e.ancestry[n];n++)o=t.is&&t...
function u (line 13) | function u(e){if(!Object.__proto__){var t=HTMLElement.prototype;if(e.is)...
function d (line 13) | function d(e){return v(M(e.tag),e)}
function c (line 13) | function c(e){return e?E[e.toLowerCase()]:void 0}
function s (line 13) | function s(e,t){E[e]=t}
function l (line 13) | function l(e){return function(){return d(e)}}
function f (line 13) | function f(e,t,o){return e===C?p(t,o):N(e,t)}
function p (line 13) | function p(e,t){var o=c(t||e);if(o){if(e==o.tag&&t==o.is)return new o.ct...
function m (line 13) | function m(e){var t=T.call(this,e);return g(t),t}
function t (line 13) | function t(){i(wrap(document)),window.HTMLImports&&(HTMLImports.__import...
function s (line 47) | function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&re...
function noop (line 59) | function noop() {}
function identity (line 60) | function identity(v) {
function toBool (line 63) | function toBool(v) {
function notId (line 66) | function notId(v) {
function only_once (line 89) | function only_once(fn) {
function _once (line 97) | function _once(fn) {
function _isArrayLike (line 119) | function _isArrayLike(arr) {
function _arrayEach (line 128) | function _arrayEach(arr, iterator) {
function _map (line 137) | function _map(arr, iterator) {
function _range (line 148) | function _range(count) {
function _reduce (line 152) | function _reduce(arr, iterator, memo) {
function _forEachOf (line 159) | function _forEachOf(object, iterator) {
function _indexOf (line 165) | function _indexOf(arr, item) {
function _keyIterator (line 182) | function _keyIterator(coll) {
function _restParam (line 205) | function _restParam(func, startIndex) {
function _withoutIndex (line 227) | function _withoutIndex(iterator) {
function done (line 286) | function done(err) {
function iterate (line 305) | function iterate() {
function _eachOfLimit (line 339) | function _eachOfLimit(limit) {
function doParallel (line 383) | function doParallel(fn) {
function doParallelLimit (line 388) | function doParallelLimit(fn) {
function doSeries (line 393) | function doSeries(fn) {
function _asyncMap (line 399) | function _asyncMap(eachfn, arr, iterator, callback) {
function _filter (line 452) | function _filter(eachfn, arr, iterator, callback) {
function _reject (line 479) | function _reject(eachfn, arr, iterator, callback) {
function _createTester (line 490) | function _createTester(eachfn, check, getResult) {
function _findGetResult (line 525) | function _findGetResult(v, x) {
function comparator (line 554) | function comparator(left, right) {
function addListener (line 582) | function addListener(fn) {
function removeListener (line 585) | function removeListener(fn) {
function taskComplete (line 589) | function taskComplete() {
function ready (line 637) | function ready() {
function listener (line 649) | function listener() {
function parseTimes (line 672) | function parseTimes(acc, t){
function wrappedTask (line 696) | function wrappedTask(wrappedCallback, wrappedResults) {
function wrapIterator (line 741) | function wrapIterator(iterator) {
function _parallel (line 761) | function _parallel(eachfn, tasks, callback) {
function makeCallback (line 791) | function makeCallback(index) {
function _concat (line 814) | function _concat(eachfn, arr, fn, callback) {
function _queue (line 901) | function _queue(worker, concurrency, payload) {
function _compareTasks (line 1043) | function _compareTasks(a, b){
function _binarySearch (line 1047) | function _binarySearch(sequence, item, compare) {
function _insert (line 1061) | function _insert(q, data, priority, callback) {
function _console_fn (line 1109) | function _console_fn(name) {
function _times (line 1172) | function _times(mapper) {
function _applyEach (line 1212) | function _applyEach(eachfn) {
function next (line 1238) | function next(err) {
function ensureAsync (line 1247) | function ensureAsync(fn) {
function normalizeArray (line 1343) | function normalizeArray(parts, allowAboveRoot) {
function trim (line 1452) | function trim(arr) {
function filter (line 1525) | function filter (xs, f) {
function cleanUpNextTick (line 1553) | function cleanUpNextTick() {
function drainQueue (line 1565) | function drainQueue() {
function Item (line 1603) | function Item(fun, array) {
function noop (line 1617) | function noop() {}
function error (line 1704) | function error(type) {
function map (line 1716) | function map(array, fn) {
function mapDomain (line 1735) | function mapDomain(string, fn) {
function ucs2decode (line 1764) | function ucs2decode(string) {
function ucs2encode (line 1798) | function ucs2encode(array) {
function basicToDigit (line 1820) | function basicToDigit(codePoint) {
function digitToBasic (line 1844) | function digitToBasic(digit, flag) {
function adapt (line 1855) | function adapt(delta, numPoints, firstTime) {
function decode (line 1872) | function decode(input) {
function encode (line 1973) | function encode(input) {
function toUnicode (line 2091) | function toUnicode(input) {
function toASCII (line 2110) | function toASCII(input) {
function hasOwnProperty (line 2201) | function hasOwnProperty(obj, prop) {
function map (line 2330) | function map (xs, f) {
function Url (line 2384) | function Url() {
function urlParse (line 2449) | function urlParse(url, parseQueryString, slashesDenoteHost) {
function urlFormat (line 2691) | function urlFormat(obj) {
function urlResolve (line 2757) | function urlResolve(source, relative) {
function urlResolveObject (line 2765) | function urlResolveObject(source, relative) {
function isString (line 3047) | function isString(arg) {
function isObject (line 3051) | function isObject(arg) {
function isNull (line 3055) | function isNull(arg) {
function isNullOrUndefined (line 3058) | function isNullOrUndefined(arg) {
function earcut (line 3067) | function earcut(data, holeIndices, dim) {
function linkedList (line 3106) | function linkedList(data, start, end, dim, clockwise) {
function filterPoints (line 3127) | function filterPoints(start, end) {
function earcutLinked (line 3151) | function earcutLinked(ear, triangles, dim, minX, minY, size, pass) {
function isEar (line 3204) | function isEar(ear) {
function isEarHashed (line 3223) | function isEarHashed(ear, minX, minY, size) {
function cureLocalIntersections (line 3264) | function cureLocalIntersections(start, triangles, dim) {
function splitEarcut (line 3290) | function splitEarcut(start, triangles, dim, minX, minY, size) {
function eliminateHoles (line 3316) | function eliminateHoles(data, holeIndices, outerNode, dim) {
function compareX (line 3339) | function compareX(a, b) {
function eliminateHole (line 3344) | function eliminateHole(hole, outerNode) {
function findHoleBridge (line 3353) | function findHoleBridge(hole, outerNode) {
function indexCurve (line 3406) | function indexCurve(start, minX, minY, size) {
function sortLinked (line 3423) | function sortLinked(list) {
function zOrder (line 3484) | function zOrder(x, y, minX, minY, size) {
function getLeftmost (line 3503) | function getLeftmost(start) {
function pointInTriangle (line 3515) | function pointInTriangle(ax, ay, bx, by, cx, cy, px, py) {
function isValidDiagonal (line 3522) | function isValidDiagonal(a, b) {
function area (line 3528) | function area(p, q, r) {
function equals (line 3533) | function equals(p1, p2) {
function intersects (line 3538) | function intersects(p1, q1, p2, q2) {
function intersectsPolygon (line 3544) | function intersectsPolygon(a, b) {
function locallyInside (line 3556) | function locallyInside(a, b) {
function middleInside (line 3563) | function middleInside(a, b) {
function splitPolygon (line 3579) | function splitPolygon(a, b) {
function insertNode (line 3601) | function insertNode(i, x, y, last) {
function removeNode (line 3617) | function removeNode(p) {
function Node (line 3625) | function Node(i, x, y) {
function EE (line 3669) | function EE(fn, context, once) {
function EventEmitter (line 3682) | function EventEmitter() { /* Nothing to set */ }
function toObject (line 3918) | function toObject(val) {
function only_once (line 3981) | function only_once(fn) {
function done (line 4078) | function done(err) {
function _insert (line 4689) | function _insert(q, data, pos, callback) {
function _compareTasks (line 4791) | function _compareTasks(a, b){
function _binarySearch (line 4795) | function _binarySearch(sequence, item, compare) {
function _insert (line 4809) | function _insert(q, data, priority, callback) {
function next (line 5050) | function next(err) {
function Loader (line 5093) | function Loader(baseUrl, concurrency) {
function Resource (line 5559) | function Resource(name, url, options) {
function reqType (line 6097) | function reqType(xhr) {
function setExtMap (line 6328) | function setExtMap(map, extname, val) {
function AccessibilityManager (line 6520) | function AccessibilityManager(renderer)
function Container (line 7216) | function Container()
function DisplayObject (line 7858) | function DisplayObject()
function Graphics (line 8425) | function Graphics()
function GraphicsData (line 9606) | function GraphicsData(lineWidth, lineColor, lineAlpha, fillColor, fillAl...
function GraphicsRenderer (line 9703) | function GraphicsRenderer(renderer)
function getPt (line 10149) | function getPt(n1 , n2, perc) {
function WebGLGraphicsData (line 10599) | function WebGLGraphicsData(gl) {
function signum (line 10816) | function signum(x) {
function init (line 10826) | function init() {
function Matrix (line 10985) | function Matrix()
function Point (line 11418) | function Point(x, y)
function Circle (line 11514) | function Circle(x, y, radius)
function Ellipse (line 11603) | function Ellipse(x, y, width, height)
function Polygon (line 11697) | function Polygon(points_)
function Rectangle (line 11800) | function Rectangle(x, y, width, height)
function RoundedRectangle (line 11895) | function RoundedRectangle(x, y, width, height, radius)
function ParticleContainer (line 12009) | function ParticleContainer(maxSize, properties, batchSize)
function ParticleBuffer (line 12312) | function ParticleBuffer(gl, properties, dynamicPropertyFlags, size)
function ParticleRenderer (line 12537) | function ParticleRenderer(renderer)
function ParticleShader (line 12997) | function ParticleShader(shaderManager)
function SystemRenderer (line 13092) | function SystemRenderer(system, width, height, options)
function CanvasRenderer (line 13353) | function CanvasRenderer(width, height, options)
function CanvasBuffer (line 13604) | function CanvasBuffer(width, height)
function CanvasMaskManager (line 14058) | function CanvasMaskManager()
function WebGLRenderer (line 14400) | function WebGLRenderer(width, height, options)
function AbstractFilter (line 14966) | function AbstractFilter(vertexSrc, fragmentSrc, uniforms)
function FXAAFilter (line 15085) | function FXAAFilter()
function SpriteMaskFilter (line 15135) | function SpriteMaskFilter(sprite)
function BlendModeManager (line 15226) | function BlendModeManager(renderer)
function FilterManager (line 15274) | function FilterManager(renderer)
function MaskManager (line 15722) | function MaskManager(renderer)
function ShaderManager (line 15841) | function ShaderManager(renderer)
function WebGLMaskManager (line 16006) | function WebGLMaskManager(renderer)
function WebGLManager (line 16349) | function WebGLManager(renderer)
function ComplexPrimitiveShader (line 16395) | function ComplexPrimitiveShader(shaderManager)
function PrimitiveShader (line 16457) | function PrimitiveShader(shaderManager)
function Shader (line 16524) | function Shader(shaderManager, vertexSrc, fragmentSrc, uniforms, attribu...
function TextureShader (line 17086) | function TextureShader(shaderManager, vertexSrc, fragmentSrc, customUnif...
function ObjectRenderer (line 17195) | function ObjectRenderer(renderer)
function Quad (line 17250) | function Quad(gl)
function StencilMaskStack (line 17725) | function StencilMaskStack()
function Sprite (line 17777) | function Sprite(texture)
function SpriteRenderer (line 18345) | function SpriteRenderer(renderer)
function Text (line 18838) | function Text(text, style, resolution)
function BaseTexture (line 19504) | function BaseTexture(source, scaleMode, resolution)
function RenderTexture (line 19978) | function RenderTexture(renderer, width, height, scaleMode, resolution)
function Texture (line 20433) | function Texture(baseTexture, frame, crop, trim, rotate)
function TextureUvs (line 20866) | function TextureUvs()
function VideoBaseTexture (line 20968) | function VideoBaseTexture(source, scaleMode)
function createSource (line 21158) | function createSource(path, type)
function Ticker (line 21189) | function Ticker()
function pluginTarget (line 21873) | function pluginTarget(obj)
function BitmapText (line 22313) | function BitmapText(text, style)
function MovieClip (line 22696) | function MovieClip(textures)
function TilingSprite (line 23006) | function TilingSprite(texture, width, height)
function AsciiFilter (line 23814) | function AsciiFilter()
function BloomFilter (line 23865) | function BloomFilter()
function BlurDirFilter (line 23966) | function BlurDirFilter(dirX, dirY)
function BlurFilter (line 24108) | function BlurFilter()
function BlurXFilter (line 24217) | function BlurXFilter()
function BlurYFilter (line 24310) | function BlurYFilter()
function SmartBlurFilter (line 24396) | function SmartBlurFilter()
function ColorMatrixFilter (line 24434) | function ColorMatrixFilter()
function ColorStepFilter (line 24962) | function ColorStepFilter()
function ConvolutionFilter (line 25018) | function ConvolutionFilter(matrix, width, height)
function CrossHatchFilter (line 25102) | function CrossHatchFilter()
function DisplacementFilter (line 25131) | function DisplacementFilter(sprite, scale)
function DotScreenFilter (line 25218) | function DotScreenFilter()
function BlurYTintFilter (line 25285) | function BlurYTintFilter()
function DropShadowFilter (line 25376) | function DropShadowFilter()
function GrayFilter (line 25568) | function GrayFilter()
function InvertFilter (line 25656) | function InvertFilter()
function NoiseFilter (line 25711) | function NoiseFilter()
function PixelateFilter (line 25761) | function PixelateFilter()
function RGBSplitFilter (line 25812) | function RGBSplitFilter()
function SepiaFilter (line 25898) | function SepiaFilter()
function ShockwaveFilter (line 25950) | function ShockwaveFilter()
function TiltShiftAxisFilter (line 26041) | function TiltShiftAxisFilter()
function TiltShiftFilter (line 26166) | function TiltShiftFilter()
function TiltShiftXFilter (line 26274) | function TiltShiftXFilter()
function TiltShiftYFilter (line 26312) | function TiltShiftYFilter()
function TwistFilter (line 26347) | function TwistFilter()
function InteractionData (line 26461) | function InteractionData()
function InteractionManager (line 26523) | function InteractionManager(renderer, options)
function parse (line 27480) | function parse(resource, texture) {
function Loader (line 27646) | function Loader(baseUrl, concurrency)
function processFrames (line 27718) | function processFrames(initialFrameIndex, maxFrames)
function shouldProcessNextBatch (line 27774) | function shouldProcessNextBatch()
function processNextBatch (line 27779) | function processNextBatch(done)
function Mesh (line 27837) | function Mesh(texture, vertices, uvs, indices, drawMode)
function Plane (line 28320) | function Plane(texture, segmentsX, segmentsY)
function Rope (line 28446) | function Rope(texture, points)
function MeshRenderer (line 28680) | function MeshRenderer(renderer)
function MeshShader (line 28895) | function MeshShader(shaderManager)
function s (line 29059) | function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&re...
function lib$es6$promise$utils$$objectOrFunction (line 29071) | function lib$es6$promise$utils$$objectOrFunction(x) {
function lib$es6$promise$utils$$isFunction (line 29075) | function lib$es6$promise$utils$$isFunction(x) {
function lib$es6$promise$utils$$isMaybeThenable (line 29079) | function lib$es6$promise$utils$$isMaybeThenable(x) {
function lib$es6$promise$asap$$setScheduler (line 29114) | function lib$es6$promise$asap$$setScheduler(scheduleFn) {
function lib$es6$promise$asap$$setAsap (line 29118) | function lib$es6$promise$asap$$setAsap(asapFn) {
function lib$es6$promise$asap$$useNextTick (line 29133) | function lib$es6$promise$asap$$useNextTick() {
function lib$es6$promise$asap$$useVertxTimer (line 29147) | function lib$es6$promise$asap$$useVertxTimer() {
function lib$es6$promise$asap$$useMutationObserver (line 29153) | function lib$es6$promise$asap$$useMutationObserver() {
function lib$es6$promise$asap$$useMessageChannel (line 29165) | function lib$es6$promise$asap$$useMessageChannel() {
function lib$es6$promise$asap$$useSetTimeout (line 29173) | function lib$es6$promise$asap$$useSetTimeout() {
function lib$es6$promise$asap$$flush (line 29180) | function lib$es6$promise$asap$$flush() {
function lib$es6$promise$asap$$attemptVertex (line 29194) | function lib$es6$promise$asap$$attemptVertex() {
function lib$es6$promise$$internal$$noop (line 29219) | function lib$es6$promise$$internal$$noop() {}
function lib$es6$promise$$internal$$selfFullfillment (line 29227) | function lib$es6$promise$$internal$$selfFullfillment() {
function lib$es6$promise$$internal$$cannotReturnOwn (line 29231) | function lib$es6$promise$$internal$$cannotReturnOwn() {
function lib$es6$promise$$internal$$getThen (line 29235) | function lib$es6$promise$$internal$$getThen(promise) {
function lib$es6$promise$$internal$$tryThen (line 29244) | function lib$es6$promise$$internal$$tryThen(then, value, fulfillmentHand...
function lib$es6$promise$$internal$$handleForeignThenable (line 29252) | function lib$es6$promise$$internal$$handleForeignThenable(promise, thena...
function lib$es6$promise$$internal$$handleOwnThenable (line 29277) | function lib$es6$promise$$internal$$handleOwnThenable(promise, thenable) {
function lib$es6$promise$$internal$$handleMaybeThenable (line 29291) | function lib$es6$promise$$internal$$handleMaybeThenable(promise, maybeTh...
function lib$es6$promise$$internal$$resolve (line 29309) | function lib$es6$promise$$internal$$resolve(promise, value) {
function lib$es6$promise$$internal$$publishRejection (line 29319) | function lib$es6$promise$$internal$$publishRejection(promise) {
function lib$es6$promise$$internal$$fulfill (line 29327) | function lib$es6$promise$$internal$$fulfill(promise, value) {
function lib$es6$promise$$internal$$reject (line 29338) | function lib$es6$promise$$internal$$reject(promise, reason) {
function lib$es6$promise$$internal$$subscribe (line 29346) | function lib$es6$promise$$internal$$subscribe(parent, child, onFulfillme...
function lib$es6$promise$$internal$$publish (line 29361) | function lib$es6$promise$$internal$$publish(promise) {
function lib$es6$promise$$internal$$ErrorObject (line 29383) | function lib$es6$promise$$internal$$ErrorObject() {
function lib$es6$promise$$internal$$tryCatch (line 29389) | function lib$es6$promise$$internal$$tryCatch(callback, detail) {
function lib$es6$promise$$internal$$invokeCallback (line 29398) | function lib$es6$promise$$internal$$invokeCallback(settled, promise, cal...
function lib$es6$promise$$internal$$initializePromise (line 29436) | function lib$es6$promise$$internal$$initializePromise(promise, resolver) {
function lib$es6$promise$enumerator$$Enumerator (line 29448) | function lib$es6$promise$enumerator$$Enumerator(Constructor, input) {
function lib$es6$promise$promise$all$$all (line 29546) | function lib$es6$promise$promise$all$$all(entries) {
function lib$es6$promise$promise$race$$race (line 29550) | function lib$es6$promise$promise$race$$race(entries) {
function lib$es6$promise$promise$resolve$$resolve (line 29578) | function lib$es6$promise$promise$resolve$$resolve(object) {
function lib$es6$promise$promise$reject$$reject (line 29591) | function lib$es6$promise$promise$reject$$reject(reason) {
function lib$es6$promise$promise$$needsResolver (line 29602) | function lib$es6$promise$promise$$needsResolver() {
function lib$es6$promise$promise$$needsNew (line 29606) | function lib$es6$promise$promise$$needsNew() {
function lib$es6$promise$promise$$Promise (line 29714) | function lib$es6$promise$promise$$Promise(resolver) {
function lib$es6$promise$polyfill$$polyfill (line 29991) | function lib$es6$promise$polyfill$$polyfill() {
function cleanUpNextTick (line 30044) | function cleanUpNextTick() {
function drainQueue (line 30056) | function drainQueue() {
function Item (line 30092) | function Item(fun, array) {
function noop (line 30106) | function noop() {}
function error (line 30194) | function error(type) {
function map (line 30206) | function map(array, fn) {
function mapDomain (line 30225) | function mapDomain(string, fn) {
function ucs2decode (line 30254) | function ucs2decode(string) {
function ucs2encode (line 30288) | function ucs2encode(array) {
function basicToDigit (line 30310) | function basicToDigit(codePoint) {
function digitToBasic (line 30334) | function digitToBasic(digit, flag) {
function adapt (line 30345) | function adapt(delta, numPoints, firstTime) {
function decode (line 30362) | function decode(input) {
function encode (line 30463) | function encode(input) {
function toUnicode (line 30581) | function toUnicode(input) {
function toASCII (line 30600) | function toASCII(input) {
function restoreOwnerScroll (line 30665) | function restoreOwnerScroll(ownerDocument, x, y) {
function cloneCanvasContents (line 30671) | function cloneCanvasContents(canvas, clonedCanvas) {
function cloneNode (line 30683) | function cloneNode(node, javascriptEnabled) {
function initNode (line 30707) | function initNode(node) {
function Color (line 30772) | function Color(value) {
function html2canvas (line 31058) | function html2canvas(nodeList, options) {
function renderDocument (line 31106) | function renderDocument(document, options, windowWidth, windowHeight, ht...
function renderWindow (line 31123) | function renderWindow(node, container, options, windowWidth, windowHeigh...
function cleanupContainer (line 31157) | function cleanupContainer(container, options) {
function crop (line 31164) | function crop(canvas, bounds) {
function documentWidth (line 31178) | function documentWidth (doc) {
function documentHeight (line 31186) | function documentHeight (doc) {
function absoluteUrl (line 31194) | function absoluteUrl(url) {
function DummyImageContainer (line 31206) | function DummyImageContainer(src) {
function Font (line 31229) | function Font(family, size) {
function FontMetrics (line 31283) | function FontMetrics() {
function FrameContainer (line 31302) | function FrameContainer(container, sameOrigin, options) {
function GradientContainer (line 31333) | function GradientContainer(imageData) {
function ImageContainer (line 31354) | function ImageContainer(src, cors) {
function ImageLoader (line 31387) | function ImageLoader(options, support) {
function LinearGradientContainer (line 31538) | function LinearGradientContainer(imageData) {
function NodeContainer (line 31628) | function NodeContainer(node, parent) {
function selectionValue (line 31887) | function selectionValue(node) {
function parseMatrix (line 31892) | function parseMatrix(match) {
function isPercentage (line 31905) | function isPercentage(value) {
function removePx (line 31909) | function removePx(str) {
function asFloat (line 31913) | function asFloat(str) {
function NodeParser (line 31935) | function NodeParser(element, renderer, support, imageLoader, options) {
function hasParentClip (line 32019) | function hasParentClip(container) {
function toCamelCase (line 32070) | function toCamelCase(str) {
function ClearTransform (line 32183) | function ClearTransform() {}
function calculateBorders (line 32433) | function calculateBorders(borders, nodeBounds, borderPoints, radius) {
function getCurvePoints (line 32519) | function getCurvePoints(x, y, r1, r2) {
function calculateCurvePoints (line 32533) | function calculateCurvePoints(bounds, borderRadius, borders) {
function bezierCurve (line 32575) | function bezierCurve(start, startControl, endControl, end) {
function drawSide (line 32606) | function drawSide(borderData, radius1, radius2, outer1, inner1, outer2, ...
function parseCorner (line 32636) | function parseCorner(borderArgs, radius1, radius2, corner1, corner2, x, ...
function negativeZIndex (line 32650) | function negativeZIndex(container) {
function positiveZIndex (line 32654) | function positiveZIndex(container) {
function zIndex0 (line 32658) | function zIndex0(container) {
function inlineLevel (line 32662) | function inlineLevel(container) {
function isStackingContext (line 32666) | function isStackingContext(container) {
function hasText (line 32670) | function hasText(container) {
function noLetterSpacing (line 32674) | function noLetterSpacing(container) {
function getBorderRadiusData (line 32678) | function getBorderRadiusData(container) {
function renderableNode (line 32689) | function renderableNode(node) {
function isPositionedForStacking (line 32693) | function isPositionedForStacking(container) {
function isPositioned (line 32699) | function isPositioned(container) {
function isFloating (line 32703) | function isFloating(container) {
function isInlineBlock (line 32707) | function isInlineBlock(container) {
function not (line 32711) | function not(callback) {
function isElement (line 32718) | function isElement(container) {
function isPseudoElement (line 32722) | function isPseudoElement(container) {
function isTextNode (line 32726) | function isTextNode(container) {
function zIndexSort (line 32730) | function zIndexSort(contexts) {
function hasOpacity (line 32736) | function hasOpacity(container) {
function asInt (line 32740) | function asInt(value) {
function getWidth (line 32744) | function getWidth(border) {
function nonIgnoredElement (line 32748) | function nonIgnoredElement(nodeContainer) {
function flatten (line 32752) | function flatten(arrays) {
function stripQuotes (line 32756) | function stripQuotes(content) {
function getWords (line 32761) | function getWords(characters) {
function isWordBoundary (line 32785) | function isWordBoundary(characterCode) {
function hasUnicode (line 32795) | function hasUnicode(string) {
function Proxy (line 32812) | function Proxy(src, proxyUrl, document) {
function ProxyURL (line 32826) | function ProxyURL(src, proxyUrl, document) {
function jsonp (line 32835) | function jsonp(document, url, callback) {
function createCallback (line 32855) | function createCallback(useCORS) {
function createProxyUrl (line 32859) | function createProxyUrl(proxyUrl, src, callback) {
function documentFromHTML (line 32863) | function documentFromHTML(src) {
function loadUrlDocument (line 32892) | function loadUrlDocument(src, proxy, document, width, height, options) {
function ProxyImageContainer (line 32906) | function ProxyImageContainer(src, proxy) {
function PseudoElementContainer (line 32929) | function PseudoElementContainer(node, parent, type) {
function Renderer (line 32969) | function Renderer(width, height, images, options, document) {
function CanvasRenderer (line 33082) | function CanvasRenderer(width, height) {
function hasEntries (line 33317) | function hasEntries(array) {
function StackingContext (line 33326) | function StackingContext(hasOwnStacking, opacity, element, parent) {
function Support (line 33344) | function Support(document) {
function SVGContainer (line 33401) | function SVGContainer(src) {
function SVGNodeContainer (line 33455) | function SVGNodeContainer(node, _native) {
function TextContainer (line 33482) | function TextContainer(node, parent) {
function capitalize (line 33506) | function capitalize(m, p1, p2) {
function WebkitGradientContainer (line 33740) | function WebkitGradientContainer(imageData) {
function XHR (line 33752) | function XHR(url) {
function isArraylike (line 33831) | function isArraylike (obj) {
function $makeArray (line 34016) | function $makeArray (arr, results) {
function offsetParent (line 34124) | function offsetParent() {
function compactSparseArray (line 34257) | function compactSparseArray (array) {
function sanitizeElements (line 34273) | function sanitizeElements (elements) {
function Data (line 34447) | function Data (element) {
function generateStep (line 34460) | function generateStep (steps) {
function generateBezier (line 34467) | function generateBezier (mX1, mY1, mX2, mY2) {
function springAccelerationForState (line 34595) | function springAccelerationForState (state) {
function springEvaluateStateWithDerivative (line 34599) | function springEvaluateStateWithDerivative (initialState, dt, derivative) {
function springIntegrateState (line 34610) | function springIntegrateState (state, dt) {
function getEasing (line 34719) | function getEasing(value, duration) {
function computePropertyValue (line 35390) | function computePropertyValue (element, property) {
function getTransformFloat (line 35662) | function getTransformFloat (transformProperty) {
function getChain (line 35783) | function getChain () {
function processElement (line 36125) | function processElement () {
function tick (line 37117) | function tick (timestamp) {
function completeCall (line 37372) | function completeCall (callIndex, isStopped) {
FILE: page/js/dat.gui.js
function cssValueToPixels (line 331) | function cssValueToPixels(val) {
function numDecimals (line 794) | function numDecimals(x) {
function onChange (line 860) | function onChange() {
function onBlur (line 865) | function onBlur() {
function onMouseDown (line 872) | function onMouseDown(e) {
function onMouseDrag (line 878) | function onMouseDrag(e) {
function onMouseUp (line 887) | function onMouseUp() {
function roundToDecimal (line 917) | function roundToDecimal(value, decimals) {
function onMouseDown (line 965) | function onMouseDown(e) {
function onMouseDrag (line 973) | function onMouseDrag(e) {
function onMouseUp (line 988) | function onMouseUp() {
function map (line 1031) | function map(v, i1, i2, o1, o2) {
function onChange (line 1134) | function onChange() {
function resetWidth (line 1946) | function resetWidth() {
function add (line 2296) | function add(gui, object, property, params) {
function addRow (line 2351) | function addRow(gui, dom, liBefore) {
function augmentController (line 2363) | function augmentController(gui, li, controller) {
function recallSavedValue (line 2516) | function recallSavedValue(gui, controller) {
function getLocalStorageHash (line 2590) | function getLocalStorageHash(gui, key) {
function addSaveMenu (line 2596) | function addSaveMenu(gui) {
function addResizeHandle (line 2714) | function addResizeHandle(gui) {
function setWidth (line 2772) | function setWidth(gui, w) {
function getCurrentPreset (line 2783) | function getCurrentPreset(gui, useInitialValues) {
function addPresetOption (line 2810) | function addPresetOption(gui, name, setSelected) {
function setPresetSelectIndex (line 2820) | function setPresetSelectIndex(gui) {
function markPresetModified (line 2828) | function markPresetModified(gui, modified) {
function updateDisplays (line 2838) | function updateDisplays(controllerArray) {
function onChange (line 2936) | function onChange() {
function onBlur (line 2940) | function onBlur() {
function fieldDown (line 3117) | function fieldDown(e) {
function unbindSV (line 3124) | function unbindSV() {
function onBlur (line 3130) | function onBlur() {
function unbindH (line 3140) | function unbindH() {
function setSV (line 3156) | function setSV(e) {
function setH (line 3181) | function setH(e) {
function linearGradient (line 3273) | function linearGradient(elem, x, a, b) {
function hueGradient (line 3280) | function hueGradient(elem) {
function defineRGBComponent (line 3364) | function defineRGBComponent(target, component, componentHexIndex) {
function defineHSVComponent (line 3395) | function defineHSVComponent(target, component) {
function recalculateRGB (line 3425) | function recalculateRGB(color, component, componentHexIndex) {
function recalculateHSV (line 3443) | function recalculateHSV(color) {
function lockScroll (line 3665) | function lockScroll(e) {
FILE: page/js/effects.js
function animate (line 131) | function animate() {
FILE: page/js/slider.js
function setSliderX (line 17) | function setSliderX(x) {
function getSliderX (line 21) | function getSliderX() {
function onDragStart (line 25) | function onDragStart(event) {
function onDragEnd (line 31) | function onDragEnd() {
function onMove (line 35) | function onMove(event) {
FILE: src/effects/ripples.js
function redraw (line 24) | function redraw() {
Condensed preview — 45 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (2,503K chars).
[
{
"path": ".gitignore",
"chars": 22,
"preview": "bower_components\n.idea"
},
{
"path": "README.md",
"chars": 4909,
"preview": "<img alt=\"HTML GL\" src=\"http://pixelscommander.com/polygon/htmlgl/figures/logo-blue.png\"/>\n\n60 FPS and amazing effects b"
},
{
"path": "bower.json",
"chars": 440,
"preview": "{\n \"name\": \"htmlgl\",\n \"authors\": [\n \"PixelsCommander <denis.radin@gmail.com>\"\n ],\n \"license\": \"MIT\",\n \"ignore\": "
},
{
"path": "demo/advanced-content-dom.html",
"chars": 7313,
"preview": "<!DOCTYPE html>\n<html>\n<head>\n <link rel=\"stylesheet\" href=\"./assets/css/style.css\">\n <title>DOM content</title>\n "
},
{
"path": "demo/advanced-content-webgl.html",
"chars": 7916,
"preview": "<!DOCTYPE html>\n<html>\n<head>\n <link rel=\"stylesheet\" href=\"./assets/css/style.css\">\n <title>HTML GL nested conten"
},
{
"path": "demo/assets/css/appstyle.css",
"chars": 2242,
"preview": "/** Generated by FG **/\n@font-face {\n font-family: 'Conv_InterstatePro-Bold';\n src: url('../fonts/InterstatePro-Bo"
},
{
"path": "demo/assets/css/style.css",
"chars": 4233,
"preview": "/** Generated by FG **/\n@font-face {\n font-family: 'Conv_InterstatePro-Bold';\n src: url('../fonts/InterstatePro-Bold.e"
},
{
"path": "demo/assets/fonts/README-FONTS.txt",
"chars": 392,
"preview": "we experienced that web apps could reference their own versions of fonts our app uses\n\nin some cases this broke DAWN for"
},
{
"path": "demo/basic-dom.html",
"chars": 1859,
"preview": "<!DOCTYPE html>\n<html>\n<head lang=\"en\">\n <meta charset=\"UTF-8\">\n <title>HTML GL demo</title>\n <style>\n h"
},
{
"path": "demo/basic-webgl-jquery.html",
"chars": 2470,
"preview": "<!DOCTYPE html>\n<html>\n<head lang=\"en\">\n <meta charset=\"UTF-8\">\n <title>HTML GL demo</title>\n <script src=\"../b"
},
{
"path": "demo/basic-webgl.html",
"chars": 1933,
"preview": "<!DOCTYPE html>\n<html>\n<head lang=\"en\">\n <meta charset=\"UTF-8\">\n <title>HTML GL demo</title>\n</head>\n<body style=\""
},
{
"path": "demo/filters.html",
"chars": 13502,
"preview": "<!DOCTYPE html>\n<html>\n<head>\n <link rel=\"stylesheet\" href=\"./assets/css/style.css\">\n <title>HTML GL filters demo<"
},
{
"path": "demo/js/slider.js",
"chars": 1928,
"preview": "//Slider logic, written in HTML / JS.\n//The only difference between HTML GL and basic HTML is that you should use elemen"
},
{
"path": "demo/js/vendor/html2canvas.js",
"chars": 164494,
"preview": "/*\n html2canvas 0.5.0-alpha2 <http://html2canvas.hertzen.com>\n Copyright (c) 2015 Niklas von Hertzen\n\n Released under"
},
{
"path": "demo/js/vendor/velocity.js",
"chars": 213909,
"preview": "/*! VelocityJS.org (1.2.2). (C) 2014 Julian Shapiro. MIT @license: en.wikipedia.org/wiki/MIT_License */\n\n/**************"
},
{
"path": "demo/nested-content-webgl.html",
"chars": 8053,
"preview": "<!DOCTYPE html>\n<html>\n<head>\n <link rel=\"stylesheet\" href=\"./assets/css/style.css\">\n <title>HTML GL nested conten"
},
{
"path": "demo/ripples.html",
"chars": 2991,
"preview": "<!DOCTYPE html>\n<html>\n<head>\n <link rel=\"stylesheet\" href=\"./assets/css/appstyle.css\">\n <title>HTML GL filters de"
},
{
"path": "dist/htmlgl-effects.js",
"chars": 285747,
"preview": "(function (w) {\n\n var Ascii = function (element) {\n this.element = element;\n this.filter = new PIXI.fil"
},
{
"path": "dist/htmlgl.js",
"chars": 1244259,
"preview": "/*! promise-polyfill 2.0.1 */\n!function(a){function b(a,b){return function(){a.apply(b,arguments)}}function c(a){if(\"obj"
},
{
"path": "figures/htmlgl-flow-diagram.ep",
"chars": 31465,
"preview": "<?xml version=\"1.0\"?>\n<Document xmlns=\"http://www.evolus.vn/Namespace/Pencil\"><Properties/><Pages><Page><Properties><Pro"
},
{
"path": "gulpfile.js",
"chars": 1275,
"preview": "var BUNDLE_NAME = 'htmlgl',\n gulp = require('gulp'),\n concat = require('gulp-concat'),\n uglify = require('gulp-"
},
{
"path": "package.json",
"chars": 808,
"preview": "{\n \"name\": \"html-gl\",\n \"version\": \"0.3.2\",\n \"description\": \"Get as many FPS as you need by rendering HTML/CSS in WebG"
},
{
"path": "page/css/style.css",
"chars": 6352,
"preview": "/* ======== MAIN STYLES ========== */\nhtml, body {\n height: 100%;\n width: 100%;\n margin: 0;\n padding: 0;\n "
},
{
"path": "page/index.html",
"chars": 6529,
"preview": "<!DOCTYPE html>\n<html>\n<head>\n <meta charset=\"UTF-8\"/>\n <title>HTML GL - Render HTML/CSS via WebGL for amazing eff"
},
{
"path": "page/js/basics.js",
"chars": 1031,
"preview": "window.changeNodeContent = function () {\n document.getElementsByTagName('html-gl')[0].innerHTML = '<h4>WOW!</h4> <p c"
},
{
"path": "page/js/dat.gui.js",
"chars": 100945,
"preview": "/**\n * dat-gui JavaScript Controller Library\n * http://code.google.com/p/dat-gui\n *\n * Copyright 2011 Data Arts Team, Go"
},
{
"path": "page/js/effects.js",
"chars": 5926,
"preview": "window.addEventListener('DOMContentLoaded', function(){\n\n var slider = document.getElementsByTagName('html-gl')[1];\n\n"
},
{
"path": "page/js/slider.js",
"chars": 1928,
"preview": "//Slider logic, written in HTML / JS.\n//The only difference between HTML GL and basic HTML is that you should use elemen"
},
{
"path": "src/effects/ascii.js",
"chars": 569,
"preview": "(function (w) {\n\n var Ascii = function (element) {\n this.element = element;\n this.filter = new PIXI.fil"
},
{
"path": "src/effects/bloom.js",
"chars": 569,
"preview": "(function (w) {\n\n var Bloom = function (element) {\n this.element = element;\n this.filter = new PIXI.fil"
},
{
"path": "src/effects/diagonal-blur.js",
"chars": 665,
"preview": "(function (w) {\n\n var DiagonalBlur = function (element) {\n this.element = element;\n this.filter = new P"
},
{
"path": "src/effects/dotscreen.js",
"chars": 765,
"preview": "(function (w) {\n\n var DotScreen = function (element) {\n this.element = element;\n this.filter = new PIXI"
},
{
"path": "src/effects/invert.js",
"chars": 574,
"preview": "(function (w) {\n\n var Invert = function (element) {\n this.element = element;\n this.filter = new PIXI.fi"
},
{
"path": "src/effects/noise.js",
"chars": 569,
"preview": "(function (w) {\n\n var Noise = function (element) {\n this.element = element;\n this.filter = new PIXI.fil"
},
{
"path": "src/effects/pixelate.js",
"chars": 754,
"preview": "(function (w) {\n\n var Pixelate = function (element) {\n this.element = element;\n this.filter = new PIXI."
},
{
"path": "src/effects/rgbsplit.js",
"chars": 584,
"preview": "(function (w) {\n\n var RGBSplit = function (element) {\n this.element = element;\n this.filter = new PIXI."
},
{
"path": "src/effects/ripples.js",
"chars": 277973,
"preview": "(function (w) {\n\n var Ripples = function (element) {\n this.element = element;\n this.ripple = this.rippl"
},
{
"path": "src/effects/twist.js",
"chars": 741,
"preview": "(function (w) {\n\n var Twist = function (element) {\n this.element = element;\n this.filter = new PIXI.fil"
},
{
"path": "src/gl-context.js",
"chars": 7485,
"preview": "/*\n * GLContext is a part of HTML GL library describing rendering context\n * Copyright (c) 2015 pixelscommander.com\n * D"
},
{
"path": "src/gl-effects-manager.js",
"chars": 1974,
"preview": "/*\n * GLEffectsManager is a part of HTML GL library for applying effects based on tag attributes\n * Copyright (c) 2015 p"
},
{
"path": "src/gl-element-resolver.js",
"chars": 1088,
"preview": "/*\n * GLElementResolver is a part of HTML GL library for resolving elements by coordinates given\n * Copyright (c) 2015 p"
},
{
"path": "src/gl-element.js",
"chars": 10309,
"preview": "/*\n * GLElement is a part of HTML GL library describing single HTML-GL element\n * Copyright (c) 2015 pixelscommander.com"
},
{
"path": "src/images-loaded.js",
"chars": 1547,
"preview": "/*\n * ImagesLoaded is a part of HTML GL library which is a robust solution for determining \"are images loaded or not?\"\n "
},
{
"path": "src/util.js",
"chars": 1711,
"preview": "/*\n * Util is a part of HTML GL library\n * Copyright (c) 2015 pixelscommander.com\n * Distributed under MIT license\n * ht"
}
]
// ... and 1 more files (download for full content)
About this extraction
This page contains the full source code of the marciolopesjr/HTML-GL GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 45 files (2.3 MB), approximately 610.1k tokens, and a symbol index with 639 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.