Redesign for copyrights box.
Thomas Marstrander
parent
1764e80511
commit
5741cf72c5
157
js/h5p.js
157
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 (label !== undefined) {
|
||||
html = '<h3>' + label + '</h3>' + html;
|
||||
if (hasSubLevel) {
|
||||
label = (label && label.length ? label : H5P.t('subLevel'));
|
||||
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;
|
||||
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 '<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>';
|
||||
};
|
||||
};
|
||||
|
||||
|
|
|
|||
145
styles/h5p.css
145
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: ":";
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue