[ADF-2626] changed logic for preserving the sidenav component state

demo-shell/src/app.config.json

@@ -491,7 +491,7 @@
     },
 
     "sideNav": {
-      "openedSidenav": true,
+      "expandedSidenav": true,
       "preserveState": true
     }
 }

demo-shell/src/app/components/app-layout/app-layout.component.html

@@ -1,4 +1,4 @@
-<adf-sidenav-layout [sidenavMin]="70" [sidenavMax]="220" [stepOver]="780" [hideSidenav]="false"[expandedSidenav]= "expandedSidenav">
+<adf-sidenav-layout [sidenavMin]="70" [sidenavMax]="220" [stepOver]="780" [hideSidenav]="false"[expandedSidenav]= "expandedSidenav" (notify)='setState($event)'>
 
     <adf-sidenav-layout-header>
         <ng-template let-toggleMenu="toggleMenu">

demo-shell/src/app/components/app-layout/app-layout.component.ts

@@ -15,8 +15,8 @@
  * limitations under the License.
  */
 
-import { Component, ViewEncapsulation, Input } from '@angular/core';
-import { StorageService, AppConfigService } from '@alfresco/adf-core';
+import { Component, ViewEncapsulation, OnInit from '@angular/core';
+import { UserPreferencesService, AppConfigService } from '@alfresco/adf-core';
 
 @Component({
     templateUrl: 'app-layout.component.html',
@@ -27,7 +27,7 @@ import { StorageService, AppConfigService } from '@alfresco/adf-core';
     encapsulation: ViewEncapsulation.None
 })
 
-export class AppLayoutComponent {
+export class AppLayoutComponent implements OnInit {
 
     links: Array<any> = [
         { href: '/home', icon: 'home', title: 'APP_LAYOUT.HOME' },
@@ -50,18 +50,25 @@ export class AppLayoutComponent {
         { href: '/about', icon: 'info_outline', title: 'APP_LAYOUT.ABOUT' }
     ];
 
-    @Input() expandedSidenav = false;
+    expandedSidenav: Boolean = false;
 
-    constructor(private storage: StorageService, private config: AppConfigService) {
-        const preserved = this.storage.getItem('openedSidenav');
-        if (preserved !== null) {
-            if (preserved === 'false') {
-                this.expandedSidenav = false;
-            } else {
-                this.expandedSidenav = true;
-            }
-        } else {
-            this.expandedSidenav = this.config.get('sideNav.openedSidenav');
+
+    ngOnInit() {
+        const expand = this.config.get<boolean>('sideNav.expandedSidenav');
+        const preserveState = this.config.get('sideNav.preserveState');
+
+        if (preserveState && expand)  {
+            this.expandedSidenav = (this.userpreference.get('expandedSidenav', String(expand)) === 'true');
+        } else if (expand) {
+            this.expandedSidenav = expand;
+        }
+    }
+    constructor( private userpreference: UserPreferencesService, private config: AppConfigService) {
+    }
+
+    setState(state) {
+        if (this.config.get('sideNav.preserveState')) {
+            this.userpreference.set('expendedSidenav', state);
         }
     }
 }

docs/core/sidenav-layout.component.md

@@ -121,7 +121,7 @@ Beside this, it is also possible to set the default value in the appConfig.json
 
 ```
     "sideNav" : {
-        "openedSidenav" : true
+        "expandedSidenav" : true
     }
 ```
 

lib/core/pipes/app-config.pipe.ts

@@ -1,26 +1,18 @@
 /*!
  * @license
- * Alfresco Example Content Application
+ * Copyright 2016 Alfresco Software, Ltd.
  *
- * Copyright (C) 2005 - 2018 Alfresco Software Limited
+ * 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
  *
- * This file is part of the Alfresco Example Content Application.
- * If the software was purchased under a paid Alfresco license, the terms of
- * the paid license agreement will prevail.  Otherwise, the software is
- * provided under the following open source license terms:
+ *     http://www.apache.org/licenses/LICENSE-2.0
  *
- * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Lesser General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * The Alfresco Example Content Application is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ * 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 { Pipe, PipeTransform } from '@angular/core';

lib/core/pipes/public-api.ts

@@ -24,4 +24,3 @@ export * from './user-initial.pipe';
 export * from './app-config.pipe';
 
 export * from './pipe.module';
-

lib/core/sidenav-layout/components/sidenav-layout/sidenav-layout.component.ts

@@ -15,16 +15,13 @@
  * limitations under the License.
  */
 
-import { Component, ContentChild, Input, OnInit, AfterViewInit, ViewChild, OnDestroy, TemplateRef } from '@angular/core';
+import { Component, ContentChild, Input, Output, OnInit, AfterViewInit, ViewChild, OnDestroy, TemplateRef, EventEmitter } from '@angular/core';
 import { MediaMatcher } from '@angular/cdk/layout';
 import { SidenavLayoutContentDirective } from '../../directives/sidenav-layout-content.directive';
 import { SidenavLayoutHeaderDirective } from '../../directives/sidenav-layout-header.directive';
 import { SidenavLayoutNavigationDirective } from '../../directives/sidenav-layout-navigation.directive';
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 import { Observable } from 'rxjs/Observable';
-import { AppConfigService } from './../../../app-config/app-config.service';
-import { StorageService } from './../../../services/storage.service';
-
 
 @Component({
     selector: 'adf-sidenav-layout',
@@ -41,6 +38,8 @@ export class SidenavLayoutComponent implements OnInit, AfterViewInit, OnDestroy
     @Input() hideSidenav = false;
     @Input() expandedSidenav = true;
 
+    @Output() notify = new EventEmitter();
+
     @ContentChild(SidenavLayoutHeaderDirective) headerDirective: SidenavLayoutHeaderDirective;
     @ContentChild(SidenavLayoutNavigationDirective) navigationDirective: SidenavLayoutNavigationDirective;
     @ContentChild(SidenavLayoutContentDirective) contentDirective: SidenavLayoutContentDirective;
@@ -59,8 +58,7 @@ export class SidenavLayoutComponent implements OnInit, AfterViewInit, OnDestroy
         isMenuMinimized: () => this.isMenuMinimized
     };
 
-    constructor(private mediaMatcher: MediaMatcher,  private config: AppConfigService, private storage: StorageService) {
-
+    constructor(private mediaMatcher: MediaMatcher) {
 
         this.onMediaQueryChange = this.onMediaQueryChange.bind(this);
     }
@@ -86,9 +84,7 @@ export class SidenavLayoutComponent implements OnInit, AfterViewInit, OnDestroy
         this.mediaQueryList.removeListener(this.onMediaQueryChange);
     }
 
-    toggleMenu() {
-        const preserve = this.config.get<string>('sideNav.preserveState');
-
+    toggleMenu(expandedSidenav) {
         if (!this.mediaQueryList.matches) {
             this.isMenuMinimized = !this.isMenuMinimized;
         } else {
@@ -96,10 +92,7 @@ export class SidenavLayoutComponent implements OnInit, AfterViewInit, OnDestroy
         }
 
         this.container.toggleMenu();
-
-        if (preserve) {
-            this.storage.setItem('openedSidenav', <any> !this.isMenuMinimized);
-        }
+        this.notify.emit((!this.isMenuMinimized).toString());
     }
 
     get isMenuMinimized() {