| 1 | define([
|
|---|
| 2 | "./questions/Factory",
|
|---|
| 3 | "dijit/_Container",
|
|---|
| 4 | "dijit/_TemplatedMixin",
|
|---|
| 5 | "dijit/_WidgetBase",
|
|---|
| 6 | "dijit/_WidgetsInTemplateMixin",
|
|---|
| 7 | "dojo/_base/declare",
|
|---|
| 8 | "dojo/_base/event",
|
|---|
| 9 | "dojo/_base/fx",
|
|---|
| 10 | "dojo/_base/lang",
|
|---|
| 11 | "dojo/dom-class",
|
|---|
| 12 | "dojo/dom-geometry",
|
|---|
| 13 | "dojo/dom-style",
|
|---|
| 14 | "dojo/on",
|
|---|
| 15 | "dojo/text!./templates/QuestionEditorPreviewItem.html"
|
|---|
| 16 | ], function(QuestionWidgetFactory, _Container, _TemplatedMixin, _WidgetBase, _WidgetsInTemplateMixin, declare, event, fx, lang, domClass, domGeom, domStyle, on, template) {
|
|---|
| 17 | return declare([_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin, _Container], {
|
|---|
| 18 | templateString: template,
|
|---|
| 19 | baseClass: "qedQuestionEditorPreviewItem",
|
|---|
| 20 | previousContentHeight: 200,
|
|---|
| 21 | value: null,
|
|---|
| 22 | innerWidget: null,
|
|---|
| 23 | foldDuration: [250, 250],
|
|---|
| 24 | animation: null,
|
|---|
| 25 | _editing: false,
|
|---|
| 26 | _factory: new QuestionWidgetFactory(),
|
|---|
| 27 |
|
|---|
| 28 | startup: function() {
|
|---|
| 29 | if ( this._started ){ return; }
|
|---|
| 30 | this.inherited(arguments);
|
|---|
| 31 | this.own(this.foldButton.on('click',
|
|---|
| 32 | lang.hitch(this, 'onToggleFold')));
|
|---|
| 33 | this.own(this.removeButton.on('click',
|
|---|
| 34 | lang.hitch(this, 'onDestroy')));
|
|---|
| 35 | this.own(this.editButton.on('click',
|
|---|
| 36 | lang.hitch(this, 'onToggleEdit')));
|
|---|
| 37 | this.showEdit();
|
|---|
| 38 | },
|
|---|
| 39 | onDestroy: function() {},
|
|---|
| 40 | _getValueAttr: function(value) {
|
|---|
| 41 | if ( this._editing ) {
|
|---|
| 42 | this.value = this.innerWidget.get('value');
|
|---|
| 43 | }
|
|---|
| 44 | return this.value;
|
|---|
| 45 | },
|
|---|
| 46 | _setValueAttr: function(value) {
|
|---|
| 47 | this.value = value;
|
|---|
| 48 | if ( this._editing ) {
|
|---|
| 49 | this._showEditWidget();
|
|---|
| 50 | } else {
|
|---|
| 51 | this._showViewWidget();
|
|---|
| 52 | }
|
|---|
| 53 | },
|
|---|
| 54 | validate: function() {
|
|---|
| 55 | return !this._editing || this.innerWidget.validate();
|
|---|
| 56 | },
|
|---|
| 57 | showView: function() {
|
|---|
| 58 | if ( this._editing ) {
|
|---|
| 59 | if (!this.innerWidget.validate || this.innerWidget.validate() ) {
|
|---|
| 60 | this.value = this.innerWidget.get('value');
|
|---|
| 61 | this._showViewWidget();
|
|---|
| 62 | }
|
|---|
| 63 | }
|
|---|
| 64 | },
|
|---|
| 65 | showEdit: function() {
|
|---|
| 66 | if (!this._editing) {
|
|---|
| 67 | this._showEditWidget();
|
|---|
| 68 | }
|
|---|
| 69 | },
|
|---|
| 70 | onToggleEdit: function(evt) {
|
|---|
| 71 | if (this._editing) {
|
|---|
| 72 | this.showView();
|
|---|
| 73 | } else {
|
|---|
| 74 | this.showEdit();
|
|---|
| 75 | }
|
|---|
| 76 | evt && event.stop(evt);
|
|---|
| 77 | return false;
|
|---|
| 78 | },
|
|---|
| 79 | _showViewWidget: function() {
|
|---|
| 80 | var newWidget = this._factory.createViewWidget( this.value );
|
|---|
| 81 | if ( newWidget !== null ) {
|
|---|
| 82 | this._destroyInnerWidget();
|
|---|
| 83 | this.innerWidget = newWidget;
|
|---|
| 84 | this.innerWidget.placeAt(this.containerNode);
|
|---|
| 85 | this.innerWidget.startup();
|
|---|
| 86 | this.innerWidget.set('readOnly',true);
|
|---|
| 87 | this.titleNode.innerHTML = this.value.type+" [preview]";
|
|---|
| 88 | domClass.replace(this.editButton.iconNode, "rftIconEdit", "rftIconAccept");
|
|---|
| 89 | this.editButton.set("label", "Edit");
|
|---|
| 90 | this._editing = false;
|
|---|
| 91 | }
|
|---|
| 92 | },
|
|---|
| 93 | _showEditWidget: function() {
|
|---|
| 94 | var newWidget = this._factory.createEditWidget( this.value );
|
|---|
| 95 | if ( newWidget !== null ) {
|
|---|
| 96 | this._destroyInnerWidget();
|
|---|
| 97 | this.innerWidget = newWidget;
|
|---|
| 98 | this.innerWidget.placeAt(this.containerNode);
|
|---|
| 99 | this.innerWidget.startup();
|
|---|
| 100 | this.titleNode.innerHTML = this.value.type+" [editing]";
|
|---|
| 101 | domClass.replace(this.editButton.iconNode, "rftIconAccept", "rftIconEdit");
|
|---|
| 102 | this.editButton.set("label", "Done");
|
|---|
| 103 | this._editing = true;
|
|---|
| 104 | }
|
|---|
| 105 | },
|
|---|
| 106 | _destroyInnerWidget: function() {
|
|---|
| 107 | if ( this.innerWidget !== null ) {
|
|---|
| 108 | this.innerWidget.destroyRecursive();
|
|---|
| 109 | }
|
|---|
| 110 | },
|
|---|
| 111 | onToggleFold: function(evt) {
|
|---|
| 112 | if (!this.animation) {
|
|---|
| 113 | if (!domClass.contains(this.domNode, "fold")) {
|
|---|
| 114 | this.previousContentHeight = domGeom.getMarginBox(this.innerNode).h;
|
|---|
| 115 | this.animation = fx.animateProperty({
|
|---|
| 116 | node: this.innerNode,
|
|---|
| 117 | duration: this.foldDuration[0],
|
|---|
| 118 | properties: {
|
|---|
| 119 | height: 1
|
|---|
| 120 | },
|
|---|
| 121 | onEnd: lang.hitch(this, function(){
|
|---|
| 122 | domClass.add(this.domNode, "fold");
|
|---|
| 123 | this.animation = null;
|
|---|
| 124 | })
|
|---|
| 125 | }).play();
|
|---|
| 126 | domClass.replace(this.foldButton.iconNode, "rftIconHalfArrowDown", "rftIconHalfArrowUp");
|
|---|
| 127 | } else {
|
|---|
| 128 | this.animation = fx.animateProperty({
|
|---|
| 129 | node: this.innerNode,
|
|---|
| 130 | duration: this.foldDuration[1],
|
|---|
| 131 | properties: {
|
|---|
| 132 | height: this.previousContentHeight
|
|---|
| 133 | },
|
|---|
| 134 | onEnd: lang.hitch(this, function(){
|
|---|
| 135 | domClass.remove(this.domNode, "fold");
|
|---|
| 136 | domStyle.set(this.innerNode, 'height', 'auto');
|
|---|
| 137 | this.animation = null;
|
|---|
| 138 | })
|
|---|
| 139 | }).play();
|
|---|
| 140 | domClass.replace(this.foldButton.iconNode, "rftIconHalfArrowUp", "rftIconHalfArrowDown");
|
|---|
| 141 | }
|
|---|
| 142 | }
|
|---|
| 143 | evt && event.stop(evt);
|
|---|
| 144 | return false;
|
|---|
| 145 | }
|
|---|
| 146 |
|
|---|
| 147 | });
|
|---|
| 148 | });
|
|---|
