Merge pull request #1677 from crazyserver/MOBILE-2577-2

MOBILE-2577 quiz: Text wrap drag items

src/addon/qtype/ddwtos/classes/ddwtos.ts

@@ -14,6 +14,7 @@
 
 import { CoreLoggerProvider } from '@providers/logger';
 import { CoreDomUtilsProvider } from '@providers/utils/dom';
+import { CoreTextUtilsProvider } from '@providers/utils/text';
 
 /**
  * Set of functions to get the CSS selectors.
@@ -59,7 +60,8 @@ export class AddonQtypeDdwtosQuestion {
      * @param {string[]} inputIds Ids of the inputs of the question (where the answers will be stored).
      */
     constructor(logger: CoreLoggerProvider, protected domUtils: CoreDomUtilsProvider, protected container: HTMLElement,
-            protected question: any, protected readOnly: boolean, protected inputIds: string[]) {
+            protected question: any, protected readOnly: boolean, protected inputIds: string[],
+            protected textUtils: CoreTextUtilsProvider) {
         this.logger = logger.getInstance('AddonQtypeDdwtosQuestion');
 
         this.initializer(question);
@@ -406,7 +408,7 @@ export class AddonQtypeDdwtosQuestion {
     protected padToWidthHeight(node: HTMLElement, width: number, height: number): void {
         node.style.width = width + 'px';
         node.style.height = height + 'px';
-        node.style.lineHeight = height + 'px';
+        // Originally lineHeight was set as height to center the text but it comes on too height lines on multiline elements.
     }
 
     /**
@@ -528,6 +530,7 @@ export class AddonQtypeDdwtosQuestion {
 
             // Find max height and width.
             groupItems.forEach((item) => {
+                item.innerHTML = this.textUtils.decodeHTML(item.innerHTML);
                 maxWidth = Math.max(maxWidth, Math.ceil(item.offsetWidth));
                 maxHeight = Math.max(maxHeight, Math.ceil(item.offsetHeight));
             });

src/addon/qtype/ddwtos/component/ddwtos.scss

@@ -7,6 +7,7 @@ addon-qtype-ddwtos {
 
     .draghome {
         margin-bottom: 1em;
+        max-width: calc(100%);
     }
 
     .answertext {
@@ -25,6 +26,9 @@ addon-qtype-ddwtos {
         text-align: center;
         background: transparent;
         border: 0;
+        white-space: normal;
+        overflow: visible;
+        word-wrap: break-word;
     }
     .draghome, .drag.unplaced{
         border: 1px solid $gray-darker;
@@ -106,3 +110,15 @@ addon-qtype-ddwtos {
         bottom: -0.2em;
     }
 }
+
+addon-qtype-ddwtos .item-md .draghome {
+    max-width: calc(100% - #{($item-md-padding-start)});
+}
+
+addon-qtype-ddwtos .item-ios .draghome {
+    max-width: calc(100% - #{($item-ios-padding-start)});
+}
+
+addon-qtype-ddwtos .item-wp .draghome {
+    max-width: calc(100% - #{($item-wp-padding-start)});
+}

src/addon/qtype/ddwtos/component/ddwtos.ts

@@ -93,7 +93,7 @@ export class AddonQtypeDdwtosComponent extends CoreQuestionBaseComponent impleme
             this.domUtils.waitForImages(this.questionTextEl.nativeElement).then(() => {
                 // Create the instance.
                 this.questionInstance = new AddonQtypeDdwtosQuestion(this.loggerProvider, this.domUtils, this.element,
-                        this.question, this.question.readOnly, this.inputIds);
+                        this.question, this.question.readOnly, this.inputIds, this.textUtils);
 
                 this.questionHelper.treatCorrectnessIconsClicks(this.element, this.component, this.componentId);