+
+
+
+ Toolbox
+
+
+
+ Inspector
+ Config
+ border-radius: 1em; /* Standard */
+-moz-border-radius: 1em; /* Gecko */
+-webkit-border-radius: 1em; /* WebKit */
+ border-radius: 1em;
+-moz-border-radius: 1em;
+-webkit-border-radius: 1em;
+box-shadow: #999 0 .25em .5em;
+-webkit-box-shadow: #999 0 .25em .5em;
+-moz-box-shadow: #999 0 .25em .5em;
+ border-radius: 1em;
+-moz-border-radius: 1em;
+-webkit-border-radius: 1em;
+box-shadow: #999 0 .25em .5em;
+-webkit-box-shadow: #999 0 .25em .5em;
+-moz-box-shadow: #999 0 .25em .5em;
+background: #9CF; /* Fallback */
+background: -webkit-gradient(linear, 0 0, 0 100%, from(#9CF), to(#03C));
+background: -moz-linear-gradient(#9CF, #03C);
+background: linear-gradient(#9CF, #03C);
+-pie-background: linear-gradient(#9CF, #03C);
+ border-radius: 1em;
+-moz-border-radius: 1em;
+-webkit-border-radius: 1em;
+box-shadow: #999 0 .25em .5em;
+-webkit-box-shadow: #999 0 .25em .5em;
+-moz-box-shadow: #999 0 .25em .5em;
+background: url(icon-ie.png) no-repeat 50% 0 #FFF; /* Fallback */
+background: url(icon-ie.png) no-repeat 50% 0,
+ url(icon-firefox.png) no-repeat 0 0,
+ url(icon-chrome.png) no-repeat 100% 0,
+ url(icon-safari.png) no-repeat 0 100%,
+ url(icon-opera.png) no-repeat 100% 100% #FFF;
+-pie-background: ...
+ border-image: url(border2.png) 15 fill stretch;
+-moz-border-image: url(border2.png) 15 stretch;
+-webkit-border-image: url(border2.png) 15 stretch;
+border-width: 15px;
+ Rainbowzzzz!
+ + + \ No newline at end of file diff --git a/demos/prefixfree/prefixfree.min.js b/demos/prefixfree/prefixfree.min.js new file mode 100644 index 0000000..94fc408 --- /dev/null +++ b/demos/prefixfree/prefixfree.min.js @@ -0,0 +1,5 @@ +/** + * StyleFix 1.0.3 & PrefixFree 1.0.7 + * @author Lea Verou + * MIT license + */(function(){function t(e,t){return[].slice.call((t||document).querySelectorAll(e))}if(!window.addEventListener)return;var e=window.StyleFix={link:function(t){try{if(t.rel!=="stylesheet"||t.hasAttribute("data-noprefix"))return}catch(n){return}var r=t.href||t.getAttribute("data-href"),i=r.replace(/[^\/]+$/,""),s=t.parentNode,o=new XMLHttpRequest,u;o.onreadystatechange=function(){o.readyState===4&&u()};u=function(){var n=o.responseText;if(n&&t.parentNode&&(!o.status||o.status<400||o.status>600)){n=e.fix(n,!0,t);if(i){n=n.replace(/url\(\s*?((?:"|')?)(.+?)\1\s*?\)/gi,function(e,t,n){return/^([a-z]{3,10}:|\/|#)/i.test(n)?e:'url("'+i+n+'")'});var r=i.replace(/([\\\^\$*+[\]?{}.=!:(|)])/g,"\\$1");n=n.replace(RegExp("\\b(behavior:\\s*?url\\('?\"?)"+r,"gi"),"$1")}var u=document.createElement("style");u.textContent=n;u.media=t.media;u.disabled=t.disabled;u.setAttribute("data-href",t.getAttribute("href"));s.insertBefore(u,t);s.removeChild(t);u.media=t.media}};try{o.open("GET",r);o.send(null)}catch(n){if(typeof XDomainRequest!="undefined"){o=new XDomainRequest;o.onerror=o.onprogress=function(){};o.onload=u;o.open("GET",r);o.send(null)}}t.setAttribute("data-inprogress","")},styleElement:function(t){if(t.hasAttribute("data-noprefix"))return;var n=t.disabled;t.textContent=e.fix(t.textContent,!0,t);t.disabled=n},styleAttribute:function(t){var n=t.getAttribute("style");n=e.fix(n,!1,t);t.setAttribute("style",n)},process:function(){t('link[rel="stylesheet"]:not([data-inprogress])').forEach(StyleFix.link);t("style").forEach(StyleFix.styleElement);t("[style]").forEach(StyleFix.styleAttribute)},register:function(t,n){(e.fixers=e.fixers||[]).splice(n===undefined?e.fixers.length:n,0,t)},fix:function(t,n,r){for(var i=0;i+ * For a fairly comprehensive set of languages see the + * README + * file that came with this source. At a minimum, the lexer should work on a + * number of languages including C and friends, Java, Python, Bash, SQL, HTML, + * XML, CSS, Javascript, and Makefiles. It works passably on Ruby, PHP and Awk + * and a subset of Perl, but, because of commenting conventions, doesn't work on + * Smalltalk, Lisp-like, or CAML-like languages without an explicit lang class. + *
+ * Usage:
} and {@code } tags in your source with
+ * {@code class=prettyprint.}
+ * You can also use the (html deprecated) {@code } tag, but the pretty
+ * printer needs to do more substantial DOM manipulations to support that, so
+ * some css styles may not be preserved.
+ * </ol>
+ * That's it. I wanted to keep the API as simple as possible, so there's no
+ * need to specify which language the code is in, but if you wish, you can add
+ * another class to the {@code <pre>} or {@code <code>} element to specify the
+ * language, as in {@code <pre class="prettyprint lang-java">}. Any class that
+ * starts with "lang-" followed by a file extension, specifies the file type.
+ * See the "lang-*.js" files in this directory for code that implements
+ * per-language file handlers.
+ * <p>
+ * Change log:<br>
+ * cbeust, 2006/08/22
+ * <blockquote>
+ * Java annotations (start with "@") are now captured as literals ("lit")
+ * </blockquote>
+ * @requires console
+ */
+
+// JSLint declarations
+/*global console, document, navigator, setTimeout, window */
+
+/**
+ * Split {@code prettyPrint} into multiple timeouts so as not to interfere with
+ * UI events.
+ * If set to {@code false}, {@code prettyPrint()} is synchronous.
+ */
+window['PR_SHOULD_USE_CONTINUATION'] = true;
+
+/** the number of characters between tab columns */
+window['PR_TAB_WIDTH'] = 8;
+
+/** Contains functions for creating and registering new language handlers.
+ * @type {Object}
+ */
+window['PR']
+
+/** Pretty print a chunk of code.
+ *
+ * @param {string} sourceCodeHtml code as html
+ * @return {string} code as html, but prettier
+ */
+ = window['prettyPrintOne']
+/** Find all the {@code <pre>} and {@code <code>} tags in the DOM with
+ * {@code class=prettyprint} and prettify them.
+ * @param {Function?} opt_whenDone if specified, called when the last entry
+ * has been finished.
+ */
+ = window['prettyPrint'] = void 0;
+
+
+(function () {
+ // Keyword lists for various languages.
+ var FLOW_CONTROL_KEYWORDS =
+ "break continue do else for if return while ";
+ var C_KEYWORDS = FLOW_CONTROL_KEYWORDS + "auto case char const default " +
+ "double enum extern float goto int long register short signed sizeof " +
+ "static struct switch typedef union unsigned void volatile ";
+ var COMMON_KEYWORDS = C_KEYWORDS + "catch class delete false import " +
+ "new operator private protected public this throw true try typeof ";
+ var CPP_KEYWORDS = COMMON_KEYWORDS + "alignof align_union asm axiom bool " +
+ "concept concept_map const_cast constexpr decltype " +
+ "dynamic_cast explicit export friend inline late_check " +
+ "mutable namespace nullptr reinterpret_cast static_assert static_cast " +
+ "template typeid typename using virtual wchar_t where ";
+ var JAVA_KEYWORDS = COMMON_KEYWORDS +
+ "abstract boolean byte extends final finally implements import " +
+ "instanceof null native package strictfp super synchronized throws " +
+ "transient ";
+ var CSHARP_KEYWORDS = JAVA_KEYWORDS +
+ "as base by checked decimal delegate descending dynamic event " +
+ "fixed foreach from group implicit in interface internal into is lock " +
+ "object out override orderby params partial readonly ref sbyte sealed " +
+ "stackalloc string select uint ulong unchecked unsafe ushort var ";
+ var COFFEE_KEYWORDS = "all and by catch class else extends false finally " +
+ "for if in is isnt loop new no not null of off on or return super then " +
+ "true try unless until when while yes ";
+ var JSCRIPT_KEYWORDS = COMMON_KEYWORDS +
+ "debugger eval export function get null set undefined var with " +
+ "Infinity NaN ";
+ var PERL_KEYWORDS = "caller delete die do dump elsif eval exit foreach for " +
+ "goto if import last local my next no our print package redo require " +
+ "sub undef unless until use wantarray while BEGIN END ";
+ var PYTHON_KEYWORDS = FLOW_CONTROL_KEYWORDS + "and as assert class def del " +
+ "elif except exec finally from global import in is lambda " +
+ "nonlocal not or pass print raise try with yield " +
+ "False True None ";
+ var RUBY_KEYWORDS = FLOW_CONTROL_KEYWORDS + "alias and begin case class def" +
+ " defined elsif end ensure false in module next nil not or redo rescue " +
+ "retry self super then true undef unless until when yield BEGIN END ";
+ var SH_KEYWORDS = FLOW_CONTROL_KEYWORDS + "case done elif esac eval fi " +
+ "function in local set then until ";
+ var ALL_KEYWORDS = (
+ CPP_KEYWORDS + CSHARP_KEYWORDS + JSCRIPT_KEYWORDS + PERL_KEYWORDS +
+ PYTHON_KEYWORDS + RUBY_KEYWORDS + SH_KEYWORDS);
+
+ // token style names. correspond to css classes
+ /** token style for a string literal */
+ var PR_STRING = 'str';
+ /** token style for a keyword */
+ var PR_KEYWORD = 'kwd';
+ /** token style for a comment */
+ var PR_COMMENT = 'com';
+ /** token style for a type */
+ var PR_TYPE = 'typ';
+ /** token style for a literal value. e.g. 1, null, true. */
+ var PR_LITERAL = 'lit';
+ /** token style for a punctuation string. */
+ var PR_PUNCTUATION = 'pun';
+ /** token style for a punctuation string. */
+ var PR_PLAIN = 'pln';
+
+ /** token style for an sgml tag. */
+ var PR_TAG = 'tag';
+ /** token style for a markup declaration such as a DOCTYPE. */
+ var PR_DECLARATION = 'dec';
+ /** token style for embedded source. */
+ var PR_SOURCE = 'src';
+ /** token style for an sgml attribute name. */
+ var PR_ATTRIB_NAME = 'atn';
+ /** token style for an sgml attribute value. */
+ var PR_ATTRIB_VALUE = 'atv';
+
+ /**
+ * A class that indicates a section of markup that is not code, e.g. to allow
+ * embedding of line numbers within code listings.
+ */
+ var PR_NOCODE = 'nocode';
+
+ /** A set of tokens that can precede a regular expression literal in
+ * javascript.
+ * http://www.mozilla.org/js/language/js20/rationale/syntax.html has the full
+ * list, but I've removed ones that might be problematic when seen in
+ * languages that don't support regular expression literals.
+ *
+ * <p>Specifically, I've removed any keywords that can't precede a regexp
+ * literal in a syntactically legal javascript program, and I've removed the
+ * "in" keyword since it's not a keyword in many languages, and might be used
+ * as a count of inches.
+ *
+ * <p>The link a above does not accurately describe EcmaScript rules since
+ * it fails to distinguish between (a=++/b/i) and (a++/b/i) but it works
+ * very well in practice.
+ *
+ * @private
+ */
+ var REGEXP_PRECEDER_PATTERN = function () {
+ var preceders = [
+ "!", "!=", "!==", "#", "%", "%=", "&", "&&", "&&=",
+ "&=", "(", "*", "*=", /* "+", */ "+=", ",", /* "-", */ "-=",
+ "->", /*".", "..", "...", handled below */ "/", "/=", ":", "::", ";",
+ "<", "<<", "<<=", "<=", "=", "==", "===", ">",
+ ">=", ">>", ">>=", ">>>", ">>>=", "?", "@", "[",
+ "^", "^=", "^^", "^^=", "{", "|", "|=", "||",
+ "||=", "~" /* handles =~ and !~ */,
+ "break", "case", "continue", "delete",
+ "do", "else", "finally", "instanceof",
+ "return", "throw", "try", "typeof"
+ ];
+ var pattern = '(?:^^|[+-]';
+ for (var i = 0; i < preceders.length; ++i) {
+ pattern += '|' + preceders[i].replace(/([^=<>:&a-z])/g, '\\$1');
+ }
+ pattern += ')\\s*'; // matches at end, and matches empty string
+ return pattern;
+ // CAVEAT: this does not properly handle the case where a regular
+ // expression immediately follows another since a regular expression may
+ // have flags for case-sensitivity and the like. Having regexp tokens
+ // adjacent is not valid in any language I'm aware of, so I'm punting.
+ // TODO: maybe style special characters inside a regexp as punctuation.
+ }();
+
+
+ /**
+ * Given a group of {@link RegExp}s, returns a {@code RegExp} that globally
+ * matches the union of the sets of strings matched by the input RegExp.
+ * Since it matches globally, if the input strings have a start-of-input
+ * anchor (/^.../), it is ignored for the purposes of unioning.
+ * @param {Array.<RegExp>} regexs non multiline, non-global regexs.
+ * @return {RegExp} a global regex.
+ */
+ function combinePrefixPatterns(regexs) {
+ var capturedGroupIndex = 0;
+
+ var needToFoldCase = false;
+ var ignoreCase = false;
+ for (var i = 0, n = regexs.length; i < n; ++i) {
+ var regex = regexs[i];
+ if (regex.ignoreCase) {
+ ignoreCase = true;
+ } else if (/[a-z]/i.test(regex.source.replace(
+ /\\u[0-9a-f]{4}|\\x[0-9a-f]{2}|\\[^ux]/gi, ''))) {
+ needToFoldCase = true;
+ ignoreCase = false;
+ break;
+ }
+ }
+
+ function decodeEscape(charsetPart) {
+ if (charsetPart.charAt(0) !== '\\') { return charsetPart.charCodeAt(0); }
+ switch (charsetPart.charAt(1)) {
+ case 'b': return 8;
+ case 't': return 9;
+ case 'n': return 0xa;
+ case 'v': return 0xb;
+ case 'f': return 0xc;
+ case 'r': return 0xd;
+ case 'u': case 'x':
+ return parseInt(charsetPart.substring(2), 16)
+ || charsetPart.charCodeAt(1);
+ case '0': case '1': case '2': case '3': case '4':
+ case '5': case '6': case '7':
+ return parseInt(charsetPart.substring(1), 8);
+ default: return charsetPart.charCodeAt(1);
+ }
+ }
+
+ function encodeEscape(charCode) {
+ if (charCode < 0x20) {
+ return (charCode < 0x10 ? '\\x0' : '\\x') + charCode.toString(16);
+ }
+ var ch = String.fromCharCode(charCode);
+ if (ch === '\\' || ch === '-' || ch === '[' || ch === ']') {
+ ch = '\\' + ch;
+ }
+ return ch;
+ }
+
+ function caseFoldCharset(charSet) {
+ var charsetParts = charSet.substring(1, charSet.length - 1).match(
+ new RegExp(
+ '\\\\u[0-9A-Fa-f]{4}'
+ + '|\\\\x[0-9A-Fa-f]{2}'
+ + '|\\\\[0-3][0-7]{0,2}'
+ + '|\\\\[0-7]{1,2}'
+ + '|\\\\[\\s\\S]'
+ + '|-'
+ + '|[^-\\\\]',
+ 'g'));
+ var groups = [];
+ var ranges = [];
+ var inverse = charsetParts[0] === '^';
+ for (var i = inverse ? 1 : 0, n = charsetParts.length; i < n; ++i) {
+ var p = charsetParts[i];
+ switch (p) {
+ case '\\B': case '\\b':
+ case '\\D': case '\\d':
+ case '\\S': case '\\s':
+ case '\\W': case '\\w':
+ groups.push(p);
+ continue;
+ }
+ var start = decodeEscape(p);
+ var end;
+ if (i + 2 < n && '-' === charsetParts[i + 1]) {
+ end = decodeEscape(charsetParts[i + 2]);
+ i += 2;
+ } else {
+ end = start;
+ }
+ ranges.push([start, end]);
+ // If the range might intersect letters, then expand it.
+ if (!(end < 65 || start > 122)) {
+ if (!(end < 65 || start > 90)) {
+ ranges.push([Math.max(65, start) | 32, Math.min(end, 90) | 32]);
+ }
+ if (!(end < 97 || start > 122)) {
+ ranges.push([Math.max(97, start) & ~32, Math.min(end, 122) & ~32]);
+ }
+ }
+ }
+
+ // [[1, 10], [3, 4], [8, 12], [14, 14], [16, 16], [17, 17]]
+ // -> [[1, 12], [14, 14], [16, 17]]
+ ranges.sort(function (a, b) { return (a[0] - b[0]) || (b[1] - a[1]); });
+ var consolidatedRanges = [];
+ var lastRange = [NaN, NaN];
+ for (var i = 0; i < ranges.length; ++i) {
+ var range = ranges[i];
+ if (range[0] <= lastRange[1] + 1) {
+ lastRange[1] = Math.max(lastRange[1], range[1]);
+ } else {
+ consolidatedRanges.push(lastRange = range);
+ }
+ }
+
+ var out = ['['];
+ if (inverse) { out.push('^'); }
+ out.push.apply(out, groups);
+ for (var i = 0; i < consolidatedRanges.length; ++i) {
+ var range = consolidatedRanges[i];
+ out.push(encodeEscape(range[0]));
+ if (range[1] > range[0]) {
+ if (range[1] + 1 > range[0]) { out.push('-'); }
+ out.push(encodeEscape(range[1]));
+ }
+ }
+ out.push(']');
+ return out.join('');
+ }
+
+ function allowAnywhereFoldCaseAndRenumberGroups(regex) {
+ // Split into character sets, escape sequences, punctuation strings
+ // like ('(', '(?:', ')', '^'), and runs of characters that do not
+ // include any of the above.
+ var parts = regex.source.match(
+ new RegExp(
+ '(?:'
+ + '\\[(?:[^\\x5C\\x5D]|\\\\[\\s\\S])*\\]' // a character set
+ + '|\\\\u[A-Fa-f0-9]{4}' // a unicode escape
+ + '|\\\\x[A-Fa-f0-9]{2}' // a hex escape
+ + '|\\\\[0-9]+' // a back-reference or octal escape
+ + '|\\\\[^ux0-9]' // other escape sequence
+ + '|\\(\\?[:!=]' // start of a non-capturing group
+ + '|[\\(\\)\\^]' // start/emd of a group, or line start
+ + '|[^\\x5B\\x5C\\(\\)\\^]+' // run of other characters
+ + ')',
+ 'g'));
+ var n = parts.length;
+
+ // Maps captured group numbers to the number they will occupy in
+ // the output or to -1 if that has not been determined, or to
+ // undefined if they need not be capturing in the output.
+ var capturedGroups = [];
+
+ // Walk over and identify back references to build the capturedGroups
+ // mapping.
+ for (var i = 0, groupIndex = 0; i < n; ++i) {
+ var p = parts[i];
+ if (p === '(') {
+ // groups are 1-indexed, so max group index is count of '('
+ ++groupIndex;
+ } else if ('\\' === p.charAt(0)) {
+ var decimalValue = +p.substring(1);
+ if (decimalValue && decimalValue <= groupIndex) {
+ capturedGroups[decimalValue] = -1;
+ }
+ }
+ }
+
+ // Renumber groups and reduce capturing groups to non-capturing groups
+ // where possible.
+ for (var i = 1; i < capturedGroups.length; ++i) {
+ if (-1 === capturedGroups[i]) {
+ capturedGroups[i] = ++capturedGroupIndex;
+ }
+ }
+ for (var i = 0, groupIndex = 0; i < n; ++i) {
+ var p = parts[i];
+ if (p === '(') {
+ ++groupIndex;
+ if (capturedGroups[groupIndex] === undefined) {
+ parts[i] = '(?:';
+ }
+ } else if ('\\' === p.charAt(0)) {
+ var decimalValue = +p.substring(1);
+ if (decimalValue && decimalValue <= groupIndex) {
+ parts[i] = '\\' + capturedGroups[groupIndex];
+ }
+ }
+ }
+
+ // Remove any prefix anchors so that the output will match anywhere.
+ // ^^ really does mean an anchored match though.
+ for (var i = 0, groupIndex = 0; i < n; ++i) {
+ if ('^' === parts[i] && '^' !== parts[i + 1]) { parts[i] = ''; }
+ }
+
+ // Expand letters to groups to handle mixing of case-sensitive and
+ // case-insensitive patterns if necessary.
+ if (regex.ignoreCase && needToFoldCase) {
+ for (var i = 0; i < n; ++i) {
+ var p = parts[i];
+ var ch0 = p.charAt(0);
+ if (p.length >= 2 && ch0 === '[') {
+ parts[i] = caseFoldCharset(p);
+ } else if (ch0 !== '\\') {
+ // TODO: handle letters in numeric escapes.
+ parts[i] = p.replace(
+ /[a-zA-Z]/g,
+ function (ch) {
+ var cc = ch.charCodeAt(0);
+ return '[' + String.fromCharCode(cc & ~32, cc | 32) + ']';
+ });
+ }
+ }
+ }
+
+ return parts.join('');
+ }
+
+ var rewritten = [];
+ for (var i = 0, n = regexs.length; i < n; ++i) {
+ var regex = regexs[i];
+ if (regex.global || regex.multiline) { throw new Error('' + regex); }
+ rewritten.push(
+ '(?:' + allowAnywhereFoldCaseAndRenumberGroups(regex) + ')');
+ }
+
+ return new RegExp(rewritten.join('|'), ignoreCase ? 'gi' : 'g');
+ }
+
+
+ /**
+ * Split markup into a string of source code and an array mapping ranges in
+ * that string to the text nodes in which they appear.
+ *
+ * <p>
+ * The HTML DOM structure:</p>
+ * <pre>
+ * (Element "p"
+ * (Element "b"
+ * (Text "print ")) ; #1
+ * (Text "'Hello '") ; #2
+ * (Element "br") ; #3
+ * (Text " + 'World';")) ; #4
+ * </pre>
+ * <p>
+ * corresponds to the HTML
+ * {@code <p><b>print </b>'Hello '<br> + 'World';</p>}.</p>
+ *
+ * <p>
+ * It will produce the output:</p>
+ * <pre>
+ * {
+ * source: "print 'Hello '\n + 'World';",
+ * // 1 2
+ * // 012345678901234 5678901234567
+ * spans: [0, #1, 6, #2, 14, #3, 15, #4]
+ * }
+ * </pre>
+ * <p>
+ * where #1 is a reference to the {@code "print "} text node above, and so
+ * on for the other text nodes.
+ * </p>
+ *
+ * <p>
+ * The {@code} spans array is an array of pairs. Even elements are the start
+ * indices of substrings, and odd elements are the text nodes (or BR elements)
+ * that contain the text for those substrings.
+ * Substrings continue until the next index or the end of the source.
+ * </p>
+ *
+ * @param {Node} node an HTML DOM subtree containing source-code.
+ * @return {Object} source code and the text nodes in which they occur.
+ */
+ function extractSourceSpans(node) {
+ var nocode = /(?:^|\s)nocode(?:\s|$)/;
+
+ var chunks = [];
+ var length = 0;
+ var spans = [];
+ var k = 0;
+
+ var whitespace;
+ if (node.currentStyle) {
+ whitespace = node.currentStyle.whiteSpace;
+ } else if (window.getComputedStyle) {
+ whitespace = document.defaultView.getComputedStyle(node, null)
+ .getPropertyValue('white-space');
+ }
+ var isPreformatted = whitespace && 'pre' === whitespace.substring(0, 3);
+
+ function walk(node) {
+ switch (node.nodeType) {
+ case 1: // Element
+ if (nocode.test(node.className)) { return; }
+ for (var child = node.firstChild; child; child = child.nextSibling) {
+ walk(child);
+ }
+ var nodeName = node.nodeName;
+ if ('BR' === nodeName || 'LI' === nodeName) {
+ chunks[k] = '\n';
+ spans[k << 1] = length++;
+ spans[(k++ << 1) | 1] = node;
+ }
+ break;
+ case 3: case 4: // Text
+ var text = node.nodeValue;
+ if (text.length) {
+ if (!isPreformatted) {
+ text = text.replace(/[ \t\r\n]+/g, ' ');
+ } else {
+ text = text.replace(/\r\n?/g, '\n'); // Normalize newlines.
+ }
+ // TODO: handle tabs here?
+ chunks[k] = text;
+ spans[k << 1] = length;
+ length += text.length;
+ spans[(k++ << 1) | 1] = node;
+ }
+ break;
+ }
+ }
+
+ walk(node);
+
+ return {
+ source: chunks.join('').replace(/\n$/, ''),
+ spans: spans
+ };
+ }
+
+
+ /**
+ * Apply the given language handler to sourceCode and add the resulting
+ * decorations to out.
+ * @param {number} basePos the index of sourceCode within the chunk of source
+ * whose decorations are already present on out.
+ */
+ function appendDecorations(basePos, sourceCode, langHandler, out) {
+ if (!sourceCode) { return; }
+ var job = {
+ source: sourceCode,
+ basePos: basePos
+ };
+ langHandler(job);
+ out.push.apply(out, job.decorations);
+ }
+
+ /** Given triples of [style, pattern, context] returns a lexing function,
+ * The lexing function interprets the patterns to find token boundaries and
+ * returns a decoration list of the form
+ * [index_0, style_0, index_1, style_1, ..., index_n, style_n]
+ * where index_n is an index into the sourceCode, and style_n is a style
+ * constant like PR_PLAIN. index_n-1 <= index_n, and style_n-1 applies to
+ * all characters in sourceCode[index_n-1:index_n].
+ *
+ * The stylePatterns is a list whose elements have the form
+ * [style : string, pattern : RegExp, DEPRECATED, shortcut : string].
+ *
+ * Style is a style constant like PR_PLAIN, or can be a string of the
+ * form 'lang-FOO', where FOO is a language extension describing the
+ * language of the portion of the token in $1 after pattern executes.
+ * E.g., if style is 'lang-lisp', and group 1 contains the text
+ * '(hello (world))', then that portion of the token will be passed to the
+ * registered lisp handler for formatting.
+ * The text before and after group 1 will be restyled using this decorator
+ * so decorators should take care that this doesn't result in infinite
+ * recursion. For example, the HTML lexer rule for SCRIPT elements looks
+ * something like ['lang-js', /<[s]cript>(.+?)<\/script>/]. This may match
+ * '<script>foo()<\/script>', which would cause the current decorator to
+ * be called with '<script>' which would not match the same rule since
+ * group 1 must not be empty, so it would be instead styled as PR_TAG by
+ * the generic tag rule. The handler registered for the 'js' extension would
+ * then be called with 'foo()', and finally, the current decorator would
+ * be called with '<\/script>' which would not match the original rule and
+ * so the generic tag rule would identify it as a tag.
+ *
+ * Pattern must only match prefixes, and if it matches a prefix, then that
+ * match is considered a token with the same style.
+ *
+ * Context is applied to the last non-whitespace, non-comment token
+ * recognized.
+ *
+ * Shortcut is an optional string of characters, any of which, if the first
+ * character, gurantee that this pattern and only this pattern matches.
+ *
+ * @param {Array} shortcutStylePatterns patterns that always start with
+ * a known character. Must have a shortcut string.
+ * @param {Array} fallthroughStylePatterns patterns that will be tried in
+ * order if the shortcut ones fail. May have shortcuts.
+ *
+ * @return {function (Object)} a
+ * function that takes source code and returns a list of decorations.
+ */
+ function createSimpleLexer(shortcutStylePatterns, fallthroughStylePatterns) {
+ var shortcuts = {};
+ var tokenizer;
+ (function () {
+ var allPatterns = shortcutStylePatterns.concat(fallthroughStylePatterns);
+ var allRegexs = [];
+ var regexKeys = {};
+ for (var i = 0, n = allPatterns.length; i < n; ++i) {
+ var patternParts = allPatterns[i];
+ var shortcutChars = patternParts[3];
+ if (shortcutChars) {
+ for (var c = shortcutChars.length; --c >= 0;) {
+ shortcuts[shortcutChars.charAt(c)] = patternParts;
+ }
+ }
+ var regex = patternParts[1];
+ var k = '' + regex;
+ if (!regexKeys.hasOwnProperty(k)) {
+ allRegexs.push(regex);
+ regexKeys[k] = null;
+ }
+ }
+ allRegexs.push(/[\0-\uffff]/);
+ tokenizer = combinePrefixPatterns(allRegexs);
+ })();
+
+ var nPatterns = fallthroughStylePatterns.length;
+ var notWs = /\S/;
+
+ /**
+ * Lexes job.source and produces an output array job.decorations of style
+ * classes preceded by the position at which they start in job.source in
+ * order.
+ *
+ * @param {Object} job an object like {@code
+ * source: {string} sourceText plain text,
+ * basePos: {int} position of job.source in the larger chunk of
+ * sourceCode.
+ * }
+ */
+ var decorate = function (job) {
+ var sourceCode = job.source, basePos = job.basePos;
+ /** Even entries are positions in source in ascending order. Odd enties
+ * are style markers (e.g., PR_COMMENT) that run from that position until
+ * the end.
+ * @type {Array.<number|string>}
+ */
+ var decorations = [basePos, PR_PLAIN];
+ var pos = 0; // index into sourceCode
+ var tokens = sourceCode.match(tokenizer) || [];
+ var styleCache = {};
+
+ for (var ti = 0, nTokens = tokens.length; ti < nTokens; ++ti) {
+ var token = tokens[ti];
+ var style = styleCache[token];
+ var match = void 0;
+
+ var isEmbedded;
+ if (typeof style === 'string') {
+ isEmbedded = false;
+ } else {
+ var patternParts = shortcuts[token.charAt(0)];
+ if (patternParts) {
+ match = token.match(patternParts[1]);
+ style = patternParts[0];
+ } else {
+ for (var i = 0; i < nPatterns; ++i) {
+ patternParts = fallthroughStylePatterns[i];
+ match = token.match(patternParts[1]);
+ if (match) {
+ style = patternParts[0];
+ break;
+ }
+ }
+
+ if (!match) { // make sure that we make progress
+ style = PR_PLAIN;
+ }
+ }
+
+ isEmbedded = style.length >= 5 && 'lang-' === style.substring(0, 5);
+ if (isEmbedded && !(match && typeof match[1] === 'string')) {
+ isEmbedded = false;
+ style = PR_SOURCE;
+ }
+
+ if (!isEmbedded) { styleCache[token] = style; }
+ }
+
+ var tokenStart = pos;
+ pos += token.length;
+
+ if (!isEmbedded) {
+ decorations.push(basePos + tokenStart, style);
+ } else { // Treat group 1 as an embedded block of source code.
+ var embeddedSource = match[1];
+ var embeddedSourceStart = token.indexOf(embeddedSource);
+ var embeddedSourceEnd = embeddedSourceStart + embeddedSource.length;
+ if (match[2]) {
+ // If embeddedSource can be blank, then it would match at the
+ // beginning which would cause us to infinitely recurse on the
+ // entire token, so we catch the right context in match[2].
+ embeddedSourceEnd = token.length - match[2].length;
+ embeddedSourceStart = embeddedSourceEnd - embeddedSource.length;
+ }
+ var lang = style.substring(5);
+ // Decorate the left of the embedded source
+ appendDecorations(
+ basePos + tokenStart,
+ token.substring(0, embeddedSourceStart),
+ decorate, decorations);
+ // Decorate the embedded source
+ appendDecorations(
+ basePos + tokenStart + embeddedSourceStart,
+ embeddedSource,
+ langHandlerForExtension(lang, embeddedSource),
+ decorations);
+ // Decorate the right of the embedded section
+ appendDecorations(
+ basePos + tokenStart + embeddedSourceEnd,
+ token.substring(embeddedSourceEnd),
+ decorate, decorations);
+ }
+ }
+ job.decorations = decorations;
+ };
+ return decorate;
+ }
+
+ /** returns a function that produces a list of decorations from source text.
+ *
+ * This code treats ", ', and ` as string delimiters, and \ as a string
+ * escape. It does not recognize perl's qq() style strings.
+ * It has no special handling for double delimiter escapes as in basic, or
+ * the tripled delimiters used in python, but should work on those regardless
+ * although in those cases a single string literal may be broken up into
+ * multiple adjacent string literals.
+ *
+ * It recognizes C, C++, and shell style comments.
+ *
+ * @param {Object} options a set of optional parameters.
+ * @return {function (Object)} a function that examines the source code
+ * in the input job and builds the decoration list.
+ */
+ function sourceDecorator(options) {
+ var shortcutStylePatterns = [], fallthroughStylePatterns = [];
+ if (options['tripleQuotedStrings']) {
+ // '''multi-line-string''', 'single-line-string', and double-quoted
+ shortcutStylePatterns.push(
+ [PR_STRING, /^(?:\'\'\'(?:[^\'\\]|\\[\s\S]|\'{1,2}(?=[^\']))*(?:\'\'\'|$)|\"\"\"(?:[^\"\\]|\\[\s\S]|\"{1,2}(?=[^\"]))*(?:\"\"\"|$)|\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$))/,
+ null, '\'"']);
+ } else if (options['multiLineStrings']) {
+ // 'multi-line-string', "multi-line-string"
+ shortcutStylePatterns.push(
+ [PR_STRING, /^(?:\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$)|\`(?:[^\\\`]|\\[\s\S])*(?:\`|$))/,
+ null, '\'"`']);
+ } else {
+ // 'single-line-string', "single-line-string"
+ shortcutStylePatterns.push(
+ [PR_STRING,
+ /^(?:\'(?:[^\\\'\r\n]|\\.)*(?:\'|$)|\"(?:[^\\\"\r\n]|\\.)*(?:\"|$))/,
+ null, '"\'']);
+ }
+ if (options['verbatimStrings']) {
+ // verbatim-string-literal production from the C# grammar. See issue 93.
+ fallthroughStylePatterns.push(
+ [PR_STRING, /^@\"(?:[^\"]|\"\")*(?:\"|$)/, null]);
+ }
+ var hc = options['hashComments'];
+ if (hc) {
+ if (options['cStyleComments']) {
+ if (hc > 1) { // multiline hash comments
+ shortcutStylePatterns.push(
+ [PR_COMMENT, /^#(?:##(?:[^#]|#(?!##))*(?:###|$)|.*)/, null, '#']);
+ } else {
+ // Stop C preprocessor declarations at an unclosed open comment
+ shortcutStylePatterns.push(
+ [PR_COMMENT, /^#(?:(?:define|elif|else|endif|error|ifdef|include|ifndef|line|pragma|undef|warning)\b|[^\r\n]*)/,
+ null, '#']);
+ }
+ fallthroughStylePatterns.push(
+ [PR_STRING,
+ /^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h|[a-z]\w*)>/,
+ null]);
+ } else {
+ shortcutStylePatterns.push([PR_COMMENT, /^#[^\r\n]*/, null, '#']);
+ }
+ }
+ if (options['cStyleComments']) {
+ fallthroughStylePatterns.push([PR_COMMENT, /^\/\/[^\r\n]*/, null]);
+ fallthroughStylePatterns.push(
+ [PR_COMMENT, /^\/\*[\s\S]*?(?:\*\/|$)/, null]);
+ }
+ if (options['regexLiterals']) {
+ var REGEX_LITERAL = (
+ // A regular expression literal starts with a slash that is
+ // not followed by * or / so that it is not confused with
+ // comments.
+ '/(?=[^/*])'
+ // and then contains any number of raw characters,
+ + '(?:[^/\\x5B\\x5C]'
+ // escape sequences (\x5C),
+ + '|\\x5C[\\s\\S]'
+ // or non-nesting character sets (\x5B\x5D);
+ + '|\\x5B(?:[^\\x5C\\x5D]|\\x5C[\\s\\S])*(?:\\x5D|$))+'
+ // finally closed by a /.
+ + '/');
+ fallthroughStylePatterns.push(
+ ['lang-regex',
+ new RegExp('^' + REGEXP_PRECEDER_PATTERN + '(' + REGEX_LITERAL + ')')
+ ]);
+ }
+
+ var keywords = options['keywords'].replace(/^\s+|\s+$/g, '');
+ if (keywords.length) {
+ fallthroughStylePatterns.push(
+ [PR_KEYWORD,
+ new RegExp('^(?:' + keywords.replace(/\s+/g, '|') + ')\\b'), null]);
+ }
+
+ shortcutStylePatterns.push([PR_PLAIN, /^\s+/, null, ' \r\n\t\xA0']);
+ fallthroughStylePatterns.push(
+ // TODO(mikesamuel): recognize non-latin letters and numerals in idents
+ [PR_LITERAL, /^@[a-z_$][a-z_$@0-9]*/i, null],
+ [PR_TYPE, /^@?[A-Z]+[a-z][A-Za-z_$@0-9]*/, null],
+ [PR_PLAIN, /^[a-z_$][a-z_$@0-9]*/i, null],
+ [PR_LITERAL,
+ new RegExp(
+ '^(?:'
+ // A hex number
+ + '0x[a-f0-9]+'
+ // or an octal or decimal number,
+ + '|(?:\\d(?:_\\d+)*\\d*(?:\\.\\d*)?|\\.\\d\\+)'
+ // possibly in scientific notation
+ + '(?:e[+\\-]?\\d+)?'
+ + ')'
+ // with an optional modifier like UL for unsigned long
+ + '[a-z]*', 'i'),
+ null, '0123456789'],
+ // Don't treat escaped quotes in bash as starting strings. See issue 144.
+ [PR_PLAIN, /^\\[\s\S]?/, null],
+ [PR_PUNCTUATION, /^.[^\s\w\.$@\'\"\`\/\#\\]*/, null]);
+
+ return createSimpleLexer(shortcutStylePatterns, fallthroughStylePatterns);
+ }
+
+ var decorateSource = sourceDecorator({
+ 'keywords': ALL_KEYWORDS,
+ 'hashComments': true,
+ 'cStyleComments': true,
+ 'multiLineStrings': true,
+ 'regexLiterals': true
+ });
+
+ /**
+ * Given a DOM subtree, wraps it in a list, and puts each line into its own
+ * list item.
+ *
+ * @param {Node} node modified in place. Its content is pulled into an
+ * HTMLOListElement, and each line is moved into a separate list item.
+ * This requires cloning elements, so the input might not have unique
+ * IDs after numbering.
+ */
+ function numberLines(node, opt_startLineNum) {
+ var nocode = /(?:^|\s)nocode(?:\s|$)/;
+ var lineBreak = /\r\n?|\n/;
+
+ var document = node.ownerDocument;
+
+ var whitespace;
+ if (node.currentStyle) {
+ whitespace = node.currentStyle.whiteSpace;
+ } else if (window.getComputedStyle) {
+ whitespace = document.defaultView.getComputedStyle(node, null)
+ .getPropertyValue('white-space');
+ }
+ // If it's preformatted, then we need to split lines on line breaks
+ // in addition to <BR>s.
+ var isPreformatted = whitespace && 'pre' === whitespace.substring(0, 3);
+
+ var li = document.createElement('LI');
+ while (node.firstChild) {
+ li.appendChild(node.firstChild);
+ }
+ // An array of lines. We split below, so this is initialized to one
+ // un-split line.
+ var listItems = [li];
+
+ function walk(node) {
+ switch (node.nodeType) {
+ case 1: // Element
+ if (nocode.test(node.className)) { break; }
+ if ('BR' === node.nodeName) {
+ breakAfter(node);
+ // Discard the <BR> since it is now flush against a </LI>.
+ if (node.parentNode) {
+ node.parentNode.removeChild(node);
+ }
+ } else {
+ for (var child = node.firstChild; child; child = child.nextSibling) {
+ walk(child);
+ }
+ }
+ break;
+ case 3: case 4: // Text
+ if (isPreformatted) {
+ var text = node.nodeValue;
+ var match = text.match(lineBreak);
+ if (match) {
+ var firstLine = text.substring(0, match.index);
+ node.nodeValue = firstLine;
+ var tail = text.substring(match.index + match[0].length);
+ if (tail) {
+ var parent = node.parentNode;
+ parent.insertBefore(
+ document.createTextNode(tail), node.nextSibling);
+ }
+ breakAfter(node);
+ if (!firstLine) {
+ // Don't leave blank text nodes in the DOM.
+ node.parentNode.removeChild(node);
+ }
+ }
+ }
+ break;
+ }
+ }
+
+ // Split a line after the given node.
+ function breakAfter(lineEndNode) {
+ // If there's nothing to the right, then we can skip ending the line
+ // here, and move root-wards since splitting just before an end-tag
+ // would require us to create a bunch of empty copies.
+ while (!lineEndNode.nextSibling) {
+ lineEndNode = lineEndNode.parentNode;
+ if (!lineEndNode) { return; }
+ }
+
+ function breakLeftOf(limit, copy) {
+ // Clone shallowly if this node needs to be on both sides of the break.
+ var rightSide = copy ? limit.cloneNode(false) : limit;
+ var parent = limit.parentNode;
+ if (parent) {
+ // We clone the parent chain.
+ // This helps us resurrect important styling elements that cross lines.
+ // E.g. in <i>Foo<br>Bar</i>
+ // should be rewritten to <li><i>Foo</i></li><li><i>Bar</i></li>.
+ var parentClone = breakLeftOf(parent, 1);
+ // Move the clone and everything to the right of the original
+ // onto the cloned parent.
+ var next = limit.nextSibling;
+ parentClone.appendChild(rightSide);
+ for (var sibling = next; sibling; sibling = next) {
+ next = sibling.nextSibling;
+ parentClone.appendChild(sibling);
+ }
+ }
+ return rightSide;
+ }
+
+ var copiedListItem = breakLeftOf(lineEndNode.nextSibling, 0);
+
+ // Walk the parent chain until we reach an unattached LI.
+ for (var parent;
+ // Check nodeType since IE invents document fragments.
+ (parent = copiedListItem.parentNode) && parent.nodeType === 1;) {
+ copiedListItem = parent;
+ }
+ // Put it on the list of lines for later processing.
+ listItems.push(copiedListItem);
+ }
+
+ // Split lines while there are lines left to split.
+ for (var i = 0; // Number of lines that have been split so far.
+ i < listItems.length; // length updated by breakAfter calls.
+ ++i) {
+ walk(listItems[i]);
+ }
+
+ // Make sure numeric indices show correctly.
+ if (opt_startLineNum === (opt_startLineNum|0)) {
+ listItems[0].setAttribute('value', opt_startLineNum);
+ }
+
+ var ol = document.createElement('OL');
+ ol.className = 'linenums';
+ var offset = Math.max(0, ((opt_startLineNum - 1 /* zero index */)) | 0) || 0;
+ for (var i = 0, n = listItems.length; i < n; ++i) {
+ li = listItems[i];
+ // Stick a class on the LIs so that stylesheets can
+ // color odd/even rows, or any other row pattern that
+ // is co-prime with 10.
+ li.className = 'L' + ((i + offset) % 10);
+ if (!li.firstChild) {
+ li.appendChild(document.createTextNode('\xA0'));
+ }
+ ol.appendChild(li);
+ }
+
+ node.appendChild(ol);
+ }
+
+ /**
+ * Breaks {@code job.source} around style boundaries in {@code job.decorations}
+ * and modifies {@code job.sourceNode} in place.
+ * @param {Object} job like <pre>{
+ * source: {string} source as plain text,
+ * spans: {Array.<number|Node>} alternating span start indices into source
+ * and the text node or element (e.g. {@code <BR>}) corresponding to that
+ * span.
+ * decorations: {Array.<number|string} an array of style classes preceded
+ * by the position at which they start in job.source in order
+ * }</pre>
+ * @private
+ */
+ function recombineTagsAndDecorations(job) {
+ var isIE = /\bMSIE\b/.test(navigator.userAgent);
+ var newlineRe = /\n/g;
+
+ var source = job.source;
+ var sourceLength = source.length;
+ // Index into source after the last code-unit recombined.
+ var sourceIndex = 0;
+
+ var spans = job.spans;
+ var nSpans = spans.length;
+ // Index into spans after the last span which ends at or before sourceIndex.
+ var spanIndex = 0;
+
+ var decorations = job.decorations;
+ var nDecorations = decorations.length;
+ // Index into decorations after the last decoration which ends at or before sourceIndex.
+ var decorationIndex = 0;
+
+ // Simplify decorations.
+ var decPos = 0;
+ for (var i = 0; i < nDecorations;) {
+ // Skip over any zero-length decorations.
+ var startPos = decorations[i];
+ var start = i;
+ while (start + 2 < nDecorations && decorations[start + 2] === startPos) {
+ start += 2;
+ }
+ // Conflate all adjacent decorations that use the same style.
+ var startDec = decorations[start + 1];
+ var end = start + 2;
+ while (end + 2 <= nDecorations
+ && (decorations[end + 1] === startDec
+ || decorations[end] === decorations[end + 2])) {
+ end += 2;
+ }
+ decorations[decPos++] = startPos;
+ decorations[decPos++] = startDec;
+ i = end;
+ }
+
+ // Strip any zero-length decoration at the end.
+ if (decPos && decorations[decPos - 2] === sourceLength) { decPos -= 2; }
+ nDecorations = decorations.length = decPos;
+
+ var decoration = null;
+ while (spanIndex < nSpans) {
+ var spanStart = spans[spanIndex];
+ var spanEnd = spans[spanIndex + 2] || sourceLength;
+
+ var decStart = decorations[decorationIndex];
+ var decEnd = decorations[decorationIndex + 2] || sourceLength;
+
+ var end = Math.min(spanEnd, decEnd);
+
+ var textNode = spans[spanIndex + 1];
+ if (textNode.nodeType !== 1) { // Don't muck with <BR>s or <LI>s
+ var styledText = source.substring(sourceIndex, end);
+ // This may seem bizarre, and it is. Emitting LF on IE causes the
+ // code to display with spaces instead of line breaks.
+ // Emitting Windows standard issue linebreaks (CRLF) causes a blank
+ // space to appear at the beginning of every line but the first.
+ // Emitting an old Mac OS 9 line separator makes everything spiffy.
+ if (isIE) { styledText = styledText.replace(newlineRe, '\r'); }
+ textNode.nodeValue = styledText;
+ var document = textNode.ownerDocument;
+ var span = document.createElement('SPAN');
+ span.className = decorations[decorationIndex + 1];
+ var parentNode = textNode.parentNode;
+ parentNode.replaceChild(span, textNode);
+ span.appendChild(textNode);
+ if (sourceIndex < spanEnd) { // Split off a text node.
+ spans[spanIndex + 1] = textNode
+ // TODO: Possibly optimize by using '' if there's no flicker.
+ = document.createTextNode(source.substring(end, spanEnd));
+ parentNode.insertBefore(textNode, span.nextSibling);
+ }
+ }
+
+ sourceIndex = end;
+
+ if (sourceIndex >= spanEnd) {
+ spanIndex += 2;
+ }
+ if (sourceIndex >= decEnd) {
+ decorationIndex += 2;
+ }
+ }
+ }
+
+
+ /** Maps language-specific file extensions to handlers. */
+ var langHandlerRegistry = {};
+ /** Register a language handler for the given file extensions.
+ * @param {function (Object)} handler a function from source code to a list
+ * of decorations. Takes a single argument job which describes the
+ * state of the computation. The single parameter has the form
+ * {@code {
+ * source: {string} as plain text.
+ * decorations: {Array.<number|string>} an array of style classes
+ * preceded by the position at which they start in
+ * job.source in order.
+ * The language handler should assigned this field.
+ * basePos: {int} the position of source in the larger source chunk.
+ * All positions in the output decorations array are relative
+ * to the larger source chunk.
+ * } }
+ * @param {Array.<string>} fileExtensions
+ */
+ function registerLangHandler(handler, fileExtensions) {
+ for (var i = fileExtensions.length; --i >= 0;) {
+ var ext = fileExtensions[i];
+ if (!langHandlerRegistry.hasOwnProperty(ext)) {
+ langHandlerRegistry[ext] = handler;
+ } else if ('console' in window) {
+ console['warn']('cannot override language handler %s', ext);
+ }
+ }
+ }
+ function langHandlerForExtension(extension, source) {
+ if (!(extension && langHandlerRegistry.hasOwnProperty(extension))) {
+ // Treat it as markup if the first non whitespace character is a < and
+ // the last non-whitespace character is a >.
+ extension = /^\s*</.test(source)
+ ? 'default-markup'
+ : 'default-code';
+ }
+ return langHandlerRegistry[extension];
+ }
+ registerLangHandler(decorateSource, ['default-code']);
+ registerLangHandler(
+ createSimpleLexer(
+ [],
+ [
+ [PR_PLAIN, /^[^<?]+/],
+ [PR_DECLARATION, /^<!\w[^>]*(?:>|$)/],
+ [PR_COMMENT, /^<\!--[\s\S]*?(?:-\->|$)/],
+ // Unescaped content in an unknown language
+ ['lang-', /^<\?([\s\S]+?)(?:\?>|$)/],
+ ['lang-', /^<%([\s\S]+?)(?:%>|$)/],
+ [PR_PUNCTUATION, /^(?:<[%?]|[%?]>)/],
+ ['lang-', /^<xmp\b[^>]*>([\s\S]+?)<\/xmp\b[^>]*>/i],
+ // Unescaped content in javascript. (Or possibly vbscript).
+ ['lang-js', /^<script\b[^>]*>([\s\S]*?)(<\/script\b[^>]*>)/i],
+ // Contains unescaped stylesheet content
+ ['lang-css', /^<style\b[^>]*>([\s\S]*?)(<\/style\b[^>]*>)/i],
+ ['lang-in.tag', /^(<\/?[a-z][^<>]*>)/i]
+ ]),
+ ['default-markup', 'htm', 'html', 'mxml', 'xhtml', 'xml', 'xsl']);
+ registerLangHandler(
+ createSimpleLexer(
+ [
+ [PR_PLAIN, /^[\s]+/, null, ' \t\r\n'],
+ [PR_ATTRIB_VALUE, /^(?:\"[^\"]*\"?|\'[^\']*\'?)/, null, '\"\'']
+ ],
+ [
+ [PR_TAG, /^^<\/?[a-z](?:[\w.:-]*\w)?|\/?>$/i],
+ [PR_ATTRIB_NAME, /^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],
+ ['lang-uq.val', /^=\s*([^>\'\"\s]*(?:[^>\'\"\s\/]|\/(?=\s)))/],
+ [PR_PUNCTUATION, /^[=<>\/]+/],
+ ['lang-js', /^on\w+\s*=\s*\"([^\"]+)\"/i],
+ ['lang-js', /^on\w+\s*=\s*\'([^\']+)\'/i],
+ ['lang-js', /^on\w+\s*=\s*([^\"\'>\s]+)/i],
+ ['lang-css', /^style\s*=\s*\"([^\"]+)\"/i],
+ ['lang-css', /^style\s*=\s*\'([^\']+)\'/i],
+ ['lang-css', /^style\s*=\s*([^\"\'>\s]+)/i]
+ ]),
+ ['in.tag']);
+ registerLangHandler(
+ createSimpleLexer([], [[PR_ATTRIB_VALUE, /^[\s\S]+/]]), ['uq.val']);
+ registerLangHandler(sourceDecorator({
+ 'keywords': CPP_KEYWORDS,
+ 'hashComments': true,
+ 'cStyleComments': true
+ }), ['c', 'cc', 'cpp', 'cxx', 'cyc', 'm']);
+ registerLangHandler(sourceDecorator({
+ 'keywords': 'null true false'
+ }), ['json']);
+ registerLangHandler(sourceDecorator({
+ 'keywords': CSHARP_KEYWORDS,
+ 'hashComments': true,
+ 'cStyleComments': true,
+ 'verbatimStrings': true
+ }), ['cs']);
+ registerLangHandler(sourceDecorator({
+ 'keywords': JAVA_KEYWORDS,
+ 'cStyleComments': true
+ }), ['java']);
+ registerLangHandler(sourceDecorator({
+ 'keywords': SH_KEYWORDS,
+ 'hashComments': true,
+ 'multiLineStrings': true
+ }), ['bsh', 'csh', 'sh']);
+ registerLangHandler(sourceDecorator({
+ 'keywords': PYTHON_KEYWORDS,
+ 'hashComments': true,
+ 'multiLineStrings': true,
+ 'tripleQuotedStrings': true
+ }), ['cv', 'py']);
+ registerLangHandler(sourceDecorator({
+ 'keywords': PERL_KEYWORDS,
+ 'hashComments': true,
+ 'multiLineStrings': true,
+ 'regexLiterals': true
+ }), ['perl', 'pl', 'pm']);
+ registerLangHandler(sourceDecorator({
+ 'keywords': RUBY_KEYWORDS,
+ 'hashComments': true,
+ 'multiLineStrings': true,
+ 'regexLiterals': true
+ }), ['rb']);
+ registerLangHandler(sourceDecorator({
+ 'keywords': JSCRIPT_KEYWORDS,
+ 'cStyleComments': true,
+ 'regexLiterals': true
+ }), ['js']);
+ registerLangHandler(sourceDecorator({
+ 'keywords': COFFEE_KEYWORDS,
+ 'hashComments': 3, // ### style block comments
+ 'cStyleComments': true,
+ 'multilineStrings': true,
+ 'tripleQuotedStrings': true,
+ 'regexLiterals': true
+ }), ['coffee']);
+ registerLangHandler(createSimpleLexer([], [[PR_STRING, /^[\s\S]+/]]), ['regex']);
+
+ function applyDecorator(job) {
+ var opt_langExtension = job.langExtension;
+
+ try {
+ // Extract tags, and convert the source code to plain text.
+ var sourceAndSpans = extractSourceSpans(job.sourceNode);
+ /** Plain text. @type {string} */
+ var source = sourceAndSpans.source;
+ job.source = source;
+ job.spans = sourceAndSpans.spans;
+ job.basePos = 0;
+
+ // Apply the appropriate language handler
+ langHandlerForExtension(opt_langExtension, source)(job);
+
+ // Integrate the decorations and tags back into the source code,
+ // modifying the sourceNode in place.
+ recombineTagsAndDecorations(job);
+ } catch (e) {
+ if ('console' in window) {
+ console['log'](e && e['stack'] ? e['stack'] : e);
+ }
+ }
+ }
+
+ /**
+ * @param sourceCodeHtml {string} The HTML to pretty print.
+ * @param opt_langExtension {string} The language name to use.
+ * Typically, a filename extension like 'cpp' or 'java'.
+ * @param opt_numberLines {number|boolean} True to number lines,
+ * or the 1-indexed number of the first line in sourceCodeHtml.
+ */
+ function prettyPrintOne(sourceCodeHtml, opt_langExtension, opt_numberLines) {
+ var container = document.createElement('PRE');
+ // This could cause images to load and onload listeners to fire.
+ // E.g. <img onerror="alert(1337)" src="nosuchimage.png">.
+ // We assume that the inner HTML is from a trusted source.
+ container.innerHTML = sourceCodeHtml;
+ if (opt_numberLines) {
+ numberLines(container, opt_numberLines);
+ }
+
+ var job = {
+ langExtension: opt_langExtension,
+ numberLines: opt_numberLines,
+ sourceNode: container
+ };
+ applyDecorator(job);
+ return container.innerHTML;
+ }
+
+ function prettyPrint(opt_whenDone) {
+ function byTagName(tn) { return document.getElementsByTagName(tn); }
+ // fetch a list of nodes to rewrite
+ var codeSegments = [byTagName('pre'), byTagName('code'), byTagName('xmp')];
+ var elements = [];
+ for (var i = 0; i < codeSegments.length; ++i) {
+ for (var j = 0, n = codeSegments[i].length; j < n; ++j) {
+ elements.push(codeSegments[i][j]);
+ }
+ }
+ codeSegments = null;
+
+ var clock = Date;
+ if (!clock['now']) {
+ clock = { 'now': function () { return (new Date).getTime(); } };
+ }
+
+ // The loop is broken into a series of continuations to make sure that we
+ // don't make the browser unresponsive when rewriting a large page.
+ var k = 0;
+ var prettyPrintingJob;
+
+ function doWork() {
+ var endTime = (window['PR_SHOULD_USE_CONTINUATION'] ?
+ clock.now() + 250 /* ms */ :
+ Infinity);
+ for (; k < elements.length && clock.now() < endTime; k++) {
+ var cs = elements[k];
+ if (cs.className && cs.className.indexOf('prettyprint') >= 0) {
+ // If the classes includes a language extensions, use it.
+ // Language extensions can be specified like
+ // <pre class="prettyprint lang-cpp">
+ // the language extension "cpp" is used to find a language handler as
+ // passed to PR.registerLangHandler.
+ var langExtension = cs.className.match(/\blang-(\w+)\b/);
+ if (langExtension) { langExtension = langExtension[1]; }
+
+ // make sure this is not nested in an already prettified element
+ var nested = false;
+ for (var p = cs.parentNode; p; p = p.parentNode) {
+ if ((p.tagName === 'pre' || p.tagName === 'code' ||
+ p.tagName === 'xmp') &&
+ p.className && p.className.indexOf('prettyprint') >= 0) {
+ nested = true;
+ break;
+ }
+ }
+ if (!nested) {
+ // Look for a class like linenums or linenums:<n> where <n> is the
+ // 1-indexed number of the first line.
+ var lineNums = cs.className.match(/\blinenums\b(?::(\d+))?/);
+ lineNums = lineNums
+ ? lineNums[1] && lineNums[1].length ? +lineNums[1] : true
+ : false;
+ if (lineNums) { numberLines(cs, lineNums); }
+
+ // do the pretty printing
+ prettyPrintingJob = {
+ langExtension: langExtension,
+ sourceNode: cs,
+ numberLines: lineNums
+ };
+ applyDecorator(prettyPrintingJob);
+ }
+ }
+ }
+ if (k < elements.length) {
+ // finish up in a continuation
+ setTimeout(doWork, 250);
+ } else if (opt_whenDone) {
+ opt_whenDone();
+ }
+ }
+
+ doWork();
+ }
+
+ window['prettyPrintOne'] = prettyPrintOne;
+ window['prettyPrint'] = prettyPrint;
+ window['PR'] = {
+ 'createSimpleLexer': createSimpleLexer,
+ 'registerLangHandler': registerLangHandler,
+ 'sourceDecorator': sourceDecorator,
+ 'PR_ATTRIB_NAME': PR_ATTRIB_NAME,
+ 'PR_ATTRIB_VALUE': PR_ATTRIB_VALUE,
+ 'PR_COMMENT': PR_COMMENT,
+ 'PR_DECLARATION': PR_DECLARATION,
+ 'PR_KEYWORD': PR_KEYWORD,
+ 'PR_LITERAL': PR_LITERAL,
+ 'PR_NOCODE': PR_NOCODE,
+ 'PR_PLAIN': PR_PLAIN,
+ 'PR_PUNCTUATION': PR_PUNCTUATION,
+ 'PR_SOURCE': PR_SOURCE,
+ 'PR_STRING': PR_STRING,
+ 'PR_TAG': PR_TAG,
+ 'PR_TYPE': PR_TYPE
+ };
+})();
diff --git a/html5slides/slides.js b/html5slides/slides.js
new file mode 100644
index 0000000..c9db703
--- /dev/null
+++ b/html5slides/slides.js
@@ -0,0 +1,645 @@
+/*
+ Google HTML5 slides template
+
+ Authors: Luke Mahé (code)
+ Marcin Wichary (code and design)
+
+ Dominic Mazzoni (browser compatibility)
+ Charles Chen (ChromeVox support)
+
+ URL: http://code.google.com/p/html5slides/
+*/
+
+var PERMANENT_URL_PREFIX = 'html5slides/';
+
+var SLIDE_CLASSES = ['far-past', 'past', 'current', 'next', 'far-next'];
+
+var PM_TOUCH_SENSITIVITY = 15;
+
+var curSlide;
+
+/* ---------------------------------------------------------------------- */
+/* classList polyfill by Eli Grey
+ * (http://purl.eligrey.com/github/classList.js/blob/master/classList.js) */
+
+if (typeof document !== "undefined" && !("classList" in document.createElement("a"))) {
+
+(function (view) {
+
+var
+ classListProp = "classList"
+ , protoProp = "prototype"
+ , elemCtrProto = (view.HTMLElement || view.Element)[protoProp]
+ , objCtr = Object
+ strTrim = String[protoProp].trim || function () {
+ return this.replace(/^\s+|\s+$/g, "");
+ }
+ , arrIndexOf = Array[protoProp].indexOf || function (item) {
+ for (var i = 0, len = this.length; i < len; i++) {
+ if (i in this && this[i] === item) {
+ return i;
+ }
+ }
+ return -1;
+ }
+ // Vendors: please allow content code to instantiate DOMExceptions
+ , DOMEx = function (type, message) {
+ this.name = type;
+ this.code = DOMException[type];
+ this.message = message;
+ }
+ , checkTokenAndGetIndex = function (classList, token) {
+ if (token === "") {
+ throw new DOMEx(
+ "SYNTAX_ERR"
+ , "An invalid or illegal string was specified"
+ );
+ }
+ if (/\s/.test(token)) {
+ throw new DOMEx(
+ "INVALID_CHARACTER_ERR"
+ , "String contains an invalid character"
+ );
+ }
+ return arrIndexOf.call(classList, token);
+ }
+ , ClassList = function (elem) {
+ var
+ trimmedClasses = strTrim.call(elem.className)
+ , classes = trimmedClasses ? trimmedClasses.split(/\s+/) : []
+ ;
+ for (var i = 0, len = classes.length; i < len; i++) {
+ this.push(classes[i]);
+ }
+ this._updateClassName = function () {
+ elem.className = this.toString();
+ };
+ }
+ , classListProto = ClassList[protoProp] = []
+ , classListGetter = function () {
+ return new ClassList(this);
+ }
+;
+// Most DOMException implementations don't allow calling DOMException's toString()
+// on non-DOMExceptions. Error's toString() is sufficient here.
+DOMEx[protoProp] = Error[protoProp];
+classListProto.item = function (i) {
+ return this[i] || null;
+};
+classListProto.contains = function (token) {
+ token += "";
+ return checkTokenAndGetIndex(this, token) !== -1;
+};
+classListProto.add = function (token) {
+ token += "";
+ if (checkTokenAndGetIndex(this, token) === -1) {
+ this.push(token);
+ this._updateClassName();
+ }
+};
+classListProto.remove = function (token) {
+ token += "";
+ var index = checkTokenAndGetIndex(this, token);
+ if (index !== -1) {
+ this.splice(index, 1);
+ this._updateClassName();
+ }
+};
+classListProto.toggle = function (token) {
+ token += "";
+ if (checkTokenAndGetIndex(this, token) === -1) {
+ this.add(token);
+ } else {
+ this.remove(token);
+ }
+};
+classListProto.toString = function () {
+ return this.join(" ");
+};
+
+if (objCtr.defineProperty) {
+ var classListPropDesc = {
+ get: classListGetter
+ , enumerable: true
+ , configurable: true
+ };
+ try {
+ objCtr.defineProperty(elemCtrProto, classListProp, classListPropDesc);
+ } catch (ex) { // IE 8 doesn't support enumerable:true
+ if (ex.number === -0x7FF5EC54) {
+ classListPropDesc.enumerable = false;
+ objCtr.defineProperty(elemCtrProto, classListProp, classListPropDesc);
+ }
+ }
+} else if (objCtr[protoProp].__defineGetter__) {
+ elemCtrProto.__defineGetter__(classListProp, classListGetter);
+}
+
+}(self));
+
+}
+/* ---------------------------------------------------------------------- */
+
+/* Slide movement */
+
+function getSlideEl(no) {
+ if ((no < 0) || (no >= slideEls.length)) {
+ return null;
+ } else {
+ return slideEls[no];
+ }
+};
+
+function updateSlideClass(slideNo, className) {
+ var el = getSlideEl(slideNo);
+
+ if (!el) {
+ return;
+ }
+
+ if (className) {
+ el.classList.add(className);
+ }
+
+ for (var i in SLIDE_CLASSES) {
+ if (className != SLIDE_CLASSES[i]) {
+ el.classList.remove(SLIDE_CLASSES[i]);
+ }
+ }
+};
+
+function updateSlides() {
+ for (var i = 0; i < slideEls.length; i++) {
+ switch (i) {
+ case curSlide - 2:
+ updateSlideClass(i, 'far-past');
+ break;
+ case curSlide - 1:
+ updateSlideClass(i, 'past');
+ break;
+ case curSlide:
+ updateSlideClass(i, 'current');
+ break;
+ case curSlide + 1:
+ updateSlideClass(i, 'next');
+ break;
+ case curSlide + 2:
+ updateSlideClass(i, 'far-next');
+ break;
+ default:
+ updateSlideClass(i);
+ break;
+ }
+ }
+
+ triggerLeaveEvent(curSlide - 1);
+ triggerEnterEvent(curSlide);
+
+ window.setTimeout(function() {
+ // Hide after the slide
+ disableSlideFrames(curSlide - 2);
+ }, 301);
+
+ enableSlideFrames(curSlide - 1);
+ enableSlideFrames(curSlide + 2);
+
+ if (isChromeVoxActive()) {
+ speakAndSyncToNode(slideEls[curSlide]);
+ }
+
+ updateHash();
+};
+
+function buildNextItem() {
+ var toBuild = slideEls[curSlide].querySelectorAll('.to-build');
+
+ if (!toBuild.length) {
+ return false;
+ }
+
+ toBuild[0].classList.remove('to-build', '');
+
+ if (isChromeVoxActive()) {
+ speakAndSyncToNode(toBuild[0]);
+ }
+
+ return true;
+};
+
+function prevSlide() {
+ if (curSlide > 0) {
+ curSlide--;
+
+ updateSlides();
+ }
+};
+
+function nextSlide() {
+ if (buildNextItem()) {
+ return;
+ }
+
+ if (curSlide < slideEls.length - 1) {
+ curSlide++;
+
+ updateSlides();
+ }
+};
+
+/* Slide events */
+
+function triggerEnterEvent(no) {
+ var el = getSlideEl(no);
+ if (!el) {
+ return;
+ }
+
+ var onEnter = el.getAttribute('onslideenter');
+ if (onEnter) {
+ new Function(onEnter).call(el);
+ }
+
+ var evt = document.createEvent('Event');
+ evt.initEvent('slideenter', true, true);
+ evt.slideNumber = no + 1; // Make it readable
+
+ el.dispatchEvent(evt);
+};
+
+function triggerLeaveEvent(no) {
+ var el = getSlideEl(no);
+ if (!el) {
+ return;
+ }
+
+ var onLeave = el.getAttribute('onslideleave');
+ if (onLeave) {
+ new Function(onLeave).call(el);
+ }
+
+ var evt = document.createEvent('Event');
+ evt.initEvent('slideleave', true, true);
+ evt.slideNumber = no + 1; // Make it readable
+
+ el.dispatchEvent(evt);
+};
+
+/* Touch events */
+
+function handleTouchStart(event) {
+ if (event.touches.length == 1) {
+ touchDX = 0;
+ touchDY = 0;
+
+ touchStartX = event.touches[0].pageX;
+ touchStartY = event.touches[0].pageY;
+
+ document.body.addEventListener('touchmove', handleTouchMove, true);
+ document.body.addEventListener('touchend', handleTouchEnd, true);
+ }
+};
+
+function handleTouchMove(event) {
+ if (event.touches.length > 1) {
+ cancelTouch();
+ } else {
+ touchDX = event.touches[0].pageX - touchStartX;
+ touchDY = event.touches[0].pageY - touchStartY;
+ }
+};
+
+function handleTouchEnd(event) {
+ var dx = Math.abs(touchDX);
+ var dy = Math.abs(touchDY);
+
+ if ((dx > PM_TOUCH_SENSITIVITY) && (dy < (dx * 2 / 3))) {
+ if (touchDX > 0) {
+ prevSlide();
+ } else {
+ nextSlide();
+ }
+ }
+
+ cancelTouch();
+};
+
+function cancelTouch() {
+ document.body.removeEventListener('touchmove', handleTouchMove, true);
+ document.body.removeEventListener('touchend', handleTouchEnd, true);
+};
+
+/* Preloading frames */
+
+function disableSlideFrames(no) {
+ var el = getSlideEl(no);
+ if (!el) {
+ return;
+ }
+
+ var frames = el.getElementsByTagName('iframe');
+ for (var i = 0, frame; frame = frames[i]; i++) {
+ disableFrame(frame);
+ }
+};
+
+function enableSlideFrames(no) {
+ var el = getSlideEl(no);
+ if (!el) {
+ return;
+ }
+
+ var frames = el.getElementsByTagName('iframe');
+ for (var i = 0, frame; frame = frames[i]; i++) {
+ enableFrame(frame);
+ }
+};
+
+function disableFrame(frame) {
+ frame.src = 'about:blank';
+};
+
+function enableFrame(frame) {
+ var src = frame._src;
+
+ if (frame.src != src && src != 'about:blank') {
+ frame.src = src;
+ }
+};
+
+function setupFrames() {
+ var frames = document.querySelectorAll('iframe');
+ for (var i = 0, frame; frame = frames[i]; i++) {
+ frame._src = frame.src;
+ disableFrame(frame);
+ }
+
+ enableSlideFrames(curSlide);
+ enableSlideFrames(curSlide + 1);
+ enableSlideFrames(curSlide + 2);
+};
+
+function setupInteraction() {
+ /* Clicking and tapping */
+
+ var el = document.createElement('div');
+ el.className = 'slide-area';
+ el.id = 'prev-slide-area';
+ el.addEventListener('click', prevSlide, false);
+ document.querySelector('section.slides').appendChild(el);
+
+ var el = document.createElement('div');
+ el.className = 'slide-area';
+ el.id = 'next-slide-area';
+ el.addEventListener('click', nextSlide, false);
+ document.querySelector('section.slides').appendChild(el);
+
+ /* Swiping */
+
+ document.body.addEventListener('touchstart', handleTouchStart, false);
+}
+
+/* ChromeVox support */
+
+function isChromeVoxActive() {
+ if (typeof(cvox) == 'undefined') {
+ return false;
+ } else {
+ return true;
+ }
+};
+
+function speakAndSyncToNode(node) {
+ if (!isChromeVoxActive()) {
+ return;
+ }
+
+ cvox.ChromeVox.navigationManager.switchToStrategy(
+ cvox.ChromeVoxNavigationManager.STRATEGIES.LINEARDOM, 0, true);
+ cvox.ChromeVox.navigationManager.syncToNode(node);
+ cvox.ChromeVoxUserCommands.finishNavCommand('');
+ var target = node;
+ while (target.firstChild) {
+ target = target.firstChild;
+ }
+ cvox.ChromeVox.navigationManager.syncToNode(target);
+};
+
+function speakNextItem() {
+ if (!isChromeVoxActive()) {
+ return;
+ }
+
+ cvox.ChromeVox.navigationManager.switchToStrategy(
+ cvox.ChromeVoxNavigationManager.STRATEGIES.LINEARDOM, 0, true);
+ cvox.ChromeVox.navigationManager.next(true);
+ if (!cvox.DomUtil.isDescendantOfNode(
+ cvox.ChromeVox.navigationManager.getCurrentNode(), slideEls[curSlide])){
+ var target = slideEls[curSlide];
+ while (target.firstChild) {
+ target = target.firstChild;
+ }
+ cvox.ChromeVox.navigationManager.syncToNode(target);
+ cvox.ChromeVox.navigationManager.next(true);
+ }
+ cvox.ChromeVoxUserCommands.finishNavCommand('');
+};
+
+function speakPrevItem() {
+ if (!isChromeVoxActive()) {
+ return;
+ }
+
+ cvox.ChromeVox.navigationManager.switchToStrategy(
+ cvox.ChromeVoxNavigationManager.STRATEGIES.LINEARDOM, 0, true);
+ cvox.ChromeVox.navigationManager.previous(true);
+ if (!cvox.DomUtil.isDescendantOfNode(
+ cvox.ChromeVox.navigationManager.getCurrentNode(), slideEls[curSlide])){
+ var target = slideEls[curSlide];
+ while (target.lastChild){
+ target = target.lastChild;
+ }
+ cvox.ChromeVox.navigationManager.syncToNode(target);
+ cvox.ChromeVox.navigationManager.previous(true);
+ }
+ cvox.ChromeVoxUserCommands.finishNavCommand('');
+};
+
+/* Hash functions */
+
+function getCurSlideFromHash() {
+ var slideNo = parseInt(location.hash.substr(1));
+
+ if (slideNo) {
+ curSlide = slideNo - 1;
+ } else {
+ curSlide = 0;
+ }
+};
+
+function updateHash() {
+ location.replace('#' + (curSlide + 1));
+};
+
+/* Event listeners */
+
+function handleBodyKeyDown(event) {
+ switch (event.keyCode) {
+ case 39: // right arrow
+ case 13: // Enter
+ case 32: // space
+ case 34: // PgDn
+ nextSlide();
+ event.preventDefault();
+ break;
+
+ case 37: // left arrow
+ case 8: // Backspace
+ case 33: // PgUp
+ prevSlide();
+ event.preventDefault();
+ break;
+
+ case 40: // down arrow
+ if (isChromeVoxActive()) {
+ speakNextItem();
+ } else {
+ nextSlide();
+ }
+ event.preventDefault();
+ break;
+
+ case 38: // up arrow
+ if (isChromeVoxActive()) {
+ speakPrevItem();
+ } else {
+ prevSlide();
+ }
+ event.preventDefault();
+ break;
+ }
+};
+
+function addEventListeners() {
+ document.addEventListener('keydown', handleBodyKeyDown, false);
+};
+
+/* Initialization */
+
+function addPrettify() {
+ var els = document.querySelectorAll('pre');
+ for (var i = 0, el; el = els[i]; i++) {
+ if (!el.classList.contains('noprettyprint')) {
+ el.classList.add('prettyprint');
+ }
+ }
+
+ var el = document.createElement('script');
+ el.type = 'text/javascript';
+ el.src = PERMANENT_URL_PREFIX + 'prettify.js';
+ el.onload = function() {
+ prettyPrint();
+ }
+ document.body.appendChild(el);
+};
+
+function addFontStyle() {
+ var el = document.createElement('link');
+ el.rel = 'stylesheet';
+ el.type = 'text/css';
+ el.href = 'http://fonts.googleapis.com/css?family=' +
+ 'Open+Sans:regular,semibold,italic,italicsemibold|Droid+Sans+Mono';
+
+ document.body.appendChild(el);
+};
+
+function addGeneralStyle() {
+ var el = document.createElement('link');
+ el.rel = 'stylesheet';
+ el.type = 'text/css';
+ el.href = PERMANENT_URL_PREFIX + 'styles.css';
+ document.body.appendChild(el);
+
+ var el = document.createElement('meta');
+ el.name = 'viewport';
+ el.content = 'width=1100,height=750';
+ document.querySelector('head').appendChild(el);
+
+ var el = document.createElement('meta');
+ el.name = 'apple-mobile-web-app-capable';
+ el.content = 'yes';
+ document.querySelector('head').appendChild(el);
+};
+
+function makeBuildLists() {
+ for (var i = curSlide, slide; slide = slideEls[i]; i++) {
+ var items = slide.querySelectorAll('.build > *');
+ for (var j = 0, item; item = items[j]; j++) {
+ if (item.classList) {
+ item.classList.add('to-build');
+ }
+ }
+ }
+};
+
+function addSlideNumbers() {
+ for (var i = 0, slide, num; slide = slideEls[i]; i++) {
+ var num = document.createElement('span');
+ num.className = 'slide-number';
+ num.innerHTML = i + 1;
+ slide.appendChild(num);
+ }
+}
+
+function handleDomLoaded() {
+ slideEls = document.querySelectorAll('section.slides > article');
+
+ addSlideNumbers();
+
+ setupFrames();
+
+ addFontStyle();
+ addGeneralStyle();
+ addPrettify();
+ addEventListeners();
+
+ updateSlides();
+
+ setupInteraction();
+ makeBuildLists();
+
+ document.body.classList.add('loaded');
+};
+
+function initialize() {
+ getCurSlideFromHash();
+
+ if (window['_DEBUG']) {
+ PERMANENT_URL_PREFIX = '../';
+ }
+
+ if (window['_DCL']) {
+ handleDomLoaded();
+ } else {
+ document.addEventListener('DOMContentLoaded', handleDomLoaded, false);
+ }
+}
+
+// If ?debug exists then load the script relative instead of absolute
+if (!window['_DEBUG'] && document.location.href.indexOf('?debug') !== -1) {
+ document.addEventListener('DOMContentLoaded', function() {
+ // Avoid missing the DomContentLoaded event
+ window['_DCL'] = true
+ }, false);
+
+ window['_DEBUG'] = true;
+ var script = document.createElement('script');
+ script.type = 'text/javascript';
+ script.src = '../slides.js';
+ var s = document.getElementsByTagName('script')[0];
+ s.parentNode.insertBefore(script, s);
+
+ // Remove this script
+ s.parentNode.removeChild(s);
+} else {
+ initialize();
+}
diff --git a/html5slides/styles.css b/html5slides/styles.css
new file mode 100644
index 0000000..0f9fa1b
--- /dev/null
+++ b/html5slides/styles.css
@@ -0,0 +1,645 @@
+/*
+ Google HTML5 slides template
+
+ Authors: Luke Mahé (code)
+ Marcin Wichary (code and design)
+
+ Dominic Mazzoni (browser compatibility)
+ Charles Chen (ChromeVox support)
+
+ URL: http://code.google.com/p/html5slides/
+*/
+
+/* Framework */
+
+html {
+ height: 100%;
+}
+
+body {
+ margin: 0;
+ padding: 0;
+
+ display: block !important;
+
+ height: 100%;
+ min-height: 740px;
+
+ overflow-x: hidden;
+ overflow-y: auto;
+
+ background: rgb(215, 215, 215);
+ background: -o-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
+ background: -moz-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
+ background: -webkit-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
+ background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 500, from(rgb(240, 240, 240)), to(rgb(190, 190, 190)));
+
+ -webkit-font-smoothing: antialiased;
+}
+
+.slides {
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+
+ position: absolute;
+
+ -webkit-transform: translate3d(0, 0, 0);
+ -webkit-perspective: 1000px;
+}
+
+.slides > article {
+ display: block;
+
+ position: absolute;
+ overflow: hidden;
+
+ width: 900px;
+ height: 700px;
+
+ left: 50%;
+ top: 50%;
+
+ margin-left: -450px;
+ margin-top: -350px;
+
+ padding: 40px 60px;
+
+ box-sizing: border-box;
+ -o-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+
+ border-radius: 10px;
+ -o-border-radius: 10px;
+ -moz-border-radius: 10px;
+ -webkit-border-radius: 10px;
+
+ background-color: white;
+
+ box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
+ border: 1px solid rgba(0, 0, 0, .3);
+
+ /*transition: transform .3s ease-out, opacity .3s;*/
+ /*-o-transition: -o-transform .3s ease-out, opacity .3s;*/
+ /*-moz-transition: -moz-transform .3s ease-out, opacity .3s;*/
+ /*-webkit-transition: -webkit-transform .5s ease-out, opacity .5s;*/
+}
+.slides.layout-widescreen > article {
+ margin-left: -550px;
+ width: 1100px;
+}
+.slides.layout-faux-widescreen > article {
+ margin-left: -550px;
+ width: 1100px;
+
+ padding: 40px 160px;
+}
+
+.slides.template-default > article:not(.nobackground):not(.biglogo) {
+ background: url(images/google-logo-small.png) 710px 625px no-repeat;
+
+ background-color: white;
+}
+
+.slides.template-io2011 > article:not(.nobackground):not(.biglogo) {
+ background: url(images/colorbar.png) 0 600px repeat-x,
+ url(images/googleio-logo.png) 640px 625px no-repeat;
+
+ background-size: 100%, 225px;
+
+ background-color: white;
+}
+.slides.layout-widescreen > article:not(.nobackground):not(.biglogo),
+.slides.layout-faux-widescreen > article:not(.nobackground):not(.biglogo) {
+ background-position-x: 0, 840px;
+}
+
+/* Clickable/tappable areas */
+
+.slide-area {
+ z-index: 1000;
+
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 150px;
+ height: 700px;
+
+ left: 50%;
+ top: 50%;
+
+ cursor: pointer;
+ margin-top: -350px;
+
+ tap-highlight-color: transparent;
+ -o-tap-highlight-color: transparent;
+ -moz-tap-highlight-color: transparent;
+ -webkit-tap-highlight-color: transparent;
+}
+#prev-slide-area {
+ margin-left: -550px;
+}
+#next-slide-area {
+ margin-left: 400px;
+}
+.slides.layout-widescreen #prev-slide-area,
+.slides.layout-faux-widescreen #prev-slide-area {
+ margin-left: -650px;
+}
+.slides.layout-widescreen #next-slide-area,
+.slides.layout-faux-widescreen #next-slide-area {
+ margin-left: 500px;
+}
+
+/* Slide styles */
+
+.slides.template-default article.biglogo {
+ background: white url(images/google-logo.png) 50% 50% no-repeat;
+}
+
+.slides.template-io2011 article.biglogo {
+ background: white url(images/googleio-logo.png) 50% 50% no-repeat;
+
+ background-size: 600px;
+}
+
+/* Slides */
+
+.slides > article {
+ display: none;
+}
+.slides > article.current {
+ display: block;
+ z-index: 2;
+}
+/*
+.slides > article.far-past {
+ display: block;
+ transform: translate(-2040px) scale(.25);
+ -o-transform: translate(-2040px) scale(.25);
+ -moz-transform: translate(-2040px) scale(.25);
+ -webkit-transform: translate3d(-2040px, 0, 0) scale(.25);
+ opacity: 0;
+}
+.slides > article.past {
+ display: block;
+ transform: translate(-780px) scale(.5);
+ -o-transform: translate(-780px) scale(.5);
+ -moz-transform: translate(-780px) scale(.5);
+ -webkit-transform: translate3d(-780px, 0, 0) scale(.5);
+ opacity: .25;
+}
+.slides > article.current {
+ display: block;
+ transform: translate(0);
+ -o-transform: translate(0);
+ -moz-transform: translate(0);
+ -webkit-transform: translate3d(0, 0, 0);
+}
+.slides > article.next {
+ display: block;
+ transform: translate(780px) scale(.5);
+ -o-transform: translate(780px) scale(.5);
+ -moz-transform: translate(780px) scale(.5);
+ -webkit-transform: translate3d(780px, 0, 0) scale(.5);
+ opacity: .25;
+}
+.slides > article.far-next {
+ display: block;
+ transform: translate(2040px) scale(.25);
+ -o-transform: translate(2040px) scale(.25);
+ -moz-transform: translate(2040px) scale(.25);
+ -webkit-transform: translate3d(2040px, 0, 0) scale(.25);
+ opacity: 0;
+}
+*/
+
+.slides.layout-widescreen > article.far-past,
+.slides.layout-faux-widescreen > article.far-past {
+ display: block;
+ transform: translate(-2260px);
+ -o-transform: translate(-2260px);
+ -moz-transform: translate(-2260px);
+ -webkit-transform: translate3d(-2260px, 0, 0);
+}
+.slides.layout-widescreen > article.past,
+.slides.layout-faux-widescreen > article.past {
+ display: block;
+ transform: translate(-1130px);
+ -o-transform: translate(-1130px);
+ -moz-transform: translate(-1130px);
+ -webkit-transform: translate3d(-1130px, 0, 0);
+}
+.slides.layout-widescreen > article.current,
+.slides.layout-faux-widescreen > article.current {
+ display: block;
+ transform: translate(0);
+ -o-transform: translate(0);
+ -moz-transform: translate(0);
+ -webkit-transform: translate3d(0, 0, 0);
+}
+.slides.layout-widescreen > article.next,
+.slides.layout-faux-widescreen > article.next {
+ display: block;
+ transform: translate(1130px);
+ -o-transform: translate(1130px);
+ -moz-transform: translate(1130px);
+ -webkit-transform: translate3d(1130px, 0, 0);
+}
+.slides.layout-widescreen > article.far-next,
+.slides.layout-faux-widescreen > article.far-next {
+ display: block;
+ transform: translate(2260px);
+ -o-transform: translate(2260px);
+ -moz-transform: translate(2260px);
+ -webkit-transform: translate3d(2260px, 0, 0);
+}
+
+/* Styles for slides */
+
+.slides > article {
+ font-family: 'Open Sans', Arial, sans-serif;
+
+ color: rgb(102, 102, 102);
+ text-shadow: 0 1px 1px rgba(0, 0, 0, .1);
+
+ font-size: 30px;
+ line-height: 36px;
+
+ letter-spacing: -1px;
+}
+
+b {
+ font-weight: 600;
+}
+
+.blue {
+ color: rgb(0, 102, 204);
+}
+.yellow {
+ color: rgb(255, 211, 25);
+}
+.green {
+ color: rgb(0, 138, 53);
+}
+.red {
+ color: rgb(255, 0, 0);
+}
+.black {
+ color: black;
+}
+.white {
+ color: white;
+}
+
+a {
+ color: rgb(0, 102, 204);
+}
+a:visited {
+ color: rgba(0, 102, 204, .75);
+}
+a:hover {
+ color: black;
+}
+
+p {
+ margin: 0;
+ padding: 0;
+
+ margin-top: 20px;
+}
+p:first-child {
+ margin-top: 0;
+}
+
+h1 {
+ font-size: 60px;
+ line-height: 60px;
+
+ padding: 0;
+ margin: 0;
+ margin-top: 200px;
+ padding-right: 40px;
+
+ font-weight: 600;
+
+ letter-spacing: -3px;
+
+ color: rgb(51, 51, 51);
+}
+
+h2 {
+ font-size: 45px;
+ line-height: 45px;
+
+ position: absolute;
+ bottom: 150px;
+
+ padding: 0;
+ margin: 0;
+ padding-right: 40px;
+
+ font-weight: 600;
+
+ letter-spacing: -2px;
+
+ color: rgb(51, 51, 51);
+}
+
+h3 {
+ font-size: 30px;
+ line-height: 36px;
+
+ padding: 0;
+ margin: 0;
+ padding-right: 40px;
+
+ font-weight: 600;
+
+ letter-spacing: -1px;
+
+ color: rgb(51, 51, 51);
+}
+
+article.fill h3 {
+ background: rgba(255, 255, 255, .75);
+ padding-top: .2em;
+ padding-bottom: .3em;
+ margin-top: -.2em;
+ margin-left: -60px;
+ padding-left: 60px;
+ margin-right: -60px;
+ padding-right: 60px;
+}
+
+ul {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+
+ margin-top: 40px;
+
+ margin-left: .75em;
+}
+ul:first-child {
+ margin-top: 0;
+}
+ul ul {
+ margin-top: .5em;
+}
+li {
+ padding: 0;
+ margin: 0;
+
+ margin-bottom: .5em;
+}
+li::before {
+ content: '·';
+
+ width: .75em;
+ margin-left: -.75em;
+
+ position: absolute;
+}
+
+pre {
+ font-family: 'Droid Sans Mono', 'Courier New', monospace;
+
+ font-size: 20px;
+ line-height: 28px;
+ padding: 5px 10px;
+
+ letter-spacing: -1px;
+
+ margin-top: 40px;
+ margin-bottom: 40px;
+
+ color: black;
+ background: rgb(240, 240, 240);
+ border: 1px solid rgb(224, 224, 224);
+ box-shadow: inset 0 2px 6px rgba(0, 0, 0, .1);
+
+ overflow: hidden;
+}
+
+code {
+ font-size: 95%;
+ font-family: 'Droid Sans Mono', 'Courier New', monospace;
+
+ color: black;
+}
+
+iframe {
+ width: 100%;
+
+ height: 620px;
+
+ background: white;
+ border: 1px solid rgb(192, 192, 192);
+ margin: -1px;
+ /*box-shadow: inset 0 2px 6px rgba(0, 0, 0, .1);*/
+}
+
+h3 + iframe {
+ margin-top: 40px;
+ height: 540px;
+}
+
+article.fill iframe {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+
+ border: 0;
+ margin: 0;
+
+ border-radius: 10px;
+ -o-border-radius: 10px;
+ -moz-border-radius: 10px;
+ -webkit-border-radius: 10px;
+
+ z-index: -1;
+}
+
+article.fill img {
+ position: absolute;
+ left: 0;
+ top: 0;
+ min-width: 100%;
+ min-height: 100%;
+
+ border-radius: 10px;
+ -o-border-radius: 10px;
+ -moz-border-radius: 10px;
+ -webkit-border-radius: 10px;
+
+ z-index: -1;
+}
+article.shrink img {
+ position: absolute;
+ left: 0;
+ top: 0;
+ max-width: 100%;
+
+ border-radius: 10px;
+ -o-border-radius: 10px;
+ -moz-border-radius: 10px;
+ -webkit-border-radius: 10px;
+
+ z-index: -1;
+}
+img.centered {
+ margin: 0 auto;
+ display: block;
+}
+
+table {
+ width: 100%;
+ border-collapse: collapse;
+ margin-top: 40px;
+}
+th {
+ font-weight: 600;
+ text-align: left;
+}
+td,
+th {
+ border: 1px solid rgb(224, 224, 224);
+ padding: 5px 10px;
+ vertical-align: top;
+}
+
+.source {
+ position: absolute;
+ left: 60px;
+ top: 644px;
+ padding-right: 175px;
+
+ font-size: 15px;
+ letter-spacing: 0;
+ line-height: 18px;
+}
+
+q {
+ display: block;
+ font-size: 60px;
+ line-height: 72px;
+
+ margin-left: 20px;
+
+ margin-top: 100px;
+ margin-right: 150px;
+}
+q::before {
+ content: '“';
+
+ position: absolute;
+ display: inline-block;
+ margin-left: -2.1em;
+ width: 2em;
+ text-align: right;
+
+ font-size: 90px;
+ color: rgb(192, 192, 192);
+}
+q::after {
+ content: '”';
+
+ position: absolute;
+ margin-left: .1em;
+
+ font-size: 90px;
+ color: rgb(192, 192, 192);
+}
+div.author {
+ text-align: right;
+ font-size: 40px;
+
+ margin-top: 20px;
+ margin-right: 150px;
+}
+div.author::before {
+ content: '—';
+}
+
+/* Size variants */
+
+article.smaller p,
+article.smaller ul {
+ font-size: 20px;
+ line-height: 24px;
+ letter-spacing: 0;
+}
+article.smaller table {
+ font-size: 20px;
+ line-height: 24px;
+ letter-spacing: 0;
+}
+article.smaller pre {
+ font-size: 15px;
+ line-height: 20px;
+ letter-spacing: 0;
+}
+article.smaller q {
+ font-size: 40px;
+ line-height: 48px;
+}
+article.smaller q::before,
+article.smaller q::after {
+ font-size: 60px;
+}
+
+/* Builds */
+
+.build > * {
+ transition: opacity 0.5s;
+ -o-transition: opacity 0.5s;
+ -moz-transition: opacity 0.5s;
+ -webkit-transition: opacity 0.5s;
+}
+
+.to-build {
+ opacity: 0;
+}
+
+/* Pretty print */
+
+.prettyprint .str, /* string content */
+.prettyprint .atv { /* a markup attribute value */
+ color: rgb(0, 138, 53);
+}
+.prettyprint .kwd, /* a keyword */
+.prettyprint .tag { /* a markup tag name */
+ color: rgb(0, 102, 204);
+}
+.prettyprint .com { /* a comment */
+ color: rgb(127, 127, 127);
+ font-style: italic;
+}
+.prettyprint .lit { /* a literal value */
+ color: rgb(127, 0, 0);
+}
+.prettyprint .pun, /* punctuation, lisp open bracket, lisp close bracket */
+.prettyprint .opn,
+.prettyprint .clo {
+ color: rgb(127, 127, 127);
+}
+.prettyprint .typ, /* a type name */
+.prettyprint .atn, /* a markup attribute name */
+.prettyprint .dec,
+.prettyprint .var { /* a declaration; a variable name */
+ color: rgb(127, 0, 127);
+}
+
+
+/* Slide number */
+.slide-number {
+ position: absolute;
+ bottom: .5em;
+ right: 1em;
+ opacity: 0.2;
+}
diff --git a/images/css3pie-logo.png b/images/css3pie-logo.png
new file mode 100644
index 0000000..e1aa1a3
Binary files /dev/null and b/images/css3pie-logo.png differ
diff --git a/images/css3pie-site.png b/images/css3pie-site.png
new file mode 100644
index 0000000..4bd185e
Binary files /dev/null and b/images/css3pie-site.png differ
diff --git a/images/flexie-playground.png b/images/flexie-playground.png
new file mode 100644
index 0000000..2d81d1f
Binary files /dev/null and b/images/flexie-playground.png differ
diff --git a/images/flexie-site.png b/images/flexie-site.png
new file mode 100644
index 0000000..8a0fdd8
Binary files /dev/null and b/images/flexie-site.png differ
diff --git a/images/ie678.jpg b/images/ie678.jpg
new file mode 100644
index 0000000..9a5d0d6
Binary files /dev/null and b/images/ie678.jpg differ
diff --git a/images/jquery.png b/images/jquery.png
new file mode 100644
index 0000000..669a7c4
Binary files /dev/null and b/images/jquery.png differ
diff --git a/images/modernizr.png b/images/modernizr.png
new file mode 100644
index 0000000..df25328
Binary files /dev/null and b/images/modernizr.png differ
diff --git a/images/prefixfree.png b/images/prefixfree.png
new file mode 100644
index 0000000..0525f1d
Binary files /dev/null and b/images/prefixfree.png differ
diff --git a/images/selectivizr-logo.png b/images/selectivizr-logo.png
new file mode 100644
index 0000000..8515d87
Binary files /dev/null and b/images/selectivizr-logo.png differ
diff --git a/images/selectivizr.png b/images/selectivizr.png
new file mode 100644
index 0000000..6df6c86
Binary files /dev/null and b/images/selectivizr.png differ
diff --git a/images/sencha-logo.png b/images/sencha-logo.png
new file mode 100644
index 0000000..90fe28b
Binary files /dev/null and b/images/sencha-logo.png differ
diff --git a/images/shiv.jpg b/images/shiv.jpg
new file mode 100644
index 0000000..69fc63c
Binary files /dev/null and b/images/shiv.jpg differ
diff --git a/images/spackle.png b/images/spackle.png
new file mode 100644
index 0000000..d064f6e
Binary files /dev/null and b/images/spackle.png differ
diff --git a/images/yepnope-logo.jpg b/images/yepnope-logo.jpg
new file mode 100644
index 0000000..545d752
Binary files /dev/null and b/images/yepnope-logo.jpg differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..032e1c0
--- /dev/null
+++ b/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+ <title>CSS Summit 2012 - CSS Polyfills - Jason Johnston</title>
+
+ <style type="text/css">
+ html {
+ font-family: sans-serif;
+ }
+ </style>
+
+</head>
+<body>
+
+ <h1>CSS Summit 2012 - CSS Polyfills - Jason Johnston</h1>
+
+ <ul>
+ <li><a href="slides.html">Slides</a></li>
+ <li><a href="demos/">Demos</a></li>
+ </ul>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/slides.html b/slides.html
new file mode 100644
index 0000000..1472032
--- /dev/null
+++ b/slides.html
@@ -0,0 +1,709 @@
+<!DOCTYPE html>
+
+<!--
+ Google HTML5 slide template
+
+ Authors: Luke Mahé (code)
+ Marcin Wichary (code and design)
+
+ Dominic Mazzoni (browser compatibility)
+ Charles Chen (ChromeVox support)
+
+ URL: http://code.google.com/p/html5slides/
+-->
+
+<html>
+<head>
+ <title>Presentation</title>
+
+ <meta charset='utf-8'>
+ <script src='html5slides/slides.js'></script>
+</head>
+
+<style>
+ article h3 {
+ margin-bottom: 1em;
+ }
+ article dfn {
+ font-weight: bold;
+ font-style: normal;
+ }
+
+ article ul ul:first-child {
+ margin-top: .5em;
+ }
+
+
+ #title h1 {
+ padding: 0;
+ margin: 115px 0 .5em;
+ }
+ #title img {
+ margin-top: 2em;
+ }
+
+ #title img:last-child {
+ float: right;
+ }
+
+
+ #defns q {
+ font-size: 40px;
+ margin-right: 0;
+ margin-top: 70px;
+ }
+
+
+ #etymology p {
+ padding-top: 65px;
+ padding-right: 300px;
+ }
+
+
+ .ielogo {
+ text-align: center;
+ }
+ .oldIE {
+ text-align: center;
+ font-size: 60px;
+ }
+ .newerBrowsers {
+ width: 630px;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+
+ #not-abstraction .abstraction {
+ font-size: 1.25em;
+ margin: 50px auto;
+ width: 230px;
+ height: 230px;
+ line-height: 230px;
+ text-align: center;
+ position: relative;
+ }
+ #not-abstraction .abstraction > .not {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ border: 10px solid red;
+ border-radius: 100%;
+ opacity: 0.8;
+ }
+ #not-abstraction .abstraction > .not:before {
+ content: "";
+ position: absolute;
+ top: 100px;
+ left: -5px;
+ background: red;
+ width: 220px;
+ height: 10px;
+ -webkit-transform: rotate(-45deg);
+ -moz-transform: rotate(-45deg);
+ transform: rotate(-45deg);
+ }
+
+ #modernizr-classes .prettyprint .atv {
+ opacity: 0.5;
+ }
+ #modernizr-classes .prettyprint strong .atv {
+ opacity: 1;
+ }
+
+ .offtopic {
+ opacity: 0.5;
+ }
+
+
+ #html5shiv img {
+ float: right;
+ margin-left: 20px;
+ width: 240px;
+ }
+ #html5shiv pre {
+ margin: 20px 0;
+ }
+
+ #prefixfree img,
+ #selectivizr img,
+ #css3pie img {
+ float: right;
+ }
+
+
+ .q-and-a {
+ font-size: 1.5em;
+ }
+
+
+ .no {
+ color: #C00;
+ }
+ .maybe {
+ color: #00C;
+ }
+ .yes {
+ color: #0C0;
+ }
+
+
+ #fin p {
+ text-align: right;
+ }
+</style>
+
+<body style='display: none'>
+
+<section class='slides layout-regular'>
+
+ <article id="title">
+ <h1>CSS Polyfills</h1>
+
+ <p>Jason Johnston</p>
+ <p>@lojjic, @css3pie</p>
+
+ <p>
+ <img src="images/sencha-logo.png" alt="Sencha" width="300"/>
+ <img src="images/css3pie-logo.png" alt="CSS3 PIE" width="194"/>
+ </p>
+ </article>
+
+
+
+ <article id="defns">
+ <h3>Whoziwhutzit?</h3>
+
+ <div class="build">
+ <p class="build">Also known as:
+ <span>
+ <span>shim</span><span>, shiv</span><span>, patch</span><span>, hack</span>
+ </span>
+ </p>
+ <p>Term <dfn>“polyfill”</dfn> coined by Remy Sharp:</p>
+ <p><q>a piece of code (or plugin) that provides the technology that you, the developer, expect the browser to provide natively</q></p>
+ </div>
+ </article>
+
+
+
+ <article id="etymology" class="fill">
+ <h3>Polyfill</h3>
+
+ <img src='images/spackle.png'>
+
+ <div class="build">
+ <p><dfn>FILL</dfn>: fills in missing <em>standard</em> features or APIs when not natively available</p>
+ <p><dfn>POLY</dfn>: can use multiple fallbacks depending on the browser and environment</p>
+ </div>
+ </article>
+
+
+
+ <article>
+ <h3>Why are they needed?</h3>
+ <div class="build">
+ <p class="ielogo"><img src="images/ie678.jpg" alt="IE 6, 7, 8"></p>
+ <p class="oldIE">“OldIE”</p>
+ <p class="newerBrowsers">...but also newer browsers, to keep up with the pace of new features.</p>
+ </div>
+ </article>
+
+
+
+ <article id="not-abstraction">
+ <h3>Wait a minute...</h3>
+ <p>Don't most libraries smooth out browser incompatibilities?</p>
+ <div class="build">
+ <p class="abstraction">Abstraction<span class="not"></span></p>
+ <p>You use <em>standard code</em>, not new APIs</p>
+ <p>Goal is to be invisible</p>
+ <p>Ultimate goal is to become <em>obsolete</em></p>
+ </div>
+ </article>
+
+
+
+ <article>
+ <h3>Reasons To Use A Polyfill</h3>
+ <ul>
+ <li>Expand your audience</li>
+ <li>Speed up development time</li>
+ <li>More time available for better things</li>
+ <li>Only have to learn one API</li>
+ <li>Smaller, simpler codebase</li>
+ <li>Stop hurting capable browsers!</li>
+ </ul>
+ </article>
+
+
+
+ <article>
+ <h3><img src="images/modernizr.png" alt="Modernizr" width="400"></h3>
+ <p><a href="http://modernizr.com">http://modernizr.com</a></p>
+
+ <ul class="build">
+ <li><em>Not</em> a polyfill!</li>
+ <li>Makes polyfills easier to use</li>
+ <li>Extensive feature detection library</li>
+ <li>Includes YepNope (<a href="http://yepnopejs.com">http://yepnopejs.com</a>)</li>
+ </ul>
+ </article>
+
+
+
+ <article id="modernizr-classes">
+ <h3><img src="images/modernizr.png" alt="Modernizr" width="400"></h3>
+
+<pre><code><html class="js <strong>no-flexbox no-flexbox-legacy</strong> no-canvas no-canvastext
+ no-webgl no-touch no-geolocation postmessage no-websqldatabase
+ no-indexeddb hashchange no-history draganddrop no-websockets
+ <strong>no-rgba no-hsla no-multiplebgs no-backgroundsize no-borderimage
+ no-borderradius no-boxshadow no-textshadow no-opacity
+ no-cssanimations no-csscolumns no-cssgradients no-cssreflections
+ no-csstransforms no-csstransforms3d no-csstransitions fontface
+ generatedcontent</strong> no-video no-audio no-localstorage
+ no-sessionstorage no-webworkers no-applicationcache no-svg
+ no-inlinesvg no-smil no-svgclippaths"></code></pre>
+ <ul>
+ <li>Many CSS3 features detected</li>
+ <li>Allows progressive enhancement, conditional polyfill fine-tuning</li>
+ </ul>
+ </article>
+
+
+
+ <article>
+ <h3><img src="images/modernizr.png" alt="Modernizr" width="400"></h3>
+
+ <p><img src="images/yepnope-logo.jpg" alt="YepNope.js" width="350"></p>
+
+ <p>Conditional loading of polyfill scripts</p>
+
+ <pre><code>Modernizr.load([{
+ test: Modernizr.flexbox,
+ nope: '/polyfills/flexie/flexie.js'
+}, ... ]);</code></pre>
+
+ <p>Most CSS polyfills have their own way of doing this</p>
+ </article>
+
+
+
+ <article>
+ <h3><img src="images/modernizr.png" alt="Modernizr" width="400"></h3>
+
+ <p>Also from the Modernizr community:</p>
+
+ <p><strong>The All-In-One Entirely-Not-Alphabetical No-Bullshit Guide to HTML5 Fallbacks</strong></p>
+
+ <p><a href="http://bit.ly/polyfills">http://bit.ly/polyfills</a></p>
+ </article>
+
+
+ <article>
+ <h3>Things Polyfills Do</h3>
+ <ul>
+ <li class="offtopic">HTML5 Elements</li>
+ <li class="offtopic">JavaScript Language Features</li>
+ <li class="offtopic">HTML5 JavaScript APIs</li>
+ <li>CSS Selectors</li>
+ <li>CSS Vendor Prefixes</li>
+ <li>CSS Rendering - box decorations, layout, transforms, etc.</li>
+ </ul>
+ </article>
+
+
+ <article>
+ <h3>Ways CSS Polyfills Work</h3>
+ <h4>1. Client-side CSS Parsing/Rewriting</h4>
+ <ul>
+ <li>For when CSS is not recognized by the browser
+ <ul>
+ <li>Advanced selectors</li>
+ <li>Media queries</li>
+ <li>Prefix insertion</li>
+ </ul>
+ </li>
+ <li>CSS fetched via XHR — same-domain limitation</li>
+ <li>Parsed via RegExp, rewritten, and original stylesheet replaced with new</li>
+ <li>Processing time grows with size of CSS</li>
+ </ul>
+ </article>
+
+
+ <article>
+ <h3>Ways CSS Polyfills Work</h3>
+ <h4>2. Server-side CSS Parsing/Rewriting</h4>
+ <ul>
+ <li>Some of the same scenarios as client-side</li>
+ <li>No extra client-side processing time</li>
+ <li>Limited by no access to the runtime environment</li>
+ <li>Conditionally load CSS to avoid hurting capable browsers</li>
+ </ul>
+ </article>
+
+
+ <article>
+ <h3>Ways CSS Polyfills Work</h3>
+ <h4>3. DOM Querying</h4>
+ <ul>
+ <li>DOM is traversed looking for certain elements/attributes, then modified</li>
+ <li>Often used along with client-side CSS parsing</li>
+ <li>Must wait for document ready</li>
+ <li>Best for static content, difficult responding to dynamic DOM changes</li>
+ </ul>
+ </article>
+
+
+ <article>
+ <h3>Ways CSS Polyfills Work</h3>
+ <h4>4. IE Behaviors (.htc)</h4>
+ <ul>
+ <li>Script attached to elements via CSS "behavior" property</li>
+ <li>IE only!</li>
+ <li>Responds automatically to insertion/deletion of content</li>
+ <li>Acts when <em>element</em> is ready, doesn't have to wait for whole document</li>
+ <li>Gotchas: same-domain limitation, content-type header, path relative to HTML file</li>
+ <li>Processing time grows with number of matching DOM elements</li>
+ </ul>
+ </article>
+ <article>
+ <h3>Ways CSS Polyfills Work</h3>
+ <h4>4. IE Behaviors (.htc)</h4>
+ <pre><code>.my-selector {
+ behavior: url(polyfill.htc);
+}</code></pre>
+
+ <pre><code><PUBLIC:COMPONENT lightWeight="true">
+<PUBLIC:ATTACH EVENT="oncontentready" FOR="element" ONEVENT="init()" />
+<PUBLIC:ATTACH EVENT="ondocumentready" FOR="element" ONEVENT="init()" />
+<PUBLIC:ATTACH EVENT="ondetach" FOR="element" ONEVENT="cleanup()" />
+
+<script type="text/javascript">
+//JS code
+</script>
+
+</PUBLIC:COMPONENT>
+</code></pre>
+ </article>
+
+
+
+ <article>
+ <h2>Let's explore a few...</h2>
+ </article>
+
+
+
+ <article id="html5shiv" class="smaller">
+ <h3>html5shim / html5shiv</h3>
+ <img src="images/shiv.jpg" class="shiv">
+ <p><a href="http://code.google.com/p/html5shiv/">http://code.google.com/p/html5shiv/</a></p>
+ <ul class="build">
+ <li>OldIE incorrectly parses unknown elements:
+<pre><code><section>
+ <p>...</p>
+</section></code></pre>
+ becomes
+<pre><code><section></section>
+<p>...</p></code></pre>
+ </li>
+ <li>...unless you <code>createElement</code> it!
+ <pre><code>document.createElement('section');</code></pre>
+ </li>
+ <li>Also fixes printing and adds default HTML5 element styles</li>
+ <li><pre><code><!--[if lt IE 9]>
+<script src="/polyfills/html5shiv.js"></script>
+<![endif]--></code></pre></li>
+ </ul>
+ </article>
+
+
+
+ <article id="selectivizr">
+ <img src="images/selectivizr-logo.png" alt="Selectivizr" width="300">
+ <h3>Selectivizr</h3>
+
+ <p><a href="http://selectivizr.com/">http://selectivizr.com/</a></p>
+
+ <ul>
+ <li>Parses CSS files for wide range of selectors</li>
+ <li>Queries document for elements matching those selectors</li>
+ <li>Uses one of many external JavaScript selector libraries</li>
+ <li>Runs on document ready, not dynamic</li>
+ </ul>
+ </article>
+
+ <article class="fill">
+ <img src="images/selectivizr.png" alt="Selectivizr Support Chart">
+ </article>
+
+
+ <article id="prefixfree">
+ <img src="images/prefixfree.png" alt="-prefix-free">
+ <h3>-prefix-free</h3>
+
+ <p><a href="http://leaverou.github.com/prefixfree/">http://leaverou.github.com/prefixfree/</a></p>
+
+ <ul>
+ <li>Polyfill for <em>modern browsers</em>, does nothing in OldIE</li>
+ <li>Fills in vendor-prefixed CSS3 property names and values so you don't have to</li>
+ <li>Translates final CSS3 gradient syntax to old ones</li>
+ <li>Loads stylesheets via XHR — same-domain limitation</li>
+ </ul>
+ </article>
+
+
+ <article>
+ <h3>Respond.js</h3>
+
+ <p><a href="https://github.com/scottjehl/Respond">https://github.com/scottjehl/Respond</a></p>
+
+ <ul>
+ <li>Adds support for min/max-width based CSS media queries back to IE6</li>
+ <li>Lightweight, no external dependencies</li>
+ </ul>
+ </article>
+
+
+ <article>
+ <h3>Flexie</h3>
+
+ <p><a href="http://flexiejs.com/">http://flexiejs.com/</a></p>
+
+ <ul>
+ <li>Implements CSS3 flexible box model in IE and Opera</li>
+ <li>Matches the old spec not the new</li>
+ <li>Uses Selectivizr's engine for parsing the CSS and querying for matching elements</li>
+ </ul>
+ </article>
+
+ <article class="fill">
+ <img src="images/flexie-site.png" alt="Flexie Site">
+ </article>
+
+ <article class="fill">
+ <img src="images/flexie-playground.png" alt="Flexie Playground">
+ </article>
+
+
+ <article>
+ <h3>CSS Sandpaper</h3>
+ <p><a href="https://github.com/zoltan-dulac/cssSandpaper">https://github.com/zoltan-dulac/cssSandpaper</a></p>
+
+ <ul>
+ <li>Maps CSS3 properties to IE filters
+ <ul>
+ <li><code>transform</code></li>
+ <li><code>box-shadow</code></li>
+ <li><code>linear-gradient</code></li>
+ <li><code>text-shadow</code></li>
+ <li><code>opacity</code></li>
+ </ul>
+ </li>
+ <li>Slightly non-standard code (<code>-sand-box-shadow</code> etc.)</li>
+ <li>Some filters do not render accurately</li>
+ </ul>
+ </article>
+
+
+ <article id="css3pie">
+ <img src="images/css3pie-logo.png" alt="CSS3 PIE">
+ <h3>CSS3 PIE</h3>
+
+ <p><a href="http://css3pie.com/">http://css3pie.com/</a></p>
+
+ <ul>
+ <li>Renders several CSS3 box decoration properties in IE 6-9:
+ <ul>
+ <li>border-radius</li>
+ <li>box-shadow</li>
+ <li>border-image</li>
+ <li>linear-gradient backgrounds</li>
+ <li>multiple backgrounds</li>
+ </ul>
+ </li>
+ <li>IE .htc behavior, or optional JS file</li>
+ <li>Renders using VML in OldIE, SVG in IE9</li>
+ </ul>
+ </article>
+
+ <article class="shrink">
+ <img src="images/css3pie-site.png" alt="CSS3 PIE Site">
+ </article>
+
+
+ <article>
+ <h2>Questions so far?</h2>
+ </article>
+
+
+
+ <article>
+ <h3>The big question</h3>
+
+ <div class="build q-and-a">
+ <p>Q: Should I use a polyfill?</p>
+ <p>A: It depends.</p>
+ </div>
+ </article>
+
+
+ <article>
+ <h3>Considerations</h3>
+ <ul>
+ <li>Browser stats of target audience</li>
+ <li>System speed of target audience</li>
+ <li>Performance impact of the polyfill</li>
+ <li>Performance impact of not using the polyfill</li>
+ <li>Compatibility of multiple polyfills</li>
+ <li>Debugging time</li>
+ <li>How necessary are the features?</li>
+ </ul>
+ </article>
+
+ <article>
+ <h3>Graceful Degradation</h3>
+ <ul class="build">
+ <li>Usually the best choice, but not always an option.</li>
+ <li>Don't forget the <em>graceful</em> part!</li>
+ <li>What will users do if their experience is degraded?</li>
+ <li><em>Users don't switch browsers, they switch sites.</em></li>
+ </ul>
+ </article>
+
+
+ <article>
+ <h3>Decisions, decisions...</h3>
+ <div class="build">
+ <p>1. “Is graceful degradation acceptable, or can I convince the necessary parties to allow it?”</p>
+ <p><span class="yes">YES?</span> Great, do it!</p>
+ <p><span class="no">NO?</span> ...</p>
+ </div>
+ </article>
+
+ <article>
+ <h3>Decisions, decisions...</h3>
+ <div class="build">
+ <p>2. “Would implementing the design require sending hacky markup, extra images, or dumbed-down code to capable browsers?”</p>
+ <p><span class="no">NO?</span> Then we're all good.</p>
+ <p><span class="yes">YES?</span> Then consider using a polyfill...</p>
+ </div>
+ </article>
+
+ <article>
+ <h3>Decisions, decisions...</h3>
+ <div class="build">
+ <p>3. “Would the polyfill create unacceptable performance or compatibility issues?”</p>
+ <p><span class="no">NO?</span> Yay! Polyfill FTW! :)</p>
+ <p><span class="yes">YES?</span> Sorry, you're on your own. :(</p>
+ </div>
+ </article>
+
+
+
+ <article>
+ <h3>Assessing Performance</h3>
+
+ <p><em>Polyfill creators don't typically publish performance stats; it's up to you to measure.</em></p>
+
+ <h4>Common Factors</h4>
+ <ul>
+ <li>Most polyfills use JavaScript which will always be slower than native</li>
+ <li>Old browsers are also those with the slowest JS / DOM / rendering engines</li>
+ <li>Downloading polyfill code takes time; always check its size</li>
+ </ul>
+ </article>
+
+
+ <article>
+ <h3>Assessing Performance</h3>
+
+ <h4>Polyfills that rewrite CSS</h4>
+ <ul>
+ <li>Usually fetch the CSS via XHR, might not be cached</li>
+ <li>RegExp parsing can be slow</li>
+ <li>Parsing time grows with size of the CSS file</li>
+ <li>Original CSS might already have been parsed and applied by the browser</li>
+ </ul>
+ </article>
+
+ <article>
+ <h3>Assessing Performance</h3>
+
+ <h4>Polyfills that query the DOM</h4>
+ <ul>
+ <li>IE < 8 does not have <code>querySelectorAll</code>, must use JS traversal</li>
+ <li>The larger the DOM the slower the query</li>
+ <li>Reading certain properties (e.g. <code>offsetWidth</code>) causes reflow</li>
+ <li>Writing certain properties (e.g. <code>className</code>) causes reflow</li>
+ </ul>
+ </article>
+
+ <article>
+ <h3>Assessing Performance</h3>
+
+ <h4>Polyfills that render</h4>
+ <ul>
+ <li>Layout calculations can be intense</li>
+ <li>The more things it has to render the slower the rendering</li>
+ <li>Reading and writing to the DOM causes reflow</li>
+ </ul>
+ </article>
+
+
+ <article>
+ <h3>Compatibility Concerns</h3>
+
+ <ul>
+ <li>Polyfills that modify the DOM can easily collide with other polyfills</li>
+ <li>Other libraries that modify the DOM can easily create conflicts</li>
+ <li>Polyfills that parse/rewrite CSS typically cannot be used together</li>
+ <li>Using <code>!important</code> in CSS means polyfills can't modify <code>.style</code></li>
+ </ul>
+ </article>
+
+
+ <article>
+ <h3>Test, test, test!</h3>
+
+ <ul>
+ <li>Use VMs with full standalone IEs</li>
+ <li>If possible, test on similar hardware</li>
+ <li><a href="http://www.browserstack.com/">http://www.browserstack.com/</a></li>
+ </ul>
+ </article>
+
+
+ <article>
+ <h3>In Conclusion,</h3>
+
+ <ul class="build">
+ <li>CSS polyfills can:
+ <ul>
+ <li>Greatly reduce development time and effort</li>
+ <li>Keep hacks out of capable browsers</li>
+ <li>Improve overall user experience</li>
+ </ul>
+ </li>
+ <li>But you need to weigh the pros and cons.</li>
+ <li>Graceful degradation is always the first choice.</li>
+ <li>Polyfills will be with us long after OldIE is ancient history.</li>
+ </ul>
+ </article>
+
+ <article id="fin">
+ <h2>Thank you! Questions?</h2>
+
+ <p>Jason Johnston</p>
+ <p>@lojjic, @css3pie</p>
+ </article>
+
+
+</section>
+
+</body>
+</html>