From 5741cf72c5ee874199b8d2bde80540b637d33f16 Mon Sep 17 00:00:00 2001 From: Thomas Marstrander Date: Fri, 26 Jun 2015 09:46:18 +0200 Subject: [PATCH] Redesign for copyrights box. --- js/h5p.js | 157 ++++++++++++++++++++++++++++++++++++++++++------- styles/h5p.css | 145 +++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 275 insertions(+), 27 deletions(-) diff --git a/js/h5p.js b/js/h5p.js index 9bf7c21..5314adc 100644 --- a/js/h5p.js +++ b/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('
  • ' + H5P.t('copyrights') + '
    • ').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 (label !== undefined) { - html = '

    ' + label + '

    ' + html; + if (hasSubLevel) { + label = (label && label.length ? label : H5P.t('subLevel')); + html = '
    ' + label + '
    ' + html; } // Add wrapper - html = '
    ' + html + '
    '; + html = '
    ' + html + '
    '; } 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 = '
    ' + html + '
    '; + html = '
    ' + html + '
    '; } 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; - if (width !== undefined) { - thumbWidth = Math.round(thumbHeight * (width / height)); - } + // Deprecated width and height + var imageSource = source; + + /** + * 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 '' + H5P.t('thumbnail') + ''; + var html = '
    '; + if (source !== undefined) { + html += '' + H5P.t('thumbnail') + ''; + } + html += '
    '; + + 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 += '
    ' + field.getLabel() + '
    ' + field.getValue() + '
    '; + var entry = '
    '; + if (field.getLabel() === 'Title') { + entry += '' + field.getValue() + '
    '; + previewHTML += entry; + } else if (field.getLabel() === 'Author') { + entry += '' + H5P.t('by') + ' ' + + '' + field.getValue() + ''; + previewHTML += entry; + } else { + entry += '' + field.getLabel() + ''; + + // Make urls clickable + if (field.getLabel() === 'Source') { + var urlValidator = /^(https?|ftp):\/\/[^\s/$.?#].[^\s]*$/i; + if (urlValidator.test(field.getValue())) { + entry += '' + + '' + field.getValue() + '' + + ''; + } + } else { + entry += '' + field.getValue() + ''; + } + detailsHTML += entry; + + } } - return (html === '' ? html : '
    ' + html + '
    '); + + // Generate copyright preview part + var html = '
    ' + previewHTML + '
    '; + + // Generate copyright details part + html += '
    ' + detailsHTML + '
    '; + + // Add expand/collapse button + html += '
    ' + H5P.t('showMore') + '
    '; + + return '
    ' + html + '
    '; }; }; diff --git a/styles/h5p.css b/styles/h5p.css index c5e73bf..661ca3a 100644 --- a/styles/h5p.css +++ b/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: ":"; +}