showoff 0.17.2 → 0.18.0

data/public/js/showoff.js

@@ -26,6 +26,10 @@ var loadSlidesPrefix
 
 var mode = { track: true, follow: true };
 
+// a dummy websocket object to make standalone presentations easier.
+var ws = {}
+ws.send = function() { /* no-op */ }
+
 // since javascript doesn't have a built-in way to get to cookies easily,
 // let's just add our own data structure.
 document.cookieHash = {}
@@ -51,6 +55,7 @@ function setupPreso(load_slides, prefix) {
 	preso_started = true;
 
   if (! cssPropertySupported('flex') ) {
+    // TODO: translate this this page!
     window.location = 'unsupported.html';
   }
 
@@ -68,7 +73,11 @@ function setupPreso(load_slides, prefix) {
 
   setupSideMenu();
 
-	doDebugStuff();
+  // Set up the language selector
+  $('#languageSelector').change(function(e) { chooseLanguage(e.target.value); });
+  chooseLanguage(null);
+
+  doDebugStuff();
 
 	// bind event handlers
 	toggleKeybinding('on');
@@ -92,6 +101,11 @@ function setupPreso(load_slides, prefix) {
   // yes, this is a global
   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" ); };
+
   $("#help-modal").dialog({
     autoOpen: false,
     dialogClass: "no-close",
@@ -100,22 +114,25 @@ function setupPreso(load_slides, prefix) {
     modal: true,
     resizable: false,
     width: 640,
-    buttons: {
-      Close: function() {
-        $( this ).dialog( "close" );
-      }
-    }
+    buttons: buttons
   });
 
   // wait until the presentation is loaded to hook up the previews.
   $("body").bind("showoff:loaded", function (event) {
+    var target = $('#navigationHover');
+
     $('#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();
+      var source   = slides.eq($(this).attr('rel'));
+
+      target.css({top: position.top, left: position.left + $('#navigation').width() + 5})
+      target.html(source.html());
+
+      copyBackground(source, target);
+
+      target.show();
     },function() {
-      $('#navigationHover').hide();
+      target.hide();
     });
   });
 
@@ -218,13 +235,17 @@ function initializePresentation(prefix) {
   });
 
   $(".content form div.tools input.display").click(function(e) {
+    var form   = $(this).closest('form');
+    var formID = form.attr('id');
+
+    ws.send(JSON.stringify({ message: 'answerkey', formID: formID}));
     try {
       // If we're a presenter, try to bust open the slave display
-      slaveWindow.renderForm($(this).closest('form').attr('id'));
+      slaveWindow.renderForm(formID);
     }
     catch (e) {
       console.log(e);
-      renderForm($(this).closest('form'));
+      renderForm(form);
     }
   });
 
@@ -238,9 +259,46 @@ function initializePresentation(prefix) {
   // initialize mermaid, but don't render yet since the slide sizes are indeterminate
   mermaid.initialize({startOnLoad:false});
 
+  // translate SVG images, inlining them first if needed.
+  $('img').simpleStrings({strings: user_translations});
+  $('svg').simpleStrings({strings: user_translations});
+  $('.translate').simpleStrings({strings: user_translations});
+
   $("#preso").trigger("showoff:loaded");
 }
 
+function copyBackground(source, target) {
+  // to get this to properly copy over in Firefox, we need to iterate each property instead of using shorthand
+  ['background-color',
+   'background-image',
+   'background-repeat',
+   'background-position',
+   'background-attachment'].forEach(function(property) {
+    target.css(property, source.css(property));
+  })
+
+  // we have to do this separately so we can transform it
+  var bgsize = source.css('background-size');
+
+  var regex = /^(\d+)(\S{1,2})(?: (\d+)(\S{1,2}))?$/;
+  var match = regex.exec(bgsize);
+  if(match) {
+    var width  = match[1];
+    var unit_w = match[2];
+    var height = match[3] || '';
+    var unit_h = match[4] || '';
+
+    if(unit_w != '%'                 ) { width  /= 2 };
+    if(unit_h != '%' && height != '' ) { height /= 2 };
+
+    target.css('background-size', width+unit_w+' '+height+unit_h);
+  }
+  else {
+    // contain, cover, etc
+    target.css('background-size', bgsize);
+  }
+}
+
 function zoom(presenter) {
   var preso = $("#preso");
   var hSlide = parseFloat(preso.height());
@@ -320,7 +378,7 @@ function setupSideMenu() {
       var question = $("#question").val()
       var qid = askQuestion(question);
 
-      feedback_response(this, "Sending...");
+      feedback_response(this, I18n.t('menu.sending'));
       $("#question").val('');
 
       var questionItem = $('<li/>').text(question).attr('id', qid);
@@ -474,9 +532,49 @@ function setupMenu() {
   $("#navigation").append(nav);
 }
 
+
+// this function generates an object that consumes the JSON form of translations
+// provided by the i18n gem. It provides pretty nearly the same calling syntax
+// as the Ruby library's dot-form.
+//
+// var I18n = new translation(data);
+// console.log(I18n.t('some.key.to.translate'));
+function translation(data) {
+  this.localized = data;
+  this.translate = function(key) {
+    var item = this.localized;
+    try {
+      key.split('.').forEach(function(val) {
+        item = item[val];
+      });
+      if(typeof(item) != 'string') {
+        item = null;
+      }
+    }
+    catch(e) {
+      item = null;
+    }
+    return item || ("No translation for " + key);
+  }
+  this.t = function(key) { return this.translate(key); }
+}
+
+function chooseLanguage(locale) {
+  // yay for half-baked data storage schemes
+  newlocale = locale || document.cookieHash['locale'] || 'auto';
+
+  if(locale){
+    document.cookie = "locale="+newlocale;
+    location.reload(false);
+  } else {
+    $('#languageSelector').val(newlocale);
+  }
+}
+
 // at some point this should get more sophisticated. Our needs are pretty minimal so far.
 function clearCookies() {
   document.cookie = "sidebar=;expires=Thu, 21 Sep 1979 00:00:01 UTC;";
+  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;";
 }
@@ -688,6 +786,16 @@ function getSlideProgress()
 	return (slidenum + 1) + '/' + slideTotal
 }
 
+function getAllSections()
+{
+  memo = []
+  $("div.notes-section").each(function() {
+    section = $(this).attr('class').split(' ').filter(function(x) { return x != 'notes-section'; })[0];
+    if(! memo.includes(section)) { memo.push(section) }
+  });
+  return memo
+}
+
 function getCurrentSections()
 {
   return currentSlide.find("div.notes-section").map(function() {
@@ -800,6 +908,15 @@ function enableForm(element) {
   activityIncomplete = true;
 }
 
+function showFormAnswers(form) {
+  // If we have any correct options, find the parent element, then tag all descendants as incorrect
+  $('.slide.form\\='+form+' label.correct').parents('.form.element').find('label.response,option').addClass('incorrect');
+  // Then remove the double tag from the correct answers.
+  $('.slide.form\\='+form+' label.correct').removeClass('incorrect');
+  // finally, style the slide so we can see the effects
+  $('.slide.form\\='+form).addClass('answerkey')
+}
+
 function renderFormWatcher(element) {
   var form = element.attr('title');
   var action = $('.content form#'+form).attr('action');
@@ -957,10 +1074,6 @@ function connectControlChannel() {
     ws.onclose   = function()  { disconnected();       }
     ws.onmessage = function(m) { parseMessage(m.data); };
   }
-  else {
-    ws = {}
-    ws.send = function() { /* no-op */ }
-  }
 }
 
 // This exists as an intermediary simply so the presenter view can override it
@@ -1019,6 +1132,10 @@ function parseMessage(data) {
         follow(command["current"], command["increment"]);
         break;
 
+      case 'answerkey':
+        showFormAnswers(command["formID"]);
+        break;
+
       case 'complete':
         completeQuestion(command["questionID"]);
         break;
@@ -1307,11 +1424,14 @@ function toggleFollow()
   mode.follow = ! mode.follow;
 
   if(mode.follow) {
-    $("#followMode").show().text('Follow Mode:');
+    $("#followMode").addClass('fa-check-circle');
+    $("#followMode").removeClass('fa-ban');
     getPosition();
   } else {
-    $("#followMode").hide();
+    $("#followMode").addClass('fa-ban');
+    $("#followMode").removeClass('fa-check-circle');
   }
+  showFooter();
 }
 
 function debug(data)
@@ -1429,11 +1549,10 @@ function toggleDebug () {
 
 function reloadSlides (hard) {
   if(hard) {
-    var message = 'Are you sure you want to reload Showoff?';
+    var message = I18n.t('reload');
   }
   else {
-    var message = "Are you sure you want to refresh the slide content?\n\n";
-    message    += '(Use `RELOAD` to fully reload the entire UI)';
+    var message = I18n.t('refresh');
   }
 
   if (confirm(message)) {
@@ -1445,6 +1564,19 @@ function toggleFooter() {
 	$('#footer').toggle()
 }
 
+function showFooter(timeout) {
+  timeout = (typeof timeout !== 'undefined') ?  timeout : 5000;
+
+  if($('#footer').is(':hidden')) {
+    $('#footer').show(200);
+
+    window.setTimeout(function() {
+      $('#footer').hide(200);
+    }, timeout);
+  }
+
+}
+
 function toggleHelp () {
   var help = $("#help-modal");
   help.dialog("isOpen") ? help.dialog("close") : help.dialog("open");
@@ -1599,7 +1731,7 @@ function togglePreShow() {
     }
 
   } else {
-    var seconds = parseFloat(prompt("Minutes from now to start") * 60);
+    var seconds = parseFloat(prompt(I18n.t('preshow.prompt')) * 60);
 
     try {
       slaveWindow.setupPreShow(seconds);
@@ -1658,7 +1790,7 @@ function startPreShow() {
 }
 
 function addPreShowTips(secondsLeft) {
-	$('#preshow_timer').text('Resuming in: ' + secondsToTime(secondsLeft));
+	$('#preshow_timer').text(I18n.t('preshow.resume') + ' ' + secondsToTime(secondsLeft));
 	var des = preshow_des && preshow_des[tmpImg.attr("ref")];
 	if(des) {
 		$('#tips').show();
@@ -1749,7 +1881,7 @@ function setupStats(data)
   if (viewers) {
     if (viewers.length == 1 && viewers[0][3] == 'current') {
       $("#viewers").removeClass('zoomline');
-      $("#viewers").text("All audience members are viewing the presenter's slide.");
+      $("#viewers").text(I18n.t('stats.allcurrent'));
     }
     else {
       $("#viewers").zoomline({

data/public/js/simpleStrings-0.0.1.js

@@ -0,0 +1,96 @@
+/* Example usage:
+    var translations = {
+      en: {
+        'greeting': 'Hello there!',
+        'farewell': "Goodbye.'
+      },
+      fr: {
+        'greeting': 'Bonjour!',
+        'farewell': "Au revoir.'}.
+      es: {
+        'greeting': 'Hola!',
+        'farewell': "Adios amigo.'
+      }
+    };
+
+  $(document).ready(function(){
+    var lang = translations.es;
+
+    $('img').simpleStrings({strings: lang});
+    $('svg').simpleStrings({strings: lang});
+    $('.translate').simpleStrings({strings: lang}); // matches tags like <span class="translate">{{greeting}}</span>
+  });
+
+*/
+
+(function ( $ ) {
+    $.fn.simpleStrings = function(options) {
+      var settings = $.extend({
+        strings: {}
+      }, options );
+
+      function translate(item) {
+        item = $(item);
+        var text = item.text();
+
+        if(matches = text.match(/^{{(.*)}}$/) ) {
+          keyword = matches[1];
+
+          if(keyword in settings.strings) {
+            item.text(settings.strings[keyword]);
+          }
+        }
+
+        return item;
+      }
+
+      function inline_svg(img, callback) {
+        var source = img.attr('src');
+        var imgId  = img.attr('id');
+        var klass  = img.attr('class');
+
+        $.get(source, function( data ) {
+          var svg = $(data).find('svg');
+          svg.attr('id', imgId);
+          svg.attr('class', klass);
+
+          if (typeof callback === 'function') {
+            callback.call(svg);
+          }
+
+          img.replaceWith(svg);
+          console.log( "Inlined SVG image: " + source);
+        });
+
+      }
+
+      return this.each(function() {
+        var item = $(this);
+
+        // we can only translate img tags if they're referencing svg images
+        if(item.is('img')) {
+          // nested if because we don't want images to match the final else
+          if(item.attr('src').match(/.*\.svg$/i)) {
+            inline_svg(item, function(){
+              $(this).find('text, p').each(function(){
+                translate(this);
+              });
+            });
+          }
+        }
+        else if(item.is('svg')) {
+          // svg images already inlined. Translate by finding all texty elements
+          item.find('text, p').each(function(){
+            translate(this);
+          });
+        }
+        else {
+          // everything else. We'll try to translate, as long as there's .text()
+          translate(item);
+        }
+
+        return this;
+      });
+    };
+
+}(jQuery));

data/views/404.erb

@@ -8,7 +8,7 @@
 <body id="download">
 
     <div id="preso">
-        <h1>File Not Found!</h1>
+        <h1><%= I18n.t('error.file_not_found') %></h1>
         <h2><%= @env['REQUEST_PATH'] %>
     </div>
     <div id="footer">

data/views/download.erb

@@ -6,8 +6,8 @@
 </head>
 
 <body id="download">
-  <div id="wrapper">  <!-- wrapper needed for presenterPopupToggle() and $.get() --> 
-  <h1>File Downloads</h1>
+  <div id="wrapper">  <!-- wrapper needed for presenterPopupToggle() and $.get() -->
+  <h1><%= I18n.t('downloads.title') %></h1>
   <% if @downloads %>
       <%# [ enabled, slide name, [array, of, files] ] %>
       <% @downloads.sort.map do |key, value| %>

data/views/header.erb

@@ -15,17 +15,18 @@
   <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/jquery-ui-1.12.1.js"></script>
 
   <script type="text/javascript" src="<%= @asset_path %>/js/jquery.cycle.all-2.8.0.js"></script>
   <script type="text/javascript" src="<%= @asset_path %>/js/jquery.batchImageLoad-1.0.0.js"></script>
   <script type="text/javascript" src="<%= @asset_path %>/js/jquery.parsequery.min-6a20f83.js"></script>
   <script type="text/javascript" src="<%= @asset_path %>/js/jquery.doubletap-4ff02c5.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/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/simpleStrings-0.0.1.js"></script>
   <script type="text/javascript" src="<%= @asset_path %>/js/mermaid-6.0.0-min.js"></script>
-  <script type="text/javascript" src="<%= @asset_path %>/js/jquery-ui-1.12.1.js"></script>
 
   <script type="text/javascript" src="<%= @asset_path %>/js/coffee-script-1.1.3-pre.js"></script>
 
@@ -47,9 +48,13 @@
 
     editUrl     = "<%= @edit %>";
     interactive = <%= @interactive %>;
+    master      = <%= master_presenter? %>;
 
     keymap               = <%= JSON.pretty_generate @keymap %>;
     keycode_dictionary   = <%= JSON.pretty_generate @keycode_dictionary %>;
     keycode_shifted_keys = <%= JSON.pretty_generate @keycode_shifted_keys %>;
+    user_translations    = <%= JSON.pretty_generate user_translations %>;
+
+    I18n = new translation(<%= @language.to_json %>);
 
   </script>