Changeset 434 for Dev


Ignore:
Timestamp:
04/23/13 17:33:48 (12 years ago)
Author:
hendrikvanantwerpen
Message:

Implemented Scale and ScaleConfig? widget.

Location:
Dev/trunk/client/qed
Files:
3 added
4 edited
3 moved

Legend:

Unmodified
Added
Removed

  • Dev/trunk/client/qed/css/forms.less

    r432 r434  
    2020    }
    2121
    22     .newline {
    23         .newLine;
    24         display: block;
    25     }
    26 
    2722    .floatRight {
    2823        float: right;
    … …  
    3631
    3732    .qedLabel {
     33        width: 150px;
    3834        display: inline-block;
    39         float: left;
    40         width: 150px;
    4135    }
    4236

  • Dev/trunk/client/qed/css/model/widgets/ScaleWidget.less

    r433 r434  
    66    .item {
    77        text-align: left;
    8         max-width: 20em;
     8        min-width: 10em;
     9        max-width: 15em;
    910    }
    1011    .min { text-align: right; padding-left: 2em; }
    1112    .max { text-align: left;  padding-right: 2em; }
    1213    .na { text-align: center; }
     14
     15    .dijitTextBox {
     16        width: 10em;
     17    }
    1318}

  • Dev/trunk/client/qed/css/qed.css

    r433 r434  
    967967/* line 22, /home/hendrik/gamelab/qed.svn/Dev/trunk/client/qed/css/forms.less */
    968968@media -sass-debug-info{filename{font-family:file\:\/\/\/home\/hendrik\/gamelab\/qed\.svn\/Dev\/trunk\/client\/qed\/css\/forms\.less}line{font-family:\0000322}}
    969 #rft.claro .newline {
    970   float: left;
    971   clear: left;
    972   display: block;
    973 }
    974 /* line 27, /home/hendrik/gamelab/qed.svn/Dev/trunk/client/qed/css/forms.less */
    975 @media -sass-debug-info{filename{font-family:file\:\/\/\/home\/hendrik\/gamelab\/qed\.svn\/Dev\/trunk\/client\/qed\/css\/forms\.less}line{font-family:\0000327}}
    976969#rft.claro .floatRight {
    977970  float: right;
    978971  margin: 0 0 0 0;
    979972}
    980 /* line 33, /home/hendrik/gamelab/qed.svn/Dev/trunk/client/qed/css/forms.less */
    981 @media -sass-debug-info{filename{font-family:file\:\/\/\/home\/hendrik\/gamelab\/qed\.svn\/Dev\/trunk\/client\/qed\/css\/forms\.less}line{font-family:\0000333}}
     973/* line 28, /home/hendrik/gamelab/qed.svn/Dev/trunk/client/qed/css/forms.less */
     974@media -sass-debug-info{filename{font-family:file\:\/\/\/home\/hendrik\/gamelab\/qed\.svn\/Dev\/trunk\/client\/qed\/css\/forms\.less}line{font-family:\0000328}}
    982975#rft.claro .qedInfo {
    983976  max-width: 500px;
    984977}
     978/* line 32, /home/hendrik/gamelab/qed.svn/Dev/trunk/client/qed/css/forms.less */
     979@media -sass-debug-info{filename{font-family:file\:\/\/\/home\/hendrik\/gamelab\/qed\.svn\/Dev\/trunk\/client\/qed\/css\/forms\.less}line{font-family:\0000332}}
     980#rft.claro .qedLabel {
     981  width: 150px;
     982  display: inline-block;
     983}
    985984/* line 37, /home/hendrik/gamelab/qed.svn/Dev/trunk/client/qed/css/forms.less */
    986985@media -sass-debug-info{filename{font-family:file\:\/\/\/home\/hendrik\/gamelab\/qed\.svn\/Dev\/trunk\/client\/qed\/css\/forms\.less}line{font-family:\0000337}}
    987 #rft.claro .qedLabel {
    988   display: inline-block;
    989   float: left;
    990   width: 150px;
    991 }
    992 /* line 43, /home/hendrik/gamelab/qed.svn/Dev/trunk/client/qed/css/forms.less */
    993 @media -sass-debug-info{filename{font-family:file\:\/\/\/home\/hendrik\/gamelab\/qed\.svn\/Dev\/trunk\/client\/qed\/css\/forms\.less}line{font-family:\0000343}}
    994986#rft.claro .qedField {
    995987  max-width: 350px;
    996988  display: inline-block;
    997989}
    998 /* line 48, /home/hendrik/gamelab/qed.svn/Dev/trunk/client/qed/css/forms.less */
    999 @media -sass-debug-info{filename{font-family:file\:\/\/\/home\/hendrik\/gamelab\/qed\.svn\/Dev\/trunk\/client\/qed\/css\/forms\.less}line{font-family:\0000348}}
     990/* line 42, /home/hendrik/gamelab/qed.svn/Dev/trunk/client/qed/css/forms.less */
     991@media -sass-debug-info{filename{font-family:file\:\/\/\/home\/hendrik\/gamelab\/qed\.svn\/Dev\/trunk\/client\/qed\/css\/forms\.less}line{font-family:\0000342}}
    1000992#rft.claro .qedField.qedFill {
    1001993  width: 350px;
    1002994}
    1003 /* line 52, /home/hendrik/gamelab/qed.svn/Dev/trunk/client/qed/css/forms.less */
    1004 @media -sass-debug-info{filename{font-family:file\:\/\/\/home\/hendrik\/gamelab\/qed\.svn\/Dev\/trunk\/client\/qed\/css\/forms\.less}line{font-family:\0000352}}
     995/* line 46, /home/hendrik/gamelab/qed.svn/Dev/trunk/client/qed/css/forms.less */
     996@media -sass-debug-info{filename{font-family:file\:\/\/\/home\/hendrik\/gamelab\/qed\.svn\/Dev\/trunk\/client\/qed\/css\/forms\.less}line{font-family:\0000346}}
    1005997#rft.claro .qedFieldset {
    1006998  margin: 1em 0px;
    … …  
    16881680  height: 0;
    16891681}
    1690 /* line 2, /home/hendrik/gamelab/qed.svn/Dev/trunk/client/qed/css/widgets/ScaleWidget.less */
    1691 @media -sass-debug-info{filename{font-family:file\:\/\/\/home\/hendrik\/gamelab\/qed\.svn\/Dev\/trunk\/client\/qed\/css\/widgets\/ScaleWidget\.less}line{font-family:\000032}}
     1682/* line 2, /home/hendrik/gamelab/qed.svn/Dev/trunk/client/qed/css/model/widgets/ScaleWidget.less */
     1683@media -sass-debug-info{filename{font-family:file\:\/\/\/home\/hendrik\/gamelab\/qed\.svn\/Dev\/trunk\/client\/qed\/css\/model\/widgets\/ScaleWidget\.less}line{font-family:\000032}}
    16921684#rft.claro .qedScaleWidget table {
    16931685  text-align: center;
    16941686}
    1695 /* line 5, /home/hendrik/gamelab/qed.svn/Dev/trunk/client/qed/css/widgets/ScaleWidget.less */
    1696 @media -sass-debug-info{filename{font-family:file\:\/\/\/home\/hendrik\/gamelab\/qed\.svn\/Dev\/trunk\/client\/qed\/css\/widgets\/ScaleWidget\.less}line{font-family:\000035}}
     1687/* line 5, /home/hendrik/gamelab/qed.svn/Dev/trunk/client/qed/css/model/widgets/ScaleWidget.less */
     1688@media -sass-debug-info{filename{font-family:file\:\/\/\/home\/hendrik\/gamelab\/qed\.svn\/Dev\/trunk\/client\/qed\/css\/model\/widgets\/ScaleWidget\.less}line{font-family:\000035}}
    16971689#rft.claro .qedScaleWidget th {
    16981690  font-weight: normal;
    16991691}
    1700 /* line 6, /home/hendrik/gamelab/qed.svn/Dev/trunk/client/qed/css/widgets/ScaleWidget.less */
    1701 @media -sass-debug-info{filename{font-family:file\:\/\/\/home\/hendrik\/gamelab\/qed\.svn\/Dev\/trunk\/client\/qed\/css\/widgets\/ScaleWidget\.less}line{font-family:\000036}}
     1692/* line 6, /home/hendrik/gamelab/qed.svn/Dev/trunk/client/qed/css/model/widgets/ScaleWidget.less */
     1693@media -sass-debug-info{filename{font-family:file\:\/\/\/home\/hendrik\/gamelab\/qed\.svn\/Dev\/trunk\/client\/qed\/css\/model\/widgets\/ScaleWidget\.less}line{font-family:\000036}}
    17021694#rft.claro .qedScaleWidget .item {
    17031695  text-align: left;
    1704   max-width: 20em;
    1705 }
    1706 /* line 10, /home/hendrik/gamelab/qed.svn/Dev/trunk/client/qed/css/widgets/ScaleWidget.less */
    1707 @media -sass-debug-info{filename{font-family:file\:\/\/\/home\/hendrik\/gamelab\/qed\.svn\/Dev\/trunk\/client\/qed\/css\/widgets\/ScaleWidget\.less}line{font-family:\0000310}}
     1696  min-width: 10em;
     1697  max-width: 15em;
     1698}
     1699/* line 11, /home/hendrik/gamelab/qed.svn/Dev/trunk/client/qed/css/model/widgets/ScaleWidget.less */
     1700@media -sass-debug-info{filename{font-family:file\:\/\/\/home\/hendrik\/gamelab\/qed\.svn\/Dev\/trunk\/client\/qed\/css\/model\/widgets\/ScaleWidget\.less}line{font-family:\0000311}}
    17081701#rft.claro .qedScaleWidget .min {
    17091702  text-align: right;
    17101703  padding-left: 2em;
    17111704}
    1712 /* line 11, /home/hendrik/gamelab/qed.svn/Dev/trunk/client/qed/css/widgets/ScaleWidget.less */
    1713 @media -sass-debug-info{filename{font-family:file\:\/\/\/home\/hendrik\/gamelab\/qed\.svn\/Dev\/trunk\/client\/qed\/css\/widgets\/ScaleWidget\.less}line{font-family:\0000311}}
     1705/* line 12, /home/hendrik/gamelab/qed.svn/Dev/trunk/client/qed/css/model/widgets/ScaleWidget.less */
     1706@media -sass-debug-info{filename{font-family:file\:\/\/\/home\/hendrik\/gamelab\/qed\.svn\/Dev\/trunk\/client\/qed\/css\/model\/widgets\/ScaleWidget\.less}line{font-family:\0000312}}
    17141707#rft.claro .qedScaleWidget .max {
    17151708  text-align: left;
    17161709  padding-right: 2em;
    17171710}
    1718 /* line 12, /home/hendrik/gamelab/qed.svn/Dev/trunk/client/qed/css/widgets/ScaleWidget.less */
    1719 @media -sass-debug-info{filename{font-family:file\:\/\/\/home\/hendrik\/gamelab\/qed\.svn\/Dev\/trunk\/client\/qed\/css\/widgets\/ScaleWidget\.less}line{font-family:\0000312}}
     1711/* line 13, /home/hendrik/gamelab/qed.svn/Dev/trunk/client/qed/css/model/widgets/ScaleWidget.less */
     1712@media -sass-debug-info{filename{font-family:file\:\/\/\/home\/hendrik\/gamelab\/qed\.svn\/Dev\/trunk\/client\/qed\/css\/model\/widgets\/ScaleWidget\.less}line{font-family:\0000313}}
    17201713#rft.claro .qedScaleWidget .na {
    17211714  text-align: center;
     1715}
     1716/* line 15, /home/hendrik/gamelab/qed.svn/Dev/trunk/client/qed/css/model/widgets/ScaleWidget.less */
     1717@media -sass-debug-info{filename{font-family:file\:\/\/\/home\/hendrik\/gamelab\/qed\.svn\/Dev\/trunk\/client\/qed\/css\/model\/widgets\/ScaleWidget\.less}line{font-family:\0000315}}
     1718#rft.claro .qedScaleWidget .dijitTextBox {
     1719  width: 10em;
    17221720}
    17231721/* line 3, /home/hendrik/gamelab/qed.svn/Dev/trunk/client/qed/css/model/widgets/QuestionListView.less */

  • Dev/trunk/client/qed/css/qed.less

    r433 r434  
    3030@import "widgets/InlineButton.less";
    3131@import "widgets/LineWithActions.less";
    32 @import "widgets/ScaleWidget.less";
     32@import "model/widgets/ScaleWidget.less";
    3333@import "model/widgets/QuestionListView.less";
    3434

  • Dev/trunk/client/qed/model/widgets/ScaleWidget.js

    r433 r434  
    3333        },
    3434        _renderHead: function() {
     35            this.minNode.innerHTML = this.minLabel || "";
     36            this.maxNode.innerHTML = this.maxLabel || "";
     37            if ( this.naLabel !== null ) {
     38                this.naNode.innerHTML = this.naLabel;
     39            }
    3540            for (var i = this.min; i <= this.max; i++) {
    3641                domConstruct.create("th", {
    3742                    innerHTML: i.toString()
    38                 }, this.rangeNode, "after");
    39             }
    40             if ( this.naLabel !== null ) {
    41                 this.naNode.innerHTML = this.naLabel;
     43                }, this.minNode, "after");
    4244            }
    4345        },

  • Dev/trunk/client/qed/model/widgets/templates/ScaleWidget.html

    r433 r434  
    44      <tr>
    55        <th class="item"></th>
    6         <th data-dojo-attach-point="rangeNode" class="min"></th>
    7         <th class="max"></th>
     6        <th data-dojo-attach-point="minNode" class="min"></th>
     7        <th data-dojo-attach-point="maxNode" class="max"></th>
    88        <th class="na" data-dojo-attach-point="naNode"></th>
    99      </tr>

  • Dev/trunk/client/qed/tests/test_ScaleWidget.html

    r433 r434  
    1414          'dojo/when',
    1515          'dojo/parser',
    16           'qed/widgets/ScaleWidget',
     16          'qed/model/widgets/ScaleConfigWidget',
     17          'qed/model/widgets/ScaleWidget',
    1718          'dojo/domReady!'
    18       ], function(registry,dom,when,parser,ScaleWidget){
     19      ], function(registry,dom,when,parser,ScaleConfigWidget,ScaleWidget){
    1920        when(parser.parse()).then(function(){
    20             var scaleWidget = new ScaleWidget({
    21               min: -2,
    22               max: 2,
    23               min_label: "Bad",
    24               max_label: "Good",
    25               naLabel: "N/A",
    26               name: "lala",
    27               items: [{
    28                  text: "How were the lectures?",
    29                  minLabel: "Boring",
    30                  maxLabel: "Engaging"
    31               },{
    32                  text: "How was the lab organised? How was the lab organised? How was the lab organised?",
    33                  minLabel: "Sloppy",
    34                  maxLabel: "Stiff as a board"
    35               }]
    36             },"widgetNode").startup();
    3721
     22            var configWidget = registry.byId("configWidget");
     23            var configNode = dom.byId("configNode");
    3824            var valueNode = dom.byId("valueNode");
    39             var valueForm = registry.byId("valueForm");
     25            var widgetNode = dom.byId("widgetNode");
     26            var widget = null;
     27
     28            registry.byId("configButton").on("click",function(){
     29              if ( configWidget.validate() ) {
     30                var config = configWidget.get('value');
     31                configNode.innerHTML = JSON.stringify(config);
     32                widgetNode.innerHTML = '';
     33                widget = new ScaleWidget(config)
     34                widget.startup();
     35                widget.placeAt(widgetNode);
     36              }
     37            });
     38     
    4039            registry.byId("valueButton").on("click",function(){
    41               valueNode.innerHTML = JSON.stringify(valueForm.get("value"));
     40              if ( widget ) {
     41                var value = widget.get('value');
     42                valueNode.innerHTML = JSON.stringify(value);
     43              }
     44            });
     45     
     46            registry.byId("defaultConfigButton").on("click",function(){
     47              configWidget.set('value',{
     48                min: -2,
     49                max: 2,
     50                minLabel: "Bad",
     51                maxLabel: "Good",
     52                naLabel: "N/A",
     53                items: [{
     54                   text: "How were the lectures?",
     55                   minLabel: "Boring",
     56                   maxLabel: "Engaging"
     57                },{
     58                   text: "How was the lab organised? How was the lab organised? How was the lab organised?",
     59                   minLabel: "Sloppy",
     60                   maxLabel: "Stiff as a board"
     61                }]
     62              });
    4263            });
    4364
    44             var configNode = dom.byId("configNode");
    45             var configForm = registry.byId("configForm");
    46             registry.byId("configButton").on("click",function(){
    47               configNode.innerHTML = JSON.stringify(configForm.get("value"));
    48             });
    4965        });
    5066      });
    … …  
    5369    <h1>Test ScaleWidget</h1>
    5470
     71    <h2>Config Widget</h2>
     72    <div>
     73      <div>
     74        <div id="configWidget"
     75             data-dojo-type="qed/model/widgets/ScaleConfigWidget"></div>
     76        <button id="defaultConfigButton"
     77                data-dojo-type="dijit/form/Button">Set Example</button>
     78        <button id="configButton"
     79                data-dojo-type="dijit/form/Button">Create widget</button>
     80      </div>
     81      <div id="configNode"></div>
     82    </div>
     83
    5584    <h2>Widget</h2>
    5685    <div>
    57       <div id="valueForm" data-dojo-type="dijit/form/Form">
     86      <div>
    5887        <div id="widgetNode"></div>
    59         <button id="valueButton" data-dojo-type="dijit/form/Button">Done</button>
     88        <button id="valueButton"
     89                data-dojo-type="dijit/form/Button">Done</button>
    6090      </div>
     91      <div id="valueNode"></div>
    6192    </div>
    62 
    63     <h2>Value</h2>
    64     <div id="valueNode"></div>
    65 
    66     <h2>ConfigurationWidget</h2>
    67     <div>
    68       <div id="configForm" data-dojo-type="dijit/form/Form">
    69         <label>Min value</label><div name="minValue" data-dojo-type="dijit/form/TextBox"></div>
    70         <label>Min label</label><div name="maxValue" data-dojo-type="dijit/form/TextBox"></div>
    71         <label>Max value</label><div name="maxValue" data-dojo-type="dijit/form/TextBox"></div>
    72         <label>Max label</label><div name="maxValue" data-dojo-type="dijit/form/TextBox"></div>
    73 
    74         <label>Text</label><div name="items[0].text" data-dojo-type="dijit/form/TextBox"></div>
    75         <label>Min label</label><div name="items[0].minLabel" data-dojo-type="dijit/form/TextBox"></div>
    76         <label>Max label</label><div name="items[0].maxLabel" data-dojo-type="dijit/form/TextBox"></div>
    77 
    78         <button id="configButton" data-dojo-type="dijit/form/Button">Done</button>
    79       </div>
    80     </div>
    81 
    82     <h2>Value</h2>
    83     <div id="configNode"></div>
    8493
    8594  </body>
Note: See TracChangeset for help on using the changeset viewer.