add button to codeblocks that expands them to size of viewport

brandonmwest · brandonmwest · commit d39391d33698 · 2013-08-30T10:27:56.000-06:00
diff --git a/plugins/code_block.rb b/plugins/code_block.rb
@@ -87,8 +87,12 @@ def render(context)
       source = '<div class="code-buttons">'
       source += '<ul class="nav nav-tabs">'
       source += '<li class="pull-right">'
-      source += '<a class="copycode btn-mini" id="copy_' + digest + '">'
-      source += '<i class="icon-file"></i> Copy</a></li></ul></div>'
+      source += '<a class="copycode code-button btn-mini" id="copy_' + digest + '">'
+      source += '<i class="icon-file"></i> Copy</a></li>'
+      source += '<li class="pull-right">'
+      source += '<a class="expandcode code-button btn-mini" id="expand_' + digest + '">'
+      source += '<i class="icon-fullscreen"></i> Expand</a></li>'      
+      source += '</ul></div>'
       source += '<figure class="code" id="code_' + digest + '">'
       source += @caption if @caption
       if @filetype
diff --git a/source/javascripts/codebuttons.js b/source/javascripts/codebuttons.js
@@ -40,4 +40,44 @@ $(function() {
   }else{
     $("body").addClass("no-flash");
   }
+
+  $(".expandcode").click(function() {
+    var codeId = $(this).attr("id").replace('expand_','');
+    var codeblock = $('#code_' + codeId).clone();
+    codeblock.addClass('expanded');
+
+    codeblock.appendTo(document.body);
+
+    var overlay = $('<div id="overlay"> </div>');
+    overlay.appendTo(document.body);
+
+    //prevent the body from scrolling
+    $(document.body).css("overflow", "hidden");
+
+    innerblock = codeblock.find('.highlight');
+    innerblock.css("height", $(window).height() - 100 + "px");
+    innerblock.css("width", $(window).width() - 80 + "px");
+
+    codeblock.css("width", $(window).width() - 80 + "px");
+
+    innerblock.css("overflow", "scroll"); 
+
+    //move all of this into a css class and toggle it
+    //append a button that closes the window
+    button = $('<a class="close-btn btn btn-large btn-danger"><i class="icon-remove"></i> Close</a>');
+    button.css("float","right");
+    button.css("position","fixed");
+    button.css("top","20px");
+    button.css("right","40px");
+    innerblock.append(button);
+    button.click(function() {
+      $(document.body).css("overflow", "auto");
+      $('#overlay').remove();
+      
+      var code = $(this).closest("figure.code")
+      code.removeClass('expanded');
+      code.css("width","auto");
+      $(this).remove();
+    });
+  });
 });
diff --git a/source/stylesheets/style.css b/source/stylesheets/style.css
@@ -65,7 +65,7 @@ blockquote { background-color: #FFFFED; }
   margin: 0 40px -19px;
 }
 
-.code-buttons > .nav-tabs > li > .copycode {
+.code-buttons > .nav-tabs > li > .code-button {
   padding-top:2px;
   padding-bottom:2px;
   border:1px solid #EEE;
@@ -79,10 +79,11 @@ figure.code {
 	margin: 0 40px 1.5em;
 }
 
-.copycode.hover { 
-  border-color: #eee #eee #ddd;
-  text-decoration: none;
-  background-color: #eee;
+.code-button:hover { 
+  cursor: pointer;
+}
+.code-button.hover { 
+  cursor: pointer;
 }
 
 .no-flash figure.code {
@@ -267,6 +268,29 @@ li.official {
 	margin-left: -20px;
 }
 
+#overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: #000;
+    filter:alpha(opacity=70);
+    -moz-opacity:0.7;
+    -khtml-opacity: 0.7;
+    opacity: 0.7;
+    z-index: 10000;
+}
+
+figure.code.expanded {
+ position: fixed;
+ top:0;
+ left:0;
+ padding:60px 40px 40px 40px;
+ margin: 0;
+ z-index:100000;
+}
+
 .video-container {
 	position: relative;
 	padding-bottom: 56.25%;
