showoff 0.16.1 → 0.16.2

data/lib/showoff/version.rb

@@ -1,3 +1,3 @@
 # No namespace here since ShowOff is a class and I'd have to inherit from
 # Sinatra::Application (which we don't want to load here)
-SHOWOFF_VERSION = '0.16.1'
+SHOWOFF_VERSION = '0.16.2'

data/public/css/presenter.css

@@ -78,6 +78,9 @@
   #links a.enabled {
     background-color: #003d96;
   }
+  #links a.warning {
+    background-color: #8e030a;
+  }
 
   #links .mobile {
     display: none;
@@ -109,6 +112,10 @@
     color: #ffffff;
   }
 
+  #presenterPopup #stats .zoomline {
+    color: #000;
+  }
+
 #nextWindowConfirmation {
   right: 0.25em;
   left: auto;

data/public/css/showoff.css

@@ -843,6 +843,7 @@ form .element {
   -webkit-border-radius: 5px;
   -khtml-border-radius: 5px;
   border-radius: 5px;
+  cursor: default;
 }
 /* and to the bar inside the row */
 #stats div.bar {
@@ -864,6 +865,68 @@ form .element {
   right: 0.25em;
 }
 
+/* Add the disclosure triangles */
+#stats div.row:before {
+  font-family: FontAwesome;
+  font-style: normal;
+  font-weight: normal;
+  font-size: 1.25em;
+  text-decoration: inherit;
+}
+  #stats div.row.top:hover:before {
+    position: absolute;
+    content: "\f0da"; /* fa-caret-right */
+    margin-left: -0.5em;
+  }
+  #stats div.row.top.active:before {
+    position: absolute;
+    content: "\f0d7"; /* fa-caret-down */
+    margin-left: -0.75em;
+  }
+
+#stats h2 {
+  border-bottom: 1px solid #eee;
+}
+#stats #viewers,
+#stats #elapsed {
+  text-align: center;
+  min-height: 2em;
+}
+#stats #viewers.zoomline,
+#stats #elapsed.zoomline {
+  text-align: left;
+}
+#stats .zoomline .col.current,
+#stats .zoomline .col.current .inner {
+  background-color: #ffb105;
+  min-width: 5px;
+}
+#stats .zoomline .col.current:hover {
+  min-width: 10px;
+  background: #ffb105;
+  background: linear-gradient(#efefec, #ffb105);
+}
+#stats .zoomline .col.current:hover .inner,
+#stats .zoomline .col.current .inner:hover {
+  background-color: #f3708d;
+}
+
+
+#stats #stray,
+#stats #idle {
+  display: none;
+  width: 75%;
+  margin: 1em auto;
+  padding: 0.5em;
+  border: 1px solid #ccc;
+}
+  #stats #stray {
+    background-color: #8e030a;
+  }
+  #stats #idle {
+    background-color: #3a64c1;
+  }
+
 /* style all three boxes */
 #stats div#least,
 #stats div#most,
@@ -903,6 +966,7 @@ form .element {
 }
 #stats div#all div.bar {
   background: #66b366;
+  border-color: #000;
 }
 
 /* detail view */
