source: Dev/trunk/src/client/qed-client/model/widgets/QuestionEditorPreviewItem.js

define([
    "../../widgets/_ComplexValueWidget",
    "./questions/Factory",
    "dijit/_Container",
    "dijit/_TemplatedMixin",
    "dijit/_WidgetBase",
    "dijit/_WidgetsInTemplateMixin",
    "dojo/_base/array",
    "dojo/_base/declare",
    "dojo/_base/event",
    "dojo/_base/fx",
    "dojo/_base/lang",
    "dojo/dom-class",
    "dojo/dom-geometry",
    "dojo/dom-style",
    "dojo/on",
    "dojo/text!./templates/QuestionEditorPreviewItem.html"
], function(_ComplexValueWidget, QuestionWidgetFactory, _Container, _TemplatedMixin, _WidgetBase, _WidgetsInTemplateMixin, array, declare, event, fx, lang, domClass, domGeom, domStyle, on, template) {
    return declare([_ComplexValueWidget], {
        templateString: template,
        baseClass: "qedQuestionEditorPreviewItem",
        previousContentHeight: 200,
        value: null,
        innerWidget: null,
        foldDuration: [250, 250],
        animation: null,
        _editing: null,
        _factory: new QuestionWidgetFactory(),

        startup: function() {
            if ( this._started ){ return; }
            this.inherited(arguments);
            this.own(this.foldButton.on('click',
                        lang.hitch(this, 'onToggleFold')));
            this.own(this.removeButton.on('click',
                        lang.hitch(this, '_handleDestroy')));
            this.own(this.editButton.on('click',
                        lang.hitch(this, 'onToggleEdit')));
            this.showView();
        },
        _handleDestroy: function(evt) {
            this.emit('destroy');
            if ( evt ) { event.stop(evt); }
            return false;
        },
        _getValueAttr: function() {
            if ( this._editing === true ) {
                return this.innerWidget.get('value');
            }
            return this.value;
        },
        _setValueAttr: function(value,priorityChange) {
            this._setValueInternal(value,priorityChange);
            if ( this._editing  === true ) {
                this._showEditWidget();
            } else {
                this._showViewWidget();
            }
        },
        _setReadOnlyAttr: function(readOnly) {
            this._set('readOnly',readOnly);
            this._setReadOnlyChildren(this.readOnly);
            this._updateRemoveBtn();
        },
        _setDisabledAttr: function(disabled) {
            this._set('disabled',disabled);
            this._setDisabledChildren(this.disabled);
            this._updateRemoveBtn();
        },
        _updateRemoveBtn: function() {
            var node = this.removeButton.domNode;
            if ( this.readOnly || this.disabled ) {
                domClass.add(node, 'dijitHidden');
            } else {
                domClass.remove(node, 'dijitHidden');
            }
        },
        _setDisabledChildren: function(disabled) {
            array.forEach(this._getDescendantFormWidgets(),function(widget){
                widget.set('disabled',disabled);
            });
        },
        _setReadOnlyChildren: function(readOnly) {
            array.forEach(this._getDescendantFormWidgets(),function(widget){
                widget.set('readOnly',readOnly);
            });
        },
        validate: function() {
            return this._editing === false || this.innerWidget.validate();
        },
        focus: function() {
            if ( this._editing === true ) {
                this.innerWidget.focus();
            }
        },
        showView: function() {
            if ( this._editing === true ) {
                if (!this.innerWidget.validate || this.innerWidget.validate() ) {
                    this._setValueInternal(this.innerWidget.get('value'));
                    this._showViewWidget();
                }
            }
        },
        showEdit: function() {
            if ( this._editing === false ) {
                this._showEditWidget();
            }
        },
        onToggleEdit: function(evt) {
            if ( this._editing === true ) {
                this.showView();
            } else {
                this.showEdit();
            }
            if ( evt ) { event.stop(evt); }
            return false;
        },
        _showViewWidget: function() {
            // we pass an empty code, just in case the widget depends
            // on it,but we don't know the actual code here.
            var newWidget = this._factory.createViewWidget( lang.mixin({code:""},this.value) );
            if ( newWidget ) {
                this._destroyInnerWidget();
                this.innerWidget = newWidget;
                this.addChild(this.innerWidget);
                this._setReadOnlyChildren(true);
                this._setDisabledChildren(true);
                this.titleNode.innerHTML = this.value.type+" [preview]";
                domClass.replace(this.editButton.iconNode, "rftIconEdit", "rftIconAccept");
                this.editButton.set("label", "Edit");
                this._editing = false;
            }
        },
        _showEditWidget: function() {
            var newWidget = this._factory.createEditWidget( this.value );
            if ( newWidget ) {
                this._destroyInnerWidget();
                this.innerWidget = newWidget;
                this.addChild(this.innerWidget);
                this._setReadOnlyChildren(this.readOnly);
                this._setDisabledChildren(this.disabled);
                this.titleNode.innerHTML = this.value.type+" [editing]";
                domClass.replace(this.editButton.iconNode, "rftIconAccept", "rftIconEdit");
                this.editButton.set("label", "Done");
                this._editing = true;
            }
        },
        _destroyInnerWidget: function() {
            if ( this.innerWidget !== null ) {
                if ( this._editing === true ) {
                    // because the widget doesn't generate an event
                    // unless it loses focus, we set the value here
                    // just to be sure not to lose any user input
                    this._setValueInternal(this.innerWidget.get('value'));
                }
                this.removeChild(this.innerWidget);
                this.innerWidget.destroyRecursive();
                this.innerWidget = null;
            }
        },
        onToggleFold: function(evt) {
            if (!this.animation) {
                if (!domClass.contains(this.domNode, "fold")) {
                    this.previousContentHeight = domGeom.getMarginBox(this.innerNode).h;
                    this.animation = fx.animateProperty({
                        node: this.innerNode,
                        duration: this.foldDuration[0],
                        properties: {
                            height: 1
                        },
                        onEnd: lang.hitch(this, function(){
                            domClass.add(this.domNode, "fold");
                            this.animation = null;
                        })
                    }).play();
                    domClass.replace(this.foldButton.iconNode, "rftIconHalfArrowDown", "rftIconHalfArrowUp");
                } else {
                    this.animation = fx.animateProperty({
                        node: this.innerNode,
                        duration: this.foldDuration[1],
                        properties: {
                            height: this.previousContentHeight
                        },
                        onEnd: lang.hitch(this, function(){
                            domClass.remove(this.domNode, "fold");
                            domStyle.set(this.innerNode, 'height', 'auto');
                            this.animation = null;
                        })
                    }).play();
                    domClass.replace(this.foldButton.iconNode, "rftIconHalfArrowUp", "rftIconHalfArrowDown");
                }
            }
            if ( evt ) { event.stop(evt); }
            return false;
        }

    });
});