Changeset 404 for Dev


Ignore:
Timestamp:
09/03/12 13:37:01 (13 years ago)
Author:
hendrikvanantwerpen
Message:

Enable configuring multiple choice question items.

Allow widgets in ordered list by using mixin. Used this to create multiple
choice options. The options widget itself needs some styling.

Show code in question item preview and label to stop editing is 'Done'
to stop confusion about saving.

Location:
Dev/branches/rest-dojo-ui/client/rft/ui
Files:
1 added
5 edited

Legend:

Unmodified
Added
Removed

  • Dev/branches/rest-dojo-ui/client/rft/ui/QuestionEditorPreviewItem.js

    r399 r404  
    4747                    this.innerWidget.set('readOnly',true);
    4848                }
    49                 this.titleNode.innerHTML = this.item.type+" [preview]";
     49                this.titleNode.innerHTML = (this.item.code||"(no node)")+" : "+this.item.type+" [preview]";
    5050            },
    5151            _showEditWidget: function() {
    … …  
    5656                    this.innerWidget.startup();
    5757                }
    58                 this.titleNode.innerHTML = this.item.type+" [editing]";
     58                this.titleNode.innerHTML = (this.item.code||"(no node)")+" : "+this.item.type+" [editing]";
    5959            },
    6060            onClose: function() {},
    … …  
    8484                    this._showEditWidget();
    8585                    this.editButtonNode.iconNode.className = this.editButtonNode.iconNode.className.replace("rftIconEdit", "rftIconAccept");
    86                     this.editButtonNode.set("label", "Save");
     86                    this.editButtonNode.set("label", "Done");
    8787                }
    8888                this._editing = !this._editing;

  • Dev/branches/rest-dojo-ui/client/rft/ui/content/ContentWidgetFactory.js

    r402 r404  
    44    'dojo/_base/lang',
    55    'dojo/dom-construct',
     6    'dijit/_TemplatedMixin',
    67    'dijit/_WidgetBase',
    78    'dijit/_Container',
    … …  
    1314    'dijit/form/TextBox',
    1415    'dojox/layout/TableContainer',
     16    './../lists/_EditableListMixin',
    1517    './../lists/OrderedList'
    16 ],function(array, declare, lang, domConstruct, _WidgetBase, _Container, Button, CheckBox, NumberSpinner, RadioButton, Textarea, TextBox, TableContainer, OrderedList) {
     18],function(array, declare, lang, domConstruct, _TemplatedMixin, _WidgetBase, _Container, Button, CheckBox, NumberSpinner, RadioButton, Textarea, TextBox, TableContainer, _EditableListMixin, OrderedList) {
    1719    var factory = declare('rft.ui.content.ContentWidgetFactory', [], {
    1820        /* No default type, all should be valid */
    … …  
    331333
    332334            var ctor = this.options.multiple === true ? CheckBox : RadioButton;
    333             array.forEach(this.options.items || ["Aap", "Noot"],function(item){
     335            array.forEach(this.options.items ,function(item){
    334336                table.addChild(new ctor({
    335                     title: item
     337                        title: item
    336338                }));
    337339            },this);
    … …  
    362364    });
    363365
    364     var MCOptionItem = declare([_WidgetBase,_Container],{
     366    var MCOptionItem = declare([_WidgetBase,_TemplatedMixin,_Container],{
     367        templateString: '<div><span class="dojoDndHandle">=</span></div>',
    365368        _textBox: null,
    366369        postCreate: function() {
    367             this.innerHTML = '<span class="dojoDndHandle">=</span>';
    368 
    369370            this._textBox = new TextBox({});
    370371            this.addChild(this._textBox);
    … …  
    387388    });
    388389
     390    var MCOptionList = declare([OrderedList,_EditableListMixin],{
     391        type: 'multipleChoiceOption',
     392        withHandles: true,
     393        _createAvatarNode: function(item){
     394            return domConstruct.create("div",{
     395                'class': 'dragAvatar',
     396                innerHTML: item
     397            });
     398        },
     399        _createListNode: function(item) {
     400            var w = new MCOptionItem();
     401            w.startup();
     402            w.set('value',item);
     403            w.on('delete',lang.hitch(this,'_onRemove',w));
     404            return w.domNode;
     405        },
     406        _onRemove: function(w) {
     407            w.destroyRecursive();
     408            this.removeCallback && this.removeCallback(item);
     409            this.source.sync();
     410        }
     411    });
     412
    389413    var MultipleChoiceInputEdit = declare([_WidgetBase, _Container], {
    390414        _codeInput: null,
    … …  
    412436            add.startup();
    413437
    414             this._optionsList = new OrderedList({
    415                 type: 'multipleChoiceOption',
    416                 withHandles: true,
    417                 _createAvatarNode: function(item){
    418                     return domConstruct.create("div",{
    419                         'class': 'dragAvatar',
    420                         innerHTML: item
    421                     });
    422                 },
    423                 _createListNode: function(item) {
    424                     var w = new MCOptionItem();
    425                     w.startup();
    426                     w.set('value',item);
    427                     w.on('delete',lang.hitch(this,function(){
    428                         this._optionsList.removeItem(w);
    429                     }));
    430                     return w.domNode;
    431                 }
    432             });
     438            this._optionsList = new MCOptionList();
    433439            table.addChild(this._optionsList);
    434440            this._optionsList.startup();
    … …  
    436442            this.addChild(table);
    437443            table.startup();
     444        },
     445
     446        _addOption: function() {
     447            this._optionsList.appendItems([""]);
    438448        },
    439449

  • Dev/branches/rest-dojo-ui/client/rft/ui/lists/List.js

    r402 r404  
    99    'dijit/layout/BorderContainer',
    1010    'dojo/text!./templates/List.html'
    11     ],function(
    12         declare,
    13         lang,
    14         Source,
    15         _TemplatedMixin,
    16         _WidgetBase,
    17         _WidgetsInTemplateMixin,
    18         registry,
    19         BorderContainer,
    20         templateString
    21         ){
    22         return declare('rft.ui.lists.List',[BorderContainer,_TemplatedMixin,_WidgetsInTemplateMixin],{
    23             templateString: templateString,
    24             baseClass: 'rftList',
    25             removeCallback: null,
    26             type: 'text',
    27             withHandles: false,
    28             source: null,
     11],function(
     12    declare,
     13    lang,
     14    Source,
     15    _TemplatedMixin,
     16    _WidgetBase,
     17    _WidgetsInTemplateMixin,
     18    registry,
     19    BorderContainer,
     20    templateString){
     21    return declare('rft.ui.lists.List',[BorderContainer,_TemplatedMixin,_WidgetsInTemplateMixin],{
     22        templateString: templateString,
     23        baseClass: 'rftList',
     24        removeCallback: null,
     25        type: 'text',
     26        withHandles: false,
     27        source: null,
    2928
    30             startup: function() {
    31                 this.inherited(arguments);
     29        startup: function() {
     30            this.inherited(arguments);
    3231
    33                 if (this.title) {
    34                     this.titleNode.innerHTML = this.title;
    35                 }
    36 
    37                 this.source = new Source(this.sourceNode.domNode, {
    38                     accept: [this.type],
    39                     singular: true,
    40                     withHandles: this.withHandles,
    41                     creator: lang.hitch(this, this._createNode)
    42                 });
    43             },
    44 
    45             _createNode: function(item, hint) {
    46                 var node = hint === "avatar" ?
    47                         this._createAvatarNode(item) : this._createListNode(item);
    48                 return node && {
    49                     node: node,
    50                     data: item,
    51                     type: this.type
    52                 };
    53             },
    54             _createListNode: function(item) {},
    55             _createAvatarNode: function(item) {},
    56 
    57             appendItem: function(item) {
    58                 this.source.insertNodes(false,[item]);
    59             },
    60             appendItems: function(items) {
    61                 this.source.insertNodes(false,items);
    62             },
    63 
    64             getItems: function() {
    65                 return this.source.getAllNodes()
    66                 .map(function(node){
    67                     return this.source.getItem(node.id).data;
    68                 },this);
    69             },
    70 
    71             deleteItems: function() {
    72                 this.source.getAllNodes()
    73                 .forEach(function(node){
    74                     registry.byNode(node).destroyRecursive();
    75                 });
    76                 this.source.sync();
    77             },
    78 
    79             removeItem: function(item){
    80                 this.source.getAllNodes()
    81                 .filter(lang.hitch(this,function(node){
    82                     return this.source.getItem(node.id).data === item;
    83                 }))
    84                 .forEach(lang.hitch(this,function(node){
    85                     registry.byNode(node).destroyRecursive();
    86                     this.removeCallback && this.removeCallback(item);
    87                 }));
    88                 this.source.sync();
     32            if (this.title) {
     33                this.titleNode.innerHTML = this.title;
    8934            }
    9035
    91         });
     36            this.source = new Source(this.sourceNode.domNode, {
     37                accept: [this.type],
     38                singular: true,
     39                withHandles: this.withHandles,
     40                creator: lang.hitch(this, this._createNode)
     41            });
     42        },
     43
     44        _createNode: function(item, hint) {
     45            var node = hint === "avatar" ?
     46                    this._createAvatarNode(item) : this._createListNode(item);
     47            return node && {
     48                node: node,
     49                data: item,
     50                type: this.type
     51            };
     52        },
     53        _createListNode: function(item) {},
     54        _createAvatarNode: function(item) {},
     55
     56        appendItem: function(item) {
     57            this.source.insertNodes(false,[item]);
     58        },
     59        appendItems: function(items) {
     60            this.source.insertNodes(false,items);
     61        },
     62
     63        getItems: function() {
     64            return this.source.getAllNodes()
     65            .map(function(node){
     66                return this.source.getItem(node.id).data;
     67            },this);
     68        },
     69
     70        deleteItems: function() {
     71            this.source.getAllNodes()
     72            .forEach(function(node){
     73                registry.byNode(node).destroyRecursive();
     74            });
     75            this.source.sync();
     76        },
     77
     78        removeItem: function(item){
     79            this.source.getAllNodes()
     80            .filter(lang.hitch(this,function(node){
     81                return this.source.getItem(node.id).data === item;
     82            }))
     83            .forEach(lang.hitch(this,function(node){
     84                registry.byNode(node).destroyRecursive();
     85                this.removeCallback && this.removeCallback(item);
     86            }));
     87            this.source.sync();
     88        }
     89
    9290    });
     91});

  • Dev/branches/rest-dojo-ui/client/rft/ui/lists/OrderedList.js

    r389 r404  
    4545                var node = this.source.getSelectedNodes()[0];
    4646                if (node) {
    47                     if (dir == "up") {
     47                    if (dir === "up") {
    4848                        if (node.previousSibling) {
    4949                            return node.parentNode.insertBefore(node, node.previousSibling);
    … …  
    5252                        }
    5353
    54                     } else if (dir == "down") {
     54                    } else if (dir === "down") {
    5555                        if (node.nextSibling) {
    5656                            return node.parentNode.insertBefore(node.nextSibling, node);

  • Dev/branches/rest-dojo-ui/client/rft/ui/templates/QuestionEditorToolkit.html

    r397 r404  
    55                                <fieldset class="align">
    66                                        <label>Title:</label><input data-dojo-type="dijit.form.TextBox" name="title"/>
    7                                         <label>Code:</label><input data-dojo-type="dijit.form.TextBox" name= "_id"/>
     7                                        <label>Code:</label><input data-dojo-type="dijit.form.TextBox" name= "code"/>
    88                                        <label>Categories:</label>
    99                                        <div data-dojo-attach-point="listNode" class="rftLineListView"></div>
Note: See TracChangeset for help on using the changeset viewer.