Merge branch 'master' of github.com:h5p/h5p-php-library

doc/spec_en.html

@@ -12,7 +12,7 @@
 <li>A mandatory file in the root folder named <i>h5p.json</i></li>
 <li>An optional image file named <i>h5p.jpg</i>. This is an icon or an image of the application, 512 × 512 pixels. This image may be used by the platform as a preview of the application, and could be included in OG meta tags for use with social media.</li>
 <li>One content folder, named <i>content</i>. This will contain the preset configuration for the application, as well as any required media files.</li>
-<li>One or more library diractories named the same as the library's internal name.</li>
+<li>One or more library directories named the same as the library's internal name.</li>
 </ol>
 <h2>h5p.json</h2>
 <p>The <i>h5p.json</i> file is a normal JSON text file containing a JSON object with the following predefined properties.</p>
@@ -27,7 +27,7 @@
 <ul><li>contentType - Textual description of the type of content.</li>
 <li>description - Textual description of the package.</li>
 <li>author - Name of author.</li>
-<li>license - Kode for the content license. Use the following creative commons codes: cc-by, cc-by-sa, cc-by-nd, cc-by-nc, cc-by-nc-sa, cc-by-nc-nd. In addition for public domain: pd, and closed license: cr. More may be added later.</li>
+<li>license - Code for the content license. Use the following Creative Commons codes: cc-by, cc-by-sa, cc-by-nd, cc-by-nc, cc-by-nc-sa, cc-by-nc-nd. In addition for public domain: pd, and closed license: cr. More may be added later.</li>
 <li>dynamicDependencies - Libraries that may be loaded dynamically during execution.</li>
 <li>width - Width of the package content in cases where the package is not dynamically resizable.</li>
 <li>height - Height of the package content.</li>
@@ -74,9 +74,9 @@
 
 <p>The root of a library folder shall contain a file name <i>library.json</i> formatted similar to the package's <i>hp5.json</i>, but with a few differences. The library shall also have one or more images in the root folder, named <i>library.jpg</i>, <i>library1.jpg</i> etc. Image sizes 512px × 512px, and will be used in the H5P editor tool.</p>
 
-<p>Libraries are not allowed to modify the dokument tree in ways that will have consequences for the web site or will be noticable by the user without the library explicitly being initialized from the main package library or another invoked library.</p>
+<p>Libraries are not allowed to modify the document tree in ways that will have consequences for the web site or will be noticable by the user without the library explicitly being initialized from the main package library or another invoked library.</p>
 
-<p>The library shall always include a Javascript object function named the same as the defined library <i>machineName</i> (defined in <i>library.json</i> and used as the library folder name).  This object will be instantiated with the library options as parameter. The resulting object must contain a function <i>attach(target)</i> that will be called after instantiation to attach the library DOM to the main DOM inside <i>target</i></p>
+<p>The library shall always include a JavaScript object function named the same as the defined library <i>machineName</i> (defined in <i>library.json</i> and used as the library folder name).  This object will be instantiated with the library options as parameter. The resulting object must contain a function <i>attach(target)</i> that will be called after instantiation to attach the library DOM to the main DOM inside <i>target</i></p>
 
 <h3>Example</h3>
 <p>A library called H5P.multichoice would typically be instantiated and attached to the page like this:</p>
@@ -138,7 +138,7 @@ multichoice.attach($multichoiceContainer);</code>
 <h2>Allowed file types</h2>
 <p>Files that require server side execution or that cannot be regarded an open standard shall not be used. Allowed file types: js, json, png, jpg, gif, svg, css, mp3, wav (audio: PCM), m4a (audio: AAC), mp4 (video: H.264, audio: AAC/MP3), ogg (video: Theora, audio: Vorbis) and webm (video VP8, audio: Vorbis). Administrators of web sites implementing H5P may open for accepting further formats. HTML files shall not be used. HTML for each library shall be inserted from the library scripts to ease code reuse. (By avoiding content being defined in said HTML).</p>
 <h2>API functions</h2>
-<p>The following javascript functions are available through h5p:</p>
+<p>The following JavaScript functions are available through h5p:</p>
 <ul>
 <li>H5P.getUserData(namespace, variable)</li>
 <li>H5P.setUserData(namespace, variable, data)</li>
