Work for #7827 - Boolean Question - Introduce an option to interchang…

…e the True and False buttons
surveyjs · Feb 12, 2024 · b1299be · b1299be
1 parent 0409a4d
commit b1299be
Show file tree

Hide file tree

Showing 9 changed files with 33 additions and 33 deletions.
diff --git a/packages/survey-angular-ui/src/questions/boolean.component.html b/packages/survey-angular-ui/src/questions/boolean.component.html
@@ -10,16 +10,16 @@
         [attr.aria-invalid]="model.a11y_input_ariaInvalid"
         [attr.aria-describedby]="model.a11y_input_ariaDescribedBy"
         [class]="model.cssClasses.control" [disabled]="model.isInputReadOnly"  [indeterminate]="model.isIndeterminate" [value]="model.booleanValue" [(ngModel)]="model.booleanValue" />
-      <div [class]="model.cssClasses.sliderGhost" (click)="model.onLabelClick($event, model.exchangeUIButtons)">
-        <span [class]="model.getLabelCss(model.exchangeUIButtons)" [model]="model.locLabelLeft" sv-ng-string></span>
+      <div [class]="model.cssClasses.sliderGhost" (click)="model.onLabelClick($event, model.swapOrder)">
+        <span [class]="model.getLabelCss(model.swapOrder)" [model]="model.locLabelLeft" sv-ng-string></span>
       </div>
       <div [class]="model.cssClasses.switch" (click)="model.onSwitchClickModel($event)">
         <span [class]="model.cssClasses.slider">
             <span *ngIf="model.cssClasses.sliderText && model.isDeterminated" [class]="model.cssClasses.sliderText" [model]="model.getCheckedLabel()" sv-ng-string></span>
         </span>
       </div>
-      <div [class]="model.cssClasses.sliderGhost" (click)="model.onLabelClick($event, !model.exchangeUIButtons)">
-        <span [class]="model.getLabelCss(!model.exchangeUIButtons)" [model]="model.locLabelRight"  sv-ng-string></span>
+      <div [class]="model.cssClasses.sliderGhost" (click)="model.onLabelClick($event, !model.swapOrder)">
+        <span [class]="model.getLabelCss(!model.swapOrder)" [model]="model.locLabelRight"  sv-ng-string></span>
       </div>
     </label>
 </div>
diff --git a/packages/survey-vue3-ui/src/BooleanSwitch.vue b/packages/survey-vue3-ui/src/BooleanSwitch.vue
@@ -23,9 +23,9 @@
       />
       <div
         :class="question.cssClasses.sliderGhost"
-        v-on:click="onLabelClick($event, question.exchangeUIButtons)"
+        v-on:click="onLabelClick($event, question.swapOrder)"
       >
-        <span :class="question.getLabelCss(question.exchangeUIButtons)"
+        <span :class="question.getLabelCss(question.swapOrder)"
           ><survey-string :locString="question.locLabelLeft"></survey-string
         ></span>
       </div>
@@ -46,9 +46,9 @@
       </div>
       <div
         :class="question.cssClasses.sliderGhost"
-        v-on:click="onLabelClick($event, !question.exchangeUIButtons)"
+        v-on:click="onLabelClick($event, !question.swapOrder)"
       >
-        <span :class="question.getLabelCss(!question.exchangeUIButtons)"
+        <span :class="question.getLabelCss(!question.swapOrder)"
           ><survey-string :locString="question.locLabelRight"></survey-string
         ></span>
       </div>

