Merge pull request #566 from matematikk-mooc/aj/DIT-342

DIT-342: Added resize support for H5P iframes

src/js/3party/h5p.js

@@ -0,0 +1,89 @@
+// https://h5p.org/sites/all/modules/h5p/library/js/h5p-resizer.js
+export default (function () {
+  return {
+    init: function () {
+      (function () {
+        if (
+          !window.postMessage ||
+          !window.addEventListener ||
+          window.h5pResizerInitialized
+        ) {
+          return;
+        }
+        window.h5pResizerInitialized = true;
+        var actionHandlers = {};
+        actionHandlers.hello = function (iframe, data, respond) {
+          iframe.style.width = '100%';
+          iframe.getBoundingClientRect();
+          var resize = function () {
+            if (iframe.contentWindow) {
+              respond('resize');
+            } else {
+              window.removeEventListener('resize', resize);
+            }
+          };
+          window.addEventListener('resize', resize, false);
+          respond('hello');
+        };
+        actionHandlers.prepareResize = function (iframe, data, respond) {
+          if (
+            iframe.clientHeight !== data.scrollHeight ||
+            data.scrollHeight !== data.clientHeight
+          ) {
+            iframe.style.height = data.clientHeight + 'px';
+            respond('resizePrepared');
+          }
+        };
+        actionHandlers.resize = function (iframe, data) {
+          iframe.style.height = data.scrollHeight + 'px';
+        };
+        var escape = function (event) {
+          if (event.keyCode === 27) {
+            exitFullScreen();
+          }
+        };
+        window.addEventListener(
+          'message',
+          function receiveMessage(event) {
+            if (event.data.context !== 'h5p') {
+              return;
+            }
+            var iframe,
+              iframes = document.getElementsByTagName('iframe');
+            for (var i = 0; i < iframes.length; i++) {
+              if (iframes[i].contentWindow === event.source) {
+                iframe = iframes[i];
+                break;
+              }
+            }
+            if (!iframe) {
+              return;
+            }
+            if (actionHandlers[event.data.action]) {
+              actionHandlers[event.data.action](
+                iframe,
+                event.data,
+                function respond(action, data) {
+                  if (data === undefined) {
+                    data = {};
+                  }
+                  data.action = action;
+                  data.context = 'h5p';
+                  event.source.postMessage(data, event.origin);
+                },
+              );
+            }
+          },
+          false,
+        );
+        var iframes = document.getElementsByTagName('iframe');
+        var ready = { context: 'h5p', action: 'ready' };
+        for (var i = 0; i < iframes.length; i++) {
+          if (iframes[i].src.indexOf('h5p') !== -1) {
+            iframes[i].contentWindow.postMessage(ready, '*');
+          }
+        }
+      })();
+    },
+  };
+})();

src/js/main.js

@@ -37,6 +37,7 @@ import uob from './3party/uob7.js';
 import util from './modules/util.js';
 import utilRoot from './utilRoot.js';
 import uucheck from './modules/uucheck.js';
+import h5p from './3party/h5p.js';
 
 jQuery(function($) {
 
@@ -492,6 +493,7 @@ jQuery(function($) {
     tabs.init();
     reveal.init();
     accordion.init();
+    h5p.init();
 
   } catch (e) {
     console.log(e);

yarn.lock

@@ -3917,6 +3917,15 @@ defaults@^1.0.3:
   dependencies:
     clone "^1.0.2"
 
+define-data-property@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/define-data-property/-/define-data-property-1.1.4.tgz#894dc141bb7d3060ae4366f6a0107e68fbe48c5e"
+  integrity sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==
+  dependencies:
+    es-define-property "^1.0.0"
+    es-errors "^1.3.0"
+    gopd "^1.0.1"
+
 define-lazy-prop@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz"
@@ -4189,6 +4198,13 @@ error-ex@^1.3.1:
   dependencies:
     is-arrayish "^0.2.1"
 
+es-define-property@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/es-define-property/-/es-define-property-1.0.0.tgz#c7faefbdff8b2696cf5f46921edfb77cc4ba3845"
+  integrity sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==
+  dependencies:
+    get-intrinsic "^1.2.4"
+
 es-errors@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/es-errors/-/es-errors-1.3.0.tgz#05f75a25dab98e4fb1dcd5e1472c0546d5057c8f"
@@ -4874,7 +4890,7 @@ get-caller-file@^2.0.5:
   resolved "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz"
   integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
 
-get-intrinsic@^1.0.2, get-intrinsic@^1.2.4:
+get-intrinsic@^1.1.3, get-intrinsic@^1.2.4:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.2.4.tgz#e385f5a4b5227d449c3eabbad05494ef0abbeadd"
   integrity sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==
@@ -5040,6 +5056,13 @@ globby@^6.1.0:
     pify "^2.0.0"
     pinkie-promise "^2.0.0"
 
+gopd@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/gopd/-/gopd-1.0.1.tgz#29ff76de69dac7489b7c0918a5788e56477c332c"
+  integrity sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==
+  dependencies:
+    get-intrinsic "^1.1.3"
+
 got@^8.3.1:
   version "8.3.2"
   resolved "https://registry.npmjs.org/got/-/got-8.3.2.tgz"
@@ -5124,6 +5147,13 @@ has-flag@^4.0.0:
   resolved "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz"
   integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
 
+has-property-descriptors@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz#963ed7d071dc7bf5f084c5bfbe0d1b6222586854"
+  integrity sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==
+  dependencies:
+    es-define-property "^1.0.0"
+
 has-proto@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmjs.org/has-proto/-/has-proto-1.0.1.tgz"
@@ -7798,6 +7828,18 @@ [email protected]:
     parseurl "~1.3.3"
     send "0.18.0"
 
+set-function-length@^1.2.1:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/set-function-length/-/set-function-length-1.2.2.tgz#aac72314198eaed975cf77b2c3b6b880695e5449"
+  integrity sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==
+  dependencies:
+    define-data-property "^1.1.4"
+    es-errors "^1.3.0"
+    function-bind "^1.1.2"
+    get-intrinsic "^1.2.4"
+    gopd "^1.0.1"
+    has-property-descriptors "^1.0.2"
+
 set-value@^2.0.0, set-value@^2.0.1:
   version "2.0.1"
   resolved "https://registry.npmjs.org/set-value/-/set-value-2.0.1.tgz"