Skip to content
Browse files

Adding bookmarklet

  • Loading branch information...
1 parent 251cdbb commit 56ad913320458d44af4e83cc6500cb7c4807509e @jamesmoss committed Feb 18, 2012
Showing with 129 additions and 54 deletions.
  1. +7 −0 goatseource.css
  2. +73 −41 goatseource.js
  3. +48 −12 index.html
  4. +1 −1 readme.md
View
7 goatseource.css
@@ -0,0 +1,7 @@
+#goatseource { width: 100%; height: 100%; position: fixed; top: 0; left: 0; overflow: hidden; display:table-cell; vertical-align:middle; }
+#goatseource .goatseource-animation { position: relative; width:500px; height: 100%; margin: 0 auto;}
+#goatseource img { position: absolute; top: 100px; }
+#goatseource img.goatseource-left { left: -566px; }
+#goatseource img.goatseource-right { left: 235px; }
+#goatseource .goatseource-mask { overflow: hidden; height: 400px; width: 50px; border-radius: 100px / 250px; margin: 0 auto; background: red; box-shadow: inset 0px 0px 25px black; }
+#goatseource .goatseource-source { color: white; width: 500px; font-size: 11px; margin-left: -223px; white-space: pre-wrap; font-family: monospace; padding: 40px;}
View
114 goatseource.js
@@ -1,42 +1,74 @@
-function goatseource() {
-
- var html = '<div id="goatseource">';
- html+= ' <div class="animation">';
- html+= ' <img src="left-arm.png" class="left" width="833" height="400" alt="" />';
- html+= ' <img src="right-arm.png" class="right" width="833" height="400" alt="" />';
- html+= ' <div class="mask">';
- html+= ' <div class="source"></div>';
- html+= ' </div>';
- html+= ' </div>';
- html+= '</div>';
-
- var container = jQuery(html),
- inner = container.find('.animation'),
- leftArm = container.find('.left'),
- rightArm = container.find('.right'),
- mask = container.find('.mask'),
- source = container.find('.source'),
- pageSource = '<html>\n' + $('html').html() + '\n</html>';
-
- source.text(pageSource);
- container.appendTo($('body'));
- // vertically align the animation
- inner.css('margin-top', ((container.height() - 500) / 2)+'px' );
-
-
- inner.hide().fadeIn(1000, function(){
- // animate the rest
- mask.animate({width:500, height: 400});
- source.animate({marginLeft: 0});
- leftArm.animate({left:-770});
- rightArm.animate({left: 440});
- });
-}
-
-
-jQuery(function(){
- $('a').click(function(){
+(function(){
+ // Check if jQuery is loaded
+ if(typeof window.jQuery != 'undefined') {
goatseource();
- return false;
- });
-});
+ } else {
+ // Check for conflicts
+ var conflict = typeof window.$ != 'undefined';
+ // Create the script and point to Google API
+ var script = document.createElement('script');
+ script.setAttribute('src','http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js');
+ // Add the script to the 'head' for processing
+ document.getElementsByTagName('head')[0].appendChild(script);
+ // Create a way to wait until script loading
+ var attempts = 15;
+ (function(){
+ // Check again if jQuery is undefined
+ if(typeof window.jQuery == 'undefined') {
+ if(--attempts > 0) {
+ // Calls himself in a few milliseconds
+ window.setTimeout(arguments.callee, 250);
+ }
+ } else {
+ goatseource();
+ }
+ })();
+ }
+
+ function goatseource() {
+
+ var host = 'http://jamesmoss.co.uk/goatseource/';
+
+ var html = '<div id="goatseource">';
+ html+= ' <div class="goatseource-animation">';
+ html+= ' <img src="'+host+'left-arm.png" class="goatseource-left" width="833" height="400" alt="" />';
+ html+= ' <img src="'+host+'right-arm.png" class="goatseource-right" width="833" height="400" alt="" />';
+ html+= ' <div class="goatseource-mask">';
+ html+= ' <div class="goatseource-source"></div>';
+ html+= ' </div>';
+ html+= ' </div>';
+ html+= '</div>';
+
+ var container = jQuery(html),
+ inner = container.find('.goatseource-animation'),
+ leftArm = container.find('.goatseource-left'),
+ rightArm = container.find('.goatseource-right'),
+ mask = container.find('.goatseource-mask'),
+ source = container.find('.goatseource-source'),
+ pageSource = '<html>\n' + $('html').html() + '\n</html>';
+
+ // inject our CSS
+ jQuery('<link rel="stylesheet" type="text/css" href="'+host+'goatseource.css" />').appendTo(jQuery('head'));
+
+ // try and remove ourselves from the HTML that gets displayed
+ pageSource = pageSource.replace('<script src="'+host+'goatseource.js"></script>', '');
+
+ // display the page's source
+ source.text(pageSource);
+ container.appendTo(jQuery('body'));
+
+ // vertically align the animation
+ inner.css('margin-top', ((container.height() - 500) / 2)+'px' );
+
+ // animate it all
+ inner.hide().fadeIn(1000, function() {
+ // animate the stretch
+ mask.animate({width:500, height: 400});
+ source.animate({marginLeft: 0});
+ leftArm.animate({left:-770});
+ rightArm.animate({left: 440});
+ });
+ }
+
+
+})();
View
60 index.html
@@ -1,8 +1,6 @@
<!DOCTYPE html>
<html>
<head>
-<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
-<script src="goatseource.js"></script>
<meta charset="utf-8" />
<title>Goatseource</title>
<!--[if IE]>
@@ -12,20 +10,58 @@
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
- #goatseource { width: 100%; height: 100%; position: fixed; top: 0; left: 0; overflow: hidden; display:table-cell; vertical-align:middle; }
- #goatseource .animation { position: relative; width:500px; height: 100%; margin: 0 auto;}
- #goatseource img { position: absolute; top: 100px; }
- #goatseource img.left { left: -566px; }
- #goatseource img.right { left: 235px; }
- #goatseource .mask { overflow: hidden; height: 400px; width: 50px; border-radius: 100px / 250px; margin: 0 auto; background: red; box-shadow: inset 0px 0px 25px black; }
- #goatseource .source { color: white; width: 500px; font-size: 11px; margin-left: -223px; white-space: pre-wrap; font-family: monospace; padding: 40px;}
-
+ body { font: 16px Arial, Helvetica, sans-serif; }
+ .button {
+ display: inline-block;
+ outline: none;
+ cursor: pointer;
+ text-align: center;
+ text-decoration: none;
+ font: 14px/100% Arial, Helvetica, sans-serif;
+ padding: .5em 2em .55em;
+ text-shadow: 0 1px 1px rgba(0,0,0,.3);
+ -webkit-border-radius: .5em;
+ -moz-border-radius: .5em;
+ border-radius: .5em;
+ -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
+ -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
+ box-shadow: 0 1px 2px rgba(0,0,0,.2);
+ }
+ .button:hover {
+ text-decoration: none;
+ }
+ .button:active {
+ position: relative;
+ top: 1px;
+ }
+ .orange {
+ color: #fef4e9;
+ border: solid 1px #da7c0c;
+ background: #f78d1d;
+ background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
+ background: -moz-linear-gradient(top, #faa51a, #f47a20);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
+ }
+ .orange:hover {
+ background: #f47c20;
+ background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
+ background: -moz-linear-gradient(top, #f88e11, #f06015);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
+ }
+ .orange:active {
+ color: #fcd3a5;
+ background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
+ background: -moz-linear-gradient(top, #f47a20, #faa51a);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
+ }
</style>
</head>
<body>
- <p id="hello">Hello World</p>
+ <p>Click below to view the goatseource of this page.</p>
- <a href="">View goatseource</a>
+ <p><a href="javascript:(function(){var s = document.createElement('script'); s.setAttribute('src','http://jamesmoss.co.uk/goatseource/goatseource.js');document.getElementsByTagName('head')[0].appendChild(s);})();" class="button orange">View goatseource</a></p>
+
+ <p>Drag the button to your bookmark bar to view the goatseource of any site!</p>
</body>
</html>
View
2 readme.md
@@ -4,4 +4,4 @@ An interesting way to view a page's source code. A homage to [goatse.cx](http://
[Demo here](http://jamesmoss.co.uk/goatseource/)
-**Bookmarklet coming soon**
+Use the bookmarklet on the demo page to view the goatseouce of any page you like.

0 comments on commit 56ad913

Please sign in to comment.
Something went wrong with that request. Please try again.