showoff 0.7.0 → 0.9.7

data/public/js/showoff.js

@@ -16,10 +16,17 @@ var incrCode = false
 var debugMode = false
 var gotoSlidenum = 0
 var shiftKeyActive = false
+var query
+var slideStartTime = new Date().getTime()
+
+var questionPrompt = 'Ask a question...'
+var feedbackPrompt = 'Why?...'
 
 var loadSlidesBool
 var loadSlidesPrefix
 
+var mode = { track: true, follow: false };
+
 function setupPreso(load_slides, prefix) {
 	if (preso_started)
 	{
@@ -28,6 +35,10 @@ function setupPreso(load_slides, prefix) {
 	}
 	preso_started = true
 
+	// save our query string as an object for later use
+	query = $.parseQuery();
+
+	// Load slides fetches images
 	loadSlidesBool = load_slides
 	loadSlidesPrefix = prefix
 	loadSlides(loadSlidesBool, loadSlidesPrefix)
@@ -36,21 +47,62 @@ function setupPreso(load_slides, prefix) {
 
 	// bind event handlers
 	document.onkeydown = keyDown
-	document.onkeyup = keyUp
+	document.onkeyup   = keyUp
 	/* window.onresize	= resized; */
 	/* window.onscroll = scrolled; */
 	/* window.onunload = unloaded; */
 
-	$('body').addSwipeEvents().
+	$('#preso').addSwipeEvents().
 		bind('tap', swipeLeft).         // next
 		bind('swipeleft', swipeLeft).   // next
 		bind('swiperight', swipeRight); // prev
+
+  // give us the ability to disable tracking via url parameter
+  if(query.track == 'false') mode.track = false;
+
+  // Make sure the slides always look right.
+  // Better would be dynamic calculations, but this is enough for now.
+  $(window).resize(function(){location.reload();});
+
+  $("#feedbackWrapper").hover(
+    function() {
+      $('#feedbackSidebar').show();
+      document.onkeydown = null;
+      document.onkeyup   = null;
+    },
+    function() {
+      $('#feedbackSidebar').hide();
+      document.onkeydown = keyDown;
+      document.onkeyup   = keyUp;
+    }
+  );
+
+  $("#paceSlower").click(function() { sendPace('slower'); });
+  $("#paceFaster").click(function() { sendPace('faster'); });
+  $("#askQuestion").click(function() { askQuestion( $("textarea#question").val()) });
+  $("#sendFeedback").click(function() {
+    sendFeedback($( "input:radio[name=rating]:checked" ).val(), $("textarea#feedback").val())
+  });
+
+  $("textarea#question").val(questionPrompt);
+  $("textarea#feedback").val(feedbackPrompt);
+  $("textarea#question").focus(function() { clearIf($(this), questionPrompt) });
+  $("textarea#feedback").focus(function() { clearIf($(this), feedbackPrompt) });
+
+  // Open up our control socket
+  connectControlChannel();
+/*
+  ws           = new WebSocket('ws://' + location.host + '/control');
+  ws.onopen    = function()  { connected();          };
+  ws.onclose   = function()  { disconnected();       }
+  ws.onmessage = function(m) { parseMessage(m.data); };
+*/
 }
 
 function loadSlides(load_slides, prefix) {
 	//load slides offscreen, wait for images and then initialize
 	if (load_slides) {
-		$("#slides").load("slides", false, function(){
+		$("#slides").load(loadSlidesPrefix + "slides", false, function(){
 			$("#slides img").batchImageLoad({
 			loadingCompleteCallback: initializePresentation(prefix)
 		})
@@ -64,7 +116,7 @@ function loadSlides(load_slides, prefix) {
 
 function initializePresentation(prefix) {
 	// unhide for height to work in static mode
-  $("#slides").show();
+        $("#slides").show();
 
 	//center slides offscreen
 	centerSlides($('#slides > .slide'))
@@ -83,6 +135,7 @@ function initializePresentation(prefix) {
 	})
 
 	setupMenu()
+	setupStyleMenu()
 	if (slidesLoaded) {
 		showSlide()
 	} else {
@@ -90,7 +143,12 @@ function initializePresentation(prefix) {
 		slidesLoaded = true
 	}
 	setupSlideParamsCheck();
-	sh_highlightDocument(prefix+'/js/sh_lang/', '.min.js')
+
+  try {
+	    sh_highlightDocument('/js/sh_lang/', '.min.js')
+	} catch(e) {
+	    sh_highlightDocument();
+	}
 	$("#preso").trigger("showoff:loaded");
 }
 
@@ -101,7 +159,7 @@ function centerSlides(slides) {
 }
 
 function centerSlide(slide) {
-	var slide_content = $(slide).children(".content").first()
+	var slide_content = $(slide).find(".content").first()
 	var height = slide_content.height()
 	var mar_top = (0.5 * parseFloat($(slide).height())) - (0.5 * parseFloat(height))
 	if (mar_top < 0) {
@@ -117,7 +175,7 @@ function setupMenu() {
 	var menu = new ListMenu()
 
 	slides.each(function(s, elem) {
-		content = $(elem).children(".content")
+		content = $(elem).find(".content")
 		shortTxt = $(content).text().substr(0, 20)
 		path = $(content).attr('ref').split('/')
 		currSlide += 1
@@ -156,11 +214,11 @@ function setupSlideParamsCheck() {
 	setTimeout(check, 100);
 }
 
-function gotoSlide(slideNum) {
-	slidenum = parseInt(slideNum)
-	if (!isNaN(slidenum)) {
-		showSlide()
-	}
+function gotoSlide(slideNum, updatepv) {
+  slidenum = parseInt(slideNum);
+  if (!isNaN(slidenum)) {
+    showSlide(false, updatepv);
+  }
 }
 
 function showFirstSlide() {
@@ -169,7 +227,9 @@ function showFirstSlide() {
 	showSlide()
 }
 
-function showSlide(back_step) {
+function showSlide(back_step, updatepv) {
+  // allows the master presenter view to disable the update callback
+  updatepv = (typeof(updatepv) === 'undefined') ? true : updatepv;
 
 	if(slidenum < 0) {
 		slidenum = 0
@@ -195,6 +255,8 @@ function showSlide(back_step) {
 	if (fullPage) {
 		$('#preso').css({'width' : '100%', 'overflow' : 'visible'});
 		currentSlide.css({'width' : '100%', 'text-align' : 'center', 'overflow' : 'visible'});
+	} else {
+		$('#preso').css({'width' : '', 'overflow' : ''});
 	}
 
 	percent = getSlidePercent()
@@ -215,7 +277,24 @@ function showSlide(back_step) {
   var currentContent = $(currentSlide).find(".content")
 	currentContent.trigger("showoff:show");
 
-	return getCurrentNotes()
+	var ret = setCurrentNotes();
+
+	var fileName = currentSlide.children().first().attr('ref');
+  $('#slideFilename').text(fileName);
+
+  // Update presenter view, if we spawned one
+	if (updatepv && 'presenterView' in window) {
+    var pv = window.presenterView;
+		pv.slidenum = slidenum;
+    pv.incrCurr = incrCurr
+    pv.incrSteps = incrSteps
+		pv.showSlide(true);
+		pv.postSlide();
+
+		pv.update();
+	}
+
+	return ret;
 }
 
 function getSlideProgress()
@@ -225,9 +304,21 @@ function getSlideProgress()
 
 function getCurrentNotes()
 {
-  var notes = currentSlide.find("p.notes").text()
-  $('#notesInfo').text(notes)
-	return notes
+    var notes = currentSlide.find("div.notes");
+    return notes;
+}
+
+function getCurrentNotesText()
+{
+    var notes = getCurrentNotes();
+    return notes.text();
+}
+
+function setCurrentNotes()
+{
+    var notes = getCurrentNotesText();
+    $('#notesInfo').text(notes);
+    return notes;
 }
 
 function getSlidePercent()
@@ -252,20 +343,138 @@ function determineIncremental()
 	})
 }
 
-function prevStep()
+function showIncremental(incr)
 {
+		elem = incrElem.eq(incrCurr)
+		if (incrCode && elem.hasClass('command')) {
+			incrElem.eq(incrCurr).css('visibility', 'visible').jTypeWriter({duration:1.0})
+		} else {
+			incrElem.eq(incrCurr).css('visibility', 'visible')
+		}
+}
+
+function clearIf(elem, val) {
+  console.log(elem.val());
+  console.log(val);
+  if(elem.val() == val ) { elem.val(''); }
+}
+
+function connectControlChannel() {
+  ws           = new WebSocket('ws://' + location.host + '/control');
+  ws.onopen    = function()  { connected();          };
+  ws.onclose   = function()  { disconnected();       }
+  ws.onmessage = function(m) { parseMessage(m.data); };
+}
+
+// This exists as an intermediary simply so the presenter view can override it
+function reconnectControlChannel() {
+  connectControlChannel();
+}
+
+function connected() {
+  console.log('Control socket opened');
+  $("#feedbackSidebar button").attr("disabled", false);
+  $("img#disconnected").hide();
 
+  try {
+    // If we are a presenter, then remind the server where we are
+    update();
+    register();
+  }
+  catch (e) {}
+}
+
+function disconnected() {
+  console.log('Control socket closed');
+  $("#feedbackSidebar button").attr("disabled", true);
+  $("img#disconnected").show();
+
+  setTimeout(function() { reconnectControlChannel() } , 5000);
+}
+
+function parseMessage(data) {
+  var command = JSON.parse(data);
+
+  if ("current" in command) { follow(command["current"]); }
+
+  // Presenter messages only, so catch errors if method doesn't exist
+  try {
+    if ("pace"     in command) { paceFeedback(command["pace"]);     }
+    if ("question" in command) {  askQuestion(command["question"]); }
+  }
+  catch(e) {
+    console.log("Not a presenter!");
+  }
+
+}
+
+function sendPace(pace) {
+  ws.send(JSON.stringify({ message: 'pace', pace: pace}));
+  feedbackActivity();
+}
+
+function askQuestion(question) {
+  ws.send(JSON.stringify({ message: 'question', question: question}));
+  $("textarea#question").val(questionPrompt);
+  feedbackActivity();
+}
+
+function sendFeedback(rating, feedback) {
+  var slide  = $("#slideFilename").text();
+  ws.send(JSON.stringify({ message: 'feedback', rating: rating, feedback: feedback, slide: slide}));
+  $("textarea#feedback").val(feedbackPrompt);
+  $("input:radio[name=rating]:checked").attr('checked', false);
+  feedbackActivity();
+}
+
+function feedbackActivity() {
+  $("img#feedbackActivity").show();
+  setTimeout(function() { $("img#feedbackActivity").hide() }, 1000);
+}
+
+function track() {
+  if (mode.track) {
+    var slideName    = $("#slideFilename").text();
+    var slideEndTime = new Date().getTime();
+    var elapsedTime  = slideEndTime - slideStartTime;
+
+    // reset the timer
+    slideStartTime = slideEndTime;
+
+    if (elapsedTime > 1000) {
+      elapsedTime /= 1000;
+      ws.send(JSON.stringify({ message: 'track', slide: slideName, time: elapsedTime}));
+    }
+  }
+}
+
+function follow(slide) {
+  if (mode.follow) {
+    console.log("New slide: " + slide);
+    gotoSlide(slide);
+  }
+}
+
+function getPosition() {
+  // get the current position from the server
+  ws.send(JSON.stringify({ message: 'position' }));
+}
+
+function prevStep(updatepv)
+{
 	var event = jQuery.Event("showoff:prev");
 	$(currentSlide).find(".content").trigger(event);
 	if (event.isDefaultPrevented()) {
 			return;
 	}
 
+  track();
+
 	slidenum--
-	return showSlide(true) // We show the slide fully loaded
+	return showSlide(true, updatepv) // We show the slide fully loaded
 }
 
-function nextStep()
+function nextStep(updatepv)
 {
 	var event = jQuery.Event("showoff:next");
 	$(currentSlide).find(".content").trigger(event);
@@ -273,30 +482,44 @@ function nextStep()
 			return;
 	}
 
+	track();
+
 	if (incrCurr >= incrSteps) {
 		slidenum++
-		return showSlide()
+		return showSlide(false, updatepv)
 	} else {
-		elem = incrElem.eq(incrCurr)
-		if (incrCode && elem.hasClass('command')) {
-			incrElem.eq(incrCurr).css('visibility', 'visible').jTypeWriter({duration:1.0})
-		} else {
-			incrElem.eq(incrCurr).css('visibility', 'visible')
-		}
-		incrCurr++
+		showIncremental(incrCurr);
+		var incrEvent = jQuery.Event("showoff:incr");
+		incrEvent.slidenum = slidenum;
+		incrEvent.incr = incrCurr;
+		$(currentSlide).find(".content").trigger(incrEvent);
+		incrCurr++;
 	}
 }
 
 function doDebugStuff()
 {
 	if (debugMode) {
-		$('#debugInfo').show()
-		debug('debug mode on')
+	  $('#debugInfo').show();
+		$('#slideFilename').show();
 	} else {
-		$('#debugInfo').hide()
+	  $('#debugInfo').hide();
+		$('#slideFilename').hide();
 	}
 }
 
+function blankScreen()
+{
+    if ($('#screenblanker').length) { // if #screenblanker exists
+        $('#screenblanker').slideUp('normal', function() {
+            $('#screenblanker').remove();
+        });
+    } else {
+        $('body').prepend('<div id="screenblanker"></div>');
+        $('#screenblanker').slideDown();
+    }
+}
+
 var notesMode = false
 function toggleNotes()
 {
@@ -309,6 +532,18 @@ function toggleNotes()
 	}
 }
 
+function toggleFollow()
+{
+  mode.follow = ! mode.follow;
+
+  if(mode.follow) {
+    $("#followMode").show().text('Follow Mode:');
+    getPosition();
+  } else {
+    $("#followMode").hide();
+  }
+}
+
 function executeAnyCode()
 {
   var $jsCode = $('.execute .sh_javascript code:visible')
@@ -322,7 +557,7 @@ function executeAnyCode()
   var $coffeeCode = $('.execute .sh_coffeescript code:visible')
   if ($coffeeCode.length > 0) {
       executeCoffee.call($coffeeCode);
-  } 
+  }
 }
 
 function debug(data)
@@ -396,14 +631,30 @@ function keyDown(event)
 	{
 		$('#navmenu').toggle().trigger('click')
 	}
+	else if (key == 83)  // 's' for style
+	{
+		$('#stylemenu').toggle().trigger('click')
+	}
 	else if (key == 90 || key == 191) // z or ? for help
 	{
 		$('#help').toggle()
 	}
-	else if (key == 66 || key == 70) // f for footer (also "b" which is what kensington remote "stop" button sends
+	else if (key == 66) // b for blank, also what kensington remote "stop" button sends
+	{
+		blankScreen()
+	}
+  else if (key == 70) // f for footer
 	{
 		toggleFooter()
 	}
+	else if (key == 71) // g for follow mode
+	{
+  	toggleFollow()
+	}
+	else if (key == 76) // l for leader mode
+	{
+		toggleLeader()
+	}
 	else if (key == 78) // 'n' for notes
 	{
 		toggleNotes()
@@ -412,9 +663,14 @@ function keyDown(event)
 	{
 		removeResults();
 	}
-	else if (key == 80) // 'p' for preshow
+	else if (key == 80) // 'p' for preshow, 'P' for pause
 	{
-		togglePreShow();
+    if (shiftKeyActive) {
+      togglePause();
+    }
+    else {
+      togglePreShow();
+    }
 	}
 	return true
 }
@@ -548,22 +804,24 @@ function togglePreShow() {
 		stopPreShow()
 	} else {
 		var minutes = prompt("Minutes from now to start")
-		preshow_secondsLeft = parseFloat(minutes) * 60
-		toggleFooter()
-		$.getJSON("preshow_files", false, function(data) {
-			$('#preso').after("<div id='preshow'></div><div id='tips'></div><div id='preshow_timer'></div>")
-			$.each(data, function(i, n) {
-				if(n == "preshow.json") {
-					// has a descriptions file
-					$.getJSON("/file/_preshow/preshow.json", false, function(data) {
-						preshow_des = data
-					})
-				} else {
-					$('#preshow').append('<img ref="' + n + '" src="/file/_preshow/' + n + '"/>')
-				}
+
+		if (preshow_secondsLeft = parseFloat(minutes) * 60) {
+			toggleFooter()
+			$.getJSON("preshow_files", false, function(data) {
+				$('#preso').after("<div id='preshow'></div><div id='tips'></div><div id='preshow_timer'></div>")
+				$.each(data, function(i, n) {
+					if(n == "preshow.json") {
+						// has a descriptions file
+						$.getJSON("/file/_preshow/preshow.json", false, function(data) {
+							preshow_des = data
+						})
+					} else {
+						$('#preshow').append('<img ref="' + n + '" src="/file/_preshow/' + n + '"/>')
+					}
+				})
+				startPreShow()
 			})
-			startPreShow()
-		})
+		}
 	}
 }
 
@@ -596,7 +854,7 @@ function startPreShow() {
 
 function addPreShowTips() {
 	time = secondsToTime(preshow_secondsLeft)
-	$('#preshow_timer').text(time + ' to go-time')
+	$('#preshow_timer').text('Resuming in: ' + time)
 	var des = preshow_des && preshow_des[tmpImg.attr("ref")]
 	if(des) {
 		$('#tips').show()
@@ -641,3 +899,117 @@ function nextPreShowImage() {
 /********************
  End PreShow Code
  ********************/
+
+function togglePause() {
+  $("#pauseScreen").toggle();
+}
+
+/********************
+ Style-Picker Code
+ ********************/
+
+function styleChoiceTags() {
+  return $('link[rel*="stylesheet"][href*="file/"]');
+}
+
+function styleChoices() {
+  return $.map(styleChoiceTags(), function(el) { return styleChoiceString(el.href); });
+}
+
+function styleChoiceString(href) {
+  var parts = href.split('/');
+  var file = parts[parts.length - 1];
+  var choice = file.replace(/\.css$/, '');
+
+  return choice;
+}
+
+function getCurrentStyle()
+{
+  var current = '';
+
+  styleChoiceTags().each(function (i, el) {
+    if (el.rel == 'stylesheet') {
+      current = el.href;
+    }
+  });
+
+  return styleChoiceString(current);
+}
+
+function setCurrentStyle(style, prop)
+{
+  styleChoiceTags().each(function (i, el) {
+    el.rel = 'alternate stylesheet';
+
+    if (styleChoiceString(el.href) == style) {
+      el.rel = 'stylesheet';
+    }
+  });
+
+  if (prop) {
+    if ('presenterView' in window) {
+      var pv = window.presenterView;
+      pv.setCurrentStyle(style, false);
+    }
+  }
+}
+
+function setupStyleMenu() {
+    $('#stylemenu').hide();
+
+    var menu = new StyleListMenu();
+    styleChoices().each(function(s) {
+        menu.addItem(s)
+    })
+
+    $('#stylepicker').html(menu.getList())
+    $('#stylemenu').menu({
+        content: $('#stylepicker').html(),
+        flyOut: true
+    });
+}
+
+function StyleListMenu()
+{
+  this.typeName = 'StyleListMenu'
+  this.items = new Array();
+  this.addItem = function (key) {
+    this.items[key] = new StyleListMenuItem(key)
+  }
+  this.getList = function() {
+    var newMenu = $("<ul>")
+    for(var i in this.items) {
+      var item = this.items[i]
+      var domItem = $("<li>")
+      if (item.textName != undefined) {
+        choice = $("<a onclick=\"setCurrentStyle('" + item.textName + "', true); $('#stylemenu').hide();\" href=\"#\">" + item.textName + "</a>")
+        domItem.append(choice)
+        newMenu.append(domItem)
+      }
+    }
+    return newMenu
+  }
+}
+
+function StyleListMenuItem(t)
+{
+  this.typeName = "StyleListMenuItem"
+  this.textName = t
+}
+/********************
+ End Style-Picker Code
+ ********************/
+
+
+/********************
+ Stats page
+ ********************/
+
+function setupStats()
+{
+  $("#stats div#all div.detail").hide();
+  $("#stats div#all div.row").click(function() {
+      $(this).find("div.detail").slideToggle("fast");
+  });
+}

data/views/404.erb

@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+  <%= erb :header %>
+</head>
+
+<body id="download">
+
+    <div id="preso">
+        <h1>File Not Found!</h1>
+        <h2><%= @env['REQUEST_PATH'] %>
+    </div>
+    <div id="footer">
+        <span id="debugInfo"></span>
+    </div>
+</body>
+</html>