Merge pull request #53 from cobexer/bookmarklet

Bookmarklet
niklasvh · Feb 20, 2012 · b320dd3 · b320dd3
2 parents 8bbbace + 014c0ed
commit b320dd3
Show file tree

Hide file tree

Showing 2 changed files with 131 additions and 0 deletions.
diff --git a/bookmarklet.html b/bookmarklet.html
@@ -0,0 +1,57 @@
+<!doctype html>
+<html>
+	<head>
+		<title>html2canvas Bookmarklet</title>
+		<script type="text/javascript" src="external/jquery-1.6.2.min.js"></script>
+		<script type="text/javascript">
+			var isDebug = false, origBookmarklet = '';
+			function patchLinks() {
+				var bookmarklet = origBookmarklet;
+				if (isDebug) {
+					bookmarklet = bookmarklet.replace('//DEBUG: ', '');
+				}
+				bookmarklet = bookmarklet.replace(/\s\/\/.*/g, ''); // remove single line comments
+				bookmarklet = bookmarklet.replace(/[\u000A\u000D]+/g, ''); // remove all linebreaks
+				bookmarklet = bookmarklet.replace(/\/\*.*?\*\//g, ''); // remove multi line comments
+				bookmarklet = bookmarklet.replace(/\s\s+/g, ' '); // reduce multiple spaces to single spaces
+				bookmarklet = bookmarklet.replace(/\s+=\s+/g, '=');
+				$('a.bookmarklet').each(function(_, el) {
+					el.href = $(el).attr('data-href') + bookmarklet;
+				});
+			}
+			$(function() {
+				$('input[type=checkbox]').bind('change', function() {
+					isDebug = $(this).is(':checked');
+					patchLinks();
+				}).change();
+				$.ajax('src/plugins/bookmarklet.js', {
+					dataType: 'text',
+					success: function(data, status, xhr) {
+						origBookmarklet = data;
+						patchLinks();
+					}
+				});
+			});
+		</script>
+	</head>
+	<body>
+		<h1>html2canvas Bookmarklet</h1>
+		<p>
+			If you use a normal browser: drag the normal <a class="bookmarklet" data-href="javascript:">html2canvas</a> bookmarklet to your bookmarks toolbar.<br />
+			If not use the following link: <a class="bookmarklet" data-href="#_remove_this_javascript:">bookmarklet for those special mobile devices</a>
+			click / tap that link and then bookmark the page, edit the bookmark and remove the start up until including <code>#_remove_this_</code>
+			part at the beginning of the URL, it must start with: <code>javascript:</code> to be correct.
+		</p>
+		<p>
+			If you are using Firefox and the NoScript Addon: disable the ABE part of it,
+			took me quite some time to figure out that the reason for an unreliable bookmarklet was in NoScript...
+		</p>
+		<h2>For Developers:</h2>
+		<p>
+			If you are a developer and want to debug locally (you need the source tree of your html2canvas at:
+			<code>http(s)://localhost/html2canvas/</code>)
+			check the following box to get the bookmarklet patched automatically ;)<br />
+			<label>Debug bookmarklet: <input type="checkbox" /></label>
+		</p>
+	</body>
+</html>
diff --git a/src/plugins/bookmarklet.js b/src/plugins/bookmarklet.js
@@ -0,0 +1,74 @@
+(function() {
+    /* options, customize to your needs */
+    var server = '//html2canvas.hertzen.com/build',
+    proxy = '//html2canvas.appspot.com',
+    debug = false,
+    profile = false;
+    //DEBUG: server = 'http://localhost/html2canvas'; debug = true;
+    var debugFiles = [
+        'external/jquery-1.6.2.min',
+        'src/Core',
+        'src/Generate',
+        'src/Parse',
+        'src/Preload',
+        'src/Queue',
+        'src/Renderer',
+        'src/plugins/jquery.plugin.html2canvas'
+    ],
+    relFiles = [
+	'//code.jquery.com/jquery-1.6.4.js',
+        'html2canvas',
+        'jquery.plugin.html2canvas'
+    ],
+    i = 0, el = null;
+    var loader = {
+        index: 0,
+        head: document.getElementsByTagName('head')[0],
+        statusline: document.createElement('div'),
+        files: (debug ? debugFiles : relFiles),
+        onload: function () {
+            var _ = this;
+            if (_.index < _.files.length) {
+                var el = document.createElement('script');
+                el.type = 'text/javascript';
+                el.onload = function() {
+                    _.onload();
+                };
+                el.onerror = function() {
+                    _.statusline.style.color = 'red';
+                    _.statusline.innerHTML = _.statusline.innerHTML + ' failed';
+		    _.statusline.onclick = function() {
+                        _.statusline.parentNode.removeChild(_.statusline);
+                    };
+                };
+		if (_.files[_.index].substr(0, 2) === '//') {
+		    el.src = _.files[_.index];
+                }
+                else {
+                    el.src = server + '/' + _.files[_.index] + '.js';
+                }
+                _.head.appendChild(el);
+                ++_.index;
+                _.statusline.innerHTML = 'html2canvas: loading "' + el.src + '" ' + _.index + ' / ' + _.files.length + '...';
+            }
+            else {
+                _.statusline.parentNode.removeChild(_.statusline);
+                delete _.statusline;
+                $(document.documentElement).html2canvas({
+                    logging: debug,
+                    profile: profile
+                });
+            }
+        }
+    }, statusline = loader.statusline;
+    statusline.style.position = 'fixed';
+    statusline.style.bottom = '0px';
+    statusline.style.right = '20px';
+    statusline.style.backgroundColor = 'white';
+    statusline.style.border = '1px solid black';
+    statusline.style.borderBottomWidth = '0px';
+    statusline.style.padding = '2px 5px';
+    statusline.style.zIndex = 9999999;
+    document.body.appendChild(statusline);
+    loader.onload();
+}());