fix(template): switch locale use Location service for scene with base…

…-href (#398)
docgeni · Sep 22, 2022 · 6fe13b5 · 6fe13b5
1 parent abe594b
commit 6fe13b5
Show file tree

Hide file tree

Showing 3 changed files with 110 additions and 109 deletions.
diff --git a/packages/template/src/services/global-context.spec.ts b/packages/template/src/services/global-context.spec.ts
@@ -2,6 +2,10 @@ import { DocgeniSiteConfig } from './../interfaces/config';
 import { CONFIG_TOKEN, GlobalContext } from './global-context';
 import { createServiceFactory, createHttpFactory, SpectatorHttp, HttpMethod } from '@ngneat/spectator';
 import { NavigationItem } from '../interfaces';
+import { TestBed } from '@angular/core/testing';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { HttpClient } from '@angular/common/http';
+import { Location } from '@angular/common';
 
 describe('GlobalContext', () => {
     let spectator: SpectatorHttp<GlobalContext>;
@@ -19,6 +23,22 @@ describe('GlobalContext', () => {
         mocks: []
     });
 
+    function createGlobalContext(config: Partial<DocgeniSiteConfig>) {
+        const globalContext = new GlobalContext(
+            config as DocgeniSiteConfig,
+            TestBed.inject(HttpClient),
+            document,
+            TestBed.inject(Location)
+        );
+        return globalContext;
+    }
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            imports: [HttpClientTestingModule]
+        });
+    });
+
     afterEach(() => {
         window.localStorage.setItem('docgeni-locale', '');
     });
