Merge branch 'user-results'

js/h5p-data-view.js

@@ -0,0 +1,255 @@
+var H5PDataView = (function ($) {
+
+  /**
+   * Initialize a new H5P data view.
+   *
+   * @class
+   * @param {Object} container
+   *   Element to clear out and append to.
+   * @param {String} source
+   *   URL to get data from. Data format: {num: 123, rows:[[1,2,3],[2,4,6]]}
+   * @param {Array} headers
+   *   List with column headers. Can be strings or objects with options like
+   *   "text" and "sortable". E.g.
+   *   [{text: 'Col 1', sortable: true}, 'Col 2', 'Col 3']
+   * @param {Object} l10n
+   *   Localization / translations. e.g.
+   *   {
+   *     loading: 'Loading data.',
+   *     ajaxFailed: 'Failed to load data.',
+   *     noData: "There's no data available that matches your criteria.",
+   *     currentPage: 'Page $current of $total',
+   *     nextPage: 'Next page',
+   *     previousPage: 'Previous page',
+   *     search: 'Search'
+   *   }
+   * @param {Object} classes
+   *   Custom html classes to use on elements.
+   *   e.g. {tableClass: 'fixed'}.
+   * @param {Array} filters
+   *   Make it possible to filter/search in the given column.
+   *   e.g. [null, true, null, null] will make it possible to do a text
+   *   search in column 2.
+   * @param {Function} loaded
+   *   Callback for when data has been loaded.
+   */
+  function H5PDataView(container, source, headers, l10n, classes, filters, loaded) {
+    var self = this;
+
+    self.$container = $(container).addClass('h5p-data-view').html('');
+
+    self.source = source;
+    self.headers = headers;
+    self.l10n = l10n;
+    self.classes = (classes === undefined ? {} : classes);
+    self.filters = (filters === undefined ? [] : filters);
+    self.loaded = loaded;
+
+    self.limit = 20;
+    self.offset = 0;
+    self.filterOn = [];
+
+    self.loadData();
+  }
+
+  /**
+   * Load data from source URL.
+   *
+   * @public
+   */
+  H5PDataView.prototype.loadData = function () {
+    var self = this;
+
+    // Throbb
+    self.setMessage(H5PUtils.throbber(self.l10n.loading));
+
+    // Create URL
+    var url = self.source;
+    url += (url.indexOf('?') === -1 ? '?' : '&') + 'offset=' + self.offset + '&limit=' + self.limit;
+
+    // Add sorting
+    if (self.sortBy !== undefined && self.sortDir !== undefined) {
+      url += '&sortBy=' + self.sortBy + '&sortDir=' + self.sortDir;
+    }
+
+    // Add filters
+    var filtering;
+    for (var i = 0; i < self.filterOn.length; i++) {
+      if (self.filterOn[i] === undefined) {
+        continue;
+      }
+
+      filtering = true;
+      url += '&filters[' + i + ']=' + encodeURIComponent(self.filterOn[i]);
+    }
+
+    // Fire ajax request
+    $.ajax({
+      dataType: 'json',
+      cache: true,
+      url: url
+    }).fail(function () {
+      // Error handling
+      self.setMessage($('<p/>', {text: self.l10n.ajaxFailed}));
+    }).done(function (data) {
+      if (!data.rows.length) {
+        self.setMessage($('<p/>', {text: filtering ? self.l10n.noData : self.l10n.empty}));
+      }
+      else {
+        // Update table data
+        self.updateTable(data.rows);
+      }
+
+      // Update pagination widget
+      self.updatePagination(data.num);
+
+      if (self.loaded !== undefined) {
+        self.loaded();
+      }
+    });
+  };
+
+  /**
+   * Display the given message to the user.
+   *
+   * @public
+   * @param {jQuery} $message wrapper with message
+   */
+  H5PDataView.prototype.setMessage = function ($message) {
+    var self = this;
+
+    if (self.table === undefined) {
+      self.$container.html('').append($message);
+    }
+    else {
+      self.table.setBody($message);
+    }
+  };
+
+  /**
+   * Update table data.
+   *
+   * @public
+   * @param {Array} rows
+   */
+  H5PDataView.prototype.updateTable = function (rows) {
+    var self = this;
+
+    if (self.table === undefined) {
+      // Clear out container
+      self.$container.html('');
+
+      // Add filters
+      self.addFilters();
+
+      // Create new table
+      self.table = new H5PUtils.Table(self.classes, self.headers);
+      self.table.setHeaders(self.headers, function (col, dir) {
+        // Sorting column or direction has changed callback.
+        self.sortBy = col;
+        self.sortDir = dir;
+        self.loadData();
+      });
+      self.table.appendTo(self.$container);
+    }
+
+    // Add/update rows
+    self.table.setRows(rows);
+  };
+
+  /**
+   * Update pagination widget.
+   *
+   * @public
+   * @param {Number} num size of data collection
+   */
+  H5PDataView.prototype.updatePagination = function (num) {
+    var self = this;
+
+    if (self.pagination === undefined) {
+      // Create new widget
+      var $pagerContainer = $('<div/>', {'class': 'h5p-pagination'});
+      self.pagination = new H5PUtils.Pagination(num, self.limit, function (offset) {
+        // Handle page changes in pagination widget
+        self.offset = offset;
+        self.loadData();
+      }, self.l10n);
+
+      self.pagination.appendTo($pagerContainer);
+      self.table.setFoot($pagerContainer);
+    }
+    else {
+      // Update existing widget
+      self.pagination.update(num, self.limit);
+    }
+  };
+
+  /**
+   * Add filters.
+   *
+   * @public
+   */
+  H5PDataView.prototype.addFilters = function () {
+    var self = this;
+
+    for (var i = 0; i < self.filters.length; i++) {
+      if (self.filters[i] === true) {
+        // Add text input filter for col i
+        self.addTextFilter(i);
+      }
+    }
+  };
+
+  /**
+   * Add text filter for given col num.
+
+   * @public
+   * @param {Number} col
+   */
+  H5PDataView.prototype.addTextFilter = function (col) {
+    var self = this;
+
+    /**
+     * Find input value and filter on it.
+     * @private
+     */
+    var search = function () {
+      var filterOn = $input.val().replace(/^\s+|\s+$/g, '');
+      if (filterOn === '') {
+        filterOn = undefined;
+      }
+      if (filterOn !== self.filterOn[col]) {
+        self.filterOn[col] = filterOn;
+        self.loadData();
+      }
+    };
+
+    // Add text field for filtering
+    var typing;
+    var $input = $('<input/>', {
+      type: 'text',
+      placeholder: self.l10n.search,
+      on: {
+        'blur': function () {
+          clearTimeout(typing);
+          search();
+        },
+        'keyup': function (event) {
+          if (event.keyCode === 13) {
+            clearTimeout(typing);
+            search();
+            return false;
+          }
+          else {
+            clearTimeout(typing);
+            typing = setTimeout(function () {
+              search();
+            }, 500);
+          }
+        }
+      }
+    }).appendTo(self.$container);
+  };
+
+  return H5PDataView;
+})(H5P.jQuery);

js/h5p-utils.js

@@ -64,7 +64,7 @@ var H5PUtils = H5PUtils || {};
 
     return $field;
   };
-  
+
   /**
    * Replaces placeholder fields in translation strings
    *
@@ -130,4 +130,353 @@ var H5PUtils = H5PUtils || {};
     return $container;
   };
 
+  /**
+   * Generic table class with useful helpers.
+   *
+   * @class
+   * @param {Object} classes
+   *   Custom html classes to use on elements.
+   *   e.g. {tableClass: 'fixed'}.
+   */
+  H5PUtils.Table = function (classes) {
+    var numCols;
+    var sortByCol;
+    var $sortCol;
+    var sortCol;
+    var sortDir;
+
+    // Create basic table
+    var tableOptions = {};
+    if (classes.table !== undefined) {
+      tableOptions['class'] = classes.table;
+    }
+    var $table = $('<table/>', tableOptions);
+    var $thead = $('<thead/>').appendTo($table);
+    var $tfoot = $('<tfoot/>').appendTo($table);
+    var $tbody = $('<tbody/>').appendTo($table);
+
+    /**
+     * Add columns to given table row.
+     *
+     * @private
+     * @param {jQuery} $tr Table row
+     * @param {(String|Object)} col Column properties
+     * @param {Number} id Used to seperate the columns
+     */
+    var addCol = function ($tr, col, id) {
+      var options = {
+        on: {}
+      };
+
+      if (!(col instanceof Object)) {
+        options.text = col;
+      }
+      else {
+        if (col.text !== undefined) {
+          options.text = col.text;
+        }
+        if (col.class !== undefined) {
+          options.class = col.class;
+        }
+
+        if (sortByCol !== undefined && col.sortable === true) {
+          // Make sortable
+          options.role = 'button';
+          options.tabIndex = 1;
+
+          // This is the first sortable column, use as default sort
+          if (sortCol === undefined) {
+            sortCol = id;
+            sortDir = 0;
+            options['class'] = 'h5p-sort';
+          }
+
+          options.on.click = function () {
+            sort($th, id);
+          };
+        }
+      }
+
+      // Append
+      var $th = $('<th>', options).appendTo($tr);
+      if (sortCol === id) {
+        $sortCol = $th; // Default sort column
+      }
+    };
+
+    /**
+     * Updates the UI when a column header has been clicked.
+     * Triggers sorting callback.
+     *
+     * @private
+     * @param {jQuery} $th Table header
+     * @param {Number} id Used to seperate the columns
+     */
+    var sort = function ($th, id) {
+      if (id === sortCol) {
+        // Change sorting direction
+        if (sortDir === 0) {
+          sortDir = 1;
+          $th.addClass('h5p-reverse');
+        }
+        else {
+          sortDir = 0;
+          $th.removeClass('h5p-reverse');
+        }
+      }
+      else {
+        // Change sorting column
+        $sortCol.removeClass('h5p-sort').removeClass('h5p-reverse');
+        $sortCol = $th.addClass('h5p-sort');
+        sortCol = id;
+        sortDir = 0;
+      }
+
+      sortByCol(sortCol, sortDir);
+    };
+
+    /**
+     * Set table headers.
+     *
+     * @public
+     * @param {Array} cols
+     *   Table header data. Can be strings or objects with options like
+     *   "text" and "sortable". E.g.
+     *   [{text: 'Col 1', sortable: true}, 'Col 2', 'Col 3']
+     * @param {Function} sort Callback which is runned when sorting changes
+     */
+    this.setHeaders = function (cols, sort) {
+      numCols = cols.length;
+      sortByCol = sort;
+
+      // Create new head
+      var $newThead = $('<thead/>');
+      var $tr = $('<tr/>').appendTo($newThead);
+      for (var i = 0; i < cols.length; i++) {
+        addCol($tr, cols[i], i);
+      }
+
+      // Update DOM
+      $thead.replaceWith($newThead);
+      $thead = $newThead;
+    };
+
+    /**
+     * Set table rows.
+     *
+     * @public
+     * @param {Array} rows Table rows with cols: [[1,'hello',3],[2,'asd',6]]
+     */
+    this.setRows = function (rows) {
+      var $newTbody = $('<tbody/>');
+
+      for (var i = 0; i < rows.length; i++) {
+        var $tr = $('<tr/>').appendTo($newTbody);
+
+        for (var j = 0; j < rows[i].length; j++) {
+          $('<td>', {
+            html: rows[i][j]
+          }).appendTo($tr);
+        }
+      }
+
+      $tbody.replaceWith($newTbody);
+      $tbody = $newTbody;
+    };
+
+    /**
+     * Set custom table body content. This can be a message or a throbber.
+     * Will cover all table columns.
+     *
+     * @public
+     * @param {jQuery} $content Custom content
+     */
+    this.setBody = function ($content) {
+      var $newTbody = $('<tbody/>');
+      var $tr = $('<tr/>').appendTo($newTbody);
+      $('<td>', {
+        colspan: numCols
+      }).append($content).appendTo($tr);
+      $tbody.replaceWith($newTbody);
+      $tbody = $newTbody;
+    };
+
+    /**
+     * Set custom table foot content. This can be a pagination widget.
+     * Will cover all table columns.
+     *
+     * @public
+     * @param {jQuery} $content Custom content
+     */
+    this.setFoot = function ($content) {
+      var $newTfoot = $('<tfoot/>');
+      var $tr = $('<tr/>').appendTo($newTfoot);
+      $('<td>', {
+        colspan: numCols
+      }).append($content).appendTo($tr);
+      $tfoot.replaceWith($newTfoot);
+    };
+
+
+    /**
+     * Appends the table to the given container.
+     *
+     * @public
+     * @param {jQuery} $container
+     */
+    this.appendTo = function ($container) {
+      $table.appendTo($container);
+    };
+  };
+
+  /**
+   * Generic pagination class. Creates a useful pagination widget.
+   *
+   * @class
+   * @param {Number} num Total number of items to pagiate.
+   * @param {Number} limit Number of items to dispaly per page.
+   * @param {Function} goneTo
+   *   Callback which is fired when the user wants to go to another page.
+   * @param {Object} l10n
+   *   Localization / translations. e.g.
+   *   {
+   *     currentPage: 'Page $current of $total',
+   *     nextPage: 'Next page',
+   *     previousPage: 'Previous page'
+   *   }
+   */
+  H5PUtils.Pagination = function (num, limit, goneTo, l10n) {
+    var current = 0;
+    var pages = Math.ceil(num / limit);
+
+    // Create components
+
+    // Previous button
+    var $left = $('<button/>', {
+      html: '&lt;',
+      'class': 'button',
+      title: l10n.previousPage
+    }).click(function () {
+      goTo(current - 1);
+    });
+
+    // Current page text
+    var $text = $('<span/>').click(function () {
+      $input.width($text.width()).show().val(current + 1).focus();
+      $text.hide();
+    });
+
+    // Jump to page input
+    var $input = $('<input/>', {
+      type: 'number',
+      min : 1,
+      max: pages,
+      on: {
+        'blur': function () {
+          gotInput();
+        },
+        'keyup': function (event) {
+          if (event.keyCode === 13) {
+            gotInput();
+            return false;
+          }
+        }
+      }
+    }).hide();
+
+    // Next button
+    var $right = $('<button/>', {
+      html: '&gt;',
+      'class': 'button',
+      title: l10n.nextPage
+    }).click(function () {
+      goTo(current + 1);
+    });
+
+    /**
+     * Check what page the user has typed in and jump to it.
+     *
+     * @private
+     */
+    var gotInput = function () {
+      var page = parseInt($input.hide().val());
+      if (!isNaN(page)) {
+        goTo(page - 1);
+      }
+      $text.show();
+    };
+
+    /**
+     * Update UI elements.
+     *
+     * @private
+     */
+    var updateUI = function () {
+      var next = current + 1;
+
+      // Disable or enable buttons
+      $left.attr('disabled', current === 0);
+      $right.attr('disabled', next === pages);
+
+      // Update counter
+      $text.html(l10n.currentPage.replace('$current', next).replace('$total', pages));
+    };
+
+    /**
+     * Try to go to the requested page.
+     *
+     * @private
+     * @param {Number} page
+     */
+    var goTo = function (page) {
+      if (page === current || page < 0 || page >= pages) {
+        return; // Invalid page number
+      }
+      current = page;
+
+      updateUI();
+
+      // Fire callback
+      goneTo(page * limit);
+    };
+
+    /**
+     * Update number of items and limit.
+     *
+     * @public
+     * @param {Number} newNum Total number of items to pagiate.
+     * @param {Number} newLimit Number of items to dispaly per page.
+     */
+    this.update = function (newNum, newLimit) {
+      if (newNum !== num || newLimit !== limit) {
+        // Update num and limit
+        num = newNum;
+        limit = newLimit;
+        pages = Math.ceil(num / limit);
+        $input.attr('max', pages);
+
+        if (current >= pages) {
+          // Content is gone, move to last page.
+          goTo(pages - 1);
+          return;
+        }
+
+        updateUI();
+      }
+    };
+
+    /**
+     * Append the pagination widget to the given container.
+     *
+     * @public
+     * @param {jQuery} $container
+     */
+    this.appendTo = function ($container) {
+      $left.add($text).add($input).add($right).appendTo($container);
+    };
+
+    // Update UI
+    updateUI();
+  };
+
 })(H5P.jQuery);

