showoff 0.0.4 → 0.0.5

data/README.txt

@@ -19,6 +19,7 @@ It can:
  * bullets with incremental advancing
  * re-enact command line interactions
  * call up a menu of sections/slides at any time to jump around
+ * execute javascript or ruby live and display results
 
 It might will can:
 
@@ -102,6 +103,8 @@ Some useful styles for each slide are:
     will incrementally update elements on arrow key rather than switch slides
 * small - make all slide text 80%
 * smaller - make all slide text 70%
+* execute - on ruby or js highlighted code slides, you can click on the code
+    to execute it and display the results on the slide
 
 Check out the example directory included to see examples of most of these.
 

data/lib/showoff.rb

@@ -146,5 +146,10 @@ class ShowOff < Sinatra::Application
     end
     data
   end
+  
+  post '/code' do 
+    rv = eval(params[:code])
+    return rv.to_s
+  end
 
 end

data/public/css/showoff.css

@@ -188,4 +188,22 @@ a.fg-button { float:left; }
 .code .vc { color: #008080 } /* Name.Variable.Class */
 .code .vg { color: #008080 } /* Name.Variable.Global */
 .code .vi { color: #008080 } /* Name.Variable.Instance */
-.code .il { color: #009999 } /* Literal.Number.Integer.Long */
+.code .il { color: #009999 } /* Literal.Number.Integer.Long */
+
+.results { 
+  background-color:#002200;
+  color:#00AA00;
+  font-size:2em;
+  border:2px solid black;
+  position: fixed;
+  top:0px;
+  width:100%;
+  padding:15px;
+  margin:0px;
+  font-family: monospace;
+}
+
+.executing {
+  color:#0000FF !important;
+  background-color: yellow;
+}

data/public/js/jquery-print.js

@@ -0,0 +1,109 @@
+(function($) {
+
+  function print_array(obj, opts) {
+    var result = [];
+    for (var i = 0; i < Math.min(opts.max_array, obj.length); i++)
+      result.push($.print(obj[i], $.extend({}, opts, { max_array: 3, max_string: 40 })));
+
+    if (obj.length > opts.max_array)
+      result.push((obj.length - opts.max_array) + ' more...');
+    if (result.length == 0) return "[]"
+      return "[ " + result.join(", ") + " ]";
+  }
+
+  function print_element(obj) {
+    if (obj.nodeType == 1) {
+      var result = [];
+      var properties = [ 'className', 'id' ];
+      var extra = {
+        'input': ['type', 'name', 'value'],
+        'a': ['href', 'target'],
+        'form': ['method', 'action'],
+        'script': ['src'],
+        'link': ['href'],
+        'img': ['src']
+      };
+
+      $.each(properties.concat(extra[obj.tagName.toLowerCase()] || []), function(){
+        if (obj[this])
+          result.push(' ' + this.replace('className', 'class') + "=" + $.print(obj[this]))
+      });
+      return "<" + obj.tagName.toLowerCase()
+              + result.join('') + ">";
+    }
+  }
+
+  function print_object(obj, opts) {
+    var seen = opts.seen || [ obj ];
+
+    var result = [], key, value;
+    for (var k in obj) {
+      if (obj.hasOwnProperty(k) && $.inArray(obj[k], seen) < 0) {
+        seen.push(obj[k]);
+        value = $.print(obj[k], $.extend({}, opts, { max_array: 6, max_string: 40, seen: seen }));
+      } else
+        value = "...";
+      result.push(k + ": " + value);
+    }
+    if (result.length == 0) return "{}";
+    return "{ " + result.join(", ") + " }";
+  }
+
+  function print_string(value, opts) {
+    var character_substitutions = {
+      '\b': '\\b',
+      '\t': '\\t',
+      '\n': '\\n',
+      '\f': '\\f',
+      '\r': '\\r',
+      '"' : '\\"',
+      '\\': '\\\\'
+    };
+    var r = /["\\\x00-\x1f\x7f-\x9f]/g;
+    
+    var str = r.test(value)
+      ? value.replace(r, function (a) {
+          var c = character_substitutions[a];
+          if (c) return c;
+          c = a.charCodeAt();
+          return '\\u00' + Math.floor(c / 16).toString(16) + (c % 16).toString(16);
+        })
+      : value;
+    if (str.length > opts.max_string)
+      return str.slice(0, opts.max_string + 1) + '...';
+    else
+      return str;
+  }
+
+  $.print = function(obj, options) {
+    var opts = $.extend({}, { max_array: 10, max_string: 100 }, options);
+
+    if (typeof obj == 'undefined')
+      return "undefined";
+    else if (typeof obj == 'boolean')
+      return obj.toString();
+    else if (typeof obj == 'number')
+      return obj.toString();
+    else if (!obj)
+      return "null";
+    else if (typeof obj == 'string')
+      return print_string(obj, opts);
+    else if (obj instanceof RegExp)
+      return obj.toString();
+    else if (obj instanceof Array || obj.callee || obj.item)
+      return print_array(obj, opts);
+    else if (typeof obj == 'function' || obj instanceof Function)
+      return obj.toString().match(/^([^)]*\))/)[1];
+    else if (obj.nodeType)
+      return print_element(obj);
+    else if (obj instanceof jQuery)
+      return "$(" + $.print(obj.get()) + ")";
+    else if (obj instanceof Error)
+      return print_object(obj, $.extend({}, options, { max_string: 200 }));
+    else if (obj instanceof Object)
+      return print_object(obj, opts);
+    else
+      return obj.toString().replace(/\n\s*/g, '');
+  }
+
+})(jQuery);

data/public/js/showoff.js

@@ -94,12 +94,14 @@ function showSlide(back_step) {
   // TODO: calculate and set the height margins on slide load, not here
 
   $("#preso").html(slides.eq(slidenum).clone())
-  $("#slideInfo").text((slidenum + 1) + ' / ' + slideTotal)
   curr_slide = $("#preso > .slide")
   var slide_height = curr_slide.height()
   var mar_top = (0.5 * parseFloat($("#preso").height())) - (0.5 * parseFloat(slide_height))
   $("#preso > .slide").css('margin-top', mar_top)
 
+  percent = Math.ceil(((slidenum + 1) / slideTotal) * 100)
+  $("#slideInfo").text((slidenum + 1) + '/' + slideTotal + '  - ' + percent + '%')
+
   if(!back_step) {
     // determine if there are incremental bullets to show
     // unless we are moving backward
@@ -108,6 +110,8 @@ function showSlide(back_step) {
     incrCurr = 0
     incrSteps = 0
   }
+
+  removeResults()
 }
 
 function determineIncremental()
@@ -204,6 +208,10 @@ function keyDown(event)
     {
       $('#footer').toggle()
     }
+	else if (key == 27) // esc
+	{
+		removeResults();
+	}
     return true
 }
 
@@ -252,3 +260,43 @@ function ListMenuItem(t, s)
   this.slide = s
   this.textName = t
 }
+
+var removeResults = function() {
+  $('.results').remove();	
+};
+
+var print = function(text) {
+  removeResults();
+  var _results = $('<div>').addClass('results').text($.print(text));
+  $('body').append(_results);
+  _results.click(removeResults);
+};
+
+var executeJavaScript = function() {
+  result = null;
+  var codeDiv = $(this);
+  codeDiv.addClass("executing");
+  eval(codeDiv.text());
+  setTimeout(function() { codeDiv.removeClass("executing");}, 250 );
+  if (result != null) print(result);
+};
+
+var executeRuby = function() {
+  result = null;
+  var codeDiv = $(this);
+  codeDiv.addClass("executing");
+  $.ajax({
+    type: 'POST',
+    url: "/code",
+    data: {code: codeDiv.text()},
+    success: function(data) {
+	  result = data;
+	  if (result) print(result);
+	},
+    dataType: 'html'
+  });
+  setTimeout(function() { codeDiv.removeClass("executing");}, 250 );
+};
+
+$('.execute > .sh_javaScript code').live("click", executeJavaScript);
+$('.execute > .sh_ruby code').live("click", executeRuby);

data/views/index.erb

@@ -10,6 +10,7 @@
 	<link rel="stylesheet" href="css/showoff.css" type="text/css"/>
 
 	<script type="text/javascript" src="/js/jquery-1.4.min.js"></script>
+	<script type="text/javascript" src="/js/jquery-print.js"></script>	
   <script type="text/javascript" src="/js/fg.menu.js"></script> 
 	<script type="text/javascript" src="/js/showoff.js"></script>
   <script type="text/javascript" src="/js/jTypeWriter.js"> </script>

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification 
 name: showoff
 version: !ruby/object:Gem::Version 
-  version: 0.0.4
+  version: 0.0.5
 platform: ruby
 authors: 
 - Scott Chacon
@@ -99,6 +99,7 @@ files:
 - public/css/theme/ui.theme.css
 - public/js/fg.menu.js
 - public/js/jquery-1.4.min.js
+- public/js/jquery-print.js
 - public/js/jTypeWriter.js
 - public/js/sh_lang/sh_bison.min.js
 - public/js/sh_lang/sh_c.min.js