showoff 0.15.4 → 0.16.0

data/public/js/presenter.js

@@ -59,20 +59,23 @@ $(document).ready(function(){
     });
   }
 
-  // wait until the presentation is loaded to hook up the previews.
-  // TODO: If we decide to implement this for the audience display, we can move it later
-  $("body").bind("showoff:loaded", function (event) {
-    $('#navigation li a.navItem').hover(function() {
-      var position = $(this).position();
-      $('#navigationHover').css({top: position.top, left: position.left + $('#navigation').width() + 5})
-      $('#navigationHover').html(slides.eq($(this).attr('rel')).html());
-      $('#navigationHover').show();
-    },function() {
-      $('#navigationHover').hide();
-    });
+  // set up notes resizing
+  $( "#notes" ).resizable({
+    minHeight: 0,
+    handles: {"n": $(".notes-grippy")}
+  });
+  $("#notes").resize(function(){
+    document.cookie = "notes="+$('#notes').height();
   });
 
 
+  // restore the UI settings
+  var ui = document.cookieHash['ui'];
+  $('#notes').height(document.cookieHash['notes']);
+  if(! document.cookieHash['sidebar']) {
+    toggleSidebar();
+  }
+
   // Hide with js so jquery knows what display property to assign when showing
   toggleAnnotations();
 
@@ -114,6 +117,7 @@ $(document).ready(function(){
     sendAnnotationConfig('fillColor', color);
   });
 
+  $('#statusbar .controls input').checkboxradio({icon: false });
   $('#remoteToggle').change( toggleFollower );
   $('#followerToggle').change( toggleUpdater );
   $('#annotationsToggle').change( toggleAnnotations );
@@ -258,6 +262,42 @@ function nextSlideNum(url) {
   return snum;
 }
 
+// allows subsystems to pin the sidebar open. The sidebar will only hide when
+// all pins have been removed.
+function pinSidebar(pin) {
+  $('#topbar #close-sidebar').addClass('disabled');
+  $('#topbar #close-sidebar').removeClass('fa-rotate-90');
+  $('#sidebar').show();
+  zoom(true);
+
+  mode.pinnedSidebar = mode.pinnedSidebar || []
+  if (mode.pinnedSidebar.indexOf(pin) == -1) {
+    mode.pinnedSidebar.push(pin);
+  }
+}
+
+function unpinSidebar(pin) {
+  if (Array.isArray(mode.pinnedSidebar)) {
+    mode.pinnedSidebar = mode.pinnedSidebar.filter(function(item) {
+      return item !== pin;
+    });
+
+    if(mode.pinnedSidebar.length == 0) {
+      $('#topbar #close-sidebar').removeClass('disabled');
+      delete mode.pinnedSidebar;
+    }
+  }
+}
+
+function toggleSidebar() {
+  if (!mode.pinnedSidebar) {
+    $('#topbar #close-sidebar').toggleClass('fa-rotate-90');
+    $('#sidebar').toggle();
+    zoom(true);
+
+    document.cookie = "sidebar="+$('#sidebar').is(':visible');
+  }
+}
 
 function toggleNotes() {
   mode.notes = !mode.notes;
@@ -266,9 +306,17 @@ function toggleNotes() {
     try {
       if(windowIsClosed(notesWindow)){
         notesWindow = blankStyledWindow("Showoff Notes", 'width=350,height=450', 'notes', true);
-        window.setTimeout(postSlide, 500);
+        window.setTimeout(function() {
+          // call back and update the parent presenter if the window is closed
+          notesWindow.onunload = function(e) {
+            notesWindow.opener.toggleNotes();
+          };
+
+          postSlide();
+        }, 500);
+
       }
-      $('#notesWindow').addClass('enabled');
+      $('#notes').addClass('hidden');
     }
     catch(e) {
       console.log('Failed to open notes window. Popup blocker?');
@@ -277,12 +325,14 @@ function toggleNotes() {
   else {
     try {
       notesWindow && notesWindow.close();
-      $('#notesWindow').removeClass('enabled');
+      $('#notes').removeClass('hidden');
     }
     catch (e) {
       console.log('Notes window failed to close properly.');
     }
   }
+
+  zoom(true);
 }
 
 function blankStyledWindow(title, dimensions, classes, resizable) {
@@ -340,6 +390,9 @@ function postQuestion(question, questionID) {
 
   $("#unanswered").append(questionItem);
   updateQuestionIndicator();
+
+  // don't allow the sidebar to hid when questions exist
+  pinSidebar('question');
 }
 
 function removeQuestion(questionID) {
@@ -348,6 +401,10 @@ function removeQuestion(questionID) {
           .remove();
   $('#answered').append($(question));
   updateQuestionIndicator();
+
+  if($('#unanswered li').length == 0) {
+    unpinSidebar('question');
+  }
 }
 
 function updateQuestionIndicator() {
@@ -631,6 +688,9 @@ function startTimer() {
   $("#timerDisplay").show();
   $("#timerSection").addClass('open');
 
+  // keep the sidebar open while the timer is active
+  pinSidebar('timer');
+
   var time = parseInt( $("#timerMinutes").val() ) * 60;
   if(time) {
     $('#timerDisplay')
@@ -703,6 +763,8 @@ function toggleTimer() {
 function endTimer() {
   $('#stopTimer').val('Reset');
   $("#pauseTimer").hide();
+
+  // don't unpin yet, we don't want the timer to just wander off into the distance!
 }
 
 function stopTimer() {
@@ -716,6 +778,9 @@ function stopTimer() {
   $("#pauseTimer").hide();
   $("#timerDisplay").hide();
   $('#timerSection').removeClass();
+
+  // only unpin when the user has dismissed the timer
+  unpinSidebar('timer');
 }
 
 /********************

data/public/js/showoff.js

@@ -32,6 +32,10 @@ document.cookie.split(';').forEach( function(item) {
   var pos = item.indexOf('=');
   var key = item.slice(0,pos).trim();
   var val = item.slice(pos+1).trim();
+  try {
+    val = JSON.parse(val);
+  }
+  catch(e) { }
 
   document.cookieHash[key] = val;
 });
@@ -87,6 +91,18 @@ function setupPreso(load_slides, prefix) {
   // yes, this is a global
   annotations = new Annotate();
 
+  // wait until the presentation is loaded to hook up the previews.
+  $("body").bind("showoff:loaded", function (event) {
+    $('#navigation li a.navItem').hover(function() {
+      var position = $(this).position();
+      $('#navigationHover').css({top: position.top, left: position.left + $('#navigation').width() + 5})
+      $('#navigationHover').html(slides.eq($(this).attr('rel')).html());
+      $('#navigationHover').show();
+    },function() {
+      $('#navigationHover').hide();
+    });
+  });
+
   // Open up our control socket
   if(mode.track) {
     connectControlChannel();
@@ -556,18 +572,31 @@ function showSlide(back_step, updatepv) {
     }
   }
 
-  // Update presenter view, if we spawned one
-	if (updatepv && 'presenterView' in window) {
+  // if we're a slave/display window
+  if('presenterView' in window) {
     var pv = window.presenterView;
-		pv.slidenum = slidenum;
-    pv.incrCurr = incrCurr
-    pv.incrSteps = incrSteps
-		pv.showSlide(true);
-		pv.postSlide();
 
-		pv.update();
+    // Update presenter view, if it's tracking us
+    if (updatepv) {
+      pv.slidenum  = slidenum;
+      pv.incrCurr  = incrCurr
+      pv.incrSteps = incrSteps
 
-	}
+      pv.showSlide(true);
+      pv.postSlide();
+      pv.update();
+    }
+
+    // if the slide is marked to autoplay videos, then fire them off!
+    if(currentSlide.hasClass('autoplay')) {
+      console.log('Autoplaying ' + currentSlide.attr('id'))
+      setTimeout(function(){
+        $(currentSlide).find('video').each(function() {
+          $(this).get(0).play();
+        });
+      }, 1000);
+    }
+  }
 
   // Update nav
   $('.highlighted').removeClass('highlighted');
@@ -1026,7 +1055,7 @@ function feedbackActivity() {
 
 function track() {
   if (mode.track && ws.readyState == WebSocket.OPEN) {
-    var slideName    = $("#slideFilename").text();
+    var slideName    = $("#slideFilename").text() || $("#slideFile").text(); // yey for consistency
     var slideEndTime = new Date().getTime();
     var elapsedTime  = slideEndTime - slideStartTime;
 
@@ -1099,6 +1128,11 @@ function increment() {
 
 function prevStep(updatepv)
 {
+  $(currentSlide).find('video').each(function() {
+    console.log('Pausing videos on ' + currentSlide.attr('id'))
+    $(this).get(0).pause();
+  });
+
   fireEvent("showoff:prev");
   track();
   slidenum--;
@@ -1107,6 +1141,11 @@ function prevStep(updatepv)
 
 function nextStep(updatepv)
 {
+  $(currentSlide).find('video').each(function() {
+    console.log('Pausing videos on ' + currentSlide.attr('id'))
+    $(this).get(0).pause();
+  });
+
   fireEvent("showoff:next");
   track();
 

data/views/index.erb

@@ -10,6 +10,7 @@
 
 <i id="hamburger" class="fa fa-bars fa-2x"></i>
 <div id="sidebarWrapper">
+    <div id="navigationHover"></div>
     <div id="feedbackSidebar" class="sideMenu">
     <img id="disconnected" src="<%= @asset_path %>/css/disconnected.png">
     <h3>Showoff Menu</h3>

data/views/presenter.erb

@@ -5,8 +5,12 @@
   <%= erb :header %>
   <link rel="stylesheet" href="<%= @asset_path %>/css/presenter.css?v=<%= SHOWOFF_VERSION %>" type="text/css"/>
   <link href="<%= @asset_path %>/css/TimeCircles-89ac5ae.css" rel="stylesheet">
+  <link href="<%= @asset_path %>/css/jquery-ui-1.12.1.css" rel="stylesheet">
+
   <script type="text/javascript" src="<%= @asset_path %>/js/TimeCircles-89ac5ae.js"></script>
   <script type="text/javascript" src="<%= @asset_path %>/js/presenter.js?v=<%= SHOWOFF_VERSION %>"></script>
+  <script type="text/javascript" src="<%= @asset_path %>/js/jquery-ui-1.12.1.js"></script>
+
   <script type="text/javascript">
     editUrl  = "<%= @edit %>";
     issueUrl = "<%= @issues %>";
@@ -16,8 +20,9 @@
 <body class="presenter">
 <%= erb :help %>
 
-<div id="main">
+<div id="pagewrapper">
   <div id="topbar">
+    <a id="close-sidebar" class="fa fa-bars" aria-hidden="true" href="javascript:toggleSidebar();"></a>
     <span id="slideSource">
       <label>Source:</label>
       <% if @request.host == 'localhost' %>
@@ -40,7 +45,6 @@
         </span>
         <span>
           <a id="slaveWindow" href="javascript:toggleSlave();" title="Enable the display window.">Display Window <i class="fa fa-clone"></i></a>
-          <a id="notesWindow" href="javascript:toggleNotes();" title="Enable the popout notes window.">Notes Window <i class="fa fa-clone"></i></a>
         </span>
         <span>
           <a id="printSlides" href="javascript:printSlides();" title="Print slides using a new window.">Print Slides <i class="fa fa-print"></i></a>
@@ -63,82 +67,88 @@
     <p><a href="javascript:chooseLayout('default');">cancel</a><input type="button" onClick="javascript:openNext();" value="Open Window" /></p>
   </div>
 
-  <div id="center">
-    <div id="sidebar">
-      <div id="timerSection">
-        <input type="button" id="pauseTimer" value="Pause" />
-        <input type="button" id="stopTimer" value="Cancel" />
-        <span id="timerLabel">Timer:</span>
-        <span id="minStart">
-          <input type="text" size="8" id="timerMinutes"/> min
-          <input type="button" id="startTimer" value="Start" />
-        </span>
-        <div id="timerDisplay"></div>
+<div id="main">
+  <div id="sidebar">
+    <div id="timerSection">
+      <input type="button" id="pauseTimer" value="Pause" />
+      <input type="button" id="stopTimer" value="Cancel" />
+      <span id="timerLabel">Timer:</span>
+      <span id="minStart">
+        <input type="text" size="8" id="timerMinutes"/> min
+        <input type="button" id="startTimer" value="Start" />
+      </span>
+      <div id="timerDisplay"></div>
+    </div>
+    <div id="feedbackPace">
+      <span id="paceSlow">Speed Up!</span>
+      <span id="paceFast">Slow Down!</span>
+      <img id="paceMarker" src="<%= @asset_path %>/css/paceMarker.png" />
+    </div>
+    <div id="navigation" class="submenu"></div>
+    <div id="navigationHover"></div>
+    <div id="questions">
+      <h3>Audience Questions</h3>
+      <ol id="unanswered"></ol>
+      <ol id="answered"></ol>
+    </div>
+  </div>
+
+  <div id="presenter">
+    <div id="frame">
+      <div id="preview">
+        <img id="disconnected" src="<%= @asset_path %>/css/disconnected-large.png" />
+        <div id="prevSlide" class="thumb"><div class="container"></div><h3 class="label">Previous</h3></div>
+        <div id="nextSlide" class="thumb"><div class="container"></div><h3 class="label">Next</h3></div>
+        <div id="preso">loading presentation...</div>
       </div>
-      <div id="feedbackPace">
-        <span id="paceSlow">Speed Up!</span>
-        <span id="paceFast">Slow Down!</span>
-        <img id="paceMarker" src="<%= @asset_path %>/css/paceMarker.png" />
+      <div id="annotationToolbar">
+        <label>Tools</label>
+          <i class="fa fa-pencil tool default active" data-action="draw" aria-hidden="true"></i>
+          <i class="fa fa-arrow-right tool"  data-action="rightArrow" aria-hidden="true"></i>
+          <i class="fa fa-arrow-left tool"  data-action="leftArrow" aria-hidden="true"></i>
+          <i class="fa fa-bullseye tool" data-action="highlight" aria-hidden="true"></i>
+          <i class="fa fa-eraser tool"  data-action="erase" aria-hidden="true"></i>
+        <label>Lines</label>
+          <i class="fa fa-square-o lines color1 active" aria-hidden="true"></i>
+          <i class="fa fa-square-o lines color2" aria-hidden="true"></i>
+          <i class="fa fa-square-o lines color3" aria-hidden="true"></i>
+          <i class="fa fa-square-o lines color4" aria-hidden="true"></i>
+        <label>Shapes</label>
+          <i class="fa fa-square shapes color1" aria-hidden="true"></i>
+          <i class="fa fa-square shapes color2" aria-hidden="true"></i>
+          <i class="fa fa-square shapes color3 active" aria-hidden="true"></i>
+          <i class="fa fa-square shapes color4" aria-hidden="true"></i>
       </div>
-      <div id="navigation" class="submenu"></div>
-      <div id="navigationHover"></div>
     </div>
-    <div id="presenter">
-      <div id="frame">
-        <div id="preview">
-          <img id="disconnected" src="<%= @asset_path %>/css/disconnected-large.png" />
-          <div id="prevSlide" class="thumb"><div class="container"></div><h3 class="label">Previous</h3></div>
-          <div id="nextSlide" class="thumb"><div class="container"></div><h3 class="label">Next</h3></div>
-          <div id="preso">loading presentation...</div>
-        </div>
-        <div id="annotationToolbar">
-          <label>Tools</label>
-            <i class="fa fa-pencil tool default active" data-action="draw" aria-hidden="true"></i>
-            <i class="fa fa-arrow-right tool"  data-action="rightArrow" aria-hidden="true"></i>
-            <i class="fa fa-arrow-left tool"  data-action="leftArrow" aria-hidden="true"></i>
-            <i class="fa fa-bullseye tool" data-action="highlight" aria-hidden="true"></i>
-            <i class="fa fa-eraser tool"  data-action="erase" aria-hidden="true"></i>
-          <label>Lines</label>
-            <i class="fa fa-square-o lines color1 active" aria-hidden="true"></i>
-            <i class="fa fa-square-o lines color2" aria-hidden="true"></i>
-            <i class="fa fa-square-o lines color3" aria-hidden="true"></i>
-            <i class="fa fa-square-o lines color4" aria-hidden="true"></i>
-          <label>Shapes</label>
-            <i class="fa fa-square shapes color1" aria-hidden="true"></i>
-            <i class="fa fa-square shapes color2" aria-hidden="true"></i>
-            <i class="fa fa-square shapes color3 active" aria-hidden="true"></i>
-            <i class="fa fa-square shapes color4" aria-hidden="true"></i>
-        </div>
-      </div>
-      <div id="statusbar">
-        <span id="progress">
-          Slide: <span id="slideInfo"></span>
-        </span>
-        <div id="debugInfo"></div>
-        <span id="enableRemote" title="Enables tracking of other presenters.">
-          <label for="remoteToggle">Enable Remote</label><input type="checkbox" id="remoteToggle" autocomplete="off" checked />
+
+    <div id="statusbar">
+      <span id="progress" class="no-mobile">
+        Slide: <span id="slideInfo"></span>
+      </span>
+      <div id="debugInfo"></div>
+
+      <div class="controls">
+        <span id="enableAnnotations" title="Enable the annotation system." class="no-mobile">
+          <label for="annotationsToggle">Annotations</label><input type="checkbox" id="annotationsToggle" autocomplete="off" />
         </span>
         <span id="enableFollower" title="Send slide change notifications.">
           <label for="followerToggle">Update Follower</label><input type="checkbox" id="followerToggle" autocomplete="off" checked />
         </span>
-        <span id="enableAnnotations" title="Enable the annotation system.">
-          <label for="annotationsToggle">Annotations</label><input type="checkbox" id="annotationsToggle" autocomplete="off" />
+        <span id="enableRemote" title="Enables tracking of other presenters.">
+          <label for="remoteToggle">Enable Remote</label><input type="checkbox" id="remoteToggle" autocomplete="off" checked />
         </span>
+        <a class="no-mobile fa fa-external-link-square" aria-hidden="true" href="javascript:toggleNotes();"></a>
+        <i class="no-mobile fa fa-bars notes-grippy ui-resizable-handle ui-resizable-n" aria-hidden="true"></i>
       </div>
-    </div>
-  </div>
 
-  <div id="bottom">
+    </div>
     <div id="buttonNav">
       <div id="buttonPrev"><i class="fa fa-chevron-left fa-lg"></i> Previous</div><div id="buttonNext">Next <i class="fa fa-chevron-right fa-lg"></i></div>
     </div>
-    <div id="questions">
-      <h3>Audience Questions</h3>
-      <ol id="unanswered"></ol>
-      <ol id="answered"></ol>
-    </div>
+
     <div id="notes"></div>
   </div>
+
 </div>
 
 <div id="slides" class="offscreen" <%= 'style="display:none;"' if @slides %>>