From 3438dd0cd3da900e89eac0f87b612c6763f758de Mon Sep 17 00:00:00 2001
From: Scott Chacon <schacon@gmail.com>
Date: Mon, 12 Sep 2011 17:01:31 -0700
Subject: [PATCH] builtin timer in presenter view

---
 TODO.txt                 | 15 ++++------
 public/css/presenter.css | 12 +++++++-
 public/js/presenter.js   | 64 ++++++++++++++++++++++++++++++++++++++++
 views/presenter.erb      | 10 +++++--
 4 files changed, 88 insertions(+), 13 deletions(-)

diff --git a/TODO.txt b/TODO.txt
index 56be3d753..3dd100583 100644
--- a/TODO.txt
+++ b/TODO.txt
@@ -3,21 +3,16 @@ TODO
 
 ==
 
-- test suite
-- static, heroku, github, pdf, presenter, normal all working
 - pdf with notes
-- clean up js
-- clean up ruby
 - presenter view
   - timer (time left, percent done, percent time done)
-  - menu / goto
-  - settings (footer, debug?)
-  - madden? 
-- track file each slide is from
 - editing slides
 - webpage
-- message on startup
-- fix heroku gem shit
+
+--
+
+- clean up js
+- clean up ruby
 
 
 ==
diff --git a/public/css/presenter.css b/public/css/presenter.css
index 89dde8637..1e2a71fc7 100644
--- a/public/css/presenter.css
+++ b/public/css/presenter.css
@@ -10,12 +10,17 @@ div.zoomed {
   font-size: 1.5em;
 }
 
+#timerSection {
+  padding: 15px 10px;
+  border-top: 1px solid #555;
+  border-bottom: 1px solid #555;
+}
 #progress {
   padding: 10px;
 }
 #slideSource {
   padding: 10px;
-  background: #9d9;
+  background: #ccc;
 }
 
 #preview {
@@ -64,3 +69,8 @@ div.zoomed {
   padding: 10px;
   background: #eee;
 }
+
+.tBlue   { background: #79d; }
+.tGreen  { background: #9d9; }
+.tRed    { background: #d99; }
+.tYellow { background: #dd9; }
diff --git a/public/js/presenter.js b/public/js/presenter.js
index c892528d7..3c80a1efa 100644
--- a/public/js/presenter.js
+++ b/public/js/presenter.js
@@ -17,6 +17,9 @@ $(function(){
 			return false
 		}).next().hide()
 	})
+  $("#minStop").hide()
+  $("#startTimer").click(function() { toggleTimer() })
+  $("#stopTimer").click(function() { toggleTimer() })
 });
 
 function presPrevStep()
@@ -127,3 +130,64 @@ function keyDown(event)
 	}
 	return true
 }
+
+//* TIMER *//
+
+var timerSetUp = false;
+var timerRunning = false;
+var intervalRunning = false;
+var seconds = 0;
+var totalMinutes = 35;
+
+function toggleTimer()
+{
+  if (!timerRunning) {
+    timerRunning = true
+    totalMinutes = parseInt($("#timerMinutes").attr('value'))
+    $("#minStart").hide()
+    $("#minStop").show()
+    $("#timerInfo").text(timerStatus(0));
+    seconds = 0
+    if (!intervalRunning) {
+      intervalRunning = true
+      setInterval(function() {
+        if (!timerRunning) { return; }
+        seconds++;
+        $("#timerInfo").text(timerStatus(seconds));
+      }, 1000);  // fire every minute
+    }
+  } else {
+    seconds = 0
+    timerRunning = false
+    totalMinutes = 0
+    $("#timerInfo").text('')
+    $("#minStart").show()
+    $("#minStop").hide()
+  }
+}
+
+function timerStatus(seconds) {
+  var minutes = Math.round(seconds / 60);
+  var left = (totalMinutes - minutes);
+  var percent = Math.round((minutes / totalMinutes) * 100);
+  var progress = getSlidePercent() - percent;
+  setProgressColor(progress);
+  return minutes + '/' + left + ' - ' + percent + '%';
+}
+
+function setProgressColor(progress) {
+  ts = $('#timerSection')
+  ts.removeClass('tBlue')
+  ts.removeClass('tGreen')
+  ts.removeClass('tYellow')
+  ts.removeClass('tRed')
+  if(progress > 10) {
+    ts.addClass('tBlue')
+  } else if (progress > 0) {
+    ts.addClass('tGreen')
+  } else if (progress > -10) {
+    ts.addClass('tYellow')
+  } else {
+    ts.addClass('tRed')
+  }
+}
diff --git a/views/presenter.erb b/views/presenter.erb
index d65e24943..639a248fd 100644
--- a/views/presenter.erb
+++ b/views/presenter.erb
@@ -36,11 +36,17 @@
   </div>
   <div class="clear"></div>
   <div id="sidebar" class="grid_4">
+    <div id="slideSource">
+      Source: <span id="slideFile"></span>
+    </div>
     <div id="progress">
       Slide: <span id="slideInfo"></span>
     </div>
-    <div id="slideSource">
-      Source: <span id="slideFile"></span>
+    <div id="timerSection">
+      Timer: 
+      <span id="minStart"><input type="text" size="2" id="timerMinutes"/> min <input type="button" id="startTimer" value="Start"></span>
+      <span id="timerInfo"></span>
+      <span id="minStop"><input type="button" id="stopTimer" value="Stop"></span>
     </div>
     <div id="debugInfo"></div>
     <div id="slidemenu">