386 lines
13 KiB
JavaScript
386 lines
13 KiB
JavaScript
/**
|
|
* 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) 2015 (original work) Open Assessment Technologies SA ;
|
|
*/
|
|
define([
|
|
'jquery',
|
|
'lodash',
|
|
'taoQtiItem/qtiItem/core/Element'
|
|
], function($, _, Element){
|
|
"use strict";
|
|
|
|
var _getItemContainer = function(){
|
|
return $('#item-editor-panel');
|
|
};
|
|
|
|
var showPanel = function($panel, $fold){
|
|
|
|
$panel.show();
|
|
openSections($panel.children('section'));
|
|
|
|
if($fold && $fold.length){
|
|
closeSections($fold.children('section'));
|
|
}
|
|
};
|
|
|
|
var initFormVisibilityListener = function(){
|
|
|
|
//first of all, clear all listener
|
|
$(document).off('.panel');
|
|
|
|
var $itemContainer = _getItemContainer();
|
|
|
|
var _staticElements = {
|
|
_tooltip : 'Tooltip',
|
|
img : 'Image',
|
|
object : 'Media',
|
|
rubricBlock : 'Rubric Block',
|
|
math : 'Math',
|
|
table : 'Table',
|
|
include : 'Shared Stimulus',
|
|
infoControl : 'Student Tool'
|
|
};
|
|
|
|
// all sections on the right sidebar are invisible by default
|
|
var $formInteractionPanel = $('#item-editor-interaction-property-bar'),
|
|
$formChoicePanel = $('#item-editor-choice-property-bar'),
|
|
$formResponsePanel = $('#item-editor-response-property-bar'),
|
|
$formItemPanel = $('#item-editor-item-property-bar'),
|
|
$formBodyElementPanel = $('#item-editor-body-element-property-bar'),
|
|
$formTextBlockPanel = $('#item-editor-text-property-bar'),
|
|
$formModalFeedbackPanel = $('#item-editor-modal-feedback-property-bar'),
|
|
$formStylePanel = $('#item-style-editor-bar'),
|
|
$appearanceToggler = $('#appearance-trigger'),
|
|
$menuLabel = $appearanceToggler.find('.menu-label'),
|
|
$itemIcon = $appearanceToggler.find('.icon-item'),
|
|
$styleIcon = $appearanceToggler.find('.icon-style');
|
|
|
|
var _toggleAppearanceEditor = function(active){
|
|
|
|
if(active){
|
|
|
|
$appearanceToggler.addClass('active');
|
|
$formStylePanel.show();
|
|
$formItemPanel.hide();
|
|
|
|
//current widget sleep:
|
|
$itemContainer.trigger('styleedit');
|
|
|
|
/* At the time of writing this the following sections are available:
|
|
*
|
|
* #sidebar-left-section-text
|
|
* #sidebar-left-section-block-interactions
|
|
* #sidebar-left-section-inline-interactions
|
|
* #sidebar-left-section-graphic-interactions
|
|
* #sidebar-left-section-media
|
|
* #sidebar-right-css-manager
|
|
* #sidebar-right-style-editor
|
|
* #sidebar-right-item-properties
|
|
* #sidebar-right-body-element-properties
|
|
* #sidebar-right-text-block-properties
|
|
* #sidebar-right-interaction-properties
|
|
* #sidebar-right-choice-properties
|
|
* #sidebar-right-response-properties
|
|
*/
|
|
showPanel($formStylePanel);
|
|
$menuLabel.text($menuLabel.data('item'));
|
|
$itemIcon.show();
|
|
$styleIcon.hide();
|
|
}else{
|
|
$appearanceToggler.removeClass('active');
|
|
$formStylePanel.hide();
|
|
showPanel($formItemPanel);
|
|
$menuLabel.text($menuLabel.data('style'));
|
|
$itemIcon.hide();
|
|
$styleIcon.show();
|
|
}
|
|
};
|
|
|
|
$appearanceToggler.on('click', function(){
|
|
|
|
if($appearanceToggler.hasClass('active')){
|
|
_toggleAppearanceEditor(false);
|
|
}else{
|
|
_toggleAppearanceEditor(true);
|
|
}
|
|
});
|
|
|
|
//@todo : fix this timeout event
|
|
_.delay(function(){
|
|
showPanel($formItemPanel);
|
|
}, 200);
|
|
|
|
$(document).on('afterStateInit.qti-widget.panel', function(e, element, state){
|
|
|
|
switch(state.name){
|
|
case 'active':
|
|
|
|
_toggleAppearanceEditor(false);
|
|
if(!Element.isA(element, 'assessmentItem')){
|
|
$formItemPanel.hide();
|
|
}
|
|
|
|
var label = _staticElements[element.qtiClass];
|
|
if(label){
|
|
$formBodyElementPanel.find('h2').html(label + ' Properties');
|
|
showPanel($formBodyElementPanel);
|
|
}else if(element.qtiClass === '_container'){
|
|
showPanel($formTextBlockPanel);
|
|
}
|
|
|
|
if(element.qtiClass === 'modalFeedback'){
|
|
showPanel($formModalFeedbackPanel);
|
|
$formResponsePanel.hide();
|
|
}
|
|
break;
|
|
|
|
case 'question':
|
|
|
|
showPanel($formInteractionPanel);
|
|
break;
|
|
|
|
case 'answer':
|
|
|
|
showPanel($formResponsePanel);
|
|
break;
|
|
|
|
case 'choice':
|
|
showPanel($formChoicePanel, $formInteractionPanel);
|
|
break;
|
|
|
|
case 'sleep':
|
|
|
|
if(_staticElements[element.qtiClass]){
|
|
$formBodyElementPanel.hide();
|
|
}else if(element.qtiClass === '_container'){
|
|
$formTextBlockPanel.hide();
|
|
}
|
|
|
|
if(!Element.isA(element, 'choice')){
|
|
if(!$itemContainer.find('.widget-box.edit-active').length){
|
|
showPanel($formItemPanel);
|
|
}
|
|
}
|
|
break;
|
|
}
|
|
|
|
}).on('afterStateExit.qti-widget.panel', function(e, element, state){
|
|
|
|
switch(state.name){
|
|
case 'active':
|
|
if(element.qtiClass === 'modalFeedback'){
|
|
showPanel($formResponsePanel);
|
|
$formModalFeedbackPanel.hide();
|
|
}
|
|
break;
|
|
case 'question':
|
|
if(element.is('interaction')){
|
|
$formChoicePanel.hide();
|
|
$formInteractionPanel.hide();
|
|
}
|
|
break;
|
|
case 'choice':
|
|
$formChoicePanel.hide();
|
|
showPanel($formInteractionPanel);
|
|
break;
|
|
case 'answer':
|
|
$formResponsePanel.hide();
|
|
break;
|
|
}
|
|
|
|
}).on('elementCreated.qti-widget.panel', function(e, data){
|
|
|
|
if(data.element.qtiClass === '_container'){
|
|
enableSubGroup('inline-interactions');
|
|
}
|
|
|
|
}).on('deleted.qti-widget.panel', function(e, data){
|
|
|
|
if(data.element.qtiClass === '_container'){
|
|
toggleInlineInteractionGroup();
|
|
}
|
|
|
|
});
|
|
};
|
|
|
|
var toggleInlineInteractionGroup = function(){
|
|
|
|
var $itemContainer = _getItemContainer();
|
|
if($itemContainer.find('.widget-textBlock').length){
|
|
enableSubGroup('inline-interactions');
|
|
}else{
|
|
disableSubGroup('inline-interactions');
|
|
}
|
|
};
|
|
|
|
// selectors and classes
|
|
var heading = 'h2',
|
|
section = 'section',
|
|
panel = 'hr, .panel',
|
|
closed = 'closed',
|
|
ns = 'accordion';
|
|
|
|
var initSidebarAccordion = function($sidebar){
|
|
|
|
var $sections = $sidebar.find(section),
|
|
$allPanels = $sidebar.children(panel).hide(),
|
|
$allTriggers = $sidebar.find(heading);
|
|
|
|
if($allTriggers.length === 0){
|
|
return true;
|
|
}
|
|
|
|
// setup events
|
|
$allTriggers.each(function(){
|
|
var $heading = $(this),
|
|
$section = $heading.parents(section),
|
|
$panel = $section.children(panel),
|
|
$closer = $('<span>', {'class' : 'icon-up'}),
|
|
$opener = $('<span>', {'class' : 'icon-down'}),
|
|
action = $panel.is(':visible') ? 'open' : 'close';
|
|
|
|
$heading.append($closer).append($opener).addClass(closed);
|
|
|
|
// this allows multiple calls, required when blocks are added dynamically
|
|
if($heading.hasClass('_accordion')) {
|
|
return;
|
|
}
|
|
else {
|
|
$heading.addClass('_accordion');
|
|
}
|
|
|
|
// toggle heading class arrow (actually switch arrow)
|
|
$panel.on('panelclose.' + ns + ' panelopen.' + ns, function(e, args){
|
|
var fn = e.type === 'panelclose' ? 'add' : 'remove';
|
|
args.heading[fn + 'Class'](closed);
|
|
});
|
|
|
|
$panel.trigger('panel' + action + '.' + ns, {heading : $heading});
|
|
|
|
});
|
|
|
|
$sections.each(function(){
|
|
|
|
// assign click action to headings
|
|
$(this).find(heading).on('click', function(e, args){
|
|
|
|
var $heading = $(this),
|
|
$panel = $heading.parents(section).children(panel),
|
|
preserveOthers = !!(args && args.preserveOthers),
|
|
actions = {
|
|
close : 'hide',
|
|
open : 'fadeIn'
|
|
},
|
|
action,
|
|
forceState = (args && args.forceState ? args.forceState : false),
|
|
classFn;
|
|
|
|
if(forceState){
|
|
classFn = forceState === 'open' ? 'addClass' : 'removeClass';
|
|
$heading[classFn](closed);
|
|
}
|
|
|
|
action = $heading.hasClass(closed) ? 'open' : 'close';
|
|
|
|
// whether or not to close other sections in the same sidebar
|
|
// @todo (optional): remove 'false' in the condition below
|
|
// to change the style to accordion, i.e. to allow for only one open section
|
|
if(false && !preserveOthers){
|
|
$allPanels.not($panel).each(function(){
|
|
var $panel = $(this),
|
|
$heading = $panel.parent().find(heading),
|
|
_action = 'close';
|
|
|
|
$panel.trigger('panel' + _action + '.' + ns, {heading : $heading})[actions[_action]]();
|
|
});
|
|
}
|
|
|
|
$panel.trigger('panel' + action + '.' + ns, {heading : $heading})[actions[action]]();
|
|
});
|
|
|
|
});
|
|
};
|
|
|
|
/**
|
|
* Toggle section display
|
|
*
|
|
* @param sections
|
|
*/
|
|
var _toggleSections = function(sections, preserveOthers, state){
|
|
sections.each(function(){
|
|
$(this).find(heading).trigger('click', {preserveOthers : preserveOthers, forceState : state});
|
|
});
|
|
};
|
|
|
|
/**
|
|
* Close specific sections
|
|
*
|
|
* @param sections
|
|
*/
|
|
var closeSections = function(sections, preserveOthers){
|
|
_toggleSections(sections, !!preserveOthers, 'close');
|
|
};
|
|
|
|
/**
|
|
* Open specific sections
|
|
*
|
|
* @param sections
|
|
*/
|
|
var openSections = function(sections, preserveOthers){
|
|
_toggleSections(sections, !!preserveOthers, 'open');
|
|
};
|
|
|
|
/**
|
|
* toggle availability of sub group
|
|
* @param subGroup
|
|
*/
|
|
var _toggleSubGroup = function(subGroup, state){
|
|
subGroup = $('.' + subGroup);
|
|
if(subGroup.length){
|
|
var fn = state === 'disable' ? 'addClass' : 'removeClass';
|
|
subGroup.data('cover')[fn]('blocking');
|
|
}
|
|
};
|
|
|
|
/**
|
|
* enable sub group
|
|
* @param subGroup
|
|
*/
|
|
var enableSubGroup = function(subGroup){
|
|
_toggleSubGroup(subGroup, 'enable');
|
|
};
|
|
|
|
/**
|
|
* disable sub group
|
|
* @param subGroup
|
|
*/
|
|
var disableSubGroup = function(subGroup){
|
|
_toggleSubGroup(subGroup, 'disable');
|
|
};
|
|
|
|
return {
|
|
initFormVisibilityListener : initFormVisibilityListener,
|
|
showPanel : showPanel,
|
|
toggleInlineInteractionGroup : toggleInlineInteractionGroup,
|
|
initSidebarAccordion : initSidebarAccordion,
|
|
openSections : openSections,
|
|
closeSections : closeSections,
|
|
enableSubGroup : enableSubGroup,
|
|
disableSubGroup : disableSubGroup
|
|
};
|
|
|
|
});
|