Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Implemented #8335 - Improve text direction detection by adding lang and dir attributes #8468

Merged
merged 3 commits into from
Jun 26, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<ng-template #template>
<div #surveyContainer *ngIf="!!model" [class]="model.getRootCss()" [style]="model.themeVariables">
<div #surveyContainer *ngIf="!!model" [class]="model.getRootCss()" [style]="model.themeVariables" [lang]="model.locale || 'en'" [dir]="model.localeDir">
<sv-svg-bundle *ngIf="model.needRenderIcons"></sv-svg-bundle>
<div [class]="model.wrapperFormCss">
<div *ngIf="!!model.renderBackgroundImage" [class]="model.css.rootBackgroundImage" [style]="model.backgroundImageStyle"></div>
Expand Down
1 change: 1 addition & 0 deletions packages/survey-vue3-ui/src/Survey.vue
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
<div
:class="vueSurvey.getRootCss()"
:style="vueSurvey.themeVariables"
:lang="vueSurvey.locale || 'en'" :dir="vueSurvey.localeDir"
ref="root"
>
<sv-svg-bundle v-if="vueSurvey.needRenderIcons"></sv-svg-bundle>
Expand Down
2 changes: 1 addition & 1 deletion src/knockout/templates/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
</script>

<script type="text/html" id="survey-content-template">
<div data-bind="css: rootCss, elementStyle: themeVariables">
<div data-bind="css: rootCss, elementStyle: themeVariables, attr: { lang: locale || 'en', dir: localeDir }">
<!-- ko if: needRenderIcons -->
<!-- ko component: { name: 'sv-svg-bundle'} -->
<!-- /ko -->
Expand Down
3 changes: 2 additions & 1 deletion src/localization/arabic.ts
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,7 @@ export var arabicSurveyStrings = {

surveyLocalization.locales["ar"] = arabicSurveyStrings;
surveyLocalization.localeNames["ar"] = "العربية";
surveyLocalization.localeDirections["ar"] = "rtl";

// The following strings have been translated by a machine translation service
// Remove those strings that you have corrected manually
Expand Down Expand Up @@ -141,5 +142,5 @@ surveyLocalization.localeNames["ar"] = "العربية";
// ok: "OK" => "موافق"
// cancel: "Cancel" => "إلغاء الأمر"
// refuseItemText: "Refuse to answer" => "رفض الإجابة"
// dontKnowItemText: "Don't know" => "لا أعرف"// savingExceedSize: "Your response exceeds 64KB. Please reduce the size of your file(s) and try again or contact a survey owner." => "ردك يتجاوز 64 كيلوبايت. يرجى تقليل حجم الملف (الملفات) والمحاولة مرة أخرى أو الاتصال بمالك الاستطلاع."
// dontKnowItemText: "Don't know" => "لا أعرف"// savingExceedSize: "Your response exceeds 64KB. Please reduce the size of your file(s) and try again or contact a survey owner." => "ردك يتجاوز 64 كيلوبايت. يرجى تقليل حجم الملف (الملفات) والمحاولة مرة أخرى أو الاتصال بمالك الاستطلاع."
// signaturePlaceHolderReadOnly: "No signature" => "لا يوجد توقيع"// tabTitlePlaceholder: "New Panel" => "لوحة جديدة"
2 changes: 1 addition & 1 deletion src/react/reactSurvey.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@ export class Survey extends SurveyElementBase<any, any>
const cssClasses = this.rootNodeClassName ? this.rootNodeClassName + " " + rootCss : rootCss;

return (
<div id={this.rootNodeId} ref={this.rootRef} className={cssClasses} style={this.survey.themeVariables}>
<div id={this.rootNodeId} ref={this.rootRef} className={cssClasses} style={this.survey.themeVariables} lang={this.survey.locale || "en"} dir={this.survey.localeDir}>
{this.survey.needRenderIcons ? <SvgBundleComponent></SvgBundleComponent> : null }
<div className={this.survey.wrapperFormCss}>
{backgroundImage}
Expand Down
3 changes: 3 additions & 0 deletions src/survey.ts
Original file line number Diff line number Diff line change
Expand Up @@ -1858,6 +1858,9 @@ export class SurveyModel extends SurveyElementCore
this.localeChanged();
this.onLocaleChangedEvent.fire(this, this.locale);
}
public get localeDir(): string {
return surveyLocalization.localeDirections[this.locale];
}
/**
* Returns an array of locales whose translations are used in the survey.
*
Expand Down
1 change: 1 addition & 0 deletions src/surveyStrings.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ export var surveyLocalization = {
defaultLocaleValue: "en",
locales: <{ [index: string]: any }>{},
localeNames: <{ [index: string]: any }>{},
localeDirections: <{ [index: string]: any }>{},
supportedLocales: <Array<any>>[],
get currentLocale() {
return this.currentLocaleValue === this.defaultLocaleValue ? "" : this.currentLocaleValue;
Expand Down
1 change: 1 addition & 0 deletions src/vue/survey.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<template>
<div :class="survey.getRootCss()"
:style="vueSurvey.themeVariables"
:lang="vueSurvey.locale || 'en'" :dir="vueSurvey.localeDir"
>
<sv-svg-bundle v-if="vueSurvey.needRenderIcons"></sv-svg-bundle>
<div :class="vueSurvey.wrapperFormCss">
Expand Down
27 changes: 27 additions & 0 deletions tests/markup/etalon_survey.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { surveyLocalization } from "survey-core";
import { registerMarkupTests } from "./helper";

registerMarkupTests(
Expand Down Expand Up @@ -44,9 +45,35 @@ registerMarkupTests(
getSnapshot: el => {
el.innerHTML = "";
el.removeAttribute("data-bind");
el.removeAttribute("lang");
el.removeAttribute("dir");
return el.outerHTML;
},
snapshot: "survey-theme-variables"
}, {
name: "Test Survey language and direction",
json: {
questions: [
{
"type": "html",
"name": "q1",
"html": "<div></div>"
}
]
},
event: "onAfterRenderSurvey",
initSurvey: (survey) => {
surveyLocalization.locales["tst"] = {};
surveyLocalization.localeDirections["tst"] = "rtl";

survey.locale = "tst";
},
getSnapshot: el => {
el.innerHTML = "";
el.removeAttribute("data-bind");
return JSON.stringify({ lang: el.lang, dir: el.dir });
},
snapshot: "survey-lang-dir"
}, {
name: "Test Survey backgroundImage",
json: {
Expand Down
1 change: 1 addition & 0 deletions tests/markup/snapshots/survey-lang-dir.snap.html
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
{"lang":"tst","dir":"rtl"}
Loading