Make file question's placeholder editable (#7179)

* Fix default renderedHtml is empty for localizable string created via property * Work for #7089: add ability to change file question's placeholders * Refactor + add unit tests * Rename file question's placeholder properties * Add descriptions * Do not show source type settings in V1 creator --------- Co-authored-by: RomanTsukanov <[email protected]>
surveyjs · Oct 20, 2023 · 6374c0d · 6374c0d
1 parent 2e1aab5
commit 6374c0d
Show file tree

Hide file tree

Showing 85 changed files with 1,815 additions and 1,673 deletions.
diff --git a/packages/survey-angular-ui/src/questions/file.component.html b/packages/survey-angular-ui/src/questions/file.component.html
@@ -9,7 +9,7 @@
   <div [class]="model.cssClasses.dragArea" (dragenter)="model.onDragEnter($event)" (drop)="model.onDrop($event)"
     (dragover)="model.onDragOver($event)" (dragleave)="model.onDragLeave($event)">
     <div [class]="model.getFileDecoratorCss()" *ngIf="model.showFileDecorator">
-      <span [class]="model.cssClasses.dragAreaPlaceholder">{{ model.renderedPlaceholder }}</span>
+      <span [class]="model.cssClasses.dragAreaPlaceholder" [model]="model.locRenderedPlaceholder" sv-ng-string></span>
       <div [class]="model.cssClasses.wrapper">
         <sv-ng-choose-file-btn [data]="{ question: model }" *ngIf="model.showChooseButton"></sv-ng-choose-file-btn>
         <sv-ng-action-bar [model]="model.actionsContainer" *ngIf="model.actionsContainerVisible"></sv-ng-action-bar>

diff --git a/packages/survey-vue3-ui/src/File.vue b/packages/survey-vue3-ui/src/File.vue
@@ -37,9 +37,11 @@
         :class="question.getFileDecoratorCss()"
         v-if="question.showFileDecorator"
       >
-        <span :class="question.cssClasses.dragAreaPlaceholder">{{
-          question.renderedPlaceholder
-        }}</span>
+        <span :class="question.cssClasses.dragAreaPlaceholder">
+          <survey-string
+            :locString="question.locRenderedPlaceholder"
+          ></survey-string>
+        </span>
         <div :class="question.cssClasses.wrapper">
           <sv-file-choose-btn
             v-if="question.showChooseButton"

