feat(docs): refactoring navbar component

packages/docs/src/app/components/navbar/_navbar-theme.scss

@@ -1,6 +1,7 @@
 @mixin mc-navbar-theme($theme) {
     $foreground: map-get($theme, foreground);
     $background: map-get($theme, background);
+    $primary: map-get($theme, primary);
     $is-dark: map-get($theme, is-dark);
     $background-color: mc-color($background, background);
     $hover:  mc-color($background, hover);

packages/docs/src/app/components/navbar/navbar-property.ts

@@ -0,0 +1,61 @@
+export interface INavbarProperty {
+    // name of local storage property
+    property: string;
+
+    // data array for dropdown
+    data: any[];
+
+    // Applies in NavbarProperty.setValue for additional actions (for example: change class on body)
+    updateTemplate: boolean;
+
+    // Applies in NavbarProperty.setValue for updating selected value
+    updateSelected: boolean;
+}
+
+export class NavbarProperty {
+    data: any[];
+    currentValue: any;
+    private readonly property: string;
+
+    constructor(navbarProperty: INavbarProperty) {
+        this.data = navbarProperty.data;
+        this.currentValue = this.data[0];
+        this.property = navbarProperty.property;
+
+        this.init();
+    }
+
+    setValue(i: number) {
+        this.currentValue = this.data[i];
+        localStorage.setItem(this.property, `${i}`);
+        if (this.updateTemplate) { this.updateTemplate(i); }
+        if (this.updateSelected) { this.updateSelected(i); }
+    }
+
+    init() {
+        const currentValue = +localStorage.getItem(this.property);
+
+        if (currentValue) {
+            this.setValue(currentValue);
+        } else {
+            localStorage.setItem(this.property, '0');
+        }
+    }
+
+    updateTemplate(i: number) {
+        if (this.currentValue) {
+            for (const color of this.data) {
+                document.body.classList.remove(color.className);
+            }
+
+            document.body.classList.add(this.currentValue.className);
+        }
+    }
+
+    updateSelected(i: number) {
+        this.data.forEach((color) => {
+            color.selected = false;
+        });
+        this.data[i].selected = true;
+    }
+}

packages/docs/src/app/components/navbar/navbar.component.ts

@@ -1,4 +1,6 @@
-import { Component, Renderer2 } from '@angular/core';
+import { Component } from '@angular/core';
+
+import { INavbarProperty, NavbarProperty } from './navbar-property';
 
 
 @Component({
@@ -7,127 +9,130 @@ import { Component, Renderer2 } from '@angular/core';
     styleUrls: ['./navbar.scss']
 })
 export class NavbarComponent {
-    // TODO fetch real data instead
-    versions = [{number: '5.1', date: '15 октября', bold: true},
-        {number: '5.0.1', date: '14 октября', bold: false},
-        {number: '5', date: '13 октября', bold: true},
-        {number: '4.8.8', date: '12 октября', bold: false},
-        {number: '4.8.5', date: '11 октября', bold: false},
-        {number: '4.8.4', date: '10 октября', bold: false},
-        {number: '4.8', date: '9 октября', bold: true},
-        {number: '4.7.1', date: '8 октября', bold: false},
-        {number: '1.0', date: '7 октября', bold: true}];
-
-    curVerIndex = this.versions[0].number;
-    languages = ['Русский язык', 'Английский язык'];
-    curLanguage = this.languages[0];
-    themes = [
-        {
-            theme: 'default',
-            name: 'Светлая тема',
-            className: 'theme-default'
-        },
-        {
-            theme: 'dark',
-            name: 'Темная тема',
-            className: 'theme-dark'
-        }
-    ];
-    curTheme = this.themes[0];
-    // TODO Эти значения временные, надо определиться с постоянными и заменить ими текущие значения.
-    colors = [
-        {
-            code: '#2f80ed',
-            className: 'active-blue',
-            selected: true
-        },
-        {
-            code: '#832112',
-            className: 'active-red',
-            selected: false
-        },
-        {
-            code: '#07804e',
-            className: 'active-green',
-            selected: false
-        },
-        {
-            code: '#eaaf00',
-            className: 'active-yellow',
-            selected: false
-        }
-        ];
-    activeColor = this.colors[0];
-    private readonly themeProperty = 'PT_theme';
-    private readonly colorProperty = 'PT_color';
-
-    constructor(private renderer: Renderer2) {
-        this.initTheme();
-        this.initActiveColor();
-    }
-
-    setVersion(version) {
-        this.curVerIndex = version;
-    }
-
-    setLanguage(language) {
-        this.curLanguage = language;
-    }
-
-    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) {
-            for (const theme of this.themes) {
-                this.renderer.removeClass(document.body, theme.className);
+    /*To add navbar property create new private property of type INavbarProperty
+    and instantiate new NavbarProperty(property: INavbarProperty)*/
+    versionSwitch: NavbarProperty;
+    colorSwitch: NavbarProperty;
+    themeSwitch: NavbarProperty;
+    languageSwitch: NavbarProperty;
+
+    private activeColorProperty: INavbarProperty = {
+        property: 'PT_color',
+        data: [
+            {
+                code: '#2f80ed',
+                className: 'active-blue',
+                selected: true
+            },
+            {
+                code: '#832112',
+                className: 'active-red',
+                selected: false
+            },
+            {
+                code: '#07804e',
+                className: 'active-green',
+                selected: false
+            },
+            {
+                code: '#eaaf00',
+                className: 'active-yellow',
+                selected: false
             }
-
-            this.renderer.addClass(document.body, this.curTheme.className);
-        }
+        ],
+        updateTemplate: true,
+        updateSelected: true
+    };
+
+    private languageProperty: INavbarProperty = {
+        property: 'PT_language',
+        data: [
+            'Русский язык',
+            'Английский язык'
+        ],
+        updateTemplate: false,
+        updateSelected: false
+    };
+
+    private themeProperty: INavbarProperty = {
+        property: 'PT_theme',
+        data: [
+            {
+                theme: 'default',
+                name: 'Светлая тема',
+                className: 'theme-default',
+                selected: true
+            },
+            {
+                theme: 'dark',
+                name: 'Темная тема',
+                className: 'theme-dark',
+                selected: false
+            }
+        ],
+        updateTemplate: true,
+        updateSelected: true
+    };
+
+    private versionProperty: INavbarProperty = {
+        property: 'PT_version',
+        data: [
+            {
+                number: '5.1',
+                date: '15 октября',
+                selected: true
+            },
+            {
+                number: '5.0.1',
+                date: '14 октября',
+                selected: false
+            },
+            {
+                number: '5',
+                date: '13 октября',
+                selected: false
+            },
+            {
+                number: '4.8.8',
+                date: '12 октября',
+                selected: false
+            },
+            {
+                number: '4.8.5',
+                date: '11 октября',
+                selected: false
+            },
+            {
+                number: '4.8.4',
+                date: '10 октября',
+                selected: false
+            },
+            {
+                number: '4.8',
+                date: '9 октября',
+                selected: false
+            },
+            {
+                number: '4.7.1',
+                date: '8 октября',
+                selected: false
+            },
+            {
+                number: '1.0',
+                date: '7 октября',
+                selected: false
+            }
+        ],
+        updateTemplate: false,
+        updateSelected: true
+    };
+
+    constructor() {
+        this.versionSwitch = new NavbarProperty(this.versionProperty);
+        this.colorSwitch = new NavbarProperty(this.activeColorProperty);
+        this.themeSwitch = new NavbarProperty(this.themeProperty);
+        this.languageSwitch = new NavbarProperty(this.languageProperty);
     }
 
-    private changeColorOnBody() {
 
-        if (this.activeColor) {
-            for (const color of this.colors) {
-                this.renderer.removeClass(document.body, color.className);
-            }
-
-            this.renderer.addClass(document.body, this.activeColor.className);
-        }
-    }
 }

packages/docs/src/app/components/navbar/navbar.template.html

@@ -8,11 +8,13 @@
         <button mc-button color="second" class="mc-button mc-button_transparent docs-navbar-version__trigger"
                 [mcDropdownTriggerFor]="versionDropdown">
             <span>Версия</span>
-            <span class="docs-navbar-version__number" id="versionNumber">{{curVerIndex}}</span>
+            <span class="docs-navbar-version__number" id="versionNumber">{{versionSwitch.currentValue.number}}</span>
             <i mc-icon="mc-angle-down-L_16" class="docs-navbar-version__icon"></i>
         </button>
         <mc-dropdown #versionDropdown="mcDropdown" xPosition="after" class="docs-navbar-version__dropdown">
-            <button mc-dropdown-item *ngFor="let version of versions; let i = index" (click)="setVersion(version.number)" [class.docs-navbar-version_bold]="version.bold">
+            <button mc-dropdown-item *ngFor="let version of versionSwitch.data; let i = index"
+                    [class.mc-selected]="version.selected" (click)="versionSwitch.setValue(i)"
+                    [class.docs-navbar-version_bold]="version.number.length < 4">
                 <span class="docs-navbar-version__item" >
                     <span class="docs-navbar-version__num" >{{version.number}}</span>
                     <span class="docs-navbar-version__date" >{{version.date}}</span>
@@ -26,12 +28,12 @@
     <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>
+            <span>{{languageSwitch.currentValue}}</span>
             <i mc-icon="mc-angle-down-M_16" class="docs-navbar-dropdown__icon"></i>
         </button>
 
         <mc-dropdown #languageDropdown="mcDropdown">
-            <button mc-dropdown-item *ngFor="let language of languages; let i = index" (click)="setLanguage(language)">
+            <button mc-dropdown-item *ngFor="let language of languageSwitch.data; let i = index" (click)="languageSwitch.setValue(i)">
                 {{language}}
             </button>
         </mc-dropdown>
@@ -40,12 +42,12 @@
     <div class="docs-navbar-dropdown">
         <button mc-button color="second" class="mc-button mc-button_transparent docs-navbar-dropdown__trigger"
                 [mcDropdownTriggerFor]="themeDropdown">
-            <span >{{curTheme.name}}</span>
+            <span >{{themeSwitch.currentValue.name}}</span>
             <i mc-icon="mc-angle-down-M_16" class="docs-navbar-dropdown__icon"></i>
         </button>
 
         <mc-dropdown #themeDropdown="mcDropdown">
-            <button mc-dropdown-item *ngFor="let theme of themes; let i = index" (click)="setTheme(i)">
+            <button mc-dropdown-item *ngFor="let theme of themeSwitch.data; let i = index" [class.mc-selected]="theme.selected" (click)="themeSwitch.setValue(i)">
                 {{theme.name}}
             </button>
         </mc-dropdown>
@@ -54,12 +56,12 @@
     <div class="color-picker">
         <button mc-button color="second" class="mc-button mc-button_transparent docs-navbar-dropdown__trigger"
                 [mcDropdownTriggerFor]="colorDropdown">
-            <i mc-icon="mc-circle-8_16" [style.color]='activeColor.code' class="color-picker__icon"></i>
+            <i mc-icon="mc-circle-8_16" [style.color]='colorSwitch.currentValue.code' class="color-picker__icon"></i>
             <i mc-icon="mc-angle-down-M_16" class="docs-navbar-dropdown__icon"></i>
         </button>
         <mc-dropdown #colorDropdown="mcDropdown" class="color-picker__dropdown" [style.margin-top]="0">
             <div class="color-picker__dropdown-content">
-                <span *ngFor="let color of colors; let i = index" [class.color-picker__dropdown-item]="true" [class.mc-selected]="color.selected"  (click)="setColor(i)">
+                <span *ngFor="let color of colorSwitch.data; let i = index" [class.color-picker__dropdown-item]="true" [class.mc-selected]="color.selected"  (click)="colorSwitch.setValue(i)">
                     <i mc-icon="mc-circle-8_16" [style.color]='color.code' class="color-picker__icon"></i>
                 </span>
             </div>