@@ -156,13 +156,13 @@ multichoice.attach($multichoiceContainer);</code>
 <h2>Best practices</h2>
 <p>H5P is a very open standard. This is positive for flexibility. Most content may be produces as H5P. But this also allows for bad code, security weaknesses, code that may be difficult to reuse. Therefore the following best practices should be followed to get the most from H5P:</p>
 <ul>
-<li>Think reusability when creating a library. H5P support depencies between libraries, so the same small quiz-library may be used in various larger packages or libraries.</li>
+<li>Think reusability when creating a library. H5P support dependencies between libraries, so the same small quiz-library may be used in various larger packages or libraries.</li>
-<li>H5P support library updates. This enables all content using a common library to be updated at once. This must be accounted for when writing new libraries. A library should be as general as possible. The content format should be thought out so there are no changes to the required content data when a library is updated. Note: Multiple versions of a library may exists at the same time, only patch level updates will be automatically installed.</li>
+<li>H5P supports library updates. This enables all content using a common library to be updated at once. This must be accounted for when writing new libraries. A library should be as general as possible. The content format should be thought out so there are no changes to the required content data when a library is updated. Note: Multiple versions of a library may exists at the same time, only patch level updates will be automatically installed.</li>
-<li>An H5P should not interact directly with the containing web site. It shall only affect elements within its own generated DOM tree. Elements shall also only be injected within the target defined on initialization. This is to avoid depencies to a specific platform or web page.</li>
+<li>An H5P should not interact directly with the containing web site. It shall only affect elements within its own generated DOM tree. Elements shall also only be injected within the target defined on initialization. This is to avoid dependencies to a specific platform or web page.</li>
 <li>Prefix objects, global functions, etc with h5p to minimize the chance of namespace conflicts with the rest of the web page. Remember that there may also be multiple H5P objects inserted on a page, so plan ahead to avoid conflicts.</li>
 <li>Content should be responsive.</li>
 <li>Content should be WCAG 2 AA compliant</li>
 <li>All generated HTML should validate.</li>
-<li>All css should validate (some browser specific non-standard CSS may at times be required)</li>
+<li>All CSS should validate (some browser specific non-standard CSS may at times be required)</li>
-<li>Best practices for javascript, html, etc. should of course also be followed when writing an H5P.</li>
+<li>Best practices for JavaScript, HTML, etc. should of course also be followed when writing an H5P.</li>
 </ul>

h5p.classes.php

@@ -1664,6 +1664,8 @@ class H5PCore {
   );
   public static $styles = array(
     'styles/h5p.css',
+    'styles/h5p-confirmation-dialog.css',
+    'styles/h5p-core-button.css'
   );
   public static $scripts = array(
     'js/jquery.js',
@@ -1672,6 +1674,7 @@ class H5PCore {
     'js/h5p-x-api-event.js',
     'js/h5p-x-api.js',
     'js/h5p-content-type.js',
+    'js/h5p-confirmation-dialog.js'
   );
   public static $adminScripts = array(
     'js/jquery.js',

js/h5p-confirmation-dialog.js

@@ -0,0 +1,162 @@
+/*global H5P*/
+H5P.ConfirmationDialog = (function (EventDispatcher) {
+  "use strict";
+
+  /**
+   * Create a confirmation dialog
+   *
+   * @param [options] Options for confirmation dialog
+   * @param [options.headerText] Header text
+   * @param [options.dialogText] Dialog text
+   * @param [options.cancelText] Cancel dialog button text
+   * @param [options.confirmText] Confirm dialog button text
+   * @constructor
+   */
+  function ConfirmationDialog(options) {
+    EventDispatcher.call(this);
+    var self = this;
+
+    // Default options
+    options = options || {};
+    options.headerText = options.headerText ||
+      'Confirm action';
+    options.dialogText = options.dialogText ||
+      'Please confirm that you wish to proceed. This action will not be reversible.';
+    options.cancelText = options.cancelText || 'Cancel';
+    options.confirmText = options.confirmText || 'Confirm';
+
+    // Create background
+    var popupBackground = document.createElement('div');
+    popupBackground.classList
+      .add('h5p-confirmation-dialog-background', 'hidden', 'hiding');
+
+    // Create outer popup
+    var popup = document.createElement('div');
+    popup.classList.add('h5p-confirmation-dialog-popup', 'hidden');
+    popupBackground.appendChild(popup);
+
+    // Popup header
+    var header = document.createElement('div');
+    header.classList.add('h5p-confirmation-dialog-header');
+    popup.appendChild(header);
+
+    // Header text
+    var headerText = document.createElement('div');
+    headerText.classList.add('h5p-confirmation-dialog-header-text');
+    headerText.innerHTML = options.headerText;
+    header.appendChild(headerText);
+
+    // Popup body
+    var body = document.createElement('div');
+    body.classList.add('h5p-confirmation-dialog-body');
+    popup.appendChild(body);
+
+    // Popup text
+    var text = document.createElement('div');
+    text.classList.add('h5p-confirmation-dialog-text');
+    text.innerHTML = options.dialogText;
+    body.appendChild(text);
+
+    // Popup buttons
+    var buttons = document.createElement('div');
+    buttons.classList.add('h5p-confirmation-dialog-buttons');
+    body.appendChild(buttons);
+
+    // Cancel button
+    var cancelButton = document.createElement('button');
+    cancelButton.classList.add('h5p-core-cancel-button');
+    cancelButton.tabindex = 0;
+    cancelButton.textContent = options.cancelText;
+    cancelButton.onclick = function () {
+      self.hide();
+      self.trigger('canceled');
+    };
+    buttons.appendChild(cancelButton);
+
+    // Confirm button
+    var confirmButton = document.createElement('button');
+    confirmButton.classList.add('h5p-core-button',
+      'h5p-confirmation-dialog-confirm-button');
+    confirmButton.tabindex = 0;
+    confirmButton.textContent = options.confirmText;
+    confirmButton.onclick = function () {
+      self.hide();
+      self.trigger('confirmed');
+    };
+    buttons.appendChild(confirmButton);
+
+    // Exit button
+    var exitButton = document.createElement('button');
+    exitButton.classList.add('h5p-confirmation-dialog-exit');
+    exitButton.tabindex = 0;
+    exitButton.onclick = function () {
+      self.hide();
+      self.trigger('canceled');
+    };
+    popup.appendChild(exitButton);
+
+    // Wrapper element
+    var wrapperElement;
+
+    /**
+     * Append confirmation dialog
+     * @param {HTMLElement} wrapper
+     * @returns {H5P.ConfirmationDialog}
+     */
+    this.appendTo = function (wrapper) {
+      wrapper.appendChild(popupBackground);
+      wrapperElement = wrapper;
+
+      return this;
+    };
+
+    /**
+     * Fit popup to container. Makes sure it doesn't overflow.
+     */
+    var fitToContainer = function () {
+      var popupOffset = parseInt(popup.style.top, 10) + popup.offsetHeight;
+
+      // Overflows wrapper
+      if (popupOffset > wrapperElement.offsetHeight) {
+        var overflowedContainerOffset = wrapperElement.offsetHeight - popup.offsetHeight;
+        popup.style.top = overflowedContainerOffset + 'px';
+      }
+    };
+
+    /**
+     * Show confirmation dialog
+     * @params {number} offsetTop Offset top
+     * @returns {H5P.ConfirmationDialog}
+     */
+    this.show = function (offsetTop) {
+      popup.style.top = offsetTop + 'px';
+      popupBackground.classList.remove('hidden');
+      fitToContainer();
+      popupBackground.classList.remove('hiding');
+      popup.classList.remove('hidden');
+      cancelButton.focus();
+
+      return this;
+    };
+
+    /**
+     * Hide confirmation dialog
+     * @returns {H5P.ConfirmationDialog}
+     */
+    this.hide = function () {
+      popupBackground.classList.add('hiding');
+      popup.classList.add('hidden');
+      setTimeout(function () {
+        popupBackground.classList.add('hidden');
+      }, 100);
+
+      return this;
+    };
+  }
+
+  ConfirmationDialog.prototype = Object.create(EventDispatcher.prototype);
+  ConfirmationDialog.prototype.constructor = ConfirmationDialog;
+
+  return ConfirmationDialog;
+
+}(H5P.EventDispatcher));

js/h5p-event-dispatcher.js

@@ -99,7 +99,7 @@ H5P.EventDispatcher = (function () {
      *   Event type
      * @param {H5P.EventCallback} listener
      *   Event listener
-     * @param {Object} thisArg
+     * @param {Object} [thisArg]
      *   Optionally specify the this value when calling listener.
      */
     this.on = function (type, listener, thisArg) {

styles/h5p-confirmation-dialog.css

@@ -0,0 +1,103 @@
+.h5p-confirmation-dialog-background {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  left: 0;
+  top: 0;
+
+  background: rgba(255, 255, 255, 0.85);
+  opacity: 1;
+  visibility: visible;
+  -webkit-transition: opacity 0.1s, linear 0s, visibility 0s linear 0s;
+  transition: opacity 0.1s linear 0s, visibility 0s linear 0s;
+
+  z-index: 11;
+}
+
+.h5p-confirmation-dialog-background.hidden {
+  display: none;
+}
+
+.h5p-confirmation-dialog-background.hiding {
+  opacity: 0;
+  visibility: hidden;
+  -webkit-transition: opacity 0.1s, linear 0s, visibility 0s linear 0.1s;
+  transition: opacity 0.1s linear 0s, visibility 0s linear 0.1s;
+}
+
+.h5p-confirmation-dialog-popup {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  box-sizing: border-box;
+  max-width: calc(100% - 2em);
+  min-width: 25em;
+
+  top: 2em;
+  left: 50%;
+  -webkit-transform: translate(-50%, 0%);
+  -ms-transform: translate(-50%, 0%);
+  transform: translate(-50%, 0%);
+
+  color: #555;
+  box-shadow: 0 0 6px 1px #ddd;
+
+  -webkit-transition: transform 0.1s ease-in;
+  transition: transform 0.1s ease-in;
+}
+
+.h5p-confirmation-dialog-popup.hidden {
+  -webkit-transform: translate(-50%, 50%);
+  -ms-transform: translate(-50%, 50%);
+  transform: translate(-50%, 50%);
+}
+
+.h5p-confirmation-dialog-header {
+  padding: 1.5em;
+  background: #fff;
+  color: #1a73d9;
+}
+
+.h5p-confirmation-dialog-header-text {
+  font-size: 1.25em;
+}
+
+.h5p-confirmation-dialog-body {
+  padding: 1.25em 1.5em;
+  background: #fafafa;
+}
+
+.h5p-confirmation-dialog-text {
+  margin-bottom: 1.5em;
+}
+
+.h5p-confirmation-dialog-buttons {
+  float: right;
+}
+
+.h5p-confirmation-dialog-exit {
+  position: absolute;
+  background: none;
+  border: none;
+  font-size: 2.5em;
+  top: -0.9em;
+  right: -1.15em;
+  color: #777;
+  cursor: pointer;
+}
+
+.h5p-confirmation-dialog-exit:before {
+  font-family: "H5P";
+  content: "\e890";
+}
+
+.h5p-core-button.h5p-confirmation-dialog-confirm-button {
+  padding-left: 0.75em;
+  margin-bottom: 0;
+}
+
+.h5p-core-button.h5p-confirmation-dialog-confirm-button:before {
+  content: "\e601";
+}

styles/h5p-core-button.css

@@ -0,0 +1,59 @@
+.h5p-core-button {
+  font-size: 1em;
+  line-height: 1.2;
+  padding: 0.5em 1.25em;
+  border-radius: 2em;
+
+  background: #1a73d9;
+  color: #ffffff;
+
+  cursor: pointer;
+  border: none;
+  box-shadow: none;
+  outline: none;
+
+  display: inline-block;
+  text-align: center;
+  text-shadow: none;
+  vertical-align: baseline;
+}
+.h5p-core-button:hover,
+.h5p-core-button:focus {
+  background: #1356a3;
+  color: #fff;
+  text-decoration: none;
+  -webkit-transition: initial;
+  transition: initial;
+}
+.h5p-core-button:active {
+  position: relative;
+  background: #104888;
+
+  -webkit-box-shadow: inset 0 4px 0 #0e407a;
+  -moz-box-shadow: inset 0 4px 0 #0e407a;
+  box-shadow: inset 0 4px 0 #0e407a;
+}
+
+.h5p-core-button:before {
+  font-family: 'H5P';
+  padding-right: 0.15em;
+  font-size: 1.5em;
+  vertical-align: middle;
+  line-height: 0.7;
+}
+
+.h5p-core-cancel-button {
+  cursor: pointer;
+  background: none;
+  border: none;
+  color: #a00;
+  margin-right: 1em;
+  font-size: 1em;
+}
+
+.h5p-core-cancel-button:hover,
+.h5p-core-cancel-button:focus {
+  background: none;
+  border: none;
+  color: #e40000;
+}