SideDrawer component update (#47)

* Adding view model logic to allow seen the activ view

* updating pages to set the side drawer active

* removing old side drawer demo page

* tabs view model page argument

* fixing broken buttons active like

app/main-page.xml

@@ -23,13 +23,12 @@
             <Button text="SegmentedBar" tap="{{ viewSegmentBar }}" class="btn btn-demo" />
             <Button text="Dialogs" tap="{{ viewDialogs }}" class="btn btn-demo"/>
             <Button text="ListView" tap="{{ viewListView }}" class="btn btn-demo" />
-            <Button text="SideDrawer" tap="{{ viewSideDrawer }}" class="btn btn-demo" />
             <Button text="Themes" tap="{{ viewThemes }}" class="btn btn-demo" />
           </StackLayout>
         </ScrollView>
     </drawer:RadSideDrawer.mainContent>
     <drawer:RadSideDrawer.drawerContent >
-            <sidedrawer:sidedrawer></sidedrawer:sidedrawer>
+            <sidedrawer:sidedrawer activeComponent='home'></sidedrawer:sidedrawer>
     </drawer:RadSideDrawer.drawerContent>
   </drawer:RadSideDrawer>
 </Page>

app/navigation-vm.ts

@@ -121,14 +121,6 @@ export class NavigationViewModel extends BaseModel {
 		topmost().navigate(navigationEntry);
 	}
 
-	public viewSideDrawer() {
-		let navigationEntry = {
-			moduleName: 'pages/sidedrawer',
-			clearHistory: true
-		};
-		topmost().navigate(navigationEntry);
-	}
-
 	public viewThemes() {
 		let navigationEntry = {
 			moduleName: 'pages/themes',

app/pages/basics.xml

@@ -76,7 +76,7 @@
         </ScrollView>
     </drawer:RadSideDrawer.mainContent>
     <drawer:RadSideDrawer.drawerContent >
-        <sidedrawer:sidedrawer></sidedrawer:sidedrawer>
+        <sidedrawer:sidedrawer  activeComponent='basics'></sidedrawer:sidedrawer>
     </drawer:RadSideDrawer.drawerContent>
   </drawer:RadSideDrawer>
 </Page>

app/pages/buttons-active.xml

@@ -20,7 +20,7 @@
         </StackLayout>
     </drawer:RadSideDrawer.mainContent>
     <drawer:RadSideDrawer.drawerContent>
-        <sidedrawer:sidedrawer></sidedrawer:sidedrawer>
+        <sidedrawer:sidedrawer activeComponent='buttons-active'></sidedrawer:sidedrawer>
     </drawer:RadSideDrawer.drawerContent>
   </drawer:RadSideDrawer>
 

app/pages/buttons.xml

@@ -24,7 +24,7 @@
       </ScrollView>
     </drawer:RadSideDrawer.mainContent>
     <drawer:RadSideDrawer.drawerContent>
-        <sidedrawer:sidedrawer></sidedrawer:sidedrawer>
+        <sidedrawer:sidedrawer  activeComponent='buttons'></sidedrawer:sidedrawer>
     </drawer:RadSideDrawer.drawerContent>
   </drawer:RadSideDrawer>
 </Page>

app/pages/dialogs.xml

@@ -14,7 +14,7 @@
       </StackLayout>
     </drawer:RadSideDrawer.mainContent>
     <drawer:RadSideDrawer.drawerContent>
-        <sidedrawer:sidedrawer></sidedrawer:sidedrawer>
+        <sidedrawer:sidedrawer  activeComponent='dialogs'></sidedrawer:sidedrawer>
     </drawer:RadSideDrawer.drawerContent>
   </drawer:RadSideDrawer>
 </Page>

app/pages/forms.xml

@@ -16,7 +16,7 @@
       </StackLayout>
     </drawer:RadSideDrawer.mainContent>
     <drawer:RadSideDrawer.drawerContent>
-        <sidedrawer:sidedrawer></sidedrawer:sidedrawer>
+        <sidedrawer:sidedrawer activeComponent='forms'></sidedrawer:sidedrawer>
     </drawer:RadSideDrawer.drawerContent>
   </drawer:RadSideDrawer>
 </Page>

app/pages/listview.xml

@@ -63,7 +63,7 @@
       </ScrollView>
     </drawer:RadSideDrawer.mainContent>
     <drawer:RadSideDrawer.drawerContent>
-        <sidedrawer:sidedrawer></sidedrawer:sidedrawer>
+        <sidedrawer:sidedrawer activeComponent='list'></sidedrawer:sidedrawer>
     </drawer:RadSideDrawer.drawerContent>
   </drawer:RadSideDrawer>
 </Page>

app/pages/progress.xml

@@ -17,7 +17,7 @@
       </StackLayout>
     </drawer:RadSideDrawer.mainContent>
     <drawer:RadSideDrawer.drawerContent>
-        <sidedrawer:sidedrawer></sidedrawer:sidedrawer>
+        <sidedrawer:sidedrawer activeComponent='progress'></sidedrawer:sidedrawer>
     </drawer:RadSideDrawer.drawerContent>
   </drawer:RadSideDrawer>
 </Page>

app/pages/search.xml

@@ -13,7 +13,7 @@
       </StackLayout>
     </drawer:RadSideDrawer.mainContent>
     <drawer:RadSideDrawer.drawerContent>
-        <sidedrawer:sidedrawer></sidedrawer:sidedrawer>
+        <sidedrawer:sidedrawer  activeComponent='search'></sidedrawer:sidedrawer>
     </drawer:RadSideDrawer.drawerContent>
   </drawer:RadSideDrawer>
 </Page>

app/pages/segmentbar.xml

@@ -19,7 +19,7 @@
       </StackLayout>
     </drawer:RadSideDrawer.mainContent>
     <drawer:RadSideDrawer.drawerContent>
-        <sidedrawer:sidedrawer></sidedrawer:sidedrawer>
+        <sidedrawer:sidedrawer activeComponent='segmentbar'></sidedrawer:sidedrawer>
     </drawer:RadSideDrawer.drawerContent>
   </drawer:RadSideDrawer>
 </Page>

app/pages/sliders.xml

@@ -14,7 +14,7 @@
       </StackLayout>
     </drawer:RadSideDrawer.mainContent>
     <drawer:RadSideDrawer.drawerContent>
-        <sidedrawer:sidedrawer></sidedrawer:sidedrawer>
+        <sidedrawer:sidedrawer activeComponent='sliders'></sidedrawer:sidedrawer>
     </drawer:RadSideDrawer.drawerContent>
   </drawer:RadSideDrawer>
 </Page>

app/pages/switches.xml

@@ -16,7 +16,7 @@
       </StackLayout>
     </drawer:RadSideDrawer.mainContent>
     <drawer:RadSideDrawer.drawerContent>
-        <sidedrawer:sidedrawer></sidedrawer:sidedrawer>
+        <sidedrawer:sidedrawer activeComponent='switches'></sidedrawer:sidedrawer>
     </drawer:RadSideDrawer.drawerContent>
   </drawer:RadSideDrawer>
 </Page>

app/pages/tabs.ts

@@ -15,5 +15,5 @@ export class TabsModel extends BaseModel {
 
 export function navigatingTo(args: EventData) {
     var page = <Page>args.object;
-    page.bindingContext = new TabsModel();
+    page.bindingContext = new TabsModel(page);
 }

app/pages/tabs.xml

@@ -49,7 +49,7 @@
  </TabView>
     </drawer:RadSideDrawer.mainContent>
     <drawer:RadSideDrawer.drawerContent>
-        <sidedrawer:sidedrawer></sidedrawer:sidedrawer>
+        <sidedrawer:sidedrawer activeComponent='tabs'></sidedrawer:sidedrawer>
     </drawer:RadSideDrawer.drawerContent>
   </drawer:RadSideDrawer>
 </Page>

app/pages/themes.xml

@@ -16,7 +16,7 @@
       </StackLayout>
     </drawer:RadSideDrawer.mainContent>
     <drawer:RadSideDrawer.drawerContent>
-        <sidedrawer:sidedrawer></sidedrawer:sidedrawer>
+        <sidedrawer:sidedrawer activeComponent='themes'></sidedrawer:sidedrawer>
     </drawer:RadSideDrawer.drawerContent>
   </drawer:RadSideDrawer>
 </Page>

app/sidedrawer/sidedrawer.ts

@@ -4,7 +4,107 @@ import { EventData } from "data/observable";
 import { Page } from "ui/page";
 import { NavigationViewModel } from '../navigation-vm';
 
+export interface ISideDrawerState extends Page {
+	activeComponent: string;
+}
+
+
 export function onLoad(args: EventData) {
-	let page = <Page>args.object;
-	page.bindingContext = new NavigationViewModel(page);
+	let page = <ISideDrawerState>args.object;
+	page.bindingContext = new SideDrawerViewModel(page, page.activeComponent);
+}
+
+export class SideDrawerViewModel extends NavigationViewModel {
+	private activeItem = 'sidedrawer-list-item active';
+	private inactiveItem = 'sidedrawer-list-item';
+
+	constructor(private page: Page, private activeComponent: string) {
+		super(page);
+	}
+	public isHomeActive() {
+		if (this.activeComponent == 'home') {
+			return this.activeItem;
+		}
+		return this.inactiveItem;
+	}
+
+	public isBasicsActive() {
+		if (this.activeComponent == 'basics') {
+			return this.activeItem;
+		}
+		return this.inactiveItem;
+	}
+
+	public isButtonsActive() {
+		if (this.activeComponent == 'buttons') {
+			return this.activeItem;
+		}
+		return this.inactiveItem;
+	}
+	public isButtonsActiveActive() {
+		if (this.activeComponent == 'buttons-active') {
+			return this.activeItem;
+		}
+		return this.inactiveItem;
+	}
+	public isDialogsActive() {
+		if (this.activeComponent == 'dialogs') {
+			return this.activeItem;
+		}
+		return this.inactiveItem;
+	}
+	public isFormsActive() {
+		if (this.activeComponent == 'forms') {
+			return this.activeItem;
+		}
+		return this.inactiveItem;
+	}
+	public isListActive() {
+		if (this.activeComponent == 'list') {
+			return this.activeItem;
+		}
+		return this.inactiveItem;
+	}
+	public isProgressActive() {
+		if (this.activeComponent == 'progress') {
+			return this.activeItem;
+		}
+		return this.inactiveItem;
+	}
+	public isSegmentActive() {
+		if (this.activeComponent == 'segmentbar') {
+			return this.activeItem;
+		}
+		return this.inactiveItem;
+	}
+	public isSearchActive() {
+		if (this.activeComponent == 'search') {
+			return this.activeItem;
+		}
+		return this.inactiveItem;
+	}
+	public isSlidersActive() {
+		if (this.activeComponent == 'sliders') {
+			return this.activeItem;
+		}
+		return this.inactiveItem;
+	}
+	public isSwitchesActive() {
+		if (this.activeComponent == 'switches') {
+			return this.activeItem;
+		}
+		return this.inactiveItem;
+	}
+	public isTabsActive() {
+		if (this.activeComponent == 'tabs') {
+			return this.activeItem;
+		}
+		return this.inactiveItem;
+	}
+	public isThemesActive() {
+		if (this.activeComponent == 'theme') {
+			return this.activeItem;
+		}
+		return this.inactiveItem;
+	}
 }