diff --git a/scss/inc/_feedback.scss b/scss/inc/_feedback.scss index 3ef7f805..a521c78a 100644 --- a/scss/inc/_feedback.scss +++ b/scss/inc/_feedback.scss @@ -148,3 +148,7 @@ .bg-error { background-color: $errorBgColor; } + +textarea + .feedback-info { + padding: 5px; +} diff --git a/src/figure/FigureStateActive.js b/src/figure/FigureStateActive.js index 58f658e4..46415494 100644 --- a/src/figure/FigureStateActive.js +++ b/src/figure/FigureStateActive.js @@ -97,12 +97,14 @@ const formCallbacks = ({ widget, formElement, mediaEditor, togglePlaceholder }) const initForm = ({ widget, formElement, formTpl, mediaEditor, togglePlaceholder }) => { const imageElem = getImageElement(widget); const figcaptionElem = getCaptionElement(widget); + const showFigure = widget.element.attr('showFigure'); widget.$form.html( formTpl({ baseUrl: widget.options.baseUrl || '', src: imageElem.attr('src'), alt: imageElem.attr('alt'), - figcaption: figcaptionElem ? figcaptionElem.body() : '' + figcaption: figcaptionElem ? figcaptionElem.body() : '', + showFigure: showFigure }) ); @@ -125,7 +127,15 @@ const initForm = ({ widget, formElement, formTpl, mediaEditor, togglePlaceholder ); }; -export default function (stateFactory, ActiveState, formTpl, formElement, inlineHelper) { +/** + * @param {Object} stateFactory + * @param {Object} ActiveState + * @param {Object} formTpl + * @param {Object} formElement + * @param {Object} inlineHelper + * @returns + */ +export default function ({ stateFactory, ActiveState, formTpl, formElement, inlineHelper }) { /** * media Editor instance if has been initialized * @type {null} @@ -134,7 +144,7 @@ export default function (stateFactory, ActiveState, formTpl, formElement, inline let textareaObserver = null; let texareaHTMLElem = null; - const ImgStateActive = stateFactory.extend( + const FigureStateActive = stateFactory.extend( ActiveState, function () { this.initForm(); @@ -148,7 +158,7 @@ export default function (stateFactory, ActiveState, formTpl, formElement, inline } ); - ImgStateActive.prototype.initForm = function () { + FigureStateActive.prototype.initForm = function () { initForm({ widget: this.widget, formElement, @@ -170,5 +180,5 @@ export default function (stateFactory, ActiveState, formTpl, formElement, inline } }; - return ImgStateActive; + return FigureStateActive; } diff --git a/src/mediaEditor/plugins/mediaAlignment/helper.js b/src/mediaEditor/plugins/mediaAlignment/helper.js index d7d104ac..3d7f6c80 100644 --- a/src/mediaEditor/plugins/mediaAlignment/helper.js +++ b/src/mediaEditor/plugins/mediaAlignment/helper.js @@ -15,10 +15,34 @@ * * Copyright (c) 2021-2022 (original work) Open Assessment Technologies SA; */ +import _ from 'lodash'; export const FLOAT_LEFT_CLASS = 'wrap-left'; export const FLOAT_RIGHT_CLASS = 'wrap-right'; +const searchRecurse = (parentElement, serial) => { + if (!parentElement) { + return null; + } + if (parentElement.serial === serial) { + return parentElement; + } + let found = null; + _.some(parentElement['elements'], childElement => { + if (childElement.serial === serial) { + found = parentElement; + } else if (childElement['elements']) { + found = searchRecurse(childElement, serial); + } else if (childElement['prompt']) { + found = searchRecurse(childElement.prompt.bdy, serial); + } + if (found) { + return true; + } + }); + return found; +}; + export const positionFloat = function positionFloat(widget, position) { if (!position) { return; @@ -43,12 +67,36 @@ export const positionFloat = function positionFloat(widget, position) { // Update DOM widget.$container.addClass(className); // Update model + const prevClassName = widget.element.attr('class') || ''; if (className) { widget.element.attr('class', className); } else { widget.element.removeAttr('class'); } + if (prevClassName !== className) { + // Re-build Figure widget to toggle between inline/block + const parent = searchRecurse(widget.element.bdy.rootElement.bdy, widget.serial); + // avoid changes on Figure in a prompt + if (parent.contentModel && parent.contentModel === 'inlineStatic') { + _.defer(() => { + widget.element.data('widget').refresh(); + }); + return; + } + widget.element.data('widget').changeState('sleep'); + _.defer(() => { + if (parent && parent.data('widget')) { + parent.data('widget').changeState('active'); + _.defer(() => { + parent.data('widget').changeState('sleep'); + _.defer(() => { + widget.element.data('widget').changeState('active'); + }); + }); + } + }); + } widget.$original.trigger('contentChange.qti-widget'); };