js/h5p.js

@@ -28,6 +28,9 @@ else if (document.documentElement.msRequestFullscreen) {
   H5P.fullScreenBrowserPrefix = 'ms';
 }
 
+// Keep track of when the H5Ps where started
+H5P.opened = {};
+
 /**
  * Initialize H5P content.
  * Scans for ".h5p-content" in the document and initializes H5P instances where found.
@@ -87,6 +90,16 @@ H5P.init = function () {
     }
     $actions.insertAfter($container);
 
+    // Keep track of when we started
+    H5P.opened[contentId] = new Date();
+
+    // Handle events when the user finishes the content. Useful for logging exercise results.
+    instance.$.on('finish', function (event) {
+      if (event.data !== undefined) {
+        H5P.setFinished(contentId, event.data.score, event.data.maxScore, event.data.time);
+      }
+    });
+
     if (H5P.isFramed) {
       // Make it possible to resize the iframe when the content changes size. This way we get no scrollbars.
       var iframe = window.parent.document.getElementById('h5p-iframe-' + contentId);
@@ -963,16 +976,38 @@ H5P.shuffleArray = function (array) {
 };
 
 /**
+ * DEPRECATED! Do not use this function directly, trigger the finish event
+ * instead.
+ *
  * Post finished results for user.
- * TODO: Should we use events instead? That way the parent can handle the results of the child.
  *
  * @param {Number} contentId
- * @param {Number} points
+ * @param {Number} score achieved
- * @param {Number} maxPoints
+ * @param {Number} maxScore that can be achieved
+ * @param {Number} time optional reported time usage
  */
