/** * This program is free software; you can redistribute it and/or * modify it under the terms of the GNU General Public License * as published by the Free Software Foundation; under version 2 * of the License (non-upgradable). * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. * * You should have received a copy of the GNU General Public License * 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 ; */ /** * @author Jean-Sébastien Conan */ define([ 'lodash', 'ui/component', 'core/pluginLoader', 'taoQtiItem/qtiCreator/itemCreator', 'taoQtiItem/qtiCreator/editor/areaBroker', 'tpl!taoQtiItem/qtiCreator/component/tpl/itemAuthoring', 'css!taoQtiItemCss/qti-runner.css', 'css!taoQtiItemCss/themes/default.css', 'css!taoQtiItemCss/item-creator.css' ], function ( _, componentFactory, pluginLoaderFactory, itemCreatorFactory, areaBrokerFactory, componentTpl ) { 'use strict'; /** * Embeds the item creator UI in a component * * @example * const container = $(); * const config = { * plugins: [], * properties: { * uri: 'http://item#rdf-123', * label: 'Item', * baseUrl: 'http://foo/bar/', * // ... * } * }; * const component = itemAuthoringFactory(container, config) * .on('ready', function onComponentReady() { * // ... * }); * * @param {HTMLElement|String} container * @param {Object} config - The setup for the item creator * @param {Object} config.properties - The list of properties expected by the item creator * @param {Object} config.properties.uri - The URI of the item to author * @param {Object} config.properties.label - The displayed label * @param {Object} config.properties.baseUrl - The base URL to retrieve the assets * @param {String} config.properties.itemDataUrl - URL for getting item data (passed through to itemCreator) * @param {Object[]} [config.plugins] - Additional plugins to load * @returns {component} * @fires ready - When the component is ready to work */ function itemAuthoringFactory(container, config) { let areaBroker; let itemCreator; const pluginLoader = pluginLoaderFactory(); const api = { /** * Gets access to the item creator * @returns {itemCreator} */ getItemCreator() { return itemCreator; }, /** * Gets access to the area broker * @returns {areaBroker} */ getAreaBroker() { return areaBroker; } }; const itemAuthoring = componentFactory(api) // set the component's layout .setTemplate(componentTpl) // auto render on init .on('init', function () { // load plugins dynamically _.forEach(this.getConfig().plugins, plugin => { if (plugin && plugin.module) { if (plugin.exclude) { pluginLoader.remove(plugin.module); } else { pluginLoader.add(plugin); } } }); // load the plugins, then render the item creator pluginLoader.load() .then(() => this.render(container)) .catch(err => this.trigger('error', err)); }) // renders the component .on('render', function () { const $container = this.getElement(); 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') }); itemCreator = itemCreatorFactory(this.getConfig(), areaBroker, pluginLoader.getPlugins()) .spread(this, 'error success ready') .on('init', function () { this.render(); }) .init(); }) .on('destroy', function () { if (itemCreator) { itemCreator.destroy(); } itemCreator = null; areaBroker = null; }); // initialize the component with the provided config // defer the call to allow to listen to the init event _.defer(() => itemAuthoring.init(config)); return itemAuthoring; } return itemAuthoringFactory; });