Merge tag 'wp-1.4.0' into upgrade-speed

embed.php

@@ -14,9 +14,6 @@
   <div class="h5p-content" data-content-id="<?php print $content['id']; ?>"></div>
   <script>
     H5PIntegration = <?php print json_encode($integration); ?>;
-    H5P.jQuery(document).ready(function () {
-      H5P.init();
-    });
   </script>
 </body>
 </html>

js/h5p-data-view.js

@@ -32,8 +32,9 @@ var H5PDataView = (function ($) {
    *   search in column 2.
    * @param {Function} loaded
    *   Callback for when data has been loaded.
+   * @param {Object} order
    */
-  function H5PDataView(container, source, headers, l10n, classes, filters, loaded) {
+  function H5PDataView(container, source, headers, l10n, classes, filters, loaded, order) {
     var self = this;
 
     self.$container = $(container).addClass('h5p-data-view').html('');
@@ -44,6 +45,7 @@ var H5PDataView = (function ($) {
     self.classes = (classes === undefined ? {} : classes);
     self.filters = (filters === undefined ? [] : filters);
     self.loaded = loaded;
+    self.order = order;
 
     self.limit = 20;
     self.offset = 0;
@@ -68,8 +70,8 @@ var H5PDataView = (function ($) {
     url += (url.indexOf('?') === -1 ? '?' : '&') + 'offset=' + self.offset + '&limit=' + self.limit;
 
     // Add sorting
-    if (self.sortBy !== undefined && self.sortDir !== undefined) {
+    if (self.order !== undefined) {
-      url += '&sortBy=' + self.sortBy + '&sortDir=' + self.sortDir;
+      url += '&sortBy=' + self.order.by + '&sortDir=' + self.order.dir;
     }
 
     // Add filters
@@ -144,12 +146,11 @@ var H5PDataView = (function ($) {
 
       // Create new table
       self.table = new H5PUtils.Table(self.classes, self.headers);
-      self.table.setHeaders(self.headers, function (col, dir) {
+      self.table.setHeaders(self.headers, function (order) {
-        // Sorting column or direction has changed callback.
+        // Sorting column or direction has changed.
-        self.sortBy = col;
+        self.order = order;
-        self.sortDir = dir;
         self.loadData();
-      });
+      }, self.order);
       self.table.appendTo(self.$container);
     }
 

js/h5p-utils.js

@@ -182,18 +182,30 @@ var H5PUtils = H5PUtils || {};
         if (sortByCol !== undefined && col.sortable === true) {
           // Make sortable
           options.role = 'button';
-          options.tabIndex = 1;
+          options.tabIndex = 0;
 
           // This is the first sortable column, use as default sort
           if (sortCol === undefined) {
             sortCol = id;
             sortDir = 0;
+          }
+
+          // This is the sort column
+          if (sortCol === id) {
             options['class'] = 'h5p-sort';
+            if (sortDir === 1) {
+              options['class'] += ' h5p-reverse';
+            }
           }
 
           options.on.click = function () {
             sort($th, id);
           };
+          options.on.keypress = function (event) {
+            if ((event.charCode || event.keyCode) === 32) { // Space
+              sort($th, id);
+            }
+          };
         }
       }
 
@@ -232,7 +244,10 @@ var H5PUtils = H5PUtils || {};
         sortDir = 0;
       }
 
-      sortByCol(sortCol, sortDir);
+      sortByCol({
+        by: sortCol,
+        dir: sortDir
+      });
     };
 
     /**
@@ -244,11 +259,17 @@ var H5PUtils = H5PUtils || {};
      *   "text" and "sortable". E.g.
      *   [{text: 'Col 1', sortable: true}, 'Col 2', 'Col 3']
      * @param {Function} sort Callback which is runned when sorting changes
+     * @param {Object} [order]
      */
-    this.setHeaders = function (cols, sort) {
+    this.setHeaders = function (cols, sort, order) {
       numCols = cols.length;
       sortByCol = sort;
 
+      if (order) {
+        sortCol = order.by;
+        sortDir = order.dir;
+      }
+
       // Create new head
       var $newThead = $('<thead/>');
       var $tr = $('<tr/>').appendTo($newThead);

js/h5p.js

@@ -39,13 +39,15 @@ H5P.canHasFullScreen = (H5P.isFramed && H5P.externalEmbed !== false) ? (document
  * Initialize H5P content.
  * Scans for ".h5p-content" in the document and initializes H5P instances where found.
  */
-H5P.init = function () {
+H5P.init = function (target) {
   // Useful jQuery object.
+  if (H5P.$body === undefined) {
     H5P.$body = H5P.jQuery(document.body);
+  }
 
   // H5Ps added in normal DIV.
-  var $containers = H5P.jQuery(".h5p-content").each(function () {
+  var $containers = H5P.jQuery('.h5p-content:not(.h5p-initialized)', target).each(function () {
-    var $element = H5P.jQuery(this);
+    var $element = H5P.jQuery(this).addClass('h5p-initialized');
     var $container = H5P.jQuery('<div class="h5p-container"></div>').appendTo($element);
     var contentId = $element.data('content-id');
     var contentData = H5PIntegration.contents['cid-' + contentId];
@@ -213,14 +215,11 @@ H5P.init = function () {
   });
 
   // Insert H5Ps that should be in iframes.
-  H5P.jQuery("iframe.h5p-iframe").each(function () {
+  H5P.jQuery('iframe.h5p-iframe:not(.h5p-initialized)', target).each(function () {
-    var contentId = H5P.jQuery(this).data('content-id');
+    var contentId = H5P.jQuery(this).addClass('h5p-initialized').data('content-id');
     this.contentDocument.open();
     this.contentDocument.write('<!doctype html><html class="h5p-iframe"><head>' + H5P.getHeadTags(contentId) + '</head><body><div class="h5p-content" data-content-id="' + contentId + '"/></body></html>');
     this.contentDocument.close();
-    this.contentWindow.H5P = {
-      externalEmbed: false
-    };
   });
 };
 
@@ -262,7 +261,7 @@ H5P.getHeadTags = function (contentId) {
          createStyleTags(H5PIntegration.contents['cid-' + contentId].styles) +
          createScriptTags(H5PIntegration.core.scripts) +
          createScriptTags(H5PIntegration.contents['cid-' + contentId].scripts) +
-         '<script>H5PIntegration = window.top.H5PIntegration; H5P.jQuery(document).ready(function () { H5P.init(); });</script>';
+         '<script>H5PIntegration = window.top.H5PIntegration; var H5P = H5P || {}; H5P.externalEmbed = false;</script>';
 };
 
 H5P.communicator = (function () {
@@ -1388,3 +1387,11 @@ H5P.on = function(instance, eventType, handler) {
     instance.$.on(eventType, handler);
   }
 };
+
+
+H5P.jQuery(document).ready(function () {
+  if (!H5P.preventInit) {
+    // Start script need to be an external resource to load in correct order for IE9.
+    H5P.init(document.body);
+  }
+});