@@ -38,102 +58,71 @@ describe('GlobalContext', () => {
         });
 
         it(`should set locale from defaultLocale in site config`, () => {
-            const globalContext = new GlobalContext(
-                {
-                    defaultLocale: 'zh-cn'
-                } as DocgeniSiteConfig,
-                undefined,
-                document
-            );
+            const globalContext = createGlobalContext({
+                defaultLocale: 'zh-cn'
+            });
             expect(globalContext.locale).toBe('zh-cn');
         });
 
         it(`should set locale from cache`, () => {
             window.localStorage.setItem('docgeni-locale', 'en-us');
-            const globalContext = new GlobalContext(
-                {
-                    defaultLocale: 'zh-cn',
-                    locales: [
-                        { key: 'zh-cn', name: '中文' },
-                        { key: 'en-us', name: '英文' }
-                    ]
-                } as DocgeniSiteConfig,
-                undefined,
-                document
-            );
+            const globalContext = createGlobalContext({
+                defaultLocale: 'zh-cn',
+                locales: [
+                    { key: 'zh-cn', name: '中文' },
+                    { key: 'en-us', name: '英文' }
+                ]
+            } as DocgeniSiteConfig);
             expect(globalContext.locale).toBe('en-us');
         });
 
         it(`should use default locale when cache locale is not in locales`, () => {
             window.localStorage.setItem('docgeni-locale', 'en-us');
-            const globalContext = new GlobalContext(
-                {
-                    defaultLocale: 'zh-cn',
-                    locales: [{ key: 'zh-cn', name: '中文' }]
-                } as DocgeniSiteConfig,
-                undefined,
-                document
-            );
+            const globalContext = createGlobalContext({
+                defaultLocale: 'zh-cn',
+                locales: [{ key: 'zh-cn', name: '中文' }]
+            } as DocgeniSiteConfig);
             expect(globalContext.locale).toBe('zh-cn');
         });
 
         it(`should use browser locale`, () => {
             const browserLanguage = window.navigator.language;
-            const globalContext = new GlobalContext(
-                {
-                    defaultLocale: '',
-                    locales: [{ key: browserLanguage, name: browserLanguage }]
-                } as DocgeniSiteConfig,
-                undefined,
-                document
-            );
+            const globalContext = createGlobalContext({
+                defaultLocale: '',
+                locales: [{ key: browserLanguage, name: browserLanguage }]
+            } as DocgeniSiteConfig);
             expect(globalContext.locale).toBe(browserLanguage);
         });
 
         it(`should use url locale`, () => {
-            const globalContext = new GlobalContext(
-                {
-                    defaultLocale: 'zh-cn',
-                    locales: [
-                        { key: 'zh-cn', name: '中文' },
-                        { key: 'en-us', name: 'EN' }
-                    ]
-                } as DocgeniSiteConfig,
-                undefined,
-                {
-                    location: {
-                        pathname: '/en-us/hello'
-                    }
-                }
-            );
+            TestBed.inject(Location).go('/en-us/hello');
+            const globalContext = createGlobalContext({
+                defaultLocale: 'zh-cn',
+                locales: [
+                    { key: 'zh-cn', name: '中文' },
+                    { key: 'en-us', name: 'EN' }
+                ]
+            } as DocgeniSiteConfig);
             expect(globalContext.locale).toBe('en-us');
         });
     });
 
     describe('mode', () => {
         it(`should set mode from site config`, () => {
-            const globalContext = new GlobalContext(
-                {
-                    defaultLocale: 'zh-cn',
-                    mode: 'full'
-                } as DocgeniSiteConfig,
-                undefined,
-                document
-            );
+            const globalContext = createGlobalContext({
+                defaultLocale: 'zh-cn',
+                mode: 'full'
+            } as DocgeniSiteConfig);
             expect(globalContext.config.mode).toBe('full');
             expect(document.documentElement.classList.contains(`dg-mode-full`));
         });
 
         it(`should set mode from cache`, () => {
             window.localStorage.setItem('docgeni-mode', 'lite');
-            const globalContext = new GlobalContext(
-                {
-                    defaultLocale: 'zh-cn',
-                    mode: 'full'
-                } as DocgeniSiteConfig,
-                undefined,
-                document
-            );
+            const globalContext = createGlobalContext({
+                defaultLocale: 'zh-cn',
+                mode: 'full'
+            } as DocgeniSiteConfig);
             expect(globalContext.config.mode).toBe('lite');
             expect(document.documentElement.classList.contains(`dg-mode-lite`));
             window.localStorage.clear();
@@ -219,7 +208,7 @@ describe('GlobalContext', () => {
             },
             { id: '', title: '', path: '', items: [{ id: '4', title: '', path: '', hidden: true }] }
         ];
-        const globalContext = new GlobalContext({} as DocgeniSiteConfig, undefined, document);
+        const globalContext = createGlobalContext({} as DocgeniSiteConfig);
         const result = globalContext.sortDocItems(list);
         expect(result.length).toBe(3);
         expect(result.map(item => item.id)).toEqual(['1', '2', '3']);

diff --git a/packages/template/src/services/global-context.ts b/packages/template/src/services/global-context.ts
@@ -2,7 +2,7 @@ import { Injectable, Inject, InjectionToken } from '@angular/core';
 import { DocgeniSiteConfig, NavigationItem, DocgeniMode, HomeDocMeta } from '../interfaces/public-api';
 import { HttpClient } from '@angular/common/http';
 import { languageCompare } from '../utils/language-compare';
-import { DOCUMENT } from '@angular/common';
+import { DOCUMENT, Location } from '@angular/common';
 export const CONFIG_TOKEN = new InjectionToken('DOC_SITE_CONFIG');
 
 export const DEFAULT_CONFIG: DocgeniSiteConfig = {
@@ -17,27 +17,32 @@ const DOCGENI_MODE_KEY = 'docgeni-mode';
     providedIn: 'root'
 })
 export class GlobalContext {
-    locale: string;
+    locale!: string;
 
-    navs: NavigationItem[];
+    navs!: NavigationItem[];
 
-    docItems: NavigationItem[];
+    docItems!: NavigationItem[];
 
-    homeMeta: HomeDocMeta;
+    homeMeta!: HomeDocMeta;
 
-    owner: string;
+    owner!: string;
 
-    repo: string;
+    repo!: string;
 
     get isDefaultLocale() {
         return this.locale === this.config.defaultLocale;
     }
 
-    constructor(@Inject(CONFIG_TOKEN) public config: DocgeniSiteConfig, private http: HttpClient, @Inject(DOCUMENT) private document: any) {
+    constructor(
+        @Inject(CONFIG_TOKEN) public config: DocgeniSiteConfig,
+        private http: HttpClient,
+        @Inject(DOCUMENT) private document: any,
+        private location: Location
+    ) {
         this.setup();
     }
 
-    private getLocaleKey() {
+    private getLocaleKey(): string {
         const localeKeyFromUrl = this.getLocalKeyFromUrl();
         if (localeKeyFromUrl) {
             return localeKeyFromUrl;
@@ -49,7 +54,7 @@ export class GlobalContext {
             if (locale) {
                 return locale.key;
             } else {
-                return this.config.defaultLocale;
+                return this.config.defaultLocale as string;
             }
         }
     }
@@ -63,16 +68,18 @@ export class GlobalContext {
         }
 
         document.body.classList.add(`dg-mode-${this.config.mode}`, `dg-theme-${this.config.theme}`);
-        const pattern = /https:\/\/github.com\/([^\/]*)\/([^\/]*)/.exec(this.config.repoUrl);
-        if (pattern && pattern.length === 3) {
-            this.owner = pattern[1];
-            this.repo = pattern[2];
+        if (this.config.repoUrl) {
+            const pattern = /https:\/\/github.com\/([^\/]*)\/([^\/]*)/.exec(this.config.repoUrl);
+            if (pattern && pattern.length === 3) {
+                this.owner = pattern[1];
+                this.repo = pattern[2];
+            }
         }
     }
 
     public getLocalKeyFromUrl() {
         const localeFromUrl = (this.config.locales || []).find(locale => {
-            return this.document.location.pathname.startsWith(`/${locale.key}`);
+            return this.location.path().startsWith(`/${locale.key}`);
         });
         return localeFromUrl && localeFromUrl.key;
     }
@@ -88,17 +95,21 @@ export class GlobalContext {
 
     initialize() {
         return new Promise((resolve, reject) => {
-            this.http.get(`assets/content/navigations-${this.locale}.json?t=${this.getNowTimestamp()}`).subscribe({
-                next: (response: { navs: NavigationItem[]; docs: NavigationItem[]; homeMeta: HomeDocMeta }) => {
-                    this.homeMeta = response.homeMeta;
-                    this.navs = response.navs;
-                    this.docItems = this.sortDocItems(this.navs);
-                    resolve(response);
-                },
-                error: error => {
-                    reject(error);
-                }
-            });
+            this.http
+                .get<{ navs: NavigationItem[]; docs: NavigationItem[]; homeMeta: HomeDocMeta }>(
+                    `assets/content/navigations-${this.locale}.json?t=${this.getNowTimestamp()}`
+                )
+                .subscribe({
+                    next: (response: { navs: NavigationItem[]; docs: NavigationItem[]; homeMeta: HomeDocMeta }) => {
+                        this.homeMeta = response.homeMeta;
+                        this.navs = response.navs;
+                        this.docItems = this.sortDocItems(this.navs);
+                        resolve(response);
+                    },
+                    error: error => {
+                        reject(error);
+                    }
+                });
         });
     }
 
@@ -111,14 +122,16 @@ export class GlobalContext {
         const list: NavigationItem[] = [];
         while (navs.length) {
             const item = navs.shift();
-            if (item.items) {
-                item.items.forEach(child => {
-                    child.ancestors = child.ancestors || [];
-                    child.ancestors.push(...(item.ancestors || []), item);
-                });
-                navs.unshift(...item.items);
-            } else if (!item.hidden) {
-                list.push(item);
+            if (item) {
+                if (item.items) {
+                    item.items.forEach(child => {
+                        child.ancestors = child.ancestors || [];
+                        child.ancestors.push(...(item.ancestors || []), item);
+                    });
+                    navs.unshift(...item.items);
+                } else if (!item.hidden) {
+                    list.push(item);
+                }
             }
         }
         return list;

diff --git a/packages/template/src/shared/locales-selector/locales-selector.component.ts b/packages/template/src/shared/locales-selector/locales-selector.component.ts
@@ -1,4 +1,4 @@
-import { DOCUMENT } from '@angular/common';
+import { Location } from '@angular/common';
 import { Component, OnInit, HostBinding, ElementRef, Inject } from '@angular/core';
 import { NavigationService, GlobalContext } from '../../services/public-api';
 
@@ -9,9 +9,9 @@ import { NavigationService, GlobalContext } from '../../services/public-api';
 export class LocalesSelectorComponent implements OnInit {
     @HostBinding('class.dg-locales-selector') isNavbar = true;
 
-    locale: string;
+    locale!: string;
 
-    constructor(public global: GlobalContext, public navigationService: NavigationService, @Inject(DOCUMENT) private document: any) {}
+    constructor(public global: GlobalContext, public navigationService: NavigationService, private location: Location) {}
 
     ngOnInit(): void {
         this.locale = this.global.locale;
@@ -23,14 +23,13 @@ export class LocalesSelectorComponent implements OnInit {
         if (isDefaultLocale) {
             this.global.setLocale(this.locale);
         }
+        const currentPath = this.location.path();
         if (localKeyFromUrl) {
-            location.href =
-                document.location.origin +
-                document.location.pathname.replace('/' + localKeyFromUrl, isDefaultLocale ? '' : `/${this.locale}`);
+            this.location.go(currentPath.replace('/' + localKeyFromUrl, isDefaultLocale ? '' : `/${this.locale}`));
         } else {
-            location.href = isDefaultLocale
-                ? document.location.origin + document.location.pathname
-                : document.location.origin + `/${this.locale}` + location.pathname;
+            this.location.go(isDefaultLocale ? currentPath : `/${this.locale}${currentPath}`);
         }
+        // 强制刷新
+        location.href = location.href;
     }
 }