feat(docs): storing theme and active color (#274)

positive-js · Oct 2, 2019 · f59f04a · f59f04a
1 parent 1b6b017
commit f59f04a
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 2 deletions.
diff --git a/packages/docs/src/app/components/anchors/anchors.component.ts b/packages/docs/src/app/components/anchors/anchors.component.ts
@@ -50,13 +50,15 @@ export class AnchorsComponent {
             this.debounceTime = this.noSmoothScrollDebounce;
         }
         this.currentUrl = router.url.split('#')[0];
+        localStorage.setItem('PT_nextRoute', this.currentUrl);
         this.container = '.anchors-menu';
         this.pathName = this.router.url;
         this.router.events.pipe(takeUntil(this.destroyed)).subscribe((event) => {
             if (event instanceof NavigationEnd) {
                 const rootUrl = router.url.split('#')[0];
 
                 if (rootUrl !== this.currentUrl) {
+                    localStorage.setItem('PT_nextRoute', rootUrl);
                     this.currentUrl = rootUrl;
                     this.pathName = this.router.url;
                 }

diff --git a/packages/docs/src/app/components/navbar/navbar.component.ts b/packages/docs/src/app/components/navbar/navbar.component.ts
@@ -58,8 +58,13 @@ export class NavbarComponent {
         }
         ];
     activeColor = this.colors[0];
+    private readonly themeProperty = 'PT_theme';
+    private readonly colorProperty = 'PT_color';
 
-    constructor(private renderer: Renderer2) {}
+    constructor(private renderer: Renderer2) {
+        this.initTheme();
+        this.initActiveColor();
+    }
 
     setVersion(version) {
         this.curVerIndex = version;
@@ -71,17 +76,39 @@ export class NavbarComponent {
 
     setTheme(i) {
         this.curTheme = this.themes[i];
+        localStorage.setItem(this.themeProperty, `${i}`);
         this.changeThemeOnBody();
     }
 
     setColor(i) {
         this.activeColor = this.colors[i];
+        localStorage.setItem(this.colorProperty, `${i}`);
         this.changeColorOnBody();
 
         this.colors.forEach((color) => { color.selected = false; });
         this.colors[i].selected = true;
     }
 
+    initTheme() {
+        const theme = localStorage.getItem(this.themeProperty);
+
+        if (theme) {
+            this.setTheme(theme);
+        } else {
+            localStorage.setItem(this.themeProperty, '0');
+        }
+    }
+
+    initActiveColor() {
+        const color = localStorage.getItem(this.colorProperty);
+
+        if (color) {
+            this.setColor(color);
+        } else {
+            localStorage.setItem(this.colorProperty, '0');
+        }
+    }
+
     private changeThemeOnBody() {
 
         if (this.curTheme) {

diff --git a/packages/docs/src/app/components/navbar/navbar.scss b/packages/docs/src/app/components/navbar/navbar.scss
@@ -39,6 +39,10 @@ $doc-navbar-padding: 10px;
             };
         }
 
+        &_hidden {
+            visibility: hidden;
+        }
+
         &__icon { color: inherit; }
     }
 }

diff --git a/packages/docs/src/app/components/navbar/navbar.template.html b/packages/docs/src/app/components/navbar/navbar.template.html
@@ -23,7 +23,7 @@
 
     <div class="flex-spacer"></div>
 
-    <div class="docs-navbar-dropdown">
+    <div class="docs-navbar-dropdown docs-navbar-dropdown_hidden">
         <button mc-button color="second" class="mc-button mc-button_transparent docs-navbar-dropdown__trigger"
                 [mcDropdownTriggerFor]="languageDropdown">
             <span >{{curLanguage}}</span>

diff --git a/packages/docs/src/app/shared/example-viewer/example-viewer.html b/packages/docs/src/app/shared/example-viewer/example-viewer.html
@@ -15,6 +15,7 @@
                                mcTooltip
                                mcTitle="Содержимое скопировано в буфер обмена"
                                mcTrigger="manual"
+                               mcMouseEnterDelay = "20"
                                mcPlacement="bottom"></i>
          </span>
         <mc-tab-group mc-light-tabs (selectedTabChange)="setLineNumbers()">
-Original file line number
+Diff line change
@@ Expand Up / @@ -39,6 +39,10 @@ $doc-navbar-padding: 10px; @@
                 };
             }
+            &_hidden {
+                visibility: hidden;
+            }
             &__icon { color: inherit; }
         }
     }
@@ Expand Down @@