Merge pull request #295 from IgniteUI/hPopov/transform-to-spa

Transforming from MPA to SPA

package.json

@@ -39,6 +39,7 @@
     "lazysizes": "^5.3.0",
     "lz-string": "^1.4.4",
     "resize-observer-polyfill": "^1.5.1",
+    "rxjs": "^6.6.7",
     "slash": "^3.0.0"
   },
   "devDependencies": {

src/app/docfx.ts

@@ -4,52 +4,78 @@ import 'bootstrap';
 import 'jquery-ui';
 import "lazysizes";
 import { RenderingService } from './types';
-import { CodeView } from './services/code-view/code-view';
 import {
-        AffixRenderingService, 
+        CodeView,
+        createCodeService
+} from './services/code-view';
+import {
+        AffixRenderingService,
         ArticleRenderingService,
         NavbarRenderingService,
         TocRenderingService
-    } from './services/rendering/index';
-import { IgViewer } from './services/igViewer.common';
+} from './services/rendering/index';
+import {
+        attachLazyLoadHandler,
+        attachThemingHandler,
+        showHideThemingWidget
+} from './handlers';
 import { ResizingService } from './services/resizing';
-import { attachLazyLoadHandler } from './handlers/lazyload';
-import { attachThemingHandler } from './handlers/theming';
 import { initNavigation } from './services/navigation';
