source: Dev/trunk/client/qed/model/widgets/QuestionEditorPreviewItem.js @ 442

define([
    "./questions/Factory",
    "dijit/_Container",
    "dijit/_TemplatedMixin",
    "dijit/_WidgetBase",
    "dijit/_WidgetsInTemplateMixin",
    "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(QuestionWidgetFactory, _Container, _TemplatedMixin, _WidgetBase, _WidgetsInTemplateMixin, declare, event, fx, lang, domClass, domGeom, domStyle, on, template) {
    return declare([_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin, _Container], {
        templateString: template,
        baseClass: "qedQuestionEditorPreviewItem",
        previousContentHeight: 200,
        value: null,
        innerWidget: null,
        foldDuration: [250, 250],
        animation: null,
        _editing: false,
        _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, 'onDestroy')));
            this.own(this.editButton.on('click',
                        lang.hitch(this, 'onToggleEdit')));
            this.showEdit();
        },
        onDestroy: function() {},
        _getValueAttr: function(value) {
            if ( this._editing ) {
                this.value = this.innerWidget.get('value');
            }
            return this.value;
        },
        _setValueAttr: function(value) {
            this.value = value;
            if ( this._editing ) {
                this._showEditWidget();
            } else {
                this._showViewWidget();
            }
        },
        validate: function() {
            return !this._editing || this.innerWidget.validate();
        },
        focus: function() {
            if ( this._editing ) {
                this.innerWidget.focus();
            }
        },
        showView: function() {
            if ( this._editing ) {
                if (!this.innerWidget.validate || this.innerWidget.validate() ) {
                    this.value = this.innerWidget.get('value');
                    this._showViewWidget();
                }
            }
        },
        showEdit: function() {
            if (!this._editing) {
                this._showEditWidget();
            }
        },
        onToggleEdit: function(evt) {
            if (this._editing) {
                this.showView();
            } else {
                this.showEdit();
            }
            if ( evt ) { event.stop(evt); }
            return false;
        },
        _showViewWidget: function() {
            var newWidget = this._factory.createViewWidget( this.value );
            if ( newWidget !== null ) {
                this._destroyInnerWidget();
                this.innerWidget = newWidget;
                this.innerWidget.placeAt(this.containerNode);
                this.innerWidget.startup();
                this.innerWidget.set('readOnly',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 !== null ) {
                this._destroyInnerWidget();
                this.innerWidget = newWidget;
                this.innerWidget.placeAt(this.containerNode);
                this.innerWidget.startup();
                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 ) {
                this.innerWidget.destroyRecursive();
            }
        },
        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;
        }

    });
});