Initial version of time-spent heatmap data collection

Disabled for now.

server/heatmap.php

@@ -0,0 +1,28 @@
+<?php
+require 'course-setup.php';
+
+$origin = $_SERVER['HTTP_ORIGIN'];
+if (in_array($origin, $HANDOUT_ORIGINS)) {
+  // allow CORS
+  header("Access-Control-Allow-Origin: $origin");
+  // send cookies with CORS
+  header('Access-Control-Allow-Credentials: true');
+}
+
+header('Content-Type: text/plain');
+print "\n";
+
+$json = json_decode($_POST['visible']);
+$visible = is_array($json) ? $json : [];
+
+$log = implode("\t", array(
+  date('c'),
+  $_SERVER['REMOTE_ADDR'],
+  $_COOKIE['shibauth'],
+  str_replace($_SERVER['HTTP_ORIGIN'], '', $_SERVER['HTTP_REFERER']),
+  $_POST['id'], # handout ID
+  reset($visible), # first visible element
+  end($visible) # last visible element
+));
+file_put_contents('log/access-' . date('Y-m-d') . '.log', "$log\n", FILE_APPEND | LOCK_EX);
+?>

web/handout/handout-run.js

@@ -321,6 +321,33 @@ function closeVideo() {
   $('.video-player').hide();
 }
 
+// report visible parts of the page after scrolling
+function createHeatmap() {
+  var url = this.getAttribute('data-handx-url') + 'heatmap.php';
+  var id = this.getAttribute('data-handx-id') || undefined;
+  var win = $(window);
+  var elts = document.querySelectorAll('[id]');
+  win.on('scroll.handx', scrolled);
+  function scrolled() {
+    win.off('scroll.handx');
+    setTimeout(function() {
+      heat();
+      win.on('scroll.handx', scrolled);
+    }, 1000 * 2);
+  }
+  function heat() {
+    var visible = Array.prototype.filter.call(elts, function(elt) {
+      var rect = elt.getBoundingClientRect();
+      return rect.y > 0 && rect.y + 20 < window.innerHeight && $(elt).is(':visible');
+    }).map(function(elt) { return elt.id; });
+    $.ajax({
+      url: url, method: 'POST',
+      xhrFields: { withCredentials: true },
+      data: { id: id, visible: JSON.stringify(visible) },
+    });
+  }
+}
+
 //
 // main
 //
@@ -340,6 +367,12 @@ $(document).ready(function() {
   $('.video-play').each(createVideo);
   $('.video-close').on('click', closeVideo);
 
+  // on delivered handouts...
+  if (window.HANDOUT_DELIVER === undefined) {
+    // wire up heatmap
+    // [disabled] $('[data-handx-url]').first().each(createHeatmap);
+  }
+
   // handle fragment identifiers
   if (location.hash) {
     var elt = document.getElementById(decodeURIComponent(location.hash.substr(1)));