Implement ability to edit signaturepad's placeholder (#7208)

* Implement ability to edit signaturepad's placeholder

* Add descriptions

---------

Co-authored-by: RomanTsukanov <sergeich16@gmail.com>

packages/survey-angular-ui/src/questions/signature.component.html

@@ -1,7 +1,7 @@
 <div
 [class]="model.cssClasses.root"
 [style.height]="model.signatureHeight + 'px'" [style.width]="model.signatureWidth + 'px'" #contentElement>
-<div [class]="model.cssClasses.placeholder" [visible]="model.needShowPlaceholder()">{{ model.placeHolderText }}</div>
+<div [class]="model.cssClasses.placeholder" [visible]="model.needShowPlaceholder()" [model]="$any(model).locPlaceholder" sv-ng-string></div>
 <div>
   <img *ngIf="!!model.backgroundImage" [src]="model.backgroundImage" [width]="model.signatureWidth" [height]="model.signatureHeight" [class]="model.cssClasses.backgroundImage">
   <canvas tabindex="0" [class]="model.cssClasses.canvas"></canvas>

packages/survey-vue3-ui/src/Signaturepad.vue

@@ -10,7 +10,9 @@
     <div
       :class="question.cssClasses.placeholder"
       v-show="question.needShowPlaceholder()"
-    >{{ question.placeHolderText }}</div>
+    >
+      <survey-string :locString="question.locPlaceholder"></survey-string>
+    </div>
     <div>
       <img
         v-if="question.backgroundImage"

src/knockout/templates/question-signaturepad.html

@@ -1,7 +1,8 @@
 <script type="text/html" id="survey-question-signaturepad">
     <div data-bind="css: question.cssClasses.root, style: { height: signatureHeight, width: signatureWidth }">
-        <div 
-            data-bind="text: placeHolderText, css: question.cssClasses.placeholder, visible: $data.needShowPlaceholder()">
+        <div data-bind="css: question.cssClasses.placeholder, visible: $data.needShowPlaceholder()">
+            <!-- ko template: { name: 'survey-string', data: question.locPlaceholder } -->
+            <!-- /ko -->
         </div>
         <div>
             <!-- ko if: question.backgroundImage -->

src/question_signaturepad.ts