diff --git a/src/knockout/koquestion_boolean.ts b/src/knockout/koquestion_boolean.ts
@@ -13,10 +13,10 @@ export class QuestionBoolean extends QuestionBooleanModel {
     return super.onSwitchClickModel(getOriginalEvent(event));
   }
   public onTrueLabelClick(data: any, event: any) {
-    return this.onLabelClick(event, !this.exchangeUIButtons);
+    return this.onLabelClick(event, !this.swapOrder);
   }
   public onFalseLabelClick(data: any, event: any) {
-    return this.onLabelClick(event, this.exchangeUIButtons);
+    return this.onLabelClick(event, this.swapOrder);
   }
   public onKeyDown(data: any, event: any): boolean {
     return this.onKeyDownCore(event);

diff --git a/src/knockout/templates/question-boolean.html b/src/knockout/templates/question-boolean.html
@@ -6,7 +6,7 @@
         data-bind="value: question.booleanValue, css: question.cssClasses.control, attr: {name: question.name, id: question.inputId, 'role': question.a11y_input_ariaRole, 'aria-required': question.a11y_input_ariaRequired, 'aria-labelledby': question.a11y_input_ariaLabelledBy, 'aria-invalid': question.a11y_input_ariaInvalid, 'aria-describedby': question.a11y_input_ariaDescribedBy, 'aria-label': question.a11y_input_ariaLabel}, checked: question.booleanValue, surveyProp: {indeterminate: question.isIndeterminate}, enable: !question.isInputReadOnly"
       />
       <div data-bind="css: question.cssClasses.sliderGhost, click: onFalseLabelClick">
-        <span data-bind="css: question.getLabelCss(exchangeUIButtons)">
+        <span data-bind="css: question.getLabelCss(swapOrder)">
           <!-- ko template: { name: 'survey-string', data: locLabelLeft } --><!-- /ko -->
         </span>
       </div>
@@ -20,7 +20,7 @@
         </span>
       </div>
       <div data-bind="css: question.cssClasses.sliderGhost, click: onTrueLabelClick">
-        <span data-bind="css: question.getLabelCss(!exchangeUIButtons)">
+        <span data-bind="css: question.getLabelCss(!swapOrder)">
           <!-- ko template: { name: 'survey-string', data: locLabelRight } --><!-- /ko -->
         </span>
       </div>

diff --git a/src/question_boolean.ts b/src/question_boolean.ts
@@ -119,12 +119,12 @@ export class QuestionBooleanModel extends Question {
     return this.booleanValue !== null;
   }
 
-  @property({ defaultValue: false }) exchangeUIButtons: boolean;
+  @property({ defaultValue: false }) swapOrder: boolean;
   get locLabelLeft(): LocalizableString {
-    return this.exchangeUIButtons ? this.getLocalizableString("labelTrue") : this.getLocalizableString("labelFalse");
+    return this.swapOrder ? this.getLocalizableString("labelTrue") : this.getLocalizableString("labelFalse");
   }
   get locLabelRight(): LocalizableString {
-    return this.exchangeUIButtons ? this.getLocalizableString("labelFalse") : this.getLocalizableString("labelTrue");
+    return this.swapOrder ? this.getLocalizableString("labelFalse") : this.getLocalizableString("labelTrue");
   }
 
   /**
@@ -187,7 +187,7 @@ export class QuestionBooleanModel extends Question {
       .append(css.itemDisabled, this.isReadOnly)
       .append(css.itemHover, !this.isDesignMode)
       .append(css.itemChecked, !!this.booleanValue)
-      .append(css.itemExchanged, !!this.exchangeUIButtons)
+      .append(css.itemExchanged, !!this.swapOrder)
       .append(css.itemIndeterminate, this.booleanValue === null)
       .toString();
   }
@@ -211,8 +211,8 @@ export class QuestionBooleanModel extends Question {
     return new CssClassBuilder()
       .append(this.cssClasses.label)
       .append(this.cssClasses.disabledLabel, this.booleanValue === !checked || this.isReadOnly)
-      .append(this.cssClasses.labelTrue, !this.isIndeterminate && checked === !this.exchangeUIButtons)
-      .append(this.cssClasses.labelFalse, !this.isIndeterminate && checked === this.exchangeUIButtons)
+      .append(this.cssClasses.labelTrue, !this.isIndeterminate && checked === !this.swapOrder)
+      .append(this.cssClasses.labelFalse, !this.isIndeterminate && checked === this.swapOrder)
       .toString();
   }
 
@@ -320,7 +320,7 @@ Serializer.addClass(
     },
     "valueTrue",
     "valueFalse",
-    { name: "exchangeUIButtons", default: false, visible: false },
+    { name: "swapOrder", default: false, category: "general" },
     { name: "renderAs", default: "default", visible: false },
   ],
   function () {

diff --git a/src/react/boolean.tsx b/src/react/boolean.tsx
@@ -80,22 +80,22 @@ export class SurveyQuestionBoolean extends SurveyQuestionElementBase {
             aria-invalid={this.question.a11y_input_ariaInvalid}
             aria-describedby={this.question.a11y_input_ariaDescribedBy}
           />
-          <div className={cssClasses.sliderGhost} onClick={(event) => this.handleOnLabelClick(event, this.question.exchangeUIButtons)}>
-            <span className={this.question.getLabelCss(this.question.exchangeUIButtons)}>
+          <div className={cssClasses.sliderGhost} onClick={(event) => this.handleOnLabelClick(event, this.question.swapOrder)}>
+            <span className={this.question.getLabelCss(this.question.swapOrder)}>
               {this.renderLocString(this.question.locLabelLeft)}
             </span>
           </div>
           <div className={cssClasses.switch} onClick={this.handleOnSwitchClick}>
             <span className={cssClasses.slider}>
               {
                 this.question.isDeterminated && cssClasses.sliderText ?
-                  <span className={cssClasses.sliderText}>{ this.renderLocString(this.question.getCheckedLabel()) }</span>
+                  <span className={cssClasses.sliderText}>{this.renderLocString(this.question.getCheckedLabel())}</span>
                   : null
               }
             </span>
           </div>
-          <div className={cssClasses.sliderGhost} onClick={(event) => this.handleOnLabelClick(event, !this.question.exchangeUIButtons)}>
-            <span className={this.question.getLabelCss(!this.question.exchangeUIButtons)}>
+          <div className={cssClasses.sliderGhost} onClick={(event) => this.handleOnLabelClick(event, !this.question.swapOrder)}>
+            <span className={this.question.getLabelCss(!this.question.swapOrder)}>
               {this.renderLocString(this.question.locLabelRight)}
             </span>
           </div>

diff --git a/src/vue/boolean-switch.vue b/src/vue/boolean-switch.vue
@@ -19,10 +19,10 @@
       />
       <div
         :class="question.cssClasses.sliderGhost"
-        v-on:click="onLabelClick($event, question.exchangeUIButtons)"
+        v-on:click="onLabelClick($event, question.swapOrder)"
       >
       <span
-        :class="question.getLabelCss(question.exchangeUIButtons)"
+        :class="question.getLabelCss(question.swapOrder)"
         ><survey-string :locString="question.locLabelLeft"></survey-string
       ></span>
       </div>
@@ -38,8 +38,8 @@
       </div>
       <div
         :class="question.cssClasses.sliderGhost"
-        v-on:click="onLabelClick($event, !question.exchangeUIButtons)"
-      ><span :class="question.getLabelCss(!question.exchangeUIButtons)"
+        v-on:click="onLabelClick($event, !question.swapOrder)"
+      ><span :class="question.getLabelCss(!question.swapOrder)"
         ><survey-string :locString="question.locLabelRight"></survey-string
       ></span>
       </div>

diff --git a/tests/questionBooleanTests.ts b/tests/questionBooleanTests.ts
@@ -239,20 +239,20 @@ QUnit.test("Boolean shouldn't set booleanValue in design time", function (assert
   question.booleanValue = false;
   assert.equal(question.value, true);
 });
-QUnit.test("Boolean exchangeUIButtons", function (assert) {
+QUnit.test("Boolean swapOrder", function (assert) {
   const survey = new SurveyModel({});
   const question = new QuestionBooleanModel("q1");
   survey.css = defaultV2Css;
   question.setSurveyImpl(survey);
-  assert.equal(question.exchangeUIButtons, false);
+  assert.equal(question.swapOrder, false);
   assert.equal(question.getItemCss(), "sd-boolean sd-boolean--allowhover sd-boolean--indeterminate");
   assert.equal(question.getLabelCss(false), "sd-boolean__label");
   assert.equal(question.getLabelCss(true), "sd-boolean__label");
   assert.equal(question.locLabelLeft, question.locLabelFalse);
   assert.equal(question.locLabelRight, question.locLabelTrue);
 
-  question.exchangeUIButtons = true;
-  assert.equal(question.exchangeUIButtons, true);
+  question.swapOrder = true;
+  assert.equal(question.swapOrder, true);
   assert.equal(question.getItemCss(), "sd-boolean sd-boolean--allowhover sd-boolean--exchanged sd-boolean--indeterminate");
   assert.equal(question.getLabelCss(false), "sd-boolean__label");
   assert.equal(question.getLabelCss(true), "sd-boolean__label");

diff --git a/visualRegressionTests/tests/defaultV2/boolean.ts b/visualRegressionTests/tests/defaultV2/boolean.ts
@@ -62,7 +62,7 @@ frameworks.forEach(framework => {
           {
             type: "boolean",
             name: "boolean_question",
-            exchangeUIButtons: true
+            swapOrder: true
           },
         ]
       });