Feature/ADF-1784/Side by side authoring

controller/QtiCreator.php

@@ -291,6 +291,10 @@ protected function getCreatorConfig(core_kernel_classes_Resource $item)
         $lang = \common_session_SessionManager::getSession()->getDataLanguage();
         $config->setProperty('lang', $lang);
 
+        // Add support for translation and side-by-side view
+        $config->setProperty('translation', $this->getRequestParameter('translation'));
+        $config->setProperty('originResourceUri', $this->getRequestParameter('originResourceUri'));
+
         //base url:
         $url = tao_helpers_Uri::url('getFile', 'QtiCreator', 'taoQtiItem', [
             'uri' => $item->getUri(),

views/js/controller/creator/index.js

@@ -13,11 +13,10 @@
  * along with this program; if not, write to the Free Software
  * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  *
- * Copyright (c) 2016-2019 (original work) Open Assessment Technologies SA ;
+ * Copyright (c) 2016-2024 (original work) Open Assessment Technologies SA ;
  *
  */
 
-
 /**
  * creator/index controller
  *
@@ -28,44 +27,65 @@ define([
     'lodash',
     'module',
     'core/logger',
-    'core/promise',
     'ui/feedback',
     'layout/loading-bar',
     'taoQtiItem/qtiCreator/itemCreator',
     'taoQtiItem/qtiCreator/editor/areaBroker',
-    'taoQtiItem/qtiCreator/plugins/loader'
-], function($, _, module, loggerFactory, Promise, feedback, loadingBar, itemCreatorFactory, areaBrokerFactory, pluginLoader){
+    'taoQtiItem/qtiCreator/plugins/loader',
+    'tpl!taoQtiItem/qtiCreator/tpl/layout/interactionsPanel',
+    'tpl!taoQtiItem/qtiCreator/tpl/layout/itemPanel',
+    'tpl!taoQtiItem/qtiCreator/tpl/layout/propertiesPanel'
+], function (
+    $,
+    _,
+    module,
+    loggerFactory,
+    feedback,
+    loadingBar,
+    itemCreatorFactory,
+    areaBrokerFactory,
+    pluginLoader,
+    interactionsPanelTpl,
+    itemPanelTpl,
+    propertiesPanelTpl
+) {
     'use strict';
 
     /**
      * Set up the areaBroker mapping from the actual DOM
      * @returns {areaBroker} already mapped
      */
-    const loadAreaBroker = function loadAreaBroker(){
+    function loadAreaBroker(config) {
         const $container = $('#item-editor-scope');
+        const $wrapper = $('#item-editor-wrapper', $container);
+        const panels = [itemPanelTpl, propertiesPanelTpl];
+        if (!config || !config.properties || !config.properties.translation) {
+            panels.unshift(interactionsPanelTpl);
+        }
+        panels.forEach(panel => $wrapper.append(panel()));
         return areaBrokerFactory($container, {
-            'menu':                 $('.menu', $container),
-            'menuLeft':             $('.menu-left', $container),
-            'menuRight':            $('.menu-right', $container),
-            'contentCreatorPanel':  $('#item-editor-panel', $container),
-            'editorBar':            $('#item-editor-panel .item-editor-bar', $container),
-            'title':                $('#item-editor-panel .item-editor-bar h1', $container),
-            'toolbar':              $('#item-editor-panel .item-editor-bar #toolbar-top', $container),
-            'interactionPanel':     $('#item-editor-interaction-bar', $container),
-            'propertyPanel':        $('#item-editor-item-widget-bar', $container),
-            'itemPanel':            $('#item-editor-scroll-inner', $container),
-            'itemPropertyPanel':    $('#sidebar-right-item-properties', $container),
-            'itemStylePanel':       $('#item-style-editor-bar', $container),
-            'modalContainer':       $('#modal-container', $container),
-            'elementPropertyPanel': $('#item-editor-body-element-property-bar .panel', $container)
+            menu: $('.menu', $container),
+            menuLeft: $('.menu-left', $container),
+            menuRight: $('.menu-right', $container),
+            contentCreatorPanel: $('#item-editor-panel', $container),
+            editorBar: $('#item-editor-panel .item-editor-bar', $container),
+            editorWrapper: $('#item-editor-wrapper', $container),
+            title: $('#item-editor-panel .item-editor-bar h1', $container),
+            toolbar: $('#item-editor-panel .item-editor-bar #toolbar-top', $container),
+            interactionPanel: $('#item-editor-interaction-bar', $container),
+            propertyPanel: $('#item-editor-item-widget-bar', $container),
+            itemPanel: $('#item-editor-scroll-inner', $container),
+            itemPropertyPanel: $('#sidebar-right-item-properties', $container),
+            itemStylePanel: $('#item-style-editor-bar', $container),
+            modalContainer: $('#modal-container', $container),
+            elementPropertyPanel: $('#item-editor-body-element-property-bar .panel', $container)
         });
-    };
+    }
 
     /**
      * The creator's controller
      */
     const indexController = {
-
         /**
          * The entrypoint
          */
@@ -78,34 +98,36 @@ define([
              * Report errors
              * @param {Error} err - the error to report
              */
-            const reportError = function reportError(err){
+            function reportError(err) {
                 loadingBar.stop();
 
                 logger.error(err);
 
-                if(err instanceof Error){
+                if (err instanceof Error) {
                     feedback().error(err.message);
                 }
-            };
+            }
 
             loadingBar.start();
 
             //load plugins dynamically
             if (config) {
-                if(config.plugins){
-                    config.properties.allowCustomTemplate = config.plugins.some(({ name }) => name === 'xmlResponseProcessing');
+                if (config.plugins) {
+                    config.properties.allowCustomTemplate = config.plugins.some(
+                        ({ name }) => name === 'xmlResponseProcessing'
+                    );
 
                     _.forEach(config.plugins, plugin => {
-                        if(plugin && plugin.module){
+                        if (plugin && plugin.module) {
                             pluginLoader.add(plugin);
                         }
                     });
                 }
-                
-                if(config.contextPlugins){
+
+                if (config.contextPlugins) {
                     _.forEach(config.contextPlugins, plugin => {
-                        if(plugin && plugin.module){
-                            if(plugin.exclude){
+                        if (plugin && plugin.module) {
+                            if (plugin.exclude) {
                                 pluginLoader.remove(plugin.module);
                             } else {
                                 pluginLoader.add(plugin);
@@ -116,22 +138,22 @@ define([
             }
 
             //load the plugins
-            pluginLoader.load().then(function(){
-
-                //build a new item creator
-                itemCreatorFactory(config, loadAreaBroker(), pluginLoader.getPlugins())
-                    .on('error', reportError)
-                    .on('success', message => feedback().success(message) )
-                    .on('init', function(){
-                        this.render();
-                    })
-                    .on('ready', () => loadingBar.stop() )
-                    .init();
-            })
-            .catch(reportError);
+            pluginLoader
+                .load()
+                .then(() => {
+                    //build a new item creator
+                    itemCreatorFactory(config, loadAreaBroker(config), pluginLoader.getPlugins())
+                        .on('error', reportError)
+                        .on('success', message => feedback().success(message))
+                        .on('init', function onInit() {
+                            this.render();
+                        })
+                        .on('ready', () => loadingBar.stop())
+                        .init();
+                })
+                .catch(reportError);
         }
     };
 
     return indexController;
 });
-

views/js/qtiCreator/component/itemAuthoring.js

@@ -13,7 +13,7 @@
  * along with this program; if not, write to the Free Software
  * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  *
- * Copyright (c) 2019 Open Assessment Technologies SA ;
+ * Copyright (c) 2019-2024 Open Assessment Technologies SA ;
  */
 /**
  * @author Jean-Sébastien Conan <jean-sebastien@taotesting.com>
@@ -25,6 +25,9 @@ define([
     'taoQtiItem/qtiCreator/itemCreator',
     'taoQtiItem/qtiCreator/editor/areaBroker',
     'tpl!taoQtiItem/qtiCreator/component/tpl/itemAuthoring',
+    'tpl!taoQtiItem/qtiCreator/tpl/layout/interactionsPanel',
+    'tpl!taoQtiItem/qtiCreator/tpl/layout/itemPanel',
+    'tpl!taoQtiItem/qtiCreator/tpl/layout/propertiesPanel',
     'css!taoQtiItemCss/qti-runner.css',
     'css!taoQtiItemCss/themes/default.css',
     'css!taoQtiItemCss/item-creator.css'
@@ -34,7 +37,10 @@ define([
     pluginLoaderFactory,
     itemCreatorFactory,
     areaBrokerFactory,
-    componentTpl
+    componentTpl,
+    interactionsPanelTpl,
+    itemPanelTpl,
+    propertiesPanelTpl
 ) {
     'use strict';
 
@@ -110,29 +116,34 @@ define([
                 });
 
                 // load the plugins, then render the item creator
-                pluginLoader.load()
+                pluginLoader
+                    .load()
                     .then(() => this.render(container))
                     .catch(err => this.trigger('error', err));
             })
 
             // renders the component
             .on('render', function () {
                 const $container = this.getElement();
+                const panels = [interactionsPanelTpl, itemPanelTpl, propertiesPanelTpl];
+                const $wrapper = $('#item-editor-wrapper', $container);
+                panels.forEach(panel => $wrapper.append(panel()));
                 areaBroker = areaBrokerFactory($container, {
-                    'menu': $container.find('.menu'),
-                    'menuLeft': $container.find('.menu-left'),
-                    'menuRight': $container.find('.menu-right'),
-                    'contentCreatorPanel': $container.find('#item-editor-panel'),
-                    'editorBar': $container.find('#item-editor-panel .item-editor-bar'),
-                    'title': $container.find('#item-editor-panel .item-editor-bar h1'),
-                    'toolbar': $container.find('#item-editor-panel .item-editor-bar #toolbar-top'),
-                    'interactionPanel': $container.find('#item-editor-interaction-bar'),
-                    'propertyPanel': $container.find('#item-editor-item-widget-bar'),
-                    'itemPanel': $container.find('#item-editor-scroll-inner'),
-                    'itemPropertyPanel': $container.find('#sidebar-right-item-properties'),
-                    'itemStylePanel': $container.find('#item-style-editor-bar'),
-                    'modalContainer': $container.find('#modal-container'),
-                    'elementPropertyPanel': $container.find('#item-editor-body-element-property-bar .panel')
+                    menu: $container.find('.menu'),
+                    menuLeft: $container.find('.menu-left'),
+                    menuRight: $container.find('.menu-right'),
+                    contentCreatorPanel: $container.find('#item-editor-panel'),
+                    editorBar: $container.find('#item-editor-panel .item-editor-bar'),
+                    editorWrapper: $container.find('#item-editor-wrapper'),
+                    title: $container.find('#item-editor-panel .item-editor-bar h1'),
+                    toolbar: $container.find('#item-editor-panel .item-editor-bar #toolbar-top'),
+                    interactionPanel: $container.find('#item-editor-interaction-bar'),
+                    propertyPanel: $container.find('#item-editor-item-widget-bar'),
+                    itemPanel: $container.find('#item-editor-scroll-inner'),
+                    itemPropertyPanel: $container.find('#sidebar-right-item-properties'),
+                    itemStylePanel: $container.find('#item-style-editor-bar'),
+                    modalContainer: $container.find('#modal-container'),
+                    elementPropertyPanel: $container.find('#item-editor-body-element-property-bar .panel')
                 });
 
                 itemCreator = itemCreatorFactory(this.getConfig(), areaBroker, pluginLoader.getPlugins())