Ignore:
Timestamp:
09/05/12 14:41:13 (13 years ago)
Author:
hendrikvanantwerpen
Message:

Added build infrastructure and reorganised code to match it.

Page navigation is now done by the rft/app/Controller class. pages
inherit generally from rft/app/Page, which is a BorderContainer?. The
Page uses normal widget mechanism like templateString, all data-rft-*
are obsolete, use normal data-dojo-* options again in templates.
This is done so the pages of the app can be included in the build.
URLs are linked to pages through registration, which is done in
run.js. The routes are defined in the routes.js file. Page class names
and URLs are now independent.

Reduced includes in index.html to one CSS file and two JS files. Dojo
stylesheets are now included thorugh externals.css.

Dojo 1.8 doesn't require the dotted names in declares anymore. All these
are now removed (redundant with module path and JS filename anyway)
and in templates a module id is used, so iso 'dijit.form.Form' use
'dijit/form/Form' now. This is more consistent with requires in the JS
code and they are picked up by the build system.

Removed any old-style dojo.<function> code and use loaded modules
everywhere.

Lots of whitespace unification.

Location:
Dev/branches/rest-dojo-ui
Files:
3 edited

Legend:

Unmodified
Added
Removed

  • Dev/branches/rest-dojo-ui

    • Property svn:ignore

      •  

        old new  
        11nbproject
        22.project
         3release

  • Dev/branches/rest-dojo-ui/client

    • Property svn:externals

      •  

        old new  
        1 dojotoolkit http://svn.dojotoolkit.org/src/tags/release-1.8.0
         1dojo http://svn.dojotoolkit.org/src/tags/release-1.8.0/dojo
         2dijit http://svn.dojotoolkit.org/src/tags/release-1.8.0/dijit
         3dojox http://svn.dojotoolkit.org/src/tags/release-1.8.0/dojox
         4util http://svn.dojotoolkit.org/src/tags/release-1.8.0/util

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

    r405 r407  
    44    'dojo/_base/lang',
    55    'dojo/dom-class',
     6    'dojo/dom-geometry',
    67    'dojo/on',
    78    'dijit/_Container',
    … …  
    1011    'dijit/_WidgetsInTemplateMixin',
    1112    './content/ContentWidgetFactory',
    12     'dojo/text!./templates/QuestionEditorPreviewItem.html',
    13     ], function(declare, fx, lang, domClass, on, _Container, _TemplatedMixin, _WidgetBase, _WidgetsInTemplateMixin, ContentWidgetFactory, template) {
    14         return declare("rft.ui.QuestionEditorPreviewItem", [_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin, _Container], {
    15             version: "full",
    16             templateString: template,
    17             baseClass: "surveyEditorPreviewItem",
    18             previousContentHeight: 200,
    19             item: null,
    20             innerWidget: null,
    21             foldDuration: [250, 250],
    22             animation: null,
    23             _editing: false,
     13    'dojo/text!./templates/QuestionEditorPreviewItem.html'
     14], function(
     15    declare,
     16    fx,
     17    lang,
     18    domClass,
     19    domGeom,
     20    on,
     21    _Container,
     22    _TemplatedMixin,
     23    _WidgetBase,
     24    _WidgetsInTemplateMixin,
     25    ContentWidgetFactory,
     26    template
     27){
     28    return declare([_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin, _Container], {
     29        version: "full",
     30        templateString: template,
     31        baseClass: "surveyEditorPreviewItem",
     32        previousContentHeight: 200,
     33        item: null,
     34        innerWidget: null,
     35        foldDuration: [250, 250],
     36        animation: null,
     37        _editing: false,
    2438
    25             startup: function() {
    26                 if ( this._started ){ return; }
    27                 this.inherited(arguments);
    28                 this.foldButtonNode.onClick = lang.hitch(this, this.toggleFold);
    29                 this.removeButtonNode.onClick = lang.hitch(this, "onClose");
    30                 this.editButtonNode.onClick = lang.hitch(this, this.toggleEdit);
    31                 if (this.item) {
    32                     this._showViewWidget();
     39        startup: function() {
     40            if ( this._started ){ return; }
     41            this.inherited(arguments);
     42            this.foldButtonNode.onClick = lang.hitch(this, this.toggleFold);
     43            this.removeButtonNode.onClick = lang.hitch(this, "onClose");
     44            this.editButtonNode.onClick = lang.hitch(this, this.toggleEdit);
     45            if (this.item) {
     46                this._showViewWidget();
     47            } else {
     48                throw "No data supplied to create an innerWidget!";
     49            }
     50        },
     51        _destroyInnerWidget: function() {
     52            if ( this.innerWidget !== null ) {
     53                this.innerWidget.destroyRecursive();
     54            }
     55        },
     56        _showViewWidget: function() {
     57            var factory = new ContentWidgetFactory();
     58            this.innerWidget = factory.createViewWidget( this.item );
     59            if ( this.innerWidget !== null ) {
     60                this.innerWidget.placeAt(this.containerNode);
     61                this.innerWidget.startup();
     62                this.innerWidget.set('readOnly',true);
     63            }
     64            this.titleNode.innerHTML = (this.item.code||"(no code)")+" : "+this.item.type+" [preview]";
     65        },
     66        _showEditWidget: function() {
     67            var factory = new ContentWidgetFactory();
     68            this.innerWidget = factory.createEditWidget( this.item );
     69            if ( this.innerWidget !== null ) {
     70                this.innerWidget.placeAt(this.containerNode);
     71                this.innerWidget.startup();
     72            }
     73            this.titleNode.innerHTML = (this.item.code||"(no code)")+" : "+this.item.type+" [editing]";
     74        },
     75        onClose: function() {},
     76        _getValueAttr: function(value) {
     77            return this.item;
     78        },
     79        _setValueAttr: function(value) {
     80            this.item = value;
     81            this._destroyInnerWidget();
     82            if ( this._editing ) {
     83                this._showEditWidget();
     84            } else {
     85                this._showViewWidget();
     86            }
     87        },
     88        toggleEdit: function() {
     89            if(this._editing) {
     90                if ( this.innerWidget !== null ) {
     91                    this.item = this.innerWidget.get('value');
     92                }
     93                this._destroyInnerWidget();
     94                this._showViewWidget();
     95                this.editButtonNode.iconNode.className = this.editButtonNode.iconNode.className.replace("rftIconAccept", "rftIconEdit");
     96                this.editButtonNode.set("label", "Edit");
     97            } else {
     98                this._destroyInnerWidget();
     99                this._showEditWidget();
     100                this.editButtonNode.iconNode.className = this.editButtonNode.iconNode.className.replace("rftIconEdit", "rftIconAccept");
     101                this.editButtonNode.set("label", "Done");
     102            }
     103            this._editing = !this._editing;
     104        },
     105        toggleFold: function() {
     106            if (!this.animation) {
     107                if (!domClass.contains(this.domNode, "fold")) {
     108                    this.previousContentHeight = domGeom.getMarginBox(this.innerNode).h;
     109                    this.animation = fx.animateProperty({
     110                        node: this.innerNode,
     111                        duration: this.foldDuration[0],
     112                        properties: {
     113                            height: 1                       
     114                        },
     115                        onEnd: lang.hitch(this, function(){
     116                            domClass.add(this.domNode, "fold");
     117                            this.animation = null;
     118                        })
     119                    }).play();
     120                    this.foldButtonNode.iconNode.className = this.foldButtonNode.iconNode.className.replace("rftIconHalfArrowUp", "rftIconHalfArrowDown");
    33121                } else {
    34                     throw "No data supplied to create an innerWidget!";
    35                 }
    36             },
    37             _destroyInnerWidget: function() {
    38                 if ( this.innerWidget !== null ) {
    39                     this.innerWidget.destroyRecursive();
    40                 }
    41             },
    42             _showViewWidget: function() {
    43                 var factory = new ContentWidgetFactory();
    44                 this.innerWidget = factory.createViewWidget( this.item );
    45                 if ( this.innerWidget !== null ) {
    46                     this.innerWidget.placeAt(this.containerNode);
    47                     this.innerWidget.startup();
    48                     this.innerWidget.set('readOnly',true);
    49                 }
    50                 this.titleNode.innerHTML = (this.item.code||"(no node)")+" : "+this.item.type+" [preview]";
    51             },
    52             _showEditWidget: function() {
    53                 var factory = new ContentWidgetFactory();
    54                 this.innerWidget = factory.createEditWidget( this.item );
    55                 if ( this.innerWidget !== null ) {
    56                     this.innerWidget.placeAt(this.containerNode);
    57                     this.innerWidget.startup();
    58                 }
    59                 this.titleNode.innerHTML = (this.item.code||"(no node)")+" : "+this.item.type+" [editing]";
    60             },
    61             onClose: function() {},
    62             _getValueAttr: function(value) {
    63                 return this.item;
    64             },
    65             _setValueAttr: function(value) {
    66                 this.item = value;
    67                 this._destroyInnerWidget();
    68                 if ( this._editing ) {
    69                     this._showEditWidget();
    70                 } else {
    71                     this._showViewWidget();
    72                 }
    73             },
    74             toggleEdit: function() {
    75                 if(this._editing) {
    76                     if ( this.innerWidget !== null ) {
    77                         this.item = this.innerWidget.get('value');
    78                     }
    79                     this._destroyInnerWidget();
    80                     this._showViewWidget();
    81                     this.editButtonNode.iconNode.className = this.editButtonNode.iconNode.className.replace("rftIconAccept", "rftIconEdit");
    82                     this.editButtonNode.set("label", "Edit");
    83                 } else {
    84                     this._destroyInnerWidget();
    85                     this._showEditWidget();
    86                     this.editButtonNode.iconNode.className = this.editButtonNode.iconNode.className.replace("rftIconEdit", "rftIconAccept");
    87                     this.editButtonNode.set("label", "Done");
    88                 }
    89                 this._editing = !this._editing;
    90             },
    91             toggleFold: function() {
    92                 if (!this.animation) {
    93                     if (!domClass.contains(this.domNode, "fold")) {
    94                         this.previousContentHeight = dojo.marginBox(this.innerNode).h;
    95                         this.animation = fx.animateProperty({
    96                             node: this.innerNode,
    97                             duration: this.foldDuration[0],
    98                             properties: {
    99                                 height: 1                       
    100                             },
    101                             onEnd: lang.hitch(this, function(){
    102                                 domClass.add(this.domNode, "fold");
    103                                 this.animation = null;
    104                             })
    105                         }).play();
    106                         this.foldButtonNode.iconNode.className = this.foldButtonNode.iconNode.className.replace("rftIconHalfArrowUp", "rftIconHalfArrowDown");
    107                     } else {
    108                         this.animation = fx.animateProperty({
    109                             node: this.innerNode,
    110                             duration: this.foldDuration[1],
    111                             properties: {
    112                                 height: this.previousContentHeight               
    113                             },
    114                             onEnd: lang.hitch(this, function(){
    115                                 domClass.remove(this.domNode, "fold");
    116                                 this.animation = null;
    117                             })
    118                         }).play();
    119                         this.foldButtonNode.iconNode.className = this.foldButtonNode.iconNode.className.replace("rftIconHalfArrowDown", "rftIconHalfArrowUp");
    120                     }
     122                    this.animation = fx.animateProperty({
     123                        node: this.innerNode,
     124                        duration: this.foldDuration[1],
     125                        properties: {
     126                            height: this.previousContentHeight               
     127                        },
     128                        onEnd: lang.hitch(this, function(){
     129                            domClass.remove(this.domNode, "fold");
     130                            this.animation = null;
     131                        })
     132                    }).play();
     133                    this.foldButtonNode.iconNode.className = this.foldButtonNode.iconNode.className.replace("rftIconHalfArrowDown", "rftIconHalfArrowUp");
    121134                }
    122135            }
     136        }
    123137
    124         });
    125138    });
     139});
Note: See TracChangeset for help on using the changeset viewer.