-import { CodeService } from './services/code-view/base-code-service';
-import { AngularCodeService } from './services/code-view/angular-code-service';
-import { XplatCodeService } from './services/code-view/xplat-code-service';
+import { Router } from './services/router';
+import util from './services/utils';
 
 $(() => {
-    $.widget("custom.codeView", new CodeView())
-    let navbarService = new NavbarRenderingService(),
-        resizingService = new ResizingService(),
-        tocService = new TocRenderingService(resizingService),
-        affixService = new AffixRenderingService(resizingService),
-        articleService = new ArticleRenderingService(),
-        services: Array<RenderingService> = [affixService, navbarService, articleService, tocService];
-    services.forEach(service => service.render());
+        $.widget("custom.codeView", new CodeView())
+        let router = Router.getInstance(),
+                codeService = createCodeService(),
+                navbarService = new NavbarRenderingService(),
+                resizingService = new ResizingService(),
+                articleService = new ArticleRenderingService(router),
+                affixService = new AffixRenderingService(resizingService),
+                tocService = new TocRenderingService(resizingService, router),
+                services: Array<RenderingService> = [navbarService, tocService];
 
-    let igViewer = IgViewer.getInstance(),
-        platformMeta: JQuery<HTMLElement>,
-        codeService: CodeService,
-        platform: string;
+        services.forEach(service => service.render());
+        router.connect($("#_article-wrapper"), (scrollPosition?: number) => {
+                return new Promise<number | undefined>((resolve) => {
+                        codeService?.init();
+                        articleService.render();
+                        affixService.render();
+                        tocService.setActive();
+                        tocService.renderBreadcrumb();
+                        resizingService.resetObservables();
+                        resolve(scrollPosition);
 
-        initNavigation();
-        igViewer.adjustTopLinkPos();
-        attachLazyLoadHandler();
-        attachThemingHandler();
-        platformMeta = $("meta[property='docfx:platform']");
-        if (!platformMeta) {
-            return;
-        }
-        platform = platformMeta.attr("content")!;
-        if (platform === "angular") {
-            codeService = new AngularCodeService();
+                }).then((scrollPosition) => {
+                        if (scrollPosition != null) {
+                                $(window).scrollTop(scrollPosition)
+                        }
+                        showHideThemingWidget($("iframe").length);
+                });
+        });
+
+        if (util.isOnIndexPage()) {
+                $("#_article-wrapper").removeClass("null-opacity");
+                router.navigateTo($("meta[name=index]").attr("content")!);
         } else {
-            codeService = new XplatCodeService(platform);
+                (async () => {
+                        await new Promise<void>((resolve) => {
+                                articleService.render();
+                                affixService.render();
+                                resolve();
+                        }).then(() => {
+                                $("#_article-wrapper").removeClass("null-opacity");
+                                if (util.hasLocationHash()) {
+                                        setTimeout(() => util.scroll(location.hash), 500);
+                                }
+                                codeService?.init();
+                        });
+                })();
         }
-        codeService.init();
 
+        showHideThemingWidget($("iframe").length);
+        attachLazyLoadHandler();
+        attachThemingHandler();
+        initNavigation();
 });
 

src/app/handlers/index.ts

@@ -0,0 +1,3 @@
+export * from './iframe-load';
+export * from './lazyload';
+export * from './theming';

src/app/handlers/lazyload.ts

@@ -1,14 +1,13 @@
-import {IgViewer} from '../services/igViewer.common';
 import { IThemingData } from '../types';
 import util from '../services/utils';
 
 export function attachLazyLoadHandler() {
     document.addEventListener('lazyloaded', (e: Event) =>{
-        if (!IgViewer.getInstance().isDvPage() && !$(e.target!).hasClass("no-theming")) {
+        if (!util.isDvPage() && !$(e.target!).hasClass("no-theming")) {
             let targetOrigin = document.body.getAttribute("data-demos-base-url")!;
             let theme = window.sessionStorage.getItem(util.isIE ? "theme" : "themeStyle")!;
             let data: IThemingData = { origin: window.location.origin };
-            data.themeName =  $('igniteui-theming-widget').length > 0 ?  ($('igniteui-theming-widget') as any)[0].theme.globalTheme: null;
+            data.themeName =  $('igniteui-theming-widget').is(":visible") ?  ($('igniteui-theming-widget') as any)[0].theme.globalTheme : null;
             if (util.isIE) {
                 data.theme = theme;
             } else {

src/app/handlers/theming.ts

@@ -1,4 +1,3 @@
-import { IgViewer } from "../services/igViewer.common";
 import { IThemingData } from "../types";
 import util from '../services/utils';
 
@@ -8,15 +7,27 @@ export function closeContainer() {
       }
 }
 
-export function attachThemingHandler() {
-    let sampleIframes = document.querySelectorAll("iframe");
-    if ($(".themes-container").length !== 0 && sampleIframes.length !== 0 &&
-        (!IgViewer.getInstance().isDvPage() || !util.isIE)) {
+export function showHideThemingWidget(iframesLength: number) {
+    if ($(".themes-container").length !== 0 && iframesLength !== 0 && (!util.isDvPage() || !util.isIE)) {
         $(".themes-container").css('display', 'inline-flex');
     } else {
+        $(".themes-container").css('display', 'none');
         return;
     }
 
+    if (util.isIE) {
+        $('.theme-select-wrapper').css('display', 'inline-flex');
+        $('.theme-select-wrapper').removeClass('theme-wrapper-hide');
+        let currentTheme = window.sessionStorage.getItem("theme");
+        if (currentTheme) {
+            let item = $(".theme-item").filter(`[data-theme=${currentTheme}]`)[0];
+            handleThemeSelection(currentTheme, item);
+        }
+
+    } else $('.theme-widget-wrapper').removeClass('theme-wrapper-hide');
+}
+
+export function attachThemingHandler() {
     if (util.isIE) {
         $('.theme-select-wrapper').css('display', 'inline-flex');
         $('.theme-select-wrapper').removeClass('theme-wrapper-hide');
@@ -45,6 +56,7 @@ export function attachThemingHandler() {
         if (themingWidget) {
             themingWidget.on('themeChange', (event: JQuery.TriggeredEvent) => {
                 window.sessionStorage.setItem('themeStyle', (event.originalEvent! as any).detail);
+                let sampleIframes = document.querySelectorAll("iframe");
                 sampleIframes.forEach((element) => {
                     if (!$(element).hasClass("no-theming") && (!$(element).hasClass("lazyload") || $(element).hasClass("lazyloaded"))) {
                         let src = element.src || element.dataset.src;
@@ -105,4 +117,3 @@ function selectTheme(el: HTMLElement) {
     }
     el.classList.add("theme-item--active");
 }
-

src/app/services/code-view/angular-code-service.ts

@@ -2,6 +2,7 @@ import { CodeService } from "./base-code-service";
 import util from '../utils';
 import { ICodeViewFilesData, ISampleData } from "../../types";
 import { compressToBase64 } from 'lz-string';
+import { XHRService } from "../jqXHR-tasks";
 
 export class AngularCodeService extends CodeService {
 
@@ -12,11 +13,15 @@ export class AngularCodeService extends CodeService {
     private sharedFileName = "shared.json";
     private assetsFolder = "/assets/";
     private demoFilesFolderUrlPath = this.assetsFolder + "samples/";
-    private assetsRegex = new RegExp("\/?assets\/", "g");
+    private assetsRegex = new RegExp(/([\.]{0,2}\/)*assets\//g);
     private sampleFilesContentByUrl: { [url: string]: any } = {};
     private demosTimeStamp: number;
     private sharedFileContent: { [url: string]: any } = {};
 
+    constructor(private xhrService: XHRService) {
+        super();
+    }
+
     public init(): void {
         let $codeViewElements = $("code-view");
         let $standaloneliveEditingButtons = $("button[data-sample-src]");
@@ -49,6 +54,9 @@ export class AngularCodeService extends CodeService {
                 $standaloneliveEditingButtons.css("display", "none");
             }
         }
+
+        this.demosUrls.clear();
+        this.sharedFileContent = {};
     }
 
     private renderFooters(codeViewsData: ISampleData[]) {
@@ -62,23 +70,26 @@ export class AngularCodeService extends CodeService {
         let metaFileUrl = samplesBaseUrl + this.demoFilesFolderUrlPath + "meta.json";
         // prevent caching 
         metaFileUrl += "?t=" + new Date().getTime();
-        $.get(metaFileUrl).done((response) => {
+        let metaFileFetch = $.get(metaFileUrl).done((response) => {
             this.demosTimeStamp = response.generationTimeStamp;
             this.getAngularFiles(samplesBaseUrl, data, this.demosTimeStamp);
         });
+        this.xhrService.pushTask(metaFileFetch);
     }
 
     //Fetch angular samples files
     private getAngularFiles(samplesBaseUrl: string, data: ISampleData[], timeStamp: number) {
         let sharedFileUrl = samplesBaseUrl + this.demoFilesFolderUrlPath + this.sharedFileName;
         sharedFileUrl = this.addTimeStamp(sharedFileUrl, timeStamp);
-        $.get(sharedFileUrl, this.angularSharedFilePostProcess(samplesBaseUrl, () => {
+        let sharedFileFetch = $.get(sharedFileUrl, this.angularSharedFilePostProcess(samplesBaseUrl, () => {
             for (const sampleData of data) {
                 let sampleFileMedata = this.getAngularSampleMetadataUrl(samplesBaseUrl, sampleData.url);
                 let $codeView = sampleData.codeView;
-                $.get(sampleFileMedata, this.angularSampleFilePostProcess(samplesBaseUrl, this.removeQueryString, $codeView))
+                let sampleMetadataFetch = $.get(sampleFileMedata, this.angularSampleFilePostProcess(samplesBaseUrl, this.removeQueryString, $codeView));
+                this.xhrService.pushTask(sampleMetadataFetch)
             }
-        }));
+        }))
+        this.xhrService.pushTask(sharedFileFetch);
     }
 
     private getAngularGitHubSampleUrl(editor: string, sampleUrl: string, branch: string) {
@@ -140,19 +151,21 @@ export class AngularCodeService extends CodeService {
         let metaFileUrl = samplesBaseUrl + this.demoFilesFolderUrlPath + "meta.json";
         // prevent caching 
         metaFileUrl += "?t=" + new Date().getTime();
-        $.get(metaFileUrl)
-            .done((response: any) => {
-                this.demosTimeStamp = response.generationTimeStamp;
-                for (const sampleData of data) {
-                    let sampleFileMedata = this.getAngularSampleMetadataUrl(samplesBaseUrl, sampleData.url);
-                    let $codeView = sampleData.codeView;
-                    $.get(sampleFileMedata, this.angularSampleFilePostProcess(samplesBaseUrl, this.removeQueryString, $codeView))
-                }
-            })
-            .fail(() => {
-                err();
-                throw new Error('Error on fetching sample files!');
-            });
+        let metaFileFetch = $.get(metaFileUrl)
+        .done((response: any) => {
+            this.demosTimeStamp = response.generationTimeStamp;
+            for (const sampleData of data) {
+                let sampleFileMedata = this.getAngularSampleMetadataUrl(samplesBaseUrl, sampleData.url);
+                let $codeView = sampleData.codeView;
+                let sampleMetadataFetch = $.get(sampleFileMedata, this.angularSampleFilePostProcess(samplesBaseUrl, this.removeQueryString, $codeView));
+                this.xhrService.pushTask(sampleMetadataFetch);
+            }
+        })
+        .fail(() => {
+            err();
+            throw new Error('Error on fetching sample files!');
+        })
+        this.xhrService.pushTask(metaFileFetch);
     }
 
     private angularSampleFilePostProcess(demosBaseUrl: string, cb: (url: string) => string, $codeView: JQuery<HTMLElement>) {

src/app/services/code-view/common.ts

@@ -0,0 +1,21 @@
+import { AngularCodeService, CodeService, XplatCodeService } from ".";
+import { XHRService } from '../jqXHR-tasks';
+
+
+export function createCodeService(): CodeService | undefined {
+    let $platformMeta: JQuery<HTMLElement>, platform: string, codeService: CodeService | undefined;
+
+    $platformMeta = $("meta[property='docfx:platform']");
+    if (!$platformMeta) {
+        return undefined;
+    }
+
+    platform = $platformMeta.attr("content")!;
+    if (platform === "angular") {
+        codeService = new AngularCodeService(XHRService.getInstance());
+    } else {
+        codeService = new XplatCodeService(platform, XHRService.getInstance());
+    }
+
+    return codeService;
+}

src/app/services/code-view/index.ts

@@ -0,0 +1,5 @@
+export * from './angular-code-service';
+export * from './base-code-service';
+export * from './xplat-code-service';
+export * from './code-view';
+export * from './common';

src/app/services/code-view/xplat-code-service.ts

@@ -1,4 +1,5 @@
 import { ICodeViewFilesData, ISampleData } from "../../types";
+import { XHRService } from "../jqXHR-tasks";
 import { CodeService } from "./base-code-service";
 
 export class XplatCodeService extends CodeService {
@@ -9,7 +10,7 @@ export class XplatCodeService extends CodeService {
     private githubSourceAttrName: string;
 
 
-    constructor(private xplat: string) {
+    constructor(private xplat: string, private xhrService: XHRService) {
         super();
         this.xplat = this.xplat === "web-components" ? "wc" : this.xplat;
         this.samplesCodeBasePath = this.xplat === "wc" ? "/assets/code-viewer/" : "/code-viewer/";
@@ -52,6 +53,8 @@ export class XplatCodeService extends CodeService {
                 let codeViewsData = this.demosUrls.get(baseUrl)!;
                 this.getSamplesContent(baseUrl, codeViewsData);
             }
+
+            this.demosUrls.clear();
         }
     }
 
@@ -60,14 +63,15 @@ export class XplatCodeService extends CodeService {
         for (const sampleData of data) {
             let sampleFileMedata = this.getSampleMetadataUrl(samplesBaseUrl, sampleData.url);
             let $codeView = sampleData.codeView;
-            $.ajax({
-                url: sampleFileMedata,
-                type: "GET",
-                crossDomain: true,
-                dataType: "json",
-                success: (data: any) => this.sampleFilePostProcess(data, $codeView),
-                error: () => this.sampleFilesFetchErrorHandler($codeView)
-            })
+            let metaFileFetch = $.get({
+                                    url: sampleFileMedata,
+                                    type: "GET",
+                                    crossDomain: true,
+                                    dataType: "json",
+                                    success: (data: any) => this.sampleFilePostProcess(data, $codeView),
+                                    error: () => this.sampleFilesFetchErrorHandler($codeView)
+                                });
+            this.xhrService.pushTask(metaFileFetch);
         }
     }