diff --git a/src/jsonobject.ts b/src/jsonobject.ts
@@ -19,7 +19,11 @@ function ensureLocString(
 ) {
   let locString = target.getLocalizableString(key);
   if (!locString) {
-    locString = target.createLocalizableString(key, target, true);
+    let defaultStr: string;
+    if(typeof options.localizable === "object" && options.localizable.defaultStr) {
+      defaultStr = options.localizable.defaultStr;
+    }
+    locString = target.createLocalizableString(key, target, true, defaultStr);
     if (
       typeof options.localizable === "object" &&
       typeof options.localizable.onGetTextCallback === "function"

diff --git a/src/knockout/templates/question-file.html b/src/knockout/templates/question-file.html
@@ -11,7 +11,10 @@
         <div data-bind="css: question.cssClasses.dragArea, event: { dragenter: question.ondragenter, dragover: question.ondragover, drop: question.ondrop, dragleave: question.ondragleave }">     
           <!-- ko if: question.showFileDecorator -->
           <div data-bind="css: question.getFileDecoratorCss()">
-            <span data-bind="css: question.cssClasses.dragAreaPlaceholder, text: question.renderedPlaceholder"></span>
+            <span data-bind="css: question.cssClasses.dragAreaPlaceholder">
+              <!-- ko template: { name: 'survey-string', data: question.locRenderedPlaceholder } -->
+              <!-- /ko -->
+            </span>
             <div data-bind="css: question.cssClasses.wrapper">
               <!-- ko if: question.showChooseButton -->
                 <!-- ko component: { name: 'sv-file-choose-btn' } -->

diff --git a/src/localization/arabic.ts b/src/localization/arabic.ts
@@ -1,5 +1,5 @@
-import { surveyLocalization } from "survey-core";
-
+import { surveyLocalization } from "survey-core";
+
 export var arabicSurveyStrings = {
   pagePrevText: "السابق",
   pageNextText: "التالي",
@@ -47,7 +47,7 @@ export var arabicSurveyStrings = {
   loadingFile: "جار التحميل...",
   chooseFile: "اختر الملفات...",
   noFileChosen: "لم تقم باختيار ملف",
-  fileDragAreaPlaceholder: "اسحب ملفا وأفلته هنا أو انقر فوق الزر أدناه واختر ملفا لتحميله.",
+  filePlaceholder: "اسحب ملفا وأفلته هنا أو انقر فوق الزر أدناه واختر ملفا لتحميله.",
   confirmDelete: "هل تريد حذف السجل؟",
   keyDuplicationError: "يجب أن تكون هذه القيمة فريدة.",
   addColumn: "أضف العمود",
@@ -76,8 +76,8 @@ export var arabicSurveyStrings = {
   signaturePlaceHolder: "وقع هنا",
   chooseFileCaption: "اختر ملف",
   takePhotoCaption: "التقاط صورة",
-  cameraPlaceHolder: "انقر فوق الزر أدناه لالتقاط صورة باستخدام الكاميرا.",
-  fileCameraDragAreaPlaceHolder: "قم بسحب ملف وإفلاته أو تحديده لتحميله أو التقاط صورة باستخدام الكاميرا.",
+  photoPlaceholder: "انقر فوق الزر أدناه لالتقاط صورة باستخدام الكاميرا.",
+  fileOrPhotoPlaceholder: "قم بسحب ملف وإفلاته أو تحديده لتحميله أو التقاط صورة باستخدام الكاميرا.",
   replaceFileCaption: "استبدال الملف",
   removeFileCaption: "قم بإزالة هذا الملف",
   booleanCheckedLabel: "نعم",
@@ -95,32 +95,32 @@ export var arabicSurveyStrings = {
   tagboxDoneButtonCaption: "موافق",
   selectToRankEmptyRankedAreaText: "يتم ترتيب جميع الخيارات",
   selectToRankEmptyUnrankedAreaText: "قم بسحب وإسقاط الخيارات هنا لترتيبها"
-};
-
-surveyLocalization.locales["ar"] = arabicSurveyStrings;
-surveyLocalization.localeNames["ar"] = "العربية";
-
-// The following strings have been translated by a machine translation service
-// Remove those strings that you have corrected manually
-// indexText: "{0} of {1}" => "{0} من {1}"
-// panelDynamicTabTextFormat: "Panel {panelIndex}" => "لوحة {بانل إندكس}"
-// ratingOptionsCaption: "Select..." => "اختار..."
-// minError: "The value should not be less than {0}" => "يجب ألا تقل القيمة عن {0}"
-// maxError: "The value should not be greater than {0}" => "يجب ألا تزيد القيمة عن {0}"
-// fileDragAreaPlaceholder: "Drag and drop a file here or click the button below and choose a file to upload." => "اسحب ملفا وأفلته هنا أو انقر فوق الزر أدناه واختر ملفا لتحميله."
-// emptyRowsText: "There are no rows." => "لا توجد صفوف."
-// multipletext_itemname: "text" => "نص"
-// signaturePlaceHolder: "Sign here" => "وقع هنا"
-// modalCancelButtonText: "Cancel" => "إلغاء الأمر"
-// modalApplyButtonText: "Apply" => "طبق"
-// filterStringPlaceholder: "Type to search..." => "اكتب للبحث..."
-// emptyMessage: "No data to display" => "لا توجد بيانات للعرض"
-// noEntriesText: "There are no entries yet.\nClick the button below to add a new entry." => "لا توجد إدخالات حتى الآن.\nانقر فوق الزر أدناه لإضافة إدخال جديد."
-// noEntriesReadonlyText: "There are no entries." => "لا توجد إدخالات."
-// more: "More" => "أكثر"
-// tagboxDoneButtonCaption: "OK" => "موافق"
-// selectToRankEmptyRankedAreaText: "All choices are ranked" => "يتم ترتيب جميع الخيارات"
-// selectToRankEmptyUnrankedAreaText: "Drag and drop choices here to rank them" => "قم بسحب وإسقاط الخيارات هنا لترتيبها"// takePhotoCaption: "Take Photo" => "التقاط صورة"
-// cameraPlaceHolder: "Click the button below to take a photo using the camera." => "انقر فوق الزر أدناه لالتقاط صورة باستخدام الكاميرا."
-// fileCameraDragAreaPlaceHolder: "Drag and drop or select a file to upload or take a photo using the camera." => "قم بسحب ملف وإفلاته أو تحديده لتحميله أو التقاط صورة باستخدام الكاميرا."
+};
+
+surveyLocalization.locales["ar"] = arabicSurveyStrings;
+surveyLocalization.localeNames["ar"] = "العربية";
+
+// The following strings have been translated by a machine translation service
+// Remove those strings that you have corrected manually
+// indexText: "{0} of {1}" => "{0} من {1}"
+// panelDynamicTabTextFormat: "Panel {panelIndex}" => "لوحة {بانل إندكس}"
+// ratingOptionsCaption: "Select..." => "اختار..."
+// minError: "The value should not be less than {0}" => "يجب ألا تقل القيمة عن {0}"
+// maxError: "The value should not be greater than {0}" => "يجب ألا تزيد القيمة عن {0}"
+// filePlaceholder: "Drag and drop a file here or click the button below and choose a file to upload." => "اسحب ملفا وأفلته هنا أو انقر فوق الزر أدناه واختر ملفا لتحميله."
+// emptyRowsText: "There are no rows." => "لا توجد صفوف."
+// multipletext_itemname: "text" => "نص"
+// signaturePlaceHolder: "Sign here" => "وقع هنا"
+// modalCancelButtonText: "Cancel" => "إلغاء الأمر"
+// modalApplyButtonText: "Apply" => "طبق"
+// filterStringPlaceholder: "Type to search..." => "اكتب للبحث..."
+// emptyMessage: "No data to display" => "لا توجد بيانات للعرض"
+// noEntriesText: "There are no entries yet.\nClick the button below to add a new entry." => "لا توجد إدخالات حتى الآن.\nانقر فوق الزر أدناه لإضافة إدخال جديد."
+// noEntriesReadonlyText: "There are no entries." => "لا توجد إدخالات."
+// more: "More" => "أكثر"
+// tagboxDoneButtonCaption: "OK" => "موافق"
+// selectToRankEmptyRankedAreaText: "All choices are ranked" => "يتم ترتيب جميع الخيارات"
+// selectToRankEmptyUnrankedAreaText: "Drag and drop choices here to rank them" => "قم بسحب وإسقاط الخيارات هنا لترتيبها"// takePhotoCaption: "Take Photo" => "التقاط صورة"
+// photoPlaceholder: "Click the button below to take a photo using the camera." => "انقر فوق الزر أدناه لالتقاط صورة باستخدام الكاميرا."
+// fileOrPhotoPlaceholder: "Drag and drop or select a file to upload or take a photo using the camera." => "قم بسحب ملف وإفلاته أو تحديده لتحميله أو التقاط صورة باستخدام الكاميرا."
 // replaceFileCaption: "Replace file" => "استبدال الملف"
diff --git a/src/localization/basque.ts b/src/localization/basque.ts
@@ -1,5 +1,5 @@
-import { surveyLocalization } from "survey-core";
-
+import { surveyLocalization } from "survey-core";
+
 export var basqueSurveyStrings = {
   pagePrevText: "Aurrekoa",
   pageNextText: "Hurrengoa",
@@ -47,7 +47,7 @@ export var basqueSurveyStrings = {
   loadingFile: "Kargatzen...",
   chooseFile: "Fitxategia(k) hautatu...",
   noFileChosen: "Ez da inolako fitxategirik hautatu",
-  fileDragAreaPlaceholder: "Arrastatu eta askatu artxibo bat hemen edo klik egin beheko botoian eta aukeratu artxibo bat kargatzeko.",
+  filePlaceholder: "Arrastatu eta askatu artxibo bat hemen edo klik egin beheko botoian eta aukeratu artxibo bat kargatzeko.",
   confirmDelete: "¿Erregistroa borratu nahi al duzu?",
   keyDuplicationError: "Balio hau bakarra izan behar du.",
   addColumn: "Zutabe bat gehitu",
@@ -76,8 +76,8 @@ export var basqueSurveyStrings = {
   signaturePlaceHolder: "Sinatu hemen",
   chooseFileCaption: "Fitxategia hautatu",
   takePhotoCaption: "Argazkia hartu",
-  cameraPlaceHolder: "Egin klik beheko botoian, kamerarekin argazki bat hartzeko.",
-  fileCameraDragAreaPlaceHolder: "Arrastatu eta askatu artxibo bat kamerarekin argazki bat kargatzeko edo hartzeko.",
+  photoPlaceholder: "Egin klik beheko botoian, kamerarekin argazki bat hartzeko.",
+  fileOrPhotoPlaceholder: "Arrastatu eta askatu artxibo bat kamerarekin argazki bat kargatzeko edo hartzeko.",
   replaceFileCaption: "Artxiboa ordeztu",
   removeFileCaption: "Fitxategi hau ezabatu",
   booleanCheckedLabel: "Bai",
@@ -95,25 +95,25 @@ export var basqueSurveyStrings = {
   tagboxDoneButtonCaption: "Ados",
   selectToRankEmptyRankedAreaText: "Aukera guztiak sailkatuta daude",
   selectToRankEmptyUnrankedAreaText: "Arrastaka eta askatzen ditu hemen sailkatzeko"
-};
-
-surveyLocalization.locales["eu"] = basqueSurveyStrings;
-surveyLocalization.localeNames["eu"] = "Euskara";
-
-// The following strings have been translated by a machine translation service
-// Remove those strings that you have corrected manually
-// indexText: "{0} of {1}" => "{1} {0}"
-// panelDynamicTabTextFormat: "Panel {panelIndex}" => "Panel {panelIndex}"
-// ratingOptionsCaption: "Select..." => "Aukeratu..."
-// fileDragAreaPlaceholder: "Drag and drop a file here or click the button below and choose a file to upload." => "Arrastatu eta askatu artxibo bat hemen edo klik egin beheko botoian eta aukeratu artxibo bat kargatzeko."
-// filterStringPlaceholder: "Type to search..." => "Idatzi bila..."
-// emptyMessage: "No data to display" => "Ez daturik erakusteko"
-// noEntriesText: "There are no entries yet.\nClick the button below to add a new entry." => "Oraindik ez sarrerarik.\nKlik beheko botoian klik egin sarrera berri bat eransteko."
-// noEntriesReadonlyText: "There are no entries." => "Ez sarrerarik."
-// more: "More" => "Gehiago"
-// tagboxDoneButtonCaption: "OK" => "Ados"
-// selectToRankEmptyRankedAreaText: "All choices are ranked" => "Aukera guztiak sailkatuta daude"
-// selectToRankEmptyUnrankedAreaText: "Drag and drop choices here to rank them" => "Arrastaka eta askatzen ditu hemen sailkatzeko"// takePhotoCaption: "Take Photo" => "Argazkia hartu"
-// cameraPlaceHolder: "Click the button below to take a photo using the camera." => "Egin klik beheko botoian, kamerarekin argazki bat hartzeko."
-// fileCameraDragAreaPlaceHolder: "Drag and drop or select a file to upload or take a photo using the camera." => "Arrastatu eta askatu artxibo bat kamerarekin argazki bat kargatzeko edo hartzeko."
+};
+
+surveyLocalization.locales["eu"] = basqueSurveyStrings;
+surveyLocalization.localeNames["eu"] = "Euskara";
+
+// The following strings have been translated by a machine translation service
+// Remove those strings that you have corrected manually
+// indexText: "{0} of {1}" => "{1} {0}"
+// panelDynamicTabTextFormat: "Panel {panelIndex}" => "Panel {panelIndex}"
+// ratingOptionsCaption: "Select..." => "Aukeratu..."
+// filePlaceholder: "Drag and drop a file here or click the button below and choose a file to upload." => "Arrastatu eta askatu artxibo bat hemen edo klik egin beheko botoian eta aukeratu artxibo bat kargatzeko."
+// filterStringPlaceholder: "Type to search..." => "Idatzi bila..."
+// emptyMessage: "No data to display" => "Ez daturik erakusteko"
+// noEntriesText: "There are no entries yet.\nClick the button below to add a new entry." => "Oraindik ez sarrerarik.\nKlik beheko botoian klik egin sarrera berri bat eransteko."
+// noEntriesReadonlyText: "There are no entries." => "Ez sarrerarik."
+// more: "More" => "Gehiago"
+// tagboxDoneButtonCaption: "OK" => "Ados"
+// selectToRankEmptyRankedAreaText: "All choices are ranked" => "Aukera guztiak sailkatuta daude"
+// selectToRankEmptyUnrankedAreaText: "Drag and drop choices here to rank them" => "Arrastaka eta askatzen ditu hemen sailkatzeko"// takePhotoCaption: "Take Photo" => "Argazkia hartu"
+// photoPlaceholder: "Click the button below to take a photo using the camera." => "Egin klik beheko botoian, kamerarekin argazki bat hartzeko."
+// fileOrPhotoPlaceholder: "Drag and drop or select a file to upload or take a photo using the camera." => "Arrastatu eta askatu artxibo bat kamerarekin argazki bat kargatzeko edo hartzeko."
 // replaceFileCaption: "Replace file" => "Artxiboa ordeztu"