@@ -261,14 +261,24 @@ export class QuestionSignaturePadModel extends Question {
   get clearButtonCaption(): string {
     return this.getLocalizationString("clearCaption");
   }
+  /**
+   * A Boolean value that specifies whether to show the [placeholder](#placeholder).
+   *
+   * Default value: `true`
+   */
+  @property({ }) showPlaceholder: boolean;
 
   public needShowPlaceholder(): boolean {
-    return !this.isDrawingValue && this.isEmpty();
+    const showPlaceholder = this.showPlaceholder;
+    const isDrawing = this.isDrawingValue;
+    const isEmpty = this.isEmpty();
+    return showPlaceholder && !isDrawing && isEmpty;
   }
+  /**
+   * A placeholder for the signature area. Applies when the [`showPlaceholder`](#showPlaceholder) property is `true`.
+   */
+  @property({ localizable: { defaultStr: "signaturePlaceHolder" } }) placeholder: string;
 
-  get placeHolderText(): string {
-    return this.getLocalizationString("signaturePlaceHolder");
-  }
   endLoadingFromJson(): void {
     super.endLoadingFromJson();
     //todo: need to remove this code
@@ -316,6 +326,12 @@ Serializer.addClass(
       category: "general",
       default: true,
     },
+    { name: "showPlaceholder:boolean", category: "general", default: true },
+    { name: "placeholder:text",
+      serializationProperty: "locPlaceholder",
+      category: "general",
+      dependsOn: "showPlaceholder",
+      visibleIf: (obj: QuestionSignaturePadModel) => obj.showPlaceholder },
     {
       name: "backgroundImage:file",
       category: "general",

src/react/signaturepad.tsx

@@ -21,7 +21,7 @@ export class SurveyQuestionSignaturePad extends SurveyQuestionElementBase {
           className={cssClasses.placeholder}
           style={{ display: this.question.needShowPlaceholder() ? "" : "none" }}
         >
-          {this.question.placeHolderText}
+          {this.renderLocString(this.question.locPlaceholder)}
         </div>
         <div>
           {this.renderBackgroundImage()}

src/vue/signaturepad.vue

@@ -6,7 +6,9 @@
       width: question.signatureWidth + 'px',
     }"
   >
-    <div :class="question.cssClasses.placeholder" v-show="question.needShowPlaceholder()">{{ question.placeHolderText }}</div>
+    <div :class="question.cssClasses.placeholder" v-show="question.needShowPlaceholder()">
+      <survey-string :locString="question.locPlaceholder"></survey-string>
+    </div>
     <div>
       <img v-if="question.backgroundImage" :class="question.cssClasses.backgroundImage" :src="question.backgroundImage"
       :width="question.signatureWidth" :height="question.signatureHeight">

tests/markup/snapshots/signaturepad-with-backgroundImage.snap.html

@@ -1,5 +1,5 @@
 <div class="sjs_sp_container sv_q_signaturepad" style="height:200px; width:300px;">
-	<div class="sjs_sp_placeholder">Sign here</div>
+	<div class="sjs_sp_placeholder"><span class="sv-string-viewer">Sign here</span></div>
 	<div>
 		<img class="sjs_sp__background-image" height="200" src="https://surveyjs.io/Content/Images/examples/image-picker/lion.jpg" width="300">
 			<canvas class="sjs_sp_canvas" height="200" style="height:200px; user-select:none; width:300px;" tabindex="0" width="300">

tests/markup/snapshots/signaturepad.snap.html

@@ -1,5 +1,5 @@
 <div class="sjs_sp_container sv_q_signaturepad" style="height:200px; width:300px;">
-	<div class="sjs_sp_placeholder">Sign here</div>
+	<div class="sjs_sp_placeholder"><span class="sv-string-viewer">Sign here</span></div>
 	<div>
 		<canvas class="sjs_sp_canvas" height="200" style="height:200px; user-select:none; width:300px;" tabindex="0" width="300">
 		</canvas>

tests/question_signaturepadtests.ts

@@ -1,3 +1,4 @@
+import { Serializer } from "../src/jsonobject";
 import { QuestionSignaturePadModel } from "../src/question_signaturepad";
 import { SurveyModel } from "../src/survey";
 
@@ -287,4 +288,52 @@ QUnit.test("check penColor & background color if background image", (assert) =>
   assert.equal(signaturepadQuestion.backgroundColor, "#dde6db", "backgroundColor #dde6db");
   assert.equal(signaturepadQuestion.signaturePad.penColor, "#1ab394", "signaturePad.penColor #1ab394");
   assert.equal(signaturepadQuestion.signaturePad.backgroundColor, "transparent", "signaturePad.backgroundColor transparent");
-});
+});
+
+QUnit.test("check showPlaceholder & placeholder properties", (assert) => {
+  let json: any = {
+    questions: [
+      {
+        type: "signaturepad",
+        backgroundImage: "someUrl",
+        name: "q1",
+      },
+    ],
+  };
+  let survey = new SurveyModel(json);
+  let question = <QuestionSignaturePadModel>survey.getAllQuestions()[0];
+  assert.ok(question.needShowPlaceholder());
+  assert.equal(question.locPlaceholder.renderedHtml, "Sign here");
+
+  question.showPlaceholder = false;
+  assert.notOk(question.needShowPlaceholder());
+  question.placeholder = "test sign";
+  assert.equal(question.locPlaceholder.renderedHtml, "test sign");
+
+  json = {
+    questions: [
+      {
+        type: "signaturepad",
+        backgroundImage: "someUrl",
+        name: "q1",
+        showPlaceholder: false,
+        placeHolder: "test sign"
+      },
+    ],
+  };
+  survey = new SurveyModel(json);
+  question = <QuestionSignaturePadModel>survey.getAllQuestions()[0];
+  assert.notOk(question.needShowPlaceholder());
+  question.placeholder = "test sign";
+  assert.equal(question.locPlaceholder.renderedHtml, "test sign");
+});
+
+QUnit.test("check placeholder property visibility", (assert) => {
+  const prop1 = Serializer.getProperty("signaturepad", "placeholder");
+  assert.deepEqual(Serializer.getProperty("signaturepad", "showPlaceholder").getDependedProperties(), [prop1.name]);
+  const q1 = new QuestionSignaturePadModel("q1");
+  q1.showPlaceholder = true;
+  assert.equal(prop1.isVisible(undefined, q1), true);
+  q1.showPlaceholder = false;
+  assert.equal(prop1.isVisible(undefined, q1), false);
+});