showoff 0.18.2 → 0.19.0

data/public/js/presenter.js

@@ -387,6 +387,8 @@ function toggleNotes() {
       if(windowIsClosed(notesWindow)){
         notesWindow = blankStyledWindow(I18n.t('notes.label'), 'width=350,height=450', 'notes', true);
         window.setTimeout(function() {
+          $(notesWindow.document.documentElement).addClass('floatingNotes');
+
           // call back and update the parent presenter if the window is closed
           notesWindow.onunload = function(e) {
             notesWindow.opener.toggleNotes();

data/public/js/showoff.js

@@ -27,6 +27,9 @@ var loadSlidesPrefix
 
 var mode = { track: true, follow: true };
 
+// global variable to register tours with
+var tours = {};
+
 // a dummy websocket object to make standalone presentations easier.
 var ws = {}
 ws.send = function() { /* no-op */ }
@@ -103,9 +106,20 @@ function setupPreso(load_slides, prefix) {
   annotations = new Annotate();
 
   // must be defined using [] syntax for a variable button name on IE.
-  var closeLabel      = I18n.t('help.close');
-  var buttons         = {};
-  buttons[closeLabel] = function() { $(this).dialog( "close" ); };
+  var buttons = [
+    {
+      text: I18n.t('help.close'),
+      click: function() { $(this).dialog( "close" ); }
+    },
+    {
+      text: I18n.t('tour.reset'),
+      "class": 'auxillary-buttons',
+      click: function() {
+        document.cookie="tours=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
+        document.cookie="tourVersion=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
+      }
+    }
+  ];
 
   $("#help-modal").dialog({
     autoOpen: false,
@@ -205,16 +219,11 @@ function initializePresentation(prefix) {
 
   $('pre.highlight code').each(function(i, block) {
     try {
+      // syntax highlight the code
       hljs.highlightBlock(block);
 
-      // Highlight requested lines
-      block.innerHTML = block.innerHTML.split(/\r?\n/).map(function (line, i) {
-        if (line.indexOf('* ') === 0) {
-          return line.replace(/^\*(.*)$/, '<div class="highlightedLine">$1</div>');
-        }
-
-        return line;
-      }).join('\n');
+      // then add focus on any lines marked
+      highlightLines(block);
 
     } catch(e) {
       console.log('Syntax highlighting failed on ' + $(this).closest('div.slide').attr('id'));
@@ -579,6 +588,64 @@ function clearCookies() {
   document.cookie = "locale=;expires=Thu, 21 Sep 1979 00:00:01 UTC;";
   document.cookie = "layout=;expires=Thu, 21 Sep 1979 00:00:01 UTC;";
   document.cookie = "notes=;expires=Thu, 21 Sep 1979 00:00:01 UTC;";
+  document.cookie = "tourVersion=;expires=Thu, 21 Sep 1979 00:00:01 UTC;";
+}
+
+// called when slides with special content are displayed. (like the Activity complete toggle)
+// Show a "welcome intro" the first time it's seen.
+function showTour(name) {
+  // we don't need to show tours if we're a display view
+  if('presenterView' in window) {
+    return false;
+  }
+
+  // dont' blow up if someone calls a missing tour
+  if(!(name in tours)) {
+    console.log('No such tour: '+name);
+    return false;
+  }
+
+  var clientTours = document.cookieHash['tours'] || [];
+
+  if(clientTours.indexOf(name) == -1) {
+    toggleKeybinding('off');
+
+    var steps = tours[name] || [];
+
+    var intro = introJs();
+    intro.setOptions({
+      showStepNumbers: false,
+      showBullets: false,
+      steps: steps
+    });
+
+    if(steps.length > 1) {
+      intro.setOption("showBullets", true);
+    }
+
+    intro.onexit(function() {
+      toggleKeybinding('on');
+    });
+
+    // record tour completion so we don't continue to annoy people
+    intro.oncomplete(function() {
+      clientTours.push(name);
+      document.cookieHash['tours'] = clientTours;
+      document.cookie = "tours="+JSON.stringify(clientTours);
+    });
+
+    intro.start();
+  }
+}
+
+// get the value of an option=value class applied to a slide
+function getSlideOption(option) {
+  var classes = currentSlide.attr('class').split(' ');
+  var match   = classes.find(function(item){
+    return (item.indexOf(option+'=') == 0);
+  });
+
+  return (match ? match.split('=')[1] : null);
 }
 
 function checkSlideParameter() {
@@ -663,16 +730,18 @@ function showSlide(back_step, updatepv) {
     currentSlide.find('canvas.annotations').first().stopAnnotation();
   }
 
-	currentSlide = slides.eq(slidenum)
+  if(currentSlide) { currentSlide.removeClass('currentSlide') };
+  currentSlide = slides.eq(slidenum)
+  currentSlide.addClass('currentSlide');
 
-	var transition = currentSlide.attr('data-transition')
-	var fullPage = currentSlide.find(".content").is('.full-page');
+  var transition = currentSlide.attr('data-transition')
+  var fullPage = currentSlide.find(".content").is('.full-page');
 
-	if (back_step || fullPage) {
-		transition = 'none'
-	}
+  if (back_step || fullPage) {
+    transition = 'none'
+  }
 
-	$('#preso').cycle(slidenum, transition)
+  $('#preso').cycle(slidenum, transition)
 
 	if (fullPage) {
 		$('#preso').css({'width' : '100%', 'overflow' : 'visible'});
@@ -774,6 +843,17 @@ function showSlide(back_step, updatepv) {
     activityIncomplete = false;
   }
 
+  if(currentSlide.hasClass('activity')) {
+    showTour('showoff:activity');
+  }
+  if(getSlideOption('form')) {
+    showTour('showoff:form');
+  }
+  var tour = getSlideOption('tour');
+  if(tour) {
+    showTour(tour);
+  }
+
   // show the sync button if we're not on the same slide as the presenter
   checkSyncState();
 
@@ -865,6 +945,17 @@ function showIncremental(incr)
 		}
 }
 
+// focus highlight requested lines of a given code block
+function highlightLines(block) {
+  block.innerHTML = block.innerHTML.split(/\r?\n/).map(function (line, i) {
+    if (line.indexOf('* ') === 0) {
+      return line.replace(/^\*(.*)$/, '<div class="highlightedLine">$1</div>');
+    }
+
+    return line;
+  }).join('\n');
+}
+
 // form handling
 function submitForm(form) {
   if(validateForm(form)) {

data/views/header.erb

@@ -10,6 +10,7 @@
   <link rel="stylesheet" type="text/css" href="<%= @asset_path %>/css/highlight/<%= @highlightStyle %>.css"  />
   <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/introjs-2.5.local.css">
   <link rel="stylesheet" type="text/css" href="<%= @asset_path %>/css/jquery-ui-1.12.1.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">
@@ -28,6 +29,9 @@
   <script type="text/javascript" src="<%= @asset_path %>/js/simpleStrings-0.0.1.js"></script>
   <script type="text/javascript" src="<%= @asset_path %>/js/mermaid-6.0.0-min.js"></script>
 
+  <!-- waiting on https://github.com/usablica/intro.js/pull/727 -->
+  <script type="text/javascript" src="<%= @asset_path %>/js/intro-2.5.local.js"></script>
+
   <script type="text/javascript" src="<%= @asset_path %>/js/coffee-script-1.1.3-pre.js"></script>
 
   <script type="text/javascript" src="<%= @asset_path %>/js/annotations.js?v=<%= SHOWOFF_VERSION %>"></script>

data/views/index.erb

@@ -3,6 +3,30 @@
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
   <%= erb :header %>
+
+  <script type="text/javascript">
+    tours['showoff:activity'] = [
+      {
+        element: ".currentSlide .activityToggle",
+        intro: I18n.t('tour.activity.complete')
+      }
+    ];
+
+    tours['showoff:form'] = [
+      {
+        element: ".currentSlide input.save",
+        intro: I18n.t('tour.form.save')
+      }
+    ];
+
+    tours['showoff:menu'] = [
+      {
+        element: "#hamburger",
+        intro: I18n.t('tour.menu')
+      }
+    ];
+
+  </script>
 </head>
 
 <body>

data/views/onepage.erb

@@ -11,15 +11,19 @@
 
   <% if @inline %>
 
-    <%= inline_css(['showoff.css', 'font-awesome-4.4.0/css/font-awesome.min.css', 'onepage.css', "highlight/#{@highlightStyle}.css"], 'public/css') %>
+    <%= inline_css(['font-awesome-4.4.0/css/font-awesome.min.css', 'mermaid-6.0.0.css', "highlight/#{@highlightStyle}.css"], 'public/css') %>
+    <%= inline_css(['showoff.css', 'onepage.css'], 'public/css') %>
     <%= inline_css(css_files) %>
 
-    <%= inline_js(['jquery-2.1.4.min.js', 'jquery-print.js', 'showoff.js', 'highlight.pack-9.2.0.js'], 'public/js') %>
+    <%= inline_js(['jquery-2.1.4.min.js', 'showoff.js', 'highlight.pack-9.2.0.js'], 'public/js') %>
+    <%= inline_js(['bigtext-0.1.8.js', 'simpleStrings-0.0.1.js', 'mermaid-6.0.0-min.js'], 'public/js') %>
+
     <%= inline_js(@languages, 'public/js') if @languages %>
     <%= inline_js(js_files) %>
 
   <% else %>
-    <% ['showoff.css', 'font-awesome-4.4.0/css/font-awesome.min.css', 'onepage.css', "highlight/#{@highlightStyle}.css"].each do |css_file| %>
+    <% ['font-awesome-4.4.0/css/font-awesome.min.css', 'mermaid-6.0.0.css', "highlight/#{@highlightStyle}.css",
+        'showoff.css', 'onepage.css'].each do |css_file| %>
       <link rel="stylesheet" href="<%= @asset_path %>/css/<%= css_file %>" type="text/css"/>
     <% end %>
 
@@ -27,7 +31,8 @@
       <link rel="stylesheet" href="<%= @asset_path %>/file/<%= css_file %>" type="text/css"/>
     <% end %>
 
-    <% ['jquery-2.1.4.min.js', 'jquery-print.js', 'showoff.js', 'highlight.pack-9.2.0.js'].each do |js_file| %>
+    <% ['jquery-2.1.4.min.js', 'showoff.js', 'highlight.pack-9.2.0.js',
+        'bigtext-0.1.8.js', 'simpleStrings-0.0.1.js', 'mermaid-6.0.0-min.js'].each do |js_file| %>
       <script type="text/javascript" src="<%= @asset_path %>/js/<%= js_file %>"></script>
     <% end %>
     <% js_files.each do |js_file| %>
@@ -45,13 +50,28 @@
     $(document).ready(function() {
       $('pre.highlight code').each(function(i, block) {
         try {
+          // syntax highlight the code
           hljs.highlightBlock(block);
+
+          // then add focus on any lines marked
+          highlightLines(block);
         } catch(e) {
           console.log('Syntax highlighting failed on ' + $(this).closest('div.slide').attr('id'));
           console.log('Syntax highlighting failed for ' + $(this).attr('class'));
           console.log(e);
         }
       });
+
+
+      // render diagrams and text manipulations unconditionally instead of waiting for slide views
+      mermaid.init(undefined, $(".language-render-diagram"));
+      $('.content.bigtext').bigtext();
+
+      // translate SVG images, inlining them first if needed.
+      user_translations = <%= JSON.pretty_generate user_translations %>;
+      $('img').simpleStrings({strings: user_translations});
+      $('svg').simpleStrings({strings: user_translations});
+      $('.translate').simpleStrings({strings: user_translations});
     });
   </script>
 

data/views/presenter.erb

@@ -12,6 +12,116 @@
   <script type="text/javascript">
     editUrl  = "<%= @edit %>";
     issueUrl = "<%= @issues %>";
+
+    tours['showoff:activity'] = [
+      {
+        element: ".currentSlide .count",
+        intro: I18n.t('tour.activity.count')
+      }
+    ];
+
+    tours['showoff:form'] = [
+      {
+        element: "#notes",
+        intro: I18n.t('tour.form.responses'),
+        scrollToElement: false
+      },
+      {
+        element: ".currentSlide input.display",
+        intro: I18n.t('tour.form.display')
+      }
+    ];
+
+    $(function(){
+      var tourVersion = 1;
+      var clientTour  = document.cookieHash['tourVersion'] || 0;
+
+      if(clientTour < tourVersion) {
+        toggleKeybinding('off');
+
+        var intro = introJs();
+        intro.setOptions({
+          showProgress: true,
+          showStepNumbers: false,
+          exitOnOverlayClick: false,
+          steps: [
+            {
+              intro: I18n.t('tour.welcome'),
+              version: 1
+            },
+            {
+              element: "#slaveWindow",
+              intro: I18n.t('tour.displayview'),
+              version: 1
+            },
+            {
+              element: "#annotationLabel",
+              intro: I18n.t('tour.annotations'),
+              version: 1
+            },
+            {
+              element: "#timerSection",
+              intro: I18n.t('tour.timer'),
+              version: 1
+            },
+            {
+              element: "#feedbackPace",
+              intro: I18n.t('tour.pace'),
+              version: 1
+            },
+            {
+              element: "#questions",
+              intro: I18n.t('tour.questions'),
+              version: 1
+            },
+            {
+              element: "#notes-controls",
+              intro: I18n.t('tour.notes'),
+              highlightClass: "tourDark",
+              version: 1
+            },
+            {
+              element: "#slideSource",
+              intro: I18n.t('tour.slidesource'),
+              version: 1
+            },
+            {
+              element: "#settings",
+              intro: I18n.t('tour.settings'),
+              version: 1
+            },
+            {
+              element: "#edit",
+              intro: I18n.t('tour.edit'),
+              version: 1
+            },
+            {
+              element: "#report",
+              intro: I18n.t('tour.report'),
+              version: 1
+            }
+          ].filter(function(item) { return (item['version'] > clientTour) && ((item['element'] == undefined) || document.querySelector(item['element'])) })
+          // the queryselector filter eliminates tips for features that have been turned off
+        });
+
+        // re-enable the keyboard whether the tour was completed or not
+        intro.onexit(function() {
+          toggleKeybinding('on');
+        });
+
+        // record tour completion so we don't continue to annoy people
+        intro.oncomplete(function() {
+          document.cookie = "tourVersion="+tourVersion;
+        });
+
+        // give it a chance to finish loading the presentation
+        $("body").bind("showoff:loaded", function (event) {
+          intro.start();
+        });
+
+      }
+    });
+
   </script>
 </head>
 
@@ -24,7 +134,7 @@
 
     <span id="links">
       <span class="desktop">
-        <label for="annotationsToggle" class="no-mobile" title="<%= I18n.t('presenter.topbar.tooltip.annotations') %>"><%= I18n.t('presenter.topbar.annotations') %> <i class="fa fa-pencil"></i></label>
+        <label id="annotationLabel" for="annotationsToggle" class="no-mobile" title="<%= I18n.t('presenter.topbar.tooltip.annotations') %>"><%= I18n.t('presenter.topbar.annotations') %> <i class="fa fa-pencil"></i></label>
         <input type="checkbox" id="annotationsToggle" autocomplete="off" class="no-mobile" />
 
         <% if @edit %>
@@ -133,7 +243,7 @@
 
         <div id="notes-wrapper">
           <ul class="section-selector"></ul>
-          <div class="controls">
+          <div class="controls" id="notes-controls">
             <a class="no-mobile fa fa-minus small" aria-hidden="true" href="#"></a>
             <a class="no-mobile fa fa-dot-circle-o small" aria-hidden="true" href="#"></a>
             <a class="no-mobile fa fa-plus small" aria-hidden="true" href="#"></a>

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: showoff
 version: !ruby/object:Gem::Version
-  version: 0.18.2
+  version: 0.19.0
 platform: ruby
 authors:
 - Scott Chacon
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2017-06-15 00:00:00.000000000 Z
+date: 2017-08-03 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sinatra
@@ -389,6 +389,7 @@ files:
 - public/css/images/ui-icons_777777_256x240.png
 - public/css/images/ui-icons_cc0000_256x240.png
 - public/css/images/ui-icons_ffffff_256x240.png
+- public/css/introjs-2.5.local.css
 - public/css/jquery-ui-1.12.1.css
 - public/css/mermaid-6.0.0.css
 - public/css/onepage.css
@@ -408,6 +409,7 @@ files:
 - public/js/bigtext-0.1.8.js
 - public/js/coffee-script-1.1.3-pre.js
 - public/js/highlight.pack-9.2.0.js
+- public/js/intro-2.5.local.js
 - public/js/jTypeWriter-1.1.js
 - public/js/jquery-2.1.4.min.js
 - public/js/jquery-ui-1.12.1.js
@@ -433,18 +435,7 @@ homepage: https://puppetlabs.github.io/showoff
 licenses:
 - MIT
 metadata: {}
-post_install_message: |2
-                 _________________________________________
-                /               Ahoy ahead!               \
-               |  User interface changes in this release.  |
-               |                                           |
-                \    Please clear your browser cache.     /
-                 -----------------------------------------
-                        \   ^__^
-                         \  (oo)\_______
-                            (__)\       )\/\
-                                ||----w |
-                                ||     ||
+post_install_message: 
 rdoc_options: []
 require_paths:
 - lib