feat: allow user to specify the embed code

Merge pull request #96 from tunapanda/feat/allow-embed-code
 allow user to specify the embed code

README.md

@@ -76,20 +76,22 @@ The standalone H5P player constructor accepts two arguments.
 ### H5P Options
 **Option name**|**Required**|**Description**
 -----|-----|----
-`h5pJsonPath`   | true | Path to the H5P content folder
-`frameCss`  | true | URL to the standalone player `h5p.css`
-`frameJs`   |true | URL to the standalone player `frame.bundle.js`
-`id`    | false | Player unique identifier. Randomly generated by default
-`librariesPath` | false| Path where the player should find the H5P content libraries. Defaults to same as `h5pJsonPath`
-`contentJsonPath`|false | Path where the player should find the H5P `content.json` file. Defaults to  `{h5pJsonPath}/content/`,
-`frame` |false| A boolean on whether to show frame and buttons below H5P
-`copyright` |false| A boolean on whether display copyright button
-`embed` |false| A boolean on whether display embed button
-`export` |false|  A boolean on whether display a download button.
-`icon`  |false|   A boolean on whether display H5P icon
-`downloadUrl` |false| A path or a url that returns zipped h5p for download. The link is used by H5P `export` button
-`fullScreen` |false| A boolean on whether to enable fullscreen button if browser supports the feature. Default is `false`|
-`xAPIObjectIRI`|false| An identifier for a single unique Activity ~ utilized when generating xAPI [object](https://github.com/adlnet/xAPI-Spec/blob/master/xAPI-Data.md#acturi) field. Default is page host+pathname
+`h5pJsonPath`   | Yes | Path to the H5P content folder
+`frameCss`  | Yes | URL to the standalone player `h5p.css`
+`frameJs`   |Yes | URL to the standalone player `frame.bundle.js`
+`id`    | No | Player unique identifier. Randomly generated by default
+`librariesPath` | No| Path where the player should find the H5P content libraries. Defaults to same as `h5pJsonPath`
+`contentJsonPath`|No | Path where the player should find the H5P `content.json` file. Defaults to  `{h5pJsonPath}/content/`,
+`frame` |No| A boolean on whether to show frame and buttons below H5P
+`copyright` |No| A boolean on whether display copyright button
+`export` |No|  A boolean on whether display a download button.
+`icon`  |No|   A boolean on whether display H5P icon
+`downloadUrl` |No| A path or a url that returns zipped h5p for download. The link is used by H5P `export` button
+`fullScreen` |No| A boolean on whether to enable fullscreen button if browser supports the feature. Default is `false`|
+`xAPIObjectIRI`|No| An identifier for a single unique Activity ~ utilized when generating xAPI [object](https://github.com/adlnet/xAPI-Spec/blob/master/xAPI-Data.md#acturi) field. Default is page host+pathname
+`embed` |No| A boolean on whether display embed button. Default is `false`.  N.B. Setting this option to `true` will require an `embedCode` below.
+`embedCode` |unless `embed` is true| Embed/Iframe code that user can insert on their site to view same content. Check some caveats to consider [below](#caveats-while-adding-embed-code)
+
 
 **Note:**
 - One can use absolute URL for `frameCss`, `frameJs`, and for other path options(`h5pJsonPath`,`librariesPath`, & `librariesPath`)
@@ -112,11 +114,12 @@ const options = {
     librariesPath: "/path/to/shared/libaries", //shared libraries path
     frame: true, //required to display copyright,  embed, & export buttons
     copyright: true,
-    embed: false,
    'export': false,
     icon: true,
     downloadUrl: '/path/to/exercise-one.h5p',
-    fullScreen: true //enable fullscreen button
+    fullScreen: true //enable fullscreen button,
+     embed: true,
+     embedCode:'<iframe width=":w" height=":h" src="https://replacethiswithyoururl.io" frameBorder="0" scrolling="no" styles="width:100%"></iframe>'
   };
 
 
@@ -208,6 +211,18 @@ async function myAwesomePlayer() {
 myAwesomePlayer();
 
 ```
+### Caveats while adding embed code
+- This library includes an H5P resizer by default in `main.bundle.js` at the moment. But, to allow the iframe width to resize promptly, add CSS style setting the width to 100% i.e. `style="width:100%;"`
+- If you want to allow users to resize the iframe width and height, set them using placeholders provided by H5P i.e., `width=":w"` and `height=":h"`
+
+Example that combines above points:
+
+```js
+<iframe width=":w" height=":h"
+src="https://app.wikonnect.org/embed/JJuzs-OAACU"  //replace this with your URL
+frameBorder="0" scrolling="no" styles="width:100%"></iframe
+```
+
 
 ### Extracting H5P
 1. Rename the H5P file extension from `.h5p` file to `.zip`

cypress/integration/advance-options.spec.js

@@ -22,4 +22,22 @@ describe('single', () => {
             expect(iframe.contents().find('.h5p-download-button')).to.exist;
         });
     });
+
+    it('should display embed code dialog', () => {
+
+        cy.visit('test/advance-options.html');
+        cy.get('.h5p-iframe').should((iframe) => {
+
+            expect(iframe.contents().find('.h5p-actions').find('.h5p-embed')).to.exist;
+
+            iframe.contents()
+                .find('.h5p-actions')
+                .find('.h5p-embed')
+                .click();
+
+            expect(iframe.contents().find('.h5p-embed-code-container')).to.exist;
+            expect(iframe.contents().find('.h5p-embed-size')).to.exist;
+        })
+
+    });
 });

src/js/h5p-standalone.class.js

@@ -93,6 +93,11 @@ export default class H5PStandalone {
       contentOptions.url = options.xAPIObjectIRI; //no validation
     }
 
+    if (options.embedCode) { // this will not be dependent on displayOptions.embed
+      contentOptions.embedCode = options.embedCode;
+      contentOptions.resizeCode = options.resizeCode || ''; // resize code is already bundled in main.bundle.js
+    }
+
 
     this.initElement(el);
     return this.initH5P(generalIntegrationOptions, contentOptions);

test/advance-options.html

@@ -10,18 +10,17 @@
   <div id="h5p-container"></div>
 
   <script type="text/javascript">
-    const {
-      H5P
-    } = H5PStandalone;
-    new H5P(document.getElementById('h5p-container'),  {
+
+    new H5PStandalone.H5P(document.getElementById('h5p-container'), {
       h5pJsonPath: 'full_workspace',
       frameJs: '/dist/frame.bundle.js',
       frameCss: '/dist/styles/h5p.css',
       frame: true,
       copyright: true,
-      embed: false,
       export: true,
-      downloadUrl: 'test.h5p'
+      downloadUrl: 'test.h5p',
+      embed: true,
+      embedCode: '<iframe width=":w" height=":h" src="https://yourembecode.om" frameBorder="0" scrolling="no"></iframe>',
     });
   </script>
 </body>