source: Dev/trunk/client/qed/model/widgets/QuestionWidgetFactory.js @ 424

define([
    'dojo/_base/array',
    'dojo/_base/declare',
    'dojo/_base/lang', 
    'dojo/dom-construct', 
    'dijit/_TemplatedMixin',
    'dijit/_WidgetBase',
    'dijit/_Container',
    'dijit/form/Button',
    'dijit/form/CheckBox',
    'dijit/form/Form',
    'dijit/form/NumberSpinner',
    'dijit/form/RadioButton',
    'dijit/form/Textarea',
    'dijit/form/TextBox',
    'dojox/layout/TableContainer',
    '../../widgets/list/_EditableListMixin',
    '../../widgets/list/OrderedList'
],function(array, declare, lang, domConstruct, _TemplatedMixin, _WidgetBase, _Container, Button, CheckBox, Form, NumberSpinner, RadioButton, Textarea, TextBox, TableContainer, _EditableListMixin, OrderedList) {
    var factory = declare(null, {
        createViewWidget: function(/*Object*/options) {
            // options: Object
            //            type: "header", "text", textinput, etc.
            //            other type specific fields
            var fun = this['create'+options.type+'ViewWidget'];
            var view = fun !== undefined ? fun(options) : null;
            return view;
        },
        createEditWidget: function(/*Object*/options) {
            var fun = this['create'+options.type+'EditWidget'];
            var view = fun !== undefined ? fun() : null;
            if(view)
                view.set('value', options);
            return view;
        },

        createHeaderViewWidget: function(options) {
            return new HeaderView({
                options: options
            });
        },
        createHeaderEditWidget: function() {
            return new HeaderEdit();
        },

        createTextViewWidget: function(options) {
            return new TextView({
                options: options
            });
        },
        createTextEditWidget: function() {
            return new TextEdit();
        },

        createDividerViewWidget: function(options) {
            return new DividerView({
                options: options
            });
        },

        createStringInputViewWidget: function(options) {
            return new StringInputView({
                options: options
            });
        },
        createStringInputEditWidget: function() {
            return new StringInputEdit();
        },

        createTextInputViewWidget: function(options) {
            return new TextInputView({
                options: options
            });
        },
        createTextInputEditWidget: function() {
            return new TextInputEdit();
        },

        createIntegerInputViewWidget: function(options) {
            return new IntegerInputView({
                options: options
            });
        },
        createIntegerInputEditWidget: function() {
            return new IntegerInputEdit();
        },

        createMultipleChoiceInputViewWidget: function(options) {
            return new MultipleChoiceInputView({
                options: options
            });
        },
        createMultipleChoiceInputEditWidget: function() {
            return new MultipleChoiceInputEdit();
        }
    });

    var DefaultEdit = declare([Form,_Container],{
        type: null,
        addChild: function(widget) {
            domConstruct.create("label",{
                innerHTML: widget.title || ''
            },this.containerNode,'last');
            this.inherited(arguments,[widget]);
        },
        _getValueAttr: function() {
            var val = this.inherited(arguments);
            val.type = this.type;
            return val;
        }
    });

    var HeaderView = declare([_WidgetBase], {
        postCreate: function() {
            this.domNode.innerHTML = "<h2>"+this.options.content+"</h2>";
        }
    });

    var HeaderEdit = declare([DefaultEdit], {
        type: 'Header',
        postCreate: function() {
            this.inherited(arguments);
            this.addChild(new TextBox({
                title: 'Content',
                name: 'content'
            }));
        }
    });

    var TextView = declare([_WidgetBase], {
        postCreate: function() {
            this.domNode.innerHTML = "<p>"+this.options.content+"</p>";
        }
    });

    var TextEdit = declare([DefaultEdit], {
        type: 'Text',
        postCreate: function() {
            this.inherited(arguments);
            this.addChild(new Textarea({
                title: 'Content',
                name: 'content'
            }));
        }
    });

    var DividerView = declare([_WidgetBase], {
        postCreate: function() {
            this.domNode.innerHTML = "<hr>";
        }
    });

    var DefaultInputEdit = declare([DefaultEdit],{
        postCreate: function() {
            this.inherited(arguments);
            this.addChild(new TextBox({
                title: 'Text',
                name: 'text'
            }));
        }
    });

    var StringInputView = declare([_WidgetBase, _Container],{
        _textBox: null,
        postCreate: function() {
            this._textBox = new TextBox({
                name: this.options.code || ''
            });
            this.addChild(this._textBox);
            this._textBox.startup();
        },
        _setReadOnlyAttr: function(value) {
            this._textBox.set('readOnly', value);
        },
        _getCodeAttr: function() {
            return this.options.code;
        },
        _getValueAttr: function() {
            return this._textBox.get('value') || "";
        },
        _setValueAttr: function(value) {
            this._textBox.set('value',value || "");
        }
    });

    var StringInputEdit = declare([DefaultInputEdit],{
        type: 'StringInput'
    });

    var TextInputView = declare([_WidgetBase, _Container], {
        _textArea: null,
        postCreate: function() {
            this._textArea = new Textarea({
                name: this.options.code
            });
            this._textArea.set('maxLength', this.options.maxLength || 1000);
            this._textArea.set('value', this.options.defaultValue || "");
            this.addChild(this._textArea);
            this._textArea.startup();
        },
        _getCodeAttr: function() {
            return this.options.code;
        },
        _getValueAttr: function() {
            return this._textArea.get('value');
        },
        _setReadOnlyAttr: function(value) {
            this._textArea.set('readOnly', value);
        }
    });

    var TextInputEdit = declare([DefaultInputEdit], {
        type: 'TextInput',
        postCreate: function() {
            this.inherited(arguments);
            this.addChild(new NumberSpinner({
                name: 'maxLength',
                title: "Maximum length",
                constraints: {
                    min: 0
                }
            }));
        }
    });

    var IntegerInputView = declare([_WidgetBase, _Container], {
        _numberInput: null,
        postCreate: function() {
            this._numberInput = new NumberSpinner({
                name: this.options.code || '',
                constraints: {
                    min: this.options.min,
                    max: this.options.max,
                    smallDelta: this.options.step
                }
            });
            this.addChild(this._numberInput);
            this._numberInput.startup();
        },
        _getCodeAttr: function() {
            return this.options.code;
        },
        _getValueAttr: function() {
            return this._numberInput.get('value');
        },
        _setReadOnlyAttr: function(value) {
            this._numberInput.set('readOnly', value);
        }
    });

    var IntegerInputEdit = declare([DefaultInputEdit], {
        type: 'IntegerInput',
        postCreate: function() {
            this.inherited(arguments);
            this.addChild(new NumberSpinner({
                title: "Minimum",
                name: 'min'
            }));
            this.addChild(new NumberSpinner({
                title: "Maximum",
                name: 'max'
            }));
            this.addChild(new NumberSpinner({
                title: "Step",
                name: 'step'
            }));
        }
    });

    var MultipleChoiceInputView = declare([_WidgetBase, _Container], {
        postCreate: function() {
            var table = new TableContainer({ cols: 1, customClass: "labelsAndValues"} );

            var ctor = this.options.multiple === true ? CheckBox : RadioButton;
            array.forEach(this.options.items || [],function(item){
                table.addChild(new ctor({
                        name: this.options.code || '',
                        title: item
                }));
            },this);

            this.addChild(table);
            table.startup();
        },
        _getCodeAttr: function() {
            return this.options.code;
        },
        _getValueAttr: function() {
            var checked = array.filter(this.getChildren(),function(child){
                return child.get('checked');
            });
            if ( this.options.multiple ) {
                return array.map(checked,function(child){
                    return child.get('value');
                });
            } else {
                return checked.length > 0 ? checked[0].get('value') : null;
            }
        },
        _setReadOnlyAttr: function(value) {
            array.forEach(this.getChildren(),function(child){
                child.set('readOnly', value);
            },this);
        }
    });

    var MCOptionItem = declare([_WidgetBase,_TemplatedMixin,_Container],{
        templateString: '<div><span class="dojoDndHandle">=</span></div>',
        _textBox: null,
        postCreate: function() {
            this._textBox = new TextBox({});
            this.addChild(this._textBox);
            this._textBox.startup();

            var del = new Button({
                label: "X",
                onClick: lang.hitch(this,'onDelete')
            });
            this.addChild(del);
            del.startup();
        },
        _getValueAttr: function() {
            return this._textBox.set('value');
        },
        _setValueAttr: function(value) {
            this._textBox.set('value',value);
        },
        onDelete: function(){}
    });

    var MCOptionList = declare([OrderedList,_EditableListMixin],{
        type: 'multipleChoiceOption',
        withHandles: true,
        _createAvatarNode: function(item){
            return domConstruct.create("div",{
                'class': 'dragAvatar',
                innerHTML: item
            });
        },
        _createListNode: function(item) {
            var w = new MCOptionItem();
            w.startup();
            w.set('value',item);
            w.on('delete',lang.hitch(this,'_onRemove',w));
            return w.domNode;
        },
        _onRemove: function(w) {
            w.destroyRecursive();
            this.removeCallback && this.removeCallback(item);
            this.source.sync();
        }
    });

    var MultipleChoiceInputEdit = declare([_WidgetBase, _Container], {
        _multipleInput: null,
        postCreate: function() {
            var table = new TableContainer({ cols: 1, customClass: "labelsAndValues"} );

            this._multipleInput = new CheckBox({
                title: "Allow multiple"
            });
            table.addChild(this._multipleInput);
            this._multipleInput.startup();

            var add = new Button({
                label: "Add",
                onClick: lang.hitch(this,'_addOption',"")
            });
            table.addChild(add);
            add.startup();

            this._optionsList = new MCOptionList();
            table.addChild(this._optionsList);
            this._optionsList.startup();

            this.addChild(table);
            table.startup();
        },

        _addOption: function() {
            this._optionsList.appendItems([""]);
        },

        _setValueAttr: function(value) {
            this._multipleInput.set('checked', value.multiple);
            this._optionsList.deleteItems();
            this._optionsList.appendItems(value.items || []);
        },
        _getValueAttr: function() {
            return {
                type: "MultipleChoiceInput",
                multiple: this._multipleInput.get('checked'),
                items: array.map(this._optionsList.getItems(),function(item){
                    return item.get('value');
                },this)
            };
        }
    });

    return factory;
});