@@ -944,7 +1008,8 @@ form .element {
   .callout.exercise,
   .callout.stop,
   .callout.thumbsup,
-  .callout.conversation {
+  .callout.conversation,
+  .callout.glossary {
     padding-left: 3em;
   }
 
@@ -955,6 +1020,7 @@ form .element {
   .callout.stop:before         { content: "\f05e"; } /* fa-ban */
   .callout.thumbsup:before     { content: "\f164"; } /* fa-thumbs-up */
   .callout.conversation:before { content: "\f0e5"; } /* fa-comment */
+  .callout.glossary:before     { content: "\f02d"; } /* fa-book */
 
 /* callouts used on error pages */
 .error .callout {
@@ -970,6 +1036,32 @@ form .element {
 /**********************
 ***  end callouts   ***
 **********************/
+.callout.glossary a.label,
+ul.glossary.terms a.label {
+  display: block;
+  font-weight: 600;
+  text-decoration: none;
+}
+ul.glossary.terms a.return {
+  text-decoration: none;
+  padding-right: 3em;
+}
+a.term {
+  text-decoration: none;
+}
+a.term:after {
+  font-family: FontAwesome;
+  font-size: 0.8em;
+  vertical-align: super;
+  content: "\f27b";
+  text-decoration: none;/* fa-commenting-o */
+}
+
+
+/**********************
+***  glossary       ***
+**********************/
+
 
 /* Render hidden headlines so that when we print with wkhtmltopdf, we can use section
    titles for page headers.  it would make sense to put this in the print section, but

data/public/js/presenter.js

@@ -126,6 +126,27 @@ $(document).ready(function(){
 
   setInterval(function() { updatePace() }, 1000);
 
+  setInterval(function() {
+    $.getJSON("/stats_data", function( json ) {
+      var percent = json['stray_p'];
+      if(percent > 25) {
+        $('#topbar #statslink').addClass('warning');
+        $('#topbar #statslink').attr('title', percent + "% of your audience is not viewing the same slide you are.");
+      }
+      else {
+        $('#stray').hide(); // in case the popup is open
+        $('#topbar #statslink').removeClass('warning');
+        $('#topbar #statslink').attr('title', "");
+      }
+
+      if( $('#presenterPopup #stats').is(':visible') ) {
+        setupStats(json);
+      }
+    });
+
+  }, 30000);
+
+
   // Tell the showoff server that we're a presenter
   register();
 
@@ -172,8 +193,6 @@ function presenterPopupToggle(page, event) {
       content.append($(data).siblings('#wrapper').html());
       popup.append(content);
 
-      setupStats(); // this function is in showoff.js because /stats does not load presenter.js
-
       $('body').append(popup);
       popup.slideDown(200); // #presenterPopup is display: none by default
     });

data/public/js/showoff.js

@@ -448,6 +448,10 @@ function currentSlideFromName(name) {
   var count = 0;
   if(name.length > 0 ) {
   	slides.each(function(s, slide) {
+      if (name == $(slide).attr("id") ) {
+        found = count;
+        return false;
+      }
   	  if (name == $(slide).find(".content").attr("ref") ) {
   	    found = count;
   	    return false;
@@ -460,12 +464,13 @@ function currentSlideFromName(name) {
 
 function currentSlideFromParams() {
 	var result;
-	if (result = window.location.hash.match(/#([0-9]+)/)) {
-		return result[result.length - 1] - 1;
+	// Match numeric slide hashes: #241
+	if (result = window.location.hash.match(/^#([0-9]+)$/)) {
+		return result[1] - 1;
 	}
-	else {
-	  var hash = window.location.hash
-	  return currentSlideFromName(hash.substr(1, hash.length))
+	// Match slide, with optional internal mark: #slideName(+internal)
+	else if (result = window.location.hash.match(/^#([^+]+)\+?(.*)?$/)) {
+	  return currentSlideFromName(result[1]);
   }
 }
 
@@ -1053,18 +1058,24 @@ function feedbackActivity() {
   setTimeout(function() { $("#hamburger").removeClass('highlight') }, 75);
 }
 
-function track() {
+function track(current) {
   if (mode.track && ws.readyState == WebSocket.OPEN) {
-    var slideName    = $("#slideFilename").text() || $("#slideFile").text(); // yey for consistency
-    var slideEndTime = new Date().getTime();
-    var elapsedTime  = slideEndTime - slideStartTime;
+    var slideName = $("#slideFilename").text() || $("#slideFile").text(); // yey for consistency
+
+    if(current) {
+      ws.send(JSON.stringify({ message: 'track', slide: slideName}));
+    }
+    else {
+      var slideEndTime = new Date().getTime();
+      var elapsedTime  = slideEndTime - slideStartTime;
 
-    // reset the timer
-    slideStartTime = slideEndTime;
+      // reset the timer
+      slideStartTime = slideEndTime;
 
-    if (elapsedTime > 1000) {
-      elapsedTime /= 1000;
-      ws.send(JSON.stringify({ message: 'track', slide: slideName, time: elapsedTime}));
+      if (elapsedTime > 1000) {
+        elapsedTime /= 1000;
+        ws.send(JSON.stringify({ message: 'track', slide: slideName, time: elapsedTime}));
+      }
     }
   }
 }
@@ -1170,6 +1181,9 @@ function postSlide() {
     }
 
 		$('#notes').html(notes);
+
+		// tell Showoff what slide we ended up on
+		track(true);
 	}
 }
 
@@ -1620,12 +1634,50 @@ function togglePause() {
  Stats page
  ********************/
 
-function setupStats()
+function setupStats(data)
 {
   $("#stats div#all div.detail").hide();
   $("#stats div#all div.row").click(function() {
+      $(this).toggleClass('active');
       $(this).find("div.detail").slideToggle("fast");
   });
+
+  ['stray', 'idle'].forEach(function(stat){
+    var percent = data[stat+'_p'];
+    var selector = '#'+stat;
+
+    if(percent > 25) {
+      $(selector).show();
+      $(selector+' .label').text(percent+'%');
+    }
+    else {
+      $(selector).hide();
+    }
+  });
+
+  var location = window.location.pathname == '/presenter' ? '#' : '/#';
+  var viewers  = data['viewers'];
+  if (viewers) {
+    if (viewers.length == 1 && viewers[0][3] == 'current') {
+      $("#viewers").removeClass('zoomline');
+      $("#viewers").text("All audience members are viewing the presenter's slide.");
+    }
+    else {
+      $("#viewers").zoomline({
+        max: data['viewmax'],
+        data: viewers,
+        click: function(element) { window.location = (location + element.attr("data-left")); }
+      });
+    }
+  }
+
+  if (data['elapsed']) {
+    $("#elapsed").zoomline({
+      max: data['maxtime'],
+      data: data['elapsed'],
+      click: function(element) { window.location = (location + element.attr("data-left")); }
+    });
+  }
 }
 
 /* Is this a mobile device? */

data/views/header.erb

@@ -11,6 +11,7 @@
   <link rel="stylesheet" type="text/css" href="<%= @asset_path %>/css/mermaid-6.0.0.css" />
   <link rel="stylesheet" type="text/css" href="<%= @asset_path %>/css/font-awesome-4.4.0/css/font-awesome.min.css">
   <link rel="stylesheet" type="text/css" href="<%= @asset_path %>/css/showoff.css?v=<%= SHOWOFF_VERSION %>" />
+  <link rel="stylesheet" type="text/css" href="<%= @asset_path %>/css/zoomline-0.0.1.css">
 
   <script type="text/javascript" src="<%= @asset_path %>/js/jquery-2.1.4.min.js"></script>
 
@@ -20,6 +21,7 @@
   <script type="text/javascript" src="<%= @asset_path %>/js/jquery.doubletap-4ff02c5.js"></script>
   <script type="text/javascript" src="<%= @asset_path %>/js/jTypeWriter-1.1.js"></script>
   <script type="text/javascript" src="<%= @asset_path %>/js/bigtext-0.1.8.js"></script>
+  <script type="text/javascript" src="<%= @asset_path %>/js/zoomline-0.0.1.js"></script>
   <script type="text/javascript" src="<%= @asset_path %>/js/highlight.pack-9.2.0.js"></script>
   <script type="text/javascript" src="<%= @asset_path %>/js/mermaid-6.0.0-min.js"></script>
 

data/views/header_mini.erb

@@ -9,8 +9,10 @@
 
   <link rel="stylesheet" type="text/css" href="<%= @asset_path %>/css/showoff.css?v=<%= SHOWOFF_VERSION %>" />
   <link rel="stylesheet" type="text/css" href="<%= @asset_path %>/css/font-awesome-4.4.0/css/font-awesome.min.css">
+  <link rel="stylesheet" type="text/css" href="<%= @asset_path %>/css/zoomline-0.0.1.css">
 
   <script type="text/javascript" src="<%= @asset_path %>/js/jquery-2.1.4.min.js"></script>
+  <script type="text/javascript" src="<%= @asset_path %>/js/zoomline-0.0.1.js"></script>
 
   <script type="text/javascript" src="<%= @asset_path %>/js/showoff.js?v=<%= SHOWOFF_VERSION %>"></script>
 

data/views/stats.erb

@@ -3,68 +3,59 @@
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
     <%= erb :header_mini %>
-
-    <script type="text/javascript">
-        $(document).ready(function(){ setupStats(); });
-    </script>
 </head>
 
 <body id="stats">
   <div id="wrapper">
-    <h1>Viewing Statistics</h1>
 
-    <div id="least">
-      <h3>Least viewed slides</h3>
-      <% if @least.size > 0 %>
-        <% max = @least.sort_by {|slide, time| -time}[0][1].to_f %>
-        <% timestr =  (max > 3599) ?  '%H:%M:%S' : '%M:%S' %>
-        <% @least.each do |slide, time| %>
-          <div class="row">
-            <span class="label"><%= slide %></span>
-            <div class="bar" style="width: <%= (time/max)*100 %>%;"> </div>
-            <div class="time"><%= Time.at(time).gmtime.strftime(timestr) %></div>
-          </div>
-        <% end %>
-      <% end %>
-    </div>
+    <script type="text/javascript">
+        $(document).ready(function(){
+          $.getJSON("/stats_data", function( json ) {
+            setupStats(json);
+          });
+        });
+    </script>
 
-    <div id="most">
-      <h3>Most viewed slides</h3>
-      <% if @least.size > 0 %>
-        <% max = @most[0][1].to_f %>
-        <% timestr =  (max > 3599) ?  '%H:%M:%S' : '%M:%S' %>
-        <% @most.each do |slide, time| %>
-          <div class="row">
-            <span class="label"><%= slide %></span>
-            <div class="bar" style="width: <%= (time/max)*100 %>%;"> </div>
-            <div class="time"><%= Time.at(time).gmtime.strftime(timestr) %></div>
-          </div>
-        <% end %>
-      <% end %>
-    </div>
+    <h1>Viewing Statistics</h1>
+    <p id="stray"><span class="label"></span> of your audience is not viewing the same slide you are.</p>
+    <p id="idle"><span class="label"></span> of your audience is idle.</p>
+    <h2>Slides currently being viewed:</h2>
+    <div id="viewers">No data to display.</div>
+    <h2>Elapsed time spent on each slide:</h2>
+    <div id="elapsed">No data to display.</div>
+  </div>
 
-    <div id="all">
-      <h3>All slides</h3>
-      <%# We reuse the max value calculated from the above step. %>
-      <% @all.sort.map do |slide, time| %>
-          <div class="row">
-          <span class="label"><%= slide %></span>
-          <div class="bar" style="width: <%= (time/max)*100 %>%;"> </div>
-          <div class="time"><%= Time.at(time).gmtime.strftime(timestr) %></div>
-          <% if @counter %>
-            <div class="detail">
-              <% @counter[slide].each do |host, count| %>
-                <div class="row">
+  <div id="all">
+    <h3>All slides</h3>
+    <% max = @all.sort_by {|slide, time| -time}[0][1].to_f rescue 0 %>
+    <% @all.sort.map do |slide, time| %>
+        <% next if slide.empty? %>
+        <% timestr = (time < 60) ? ':%S' : (time < 3599) ?  '%M:%S' : '%H:%M:%S' %>
+        <div class="row top">
+        <span class="label"><%= slide %></span>
+        <div class="bar" style="width: <%= (time/max)*100 %>%;"> </div>
+        <div class="time"><%= Time.at(time).gmtime.strftime(timestr) %></div>
+        <% if @counter %>
+          <div class="detail">
+            <% @counter[slide].each do |host, views| %>
+              <% count = views.inject(0) { |sum, view| sum += view['elapsed'] } %>
+              <% timestr = (count < 60) ? ':%S' : (count < 3599) ?  '%M:%S' : '%H:%M:%S' %>
+              <div class="row">
+                <% if host == 'presenter' %>
+                  <% bgcolor = '' %>
                   <span class="label"><%= host %>:</span>
-                  <div class="bar" style="width: <%= (count/max)*100 %>%;"> </div>
-                  <div class="time"><%= Time.at(count).gmtime.strftime(timestr) %></div>
-                </div>
-              <% end %>
-            </div>
-          <% end %>
-        </div>
-      <% end %>
-    </div>
+                <% else %>
+                  <% bgcolor = "background-color: ##{host[0...6]}" %>
+                <% end %>
+                <div class="bar" style="width: <%= (count/max)*100 %>%; <%= bgcolor %>"> </div>
+                <div class="time"><%= Time.at(count).gmtime.strftime(timestr) %></div>
+              </div>
+            <% end %>
+          </div>
+        <% end %>
+      </div>
+    <% end %>
   </div>
+
 </body>
 </html>