EDUCATIC
/
h5p-php-library
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

UX improvements to embed code system

d6
Svein-Tore Griff With 2015-03-02 15:01:05 +01:00
parent 8e53f62679
commit 553ae243d2
2 changed files with 16 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
js/h5p.js
View File

@ -198,9 +198,10 @@ H5P.init = function () {
H5P.trigger(instance, 'resize'); H5P.trigger(instance, 'resize');
} }
}); });
H5P.instances.push(instance);
} }
H5P.instances.push(instance);
// Resize content. // Resize content.
H5P.trigger(instance, 'resize'); H5P.trigger(instance, 'resize');
}); });
@ -758,6 +759,7 @@ H5P.findCopyrights = function (info, parameters, contentId) {
* @returns {undefined} * @returns {undefined}
*/ */
H5P.openEmbedDialog = function ($element, embedCode, resizeCode, size) { H5P.openEmbedDialog = function ($element, embedCode, resizeCode, size) {
var fullEmbedCode = embedCode + resizeCode;
var dialog = new H5P.Dialog('embed', H5P.t('embed'), '<textarea class="h5p-embed-code-container" autocorrect="off" autocapitalize="off" spellcheck="false"></textarea>' + H5P.t('size') + ': <input type="text" value="' + size.width + '" class="h5p-embed-size"/> × <input type="text" value="' + size.height + '" class="h5p-embed-size"/> px<div role="button" tabindex="0" class="h5p-expander">' + H5P.t('showAdvanced') + '</div><div class="h5p-expander-content"><p>' + H5P.t('advancedHelp') + '</p><textarea class="h5p-embed-code-container" autocorrect="off" autocapitalize="off" spellcheck="false">' + resizeCode + '</textarea></div>', $element); var dialog = new H5P.Dialog('embed', H5P.t('embed'), '<textarea class="h5p-embed-code-container" autocorrect="off" autocapitalize="off" spellcheck="false"></textarea>' + H5P.t('size') + ': <input type="text" value="' + size.width + '" class="h5p-embed-size"/> × <input type="text" value="' + size.height + '" class="h5p-embed-size"/> px<div role="button" tabindex="0" class="h5p-expander">' + H5P.t('showAdvanced') + '</div><div class="h5p-expander-content"><p>' + H5P.t('advancedHelp') + '</p><textarea class="h5p-embed-code-container" autocorrect="off" autocapitalize="off" spellcheck="false">' + resizeCode + '</textarea></div>', $element);
// Selecting embed code when dialog is opened // Selecting embed code when dialog is opened
@ -788,31 +790,21 @@ H5P.openEmbedDialog = function ($element, embedCode, resizeCode, size) {
return Math.ceil(num); return Math.ceil(num);
}; };
var updateEmbed = function () { var updateEmbed = function () {
$dialog.find('.h5p-embed-code-container:first').val(embedCode.replace(':w', getNum($w, size.width)).replace(':h', getNum($h, size.height))); $dialog.find('.h5p-embed-code-container:first').val(fullEmbedCode.replace(':w', getNum($w, size.width)).replace(':h', getNum($h, size.height)));
}; };
var w = size.width; $w.change(updateEmbed);
$w.change(function () {
// Keep aspect ratio when changing width
var newW = getNum($w, size.width);
$h.val(Math.ceil(newW * (getNum($h, size.height) / w)));
w = newW;
updateEmbed();
});
$h.change(updateEmbed); $h.change(updateEmbed);
updateEmbed(); updateEmbed();
// Select text and expand textareas // Select text and expand textareas
$dialog.find('.h5p-embed-code-container').focus(function () { $dialog.find('.h5p-embed-code-container').each(function(index, value) {
H5P.jQuery(this).select().css('height', this.scrollHeight + 'px'); H5P.jQuery(this).css('height', this.scrollHeight + 'px').focus(function() {
H5P.jQuery(this).select();
});
});
$dialog.find('.h5p-embed-code-container').eq(0).select();
positionInner(); positionInner();
}).blur(function () {
var $area = H5P.jQuery(this);
setTimeout(function () {
$area.css('height', '');
positionInner();
}, 100);
}).select();
// Expand advanced embed // Expand advanced embed
var expand = function () { var expand = function () {
@ -826,6 +818,9 @@ H5P.openEmbedDialog = function ($element, embedCode, resizeCode, size) {
$expander.addClass('h5p-open').text(H5P.t('hideAdvanced')); $expander.addClass('h5p-open').text(H5P.t('hideAdvanced'));
$content.show(); $content.show();
} }
$dialog.find('.h5p-embed-code-container').each(function(index, value) {
H5P.jQuery(this).css('height', this.scrollHeight + 'px');
});
positionInner(); positionInner();
}; };
$dialog.find('.h5p-expander').click(expand).keypress(function (event) { $dialog.find('.h5p-expander').click(expand).keypress(function (event) {

2
styles/h5p.css
View File

@ -350,7 +350,7 @@ div.h5p-fullscreen {
margin: 0; margin: 0;
} }
.h5p-expander { .h5p-expander {
cursor: default; cursor: pointer;
font-size: 1.125em; font-size: 1.125em;
outline: none; outline: none;
margin: 0.5em 0 0; margin: 0.5em 0 0;