Ignore:
Timestamp:
07/03/12 16:57:07 (13 years ago)
Author:
hendrikvanantwerpen
Message:

Merge and integrate mockups in proper pages.

File:
1 edited

Legend:

Unmodified
Added
Removed

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

    r316 r350  
    88    'dijit/_Container',
    99    './LineWithActionsWidget',
    10     'dojo/text!./templates/Selector.html'
     10    'dojo/text!./templates/Selector.html',
     11    'dojo/dom-class'
    1112    ],function(
    1213        declare,
    … …  
    1819        _Container,
    1920        LineWithActionsWidget,
    20         templateString
     21        templateString,
     22        domClass
    2123        ){
    2224        return declare('rft.ui.Selector',[_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin,_Container],{
    … …  
    2426            title: "The professional as a participant",
    2527            baseClass: 'rftSelector',
     28            modifiers: 'blue',    // Extra CSS classes
    2629            postCreate: function() {
     30                domClass.add(this.domNode, this.modifiers);
     31                domClass.add(this.selectedColorNode, "pending");
    2732                var infoFunction = function() {
    2833                    alert("Show info here");
    … …  
    3035                new LineWithActionsWidget({
    3136                    title: this.title,
     37                    modifiers: this.modifiers,
    3238                    actions: {
    33                         "Select" : function(){}
     39                        "AddToSurvey" : {
     40                            callback: function(arg){},
     41                            properties: {
     42                                blockButton: true,
     43                                modifiers: this.modifiers,
     44                                icon: "Accept",
     45                                label: "Include"
     46                            }
     47                        }
    3448                    }
    3549                },this.titleNode);
    36                 new LineWithActionsWidget({
     50                var selectorLine = new LineWithActionsWidget({
    3751                    title: 'None',
     52                    modifiers: this.modifiers,
    3853                    actions: {
    39                         "V" : lang.hitch(this,function(){
    40                             var node = this.optionsNode;
    41                             var show = fx.wipeIn({
    42                                 node: node
    43                             });
    44                             var hide = fx.wipeOut({
    45                                 node: node
    46                             });
    47                             hide.play();
    48                             var folded = true;
    49                             return function(e) {
    50                                 if ( folded ) {
    51                                     show.play();
    52                                     folded = false;
    53                                 } else {
    54                                     hide.play();
    55                                     folded = true;
     54                        "ToggleDropdown" : {
     55                            callback: lang.hitch(this,function(){
     56                                var node = this.optionsNode;
     57                                var show = fx.wipeIn({
     58                                    node: node
     59                                });
     60                                var hide = fx.wipeOut({
     61                                    node: node
     62                                });
     63                                hide.play();
     64                                var folded = true;
     65                                return function(e) {
     66                                    if ( folded ) {
     67                                        // Bit of an ugly solution, really. Limit workload by limiting search to child elements of selecorLine.buttonsNode
     68                                        var downArrowIcon = dojo.query(".rftBlockButton .rftIconHalfArrowDown", selectorLine.buttonsNode)[0];  // Query the down arrow rftIcon span
     69                                        if (downArrowIcon){
     70                                            domClass.replace(downArrowIcon, "rftIconHalfArrowUp", "rftIconHalfArrowDown");
     71                                        }
     72                                        show.play();
     73                                        folded = false;
     74                                    } else {
     75                                        // Bit of an ugly solution, really. Limit workload by limiting search to child elements of selecorLine.buttonsNode
     76                                        var upArrowIcon = dojo.query(".rftBlockButton .rftIconHalfArrowUp", selectorLine.buttonsNode)[0];  // Query the up arrow rftIcon span
     77                                        if (upArrowIcon){
     78                                            domClass.replace(upArrowIcon, "rftIconHalfArrowDown", "rftIconHalfArrowUp");
     79                                        }
     80                                        hide.play();
     81                                        folded = true;
    5682                           
    57                                 }
    58                                 e.preventDefault();
    59                                 e.stopPropagation();
    60                             };
    61                         })()
     83                                    }
     84                                    e.preventDefault();
     85                                    e.stopPropagation();
     86                                };
     87                            })(),
     88                            properties: {
     89                                blockButton: true,
     90                                modifiers: this.modifiers,
     91                                showLabel: false,
     92                                icon: "HalfArrowDown"
     93                            }
     94                        }
    6295                    }
    6396                },this.selectedItemNode);
    … …  
    6598                    title: 'Are there direct colleagues among the other participants?',
    6699                    actions: {
    67                         "i" : infoFunction
    68                     }
    69                 }).placeAt(this.optionsNode);
    70                 new LineWithActionsWidget({
    71                     title: 'Do you personally know ithers present at the current session?',
    72                     actions: {
    73                         "i" : infoFunction
    74                     }
    75                 }).placeAt(this.optionsNode);
    76                 new LineWithActionsWidget({
    77                     title: 'Have you worked with other participants before?',
    78                     actions: {
    79                         "i" : infoFunction
     100                        "InfoHover" : {
     101                            callback: infoFunction,
     102                            properties: {
     103                                blockButton: false,
     104                                showLabel: false,
     105                                icon: "Inspect"
     106                            }
     107                        }
    80108                    }
    81109                }).placeAt(this.optionsNode);
Note: See TracChangeset for help on using the changeset viewer.