Skip to content

Commit

Permalink
extend customToolboxQuestions API: #38
Browse files Browse the repository at this point in the history
  • Loading branch information
andrewtelnov committed Jan 25, 2017
1 parent f3a01fb commit 2362f55
Show file tree
Hide file tree
Showing 3 changed files with 57 additions and 24 deletions.
43 changes: 29 additions & 14 deletions src/editor.ts
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,8 @@ export class SurveyEditor {
public surveyId: string = null;
public surveyPostId: string = null;
public questionTypes: string[];
public koCopiedQuestions: any;
public koCustomToolboxQuestions: any;
public customToolboxQuestionMaxCount: number = 3;
public generateValidJSONChangedCallback: (generateValidJSON: boolean) => void;
public alwaySaveTextInPropertyEditors: boolean = false;
public onCanShowProperty: Survey.Event<(sender: SurveyEditor, options: any) => any, any> = new Survey.Event<(sender: SurveyEditor, options: any) => any, any>();
Expand All @@ -59,15 +60,15 @@ export class SurveyEditor {
runSurveyClick: any; embedingSurveyClick: any;
saveButtonClick: any;
draggingQuestion: any; clickQuestion: any;
draggingCopiedQuestion: any; clickCopiedQuestion: any;
draggingCopiedQuestion: any; clickCustomToolboxQuestion: any;
dragEnd: any;

constructor(renderedElement: any = null, options: any = null) {

this.koShowOptions = ko.observable();
this.koGenerateValidJSON = ko.observable();
this.setOptions(options);
this.koCopiedQuestions = ko.observableArray();
this.koCustomToolboxQuestions = ko.observableArray();
this.koCanDeleteObject = ko.observable(false);

var self = this;
Expand Down Expand Up @@ -114,7 +115,7 @@ export class SurveyEditor {
this.draggingQuestion = function (questionType, e) { self.doDraggingQuestion(questionType, e); };
this.clickQuestion = function (questionType) { self.doClickQuestion(questionType); };
this.draggingCopiedQuestion = function (item, e) { self.doDraggingCopiedQuestion(item.json, e); };
this.clickCopiedQuestion = function (item) { self.doClickCopiedQuestion(item.json); };
this.clickCustomToolboxQuestion = function (item) { self.doClickCustomToolboxQuestion(item.json); };
this.dragEnd = function (item, e) { self.dragDropHelper.end(); };

this.doUndoClick = function () { self.doUndoRedo(self.undoRedo.undo()); };
Expand Down Expand Up @@ -396,7 +397,7 @@ export class SurveyEditor {
this.pagesEditor.setSelectedPage(<Survey.Page>this.survey.currentPage);
this.surveyVerbs.survey = this.survey;
this.surveyValue["onSelectedQuestionChanged"].add((sender: Survey.Survey, options) => { self.surveyObjects.selectObject(sender["selectedQuestionValue"]); });
this.surveyValue["onCopyQuestion"].add((sender: Survey.Survey, options) => { self.copyQuestion(self.koSelectedObject().value); });
this.surveyValue["onCopyQuestion"].add((sender: Survey.Survey, options) => { self.addCustomToolboxQuestion(self.koSelectedObject().value); });
this.surveyValue["onFastCopyQuestion"].add((sender: Survey.Survey, options) => { self.fastCopyQuestion(self.koSelectedObject().value); });
this.surveyValue["onDeleteCurrentObject"].add((sender: Survey.Survey, options) => { self.deleteCurrentObject(); });
this.surveyValue.onProcessHtml.add((sender: Survey.Survey, options) => { options.html = self.processHtml(options.html); });
Expand All @@ -421,7 +422,7 @@ export class SurveyEditor {
private doClickQuestion(questionType: any) {
this.doClickQuestionCore(Survey.QuestionFactory.Instance.createQuestion(questionType, this.getNewQuestionName()));
}
private doClickCopiedQuestion(json: any) {
private doClickCustomToolboxQuestion(json: any) {
var name = this.getNewQuestionName();
var question = Survey.QuestionFactory.Instance.createQuestion(json["type"], name);
new Survey.JsonObject().toObject(json, question);
Expand Down Expand Up @@ -460,30 +461,44 @@ export class SurveyEditor {
private deleteCurrentObject() {
this.deleteObject(this.koSelectedObject().value);
}
public copyQuestion(question: Survey.QuestionBase) {
public get customToolboxQuestionsText(): string {
if (this.koCustomToolboxQuestions().length == 0) return "";
return JSON.stringify(this.koCustomToolboxQuestions());
}
public set customToolboxQuestionsText(val: string) {
if (!val) {
this.koCustomToolboxQuestions([]);
} else {
var json = JSON.parse(val);
if (json && Array.isArray(json)) {
this.koCustomToolboxQuestions(json);
}
}
}
public addCustomToolboxQuestion(question: Survey.QuestionBase) {
var objType = SurveyHelper.getObjectType(question);
if (objType != ObjType.Question) return;
var json = new Survey.JsonObject().toJsonObject(question);
json.type = question.getType();
var item = this.getCopiedQuestionByName(question.name);
var item = this.getCustomToolboxQuestionByName(question.name);
if (item) {
item.json = json;
} else {
this.koCopiedQuestions.push({ name: question.name, json: json });
this.koCustomToolboxQuestions.push({ name: question.name, json: json });
}
if (this.koCopiedQuestions().length > 3) {
this.koCopiedQuestions.splice(0, 1);
if (this.koCustomToolboxQuestions().length > this.customToolboxQuestionMaxCount) {
this.koCustomToolboxQuestions.splice(0, 1);
}
}

public fastCopyQuestion(question: Survey.QuestionBase) {
var json = new Survey.JsonObject().toJsonObject(question);
json.type = question.getType();
this.doClickCopiedQuestion( json );
this.doClickCustomToolboxQuestion( json );
}

private getCopiedQuestionByName(name: string) {
var items = this.koCopiedQuestions();
private getCustomToolboxQuestionByName(name: string) {
var items = this.koCustomToolboxQuestions();
for (var i = 0; i < items.length; i++) {
if (items[i].name == name) return items[i];
}
Expand Down
4 changes: 2 additions & 2 deletions src/templates/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -54,8 +54,8 @@
<span class="svd_toolbox_item_text" data-bind="text: $root.getLocString('qt.' + $data)"></span>
</div>
<!-- /ko -->
<!-- ko foreach: koCopiedQuestions -->
<div class="btn btn-default" style="text-align:left; margin:1px;width:100%" draggable="true" data-bind="click: $parent.clickCopiedQuestion, event:{dragstart: function(el, e) { $parent.draggingCopiedQuestion($data, e); return true;}, dragend: function(el, e) { $parent.dragEnd(); }}">
<!-- ko foreach: koCustomToolboxQuestions -->
<div class="btn btn-default" style="text-align:left; margin:1px;width:100%" draggable="true" data-bind="click: $parent.clickCustomToolboxQuestion, event:{dragstart: function(el, e) { $parent.draggingCopiedQuestion($data, e); return true;}, dragend: function(el, e) { $parent.dragEnd(); }}">
<span class="icon-default"></span>
<span class="svd_toolbox_item_text" data-bind="text:name"></span>
</div>
Expand Down
34 changes: 26 additions & 8 deletions tests/SurveyEditorTests.ts
Original file line number Diff line number Diff line change
Expand Up @@ -22,17 +22,35 @@ QUnit.test("Set Text property", function (assert) {
editor.text = jsonText;
assert.equal(editor.koIsShowDesigner(), false);
});
QUnit.test("Copy Question", function (assert) {
QUnit.test("Add questions to toolbox", function (assert) {
var editor = new SurveyEditor();
editor.text = JSON.stringify(getSurveyJson());

assert.equal(editor.koCopiedQuestions().length, 0, "There is no copied question yet.");
editor.copyQuestion(<Survey.Question>editor.survey.getAllQuestions()[0]);
assert.equal(editor.koCopiedQuestions().length, 1, "There is one copied question now.");
assert.equal(editor.koCopiedQuestions()[0].name, "question1", "The copied question is 'question1'");
editor.copyQuestion(<Survey.Question>editor.survey.getAllQuestions()[0]);
assert.equal(editor.koCopiedQuestions().length, 1, "There is still one copied question now.");
assert.equal(editor.koCopiedQuestions()[0].name, "question1", "The copied question is 'question1'");
assert.equal(editor.koCustomToolboxQuestions().length, 0, "There is no copied question yet.");
editor.addCustomToolboxQuestion(<Survey.Question>editor.survey.getAllQuestions()[0]);
assert.equal(editor.koCustomToolboxQuestions().length, 1, "There is one copied question now.");
assert.equal(editor.koCustomToolboxQuestions()[0].name, "question1", "The copied question is 'question1'");
editor.addCustomToolboxQuestion(<Survey.Question>editor.survey.getAllQuestions()[0]);
assert.equal(editor.koCustomToolboxQuestions().length, 1, "There is still one copied question now.");
assert.equal(editor.koCustomToolboxQuestions()[0].name, "question1", "The copied question is 'question1'");
});
QUnit.test("Save/Load custom questions", function (assert) {
var editor = new SurveyEditor();
editor.text = JSON.stringify(getSurveyJson());
editor.addCustomToolboxQuestion(<Survey.Question>editor.survey.getAllQuestions()[0]);
editor.addCustomToolboxQuestion(<Survey.Question>editor.survey.getAllQuestions()[1]);

var customToolboxQuestionsText = editor.customToolboxQuestionsText;

var editor2 = new SurveyEditor();
editor2.text = JSON.stringify(getSurveyJson());
editor2.customToolboxQuestionsText = customToolboxQuestionsText;
assert.equal(editor2.koCustomToolboxQuestions().length, 2, "There are two custom toolbox questions");
assert.equal(editor.koCustomToolboxQuestions()[0].name, "question1", "The copied first question is 'question1'");
assert.equal(editor.koCustomToolboxQuestions()[1].name, "question2", "The copied second question is 'question2'");

editor2.customToolboxQuestionsText = "";
assert.equal(editor2.koCustomToolboxQuestions().length, 0, "Empty the customToolbox questions");
});
QUnit.test("options.questionTypes", function (assert) {
var allTypes = Survey.QuestionFactory.Instance.getAllTypes();
Expand Down

0 comments on commit 2362f55

Please sign in to comment.