Ignore:
Timestamp:
03/12/14 15:16:54 (11 years ago)
Author:
hendrikvanantwerpen
Message:
  • Factored out general object mapping and iteration.
  • Split widgets for multiplechoice and singlechoice.
  • Restored readOnly/disabled setting for QuestionEditorPreviewItem? on innerWidget (since view innerWidget is not a form anymore, we cannot just set it on that, we iterate over all form children now).
Location:
Dev/trunk/src/client/qed-client/model/widgets
Files:
5 added
20 edited

Legend:

Unmodified
Added
Removed

  • Dev/trunk/src/client/qed-client/model/widgets/QuestionEditorPreview.js

    r490 r510  
    2323                value: item
    2424            });
     25            previewItem.showEdit();
    2526            this.own(previewItem.on('destroy',
    2627                                    lang.hitch(this,'removeItem',id,true)));

  • Dev/trunk/src/client/qed-client/model/widgets/QuestionEditorPreviewItem.js

    r508 r510  
    66    "dijit/_WidgetBase",
    77    "dijit/_WidgetsInTemplateMixin",
     8    "dojo/_base/array",
    89    "dojo/_base/declare",
    910    "dojo/_base/event",
    … …  
    1516    "dojo/on",
    1617    "dojo/text!./templates/QuestionEditorPreviewItem.html"
    17 ], function(_ComplexValueWidget, QuestionWidgetFactory, _Container, _TemplatedMixin, _WidgetBase, _WidgetsInTemplateMixin, declare, event, fx, lang, domClass, domGeom, domStyle, on, template) {
     18], function(_ComplexValueWidget, QuestionWidgetFactory, _Container, _TemplatedMixin, _WidgetBase, _WidgetsInTemplateMixin, array, declare, event, fx, lang, domClass, domGeom, domStyle, on, template) {
    1819    return declare([_ComplexValueWidget], {
    1920        templateString: template,
    … …  
    2425        foldDuration: [250, 250],
    2526        animation: null,
    26         _editing: false,
     27        _editing: null,
    2728        _factory: new QuestionWidgetFactory(),
    2829
    … …  
    3637            this.own(this.editButton.on('click',
    3738                        lang.hitch(this, 'onToggleEdit')));
    38             this.showEdit();
     39            this.showView();
    3940        },
    4041        _handleDestroy: function(evt) {
    … …  
    4445        },
    4546        _getValueAttr: function(value) {
    46             if ( this._editing ) {
     47            if ( this._editing === true ) {
    4748                this.value = this.innerWidget.get('value');
    4849            }
    … …  
    5152        _setValueAttr: function(value) {
    5253            this.value = value;
    53             if ( this._editing ) {
     54            if ( this._editing  === true ) {
    5455                this._showEditWidget();
    5556            } else {
    … …  
    5758            }
    5859        },
    59         _setReadOnlyAttr: function() {
    60             this.inherited(arguments);
     60        _setReadOnlyAttr: function(readOnly) {
     61            this._set('readOnly',readOnly);
     62            this._setReadOnlyChildren(this.readOnly);
    6163            this._updateRemoveBtn();
    6264        },
    63         _setDisabledAttr: function() {
    64             this.inherited(arguments);
     65        _setDisabledAttr: function(disabled) {
     66            this._set('disabled',disabled);
     67            this._setDisabledChildren(this.disabled);
    6568            this._updateRemoveBtn();
    6669        },
    6770        _updateRemoveBtn: function() {
     71            var node = this.removeButton.domNode;
    6872            if ( this.readOnly || this.disabled ) {
    69                 domClass.add(this.removeButton.domNode, 'dijitHidden');
     73                domClass.add(node, 'dijitHidden');
    7074            } else {
    71                 domClass.remove(this.removeButton.domNode, 'dijitHidden');
     75                domClass.remove(node, 'dijitHidden');
    7276            }
    7377        },
     78        _setDisabledChildren: function(disabled) {
     79            array.forEach(this._getDescendantFormWidgets(),function(widget){
     80                widget.set('disabled',disabled);
     81            });
     82        },
     83        _setReadOnlyChildren: function(readOnly) {
     84            array.forEach(this._getDescendantFormWidgets(),function(widget){
     85                widget.set('readOnly',readOnly);
     86            });
     87        },
    7488        validate: function() {
    75             return !this._editing || this.innerWidget.validate();
     89            return this._editing === false || this.innerWidget.validate();
    7690        },
    7791        focus: function() {
    78             if ( this._editing ) {
     92            if ( this._editing === true ) {
    7993                this.innerWidget.focus();
    8094            }
    8195        },
    8296        showView: function() {
    83             if ( this._editing ) {
     97            if ( this._editing === true ) {
    8498                if (!this.innerWidget.validate || this.innerWidget.validate() ) {
    8599                    this.value = this.innerWidget.get('value');
    … …  
    89103        },
    90104        showEdit: function() {
    91             if (!this._editing) {
     105            if ( this._editing === false ) {
    92106                this._showEditWidget();
    93107            }
    94108        },
    95109        onToggleEdit: function(evt) {
    96             if (this._editing) {
     110            if ( this._editing === true ) {
    97111                this.showView();
    98112            } else {
    … …  
    106120            // on it,but we don't know the actual code here.
    107121            var newWidget = this._factory.createViewWidget( lang.mixin({code:""},this.value) );
    108             if ( newWidget !== null ) {
     122            if ( newWidget ) {
    109123                this._destroyInnerWidget();
    110124                this.innerWidget = newWidget;
    111                 this.innerWidget.set('readOnly',true);
    112125                this.addChild(this.innerWidget);
     126                this._setReadOnlyChildren(true);
     127                this._setDisabledChildren(true);
    113128                this.titleNode.innerHTML = this.value.type+" [preview]";
    114129                domClass.replace(this.editButton.iconNode, "rftIconEdit", "rftIconAccept");
    … …  
    119134        _showEditWidget: function() {
    120135            var newWidget = this._factory.createEditWidget( this.value );
    121             if ( newWidget !== null ) {
     136            if ( newWidget ) {
    122137                this._destroyInnerWidget();
    123138                this.innerWidget = newWidget;
    124                 this.innerWidget.set('readOnly',this.readOnly);
    125                 this.innerWidget.set('disabled',this.disabled);
    126139                this.addChild(this.innerWidget);
     140                this._setReadOnlyChildren(this.readOnly);
     141                this._setDisabledChildren(this.disabled);
    127142                this.titleNode.innerHTML = this.value.type+" [editing]";
    128143                domClass.replace(this.editButton.iconNode, "rftIconAccept", "rftIconEdit");

  • Dev/trunk/src/client/qed-client/model/widgets/QuestionEditorToolkit.js

    r502 r510  
    3434            { type: "NumberInput" },
    3535            { type: "ScaleInput" },
     36            { type: "SingleChoiceInput" },
    3637            { type: "MultipleChoiceInput" }
    3738        ],
    … …  
    4445            "NumberInput": "Number",
    4546            "ScaleInput": "Scale",
     47            "SingleChoiceInput": "Single choice",
    4648            "MultipleChoiceInput": "Multiple choice"
    4749        },
    … …  
    5456            "NumberInput": "Number",
    5557            "ScaleInput": "Scale",
     58            "SingleChoiceInput": "MultipleChoice",
    5659            "MultipleChoiceInput": "MultipleChoice"
    5760        },

  • Dev/trunk/src/client/qed-client/model/widgets/questions/Factory.js

    r443 r510  
    11define([
     2    "../../../lib/object",
    23    "./HeaderConfigWidget",
    34    "./HeaderWidget",
    … …  
    89    "./ScaleInputConfigWidget",
    910    "./ScaleInputWidget",
     11    "./SingleChoiceInputConfigWidget",
     12    "./SingleChoiceInputWidget",
    1013    "./StringInputConfigWidget",
    1114    "./StringInputWidget",
    … …  
    1619    "dijit/_WidgetBase",
    1720    "dojo/_base/declare"
    18 ], function(HeaderConfigWidget, HeaderWidget, MultipleChoiceInputConfigWidget, MultipleChoiceInputWidget, NumberInputConfigWidget, NumberInputWidget, ScaleInputConfigWidget, ScaleInputWidget, StringInputConfigWidget, StringInputWidget, TextConfigWidget, TextInputConfigWidget, TextInputWidget, TextWidget, _WidgetBase, declare) {
     21], function(objectFuns, HeaderConfigWidget, HeaderWidget, MultipleChoiceInputConfigWidget, MultipleChoiceInputWidget, NumberInputConfigWidget, NumberInputWidget, ScaleInputConfigWidget, ScaleInputWidget, SingleChoiceInputConfigWidget, SingleChoiceInputWidget, StringInputConfigWidget, StringInputWidget, TextConfigWidget, TextInputConfigWidget, TextInputWidget, TextWidget, _WidgetBase, declare) {
     22   
     23    var DividerWidget = declare([_WidgetBase], {
     24        postCreate: function() {
     25            this.domNode.innerHTML = "<hr>";
     26        }
     27    });
     28
     29    var viewMap = {
     30        Header: HeaderWidget,
     31        Text: TextWidget,
     32        Divider: DividerWidget,
     33        StringInput: StringInputWidget,
     34        TextInput: TextInputWidget,
     35        NumberInput: NumberInputWidget,
     36        MultipleChoiceInput: MultipleChoiceInputWidget,
     37        SingleChoiceInput: SingleChoiceInputWidget,
     38        ScaleInput: ScaleInputWidget
     39    };
     40    var editMap = {
     41        Header: HeaderConfigWidget,
     42        Text: TextConfigWidget,
     43        StringInput: StringInputConfigWidget,
     44        TextInput: TextInputConfigWidget,
     45        NumberInput: NumberInputConfigWidget,
     46        MultipleChoiceInput: MultipleChoiceInputConfigWidget,
     47        SingleChoiceInput: SingleChoiceInputConfigWidget,
     48        ScaleInput: ScaleInputConfigWidget
     49    };
     50
     51    editMap = objectFuns.map(editMap,function(Ctor,type){
     52        return declare([Ctor],{
     53            _getValueAttr: function() {
     54                var value = this.inherited(arguments);
     55                value.type = type;
     56                return value;
     57            }
     58        });
     59    });
     60
    1961    var factory = declare(null, {
    2062        createViewWidget: function(/*Object*/options) {
    … …  
    2264            //            type: "Header", "Text", "TextInput", etc.
    2365            //            other type specific fields
    24             var fun = this['create'+options.type+'ViewWidget'];
    25             var view = fun !== undefined ? fun(options) : null;
     66            var Ctor = viewMap[options.type];
     67            var view = Ctor && new Ctor(options) || null;
    2668            return view;
    2769        },
    2870        createEditWidget: function(/*Object*/options) {
    29             var fun = this['create'+options.type+'EditWidget'];
    30             var view = fun !== undefined ? fun(options) : null;
    31             return view;
    32         },
    33 
    34         createHeaderViewWidget: function(config) {
    35             return new HeaderWidget(config);
    36         },
    37         createHeaderEditWidget: function(config) {
    38             return new HeaderConfigWidget({
    39                 value: config
     71            var Ctor = editMap[options.type];
     72            var edit = Ctor && new Ctor({
     73                value: options
    4074            });
    41         },
    42 
    43         createTextViewWidget: function(config) {
    44             return new TextWidget(config);
    45         },
    46         createTextEditWidget: function(config) {
    47             return new TextConfigWidget({
    48                 value: config
    49             });
    50         },
    51 
    52         createDividerViewWidget: function(options) {
    53             return new DividerView({
    54                 options: options
    55             });
    56         },
    57 
    58         createStringInputViewWidget: function(config) {
    59             return new StringInputWidget(config);
    60         },
    61         createStringInputEditWidget: function(config) {
    62             return new StringInputConfigWidget({
    63                 value: config
    64             });
    65         },
    66 
    67         createTextInputViewWidget: function(config) {
    68             return new TextInputWidget(config);
    69         },
    70         createTextInputEditWidget: function(config) {
    71             return new TextInputConfigWidget({
    72                 value: config
    73             });
    74         },
    75 
    76         createNumberInputViewWidget: function(config) {
    77             return new NumberInputWidget(config);
    78         },
    79         createNumberInputEditWidget: function(config) {
    80             return new NumberInputConfigWidget({
    81                 value: config
    82             });
    83         },
    84 
    85         createMultipleChoiceInputViewWidget: function(config) {
    86             return new MultipleChoiceInputWidget(config);
    87         },
    88         createMultipleChoiceInputEditWidget: function(config) {
    89             return new MultipleChoiceInputConfigWidget({
    90                 value: config
    91             });
    92         },
    93 
    94         createScaleInputViewWidget: function(options) {
    95             return new ScaleInputWidget(options);
    96         },
    97         createScaleInputEditWidget: function(options) {
    98             return new ScaleInputConfigWidget({
    99                 value: options || {}
    100             });
    101         }
    102     });
    103 
    104     var DividerView = declare([_WidgetBase], {
    105         postCreate: function() {
    106             this.domNode.innerHTML = "<hr>";
     75            return edit || null;
    10776        }
    10877    });

  • Dev/trunk/src/client/qed-client/model/widgets/questions/MultipleChoiceInputConfigWidget.js

    r506 r510  
    1919   
    2020    return declare([_ComplexValueWidget],{
    21         type: 'MultipleChoiceInput',
    2221        baseClass: 'qedMultipleChoiceWidget',
    2322        templateString: template,
    … …  
    5150            });
    5251        },
    53         _getValueAttr: function() {
    54             var value = this.inherited(arguments);
    55             value.type = this.type;
    56             value.allowMultiple = value.allowMultiple.length > 0;
    57             return value;
    58         },
    59         _setValueAttr: function(value) {
    60             value.allowMultiple = value.allowMultiple ? ["on"] : [];
    61             return this.inherited(arguments);
    62         },
    6352        onAddItem: function(evt) {
    6453            this.itemsWidget.appendItem({},true);

  • Dev/trunk/src/client/qed-client/model/widgets/questions/MultipleChoiceInputWidget.js

    r508 r510  
    55    "dijit/_WidgetsInTemplateMixin",
    66    "dijit/form/CheckBox",
    7     "dijit/form/RadioButton",
    87    "dojo/_base/array",
    98    "dojo/_base/declare",
    109    "dojo/dom-construct",
    1110    "dojo/text!./templates/MultipleChoiceInputWidget.html"
    12 ], function(_Container, _TemplatedMixin, _WidgetBase, _WidgetsInTemplateMixin, CheckBox, RadioButton, array, declare, domConstruct, template) {
     11], function(_Container, _TemplatedMixin, _WidgetBase, _WidgetsInTemplateMixin, CheckBox, array, declare, domConstruct, template) {
    1312    return declare([_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin,_Container],{
    1413        templateString: template,
    … …  
    1817
    1918            domConstruct.empty(this.domNode);
    20             var Ctor = this.allowMultiple === true ? CheckBox : RadioButton;
    2119            array.forEach(this.items, function(item){
    2220                var div = domConstruct.create("div", {
    2321                }, this.domNode, "last");
    24                 var input = new Ctor({
    25                     name: this.code + (this.allowMultiple === true ? item.subcode : ''),
    26                     value: this.allowMultiple === true ? null : item.subcode
     22                var input = new CheckBox({
     23                    name: this.code + item.subcode,
     24                    value: 1
    2725                }).placeAt(div);
    2826                var label = domConstruct.create("label",{

  • Dev/trunk/src/client/qed-client/model/widgets/questions/NumberInputConfigWidget.js

    r506 r510  
    55], function(_ComplexValueWidget, declare, template) {
    66    return declare([_ComplexValueWidget],{
    7         type: 'NumberInput',
    8         templateString: template,
    9         _getValueAttr: function() {
    10             var value = this.inherited(arguments);
    11             value.type = this.type;
    12             return value;
    13         }
     7        baseClass: 'qedNumberInputConfig',
     8        templateString: template
    149    });
    1510});

  • Dev/trunk/src/client/qed-client/model/widgets/questions/NumberInputWidget.js

    r508 r510  
    1010        templateString: template,
    1111        text: '',
     12        subcode: '',
    1213        startup: function() {
    1314            if ( this._started ) { return; }

  • Dev/trunk/src/client/qed-client/model/widgets/questions/ScaleInputConfigWidget.js

    r490 r510  
    7979            return false;
    8080        },
    81         _getValueAttr: function(){
    82             var value = this.inherited(arguments);
    83             value.type = 'ScaleInput';
    84             return value;
    85         },
    8681        onNAChange: function(value) {
    8782            this._hasNA = value !== null && value !== "";

  • Dev/trunk/src/client/qed-client/model/widgets/questions/StringInputConfigWidget.js

    r443 r510  
    55], function(_ComplexValueWidget, declare, template) {
    66    return declare([_ComplexValueWidget],{
    7         type: 'StringInput',
    8         templateString: template,
    9         _getValueAttr: function() {
    10             var value = this.inherited(arguments);
    11             value.type = this.type;
    12             return value;
    13         }
     7        baseClass: 'qedStringInputConfig',
     8        templateString: template
    149    });
    1510});

  • Dev/trunk/src/client/qed-client/model/widgets/questions/StringInputWidget.js

    r508 r510  
    99    return declare([_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin,_Container],{
    1010        templateString: template,
    11         text: ''
     11        text: '',
     12        subcode: ''
    1213    });
    1314});

  • Dev/trunk/src/client/qed-client/model/widgets/questions/TextConfigWidget.js

    r443 r510  
    55], function(_ComplexValueWidget, declare, template) {
    66    return declare([_ComplexValueWidget],{
    7         type: 'Text',
    8         templateString: template,
    9         _getValueAttr: function() {
    10             var value = this.inherited(arguments);
    11             value.type = this.type;
    12             return value;
    13         }
     7        templateString: template
    148    });
    159});

  • Dev/trunk/src/client/qed-client/model/widgets/questions/TextInputConfigWidget.js

    r506 r510  
    55], function(_ComplexValueWidget, declare, template) {
    66    return declare([_ComplexValueWidget],{
    7         type: 'TextInput',
    8         templateString: template,
    9         _getValueAttr: function() {
    10             var value = this.inherited(arguments);
    11             value.type = this.type;
    12             return value;
    13         }
     7        baseClass: 'qedTextInputConfig',
     8        templateString: template
    149    });
    1510});

  • Dev/trunk/src/client/qed-client/model/widgets/questions/TextInputWidget.js

    r508 r510  
    1010        templateString: template,
    1111        text: '',
     12        subcode: '',
    1213        startup: function() {
    1314            if ( this._started ) { return; }

  • Dev/trunk/src/client/qed-client/model/widgets/questions/templates/MultipleChoiceInputConfigRowWidget.html

    r506 r510  
    11<form>
    2     <div data-dojo-type="dijit/form/ValidationTextBox"
    3          data-dojo-props="required: true, placeholder: 'Subcode'"
     2  <div data-dojo-type="dijit/form/CheckBox"
     3       data-dojo-props="disabled: true, readOnly: true"></div>
     4  <div data-dojo-type="dijit/form/ValidationTextBox"
     5       data-dojo-props="required: true, placeholder: 'Subcode'"
    46       class="subcode"
    5          name="subcode"></div>
     7       name="subcode"></div>
    68  <div data-dojo-type="dijit/form/ValidationTextBox"
    79       data-dojo-props="required: true, placeholder: 'Item text'"

  • Dev/trunk/src/client/qed-client/model/widgets/questions/templates/MultipleChoiceInputConfigWidget.html

    r506 r510  
    11<form class="${baseClass}">
    2   <div>
    3     <label class="qedLabel" for="allowMultiple">Allow multiple</label>
    4     <div name="allowMultiple" data-dojo-type="dijit/form/CheckBox"></div>
    5   </div>
    62  <div data-dojo-attach-point="itemsNode">
    73  </div>

  • Dev/trunk/src/client/qed-client/model/widgets/questions/templates/NumberInputConfigWidget.html

    r506 r510  
    1 <form>
     1<form class="${baseClass}">
    22  <div>
    33    <label class="qedLabel" for="text">Subcode</label>
    4     <div class="qedField"
     4    <div class="qedField subcode"
    55         data-dojo-attach-point="subcodeBox"
    66         data-dojo-type="dijit/form/ValidationTextBox"

  • Dev/trunk/src/client/qed-client/model/widgets/questions/templates/StringInputConfigWidget.html

    r506 r510  
    1 <form>
     1<form class="${baseClass}">
    22  <div>
    3     <label class="qedLabel" for="text">Subcode</label>
    4     <div class="qedField"
     3    <label class="qedLabel" for="subcode">Subcode</label>
     4    <div class="qedField subcode"
    55         data-dojo-attach-point="subcodeBox"
    66         data-dojo-type="dijit/form/ValidationTextBox"

  • Dev/trunk/src/client/qed-client/model/widgets/questions/templates/TextConfigWidget.html

    r461 r510  
    11<form>
    22  <label for="text" class="qedLabel">Text</label>
    3   <textarea class="qedField" data-dojo-type="dijit/form/Textarea" name="text"></textarea>
     3  <textarea class="qedField"
     4            data-dojo-type="dijit/form/Textarea"
     5            data-dojo-props="required: true"
     6            name="text"></textarea>
    47</form>

  • Dev/trunk/src/client/qed-client/model/widgets/questions/templates/TextInputConfigWidget.html

    r506 r510  
    1 <form>
     1<form class="${baseClass}">
    22  <div>
    33    <label class="qedLabel" for="text">Subcode</label>
    4     <div class="qedField"
     4    <div class="qedField subcode"
    55         data-dojo-attach-point="subcodeBox"
    66         data-dojo-type="dijit/form/ValidationTextBox"
Note: See TracChangeset for help on using the changeset viewer.