| 1 | define([
|
|---|
| 2 | 'dojo/_base/declare',
|
|---|
| 3 | 'dojo/_base/fx',
|
|---|
| 4 | 'dijit/_WidgetBase',
|
|---|
| 5 | 'dojo/dom-class',
|
|---|
| 6 | 'dojo/_base/lang',
|
|---|
| 7 | 'dojo/on',
|
|---|
| 8 | 'dijit/_TemplatedMixin',
|
|---|
| 9 | 'dijit/_WidgetsInTemplateMixin',
|
|---|
| 10 | 'dijit/form/TextBox',
|
|---|
| 11 | 'rft/ui/PreviewWidgets/HeaderItem',
|
|---|
| 12 | 'rft/ui/PreviewWidgets/TextItem',
|
|---|
| 13 | 'dojo/text!./templates/QuestionEditorPreviewItem.html',
|
|---|
| 14 | ], function(declare, fx, _WidgetBase, domClass, lang, on, _TemplatedMixin, _WidgetsInTemplateMixin, TextBox, HeaderItem, TextItem, templateFull) {
|
|---|
| 15 | return declare("rft.ui.QuestionEditorPreviewItem", [_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {
|
|---|
| 16 |
|
|---|
| 17 | version: "full",
|
|---|
| 18 | templateString: templateFull,
|
|---|
| 19 | baseClass: "surveyEditorPreviewItem",
|
|---|
| 20 | previousContentHeight: 200,
|
|---|
| 21 | innerWidget: null,
|
|---|
| 22 | foldDuration: [250, 250],
|
|---|
| 23 | animation: null,
|
|---|
| 24 | _editing: false,
|
|---|
| 25 |
|
|---|
| 26 | postCreate: function() {
|
|---|
| 27 | this.foldButtonNode.onClick = lang.hitch(this, this.toggleFold);
|
|---|
| 28 | this.removeButtonNode.onClick = lang.hitch(this, this.removeObject);
|
|---|
| 29 | this.editButtonNode.onClick = lang.hitch(this, this.toggleEdit);
|
|---|
| 30 | if (this.item) {
|
|---|
| 31 | this._createInnerWidget();
|
|---|
| 32 | } else {
|
|---|
| 33 | throw "No data supplied to create an innerWidget off of!";
|
|---|
| 34 | }
|
|---|
| 35 |
|
|---|
| 36 | on(this.innerWidget, "onSetTitle", function(title) {
|
|---|
| 37 | this.titleNode.innerHTML = title;
|
|---|
| 38 | });
|
|---|
| 39 | },
|
|---|
| 40 | toggleEdit: function() {
|
|---|
| 41 | if(this._editing) {
|
|---|
| 42 | this.editButtonNode.iconNode.className = this.editButtonNode.iconNode.className.replace("rftIconAccept", "rftIconEdit");
|
|---|
| 43 | this.editButtonNode.set("label", "Edit");
|
|---|
| 44 | this.innerWidget.save();
|
|---|
| 45 | }
|
|---|
| 46 | else {
|
|---|
| 47 | this.editButtonNode.iconNode.className = this.editButtonNode.iconNode.className.replace("rftIconEdit", "rftIconAccept");
|
|---|
| 48 | this.editButtonNode.set("label", "Save");
|
|---|
| 49 | this.innerWidget.edit();
|
|---|
| 50 | }
|
|---|
| 51 | this._editing = !this._editing;
|
|---|
| 52 | },
|
|---|
| 53 | toggleFold: function() {
|
|---|
| 54 | if (!this.animation) {
|
|---|
| 55 | if (!domClass.contains(this.domNode, "fold")) {
|
|---|
| 56 | this.previousContentHeight = dojo.marginBox(this.innerNode).h;
|
|---|
| 57 | this.animation = fx.animateProperty({
|
|---|
| 58 | node: this.innerNode,
|
|---|
| 59 | duration: this.foldDuration[0],
|
|---|
| 60 | properties: {
|
|---|
| 61 | height: 1
|
|---|
| 62 | },
|
|---|
| 63 | onEnd: lang.hitch(this, function(){
|
|---|
| 64 | domClass.add(this.domNode, "fold");
|
|---|
| 65 | this.animation = null;
|
|---|
| 66 | })
|
|---|
| 67 | }).play();
|
|---|
| 68 | this.foldButtonNode.iconNode.className = this.foldButtonNode.iconNode.className.replace("rftIconHalfArrowUp", "rftIconHalfArrowDown");
|
|---|
| 69 | } else {
|
|---|
| 70 | this.animation = fx.animateProperty({
|
|---|
| 71 | node: this.innerNode,
|
|---|
| 72 | duration: this.foldDuration[1],
|
|---|
| 73 | properties: {
|
|---|
| 74 | height: this.previousContentHeight
|
|---|
| 75 | },
|
|---|
| 76 | onEnd: lang.hitch(this, function(){
|
|---|
| 77 | domClass.remove(this.domNode, "fold");
|
|---|
| 78 | this.animation = null;
|
|---|
| 79 | })
|
|---|
| 80 | }).play();
|
|---|
| 81 | this.foldButtonNode.iconNode.className = this.foldButtonNode.iconNode.className.replace("rftIconHalfArrowDown", "rftIconHalfArrowUp");
|
|---|
| 82 | }
|
|---|
| 83 | }
|
|---|
| 84 | },
|
|---|
| 85 | getContent: function() {
|
|---|
| 86 | return { data: this.innerWidget.getContent(),
|
|---|
| 87 | type: this.item.type };
|
|---|
| 88 | },
|
|---|
| 89 | removeObject: function(widget) {
|
|---|
| 90 | this.destroyRecursive();
|
|---|
| 91 | },
|
|---|
| 92 | _createInnerWidget: function() {
|
|---|
| 93 | // This always creates a textbox as innerwidget pending creation of actual innerWidgets.
|
|---|
| 94 | // Introduce a better way to create these widgets than a switch statement, based on item.widgetType? Perhaps "new eval(item.widgetType)({});" ?
|
|---|
| 95 | this.innerWidget = eval("new "+ this.item.type + "({ disabled: true });");
|
|---|
| 96 | this.innerWidget.setContent(this.item.data);
|
|---|
| 97 | this.titleNode.innerHTML = this.item.type;
|
|---|
| 98 | /*
|
|---|
| 99 | switch (this.item.widgetType) {
|
|---|
| 100 | default:
|
|---|
| 101 | this.innerWidget = new HeaderItem({ disabled: true });
|
|---|
| 102 | this.titleNode.innerHTML = "Header";
|
|---|
| 103 | break;
|
|---|
| 104 | }*/
|
|---|
| 105 | this.innerWidget.placeAt(this.containerNode);
|
|---|
| 106 | }
|
|---|
| 107 |
|
|---|
| 108 | });
|
|---|
| 109 | });
|
|---|
