Commit 533ed865 authored by otacke's avatar otacke

Add button variant stub

parent dfc3db41
......@@ -42,17 +42,14 @@ ns.Form = function () {
this.$form.find('.h5peditor-text').attr('id', 'metadata-title-main');
// Add the metadata button
const metadataButton = ns.$('' +
'<div class="h5p-metadata-button-wrapper">' +
'<div class="h5p-metadata-button-tip"></div>' +
'<div class="toggle-metadata">' + ns.t('core', 'metadata') + '</div>' +
'</div>');
this.$form.find('.h5p-editor-flex-wrapper').append(metadataButton);
this.$form.find('.toggle-metadata').click(function () {
self.$form.find('.h5p-metadata-wrapper').first().toggleClass('h5p-open');
self.$form.find('.overlay').toggle();
});
// const metadataButton = ns.$('' +
// '<div class="h5p-metadata-button-wrapper">' +
// '<div class="h5p-metadata-button-tip"></div>' +
// '<div class="toggle-metadata">' + ns.t('core', 'metadata') + '</div>' +
// '</div>');
//this.$form.find('.h5p-editor-flex-wrapper').append(metadataButton);
// Add title expand/collapse button
ns.$('<div/>', {
......@@ -114,6 +111,7 @@ ns.Form.prototype.remove = function () {
* @returns {undefined}
*/
ns.Form.prototype.processSemantics = function (semantics, defaultParams, metadata) {
const that = this;
this.metadata = (metadata ? metadata : defaultParams.metadata || {});
const $metadataForm = ns.metadataForm(semantics, this.metadata, this.$form.children('.tree'), this);
......@@ -128,6 +126,17 @@ ns.Form.prototype.processSemantics = function (semantics, defaultParams, metadat
const title = (this.metadata && this.metadata.title) ? this.metadata.title : '';
this.$form.find('input#metadata-title-main').val(title);
const $metadataButton = ns.$('<button class="h5peditor-new-meta">' + ns.t('core', 'metadata') + '</button>');
const copyPasteWrapper = this.$form.siblings('label.h5peditor-copypaste-wrap');
//const copyPasteWrapper = this.$form.parent().find('.h5peditor-copypaste-wrap').first();
if (copyPasteWrapper.length > 0) {
copyPasteWrapper.prepend($metadataButton);
}
$metadataButton.click(function () {
that.$form.find('.h5p-metadata-wrapper').first().toggleClass('h5p-open');
that.$form.find('.overlay').toggle();
});
// Overriding this.params with {} will lead to old content not being editable for now
this.params = (defaultParams.params ? defaultParams.params : defaultParams);
ns.processSemanticsChunk(semantics, this.params, this.$form.children('.tree'), this);
......
......@@ -355,28 +355,42 @@ ns.Library.prototype.addMetadataForm = function (semantics) {
that.$libraryWrapper.before(that.$metadataWrapper);
}
// TODO: Changing the metadata button position is a suggestion that would
// IMHO make the interface cleaner and simplify the code.
// If accepted, we can remove the label wrapper styles again, too.
//Prevent multiple buttons when changing libraries
if (that.$libraryWrapper.closest('.content').find('.h5p-metadata-button-wrapper').length === 0) {
that.$metadataButton = H5PEditor.$('' +
'<div class="h5p-metadata-button-wrapper">' +
'<div class="h5p-metadata-button-tip"></div>' +
'<div class="toggle-metadata">' + ns.t('core', 'metadata') + '</div>' +
'</div>');
// Put the metadataButton after the first visible label if it has a label
var $labelWrapper = that.$libraryWrapper.siblings('.h5p-editor-flex-wrapper').children('.h5peditor-label-wrapper');
if ($labelWrapper.length && !$labelWrapper.is(':empty')) {
var label = that.$libraryWrapper.closest('.content').find('.h5p-editor-flex-wrapper').first();
if (label.css('display') === 'none') {
label = that.$libraryWrapper.find('.h5p-editor-flex-wrapper').first();
}
label.append(that.$metadataButton);
// that.$metadataButton = H5PEditor.$('' +
// '<div class="h5p-metadata-button-wrapper">' +
// '<div class="h5p-metadata-button-tip"></div>' +
// '<div class="toggle-metadata">' + ns.t('core', 'metadata') + '</div>' +
// '</div>');
that.$metadataButton = H5PEditor.$('<button class="h5peditor-new-meta">' + ns.t('core', 'metadata') + '</button>');
const copyPasteWrapper = that.$libraryWrapper.siblings().closest('.h5peditor-copypaste-wrap');
if (copyPasteWrapper.length > 0 && copyPasteWrapper.css('display') !== 'none') {
copyPasteWrapper.prepend(that.$metadataButton);
}
else {
var $librarySelector = that.$libraryWrapper.siblings('select');
that.$metadataButton.addClass('inline-with-selector');
$librarySelector.after(that.$metadataButton);
// TODO: This should not be hardcoded (!)
// Put metadataButton in prepared field in custom editor
}
// Put the metadataButton after the first visible label if it has a label
// var $labelWrapper = that.$libraryWrapper.parent().find('.h5peditor-label-wrapper');
// // var $labelWrapper = that.$libraryWrapper.siblings('.h5p-editor-flex-wrapper').children('.h5peditor-label-wrapper');
// if ($labelWrapper.length && !$labelWrapper.is(':empty')) {
// var label = that.$libraryWrapper.closest('.content').find('.h5p-editor-flex-wrapper').first();
// if (label.css('display') === 'none') {
// label = that.$libraryWrapper.find('.h5p-editor-flex-wrapper').first();
// }
// label.append(that.$metadataButton);
// }
// else {
// var $librarySelector = that.$libraryWrapper.siblings('select');
// that.$metadataButton.addClass('inline-with-selector');
// $librarySelector.after(that.$metadataButton);
// }
// Add click listener
......
......@@ -1605,9 +1605,12 @@ a {
}
.h5peditor-copypaste-wrap {
display: flex;
flex-direction: row;
float: right;
}
.h5peditor-new-meta,
.h5peditor-copy-button,
.h5peditor-paste-button {
border: 1px solid #cdcdcd;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment