Redesign for copyrights box.

js/h5p.js

@@ -154,12 +154,14 @@ H5P.init = function (target) {
     }
     if (!(contentData.disable & H5P.DISABLE_COPYRIGHT)) {
       var copyright = H5P.getCopyrights(instance, library.params, contentId);
+      copyright.removeSubLevel();
+      var copyrightString = copyright.toString();
 
-      if (copyright) {
+      if (copyrightString) {
         // Add copyright dialog button
         H5P.jQuery('<li class="h5p-button h5p-copyrights" role="button" tabindex="1" title="' + H5P.t('copyrightsDescription') + '">' + H5P.t('copyrights') + '</li>').appendTo($actions).click(function () {
           // Open dialog with copyright information
-          var dialog = new H5P.Dialog('copyrights', H5P.t('copyrightInformation'), copyright, $container);
+          var dialog = new H5P.Dialog('copyrights', H5P.t('copyrightInformation'), copyrightString, $container);
           dialog.open();
         });
       }
@@ -853,6 +855,32 @@ H5P.Dialog = function (name, title, content, $element) {
         .end()
       .end();
 
+  // Find all expand buttons, add functionality.
+  H5P.jQuery('.h5p-copyrights-expand-button', $dialog).click(function () {
+    var $copyrightsExpandButton = H5P.jQuery(this);
+    var $buttonParent = $copyrightsExpandButton.parent();
+
+    // Update buttontext
+    if ($buttonParent.hasClass('expand')) {
+      $copyrightsExpandButton.html(H5P.t('showMore'));
+    } else {
+      $copyrightsExpandButton.html(H5P.t('showLess'));
+    }
+
+    // Expand or collapse copyright details
+    $buttonParent.toggleClass('expand');
+  });
+
+  // Make sure all links are opened outside of iframe
+  if (H5P.isFramed) {
+    H5P.jQuery('a', $dialog).click(function () {
+      var href = H5P.jQuery(this).attr('href');
+      window.parent.open(href, '_blank');
+      return false;
+    });
+  }
+
+
   this.open = function () {
     setTimeout(function () {
       $dialog.addClass('h5p-open'); // Fade in
@@ -878,7 +906,7 @@ H5P.Dialog = function (name, title, content, $element) {
  *   Parameters of the content instance.
  * @param {number} contentId
  *   Identifies the H5P content
- * @returns {string} Copyright information.
+ * @returns {H5P.ContentCopyrights} Copyright information.
  */
 H5P.getCopyrights = function (instance, parameters, contentId) {
   var copyrights;
@@ -899,10 +927,7 @@ H5P.getCopyrights = function (instance, parameters, contentId) {
     H5P.findCopyrights(copyrights, parameters, contentId);
   }
 
-  if (copyrights !== undefined) {
+
-    // Convert to string
-    copyrights = copyrights.toString();
-  }
   return copyrights;
 };
 
@@ -1050,6 +1075,7 @@ H5P.ContentCopyrights = function () {
   var label;
   var media = [];
   var content = [];
+  var hasSubLevel = true;
 
   /**
    * Set label.
@@ -1082,6 +1108,13 @@ H5P.ContentCopyrights = function () {
     }
   };
 
+  /**
+   * Add sub level content.
+   */
+  this.removeSubLevel = function () {
+    hasSubLevel = false;
+  };
+
   /**
    * Print content copyright.
    *
@@ -1102,13 +1135,13 @@ H5P.ContentCopyrights = function () {
 
 
     if (html !== '') {
-      // Add a label to this info
+      if (hasSubLevel) {
-      if (label !== undefined) {
+        label = (label && label.length ? label : H5P.t('subLevel'));
-        html = '<h3>' + label + '</h3>' + html;
+        html = '<div class="h5p-content-copyrights-label">' + label + '</div>' + html;
       }
 
       // Add wrapper
-      html = '<div class="h5p-content-copyrights">' + html + '</div>';
+      html = '<div class="h5p-content-copyrights' + (hasSubLevel ? ' sublevel' : '') + '">' + html + '</div>';
     }
 
     return html;
@@ -1129,8 +1162,9 @@ H5P.ContentCopyrights = function () {
  *   Add extra copyright fields.
  */
 H5P.MediaCopyright = function (copyright, labels, order, extraFields) {
-  var thumbnail;
+  var thumbnail = new H5P.Thumbnail();
   var list = new H5P.DefinitionList();
+  var mediaType = '';
 
   /**
    * Get translated label for field.
@@ -1193,6 +1227,15 @@ H5P.MediaCopyright = function (copyright, labels, order, extraFields) {
     thumbnail = newThumbnail;
   };
 
+  /**
+   * Set media type.
+   *
+   * @param {H5P.MediaType} newMediaType new media type
+   */
+  this.setMediaType = function (newMediaType) {
+    mediaType = ' ' + newMediaType;
+  };
+
   /**
    * Checks if this copyright is undisclosed.
    * I.e. only has the license attribute set, and it's undisclosed.
@@ -1223,11 +1266,17 @@ H5P.MediaCopyright = function (copyright, labels, order, extraFields) {
 
     if (thumbnail !== undefined) {
       html += thumbnail;
+
+      // Unable to determine media type, default to "file"
+      if (!thumbnail.hasImage() && mediaType === '') {
+        mediaType = ' file';
+      }
     }
+
     html += list;
 
     if (html !== '') {
-      html = '<div class="h5p-media-copyright">' + html + '</div>';
+      html = '<div class="h5p-media-copyright' + mediaType + '">' + html + '</div>';
     }
 
     return html;
@@ -1254,6 +1303,18 @@ H5P.copyrightLicenses = {
   'C': 'Copyright'
 };
 
+/**
+ * Maps copyright type codes to their classes, made accessible to all content types implementing getCopyright
+ *
+ * @type {Object}
+ */
+H5P.copyrightTypes = {
+  'image': 'image',
+  'video': 'video',
+  'audio': 'audio',
+  'file': 'file'
+};
+
 /**
  * A simple and elegant class for creating thumbnails of images.
  *
@@ -1263,10 +1324,17 @@ H5P.copyrightLicenses = {
  * @param {number} height
  */
 H5P.Thumbnail = function (source, width, height) {
-  var thumbWidth, thumbHeight = 100;
+  // Deprecated width and height
-  if (width !== undefined) {
+  var imageSource = source;
-    thumbWidth = Math.round(thumbHeight * (width / height));
+
-  }
+  /**
+   * Check if thumbnail has an image source
+   *
+   * @returns {boolean}
+   */
+  this.hasImage = function () {
+    return !!imageSource;
+  };
 
   /**
    * Print thumbnail.
@@ -1274,7 +1342,13 @@ H5P.Thumbnail = function (source, width, height) {
    * @returns {string} HTML.
    */
   this.toString = function () {
-    return '<img src="' + source + '" alt="' + H5P.t('thumbnail') + '" class="h5p-thumbnail" height="' + thumbHeight + '"' + (thumbWidth === undefined ? '' : ' width="' + thumbWidth + '"') + '/>';
+    var html = '<div class="h5p-thumbnail-wrapper">';
+    if (source !== undefined) {
+      html += '<img src="' + imageSource + '" alt="' + H5P.t('thumbnail') + '" class="h5p-thumbnail"></img>';
+    }
+    html += '</div>';
+
+    return html;
   };
 };
 
@@ -1347,12 +1421,53 @@ H5P.DefinitionList = function () {
    * @returns {string} HTML.
    */
   this.toString = function () {
-    var html = '';
+    // Return empty string if there are no fields
+    if (!fields.length) {
+      return '';
+    }
+    var previewHTML = '';
+    var detailsHTML = '';
+
+    // Separate preview and details html parts
     for (var i = 0; i < fields.length; i++) {
       var field = fields[i];
-      html += '<dt>' + field.getLabel() + '</dt><dd>' + field.getValue() + '</dd>';
+      var entry = '<div class="h5p-copyright-entry">';
+      if (field.getLabel() === 'Title') {
+        entry += '<span class="h5p-copyright-title">' + field.getValue() + '</span></div>';
+        previewHTML += entry;
+      } else if (field.getLabel() === 'Author') {
+        entry += '<span class="h5p-copyright-label">' + H5P.t('by') + ' </span>' +
+          '<span class="h5p-copyright-value">' + field.getValue() + '</span></div>';
+        previewHTML += entry;
+      } else {
+        entry += '<span class="h5p-copyright-label">' + field.getLabel() + '</span>';
+
+        // Make urls clickable
+        if (field.getLabel() === 'Source') {
+          var urlValidator = /^(https?|ftp):\/\/[^\s/$.?#].[^\s]*$/i;
+          if (urlValidator.test(field.getValue())) {
+            entry += '<span class="h5p-copyright-value">' +
+                        '<a href="' + field.getValue() + '" target="_top">' + field.getValue() + '</a>' +
+                      '</span></div>';
+          }
+        } else {
+          entry += '<span class="h5p-copyright-value">' + field.getValue() + '</span></div>';
+        }
+        detailsHTML += entry;
+
+      }
     }
-    return (html === '' ? html : '<dl class="h5p-definition-list">' + html + '</dl>');
+
+    // Generate copyright preview part
+    var html = '<div class="h5p-copyright-preview">' + previewHTML + '</div>';
+
+    // Generate copyright details part
+    html += '<div class="h5p-copyright-details">' + detailsHTML + '</div>';
+
+    // Add expand/collapse button
+    html += '<div role="button" tabindex="0" class="h5p-copyrights-expand-button">' + H5P.t('showMore') + '</div>';
+
+    return '<div class="h5p-copyright-information-wrapper">' + html + '</div>';
   };
 };
 

styles/h5p.css

@@ -381,11 +381,6 @@ div.h5p-fullscreen {
 .h5p-expander-content p {
   margin: 0.5em 0;
 }
-.h5p-content-copyrights {
-  border-left: 0.25em solid #d0d0d0;
-  margin-left: 0.25em;
-  padding-left: 0.25em;
-}
 .h5p-throbber {
   background: url('../images/throbber.gif?ver=1.2.1') 10px center no-repeat;
   padding-left: 38px;
@@ -396,7 +391,7 @@ div.h5p-fullscreen {
   cursor: default;
   float: right;
   outline: none;
-  border: 2px solid #ccc;
+  border: 2px solid #ddd;
   padding: 0.25em 0.75em 0.125em;
   background: #eee;
 }
@@ -407,3 +402,141 @@ div.h5p-fullscreen {
 .h5p-dialog-ok-button:active {
   background: #eeffee;
 }
+
+/* Copyright dialog styles*/
+
+/* Copyrights dialog css */
+.h5p-copyrights-dialog .h5p-copyright-information-wrapper {
+  display: inline-block;
+  padding: 0 1em;
+  vertical-align: top;
+  box-sizing: border-box;
+  width: calc(100% - 85px);
+
+  font-size: 12px;
+  color: #333;
+  line-height: 1.1em;
+}
+
+/* Copyright main header */
+.h5p-copyrights-dialog .h5p-scroll-content > .h5p-content-copyrights > .h5p-content-copyrights.sublevel > .h5p-content-copyrights-label {
+  font-size: 16px;
+}
+
+/* Copyright sub-level */
+.h5p-copyrights-dialog .h5p-content-copyrights.sublevel .h5p-content-copyrights-label {
+  font-size: 14px;
+  font-weight: bold;
+  color: #555;
+  padding: 10px 0;
+  border-bottom: 1px solid #ddd;
+}
+
+/* Copyright sub-level incremental indent */
+.h5p-copyrights-dialog .h5p-content-copyrights.sublevel {
+  margin-left: 10px;
+}
+
+/* No indent for main header */
+/*.h5p-copyrights-dialog .h5p-scroll-content > .h5p-content-copyrights > .h5p-content-copyrights.sublevel {
+  margin-left: 0;
+}*/
+
+/* Media copyright */
+.h5p-copyrights-dialog .h5p-media-copyright {
+  padding: 10px;
+  border-bottom: 1px solid #ddd;
+}
+
+/* Thumbnail styles */
+.h5p-copyrights-dialog .h5p-thumbnail-wrapper {
+  width: 75px;
+  margin-left: 10px;
+  display: inline-block;
+  position: relative;
+  vertical-align: text-top;
+}
+
+.h5p-copyrights-dialog .h5p-thumbnail-wrapper .h5p-thumbnail {
+  max-height: 57px;
+  max-width: 75px;
+}
+
+/* Media specific icons */
+.h5p-copyrights-dialog .h5p-media-copyright .h5p-thumbnail-wrapper:before {
+  font-family: "H5PFontAwesome4";
+  position: absolute;
+  font-size: 1.5em;
+  top: 7px;
+  width: 100%;
+  text-align: center;
+  color: #ccc;
+}
+
+.h5p-copyrights-dialog .h5p-media-copyright.video .h5p-thumbnail-wrapper:before {
+  content: "\f1c8";
+}
+
+.h5p-copyrights-dialog .h5p-media-copyright.audio .h5p-thumbnail-wrapper:before {
+  content: "\f1c7";
+}
+
+.h5p-copyrights-dialog .h5p-media-copyright.file .h5p-thumbnail-wrapper:before {
+  content: "\f016";
+}
+
+/* Copyrights entry styles */
+.h5p-copyrights-dialog .h5p-copyright-entry .h5p-copyright-title {
+  font-size: 14px;
+  font-weight: bold;
+}
+
+.h5p-copyrights-dialog .h5p-copyright-entry .h5p-copyright-label {
+  color: #999;
+  margin-right: 0.2em;
+}
+
+/* Copyrights expand button */
+.h5p-copyrights-dialog .h5p-copyright-information-wrapper .h5p-copyrights-expand-button {
+  display: inline-block;
+  cursor: pointer;
+  margin-top: 0.75em;
+}
+
+.h5p-copyrights-dialog .h5p-copyright-information-wrapper .h5p-copyrights-expand-button:before {
+  font-family: "H5PFontAwesome4";
+  font-size: 0.85em;
+  content: "\f067";
+  margin-right: 0.25em;
+}
+
+.h5p-copyrights-dialog .h5p-copyright-information-wrapper.expand .h5p-copyrights-expand-button:before {
+  content: "\f068";
+}
+
+/* Copyright preview */
+.h5p-copyrights-dialog .h5p-copyright-preview .h5p-copyright-entry {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.h5p-copyrights-dialog .h5p-copyright-information-wrapper.expand .h5p-copyright-preview .h5p-copyright-entry {
+  overflow: visible;
+  text-overflow: clip;
+  white-space: normal;
+}
+
+/* Copyright details */
+.h5p-copyrights-dialog .h5p-copyright-information-wrapper .h5p-copyright-details {
+  display: none;
+}
+
+.h5p-copyrights-dialog .h5p-copyright-information-wrapper.expand .h5p-copyright-details {
+  display: block;
+  margin-top: 0.75em;
+}
+
+.h5p-copyrights-dialog .h5p-copyright-entry .h5p-copyright-details .h5p-copyright-label:after {
+  content: ":";
+}