Changeset 354


Ignore:
Timestamp:
07/09/12 19:24:56 (13 years ago)
Author:
tjcschipper
Message:
  • Made change to _Page.js to destroy the page's child widgets on page leave. This was causing widgets with identical names (such as "btnSave") to make regsitry throw a duplicate widget error.
  • survey.js/html now sorts loaded questions into categories and topics and creates or adds them to the proper TabPane/Selectors?. TODO: Allow for spaces in category titles.
  • Added "addQuestion()" method to Selector.js, to internalize question visualization logic.
  • Included surveyAdvanced page in run.js
  • Changes index to use proper button format, still need to figure out a way to bind content.goTo to the onclick field (since there is no index.js script being run!)
  • Various css tweaks.
Location:
Dev/branches/rest-dojo-ui/client
Files:
9 edited

Legend:

Unmodified
Added
Removed

  • Dev/branches/rest-dojo-ui/client/mSurveyAdvanced.html

    r349 r354  
    4343        'rft/ui/LineWithActionsWidgetThijs',
    4444        'rft/ui/TitleGroup',
     45        'rft/ui/SurveyEditorPreview',
    4546        'dojo/domReady!'
    4647        ],function(parser){
    … …  
    4849        });
    4950
    50 function goToPage(name) {
    51     window.location = "http://localhost/RESEARCHTOOL/Dev/branches/rest-dojo-ui/client/"+name+".html";
    52 }
    5351</script>
    5452</head>
    5553
    56 <body class="dijitReset claro">
     54<body class="dijitReset claro blue">
    5755    <div class="page" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
    5856        <!-- Top menu bar -->
    … …  
    7674                </div>
    7775
     76
     77
     78
    7879                <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'left', design:'headline'" style="width: 300px;">
    7980                    <!-- Left toolbar -->
    8081                    <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
    8182                        <!--Accordion-->
    82                         <div data-dojo-type="dijit.layout.AccordionContainer" class="orange">
    83                             <div data-dojo-type="dijit.layout.ContentPane" title="Included questions" data-dojo-props="iconClass: 'rftIcon rftIconQuestion'">
    84                                 <div data-dojo-type="rft.ui.List">
    85                                     <div data-dojo-type="rft.ui.LineWithActionsWidgetThijs" data-dojo-props="title:'Question 1', actions:{'remove':{callback: function(){}, properties: {blockButton: false, modifiers: 'white', icon: 'Delete'}}}"></div>
    86                                     <div data-dojo-type="rft.ui.LineWithActionsWidgetThijs" data-dojo-props="title:'Question 1', actions:{'remove':{callback: function(){}, properties: {blockButton: false, modifiers: 'white', icon: 'Delete'}}}"></div>
    87                                     <div data-dojo-type="rft.ui.LineWithActionsWidgetThijs" data-dojo-props="title:'Question 1', actions:{'remove':{callback: function(){}, properties: {blockButton: false, modifiers: 'white', icon: 'Delete'}}}"></div>
    88                                     <div data-dojo-type="rft.ui.LineWithActionsWidgetThijs" data-dojo-props="title:'Question 1', actions:{'remove':{callback: function(){}, properties: {blockButton: false, modifiers: 'white', icon: 'Delete'}}}"></div>
     83                        <div data-dojo-type="dijit.layout.AccordionContainer" class="blue">
     84                            <div data-dojo-type="dijit.layout.ContentPane" title="Content" data-dojo-props="iconClass:'rftIcon rftIconPlus'">
     85                                <div data-dojo-type="dojo.dnd.Source" id="toolkitSource" data-dojo-props="skipForm: true, accept:[], selfAccept: false, copyOnly: true, horizontal: false, singular: true">
     86                                                       
    8987                                </div>
    90                             </div>
    91                             <div data-dojo-type="dijit.layout.ContentPane" title="Content" data-dojo-props="iconClass:'rftIcon rftIconPlus'">
    92                                 <!-- Content objects here -->
    9388                            </div>
    9489                        </div>
    9590                    </div>
    96                     <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'">
    97                         <!--Buttons-->
    98                         <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconAccept'">Save</button>
    99                         <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconCancel'">Discard</button>
    100                         <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconUndo'">Exit Design</button>
    101                     </div>
     91                    <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'"
     92                    >                    <!--Buttons-->
     93                    <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconAccept'">Save</button>
     94                    <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconCancel'">Discard</button>
     95                    <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconUndo'">Exit Design</button>
     96                </div>
     97            </div>
     98
     99
     100
     101
     102
     103
     104            <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
     105                <div data-dojo-type="rft.ui.SurveyEditorPreview" data-dojo-id="SurveyEditorPreview">
     106                    <!-- Center preview/editor -->
    102107                </div>
    103108
    104                 <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'center'">
    105                     <!-- Center preview/editor -->
    106                     <div class="QuestionEditor">
    107                         <div class="PreviewWindow">Content here</div>
    108                     </div>
    109                 </div>
     109                <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconPlus', onClick: function(){SurveyEditorPreview.InsertObjects([{data:{title: 'New item', description: 'Default', code: 'QAB01F'}, type: 'editorToolkitItem'}]);}">Add new</button>
    110110            </div>
    111111        </div>
    112112    </div>
     113</div>
    113114</body>
    114115</html>

  • Dev/branches/rest-dojo-ui/client/rft/css/layout.css

    r349 r354  
    281281    /* Nothing yet, put preview window styling options here after we've decided on a format to follow! */
    282282}
    283 
    284283.claro .dijitAccordionContainer {
    285284    /* No styling for now, use this for margins and other layout-related business. This class does not affect the look of the AccordionContainer currently! */
    … …  
    339338}
    340339
    341 
    342 /* THIS IS AN EXPERIMENT !
    343  * This will allow to set one top colour, then all the "objectBgColor" or "objectHlColor" objects below it will inherit that colour, and apply it to the relevant CSS property.
    344  * Not applying these classes to an object will make it bypass the background settings.
    345 */
    346 
    347 .claro div.blue.objectBgColor,
    348 .claro .blue .objectBgColor {
    349     background-color: #0072bc;
    350 }
    351 .claro div.lblue.objectBgColor,
    352 .claro .lblue .objectBgColor {
     340/* Experimental background colour inheritance */
     341.claro div.blue.inheritBgColor,
     342.claro .blue .inheritBgColor,
     343.claro.blue .inheritBgColor {
     344    background-color: #0072bc;
     345}
     346.claro div.green.inheritBgColor,
     347.claro .green .inheritBgColor,
     348.claro.green .inheritBgColor {
     349    background-color: #3aa605;
     350}
     351.claro div.orange.inheritBgColor,
     352.claro .orange .inheritBgColor,
     353.claro.orange .inheritBgColor {
     354    background-color: #ff5b12;
     355}
     356.claro div.purple.inheritBgColor,
     357.claro .purple .inheritBgColor,
     358.claro.purple .inheritBgColor {
     359    background-color: #6529b7;
     360}
     361.claro div.red.inheritBgColor,
     362.claro .red .inheritBgColor,
     363.claro.red .inheritBgColor {
     364    background-color: #8c0310;
     365}
     366.claro div.trans.inheritBgColor,
     367.claro .trans .inheritBgColor,
     368.claro.trans .inheritBgColor {
     369    background-color: transparent;
     370}
     371.claro div.blue.inheritBgColor.light,
     372.claro .blue .inheritBgColor.light,
     373.claro.blue .inheritBgColor.light {
    353374    background-color: #0794d1;
    354375}
    355 .claro div.orange.objectBgColor,
    356 .claro .orange .objectBgColor {
    357     background-color: #ff5b12;
    358 }
    359 .claro div.lorange.objectBgColor,
    360 .claro .lorange .objectBgColor {
     376.claro div.green.inheritBgColor.light,
     377.claro .green .inheritBgColor.light,
     378.claro.green .inheritBgColor.light {
     379    background-color: #79ca0a;
     380}
     381.claro div.orange.inheritBgColor.light,
     382.claro .orange .inheritBgColor.light,
     383.claro.orange .inheritBgColor.light {
    361384    background-color: #ff9140;
    362385}
    363 .claro div.green.objectBgColor,
    364 .claro .green .objectBgColor {
    365     background-color: #3aa605;
    366 }
    367 .claro div.lgreen.objectBgColor,
    368 .claro .lgreen .objectBgColor {
    369     background-color: #79ca0a;
    370 }
    371 .claro div.purple.objectBgColor,
    372 .claro .purple .objectBgColor {
    373     background-color: #6529b7;
    374 }
    375 .claro div.lpurple.objectBgColor,
    376 .claro .lpurple .objectBgColor {
     386.claro div.purple.inheritBgColor.light,
     387.claro .purple .inheritBgColor.light,
     388.claro.purple .inheritBgColor.light {
    377389    background-color: #993dec;
    378390}
    379 .claro div.red.objectBgColor,
    380 .claro .red .objectBgColor {
    381     background-color: #8c0310;
    382 }
    383 .claro div.lred.objectBgColor,
    384 .claro .lred .objectBgColor {
     391.claro div.red.inheritBgColor.light,
     392.claro .red .inheritBgColor.light,
     393.claro.red .inheritBgColor.light {
    385394    background-color: #bd0013;
    386395}
    387 /* TODO: Apply these classes to display elements that need to inherit the interface's object colour!
    388     Remove/disable other references to these colours from files like rftButtons, rftLineWithButtons, etc to make sure it works properly.
    389     Put these settings in a separate "colours.css" file to separate the concern of styling these objects from other layout-oriented properties.
    390     When we add things like highlightColours, borders, etc, the list could become quite long, especially if more colours are added to the colour scheme in time.
    391  */
    392 
    393 
    394 
    395 
    396 
    397  /* Dropdown menu on MenuBar*/
     396
     397/*TODO: Apply these classes to display elements that need to inherit the interface's object colour!
     398Remove/disable other references to these colours from files like rftButtons, rftLineWithButtons, etc to make sure it works properly.
     399Put these settings in a separate "colours.css" file to separate the concern of styling these objects from other layout-oriented properties.
     400When we add things like highlightColours, borders, etc, the list could become quite long, especially if more colours are added to the colour scheme in time.
     401
     402
     403Dropdown menu on MenuBar*/
    398404.claro .dijitMenuPopup {
    399405
    400406}
    401407.claro .dijitMenuPopup .dijitMenu {
    402 border: none;
    403 background-color: #333333;
    404 background-image: none;
    405 color: #999999;   
     408    border: none;
     409    background-color: #333333;
     410    background-image: none;
     411    color: #999999;   
    406412}
    407413.claro .dijitMenuPopup .dijitMenu .dijitMenuItem {
    … …  
    445451    background-image: url('images/icons/rftIcons16b.png');
    446452}
     453
     454
     455
     456
     457/* Alignment */
     458.claro .floatRight {
     459    float: right;
     460    margin: 0;
     461    padding: 0;
     462}

  • Dev/branches/rest-dojo-ui/client/rft/css/main.css

    r346 r354  
    1010@import url('rftObjectBox.css');
    1111@import url('sessionEditor.css');
     12@import url('surveyEditor.css');

  • Dev/branches/rest-dojo-ui/client/rft/pages/index.html

    r347 r354  
    1010        <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
    1111
    12             <div class="rftIndexMenuBlock">
     12            <div class="rftIndexMenuBlock" title="Sessions">
    1313                <div class="rftIndexMenuMask">
    1414                    <span class="rftIcon rftIconSession"></span><span class="label">Sessions</span>
    1515                </div>
    16                 <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftIndexMenuButton', class: 'green twoHeight', iconClass: 'rftIcon rftIconPlus'" onClick="goToPage('mSessions');">Create and edit</button>
    17                 <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftIndexMenuButton', class: 'green twoHeight', iconClass: 'rftIcon rftIconForward'" onClick="goToPage('mSessions');">Facilitate</button>
     16                <button id="btnContentCreate" data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftIndexMenuButton', class: 'green twoHeight', iconClass: 'rftIcon rftIconPlus'">Create and edit</button>
     17                <button id="btnContentFacilitate" data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftIndexMenuButton', class: 'green twoHeight', iconClass: 'rftIcon rftIconForward'">Facilitate</button>
    1818            </div>
    1919
    20             <div class="rftIndexMenuBlock">
     20            <div class="rftIndexMenuBlock" title="Content">
    2121                <div class="rftIndexMenuMask">
    2222                    <span class="rftIcon rftIconInspect"></span><span class="label">Content</span>
    2323                </div>
    24                 <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftIndexMenuButton', class: 'blue oneHeight', iconClass: 'rftIcon rftIconSurvey'" onClick="goToPage('mSurveys');">Surveys</button>
    25                 <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftIndexMenuButton', class: 'orange oneHeight', iconClass: 'rftIcon rftIconQuestion'" onClick="goToPage('mQuestions');">Questions</button>
    26                 <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftIndexMenuButton', class: 'purple oneHeight', iconClass: 'rftIcon rftIconApplication'" onClick="goToPage('mApplications');">Applications</button>
    27                 <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftIndexMenuButton', class: 'red oneHeight', iconClass: 'rftIcon rftIconDashboard'" onClick="goToPage('mDashboards');">Dashboards</button>
    28 
     24                <button id="btnSurveys" data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftIndexMenuButton', class: 'blue oneHeight', iconClass: 'rftIcon rftIconSurvey'">Surveys</button>
     25                <button id="btnQuestions" data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftIndexMenuButton', class: 'orange oneHeight', iconClass: 'rftIcon rftIconQuestion'">Questions</button>
     26                <button id="btnApplications" data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftIndexMenuButton', class: 'purple oneHeight', iconClass: 'rftIcon rftIconApplication'">Applications</button>
     27                <button id="btnDashboards" data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftIndexMenuButton', class: 'red oneHeight', iconClass: 'rftIcon rftIconDashboard'">Dashboards</button>
    2928            </div>
    3029
    31             <div class="rftIndexMenuBlock">
    32                 <div data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftIndexMenuButton', class: 'blue fourHeight', iconClass: 'rftIcon rftIconGameData'" onClick="goToPage('mResults')">Results</div>
     30            <div class="rftIndexMenuBlock" title="results">
     31                <div class="rftIndexMenuMask">
     32                    <span class="rftIcon rftIconGameData"></span><span class="label">Results</span>
     33                </div>
     34                <button id="btnResults" data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftIndexMenuButton', class: 'blue fourHeight', iconClass: 'rftIcon rftIconGameData'">Results</button>
    3335            </div>
    3436        </div>
    3537    </div>
     38
     39    <script>
     40    require([
     41        'dojo/on',
     42        'dojo/query',
     43        'dijit/registry',
     44        'rft/content'
     45        ], function(on, query, registry, content){
     46            registry.byId("btnSessionsCreate").on("click", function(){
     47                content.goTo("sessions", null);
     48            });
     49            registry.byId("btnSessionsFacilitate").on("click", function(){
     50                content.goTo("sessions", null);
     51            });
     52           
     53            registry.byId("btnSurveys").on("click", function(){
     54                content.goTo("surveys", null);
     55            });
     56            registry.byId("btnQuestions").on("click", function(){
     57                content.goTo("questions", null);
     58            });
     59            registry.byId("btnApplications").on("click", function(){
     60                content.goTo("applications", null);
     61            });
     62            registry.byId("btnDashboards").on("click", function(){
     63                content.goTo("dashboards", null);
     64            });
     65
     66            registry.byId("btnResults").on("click", function(){
     67                content.goTo("results", null);
     68            });
     69
     70        });
     71</script>
    3672</div>

  • Dev/branches/rest-dojo-ui/client/rft/pages/survey.html

    r350 r354  
    1 <div data-dojo-type="rft.pages.survey">
     1<div data-dojo-type="rft.pages.survey" id="survey">
    22    <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'center'" style="height: 500px;">
    33        <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
    44            <h2>
    55                <span class="rftIcon rftIconSurvey"></span>
    6                 <span class="headerText">Survey A [editing]</span>
     6                <span class="headerText" data-dojo-attach-point="header">Survey A [editing]</span>
    77            </h2>
    88        </div>
    … …  
    1111                Presets
    1212            </div>
    13             <div data-dojo-type="dijit.layout.TabContainer" class="blue" data-dojo-props="tabPosition:'left-h',region:'center'">
    14                 <div data-dojo-type="dijit.layout.ContentPane" title="Category One, this is a very long title to see how overflow works. This part is cut off because it passes two lines at 200px wide.">
    15                     <div data-dojo-type="rft.ui.Selector" data-dojo-props="Title:'Subcat one'"></div>
    16                     <div data-dojo-type="rft.ui.Selector" data-dojo-props="Title:'Subcat two'"></div>
    17                 </div>
    18                 <div data-dojo-type="dijit.layout.ContentPane" title="Category Two">
    19                     <div data-dojo-type="rft.ui.Selector" data-dojo-props="Title:'Subcat one'"></div>
    20                     <div data-dojo-type="rft.ui.Selector" data-dojo-props="Title:'Subcat two'"></div>
    21                 </div>
    22                 <div data-dojo-type="dijit.layout.ContentPane" title="Category Three">
    23                     <div data-dojo-type="rft.ui.Selector" data-dojo-props="Title:'Subcat one'"></div>
    24                 </div>
    25                 <div data-dojo-type="dijit.layout.ContentPane" title="Category Four">
    26                     <div data-dojo-type="rft.ui.Selector" data-dojo-props="Title:'Green Question Subcat one'"></div>
    27                     <div data-dojo-type="rft.ui.Selector" data-dojo-props="Title:'Subcat two'"></div>
    28                     <div data-dojo-type="rft.ui.Selector" data-dojo-props="Title:'Subcat three'"></div>
    29                 </div>
    30                 <div data-dojo-type="dijit.layout.ContentPane" title="Category Five">
    31                     <div data-dojo-type="rft.ui.Selector" data-dojo-props="Title:'Subcat one'"></div>
    32                     <div data-dojo-type="rft.ui.Selector" data-dojo-props="Title:'Subcat two'"></div>
    33                     <div data-dojo-type="rft.ui.Selector" data-dojo-props="Title:'Subcat three'"></div>
    34                     <div data-dojo-type="rft.ui.Selector" data-dojo-props="Title:'Subcat four'"></div>
    35                 </div>
     13            <div id="tabList" data-dojo-type="dijit.layout.TabContainer" class="blue" data-dojo-props="tabPosition:'left-h',region:'center'">
     14                <!-- tabs go here -->
    3615            </div>
    3716        </div>
    … …  
    4726            </div>
    4827            <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'bottom'">
    49                 <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconProperties'">Properties</button>
    50                 <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconAccept'">Save Changes</button>
    51                 <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconCancel'">Discard changes</button>
    52                 <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconPreview'">Preview</button>
     28                <button id="btnProperties" data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconProperties'">Properties</button>
     29                <button id="btnSave" data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconAccept'">Save Changes</button>
     30                <button id="btnDiscard" data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconCancel'">Discard changes</button>
     31                <button id="btnPreview" data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconPreview'">Preview</button>
    5332            </div>
    5433        </div>

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

    r343 r354  
    1 define(['dojo/_base/declare','dojo/_base/lang','dojo/_base/event',
    2     'dojo/_base/Deferred','rft/ui/AccordionList','rft/ui/LineWithActionsWidget',
    3     'rft/store','rft/ui/_Page','rft/api'],
    4     function(declare,lang,event,Deferred,AccordionList,LineWithActionsWidget,store,_Page,api){
     1define(['dojo/_base/declare',
     2    'dojo/_base/lang',
     3    'dojo/_base/event',
     4    'dojo/_base/Deferred',
     5    'rft/ui/AccordionList',
     6    'rft/ui/LineWithActionsWidget',
     7    'rft/store',
     8    'rft/ui/_Page',
     9    'rft/api',
     10    'dijit/registry',
     11    'rft/content',
     12    'dojo/on',
     13    'dojo/query'],
     14    function(declare,lang,event,Deferred,AccordionList,LineWithActionsWidget,store,_Page,api,registry,content, on, query){
    515        return declare('rft.pages.survey',[_Page],{
    616            object: null,
    … …  
    919                    Deferred.when(store.get(this.pageArgs.uid))
    1020                    .then(lang.hitch(this,function(obj){
    11                         this.object = obj;
    12                         this.setFields(obj);
    13                         return Deferred.when( obj.creator && store.dereference(obj.creator) );
    14                     }))
    15                     .then(lang.hitch(this,function(obj){
    16                         this.creator.innerHTML = (obj && obj.email) || 'unknown';
    17                     }));
    18                     Deferred.when(store.query('_design/default/_view/by_type',{key:'Question'}))
    19                     .then(lang.hitch(this,function(items){
    20                         this._questionList = new AccordionList({
    21                             actions: {
    22                                 'Add': lang.hitch(this,'_addQuestion')
    23                             },
    24                             categoryProperty: 'category',
    25                             titleProperty: 'title'
    26                         },this.allQuestions);
    27                         this._questionList.startup();
    28                         this._questionList.setItems(items);
    29                     }));
     21                       this.object = obj;
     22                       return Deferred.when( obj.creator && store.dereference(obj.creator) );
     23                   }));
     24                    this._createQuestionBrowser();
    3025                } else {
    31                     this.header.innerHTML = "Error: no uid for survey!"
     26                    //this.header.innerHTML = "Error: no uid for survey!"
    3227                }
     28                this._setupButtons(this);
     29                this._insertQuestion({title: "This is the question title!", sorting: {categories: ['CategoryOne', 'CategoryB123'], topic: 'The first question topic'}});
     30                this._insertQuestion({title: "BLablabla question text!", sorting: {categories: ['CategoryOne'], topic: 'The first question topic'}});
     31                this._insertQuestion({title: "Yaddayaddayaddaa ... sigh", sorting: {categories: ['CategoryThree', 'CategoryB123'], topic: 'Another topic'}});
     32            },
     33            onLeave: function() {
     34                this.inherited(arguments);
    3335            },
    3436            onReset: function() {
    … …  
    3638            },
    3739            onSave: function(evt) {
    38                 lang.mixin(this.object,this.form.get('value'));
     40                /*lang.mixin(this.object,this.form.get('value'));
    3941                Deferred.when( store.put(this.object) )
    4042                .then(lang.hitch(this,function(obj){
    … …  
    4850                evt.stopPropagation();
    4951                return false;
     52                */
    5053            },
    51             setFields: function(obj) {
    52                 this.form.reset();
    53                 this.header.innerHTML = "Edit survey '"+(obj.title || '(undefined)')+"'";
    54                 obj && this.form.set('value',obj);
     54            _goToPreview: function() {
     55                content.goTo('surveyAdvanced', {uid: this.object._id});
     56                /*
     57                * TODO: How to prevent widgets with identical id's on different pages clashing?
     58                * For example: btnSave clashes when going from survey to surveyAdvanced, since both contain one. survey.btnSave is not destroyed when loading surveyAdvanced.btnSave!
     59                * Since there is no page reload, only a contentPane content swap!
     60                * Talk to Hendrik about this!
     61                * TEMPORARY FIX IN THIS.ONLEAVE!
     62                */
    5563            },
    56             _addQuestion: function(obj) {
    57                 var d = {};
    58                 d.widget = new LineWithActionsWidget({
    59                     title:obj.title,
    60                     userObj: obj,
    61                     actions:{
    62                         "Remove": lang.hitch(this,'_removeQuestion',d)
     64            _setupButtons: function() {
     65                // Setup button events
     66                registry.byId("btnSave").on("click", lang.hitch(this, function(){
     67                    this.onSave(arguments);
     68                }));
     69                registry.byId("btnPreview").on("click", lang.hitch(this, function(){
     70                    this._goToPreview();
     71                }));
     72            },
     73            _createQuestionBrowser: function() {
     74                Deferred.when(store.query('_design/default/_view/by_type',{key:'Question'}))
     75                .then(lang.hitch(this,function(questions){
     76                 questions.forEach(function(question) {
     77                    this._insertQuestion(question);
     78                }, this);
     79             }));
     80            },
     81            _insertQuestion: function(question) {
     82                // MASSIVE TODO: The question categories cannot have spaces currently, due to the way we append them to the ID property of the container. ID's cannot have spaces.
     83                // Easy fix: Replace spaces with underscores for the time being? The alternative is to make these containers have an actual "questioncategory" property in the governing widget. Not fun.
     84                var tabs = registry.byId("tabList");
     85                for (var c in question.sorting.categories) {
     86                    var cat = question.sorting.categories[c];
     87                    var catPane = query("#tab"+cat, tabs.containerNode)[0];
     88                    if (catPane) {
     89                        this._insertIntoCategory(question, catPane);
     90                    } else {
     91                        catPane = this._createCategoryTab(cat);
     92                        if (catPane) {
     93                            this._insertIntoCategory(question, catPane);
     94                        } else {
     95                            throw "Error: could not find or create category pane!";
     96                        }
    6397                    }
     98                }
     99            },
     100            _createCategoryTab: function(category) {
     101                var tabs = registry.byId("tabList");
     102                var newCat = new dijit.layout.ContentPane({
     103                    title: category
    64104                });
    65                 d.widget.placeAt(this.surveyQuestions);
     105                newCat.domNode.id = "tab"+category;
     106                tabs.addChild(newCat);
     107                var pane = query("#tab"+category, tabs.containerNode)[0];
     108                return (pane) ? pane : false;
    66109            },
    67             _removeQuestion: function(data,obj) {
    68                 data.widget.destroy();
    69             }
     110            _insertIntoCategory: function(question, container) {
     111                debugger;
     112                var selector = query(".rftSelector[title='"+question.sorting.topic+"']", container)[0];
     113                var selectorWidget;
     114                if (selector) {
     115                    selectorWidget = registry.byNode(selector);
     116                   
     117                } else {
     118                    selectorWidget = new rft.ui.Selector({
     119                        title: question.sorting.topic
     120                    });
     121                    selectorWidget.placeAt(container);
     122                }
     123                selectorWidget.addQuestion(question);
     124            },
     125
     126
     127
     128
    70129        });
    71     });
     130});
    72131

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

    r350 r354  
    4444    'rft/pages/surveys',
    4545    'rft/pages/survey',
     46    'rft/pages/surveyAdvanced'
    4647    ],
    4748    function(win,parser,LoginDialog,dom,connect,auth,content) {

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

    r350 r354  
    2626            title: "The professional as a participant",
    2727            baseClass: 'rftSelector',
    28             modifiers: 'blue',    // Extra CSS classes
     28            modifiers: 'blue',
    2929            postCreate: function() {
    3030                domClass.add(this.domNode, this.modifiers);
    3131                domClass.add(this.selectedColorNode, "pending");
    32                 var infoFunction = function() {
    33                     alert("Show info here");
    34                 }
     32               
    3533                new LineWithActionsWidget({
    3634                    title: this.title,
    … …  
    4846                    }
    4947                },this.titleNode);
    50                 var selectorLine = new LineWithActionsWidget({
     48               
     49                this.selectorLine = new LineWithActionsWidget({
    5150                    title: 'None',
    5251                    modifiers: this.modifiers,
    5352                    actions: {
    5453                        "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;
    82                            
    83                                     }
    84                                     e.preventDefault();
    85                                     e.stopPropagation();
    86                                 };
    87                             })(),
     54                            callback: lang.hitch(this, this._toggleDropdown()),
    8855                            properties: {
    8956                                blockButton: true,
    … …  
    9562                    }
    9663                },this.selectedItemNode);
     64            },
     65            _toggleDropdown: function(selectorLine) {
     66                var node = this.optionsNode;
     67                var show = fx.wipeIn({
     68                    node: node
     69                });
     70                var hide = fx.wipeOut({
     71                    node: node
     72                });
     73                hide.play();
     74                var folded = true;
     75                return function(e) {
     76                    if ( folded ) {
     77                        var downArrowIcon = dojo.query(".rftBlockButton .rftIconHalfArrowDown", this.selectorLine.buttonsNode)[0];
     78                        if (downArrowIcon){
     79                            domClass.replace(downArrowIcon, "rftIconHalfArrowUp", "rftIconHalfArrowDown");
     80                        }
     81                        show.play();
     82                        folded = false;
     83                    } else {
     84                        var upArrowIcon = dojo.query(".rftBlockButton .rftIconHalfArrowUp", this.selectorLine.buttonsNode)[0];
     85                        if (upArrowIcon){
     86                            domClass.replace(upArrowIcon, "rftIconHalfArrowDown", "rftIconHalfArrowUp");
     87                        }
     88                        hide.play();
     89                        folded = true;
     90
     91                    }
     92                    e.preventDefault();
     93                    e.stopPropagation();
     94                };
     95            },
     96            addQuestion: function(question) {
    9797                new LineWithActionsWidget({
    98                     title: 'Are there direct colleagues among the other participants?',
     98                    title: question.title,
     99                    question: question,
    99100                    actions: {
    100101                        "InfoHover" : {
    101                             callback: infoFunction,
     102                            callback: this.infoFunction,
    102103                            properties: {
    103104                                blockButton: false,
    … …  
    108109                    }
    109110                }).placeAt(this.optionsNode);
     111            },
     112            infoFunction: function(){
     113                alert("Some info here!");text
    110114            }
    111115        });
    112     });
     116});

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

    r292 r354  
    3535            onVisit: function(){},
    3636            /** Event fired before leaving the page. Return false to prevent */
    37             onLeave: function(){}
     37            onLeave: function(){
     38                dijit.findWidgets(this.domNode).forEach(function(w){
     39                    w.destroyRecursive(false);
     40                });
     41            }
    3842        });
    3943    });
Note: See TracChangeset for help on using the changeset viewer.