cleaned up, but barely.

component.json → bower.json

@@ -3,9 +3,11 @@
   "version": "0.0.3",
   "author": "Stephen Sawchuk",
   "description": "codecode allows your readers to dock your syntax-highlighted code blocks to the bottom of the page, allowing them to refer back without losing their place in your article.",
-  "homepage": "http://stephenplusplus.github.com/codecode",
-  "main": "./dist/codecode.js",
-  "readme": "./readme.md",
+  "homepage": "http://stephenplusplus.github.io/codecode",
+  "main": [
+    "./dist/codecode.js",
+    "./dist/codecode.css",
+  ],
   "repository": {
     "type": "git",
     "url": "git://github.com/stephenplusplus/codecode.git"

codecode.css

@@ -0,0 +1,58 @@
+.acodecode {
+  cursor: pointer;
+}
+
+.acodecodeactive {
+  cursor: default;
+}
+
+.codecodecode {
+  position: fixed;
+  z-index: 100;
+  left: 2%;
+  bottom: -30px;
+  width: 96%;
+  height: 0;
+  max-height: 270px;
+  text-align: left;
+}
+
+.codecodecode > div {
+  box-shadow: 0 0 3px #444;
+}
+
+.codecodecontrols {
+  height: 30px;
+  margin-top: -30px;
+  background-color: #fff;
+  background-color: rgba(255, 255, 255, .8);
+  border-radius: 8px 8px 0 0;
+}
+
+.codecodecontrols a {
+  float: left;
+  line-height: 30px;
+  margin-left: 6px;
+  font-family: Arial;
+  font-size: 12px;
+}
+
+.codecodecontrols .closeCodeCode {
+  float: right;
+  margin-right: 6px;
+}
+
+.codecode,
+.acodecode.codecode {
+  border-radius: 0 !important;
+  position: relative !important;
+  width: 100% !important;
+  margin: 0 !important;
+  overflow: auto !important;
+  cursor: default !important;
+}
+
+div.codecode [id^=highlighter] div.bar.show,
+div.codecode [id^=highlighter] div.toolbar {
+  display: none !important;
+};

codecode.js

@@ -0,0 +1,122 @@
+(function ($, win, doc) {
+  'use strict';
+
+  var el = {};
+  var codePosition;
+
+  el.body = $(doc.body);
+
+  el.codecodecode = $([
+    '<div class="codecodecode">',
+    '  <div class="codecodecontrols">',
+    '    <a class="goBackToTheCode" href="#">go back to the code.</a>',
+    '    <a class="closeCodeCode" href="#">close.</a>',
+    '  </div>',
+    '  <div class="codecode"></div>',
+    '</div>'
+  ].join('\n'));
+
+  el.goBackToTheCode = el.codecodecode.find('.goBackToTheCode');
+  el.closeCodeCode = el.codecodecode.find('.closeCodeCode');
+  el.codecode = el.codecodecode.find('.codecode');
+
+  el.body.append(el.codecodecode);
+
+  el.goBackToTheCode.on('click', goBackToTheCode);
+  el.closeCodeCode.on('click', closeCodeCode);
+
+  function goBackToTheCode(e) {
+    e.preventDefault();
+
+    closeCodeCode();
+
+    el.body.animate({ scrollTop: codePosition - 20 }, 2000);
+  };
+
+  function closeCodeCode(e, callback) {
+    if ($.type(e) === 'object') {
+      e.preventDefault();
+    }
+
+    el.body.off('keyup');
+
+    el.codecodecode.animate({ bottom: '-300px' }, 300, callback || $.noop);
+
+    $('.acodecodeactive').removeClass('acodecodeactive');
+  };
+
+  function openCodeCode(codeblock) {
+    el.codecodecode.animate({ bottom: 0 }, 500);
+
+    el.body.on('keyup', function (e) {
+      if (e.which === 27) {
+        closeCodeCode();
+      }
+    });
+
+    codeblock.addClass('acodecodeactive');
+  };
+
+  function bindCodeCodeClick(selector) {
+    el.body.on('click', selector, function () {
+      var codeblock = $(this);
+      var clone;
+
+      if (codeblock.hasClass('acodecodeactive') ||
+          codeblock.hasClass('codecode')) {
+        return;
+      }
+
+      codePosition = $(this).position().top;
+
+      clone = codeblock.clone().addClass('codecode');
+
+      closeCodeCode(null, function () {
+        el.codecode
+          .empty()
+          .append(clone.css('margin', '0 !important'))
+          .height('auto');
+
+        el.codecodecode.height(
+          (el.codecode.height() >= 270) ? 270 : el.codecode.height()
+        );
+
+        el.codecode.height('100%');
+      });
+
+      openCodeCode(codeblock);
+    });
+  };
+
+  $.fn.codecode = function () {
+    bindCodeCodeClick(this.selector);
+
+    return this.addClass('acodecode');
+  };
+
+  if (typeof SyntaxHighlighter !== 'undefined') {
+    SyntaxHighlighter.all = (function () {
+      var callSyntaxHighlighter = SyntaxHighlighter.all;
+      var syntaxActivated = false;
+      var checkForSyntaxEls;
+      var tried = 0;
+
+      function hasSyntaxBeenHighlighted() {
+        if ($('.syntaxhighlighter').length > 0) {
+          $('.syntaxhighlighter').codecode();
+          syntaxActivated = true;
+        }
+
+        if (syntaxActivated || tried++ > 50) {
+          win.clearInterval(checkForSyntaxEls);
+        }
+      };
+
+      return function () {
+        callSyntaxHighlighter();
+
+        checkForSyntaxEls = win.setInterval(hasSyntaxBeenHighlighted, 50);
+      }
+    })();
+  }
+})(jQuery, window, document);