-H5P.setFinished = function (contentId, points, maxPoints) {
+H5P.setFinished = function (contentId, score, maxScore, time) {
   if (H5P.postUserStatistics === true) {
-    H5P.jQuery.post(H5P.ajaxPath + 'setFinished', {contentId: contentId, points: points, maxPoints: maxPoints});
+    /**
+     * Return unix timestamp for the given JS Date.
+     *
+     * @param {Date} date
+     * @returns {Number}
+     */
+    var toUnix = function (date) {
+      return Math.round(date.getTime() / 1000);
+    };
+
+    // Post the results
+    // TODO: Should we use a variable with the complete path?
+    H5P.jQuery.post(H5P.ajaxPath + 'setFinished', {
+      contentId: contentId,
+      score: score,
+      maxScore: maxScore,
+      opened: toUnix(H5P.opened[contentId]),
+      finished: toUnix(new Date()),
+      time: time
+    });
   }
 };
 

styles/h5p-admin.css

@@ -11,7 +11,8 @@
   border: none;
 }
 
-.h5p-admin-table tr:nth-child(odd) {
+.h5p-admin-table tr:nth-child(odd),
+.h5p-data-view tr:nth-child(odd) {
   background-color: #F9F9F9;
 }
 .h5p-admin-table tbody tr:hover {
@@ -30,7 +31,7 @@
 }
 
 .h5p-admin-buttons-wrapper {
-  white-space: nowrap;  
+  white-space: nowrap;
 }
 
 .h5p-admin-table.libraries button {
@@ -69,13 +70,13 @@
 }
 
 .h5p-admin-upgrade-library {
-  color: #339900; 
+  color: #339900;
 }
 .h5p-admin-view-library {
-  color: #0066cc; 
+  color: #0066cc;
 }
 .h5p-admin-delete-library {
-  color: #990000; 
+  color: #990000;
 }
 .h5p-admin-delete-library:disabled,
 .h5p-admin-upgrade-library:disabled {
@@ -86,9 +87,9 @@
 .h5p-library-info {
   padding: 1em 1em;
   margin: 1em 0;
-  
+
   width: 350px;
-  
+
   border: 1px solid #DDD;
   border-radius: 3px;
 }
@@ -118,14 +119,14 @@
 .h5p-content-search {
   display: inline-block;
   position: relative;
-  
+
   width: 100%;
   padding: 5px 0;
   margin-top: 10px;
-  
+
   border: 1px solid #CCC;
   border-radius: 3px;
-  box-shadow: 2px 2px 5px #888888; 
+  box-shadow: 2px 2px 5px #888888;
 }
 .h5p-content-search:before {
   font-family: 'H5P';
@@ -219,7 +220,7 @@ button.h5p-admin.disabled:hover {
 .h5p-content-pager > .pager-info:hover {
   background-color: #555;
   color: #FFF;
-} 
+}
 .h5p-content-pager > .pager-info,
 .h5p-content-pager > .h5p-pager-goto {
   margin: 0 10px;
@@ -248,3 +249,37 @@ button.h5p-admin.disabled:hover {
 #h5p-admin-container .h5p-admin-center {
   text-align: center;
 }
+.h5p-pagination {
+  text-align: center;
+}
+.h5p-pagination > span, .h5p-pagination > input {
+  margin: 0 1em;
+}
+.h5p-data-view input[type="text"] {
+  margin-bottom: 0.5em;
+}
+.h5p-data-view input[type="text"]::-ms-clear {
+  display: none;
+}
+
+.h5p-data-view th[role="button"] {
+  cursor: pointer;
+}
+.h5p-data-view th[role="button"].h5p-sort:after,
+.h5p-data-view th[role="button"]:hover:after,
+.h5p-data-view th[role="button"].h5p-sort.h5p-reverse:hover:after {
+  content: "\25BE";
+  position: relative;
+  left: 0.5em;
+  top: -1px;
+}
+.h5p-data-view th[role="button"].h5p-sort.h5p-reverse:after,
+.h5p-data-view th[role="button"].h5p-sort:hover:after {
+  content: "\25B4";
+  top: -2px;
+}
+.h5p-data-view th[role="button"]:hover:after,
+.h5p-data-view th[role="button"].h5p-sort.h5p-reverse:hover:after,
+.h5p-data-view th[role="button"].h5p-sort:hover:after {
+  color: #999;
+}