Feature/aut 2939

model/sharedStimulus/parser/JsonQtiAttributeParser.php

@@ -43,6 +43,7 @@ public function parse(SharedStimulus $sharedStimulus): array
         $xinclude = $this->createXInclude($document);
         $this->addLanguageAttribute($document, $xinclude);
         $this->addClassAttribute($document, $xinclude);
+        $this->addDirAttribute($document, $xinclude);
 
         return $xinclude->toArray();
     }
@@ -111,4 +112,22 @@ private function addClassAttribute(DOMDocument $document, XInclude $xinclude): v
             );
         }
     }
+
+    /**
+     * @throws QtiModelException
+     */
+    private function addDirAttribute(DOMDocument $document, XInclude $xinclude): void
+    {
+        $rootNode = $document->firstChild;
+        if ($rootNode) {
+            $dirAttribute = trim($rootNode->getAttribute('dir'));
+
+            if ($dirAttribute) {
+                $xinclude->setAttribute(
+                    'dir',
+                    $dirAttribute
+                );
+            }
+        }
+    }
 }

views/js/qtiCreator/helper/createDummyItemData.js

@@ -50,6 +50,9 @@ define([
         if (sharedStimulusData.body.attributes.class) {
             itemData.attributes.class = sharedStimulusData.body.attributes.class;
         }
+        if (sharedStimulusData.body.attributes.dir) {
+            itemData.attributes.dir = sharedStimulusData.body.attributes.dir;
+        }
 
         return itemData;
     };

views/js/qtiCreator/helper/sharedStimulusLoader.js

@@ -23,8 +23,9 @@ define([
     'taoMediaManager/qtiCreator/helper/createDummyItemData',
     'core/dataProvider/request',
     'util/url',
-    'taoMediaManager/qtiCreator/helper/formatStyles'
-], function ($, Loader, qtiClasses, creatorDummyItemData, request, urlUtil, formatStyles ) {
+    'taoMediaManager/qtiCreator/helper/formatStyles',
+    'taoQtiItem/qtiCreator/helper/languages'
+], function ($, Loader, qtiClasses, creatorDummyItemData, request, urlUtil, formatStyles, languages) {
     'use strict';
 
     const qtiNamespace = 'http://www.imsglobal.org/xsd/imsqti_v2p2';
@@ -33,13 +34,11 @@ define([
         'http://www.imsglobal.org/xsd/imsqti_v2p2' : 'http://www.imsglobal.org/xsd/qti/qtiv2p2/imsqti_v2p2.xsd'
     };
 
-    const languagesUrl = urlUtil.route('index', 'Languages', 'tao');
-
     const creatorLoader = {
         loadSharedStimulus(config, callback) {
 
             if (config.id) {
-                const languagesList = request(languagesUrl);
+                const languagesList = languages.getList();
                 const assetData = request(config.assetDataUrl, { id: config.id });
                 const assetStyles = request(config.assetDataStyles, { uri: config.id });
                 Promise.all([languagesList, assetData, assetStyles]).then((values) => {

views/js/qtiCreator/tpl/forms/item.tpl

@@ -9,7 +9,7 @@
         </span>
         <select name="xml:lang" class="select2" data-has-search="false">
             {{#each languagesList}}
-                <option value="{{@key}}"{{#equal @key ../xml:lang}} selected="selected"{{/equal}}>{{this}}</option>
+                <option value="{{code}}"{{#equal code ../xml:lang}} selected="selected"{{/equal}} class="{{orientation}}-lang">{{label}}</option>
             {{/each}}
         </select>
     </div>

views/js/qtiCreator/widgets/item/Widget.js

@@ -162,6 +162,10 @@ define([
             const element = widget.element;
             const container = Element.isA(element, '_container') ? element : element.getBody();
 
+            if (element.attr('dir') === 'rtl') {
+                $placeholder.attr('dir', 'rtl');
+            }
+
             if (!element || !$editable.length) {
                 throw new Error('cannot create new element');
             }

views/js/qtiCreator/widgets/item/states/Active.js

@@ -19,18 +19,21 @@
 
 define([
     'lodash',
+    'taoQtiItem/qtiCreator/helper/languages',
     'taoQtiItem/qtiCreator/widgets/states/factory',
     'taoMediaManager/qtiCreator/widgets/states/Active',
     'tpl!taoMediaManager/qtiCreator/tpl/forms/item',
-    'taoQtiItem/qtiCreator/widgets/helpers/formElement'
-], function(_, stateFactory, Active, formTpl, formElement){
+    'taoQtiItem/qtiCreator/widgets/helpers/formElement',
+    'taoQtiItem/qtiCreator/editor/gridEditor/content',
+    'select2'
+], function(_, languages, stateFactory, Active, formTpl, formElement, contentHelper){
     'use strict';
 
     const ItemStateActive = stateFactory.create(Active, function enterActiveState() {
         const _widget = this.widget;
         const item = _widget.element;
         const $form = _widget.$form;
-
+        const $itemBody = _widget.$container.find('.qti-itemBody');
         //build form:
         $form.html(formTpl({
             'xml:lang' : item.attr('xml:lang'),
@@ -42,9 +45,39 @@ define([
 
         //init data validation and binding
         formElement.setChangeCallbacks($form, item, {
-            'xml:lang' : formElement.getAttributeChangeCallback()
+            'xml:lang' : function langChange(i, lang){
+                item.attr('xml:lang', lang);
+                languages
+                    .isRTLbyLanguageCode(lang)
+                    .then((isRTL) => {
+                        if (isRTL) {
+                            item.bdy.attr('dir', 'rtl');
+                            $itemBody.attr('dir', 'rtl');
+                        } else {
+                            delete item.attributes.dir;
+                            item.bdy.removeAttr('dir');
+                            $itemBody.removeAttr('dir');
+                        }
+
+                        $itemBody.trigger('item-dir-changed');
+                    }
+                );
+            }
         });
 
+        const $selectBox = $form.find('select');
+
+        $selectBox.select2({
+            dropdownAutoWidth: true,
+            width: 'resolve',
+            minimumResultsForSearch: -1,
+            formatSelection: data => {
+                if (data.css) {
+                    return `<span class="${data.css}">${data.text}</span>`;
+                }
+                return data.text;
+            }
+        });
     }, _.noop);
 
     return ItemStateActive;

views/js/qtiXmlRenderer/renderers/Item.js

@@ -26,6 +26,7 @@ define(['lodash', 'tpl!taoMediaManager/qtiXmlRenderer/tpl/item'], function(_, tp
         getData : function getData(item, data){
             const defaultData = {
                 'class' : data.attributes.class || '',
+                dir : item.bdy.attributes.dir || '',
                 namespaces : item.getNamespaces(),
                 schemaLocations : '',
                 xsi: 'xsi:',//the standard namespace prefix for xml schema

views/js/qtiXmlRenderer/tpl/item.tpl

@@ -1,7 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <div
     {{#each namespaces}}{{#if @key}}xmlns:{{@key}}="{{.}}"{{else}}xmlns="{{.}}"{{/if}} {{/each}}
-    {{#if attributes}}{{{join attributes '=' ' ' '"'}}}{{/if}}>
+    {{#if attributes}}{{{join attributes '=' ' ' '"'}}}{{/if}}
+    {{#if dir}} dir="{{dir}}"{{/if}}
+>
     {{#if empty}}
         <div class="empty"></div>
     {{else}}

views/scss/media.scss

@@ -150,3 +150,33 @@
 div.item-editor-item {
     border-color: transparent;
 }
+
+.select2-result.rtl-lang {
+    position: relative;
+}
+.select2-chosen .rtl-lang,
+.select2-result.rtl-lang span.select2-match {
+    &:after {
+        content: 'RTL';
+        display: block;
+        color: $grey;
+        border: $grey 1px solid;
+        border-radius: 2px;
+        position: absolute;
+        right: 20px;
+        font-size: 10px;
+        top: 6px;
+        line-height: 12px;
+        padding: 0 4px;
+    }
+}
+.select2-result.rtl-lang {
+    &.select2-highlighted {
+        span.select2-match {
+            &:after {
+                color: #fff;
+                border-color: #fff;
+            }
+        }
+    }
+}