[ { "path": "examples.html", "content": "\n\n \n \n \n\n \n \n \n\n Glitch.js by sjhewitt\n\n \n \n \n \n\n \n\n
\n
\n
\n

Glitch.js

\n

Glitched DOM elements

\n
\n
\n\n\t
\n\t
\n\t\t

Glitch an image

\n\t\t\n\t\t
\n\t\t
\n\t
\n\n\t\n\n\t
\n\t\t

Glitch some HTML elements

\n\t\t
\n\t\t\t

Header Element

\n\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t\t
    \n\t\t\t\t
  • List Element 1
    • \n\t\t\t\t
  • List Element 2
    • \n\t\t\t\t
  • List Element 3
    • \n\t\t\t\t
  • List Element 4
    • \n\t\t\t
\n\t\t\t\n\t\t
\n\t\t
\n\t\t
\n\t
\n\t\n\n\n\t
\n\t\t

HTML and cross-domain images

\n\t\t
\n\t\t\t

Header Element

\n\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t\t
\n\t\t\t\t

And some text on top of it

\n\t\t\t
\n\t\t
\n\t\t
\n\t\t
\n\t
\n\t\n\n\t\n\n\t
\n\t\t

Glitch Transition

\n\t\t
\n\t\t\t

Page 1

\n\t\t\t

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\n\t\t\ttempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,\n\t\t\tquis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n\t\t\tconsequat. Duis aute irure dolor in reprehenderit in voluptate velit esse\n\t\t\tcillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non\n\t\t\tproident, sunt in culpa qui officia deserunt mollit anim id est laborum.

\n\t\t
\n\t\t
\n\t\t
\n\t
\n\t\n\n\t\n\n\t
\n\t\t

Glitch Transition (different size elements)

\n\t\t
\n\t\t\t

Page 1

\n\t\t\t

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\n\t\t\ttempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,\n\t\t\tquis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n\t\t\tconsequat. Duis aute irure dolor in reprehenderit in voluptate velit esse\n\t\t\tcillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non\n\t\t\tproident, sunt in culpa qui officia deserunt mollit anim id est laborum.

\n\t\t
\n\t\t
\n\t\t
\n\t
\n\t\n\n\t
\n\t\t

Now glitch the whole page

\n\t\t
\n\t\t\t\n\t\t
\n\t
\n\t\n\n
\n
\n\n\n\n" }, { "path": "index.html", "content": "\n\n \n \n \n\n \n \n \n\n Glitch.js by sjhewitt\n \n\n \n\n
\n\n
\n
\n
\n

Glitch.js

\n

Glitched DOM elements

\n
\n\n
\n Download as .zip\n Download as .tar.gz\n View on GitHub\n
\n
\n
\n\n
\n
\n

Welcome to Glitch.js

\n\n

More info coming soon

\n

Until then, check out the blog post and examples

\n\n \n
\n
\n\n
\n\n \n \n \n \n \n" }, { "path": "javascripts/html2canvas.js", "content": "/**\r\n @license html2canvas v0.34 \r\n Copyright (c) 2011 Niklas von Hertzen. All rights reserved.\r\n http://www.twitter.com/niklasvh\r\n\r\n Released under MIT License\r\n */\r\n(function(window, document, undefined){\r\n\r\n/*\r\n html2canvas v0.34 \r\n Copyright (c) 2011 Niklas von Hertzen. All rights reserved.\r\n http://www.twitter.com/niklasvh\r\n\r\n Released under MIT License\r\n */\r\n\"use strict\";\r\n\r\nvar _html2canvas = {},\r\npreviousElement,\r\ncomputedCSS,\r\nhtml2canvas;\r\n\r\n\r\nfunction h2clog(a) {\r\n if (_html2canvas.logging && window.console && window.console.log) {\r\n window.console.log(a);\r\n }\r\n}\r\n\r\n_html2canvas.Util = {};\r\n\r\n_html2canvas.Util.backgroundImage = function (src) {\r\n\r\n if (/data:image\\/.*;base64,/i.test( src ) || /^(-webkit|-moz|linear-gradient|-o-)/.test( src )) {\r\n return src;\r\n }\r\n\r\n if (src.toLowerCase().substr( 0, 5 ) === 'url(\"') {\r\n src = src.substr( 5 );\r\n src = src.substr( 0, src.length - 2 );\r\n } else {\r\n src = src.substr( 4 );\r\n src = src.substr( 0, src.length - 1 );\r\n }\r\n\r\n return src;\r\n};\r\n\r\nfunction adjustBounds(el, box) {\r\n var win = document.defaultView;\r\n var doc = el.ownerDocument;\r\n var body = doc.body;\r\n var docElem = doc.documentElement;\r\n var clientTop = docElem.clientTop || body.clientTop || 0;\r\n var clientLeft = docElem.clientLeft || body.clientLeft || 0;\r\n var scrollTop = win.pageYOffset || docElem.scrollTop;\r\n var scrollLeft = win.pageXOffset || docElem.scrollLeft;\r\n var top = box.top + scrollTop - clientTop;\r\n var left = box.left + scrollLeft - clientLeft;\r\n\r\n return {\r\n top: top,\r\n left: left,\r\n bottom: top + box.height,\r\n height: box.height,\r\n width: box.width\r\n };\r\n}\r\n\r\n_html2canvas.Util.Bounds = function getBounds (el) {\r\n var clientRect,\r\n bounds = {};\r\n\r\n if (el.getBoundingClientRect){\r\n return adjustBounds(el, el.getBoundingClientRect());\r\n }\r\n};\r\n\r\n_html2canvas.Util.getCSS = function (el, attribute) {\r\n // return $(el).css(attribute);\r\n\r\n var val;\r\n\r\n function toPX( attribute, val ) {\r\n var rsLeft = el.runtimeStyle && el.runtimeStyle[ attribute ],\r\n left,\r\n style = el.style;\r\n\r\n // Check if we are not dealing with pixels, (Opera has issues with this)\r\n // Ported from jQuery css.js\r\n // From the awesome hack by Dean Edwards\r\n // http://erik.eae.net/archives/2007/07/27/18.54.15/#comment-102291\r\n\r\n // If we're not dealing with a regular pixel number\r\n // but a number that has a weird ending, we need to convert it to pixels\r\n\r\n if ( !/^-?[0-9]+\\.?[0-9]*(?:px)?$/i.test( val ) && /^-?\\d/.test( val ) ) {\r\n\r\n // Remember the original values\r\n left = style.left;\r\n\r\n // Put in the new values to get a computed value out\r\n if ( rsLeft ) {\r\n el.runtimeStyle.left = el.currentStyle.left;\r\n }\r\n style.left = attribute === \"fontSize\" ? \"1em\" : (val || 0);\r\n val = style.pixelLeft + \"px\";\r\n\r\n // Revert the changed values\r\n style.left = left;\r\n if ( rsLeft ) {\r\n el.runtimeStyle.left = rsLeft;\r\n }\r\n\r\n }\r\n\r\n if (!/^(thin|medium|thick)$/i.test( val )) {\r\n return Math.round(parseFloat( val )) + \"px\";\r\n }\r\n\r\n return val;\r\n\r\n }\r\n\r\n\r\n if ( window.getComputedStyle ) {\r\n if ( previousElement !== el ) {\r\n computedCSS = document.defaultView.getComputedStyle(el, null);\r\n }\r\n val = computedCSS[ attribute ];\r\n\r\n if ( attribute === \"backgroundPosition\" ) {\r\n\r\n val = (val.split(\",\")[0] || \"0 0\").split(\" \");\r\n\r\n val[ 0 ] = ( val[0].indexOf( \"%\" ) === -1 ) ? toPX( attribute + \"X\", val[ 0 ] ) : val[ 0 ];\r\n val[ 1 ] = ( val[1] === undefined ) ? val[0] : val[1]; // IE 9 doesn't return double digit always\r\n val[ 1 ] = ( val[1].indexOf( \"%\" ) === -1 ) ? toPX( attribute + \"Y\", val[ 1 ] ) : val[ 1 ];\r\n }\r\n\r\n } else if ( el.currentStyle ) {\r\n // IE 9>\r\n if (attribute === \"backgroundPosition\") {\r\n // Older IE uses -x and -y\r\n val = [ toPX( attribute + \"X\", el.currentStyle[ attribute + \"X\" ] ), toPX( attribute + \"Y\", el.currentStyle[ attribute + \"Y\" ] ) ];\r\n } else {\r\n\r\n val = toPX( attribute, el.currentStyle[ attribute ] );\r\n\r\n if (/^(border)/i.test( attribute ) && /^(medium|thin|thick)$/i.test( val )) {\r\n switch (val) {\r\n case \"thin\":\r\n val = \"1px\";\r\n break;\r\n case \"medium\":\r\n val = \"0px\"; // this is wrong, it should be 3px but IE uses medium for no border as well.. TODO find a work around\r\n break;\r\n case \"thick\":\r\n val = \"5px\";\r\n break;\r\n }\r\n }\r\n }\r\n\r\n\r\n\r\n }\r\n\r\n\r\n\r\n\r\n return val;\r\n\r\n\r\n\r\n//return $(el).css(attribute);\r\n\r\n\r\n};\r\n\r\n\r\n_html2canvas.Util.BackgroundPosition = function ( el, bounds, image ) {\r\n // TODO add support for multi image backgrounds\r\n\r\n var bgposition = _html2canvas.Util.getCSS( el, \"backgroundPosition\" ) ,\r\n topPos,\r\n left,\r\n percentage,\r\n val;\r\n\r\n if (bgposition.length === 1){\r\n val = bgposition;\r\n\r\n bgposition = [];\r\n\r\n bgposition[0] = val;\r\n bgposition[1] = val;\r\n }\r\n\r\n\r\n\r\n if (bgposition[0].toString().indexOf(\"%\") !== -1){\r\n percentage = (parseFloat(bgposition[0])/100);\r\n left = ((bounds.width * percentage)-(image.width*percentage));\r\n\r\n }else{\r\n left = parseInt(bgposition[0],10);\r\n }\r\n\r\n if (bgposition[1].toString().indexOf(\"%\") !== -1){\r\n\r\n percentage = (parseFloat(bgposition[1])/100);\r\n topPos = ((bounds.height * percentage)-(image.height*percentage));\r\n }else{\r\n topPos = parseInt(bgposition[1],10);\r\n }\r\n\r\n\r\n\r\n\r\n return {\r\n top: topPos,\r\n left: left\r\n };\r\n\r\n};\r\n\r\n_html2canvas.Util.Extend = function (options, defaults) {\r\n for (var key in options) {\r\n if (options.hasOwnProperty(key)) {\r\n defaults[key] = options[key];\r\n }\r\n }\r\n return defaults;\r\n};\r\n\r\n\r\n/*\r\n * Derived from jQuery.contents()\r\n * Copyright 2010, John Resig\r\n * Dual licensed under the MIT or GPL Version 2 licenses.\r\n * http://jquery.org/license\r\n */\r\n_html2canvas.Util.Children = function( elem ) {\r\n\r\n\r\n var children;\r\n try {\r\n\r\n children = (elem.nodeName && elem.nodeName.toUpperCase() === \"IFRAME\") ?\r\n elem.contentDocument || elem.contentWindow.document : (function( array ){\r\n var ret = [];\r\n\r\n if ( array !== null ) {\r\n\r\n (function( first, second ) {\r\n var i = first.length,\r\n j = 0;\r\n\r\n if ( typeof second.length === \"number\" ) {\r\n for ( var l = second.length; j < l; j++ ) {\r\n first[ i++ ] = second[ j ];\r\n }\r\n\r\n } else {\r\n while ( second[j] !== undefined ) {\r\n first[ i++ ] = second[ j++ ];\r\n }\r\n }\r\n\r\n first.length = i;\r\n\r\n return first;\r\n })( ret, array );\r\n\r\n }\r\n\r\n return ret;\r\n })( elem.childNodes );\r\n\r\n } catch (ex) {\r\n h2clog(\"html2canvas.Util.Children failed with exception: \" + ex.message);\r\n children = [];\r\n }\r\n return children;\r\n};\r\n\r\n/*\r\n html2canvas v0.34 \r\n Copyright (c) 2011 Niklas von Hertzen. All rights reserved.\r\n http://www.twitter.com/niklasvh\r\n\r\n Contributor(s):\r\n Niklas von Hertzen \r\n André Fiedler \r\n\r\n Released under MIT License\r\n */\r\n\r\n(function(){\r\n\r\n_html2canvas.Generate = {};\r\n\r\nvar reGradients = [\r\n /^(-webkit-linear-gradient)\\(([a-z\\s]+)([\\w\\d\\.\\s,%\\(\\)]+)\\)$/,\r\n /^(-o-linear-gradient)\\(([a-z\\s]+)([\\w\\d\\.\\s,%\\(\\)]+)\\)$/,\r\n /^(-webkit-gradient)\\((linear|radial),\\s((?:\\d{1,3}%?)\\s(?:\\d{1,3}%?),\\s(?:\\d{1,3}%?)\\s(?:\\d{1,3}%?))([\\w\\d\\.\\s,%\\(\\)-]+)\\)$/,\r\n /^(-moz-linear-gradient)\\(((?:\\d{1,3}%?)\\s(?:\\d{1,3}%?))([\\w\\d\\.\\s,%\\(\\)]+)\\)$/,\r\n /^(-webkit-radial-gradient)\\(((?:\\d{1,3}%?)\\s(?:\\d{1,3}%?)),\\s(\\w+)\\s([a-z-]+)([\\w\\d\\.\\s,%\\(\\)]+)\\)$/,\r\n /^(-moz-radial-gradient)\\(((?:\\d{1,3}%?)\\s(?:\\d{1,3}%?)),\\s(\\w+)\\s?([a-z-]*)([\\w\\d\\.\\s,%\\(\\)]+)\\)$/,\r\n /^(-o-radial-gradient)\\(((?:\\d{1,3}%?)\\s(?:\\d{1,3}%?)),\\s(\\w+)\\s([a-z-]+)([\\w\\d\\.\\s,%\\(\\)]+)\\)$/\r\n];\r\n\r\n/*\r\n * TODO: Add IE10 vendor prefix (-ms) support\r\n * TODO: Add W3C gradient (linear-gradient) support\r\n * TODO: Add old Webkit -webkit-gradient(radial, ...) support\r\n * TODO: Maybe some RegExp optimizations are possible ;o)\r\n */\r\n_html2canvas.Generate.parseGradient = function(css, bounds) {\r\n var gradient, i, len = reGradients.length, m1, stop, m2, m2Len, step, m3;\r\n\r\n for(i = 0; i < len; i+=1){\r\n m1 = css.match(reGradients[i]);\r\n if(m1) break;\r\n }\r\n\r\n if(m1) {\r\n switch(m1[1]) {\r\n case '-webkit-linear-gradient':\r\n case '-o-linear-gradient':\r\n\r\n gradient = {\r\n type: 'linear',\r\n x0: null,\r\n y0: null,\r\n x1: null,\r\n y1: null,\r\n colorStops: []\r\n };\r\n\r\n // get coordinates\r\n m2 = m1[2].match(/\\w+/g);\r\n if(m2){\r\n m2Len = m2.length;\r\n for(i = 0; i < m2Len; i+=1){\r\n switch(m2[i]) {\r\n case 'top':\r\n gradient.y0 = 0;\r\n gradient.y1 = bounds.height;\r\n break;\r\n\r\n case 'right':\r\n gradient.x0 = bounds.width;\r\n gradient.x1 = 0;\r\n break;\r\n\r\n case 'bottom':\r\n gradient.y0 = bounds.height;\r\n gradient.y1 = 0;\r\n break;\r\n\r\n case 'left':\r\n gradient.x0 = 0;\r\n gradient.x1 = bounds.width;\r\n break;\r\n }\r\n }\r\n }\r\n if(gradient.x0 === null && gradient.x1 === null){ // center\r\n gradient.x0 = gradient.x1 = bounds.width / 2;\r\n }\r\n if(gradient.y0 === null && gradient.y1 === null){ // center\r\n gradient.y0 = gradient.y1 = bounds.height / 2;\r\n }\r\n\r\n // get colors and stops\r\n m2 = m1[3].match(/((?:rgb|rgba)\\(\\d{1,3},\\s\\d{1,3},\\s\\d{1,3}(?:,\\s[0-9\\.]+)?\\)(?:\\s\\d{1,3}(?:%|px))?)+/g);\r\n if(m2){\r\n m2Len = m2.length;\r\n step = 1 / Math.max(m2Len - 1, 1);\r\n for(i = 0; i < m2Len; i+=1){\r\n m3 = m2[i].match(/((?:rgb|rgba)\\(\\d{1,3},\\s\\d{1,3},\\s\\d{1,3}(?:,\\s[0-9\\.]+)?\\))\\s*(\\d{1,3})?(%|px)?/);\r\n if(m3[2]){\r\n stop = parseFloat(m3[2]);\r\n if(m3[3] === '%'){\r\n stop /= 100;\r\n } else { // px - stupid opera\r\n stop /= bounds.width;\r\n }\r\n } else {\r\n stop = i * step;\r\n }\r\n gradient.colorStops.push({\r\n color: m3[1],\r\n stop: stop\r\n });\r\n }\r\n }\r\n break;\r\n\r\n case '-webkit-gradient':\r\n\r\n gradient = {\r\n type: m1[2] === 'radial' ? 'circle' : m1[2], // TODO: Add radial gradient support for older mozilla definitions\r\n x0: 0,\r\n y0: 0,\r\n x1: 0,\r\n y1: 0,\r\n colorStops: []\r\n };\r\n\r\n // get coordinates\r\n m2 = m1[3].match(/(\\d{1,3})%?\\s(\\d{1,3})%?,\\s(\\d{1,3})%?\\s(\\d{1,3})%?/);\r\n if(m2){\r\n gradient.x0 = (m2[1] * bounds.width) / 100;\r\n gradient.y0 = (m2[2] * bounds.height) / 100;\r\n gradient.x1 = (m2[3] * bounds.width) / 100;\r\n gradient.y1 = (m2[4] * bounds.height) / 100;\r\n }\r\n\r\n // get colors and stops\r\n m2 = m1[4].match(/((?:from|to|color-stop)\\((?:[0-9\\.]+,\\s)?(?:rgb|rgba)\\(\\d{1,3},\\s\\d{1,3},\\s\\d{1,3}(?:,\\s[0-9\\.]+)?\\)\\))+/g);\r\n if(m2){\r\n m2Len = m2.length;\r\n for(i = 0; i < m2Len; i+=1){\r\n m3 = m2[i].match(/(from|to|color-stop)\\(([0-9\\.]+)?(?:,\\s)?((?:rgb|rgba)\\(\\d{1,3},\\s\\d{1,3},\\s\\d{1,3}(?:,\\s[0-9\\.]+)?\\))\\)/);\r\n stop = parseFloat(m3[2]);\r\n if(m3[1] === 'from') stop = 0.0;\r\n if(m3[1] === 'to') stop = 1.0;\r\n gradient.colorStops.push({\r\n color: m3[3],\r\n stop: stop\r\n });\r\n }\r\n }\r\n break;\r\n\r\n case '-moz-linear-gradient':\r\n\r\n gradient = {\r\n type: 'linear',\r\n x0: 0,\r\n y0: 0,\r\n x1: 0,\r\n y1: 0,\r\n colorStops: []\r\n };\r\n\r\n // get coordinates\r\n m2 = m1[2].match(/(\\d{1,3})%?\\s(\\d{1,3})%?/);\r\n\r\n // m2[1] == 0% -> left\r\n // m2[1] == 50% -> center\r\n // m2[1] == 100% -> right\r\n\r\n // m2[2] == 0% -> top\r\n // m2[2] == 50% -> center\r\n // m2[2] == 100% -> bottom\r\n\r\n if(m2){\r\n gradient.x0 = (m2[1] * bounds.width) / 100;\r\n gradient.y0 = (m2[2] * bounds.height) / 100;\r\n gradient.x1 = bounds.width - gradient.x0;\r\n gradient.y1 = bounds.height - gradient.y0;\r\n }\r\n\r\n // get colors and stops\r\n m2 = m1[3].match(/((?:rgb|rgba)\\(\\d{1,3},\\s\\d{1,3},\\s\\d{1,3}(?:,\\s[0-9\\.]+)?\\)(?:\\s\\d{1,3}%)?)+/g);\r\n if(m2){\r\n m2Len = m2.length;\r\n step = 1 / Math.max(m2Len - 1, 1);\r\n for(i = 0; i < m2Len; i+=1){\r\n m3 = m2[i].match(/((?:rgb|rgba)\\(\\d{1,3},\\s\\d{1,3},\\s\\d{1,3}(?:,\\s[0-9\\.]+)?\\))\\s*(\\d{1,3})?(%)?/);\r\n if(m3[2]){\r\n stop = parseFloat(m3[2]);\r\n if(m3[3]){ // percentage\r\n stop /= 100;\r\n }\r\n } else {\r\n stop = i * step;\r\n }\r\n gradient.colorStops.push({\r\n color: m3[1],\r\n stop: stop\r\n });\r\n }\r\n }\r\n break;\r\n\r\n case '-webkit-radial-gradient':\r\n case '-moz-radial-gradient':\r\n case '-o-radial-gradient':\r\n\r\n gradient = {\r\n type: 'circle',\r\n x0: 0,\r\n y0: 0,\r\n x1: bounds.width,\r\n y1: bounds.height,\r\n cx: 0,\r\n cy: 0,\r\n rx: 0,\r\n ry: 0,\r\n colorStops: []\r\n };\r\n\r\n // center\r\n m2 = m1[2].match(/(\\d{1,3})%?\\s(\\d{1,3})%?/);\r\n if(m2){\r\n gradient.cx = (m2[1] * bounds.width) / 100;\r\n gradient.cy = (m2[2] * bounds.height) / 100;\r\n }\r\n\r\n // size\r\n m2 = m1[3].match(/\\w+/);\r\n m3 = m1[4].match(/[a-z-]*/);\r\n if(m2 && m3){\r\n switch(m3[0]){\r\n case 'farthest-corner':\r\n case 'cover': // is equivalent to farthest-corner\r\n case '': // mozilla removes \"cover\" from definition :(\r\n var tl = Math.sqrt(Math.pow(gradient.cx, 2) + Math.pow(gradient.cy, 2));\r\n var tr = Math.sqrt(Math.pow(gradient.cx, 2) + Math.pow(gradient.y1 - gradient.cy, 2));\r\n var br = Math.sqrt(Math.pow(gradient.x1 - gradient.cx, 2) + Math.pow(gradient.y1 - gradient.cy, 2));\r\n var bl = Math.sqrt(Math.pow(gradient.x1 - gradient.cx, 2) + Math.pow(gradient.cy, 2));\r\n gradient.rx = gradient.ry = Math.max(tl, tr, br, bl);\r\n break;\r\n case 'closest-corner':\r\n var tl = Math.sqrt(Math.pow(gradient.cx, 2) + Math.pow(gradient.cy, 2));\r\n var tr = Math.sqrt(Math.pow(gradient.cx, 2) + Math.pow(gradient.y1 - gradient.cy, 2));\r\n var br = Math.sqrt(Math.pow(gradient.x1 - gradient.cx, 2) + Math.pow(gradient.y1 - gradient.cy, 2));\r\n var bl = Math.sqrt(Math.pow(gradient.x1 - gradient.cx, 2) + Math.pow(gradient.cy, 2));\r\n gradient.rx = gradient.ry = Math.min(tl, tr, br, bl);\r\n break;\r\n case 'farthest-side':\r\n if(m2[0] === 'circle'){\r\n gradient.rx = gradient.ry = Math.max(\r\n gradient.cx,\r\n gradient.cy,\r\n gradient.x1 - gradient.cx,\r\n gradient.y1 - gradient.cy\r\n );\r\n } else { // ellipse\r\n\r\n gradient.type = m2[0];\r\n\r\n gradient.rx = Math.max(\r\n gradient.cx,\r\n gradient.x1 - gradient.cx\r\n );\r\n gradient.ry = Math.max(\r\n gradient.cy,\r\n gradient.y1 - gradient.cy\r\n );\r\n }\r\n break;\r\n case 'closest-side':\r\n case 'contain': // is equivalent to closest-side\r\n if(m2[0] === 'circle'){\r\n gradient.rx = gradient.ry = Math.min(\r\n gradient.cx,\r\n gradient.cy,\r\n gradient.x1 - gradient.cx,\r\n gradient.y1 - gradient.cy\r\n );\r\n } else { // ellipse\r\n\r\n gradient.type = m2[0];\r\n\r\n gradient.rx = Math.min(\r\n gradient.cx,\r\n gradient.x1 - gradient.cx\r\n );\r\n gradient.ry = Math.min(\r\n gradient.cy,\r\n gradient.y1 - gradient.cy\r\n );\r\n }\r\n break;\r\n\r\n // TODO: add support for \"30px 40px\" sizes (webkit only)\r\n }\r\n }\r\n\r\n // color stops\r\n m2 = m1[5].match(/((?:rgb|rgba)\\(\\d{1,3},\\s\\d{1,3},\\s\\d{1,3}(?:,\\s[0-9\\.]+)?\\)(?:\\s\\d{1,3}(?:%|px))?)+/g);\r\n if(m2){\r\n m2Len = m2.length;\r\n step = 1 / Math.max(m2Len - 1, 1);\r\n for(i = 0; i < m2Len; i+=1){\r\n m3 = m2[i].match(/((?:rgb|rgba)\\(\\d{1,3},\\s\\d{1,3},\\s\\d{1,3}(?:,\\s[0-9\\.]+)?\\))\\s*(\\d{1,3})?(%|px)?/);\r\n if(m3[2]){\r\n stop = parseFloat(m3[2]);\r\n if(m3[3] === '%'){\r\n stop /= 100;\r\n } else { // px - stupid opera\r\n stop /= bounds.width;\r\n }\r\n } else {\r\n stop = i * step;\r\n }\r\n gradient.colorStops.push({\r\n color: m3[1],\r\n stop: stop\r\n });\r\n }\r\n }\r\n break;\r\n }\r\n }\r\n\r\n return gradient;\r\n};\r\n\r\n_html2canvas.Generate.Gradient = function(src, bounds) {\r\n var canvas = document.createElement('canvas'),\r\n ctx = canvas.getContext('2d'),\r\n gradient, grad, i, len, img;\r\n\r\n canvas.width = bounds.width;\r\n canvas.height = bounds.height;\r\n\r\n // TODO: add support for multi defined background gradients (like radial gradient example in background.html)\r\n gradient = _html2canvas.Generate.parseGradient(src, bounds);\r\n\r\n img = new Image();\r\n\r\n if(gradient){\r\n if(gradient.type === 'linear'){\r\n grad = ctx.createLinearGradient(gradient.x0, gradient.y0, gradient.x1, gradient.y1);\r\n\r\n for (i = 0, len = gradient.colorStops.length; i < len; i+=1) {\r\n try {\r\n grad.addColorStop(gradient.colorStops[i].stop, gradient.colorStops[i].color);\r\n }\r\n catch(e) {\r\n h2clog(['failed to add color stop: ', e, '; tried to add: ', gradient.colorStops[i], '; stop: ', i, '; in: ', src]);\r\n }\r\n }\r\n\r\n ctx.fillStyle = grad;\r\n ctx.fillRect(0, 0, bounds.width, bounds.height);\r\n\r\n img.src = canvas.toDataURL();\r\n } else if(gradient.type === 'circle'){\r\n\r\n grad = ctx.createRadialGradient(gradient.cx, gradient.cy, 0, gradient.cx, gradient.cy, gradient.rx);\r\n\r\n for (i = 0, len = gradient.colorStops.length; i < len; i+=1) {\r\n try {\r\n grad.addColorStop(gradient.colorStops[i].stop, gradient.colorStops[i].color);\r\n }\r\n catch(e) {\r\n h2clog(['failed to add color stop: ', e, '; tried to add: ', gradient.colorStops[i], '; stop: ', i, '; in: ', src]);\r\n }\r\n }\r\n\r\n ctx.fillStyle = grad;\r\n ctx.fillRect(0, 0, bounds.width, bounds.height);\r\n\r\n img.src = canvas.toDataURL();\r\n } else if(gradient.type === 'ellipse'){\r\n\r\n // draw circle\r\n var canvasRadial = document.createElement('canvas'),\r\n ctxRadial = canvasRadial.getContext('2d'),\r\n ri = Math.max(gradient.rx, gradient.ry),\r\n di = ri * 2, imgRadial;\r\n\r\n canvasRadial.width = canvasRadial.height = di;\r\n\r\n grad = ctxRadial.createRadialGradient(gradient.rx, gradient.ry, 0, gradient.rx, gradient.ry, ri);\r\n\r\n for (i = 0, len = gradient.colorStops.length; i < len; i+=1) {\r\n try {\r\n grad.addColorStop(gradient.colorStops[i].stop, gradient.colorStops[i].color);\r\n }\r\n catch(e) {\r\n h2clog(['failed to add color stop: ', e, '; tried to add: ', gradient.colorStops[i], '; stop: ', i, '; in: ', src]);\r\n }\r\n }\r\n\r\n ctxRadial.fillStyle = grad;\r\n ctxRadial.fillRect(0, 0, di, di);\r\n\r\n ctx.fillStyle = gradient.colorStops[i - 1].color;\r\n ctx.fillRect(0, 0, canvas.width, canvas.height);\r\n\r\n imgRadial = new Image();\r\n imgRadial.onload = function() { // wait until the image is filled\r\n\r\n // transform circle to ellipse\r\n ctx.drawImage(imgRadial, gradient.cx - gradient.rx, gradient.cy - gradient.ry, 2 * gradient.rx, 2 * gradient.ry);\r\n\r\n img.src = canvas.toDataURL();\r\n\r\n }\r\n imgRadial.src = canvasRadial.toDataURL();\r\n }\r\n }\r\n\r\n return img;\r\n};\r\n\r\n_html2canvas.Generate.ListAlpha = function(number) {\r\n var tmp = \"\",\r\n modulus;\r\n\r\n do {\r\n modulus = number % 26;\r\n tmp = String.fromCharCode((modulus) + 64) + tmp;\r\n number = number / 26;\r\n }while((number*26) > 26);\r\n\r\n return tmp;\r\n};\r\n\r\n_html2canvas.Generate.ListRoman = function(number) {\r\n var romanArray = [\"M\", \"CM\", \"D\", \"CD\", \"C\", \"XC\", \"L\", \"XL\", \"X\", \"IX\", \"V\", \"IV\", \"I\"],\r\n decimal = [1000, 900, 500, 400, 100, 90, 50, 40, 10, 9, 5, 4, 1],\r\n roman = \"\",\r\n v,\r\n len = romanArray.length;\r\n\r\n if (number <= 0 || number >= 4000) {\r\n return number;\r\n }\r\n\r\n for (v=0; v < len; v+=1) {\r\n while (number >= decimal[v]) {\r\n number -= decimal[v];\r\n roman += romanArray[v];\r\n }\r\n }\r\n\r\n return roman;\r\n\r\n};\r\n\r\n})();\r\n/*\r\n html2canvas v0.34 \r\n Copyright (c) 2011 Niklas von Hertzen. All rights reserved.\r\n http://www.twitter.com/niklasvh\r\n\r\n Released under MIT License\r\n*/\r\n\r\n/*\r\n * New function for traversing elements\r\n */\r\n\r\n_html2canvas.Parse = function ( images, options ) {\r\n\r\n var support = {\r\n rangeBounds: false,\r\n svgRendering: options.svgRendering && (function( ){\r\n var img = new Image(),\r\n canvas = document.createElement(\"canvas\"),\r\n ctx = (canvas.getContext === undefined) ? false : canvas.getContext(\"2d\");\r\n if (ctx === false) {\r\n // browser doesn't support canvas, good luck supporting SVG on canvas\r\n return false;\r\n }\r\n canvas.width = canvas.height = 10;\r\n img.src = [\r\n \"data:image/svg+xml,\",\r\n \"\",\r\n \"\",\r\n \"
\",\r\n \"sup\",\r\n \"
\",\r\n \"\",\r\n \"\"\r\n ].join(\"\");\r\n try {\r\n ctx.drawImage(img, 0, 0);\r\n canvas.toDataURL();\r\n } catch(e) {\r\n return false;\r\n }\r\n h2clog('html2canvas: Parse: SVG powered rendering available');\r\n return true;\r\n\r\n })()\r\n },\r\n element = (( options.elements === undefined ) ? document.body : options.elements[0]), // select body by default\r\n needReorder = false,\r\n numDraws = 0,\r\n fontData = {},\r\n doc = element.ownerDocument,\r\n ignoreElementsRegExp = new RegExp(\"(\" + options.ignoreElements + \")\"),\r\n body = doc.body,\r\n r,\r\n testElement,\r\n rangeBounds,\r\n rangeHeight,\r\n stack,\r\n ctx,\r\n docDim,\r\n i,\r\n children,\r\n childrenLen;\r\n\r\n\r\n function docSize(){\r\n\r\n return {\r\n width: Math.max(\r\n Math.max(doc.body.scrollWidth, doc.documentElement.scrollWidth),\r\n Math.max(doc.body.offsetWidth, doc.documentElement.offsetWidth),\r\n Math.max(doc.body.clientWidth, doc.documentElement.clientWidth)\r\n ),\r\n height: Math.max(\r\n Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight),\r\n Math.max(doc.body.offsetHeight, doc.documentElement.offsetHeight),\r\n Math.max(doc.body.clientHeight, doc.documentElement.clientHeight)\r\n )\r\n };\r\n\r\n }\r\n\r\n images = images || {};\r\n\r\n // Test whether we can use ranges to measure bounding boxes\r\n // Opera doesn't provide valid bounds.height/bottom even though it supports the method.\r\n\r\n\r\n if (doc.createRange) {\r\n r = doc.createRange();\r\n //this.support.rangeBounds = new Boolean(r.getBoundingClientRect);\r\n if (r.getBoundingClientRect){\r\n testElement = doc.createElement('boundtest');\r\n testElement.style.height = \"123px\";\r\n testElement.style.display = \"block\";\r\n body.appendChild(testElement);\r\n\r\n r.selectNode(testElement);\r\n rangeBounds = r.getBoundingClientRect();\r\n rangeHeight = rangeBounds.height;\r\n\r\n if (rangeHeight === 123) {\r\n support.rangeBounds = true;\r\n }\r\n body.removeChild(testElement);\r\n\r\n\r\n }\r\n\r\n }\r\n\r\n\r\n /*\r\n var rootStack = new this.storageContext($(document).width(),$(document).height());\r\n rootStack.opacity = this.getCSS(this.element,\"opacity\");\r\n var stack = this.newElement(this.element,rootStack);\r\n\r\n\r\n this.parseElement(this.element,stack);\r\n */\r\n\r\n\r\n\r\n\r\n var getCSS = _html2canvas.Util.getCSS;\r\n function getCSSInt(element, attribute) {\r\n var val = parseInt(getCSS(element, attribute), 10);\r\n return (isNaN(val)) ? 0 : val; // borders in old IE are throwing 'medium' for demo.html\r\n }\r\n\r\n // Drawing a rectangle\r\n function renderRect (ctx, x, y, w, h, bgcolor) {\r\n if (bgcolor !==\"transparent\"){\r\n ctx.setVariable(\"fillStyle\", bgcolor);\r\n ctx.fillRect (x, y, w, h);\r\n numDraws+=1;\r\n }\r\n }\r\n\r\n\r\n function textTransform (text, transform) {\r\n switch(transform){\r\n case \"lowercase\":\r\n return text.toLowerCase();\r\n\r\n case \"capitalize\":\r\n return text.replace( /(^|\\s|:|-|\\(|\\))([a-z])/g , function (m, p1, p2) {\r\n if (m.length > 0) {\r\n return p1 + p2.toUpperCase();\r\n }\r\n } );\r\n\r\n case \"uppercase\":\r\n return text.toUpperCase();\r\n\r\n default:\r\n return text;\r\n\r\n }\r\n\r\n }\r\n\r\n function trimText (text) {\r\n return text.replace(/^\\s*/g, \"\").replace(/\\s*$/g, \"\");\r\n }\r\n\r\n function fontMetrics (font, fontSize) {\r\n\r\n if (fontData[font + \"-\" + fontSize] !== undefined) {\r\n return fontData[font + \"-\" + fontSize];\r\n }\r\n\r\n\r\n var container = doc.createElement('div'),\r\n img = doc.createElement('img'),\r\n span = doc.createElement('span'),\r\n baseline,\r\n middle,\r\n metricsObj;\r\n\r\n\r\n container.style.visibility = \"hidden\";\r\n container.style.fontFamily = font;\r\n container.style.fontSize = fontSize;\r\n container.style.margin = 0;\r\n container.style.padding = 0;\r\n\r\n body.appendChild(container);\r\n\r\n\r\n\r\n // http://probablyprogramming.com/2009/03/15/the-tiniest-gif-ever (handtinywhite.gif)\r\n img.src = \"data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACwAAAAAAQABAAACAkQBADs=\";\r\n img.width = 1;\r\n img.height = 1;\r\n\r\n img.style.margin = 0;\r\n img.style.padding = 0;\r\n img.style.verticalAlign = \"baseline\";\r\n\r\n span.style.fontFamily = font;\r\n span.style.fontSize = fontSize;\r\n span.style.margin = 0;\r\n span.style.padding = 0;\r\n\r\n\r\n\r\n\r\n span.appendChild(doc.createTextNode('Hidden Text'));\r\n container.appendChild(span);\r\n container.appendChild(img);\r\n baseline = (img.offsetTop - span.offsetTop) + 1;\r\n\r\n container.removeChild(span);\r\n container.appendChild(doc.createTextNode('Hidden Text'));\r\n\r\n container.style.lineHeight = \"normal\";\r\n img.style.verticalAlign = \"super\";\r\n\r\n middle = (img.offsetTop-container.offsetTop) + 1;\r\n metricsObj = {\r\n baseline: baseline,\r\n lineWidth: 1,\r\n middle: middle\r\n };\r\n\r\n\r\n fontData[font + \"-\" + fontSize] = metricsObj;\r\n\r\n body.removeChild(container);\r\n\r\n return metricsObj;\r\n\r\n }\r\n\r\n\r\n function drawText(currentText, x, y, ctx){\r\n if (trimText(currentText).length>0) {\r\n ctx.fillText(currentText,x,y);\r\n numDraws+=1;\r\n }\r\n }\r\n\r\n\r\n function renderText(el, textNode, stack) {\r\n var ctx = stack.ctx,\r\n family = getCSS(el, \"fontFamily\"),\r\n size = getCSS(el, \"fontSize\"),\r\n color = getCSS(el, \"color\"),\r\n text_decoration = getCSS(el, \"textDecoration\"),\r\n text_align = getCSS(el, \"textAlign\"),\r\n letter_spacing = getCSS(el, \"letterSpacing\"),\r\n bounds,\r\n text,\r\n metrics,\r\n renderList,\r\n listLen,\r\n bold = getCSS(el, \"fontWeight\"),\r\n font_style = getCSS(el, \"fontStyle\"),\r\n font_variant = getCSS(el, \"fontVariant\"),\r\n align = false,\r\n newTextNode,\r\n textValue,\r\n textOffset = 0,\r\n oldTextNode,\r\n c,\r\n range,\r\n parent,\r\n wrapElement,\r\n backupText;\r\n\r\n // apply text-transform:ation to the text\r\n\r\n\r\n\r\n textNode.nodeValue = textTransform(textNode.nodeValue, getCSS(el, \"textTransform\"));\r\n text = trimText(textNode.nodeValue);\r\n\r\n if (text.length>0){\r\n\r\n if (text_decoration !== \"none\"){\r\n metrics = fontMetrics(family, size);\r\n }\r\n\r\n text_align = text_align.replace([\"-webkit-auto\"],[\"auto\"]);\r\n\r\n if (options.letterRendering === false && /^(left|right|justify|auto)$/.test(text_align) && /^(normal|none)$/.test(letter_spacing)){\r\n // this.setContextVariable(ctx,\"textAlign\",text_align);\r\n renderList = textNode.nodeValue.split(/(\\b| )/);\r\n\r\n }else{\r\n // this.setContextVariable(ctx,\"textAlign\",\"left\");\r\n renderList = textNode.nodeValue.split(\"\");\r\n }\r\n\r\n switch(parseInt(bold, 10)){\r\n case 401:\r\n bold = \"bold\";\r\n break;\r\n case 400:\r\n bold = \"normal\";\r\n break;\r\n }\r\n\r\n ctx.setVariable(\"fillStyle\", color);\r\n\r\n /*\r\n need to be defined in the order as defined in http://www.w3.org/TR/CSS21/fonts.html#font-shorthand\r\n to properly work in Firefox\r\n */\r\n ctx.setVariable(\"font\", font_style+ \" \" + font_variant + \" \" + bold + \" \" + size + \" \" + family);\r\n\r\n if (align){\r\n ctx.setVariable(\"textAlign\", \"right\");\r\n }else{\r\n ctx.setVariable(\"textAlign\", \"left\");\r\n }\r\n\r\n\r\n /*\r\n if (stack.clip){\r\n ctx.rect (stack.clip.left, stack.clip.top, stack.clip.width, stack.clip.height);\r\n ctx.clip();\r\n }\r\n */\r\n\r\n\r\n oldTextNode = textNode;\r\n\r\n\r\n for ( c=0, listLen = renderList.length; c < listLen; c+=1 ) {\r\n textValue = null;\r\n\r\n\r\n\r\n if (support.rangeBounds){\r\n // getBoundingClientRect is supported for ranges\r\n if (text_decoration !== \"none\" || trimText(renderList[c]).length !== 0) {\r\n textValue = renderList[c];\r\n if (doc.createRange){\r\n range = doc.createRange();\r\n\r\n range.setStart(textNode, textOffset);\r\n range.setEnd(textNode, textOffset + textValue.length);\r\n }else{\r\n // TODO add IE support\r\n range = body.createTextRange();\r\n }\r\n\r\n bounds = adjustBounds(textNode, range.getBoundingClientRect());\r\n\r\n }\r\n }else{\r\n // it isn't supported, so let's wrap it inside an element instead and get the bounds there\r\n\r\n // IE 9 bug\r\n if (typeof oldTextNode.nodeValue !== \"string\" ){\r\n continue;\r\n }\r\n\r\n newTextNode = oldTextNode.splitText(renderList[c].length);\r\n\r\n parent = oldTextNode.parentNode;\r\n wrapElement = doc.createElement('wrapper');\r\n backupText = oldTextNode.cloneNode(true);\r\n\r\n wrapElement.appendChild(oldTextNode.cloneNode(true));\r\n parent.replaceChild(wrapElement, oldTextNode);\r\n\r\n bounds = _html2canvas.Util.Bounds(wrapElement);\r\n\r\n textValue = oldTextNode.nodeValue;\r\n\r\n oldTextNode = newTextNode;\r\n parent.replaceChild(backupText, wrapElement);\r\n\r\n\r\n }\r\n\r\n if (textValue !== null){\r\n drawText(textValue, bounds.left, bounds.bottom, ctx);\r\n }\r\n\r\n switch(text_decoration) {\r\n case \"underline\":\r\n // Draws a line at the baseline of the font\r\n // 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\r\n renderRect(ctx, bounds.left, Math.round(bounds.top + metrics.baseline + metrics.lineWidth), bounds.width, 1, color);\r\n break;\r\n case \"overline\":\r\n renderRect(ctx, bounds.left, bounds.top, bounds.width, 1, color);\r\n break;\r\n case \"line-through\":\r\n // TODO try and find exact position for line-through\r\n renderRect(ctx, bounds.left, Math.ceil(bounds.top + metrics.middle + metrics.lineWidth), bounds.width, 1, color);\r\n break;\r\n\r\n }\r\n\r\n\r\n\r\n\r\n\r\n textOffset += renderList[c].length;\r\n\r\n }\r\n\r\n\r\n\r\n }\r\n\r\n }\r\n\r\n function listPosition (element, val) {\r\n var boundElement = doc.createElement( \"boundelement\" ),\r\n type,\r\n bounds;\r\n\r\n boundElement.style.display = \"inline\";\r\n //boundElement.style.width = \"1px\";\r\n //boundElement.style.height = \"1px\";\r\n\r\n type = element.style.listStyleType;\r\n element.style.listStyleType = \"none\";\r\n\r\n boundElement.appendChild( doc.createTextNode( val ) );\r\n\r\n\r\n element.insertBefore(boundElement, element.firstChild);\r\n\r\n\r\n bounds = _html2canvas.Util.Bounds( boundElement );\r\n element.removeChild( boundElement );\r\n element.style.listStyleType = type;\r\n return bounds;\r\n\r\n }\r\n \r\n\r\n \r\n function elementIndex( el ) {\r\n var i = -1,\r\n count = 1,\r\n childs = el.parentNode.childNodes;\r\n\r\n if ( el.parentNode ) {\r\n while( childs[ ++i ] !== el ) {\r\n if ( childs[ i ].nodeType === 1 ) {\r\n count++;\r\n }\r\n }\r\n return count;\r\n } else {\r\n return -1;\r\n }\r\n \r\n }\r\n\r\n function renderListItem(element, stack, elBounds) {\r\n\r\n\r\n var position = getCSS(element, \"listStylePosition\"),\r\n x,\r\n y,\r\n type = getCSS(element, \"listStyleType\"),\r\n currentIndex,\r\n text,\r\n listBounds,\r\n bold = getCSS(element, \"fontWeight\");\r\n\r\n if (/^(decimal|decimal-leading-zero|upper-alpha|upper-latin|upper-roman|lower-alpha|lower-greek|lower-latin|lower-roman)$/i.test(type)) {\r\n\r\n currentIndex = elementIndex( element );\r\n\r\n switch(type){\r\n case \"decimal\":\r\n text = currentIndex;\r\n break;\r\n case \"decimal-leading-zero\":\r\n if (currentIndex.toString().length === 1){\r\n text = currentIndex = \"0\" + currentIndex.toString();\r\n }else{\r\n text = currentIndex.toString();\r\n }\r\n break;\r\n case \"upper-roman\":\r\n text = _html2canvas.Generate.ListRoman( currentIndex );\r\n break;\r\n case \"lower-roman\":\r\n text = _html2canvas.Generate.ListRoman( currentIndex ).toLowerCase();\r\n break;\r\n case \"lower-alpha\":\r\n text = _html2canvas.Generate.ListAlpha( currentIndex ).toLowerCase();\r\n break;\r\n case \"upper-alpha\":\r\n text = _html2canvas.Generate.ListAlpha( currentIndex );\r\n break;\r\n }\r\n\r\n\r\n text += \". \";\r\n listBounds = listPosition(element, text);\r\n\r\n\r\n\r\n switch(bold){\r\n case 401:\r\n bold = \"bold\";\r\n break;\r\n case 400:\r\n bold = \"normal\";\r\n break;\r\n }\r\n\r\n\r\n\r\n\r\n ctx.setVariable( \"fillStyle\", getCSS(element, \"color\") );\r\n ctx.setVariable( \"font\", getCSS(element, \"fontVariant\") + \" \" + bold + \" \" + getCSS(element, \"fontStyle\") + \" \" + getCSS(element, \"fontSize\") + \" \" + getCSS(element, \"fontFamily\") );\r\n\r\n\r\n if ( position === \"inside\" ) {\r\n ctx.setVariable(\"textAlign\", \"left\");\r\n // this.setFont(stack.ctx, element, false);\r\n x = elBounds.left;\r\n\r\n }else{\r\n return;\r\n /*\r\n TODO really need to figure out some more accurate way to try and find the position.\r\n as defined in http://www.w3.org/TR/CSS21/generate.html#propdef-list-style-position, it does not even have a specified \"correct\" position, so each browser\r\n may display it whatever way it feels like.\r\n \"The position of the list-item marker adjacent to floats is undefined in CSS 2.1. CSS 2.1 does not specify the precise location of the marker box or its position in the painting order\"\r\n\r\n ctx.setVariable(\"textAlign\", \"right\");\r\n // this.setFont(stack.ctx, element, true);\r\n x = elBounds.left - 10;\r\n */\r\n }\r\n\r\n y = listBounds.bottom;\r\n\r\n drawText(text, x, y, ctx);\r\n\r\n\r\n }\r\n\r\n\r\n }\r\n\r\n function loadImage (src){\r\n var img = images[src];\r\n if (img && img.succeeded === true) {\r\n return img.img;\r\n } else {\r\n return false;\r\n }\r\n }\r\n\r\n\r\n\r\n\r\n\r\n\r\n function clipBounds(src, dst){\r\n\r\n var x = Math.max(src.left, dst.left),\r\n y = Math.max(src.top, dst.top),\r\n x2 = Math.min((src.left + src.width), (dst.left + dst.width)),\r\n y2 = Math.min((src.top + src.height), (dst.top + dst.height));\r\n\r\n return {\r\n left:x,\r\n top:y,\r\n width:x2-x,\r\n height:y2-y\r\n };\r\n\r\n }\r\n\r\n function setZ(zIndex, parentZ){\r\n // TODO fix static elements overlapping relative/absolute elements under same stack, if they are defined after them\r\n var newContext;\r\n if (!parentZ){\r\n newContext = h2czContext(0);\r\n return newContext;\r\n }\r\n\r\n if (zIndex !== \"auto\"){\r\n needReorder = true;\r\n newContext = h2czContext(zIndex);\r\n parentZ.children.push(newContext);\r\n return newContext;\r\n\r\n }\r\n\r\n return parentZ;\r\n\r\n }\r\n\r\n function renderBorders(el, ctx, bounds, clip){\r\n\r\n /*\r\n * TODO add support for different border-style's than solid\r\n */\r\n\r\n var x = bounds.left,\r\n y = bounds.top,\r\n w = bounds.width,\r\n h = bounds.height,\r\n borderSide,\r\n borderData,\r\n bx,\r\n by,\r\n bw,\r\n bh,\r\n borderBounds,\r\n borders = (function(el){\r\n var borders = [],\r\n sides = [\"Top\",\"Right\",\"Bottom\",\"Left\"],\r\n s;\r\n\r\n for (s = 0; s < 4; s+=1){\r\n borders.push({\r\n width: getCSSInt(el, 'border' + sides[s] + 'Width'),\r\n color: getCSS(el, 'border' + sides[s] + 'Color')\r\n });\r\n }\r\n\r\n return borders;\r\n\r\n }(el));\r\n\r\n\r\n for (borderSide = 0; borderSide < 4; borderSide+=1){\r\n borderData = borders[borderSide];\r\n\r\n if (borderData.width>0){\r\n bx = x;\r\n by = y;\r\n bw = w;\r\n bh = h - (borders[2].width);\r\n\r\n switch(borderSide){\r\n case 0:\r\n // top border\r\n bh = borders[0].width;\r\n break;\r\n case 1:\r\n // right border\r\n bx = x + w - (borders[1].width);\r\n bw = borders[1].width;\r\n break;\r\n case 2:\r\n // bottom border\r\n by = (by + h) - (borders[2].width);\r\n bh = borders[2].width;\r\n break;\r\n case 3:\r\n // left border\r\n bw = borders[3].width;\r\n break;\r\n }\r\n\r\n borderBounds = {\r\n left:bx,\r\n top:by,\r\n width: bw,\r\n height:bh\r\n };\r\n\r\n if (clip){\r\n borderBounds = clipBounds(borderBounds, clip);\r\n }\r\n\r\n\r\n if (borderBounds.width>0 && borderBounds.height>0){\r\n renderRect(ctx, bx, by, borderBounds.width, borderBounds.height, borderData.color);\r\n }\r\n\r\n\r\n }\r\n }\r\n\r\n return borders;\r\n\r\n }\r\n\r\n\r\n function renderFormValue (el, bounds, stack){\r\n\r\n var valueWrap = doc.createElement('valuewrap'),\r\n cssArr = ['lineHeight','textAlign','fontFamily','color','fontSize','paddingLeft','paddingTop','width','height','border','borderLeftWidth','borderTopWidth'],\r\n i,\r\n textValue,\r\n textNode,\r\n arrLen,\r\n style;\r\n\r\n for (i = 0, arrLen = cssArr.length; i < arrLen; i+=1){\r\n style = cssArr[i];\r\n\r\n try {\r\n valueWrap.style[style] = getCSS(el, style);\r\n } catch( e ) {\r\n // Older IE has issues with \"border\"\r\n h2clog(\"html2canvas: Parse: Exception caught in renderFormValue: \" + e.message);\r\n }\r\n }\r\n\r\n\r\n valueWrap.style.borderColor = \"black\";\r\n valueWrap.style.borderStyle = \"solid\";\r\n valueWrap.style.display = \"block\";\r\n valueWrap.style.position = \"absolute\";\r\n if (/^(submit|reset|button|text|password)$/.test(el.type) || el.nodeName === \"SELECT\"){\r\n valueWrap.style.lineHeight = getCSS(el, \"height\");\r\n }\r\n\r\n\r\n valueWrap.style.top = bounds.top + \"px\";\r\n valueWrap.style.left = bounds.left + \"px\";\r\n\r\n if (el.nodeName === \"SELECT\"){\r\n // TODO increase accuracy of text position\r\n textValue = el.options[el.selectedIndex].text;\r\n } else{\r\n textValue = el.value;\r\n }\r\n textNode = doc.createTextNode(textValue);\r\n\r\n valueWrap.appendChild(textNode);\r\n body.appendChild(valueWrap);\r\n\r\n\r\n renderText(el, textNode, stack);\r\n body.removeChild(valueWrap);\r\n\r\n\r\n\r\n }\r\n\r\n\r\n\r\n\r\n\r\n function renderImage (ctx, image, sx, sy, sw, sh, dx, dy, dw, dh) {\r\n ctx.drawImage(\r\n image,\r\n sx, //sx\r\n sy, //sy\r\n sw, //sw\r\n sh, //sh\r\n dx, //dx\r\n dy, // dy\r\n dw, //dw\r\n dh //dh\r\n );\r\n numDraws+=1;\r\n\r\n }\r\n\r\n\r\n function renderBackgroundRepeat (ctx, image, x, y, width, height, elx, ely){\r\n var sourceX = 0,\r\n sourceY=0;\r\n if (elx-x>0){\r\n sourceX = elx-x;\r\n }\r\n\r\n if (ely-y>0){\r\n sourceY = ely-y;\r\n }\r\n\r\n renderImage(\r\n ctx,\r\n image,\r\n sourceX, // source X\r\n sourceY, // source Y\r\n width-sourceX, // source Width\r\n height-sourceY, // source Height\r\n x+sourceX, // destination X\r\n y+sourceY, // destination Y\r\n width-sourceX, // destination width\r\n height-sourceY // destination height\r\n );\r\n }\r\n\r\n\r\n function renderBackgroundRepeatY (ctx, image, bgp, x, y, w, h){\r\n\r\n var height,\r\n width = Math.min(image.width,w),bgy;\r\n\r\n bgp.top = bgp.top-Math.ceil(bgp.top/image.height)*image.height;\r\n\r\n\r\n for(bgy=(y+bgp.top);bgyh+y){\r\n height = (h+y)-bgy;\r\n }else{\r\n height = image.height;\r\n }\r\n renderBackgroundRepeat(ctx,image,x+bgp.left,bgy,width,height,x,y);\r\n\r\n bgy = Math.floor(bgy+image.height);\r\n\r\n }\r\n }\r\n\r\n function renderBackgroundRepeatX(ctx, image, bgp, x, y, w, h){\r\n\r\n var height = Math.min(image.height,h),\r\n width,bgx;\r\n\r\n\r\n bgp.left = bgp.left-Math.ceil(bgp.left/image.width)*image.width;\r\n\r\n\r\n for (bgx=(x+bgp.left);bgxw+x){\r\n width = (w+x)-bgx;\r\n }else{\r\n width = image.width;\r\n }\r\n\r\n renderBackgroundRepeat(ctx,image,bgx,(y+bgp.top),width,height,x,y);\r\n\r\n bgx = Math.floor(bgx+image.width);\r\n\r\n\r\n }\r\n }\r\n\r\n function renderBackground(el,bounds,ctx){\r\n\r\n // TODO add support for multi background-images\r\n var background_image = getCSS(el, \"backgroundImage\"),\r\n background_repeat = getCSS(el, \"backgroundRepeat\").split(\",\")[0],\r\n image,\r\n bgp,\r\n bgy,\r\n bgw,\r\n bgsx,\r\n bgsy,\r\n bgdx,\r\n bgdy,\r\n bgh,\r\n h,\r\n height,\r\n add;\r\n\r\n // if (typeof background_image !== \"undefined\" && /^(1|none)$/.test(background_image) === false && /^(-webkit|-moz|linear-gradient|-o-)/.test(background_image)===false){\r\n\r\n if ( !/data:image\\/.*;base64,/i.test(background_image) && !/^(-webkit|-moz|linear-gradient|-o-)/.test(background_image) ) {\r\n background_image = background_image.split(\",\")[0];\r\n }\r\n\r\n if ( typeof background_image !== \"undefined\" && /^(1|none)$/.test( background_image ) === false ) {\r\n background_image = _html2canvas.Util.backgroundImage( background_image );\r\n image = loadImage( background_image );\r\n\r\n\r\n bgp = _html2canvas.Util.BackgroundPosition(el, bounds, image);\r\n\r\n // TODO add support for background-origin\r\n if ( image ){\r\n switch ( background_repeat ) {\r\n\r\n case \"repeat-x\":\r\n renderBackgroundRepeatX( ctx, image, bgp, bounds.left, bounds.top, bounds.width, bounds.height );\r\n break;\r\n\r\n case \"repeat-y\":\r\n renderBackgroundRepeatY( ctx, image, bgp, bounds.left, bounds.top, bounds.width, bounds.height );\r\n break;\r\n\r\n case \"no-repeat\":\r\n /*\r\n this.drawBackgroundRepeat(\r\n ctx,\r\n image,\r\n bgp.left+bounds.left, // sx\r\n bgp.top+bounds.top, // sy\r\n Math.min(bounds.width,image.width),\r\n Math.min(bounds.height,image.height),\r\n bounds.left,\r\n bounds.top\r\n );*/\r\n\r\n\r\n \r\n bgw = bounds.width - bgp.left;\r\n bgh = bounds.height - bgp.top;\r\n bgsx = bgp.left;\r\n bgsy = bgp.top;\r\n bgdx = bgp.left+bounds.left;\r\n bgdy = bgp.top+bounds.top;\r\n\r\n //\r\n // bgw = Math.min(bgw,image.width);\r\n // bgh = Math.min(bgh,image.height);\r\n\r\n if (bgsx<0){\r\n bgsx = Math.abs(bgsx);\r\n bgdx += bgsx;\r\n bgw = Math.min(bounds.width,image.width-bgsx);\r\n }else{\r\n bgw = Math.min(bgw,image.width);\r\n bgsx = 0;\r\n }\r\n\r\n if (bgsy<0){\r\n bgsy = Math.abs(bgsy);\r\n bgdy += bgsy;\r\n // bgh = bgh-bgsy;\r\n bgh = Math.min(bounds.height,image.height-bgsy);\r\n }else{\r\n bgh = Math.min(bgh,image.height);\r\n bgsy = 0;\r\n }\r\n\r\n\r\n if (bgh>0 && bgw > 0){\r\n renderImage(\r\n ctx,\r\n image,\r\n bgsx, // source X : 0\r\n bgsy, // source Y : 1695\r\n bgw, // source Width : 18\r\n bgh, // source Height : 1677\r\n bgdx, // destination X :906\r\n bgdy, // destination Y : 1020\r\n bgw, // destination width : 18\r\n bgh // destination height : 1677\r\n );\r\n\r\n }\r\n break;\r\n default:\r\n\r\n\r\n\r\n bgp.top = bgp.top-Math.ceil(bgp.top/image.height)*image.height;\r\n\r\n\r\n for(bgy=(bounds.top+bgp.top);bgyh+bgy){\r\n height = (h+bgy)-bgy;\r\n }else{\r\n height = image.height;\r\n }\r\n // console.log(height);\r\n\r\n if (bgy0){\r\n bgp.top += add;\r\n }\r\n bgy = Math.floor(bgy+image.height)-add;\r\n }\r\n break;\r\n\r\n\r\n }\r\n }else{\r\n h2clog(\"html2canvas: Error loading background:\" + background_image);\r\n //console.log(images);\r\n }\r\n\r\n }\r\n }\r\n\r\n\r\n\r\n function renderElement(el, parentStack){\r\n\r\n var bounds = _html2canvas.Util.Bounds(el),\r\n x = bounds.left,\r\n y = bounds.top,\r\n w = bounds.width,\r\n h = bounds.height,\r\n image,\r\n bgcolor = getCSS(el, \"backgroundColor\"),\r\n cssPosition = getCSS(el, \"position\"),\r\n zindex,\r\n opacity = getCSS(el, \"opacity\"),\r\n stack,\r\n stackLength,\r\n borders,\r\n ctx,\r\n bgbounds,\r\n imgSrc,\r\n paddingLeft,\r\n paddingTop,\r\n paddingRight,\r\n paddingBottom;\r\n\r\n if (!parentStack){\r\n docDim = docSize();\r\n parentStack = {\r\n opacity: 1\r\n };\r\n }else{\r\n docDim = {};\r\n }\r\n\r\n\r\n //var zindex = this.formatZ(this.getCSS(el,\"zIndex\"),cssPosition,parentStack.zIndex,el.parentNode);\r\n\r\n zindex = setZ( getCSS( el, \"zIndex\"), parentStack.zIndex );\r\n\r\n\r\n\r\n stack = {\r\n ctx: h2cRenderContext( docDim.width || w , docDim.height || h ),\r\n zIndex: zindex,\r\n opacity: opacity * parentStack.opacity,\r\n cssPosition: cssPosition\r\n };\r\n\r\n\r\n\r\n // TODO correct overflow for absolute content residing under a static position\r\n\r\n if (parentStack.clip){\r\n stack.clip = _html2canvas.Util.Extend( {}, parentStack.clip );\r\n //stack.clip = parentStack.clip;\r\n // stack.clip.height = stack.clip.height - parentStack.borders[2].width;\r\n }\r\n\r\n\r\n if ( options.useOverflow === true && /(hidden|scroll|auto)/.test(getCSS(el, \"overflow\")) === true && /(BODY)/i.test(el.nodeName) === false ){\r\n if (stack.clip){\r\n stack.clip = clipBounds(stack.clip, bounds);\r\n }else{\r\n stack.clip = bounds;\r\n }\r\n }\r\n\r\n\r\n stackLength = zindex.children.push(stack);\r\n\r\n ctx = zindex.children[stackLength-1].ctx;\r\n\r\n ctx.setVariable(\"globalAlpha\", stack.opacity);\r\n\r\n // draw element borders\r\n borders = renderBorders(el, ctx, bounds, false);\r\n stack.borders = borders;\r\n\r\n\r\n // let's modify clip area for child elements, so borders dont get overwritten\r\n\r\n /*\r\n if (stack.clip){\r\n stack.clip.width = stack.clip.width-(borders[1].width);\r\n stack.clip.height = stack.clip.height-(borders[2].width);\r\n }\r\n */\r\n if (ignoreElementsRegExp.test(el.nodeName) && options.iframeDefault !== \"transparent\"){\r\n if (options.iframeDefault === \"default\"){\r\n bgcolor = \"#efefef\";\r\n }else{\r\n bgcolor = options.iframeDefault;\r\n }\r\n }\r\n\r\n // draw base element bgcolor\r\n\r\n bgbounds = {\r\n left: x + borders[3].width,\r\n top: y + borders[0].width,\r\n width: w - (borders[1].width + borders[3].width),\r\n height: h - (borders[0].width + borders[2].width)\r\n };\r\n\r\n //if (this.withinBounds(stack.clip,bgbounds)){\r\n\r\n if (stack.clip){\r\n bgbounds = clipBounds(bgbounds, stack.clip);\r\n\r\n //}\r\n\r\n }\r\n\r\n\r\n if (bgbounds.height > 0 && bgbounds.width > 0){\r\n renderRect(\r\n ctx,\r\n bgbounds.left,\r\n bgbounds.top,\r\n bgbounds.width,\r\n bgbounds.height,\r\n bgcolor\r\n );\r\n\r\n renderBackground(el, bgbounds, ctx);\r\n }\r\n\r\n switch(el.nodeName){\r\n case \"IMG\":\r\n imgSrc = el.getAttribute('src');\r\n image = loadImage(imgSrc);\r\n if (image){\r\n\r\n paddingLeft = getCSSInt(el, 'paddingLeft');\r\n paddingTop = getCSSInt(el, 'paddingTop');\r\n paddingRight = getCSSInt(el, 'paddingRight');\r\n paddingBottom = getCSSInt(el, 'paddingBottom');\r\n\r\n\r\n renderImage(\r\n ctx,\r\n image,\r\n 0, //sx\r\n 0, //sy\r\n image.width, //sw\r\n image.height, //sh\r\n x + paddingLeft + borders[3].width, //dx\r\n y + paddingTop + borders[0].width, // dy\r\n bounds.width - (borders[1].width + borders[3].width + paddingLeft + paddingRight), //dw\r\n bounds.height - (borders[0].width + borders[2].width + paddingTop + paddingBottom) //dh\r\n );\r\n\r\n }else{\r\n h2clog(\"html2canvas: Error loading :\" + imgSrc);\r\n }\r\n break;\r\n case \"INPUT\":\r\n // TODO add all relevant type's, i.e. HTML5 new stuff\r\n // todo add support for placeholder attribute for browsers which support it\r\n if (/^(text|url|email|submit|button|reset)$/.test(el.type) && el.value.length > 0){\r\n\r\n renderFormValue(el, bounds, stack);\r\n\r\n\r\n /*\r\n this just doesn't work well enough\r\n\r\n this.newText(el,{\r\n nodeValue:el.value,\r\n splitText: function(){\r\n return this;\r\n },\r\n formValue:true\r\n },stack);\r\n */\r\n }\r\n break;\r\n case \"TEXTAREA\":\r\n if (el.value.length > 0){\r\n renderFormValue(el, bounds, stack);\r\n }\r\n break;\r\n case \"SELECT\":\r\n if (el.options.length > 0){\r\n renderFormValue(el, bounds, stack);\r\n }\r\n break;\r\n case \"LI\":\r\n renderListItem(el, stack, bgbounds);\r\n break;\r\n case \"CANVAS\":\r\n paddingLeft = getCSSInt(el, 'paddingLeft');\r\n paddingTop = getCSSInt(el, 'paddingTop');\r\n paddingRight = getCSSInt(el, 'paddingRight');\r\n paddingBottom = getCSSInt(el, 'paddingBottom');\r\n renderImage(\r\n ctx,\r\n el,\r\n 0, //sx\r\n 0, //sy\r\n el.width, //sw\r\n el.height, //sh\r\n x + paddingLeft + borders[3].width, //dx\r\n y + paddingTop + borders[0].width, // dy\r\n bounds.width - (borders[1].width + borders[3].width + paddingLeft + paddingRight), //dw\r\n bounds.height - (borders[0].width + borders[2].width + paddingTop + paddingBottom) //dh\r\n );\r\n break;\r\n }\r\n\r\n return zindex.children[stackLength - 1];\r\n }\r\n\r\n\r\n\r\n function parseElement (el, stack) {\r\n\r\n // skip hidden elements and their children\r\n if (getCSS(el, 'display') !== \"none\" && getCSS(el, 'visibility') !== \"hidden\") {\r\n\r\n stack = renderElement(el, stack) || stack;\r\n\r\n ctx = stack.ctx;\r\n\r\n if ( !ignoreElementsRegExp.test( el.nodeName ) ) {\r\n var elementChildren = _html2canvas.Util.Children( el ),\r\n i,\r\n node,\r\n childrenLen;\r\n for (i = 0, childrenLen = elementChildren.length; i < childrenLen; i+=1) {\r\n node = elementChildren[i];\r\n\r\n if ( node.nodeType === 1 ) {\r\n parseElement(node, stack);\r\n }else if ( node.nodeType === 3 ) {\r\n renderText(el, node, stack);\r\n }\r\n\r\n }\r\n\r\n }\r\n } \r\n }\r\n\r\n stack = renderElement(element, null);\r\n\r\n /*\r\n SVG powered HTML rendering, non-tainted canvas available from FF 11+ onwards\r\n */\r\n\r\n if ( support.svgRendering ) {\r\n (function( body ){\r\n var img = new Image(),\r\n size = docSize(),\r\n html = \"\";\r\n\r\n function parseDOM( el ) {\r\n var children = _html2canvas.Util.Children( el ),\r\n len = children.length,\r\n attr,\r\n a,\r\n alen,\r\n elm,\r\n i;\r\n for ( i = 0; i < len; i+=1 ) {\r\n elm = children[ i ];\r\n if ( elm.nodeType === 3 ) {\r\n // Text node\r\n\r\n html += elm.nodeValue.replace(/\\/g,\">\");\r\n } else if ( elm.nodeType === 1 ) {\r\n // Element\r\n if ( !/^(script|meta|title)$/.test(elm.nodeName.toLowerCase()) ) {\r\n\r\n html += \"<\" + elm.nodeName.toLowerCase();\r\n\r\n // add attributes\r\n if ( elm.hasAttributes() ) {\r\n attr = elm.attributes;\r\n alen = attr.length;\r\n for ( a = 0; a < alen; a+=1 ) {\r\n html += \" \" + attr[ a ].name + '=\"' + attr[ a ].value + '\"';\r\n }\r\n }\r\n\r\n\r\n html += '>';\r\n\r\n parseDOM( elm );\r\n\r\n\r\n html += \"\";\r\n }\r\n }\r\n\r\n }\r\n\r\n }\r\n\r\n parseDOM( body );\r\n img.src = [\r\n \"data:image/svg+xml,\",\r\n \"\",\r\n \"\",\r\n \"\",\r\n html.replace(/\\#/g,\"%23\"),\r\n \"\",\r\n \"\",\r\n \"\"\r\n ].join(\"\");\r\n\r\n\r\n\r\n\r\n img.onload = function() {\r\n stack.svgRender = img;\r\n };\r\n\r\n })( document.documentElement );\r\n\r\n }\r\n\r\n\r\n // parse every child element\r\n for (i = 0, children = element.children, childrenLen = children.length; i < childrenLen; i+=1){\r\n parseElement(children[i], stack);\r\n }\r\n\r\n\r\n stack.backgroundColor = getCSS( document.documentElement, \"backgroundColor\" );\r\n\r\n return stack;\r\n\r\n};\r\n\r\nfunction h2czContext(zindex) {\r\n return {\r\n zindex: zindex,\r\n children: []\r\n };\r\n}\r\n\r\n/*\r\n html2canvas v0.34 \r\n Copyright (c) 2011 Niklas von Hertzen. All rights reserved.\r\n http://www.twitter.com/niklasvh\r\n\r\n Released under MIT License\r\n */\r\n\r\n_html2canvas.Preload = function( options ) {\r\n\r\n var images = {\r\n numLoaded: 0, // also failed are counted here\r\n numFailed: 0,\r\n numTotal: 0,\r\n cleanupDone: false\r\n },\r\n pageOrigin,\r\n methods,\r\n i,\r\n count = 0,\r\n element = options.elements[0] || document.body,\r\n doc = element.ownerDocument,\r\n domImages = doc.images, // TODO probably should limit it to images present in the element only\r\n imgLen = domImages.length,\r\n link = doc.createElement(\"a\"),\r\n supportCORS = (function( img ){\r\n return (img.crossOrigin !== undefined);\r\n })(new Image()),\r\n timeoutTimer;\r\n\r\n link.href = window.location.href;\r\n pageOrigin = link.protocol + link.host;\r\n\r\n\r\n\r\n\r\n\r\n\r\n function isSameOrigin(url){\r\n link.href = url;\r\n link.href = link.href; // YES, BELIEVE IT OR NOT, that is required for IE9 - http://jsfiddle.net/niklasvh/2e48b/\r\n var origin = link.protocol + link.host;\r\n return (origin === pageOrigin);\r\n }\r\n\r\n function start(){\r\n h2clog(\"html2canvas: start: images: \" + images.numLoaded + \" / \" + images.numTotal + \" (failed: \" + images.numFailed + \")\");\r\n if (!images.firstRun && images.numLoaded >= images.numTotal){\r\n h2clog(\"Finished loading images: # \" + images.numTotal + \" (failed: \" + images.numFailed + \")\");\r\n\r\n if (typeof options.complete === \"function\"){\r\n options.complete(images);\r\n }\r\n\r\n }\r\n }\r\n\r\n // TODO modify proxy to serve images with CORS enabled, where available\r\n function proxyGetImage(url, img, imageObj){\r\n var callback_name,\r\n scriptUrl = options.proxy,\r\n script;\r\n\r\n link.href = url;\r\n url = link.href; // work around for pages with base href=\"\" set - WARNING: this may change the url\r\n\r\n callback_name = 'html2canvas_' + (count++);\r\n imageObj.callbackname = callback_name;\r\n\r\n if (scriptUrl.indexOf(\"?\") > -1) {\r\n scriptUrl += \"&\";\r\n } else {\r\n scriptUrl += \"?\";\r\n }\r\n scriptUrl += 'url=' + encodeURIComponent(url) + '&callback=' + callback_name;\r\n script = doc.createElement(\"script\");\r\n\r\n window[callback_name] = function(a){\r\n if (a.substring(0,6) === \"error:\"){\r\n imageObj.succeeded = false;\r\n images.numLoaded++;\r\n images.numFailed++;\r\n start();\r\n } else {\r\n setImageLoadHandlers(img, imageObj);\r\n img.src = a;\r\n }\r\n window[callback_name] = undefined; // to work with IE<9 // NOTE: that the undefined callback property-name still exists on the window object (for IE<9)\r\n try {\r\n delete window[callback_name]; // for all browser that support this\r\n } catch(ex) {}\r\n script.parentNode.removeChild(script);\r\n script = null;\r\n delete imageObj.script;\r\n delete imageObj.callbackname;\r\n };\r\n\r\n script.setAttribute(\"type\", \"text/javascript\");\r\n script.setAttribute(\"src\", scriptUrl);\r\n imageObj.script = script;\r\n window.document.body.appendChild(script);\r\n\r\n }\r\n\r\n function getImages (el) {\r\n\r\n\r\n\r\n // if (!this.ignoreRe.test(el.nodeName)){\r\n //\r\n \r\n var contents = _html2canvas.Util.Children(el),\r\n i,\r\n background_image,\r\n src,\r\n img,\r\n elNodeType = false;\r\n\r\n // Firefox fails with permission denied on pages with iframes\r\n try {\r\n var contentsLen = contents.length;\r\n for (i = 0; i < contentsLen; i+=1 ){\r\n // var ignRe = new RegExp(\"(\"+this.ignoreElements+\")\");\r\n // if (!ignRe.test(element.nodeName)){\r\n getImages(contents[i]);\r\n // }\r\n }\r\n }\r\n catch( e ) {}\r\n\r\n\r\n // }\r\n try {\r\n elNodeType = el.nodeType;\r\n } catch (ex) {\r\n elNodeType = false;\r\n h2clog(\"html2canvas: failed to access some element's nodeType - Exception: \" + ex.message);\r\n }\r\n\r\n if (elNodeType === 1 || elNodeType === undefined){\r\n\r\n // opera throws exception on external-content.html\r\n try {\r\n background_image = _html2canvas.Util.getCSS(el, 'backgroundImage');\r\n }catch(e) {\r\n h2clog(\"html2canvas: failed to get background-image - Exception: \" + e.message);\r\n }\r\n if ( background_image && background_image !== \"1\" && background_image !== \"none\" ) {\r\n\r\n // TODO add multi image background support\r\n\r\n if (/^(-webkit|-o|-moz|-ms|linear)-/.test( background_image )) {\r\n\r\n img = _html2canvas.Generate.Gradient( background_image, _html2canvas.Util.Bounds( el ) );\r\n\r\n if ( img !== undefined ){\r\n images[background_image] = {\r\n img: img,\r\n succeeded: true\r\n };\r\n images.numTotal++;\r\n images.numLoaded++;\r\n start();\r\n\r\n }\r\n\r\n } else {\r\n src = _html2canvas.Util.backgroundImage(background_image.match(/data:image\\/.*;base64,/i) ? background_image : background_image.split(\",\")[0]);\r\n methods.loadImage(src);\r\n }\r\n\r\n /*\r\n if (background_image && background_image !== \"1\" && background_image !== \"none\" && background_image.substring(0,7) !== \"-webkit\" && background_image.substring(0,3)!== \"-o-\" && background_image.substring(0,4) !== \"-moz\"){\r\n // TODO add multi image background support\r\n src = _html2canvas.Util.backgroundImage(background_image.split(\",\")[0]);\r\n methods.loadImage(src); */\r\n }\r\n }\r\n }\r\n\r\n function setImageLoadHandlers(img, imageObj) {\r\n img.onload = function() {\r\n if ( imageObj.timer !== undefined ) {\r\n // CORS succeeded\r\n window.clearTimeout( imageObj.timer );\r\n }\r\n\r\n images.numLoaded++;\r\n imageObj.succeeded = true;\r\n img.onerror = img.onload = null;\r\n start();\r\n };\r\n img.onerror = function() {\r\n\r\n if (img.crossOrigin === \"anonymous\") {\r\n // CORS failed\r\n window.clearTimeout( imageObj.timer );\r\n\r\n // let's try with proxy instead\r\n if ( options.proxy ) {\r\n var src = img.src;\r\n img = new Image();\r\n imageObj.img = img;\r\n img.src = src;\r\n\r\n proxyGetImage( img.src, img, imageObj );\r\n return;\r\n }\r\n }\r\n\r\n\r\n images.numLoaded++;\r\n images.numFailed++;\r\n imageObj.succeeded = false;\r\n img.onerror = img.onload = null;\r\n start();\r\n\r\n };\r\n\r\n // TODO Opera has no load/error event for SVG images\r\n\r\n // Opera ninja onload's cached images\r\n /*\r\n window.setTimeout(function(){\r\n if ( img.width !== 0 && imageObj.succeeded === undefined ) {\r\n img.onload();\r\n }\r\n }, 100); // needs a reflow for base64 encoded images? interestingly timeout of 0 doesn't work but 1 does.\r\n */\r\n }\r\n\r\n\r\n methods = {\r\n loadImage: function( src ) {\r\n var img, imageObj;\r\n if ( src && images[src] === undefined ) {\r\n img = new Image();\r\n if ( src.match(/data:image\\/.*;base64,/i) ) {\r\n img.src = src.replace(/url\\(['\"]{0,}|['\"]{0,}\\)$/ig, '');\r\n imageObj = images[src] = {\r\n img: img\r\n };\r\n images.numTotal++;\r\n setImageLoadHandlers(img, imageObj);\r\n } else if ( isSameOrigin( src ) || options.allowTaint === true ) {\r\n imageObj = images[src] = {\r\n img: img\r\n };\r\n images.numTotal++;\r\n setImageLoadHandlers(img, imageObj);\r\n img.src = src;\r\n } else if ( supportCORS && !options.allowTaint && options.useCORS ) {\r\n // attempt to load with CORS\r\n\r\n img.crossOrigin = \"anonymous\";\r\n imageObj = images[src] = {\r\n img: img\r\n };\r\n images.numTotal++;\r\n setImageLoadHandlers(img, imageObj);\r\n img.src = src;\r\n\r\n // work around for https://bugs.webkit.org/show_bug.cgi?id=80028\r\n img.customComplete = function () {\r\n if (!this.img.complete) {\r\n this.timer = window.setTimeout(this.img.customComplete, 100);\r\n } else {\r\n this.img.onerror();\r\n }\r\n }.bind(imageObj);\r\n img.customComplete();\r\n\r\n } else if ( options.proxy ) {\r\n imageObj = images[src] = {\r\n img: img\r\n };\r\n images.numTotal++;\r\n proxyGetImage( src, img, imageObj );\r\n }\r\n }\r\n\r\n },\r\n cleanupDOM: function(cause) {\r\n var img, src;\r\n if (!images.cleanupDone) {\r\n if (cause && typeof cause === \"string\") {\r\n h2clog(\"html2canvas: Cleanup because: \" + cause);\r\n } else {\r\n h2clog(\"html2canvas: Cleanup after timeout: \" + options.timeout + \" ms.\");\r\n }\r\n\r\n for (src in images) {\r\n if (images.hasOwnProperty(src)) {\r\n img = images[src];\r\n if (typeof img === \"object\" && img.callbackname && img.succeeded === undefined) {\r\n // cancel proxy image request\r\n window[img.callbackname] = undefined; // to work with IE<9 // NOTE: that the undefined callback property-name still exists on the window object (for IE<9)\r\n try {\r\n delete window[img.callbackname]; // for all browser that support this\r\n } catch(ex) {}\r\n if (img.script && img.script.parentNode) {\r\n img.script.setAttribute(\"src\", \"about:blank\"); // try to cancel running request\r\n img.script.parentNode.removeChild(img.script);\r\n }\r\n images.numLoaded++;\r\n images.numFailed++;\r\n h2clog(\"html2canvas: Cleaned up failed img: '\" + src + \"' Steps: \" + images.numLoaded + \" / \" + images.numTotal);\r\n }\r\n }\r\n }\r\n\r\n // cancel any pending requests\r\n if(window.stop !== undefined) {\r\n window.stop();\r\n } else if(document.execCommand !== undefined) {\r\n document.execCommand(\"Stop\", false);\r\n }\r\n if (document.close !== undefined) {\r\n document.close();\r\n }\r\n images.cleanupDone = true;\r\n if (!(cause && typeof cause === \"string\")) {\r\n start();\r\n }\r\n }\r\n },\r\n renderingDone: function() {\r\n if (timeoutTimer) {\r\n window.clearTimeout(timeoutTimer);\r\n }\r\n }\r\n\r\n };\r\n\r\n if (options.timeout > 0) {\r\n timeoutTimer = window.setTimeout(methods.cleanupDOM, options.timeout);\r\n }\r\n h2clog('html2canvas: Preload starts: finding background-images');\r\n images.firstRun = true;\r\n\r\n getImages( element );\r\n\r\n h2clog('html2canvas: Preload: Finding images');\r\n // load images\r\n for (i = 0; i < imgLen; i+=1){\r\n methods.loadImage( domImages[i].getAttribute( \"src\" ) );\r\n }\r\n\r\n images.firstRun = false;\r\n h2clog('html2canvas: Preload: Done.');\r\n if ( images.numTotal === images.numLoaded ) {\r\n start();\r\n }\r\n\r\n return methods;\r\n\r\n};\r\n\r\n\r\n\r\n\r\n/*\r\n html2canvas v0.34 \r\n Copyright (c) 2011 Niklas von Hertzen. All rights reserved.\r\n http://www.twitter.com/niklasvh\r\n\r\n Released under MIT License\r\n*/\r\nfunction h2cRenderContext(width, height) {\r\n var storage = [];\r\n return {\r\n storage: storage,\r\n width: width,\r\n height: height,\r\n fillRect: function () {\r\n storage.push({\r\n type: \"function\",\r\n name: \"fillRect\",\r\n 'arguments': arguments\r\n });\r\n },\r\n drawImage: function () {\r\n storage.push({\r\n type: \"function\",\r\n name: \"drawImage\",\r\n 'arguments': arguments\r\n });\r\n },\r\n fillText: function () {\r\n storage.push({\r\n type: \"function\",\r\n name: \"fillText\",\r\n 'arguments': arguments\r\n });\r\n },\r\n setVariable: function (variable, value) {\r\n storage.push({\r\n type: \"variable\",\r\n name: variable,\r\n 'arguments': value\r\n });\r\n }\r\n };\r\n}\r\n\r\n/*\r\n html2canvas v0.34 \r\n Copyright (c) 2011 Niklas von Hertzen. All rights reserved.\r\n http://www.twitter.com/niklasvh\r\n\r\n Released under MIT License\r\n*/\r\n_html2canvas.Renderer = function(parseQueue, options){\r\n\r\n\r\n var queue = [];\r\n\r\n function sortZ(zStack){\r\n var subStacks = [],\r\n stackValues = [],\r\n zStackChildren = zStack.children,\r\n s,\r\n i,\r\n stackLen,\r\n zValue,\r\n zLen,\r\n stackChild,\r\n b,\r\n subStackLen;\r\n\r\n\r\n for (s = 0, zLen = zStackChildren.length; s < zLen; s+=1){\r\n\r\n stackChild = zStackChildren[s];\r\n\r\n if (stackChild.children && stackChild.children.length > 0){\r\n subStacks.push(stackChild);\r\n stackValues.push(stackChild.zindex);\r\n }else{\r\n queue.push(stackChild);\r\n }\r\n\r\n }\r\n\r\n stackValues.sort(function(a, b) {\r\n return a - b;\r\n });\r\n\r\n for (i = 0, stackLen = stackValues.length; i < stackLen; i+=1){\r\n zValue = stackValues[i];\r\n for (b = 0, subStackLen = subStacks.length; b <= subStackLen; b+=1){\r\n\r\n if (subStacks[b].zindex === zValue){\r\n stackChild = subStacks.splice(b, 1);\r\n sortZ(stackChild[0]);\r\n break;\r\n\r\n }\r\n }\r\n }\r\n\r\n }\r\n\r\n\r\n sortZ(parseQueue.zIndex);\r\n if ( typeof options._renderer._create !== \"function\" ) {\r\n throw new Error(\"Invalid renderer defined\");\r\n }\r\n return options._renderer._create( parseQueue, options, document, queue, _html2canvas );\r\n\r\n};\r\n\r\n/*\r\n html2canvas v0.34 \r\n Copyright (c) 2011 Niklas von Hertzen. All rights reserved.\r\n http://www.twitter.com/niklasvh\r\n\r\n Released under MIT License\r\n*/\r\n\r\n\r\nhtml2canvas = function( elements, opts ) {\r\n\r\n var queue,\r\n canvas,\r\n options = {\r\n // general\r\n logging: false,\r\n elements: elements,\r\n\r\n // preload options\r\n proxy: \"http://html2canvas.appspot.com/\",\r\n timeout: 0, // no timeout\r\n useCORS: false, // try to load images as CORS (where available), before falling back to proxy\r\n allowTaint: false, // whether to allow images to taint the canvas, won't need proxy if set to true\r\n\r\n // parse options\r\n svgRendering: false, // use svg powered rendering where available (FF11+)\r\n iframeDefault: \"default\",\r\n ignoreElements: \"IFRAME|OBJECT|PARAM\",\r\n useOverflow: true,\r\n letterRendering: false,\r\n\r\n // render options\r\n\r\n flashcanvas: undefined, // path to flashcanvas\r\n width: null,\r\n height: null,\r\n taintTest: true, // do a taint test with all images before applying to canvas\r\n\t\trenderer: \"Canvas\"\r\n }, renderer;\r\n\r\n options = _html2canvas.Util.Extend(opts, options);\r\n\r\n\tif (typeof options.renderer === \"string\" && _html2canvas.Renderer[options.renderer] !== undefined) {\r\n\t\toptions._renderer = _html2canvas.Renderer[options.renderer]( options );\r\n\t} else if (typeof options.renderer === \"function\") {\r\n\t\toptions._renderer = options.renderer( options );\r\n\t} else {\r\n\t\tthrow(\"Unknown renderer\");\r\n\t}\r\n\r\n _html2canvas.logging = options.logging;\r\n options.complete = function( images ) {\r\n\r\n if (typeof options.onpreloaded === \"function\") {\r\n if ( options.onpreloaded( images ) === false ) {\r\n return;\r\n }\r\n }\r\n queue = _html2canvas.Parse( images, options );\r\n\r\n if (typeof options.onparsed === \"function\") {\r\n if ( options.onparsed( queue ) === false ) {\r\n return;\r\n }\r\n }\r\n\r\n canvas = _html2canvas.Renderer( queue, options );\r\n\r\n if (typeof options.onrendered === \"function\") {\r\n options.onrendered( canvas );\r\n }\r\n\r\n\r\n };\r\n\r\n // for pages without images, we still want this to be async, i.e. return methods before executing\r\n window.setTimeout( function(){\r\n _html2canvas.Preload( options );\r\n }, 0 );\r\n\r\n return {\r\n render: function( queue, opts ) {\r\n return _html2canvas.Renderer( queue, _html2canvas.Util.Extend(opts, options) );\r\n },\r\n parse: function( images, opts ) {\r\n return _html2canvas.Parse( images, _html2canvas.Util.Extend(opts, options) );\r\n },\r\n preload: function( opts ) {\r\n return _html2canvas.Preload( _html2canvas.Util.Extend(opts, options) );\r\n },\r\n log: h2clog\r\n };\r\n};\r\n\r\nhtml2canvas.log = h2clog; // for renderers\r\nhtml2canvas.Renderer = {\r\n Canvas: undefined // We are assuming this will be used\r\n};\r\n\r\n/*\r\n html2canvas v0.34 \r\n Copyright (c) 2011 Niklas von Hertzen. All rights reserved.\r\n http://www.twitter.com/niklasvh\r\n\r\n Released under MIT License\r\n*/\r\n\r\n\r\n_html2canvas.Renderer.Canvas = function( options ) {\r\n\r\n options = options || {};\r\n\r\n var doc = document,\r\n canvas = options.canvas || doc.createElement('canvas'),\r\n usingFlashcanvas = false,\r\n _createCalled = false,\r\n canvasReadyToDraw = false,\r\n methods,\r\n flashMaxSize = 2880; // flash bitmap limited to 2880x2880px // http://stackoverflow.com/questions/2033792/argumenterror-error-2015-invalid-bitmapdata\r\n\r\n\r\n if (canvas.getContext){\r\n h2clog(\"html2canvas: Renderer: using canvas renderer\");\r\n canvasReadyToDraw = true;\r\n } else if ( options.flashcanvas !== undefined ){\r\n usingFlashcanvas = true;\r\n h2clog(\"html2canvas: Renderer: canvas not available, using flashcanvas\");\r\n var script = doc.createElement(\"script\");\r\n script.src = options.flashcanvas;\r\n\r\n script.onload = (function(script, func){\r\n var intervalFunc;\r\n\r\n if (script.onload === undefined) {\r\n // IE lack of support for script onload\r\n\r\n if( script.onreadystatechange !== undefined ) {\r\n\r\n intervalFunc = function() {\r\n if (script.readyState !== \"loaded\" && script.readyState !== \"complete\") {\r\n window.setTimeout( intervalFunc, 250 );\r\n\r\n } else {\r\n // it is loaded\r\n func();\r\n\r\n }\r\n\r\n };\r\n\r\n window.setTimeout( intervalFunc, 250 );\r\n\r\n } else {\r\n h2clog(\"html2canvas: Renderer: Can't track when flashcanvas is loaded\");\r\n }\r\n\r\n } else {\r\n return func;\r\n }\r\n\r\n })(script, function(){\r\n\r\n if (typeof window.FlashCanvas !== \"undefined\") {\r\n h2clog(\"html2canvas: Renderer: Flashcanvas initialized\");\r\n window.FlashCanvas.initElement( canvas );\r\n\r\n canvasReadyToDraw = true;\r\n if ( _createCalled !== false ) {\r\n methods._create.apply( null, _createCalled );\r\n }\r\n }\r\n });\r\n\r\n doc.body.appendChild( script );\r\n\r\n }\r\n\r\n methods = {\r\n _create: function( zStack, options, doc, queue, _html2canvas ) {\r\n\r\n if ( !canvasReadyToDraw ) {\r\n _createCalled = arguments;\r\n return canvas;\r\n }\r\n\r\n var ctx = canvas.getContext(\"2d\"),\r\n storageContext,\r\n i,\r\n queueLen,\r\n a,\r\n newCanvas,\r\n bounds,\r\n testCanvas = document.createElement(\"canvas\"),\r\n hasCTX = ( testCanvas.getContext !== undefined ),\r\n storageLen,\r\n renderItem,\r\n testctx = ( hasCTX ) ? testCanvas.getContext(\"2d\") : {},\r\n safeImages = [],\r\n fstyle;\r\n\r\n canvas.width = canvas.style.width = (!usingFlashcanvas) ? options.width || zStack.ctx.width : Math.min(flashMaxSize, (options.width || zStack.ctx.width) );\r\n canvas.height = canvas.style.height = (!usingFlashcanvas) ? options.height || zStack.ctx.height : Math.min(flashMaxSize, (options.height || zStack.ctx.height) );\r\n\r\n fstyle = ctx.fillStyle;\r\n ctx.fillStyle = zStack.backgroundColor;\r\n ctx.fillRect(0, 0, canvas.width, canvas.height);\r\n ctx.fillStyle = fstyle;\r\n\r\n if ( options.svgRendering && zStack.svgRender !== undefined ) {\r\n // TODO: enable async rendering to support this\r\n ctx.drawImage( zStack.svgRender, 0, 0 );\r\n } else {\r\n for ( i = 0, queueLen = queue.length; i < queueLen; i+=1 ) {\r\n\r\n storageContext = queue.splice(0, 1)[0];\r\n storageContext.canvasPosition = storageContext.canvasPosition || {};\r\n\r\n //this.canvasRenderContext(storageContext,parentctx);\r\n\r\n // set common settings for canvas\r\n ctx.textBaseline = \"bottom\";\r\n\r\n if (storageContext.clip){\r\n ctx.save();\r\n ctx.beginPath();\r\n // console.log(storageContext);\r\n ctx.rect(storageContext.clip.left, storageContext.clip.top, storageContext.clip.width, storageContext.clip.height);\r\n ctx.clip();\r\n\r\n }\r\n\r\n if (storageContext.ctx.storage){\r\n\r\n for (a = 0, storageLen = storageContext.ctx.storage.length; a < storageLen; a+=1){\r\n\r\n renderItem = storageContext.ctx.storage[a];\r\n\r\n\r\n switch(renderItem.type){\r\n case \"variable\":\r\n ctx[renderItem.name] = renderItem['arguments'];\r\n break;\r\n case \"function\":\r\n if (renderItem.name === \"fillRect\") {\r\n\r\n if (!usingFlashcanvas || renderItem['arguments'][0] + renderItem['arguments'][2] < flashMaxSize && renderItem['arguments'][1] + renderItem['arguments'][3] < flashMaxSize) {\r\n ctx.fillRect.apply( ctx, renderItem['arguments'] );\r\n }\r\n }else if(renderItem.name === \"fillText\") {\r\n if (!usingFlashcanvas || renderItem['arguments'][1] < flashMaxSize && renderItem['arguments'][2] < flashMaxSize) {\r\n ctx.fillText.apply( ctx, renderItem['arguments'] );\r\n }\r\n }else if(renderItem.name === \"drawImage\") {\r\n\r\n if (renderItem['arguments'][8] > 0 && renderItem['arguments'][7]){\r\n if ( hasCTX && options.taintTest ) {\r\n if ( safeImages.indexOf( renderItem['arguments'][ 0 ].src ) === -1 ) {\r\n testctx.drawImage( renderItem['arguments'][ 0 ], 0, 0 );\r\n try {\r\n testctx.getImageData( 0, 0, 1, 1 );\r\n } catch(e) {\r\n testCanvas = doc.createElement(\"canvas\");\r\n testctx = testCanvas.getContext(\"2d\");\r\n continue;\r\n }\r\n\r\n safeImages.push( renderItem['arguments'][ 0 ].src );\r\n\r\n }\r\n }\r\n ctx.drawImage.apply( ctx, renderItem['arguments'] );\r\n }\r\n }\r\n\r\n\r\n break;\r\n default:\r\n\r\n }\r\n\r\n }\r\n\r\n }\r\n if (storageContext.clip){\r\n ctx.restore();\r\n }\r\n\r\n }\r\n }\r\n\r\n h2clog(\"html2canvas: Renderer: Canvas renderer done - returning canvas obj\");\r\n\r\n queueLen = options.elements.length;\r\n\r\n if (queueLen === 1) {\r\n if (typeof options.elements[ 0 ] === \"object\" && options.elements[ 0 ].nodeName !== \"BODY\" && usingFlashcanvas === false) {\r\n // crop image to the bounds of selected (single) element\r\n bounds = _html2canvas.Util.Bounds( options.elements[ 0 ] );\r\n newCanvas = doc.createElement('canvas');\r\n newCanvas.width = bounds.width;\r\n newCanvas.height = bounds.height;\r\n ctx = newCanvas.getContext(\"2d\");\r\n\r\n ctx.drawImage( canvas, bounds.left, bounds.top, bounds.width, bounds.height, 0, 0, bounds.width, bounds.height );\r\n canvas = null;\r\n return newCanvas;\r\n }\r\n } /*else {\r\n // TODO clip and resize multiple elements\r\n\r\n for ( i = 0; i < queueLen; i+=1 ) {\r\n if (options.elements[ i ] instanceof Element) {\r\n\r\n }\r\n\r\n }\r\n }\r\n */\r\n\r\n\r\n\r\n return canvas;\r\n }\r\n };\r\n\r\n return methods;\r\n\r\n};\r\n\r\nwindow.html2canvas = html2canvas;\r\n}(window, document));\r\n\r\n" }, { "path": "javascripts/main.js", "content": "/*global $,glitch,glitchReplace */\n$(function(){\n\tvar headerContainer = $(\"#glitch-header\").wrap(\"
\").parent();\n\tvar glitchHeader = function(){\n\t\tglitch.transition(headerContainer.children(), $(\"#glitch-header\").clone(), {\n\t\t\teffect:\"slide\",\n\t\t\tdelay: 1000,\n\t\t\tcomplete: function() {\n\t\t\t\tsetTimeout(glitchHeader, 1000);\n\t\t\t}\n\t\t});\n\t};\n\tglitchHeader();\n});" }, { "path": "nojquery.html", "content": "\n\n \n \n \n\n \n \n \n\n Glitch.js by sjhewitt\n\n \n \n \n\n \n\n
\n
\n
\n

Glitch.js

\n

Glitched DOM elements

\n
\n
\n\n\t
\n\t
\n\t\t

Glitch an image

\n\t\t\n\t\t
\n\t\t
\n\t
\n\n\t\n\n\n\t
\n\t\t

Glitch some HTML elements

\n\t\t
\n\t\t\t

Header Element

\n\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t\t
    \n\t\t\t\t
  • List Element 1
    • \n\t\t\t\t
  • List Element 2
    • \n\t\t\t\t
  • List Element 3
    • \n\t\t\t\t
  • List Element 4
    • \n\t\t\t
\n\t\t\t\n\t\t
\n\t\t
\n\t\t
\n\t
\n\t\n\n
\n
\n\n" }, { "path": "params.json", "content": "{\"body\":\"### Welcome to Glitch.js\\r\\nMore info coming soon\",\"tagline\":\"Glitch transition effect\",\"note\":\"Don't delete this file! It's used internally to help with page regeneration.\",\"google\":\"\",\"name\":\"Glitch.js\"}" }, { "path": "stylesheets/pygment_trac.css", "content": ".highlight .c { color: #999988; font-style: italic } /* Comment */\n.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */\n.highlight .k { font-weight: bold } /* Keyword */\n.highlight .o { font-weight: bold } /* Operator */\n.highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */\n.highlight .cp { color: #999999; font-weight: bold } /* Comment.Preproc */\n.highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */\n.highlight .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */\n.highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */\n.highlight .gd .x { color: #000000; background-color: #ffaaaa } /* Generic.Deleted.Specific */\n.highlight .ge { font-style: italic } /* Generic.Emph */\n.highlight .gr { color: #aa0000 } /* Generic.Error */\n.highlight .gh { color: #999999 } /* Generic.Heading */\n.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */\n.highlight .gi .x { color: #000000; background-color: #aaffaa } /* Generic.Inserted.Specific */\n.highlight .go { color: #888888 } /* Generic.Output */\n.highlight .gp { color: #555555 } /* Generic.Prompt */\n.highlight .gs { font-weight: bold } /* Generic.Strong */\n.highlight .gu { color: #800080; font-weight: bold; } /* Generic.Subheading */\n.highlight .gt { color: #aa0000 } /* Generic.Traceback */\n.highlight .kc { font-weight: bold } /* Keyword.Constant */\n.highlight .kd { font-weight: bold } /* Keyword.Declaration */\n.highlight .kn { font-weight: bold } /* Keyword.Namespace */\n.highlight .kp { font-weight: bold } /* Keyword.Pseudo */\n.highlight .kr { font-weight: bold } /* Keyword.Reserved */\n.highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */\n.highlight .m { color: #009999 } /* Literal.Number */\n.highlight .s { color: #d14 } /* Literal.String */\n.highlight .na { color: #008080 } /* Name.Attribute */\n.highlight .nb { color: #0086B3 } /* Name.Builtin */\n.highlight .nc { color: #445588; font-weight: bold } /* Name.Class */\n.highlight .no { color: #008080 } /* Name.Constant */\n.highlight .ni { color: #800080 } /* Name.Entity */\n.highlight .ne { color: #990000; font-weight: bold } /* Name.Exception */\n.highlight .nf { color: #990000; font-weight: bold } /* Name.Function */\n.highlight .nn { color: #555555 } /* Name.Namespace */\n.highlight .nt { color: #CBDFFF } /* Name.Tag */\n.highlight .nv { color: #008080 } /* Name.Variable */\n.highlight .ow { font-weight: bold } /* Operator.Word */\n.highlight .w { color: #bbbbbb } /* Text.Whitespace */\n.highlight .mf { color: #009999 } /* Literal.Number.Float */\n.highlight .mh { color: #009999 } /* Literal.Number.Hex */\n.highlight .mi { color: #009999 } /* Literal.Number.Integer */\n.highlight .mo { color: #009999 } /* Literal.Number.Oct */\n.highlight .sb { color: #d14 } /* Literal.String.Backtick */\n.highlight .sc { color: #d14 } /* Literal.String.Char */\n.highlight .sd { color: #d14 } /* Literal.String.Doc */\n.highlight .s2 { color: #d14 } /* Literal.String.Double */\n.highlight .se { color: #d14 } /* Literal.String.Escape */\n.highlight .sh { color: #d14 } /* Literal.String.Heredoc */\n.highlight .si { color: #d14 } /* Literal.String.Interpol */\n.highlight .sx { color: #d14 } /* Literal.String.Other */\n.highlight .sr { color: #009926 } /* Literal.String.Regex */\n.highlight .s1 { color: #d14 } /* Literal.String.Single */\n.highlight .ss { color: #990073 } /* Literal.String.Symbol */\n.highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */\n.highlight .vc { color: #008080 } /* Name.Variable.Class */\n.highlight .vg { color: #008080 } /* Name.Variable.Global */\n.highlight .vi { color: #008080 } /* Name.Variable.Instance */\n.highlight .il { color: #009999 } /* Literal.Number.Integer.Long */\n\n.type-csharp .highlight .k { color: #0000FF }\n.type-csharp .highlight .kt { color: #0000FF }\n.type-csharp .highlight .nf { color: #000000; font-weight: normal }\n.type-csharp .highlight .nc { color: #2B91AF }\n.type-csharp .highlight .nn { color: #000000 }\n.type-csharp .highlight .s { color: #A31515 }\n.type-csharp .highlight .sc { color: #A31515 }\n" }, { "path": "stylesheets/stylesheet.css", "content": "body {\n margin: 0;\n padding: 0;\n background: #151515 url(\"../images/bkg.png\") 0 0;\n color: #eaeaea;\n font: 16px;\n line-height: 1.5;\n font-family: Monaco, \"Bitstream Vera Sans Mono\", \"Lucida Console\", Terminal, monospace;\n}\n\n/* General & 'Reset' Stuff */\n\n.container {\n width: 90%;\n max-width: 600px;\n margin: 0 auto;\n}\n\nsection {\n display: block;\n margin: 0 0 20px 0;\n}\n\nh1, h2, h3, h4, h5, h6 {\n margin: 0 0 20px;\n}\n\nli {\n line-height: 1.4 ;\n}\n\n/* Header,
\n header - container\n h1 - project name\n h2 - project description\n*/\n\n#glitch-header {\n background: #151515 url(\"../images/bkg.png\") 0 0;\n margin-bottom: 20px;\n}\n\nheader {\n background: rgba(0, 0, 0, 0.1);\n width: 100%;\n border-bottom: 1px dashed #b5e853;\n padding: 20px 0;\n margin: 0 0 40px 0;\n}\n\nheader h1 {\n font-size: 30px;\n line-height: 1.5;\n margin: 0;\n font-weight: bold;\n font-family: Monaco, \"Bitstream Vera Sans Mono\", \"Lucida Console\", Terminal, monospace;\n color: #b5e853;\n text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1),\n 0 0 5px rgba(181, 232, 83, 0.1),\n 0 0 10px rgba(181, 232, 83, 0.1);\n letter-spacing: -1px;\n -webkit-font-smoothing: antialiased;\n}\n\n header h1 a {\n color: #b5e853;\n text-decoration: none;\n }\n\nheader h1:before {\n content: \"./ \";\n font-size: 24px;\n}\n\nheader h2 {\n font-size: 18px;\n font-weight: 300;\n color: #666;\n}\n\n#downloads .btn {\n display: inline-block;\n text-align: center;\n margin: 0;\n}\n\n/* Main Content\n*/\n\n#main_content {\n width: 100%;\n -webkit-font-smoothing: antialiased;\n}\nsection img {\n max-width: 100%\n}\n\nh1, h2, h3, h4, h5, h6 {\n font-weight: normal;\n font-family: Monaco, \"Bitstream Vera Sans Mono\", \"Lucida Console\", Terminal, monospace;\n color: #b5e853;\n letter-spacing: -0.03em;\n text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1),\n 0 0 5px rgba(181, 232, 83, 0.1),\n 0 0 10px rgba(181, 232, 83, 0.1);\n}\n\n#main_content h1 {\n font-size: 30px;\n}\n\n#main_content h2 {\n font-size: 24px;\n}\n\n#main_content h3 {\n font-size: 18px;\n}\n\n#main_content h4 {\n font-size: 14px;\n}\n\n#main_content h5 {\n font-size: 12px;\n text-transform: uppercase;\n margin: 0 0 5px 0;\n}\n\n#main_content h6 {\n font-size: 12px;\n text-transform: uppercase;\n color: #999;\n margin: 0 0 5px 0;\n}\n\ndt {\n font-style: italic;\n font-weight: bold;\n}\n\nul li {\n list-style: none;\n}\n\nul li:before {\n content: \">>\";\n font-family: Monaco, \"Bitstream Vera Sans Mono\", \"Lucida Console\", Terminal, monospace;\n font-size: 13px;\n color: #b5e853;\n margin-left: -37px;\n margin-right: 21px;\n line-height: 16px;\n}\n\nblockquote {\n color: #aaa;\n padding-left: 10px;\n border-left: 1px dotted #666;\n}\n\npre {\n background: rgba(0, 0, 0, 0.9);\n border: 1px solid rgba(255, 255, 255, 0.15);\n padding: 10px;\n font-size: 14px;\n color: #b5e853;\n border-radius: 2px;\n -moz-border-radius: 2px;\n -webkit-border-radius: 2px;\n text-wrap: normal;\n overflow: auto;\n overflow-y: hidden;\n}\n\ntable {\n width: 100%;\n margin: 0 0 20px 0;\n}\n\nth {\n text-align: left;\n border-bottom: 1px dashed #b5e853;\n padding: 5px 10px;\n}\n\ntd {\n padding: 5px 10px;\n}\n\nhr {\n height: 0;\n border: 0;\n border-bottom: 1px dashed #b5e853;\n color: #b5e853;\n}\n\n/* Buttons\n*/\n\n.btn {\n display: inline-block;\n background: -webkit-linear-gradient(top, rgba(40, 40, 40, 0.3), rgba(35, 35, 35, 0.3) 50%, rgba(10, 10, 10, 0.3) 50%, rgba(0, 0, 0, 0.3));\n padding: 8px 18px;\n border-radius: 50px;\n border: 2px solid rgba(0, 0, 0, 0.7);\n border-bottom: 2px solid rgba(0, 0, 0, 0.7);\n border-top: 2px solid rgba(0, 0, 0, 1);\n color: rgba(255, 255, 255, 0.8);\n font-family: Helvetica, Arial, sans-serif;\n font-weight: bold;\n font-size: 13px;\n text-decoration: none;\n text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.75);\n box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);\n}\n\n.btn:hover {\n background: -webkit-linear-gradient(top, rgba(40, 40, 40, 0.6), rgba(35, 35, 35, 0.6) 50%, rgba(10, 10, 10, 0.8) 50%, rgba(0, 0, 0, 0.8));\n}\n\n.btn .icon {\n display: inline-block;\n width: 16px;\n height: 16px;\n margin: 1px 8px 0 0;\n float: left;\n}\n\n.btn-github .icon {\n opacity: 0.6;\n background: url(\"../images/blacktocat.png\") 0 0 no-repeat;\n}\n\n/* Links\n a, a:hover, a:visited\n*/\n\na {\n color: #63c0f5;\n text-shadow: 0 0 5px rgba(104, 182, 255, 0.5);\n}\n\n/* Clearfix */\n\n.cf:before, .cf:after {\n content:\"\";\n display:table;\n}\n\n.cf:after {\n clear:both;\n}\n\n.cf {\n zoom:1;\n}\n\n.example {\n border-bottom: 1px solid #B5E853;\n padding-bottom: 10px;\n margin-bottom: 10px;\n}\n\n.middle {\n text-align: center;\n}\n.middle .btn {\n cursor: pointer;\n text-transform: uppercase;\n font-size: 18px;\n}" } ]