From de0f906163566b0261f5695d024d7e490f3c3c82 Mon Sep 17 00:00:00 2001 From: Cilibiu Bogdan Date: Tue, 14 May 2019 14:45:05 +0300 Subject: [PATCH] [ADF-4543] Language Menu - set layout orientation (#4719) * language entry interface * pass language object * set textOrientation * tests * update doc * add rtl language --- demo-shell/src/app.config.json | 5 ++ .../components/language-menu.component.md | 11 +++ .../language-menu.component.html | 2 +- .../language-menu.component.spec.ts | 72 +++++++++++++------ .../language-menu/language-menu.component.ts | 11 +-- lib/core/language-menu/language.interface.ts | 24 +++++++ lib/core/language-menu/public-api.ts | 2 +- 7 files changed, 100 insertions(+), 27 deletions(-) create mode 100644 lib/core/language-menu/language.interface.ts diff --git a/demo-shell/src/app.config.json b/demo-shell/src/app.config.json index 82ac44c5de..206d55a364 100644 --- a/demo-shell/src/app.config.json +++ b/demo-shell/src/app.config.json @@ -96,6 +96,11 @@ { "key": "sv", "label": "Swedish" + }, + { + "key": "ar", + "label": "Arabic", + "direction": "rtl" } ], "search": { diff --git a/docs/core/components/language-menu.component.md b/docs/core/components/language-menu.component.md index 1c1eab973d..2656ce9910 100644 --- a/docs/core/components/language-menu.component.md +++ b/docs/core/components/language-menu.component.md @@ -51,6 +51,17 @@ The component fetches the list of available languages from `app.config.json`: ] ``` +For languages that need RTL orientation, `direction` property must be declared. Default is `ltr`. + + +```json + { + "key": "...", + "label": "...", + "direction": "rtl" + }, +``` + If no `languages` setting is provided, the component shows only the English language. ### Nested Menu language diff --git a/lib/core/language-menu/language-menu.component.html b/lib/core/language-menu/language-menu.component.html index 0e4e781294..16d486ac84 100644 --- a/lib/core/language-menu/language-menu.component.html +++ b/lib/core/language-menu/language-menu.component.html @@ -1,2 +1,2 @@ - diff --git a/lib/core/language-menu/language-menu.component.spec.ts b/lib/core/language-menu/language-menu.component.spec.ts index c59c92a156..9d9432e34d 100644 --- a/lib/core/language-menu/language-menu.component.spec.ts +++ b/lib/core/language-menu/language-menu.component.spec.ts @@ -20,12 +20,30 @@ import { AppConfigService } from '../app-config/app-config.service'; import { LanguageMenuComponent } from './language-menu.component'; import { setupTestBed } from '../testing/setupTestBed'; import { CoreTestingModule } from '../testing/core.testing.module'; +import { UserPreferencesService } from '../services/user-preferences.service'; describe('LanguageMenuComponent', () => { let fixture: ComponentFixture; let component: LanguageMenuComponent; let appConfig: AppConfigService; + let userPreferencesService: UserPreferencesService; + + const languages = [ + { + key: 'fake-key-1', + label: 'fake-label-1' + }, + { + key: 'fake-key-2', + label: 'fake-label-2' + }, + { + key: 'fake-key-3', + label: 'fake-label-3', + direction: 'rtl' + } + ]; setupTestBed({ imports: [CoreTestingModule] @@ -35,6 +53,7 @@ describe('LanguageMenuComponent', () => { fixture = TestBed.createComponent(LanguageMenuComponent); component = fixture.componentInstance; appConfig = TestBed.get(AppConfigService); + userPreferencesService = TestBed.get(UserPreferencesService); }); afterEach(() => { @@ -46,27 +65,40 @@ describe('LanguageMenuComponent', () => { expect(component.languages).toEqual([{ key: 'en', label: 'English' }]); - appConfig.config.languages = [ - { - key: 'fake-key-1', - label: 'fake-label-1' - }, - { - key: 'fake-key-2', - label: 'fake-label-2' - } - ]; + appConfig.config.languages = languages; component.ngOnInit(); - expect(component.languages).toEqual([ - { - key: 'fake-key-1', - label: 'fake-label-1' - }, - { - key: 'fake-key-2', - label: 'fake-label-2' - } - ]); + expect(component.languages).toEqual(languages); + }); + + it('should change user preference locale', () => { + appConfig.config.languages = languages; + + userPreferencesService.locale = 'fake-key-2'; + + fixture.detectChanges(); + component.changeLanguage(languages[0]); + + expect(userPreferencesService.locale).toEqual(languages[0].key); + }); + + it('should set text orientation when laguage direction is declared', () => { + appConfig.config.languages = languages; + userPreferencesService.locale = 'fake-key-1'; + const spy = spyOn(userPreferencesService, 'set'); + fixture.detectChanges(); + + component.changeLanguage(languages[2]); + expect(spy.calls.mostRecent().args[0]).toBe('textOrientation', 'rtl'); + }); + + it('should change text orientation to default when laguage direction is not declared', () => { + appConfig.config.languages = languages; + userPreferencesService.locale = 'fake-key-1'; + const spy = spyOn(userPreferencesService, 'set'); + fixture.detectChanges(); + + component.changeLanguage(languages[1]); + expect(spy.calls.mostRecent().args[0]).toBe('textOrientation', 'ltr'); }); }); diff --git a/lib/core/language-menu/language-menu.component.ts b/lib/core/language-menu/language-menu.component.ts index d0129f5661..55e2941375 100644 --- a/lib/core/language-menu/language-menu.component.ts +++ b/lib/core/language-menu/language-menu.component.ts @@ -18,6 +18,7 @@ import { Component, OnInit } from '@angular/core'; import { AppConfigService, AppConfigValues } from '../app-config/app-config.service'; import { UserPreferencesService } from '../services/user-preferences.service'; +import { LanguageItem } from './language.interface'; @Component({ selector: 'adf-language-menu', @@ -25,7 +26,7 @@ import { UserPreferencesService } from '../services/user-preferences.service'; }) export class LanguageMenuComponent implements OnInit { - languages: Array = [ + languages: Array = [ { key: 'en', label: 'English'} ]; @@ -35,14 +36,14 @@ export class LanguageMenuComponent implements OnInit { } ngOnInit() { - const languagesConfigApp = this.appConfig.get>(AppConfigValues.APP_CONFIG_LANGUAGES_KEY); + const languagesConfigApp = this.appConfig.get>(AppConfigValues.APP_CONFIG_LANGUAGES_KEY); if (languagesConfigApp) { this.languages = languagesConfigApp; } } - changeLanguage(lang: string) { - this.userPreference.locale = lang; + changeLanguage(language: LanguageItem) { + this.userPreference.locale = language.key; + this.userPreference.set('textOrientation', language.direction || 'ltr'); } - } diff --git a/lib/core/language-menu/language.interface.ts b/lib/core/language-menu/language.interface.ts new file mode 100644 index 0000000000..c0fc03bf0d --- /dev/null +++ b/lib/core/language-menu/language.interface.ts @@ -0,0 +1,24 @@ +/*! + * @license + * Copyright 2019 Alfresco Software, Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { Direction } from '@angular/cdk/bidi'; + +export interface LanguageItem { + key: string; + label: string; + direction?: Direction; +} diff --git a/lib/core/language-menu/public-api.ts b/lib/core/language-menu/public-api.ts index 7358da1d02..2d3686278c 100644 --- a/lib/core/language-menu/public-api.ts +++ b/lib/core/language-menu/public-api.ts @@ -16,5 +16,5 @@ */ export * from './language-menu.component'; - +export * from './language.interface'; export * from './language-menu.module';