auto merge

src/editor.ts

@@ -132,6 +132,12 @@ export class SurveyEditor implements ISurveyObjectEditorOptions {
      * <br/> options.page the survey Page object where question has been added.
      */
     public onPanelAdded: Survey.Event<(sender: SurveyEditor, options: any) => any, any> = new Survey.Event<(sender: SurveyEditor, options: any) => any, any>();
+    /**
+     * The event is called on adding a new page into the survey.  
+     * <br/> sender the survey editor object that fires the event
+     * <br/> options.page the new survey Page object.
+     */
+    public onPageAdded: Survey.Event<(sender: SurveyEditor, options: any) => any, any> = new Survey.Event<(sender: SurveyEditor, options: any) => any, any>();
     /**
      * The event is called when a survey is changed in the designer. A new page/question/page is added or existing is removed, a property is changed and so on.
      * <br/> sender the survey editor object that fires the event
@@ -581,6 +587,10 @@ export class SurveyEditor implements ISurveyObjectEditorOptions {
         this.surveyObjects.addElement(panel, parentPanel);
         this.survey.render();
     }
+    private doOnPageAdded(page: Survey.Page) {
+        var options = { page: page };
+        this.onPageAdded.fire(this, options);
+    }
     private onPropertyValueChanged(property: Survey.JsonObjectProperty, obj: any, newValue: any) {
         var isDefault = property.isDefaultValue(newValue);
         obj[property.name] = newValue;
@@ -766,6 +776,10 @@ export class SurveyEditor implements ISurveyObjectEditorOptions {
         this.surveyValue.onQuestionRemoved.add((sender: Survey.Survey, options) => { self.doOnElementRemoved(options.question); });
         this.surveyValue.onPanelAdded.add((sender: Survey.Survey, options) => { self.doOnPanelAdded(options.panel, options.parentPanel); });
         this.surveyValue.onPanelRemoved.add((sender: Survey.Survey, options) => { self.doOnElementRemoved(options.panel); });
+        var pAdded = <any>this.surveyValue["onPageAdded"];
+        if(pAdded && pAdded.add) {
+            pAdded.add((sender: Survey.Survey, options) => { self.doOnPageAdded(options.page); });
+        }
     }
     private processHtml(html: string): string {
         if (!html) return html;

src/objectEditor.ts

@@ -16,6 +16,8 @@ export class SurveyObjectEditor {
     constructor(public propertyEditorOptions: ISurveyObjectEditorOptions = null) {
         this.koProperties = ko.observableArray();
         this.koActiveProperty = ko.observable();
+        this.koActiveProperty.subscribe(function(oldValue) { if(oldValue) oldValue.isActive = false; }, null, "beforeChange");
+        this.koActiveProperty.subscribe(function(newValue) { if(newValue) newValue.isActive = true;  });        
         this.koHasObject = ko.observable();
     }
     public get selectedObject(): any { return this.selectedObjectValue; }

src/objectProperty.ts

@@ -10,12 +10,15 @@ export class SurveyObjectProperty {
     private objectValue: any;
     private isValueUpdating: boolean;
     private onPropertyChanged: SurveyOnPropertyChangedCallback;
+    private isActiveValue: boolean;
     public name: string;
     public disabled: boolean;
     public editor: SurveyPropertyEditorBase;
     public editorType: string;
     public baseEditorType: string;
 
+    koIsShowEditor: any;
+
     constructor(public property: Survey.JsonObjectProperty, onPropertyChanged: SurveyOnPropertyChangedCallback = null, propertyEditorOptions: ISurveyObjectEditorOptions = null) {
         this.onPropertyChanged = onPropertyChanged;
         this.name = this.property.name;
@@ -26,9 +29,16 @@ export class SurveyObjectProperty {
         this.editor.onGetLocale = this.doOnGetLocale;
         this.editor.options = propertyEditorOptions;
         this.editorType = this.editor.editorType;
+        this.koIsShowEditor = ko.observable(false);
+        this.isActive = false;
     }
     public get displayName(): string { return this.editor.displayName; }
     public get title(): string { return this.editor.title; }
+    public get isActive(): boolean { return this.isActiveValue; }
+    public set isActive(val: boolean) {
+        this.isActiveValue = val;
+        this.koIsShowEditor(!this.disabled && (this.editor.alwaysShowEditor || this.isActive));
+    }
     public get koValue(): any { return this.editor.koValue; }
     public get koText(): any { return this.editor.koText; }
     public get koIsDefault(): any { return this.editor.koIsDefault; }

src/propertyEditors/propertyEditorBase.ts

@@ -48,6 +48,7 @@ export class SurveyPropertyEditorBase implements Survey.ILocalizableOwner {
     public get property(): Survey.JsonObjectProperty { return this.property_; }
     public get editablePropertyName(): string { return this.property ? this.property.name : "" };
     public get readOnly() { return this.property ? this.property.readOnly : false; }
+    public get alwaysShowEditor(): boolean { return false; }
     public get title(): string { return this.titleValue; }
     public get displayName(): string { return this.displayNameValue; }
     public set displayName(val: string) { 

src/propertyEditors/propertyEditorFactory.ts

@@ -88,6 +88,7 @@ export class SurveyBooleanPropertyEditor extends SurveyPropertyEditorBase {
         super(property);
     }
     public get editorType(): string { return "boolean"; }
+    public get alwaysShowEditor(): boolean { return true; }
     public get canShowDisplayNameOnTop(): boolean { return false; }
     public getValueText(value: any): string { 
         return editorLocalization.getPropertyValue(value);

src/templates/objecteditor.html

@@ -4,8 +4,8 @@
             <tr data-bind="click: $parent.changeActiveProperty($data), css: {'active': $parent.koActiveProperty() == $data}">
                 <td data-bind="text: displayName, attr: {title: title}" width="50%"></td>
                 <td width="50%">
-                    <span data-bind="text: koText, visible: $parent.koActiveProperty() != $data || disabled, attr: {title: koText}" style="text-overflow:ellipsis;white-space:nowrap;overflow:hidden"></span>
-                    <div data-bind="visible: $parent.koActiveProperty() == $data && !disabled">
+                    <span data-bind="text: koText, visible: !koIsShowEditor(), attr: {title: koText}" style="text-overflow:ellipsis;white-space:nowrap;overflow:hidden"></span>
+                    <div data-bind="visible: koIsShowEditor()">
                         <!-- ko template: { name: 'propertyeditor-' + editorType, data: $data.editor } -->
                         <!-- /ko -->
                     </div>

tests/ObjectEditorTests.ts

@@ -52,6 +52,20 @@ QUnit.test("Active property", function (assert) {
     editor.selectedObject = new TruckDefaultValue();
     assert.equal(editor.koActiveProperty().name, "name", "name property is active by default");
 });
+QUnit.test("Is show property", function (assert) {
+    var editor = new SurveyObjectEditor();
+    editor.selectedObject = new TruckDefaultValue();
+    var nameProperty = editor.getPropertyEditor("name");
+    var maxWeightProperty = editor.getPropertyEditor("maxWeight");
+    var isNewProperty = editor.getPropertyEditor("isNew");
+    assert.equal(nameProperty.koIsShowEditor(), true, "name property is active by default");
+    assert.equal(maxWeightProperty.koIsShowEditor(), false, "name property is not active");
+    editor.koActiveProperty(maxWeightProperty);
+    assert.equal(nameProperty.koIsShowEditor(), false, "name property is inactive now");
+    assert.equal(maxWeightProperty.koIsShowEditor(), true, "maxWeight property is active");
+
+    assert.equal(isNewProperty.koIsShowEditor(), true, "isNewProperty property always show Editor");
+});
 QUnit.test("On property changed", function (assert) {
     var editor = new SurveyObjectEditor();
     var car = new TruckDefaultValue();