diff --git a/sdk/app/app.css b/sdk/app/app.css index 1d69ba13..ff50a280 100644 --- a/sdk/app/app.css +++ b/sdk/app/app.css @@ -1,4 +1,6 @@ -.title { +@import '~nativescript-theme-core/css/core.light.css'; + +.title { font-size: 30; horizontal-align: center; margin:20; @@ -20,7 +22,7 @@ button { } .drawerContent { - background-color: gray; + background-color: lightgray; } .drawerContentText { @@ -83,18 +85,6 @@ button { padding: 5; } -.titleLabel { - margin: 16; - vertical-align: center; -} - -.itemStackLayout { - text-align: left; - vertical-align: center; - font-size: 16; - color:#404040; -} - .label { margin-left: 20; margin-top: 20; @@ -107,7 +97,15 @@ button { font-weight: bold; } -.item-template-style{ +.item-template-style { border-width:1; border-color: gray; -} \ No newline at end of file +} + +.btn { + margin: 0; +} + +/* .test { + background-color: red; +} */ \ No newline at end of file diff --git a/sdk/app/app.ts b/sdk/app/app.ts index 143c198c..6116bcb6 100644 --- a/sdk/app/app.ts +++ b/sdk/app/app.ts @@ -20,9 +20,10 @@ declare module com { if (application.android) { + require("./main-activity.android.ts"); application.on("launch", (intent) => { fresco.initialize(); }); } -application.start("./navigation/category-list-page"); +application.run({ moduleName: "navigation/category-list-page" }); diff --git a/sdk/app/calendar/calendar-events/events-view-modes-model.ts b/sdk/app/calendar/calendar-events/events-view-modes-model.ts index 252d0c13..862a9d67 100644 --- a/sdk/app/calendar/calendar-events/events-view-modes-model.ts +++ b/sdk/app/calendar/calendar-events/events-view-modes-model.ts @@ -66,7 +66,7 @@ export class ViewModel extends observableModule.Observable { public onOptionsTapped() { var navigationEntry = { - moduleName: "./navigation/options-menu/options", + moduleName: "navigation/options-menu/options", context: this._viewModesInfo, animated: true }; diff --git a/sdk/app/calendar/cell-styling/cell-styles-model.ts b/sdk/app/calendar/cell-styling/cell-styles-model.ts index a869f2ad..02453811 100644 --- a/sdk/app/calendar/cell-styling/cell-styles-model.ts +++ b/sdk/app/calendar/cell-styling/cell-styles-model.ts @@ -70,7 +70,7 @@ export class StylingViewModel extends Observable { public onOptionsTapped() { var navigationEntry = { - moduleName: "./navigation/options-menu/options", + moduleName: "navigation/options-menu/options", context: this._selectionInfo, animated: true }; diff --git a/sdk/app/calendar/events-view-modes/events-view-modes-model-page.ts b/sdk/app/calendar/events-view-modes/events-view-modes-model-page.ts index 37742896..2c735ec9 100644 --- a/sdk/app/calendar/events-view-modes/events-view-modes-model-page.ts +++ b/sdk/app/calendar/events-view-modes/events-view-modes-model-page.ts @@ -71,7 +71,7 @@ export class ViewModel extends observableModule.Observable { public onOptionsTapped() { var navigationEntry = { - moduleName: "./navigation/options-menu/options", + moduleName: "navigation/options-menu/options", context: this._viewModesInfo, animated: true }; diff --git a/sdk/app/calendar/selection-modes/selection-modes-model.ts b/sdk/app/calendar/selection-modes/selection-modes-model.ts index 24aca1b0..1232eb33 100644 --- a/sdk/app/calendar/selection-modes/selection-modes-model.ts +++ b/sdk/app/calendar/selection-modes/selection-modes-model.ts @@ -48,7 +48,7 @@ export class ViewModel extends observableModule.Observable{ public onOptionsTapped() { var navigationEntry = { - moduleName: "./navigation/options-menu/options", + moduleName: "navigation/options-menu/options", context: this._selectionInfo, animated: true }; diff --git a/sdk/app/calendar/transition-modes/transition-modes-model.ts b/sdk/app/calendar/transition-modes/transition-modes-model.ts index 3d96de85..7514baf8 100644 --- a/sdk/app/calendar/transition-modes/transition-modes-model.ts +++ b/sdk/app/calendar/transition-modes/transition-modes-model.ts @@ -51,7 +51,7 @@ export class ViewModel extends observableModule.Observable { public onOptionsTapped() { var navigationEntry = { - moduleName: "./navigation/options-menu/options", + moduleName: "navigation/options-menu/options", context: this._transitionInfo, animated: true }; diff --git a/sdk/app/calendar/view-modes/view-modes-model.ts b/sdk/app/calendar/view-modes/view-modes-model.ts index 0dba6937..d56e783c 100644 --- a/sdk/app/calendar/view-modes/view-modes-model.ts +++ b/sdk/app/calendar/view-modes/view-modes-model.ts @@ -42,7 +42,7 @@ export class ViewModel extends observableModule.Observable{ public onOptionsTapped() { var navigationEntry = { - moduleName: "./navigation/options-menu/options", + moduleName: "navigation/options-menu/options", context: this._selectionInfo, animated: true }; diff --git a/sdk/app/listview/scroll-to-index/scroll-to-index-model-horizontal.ts b/sdk/app/listview/scroll-to-index/scroll-to-index-model-horizontal.ts index 47cdcbd0..33ffcfd2 100644 --- a/sdk/app/listview/scroll-to-index/scroll-to-index-model-horizontal.ts +++ b/sdk/app/listview/scroll-to-index/scroll-to-index-model-horizontal.ts @@ -54,7 +54,7 @@ export class ViewModel extends Observable { public onOptionsTapped(args: any) { if (frameModule.topmost().ios) { var navigationEntry = { - moduleName: "./navigation/options-menu/options", + moduleName: "navigation/options-menu/options", context: this._selectionInfo, animated: true }; diff --git a/sdk/app/listview/scroll-to-index/scroll-to-index-model-vertical.ts b/sdk/app/listview/scroll-to-index/scroll-to-index-model-vertical.ts index dcade385..c61cc26f 100644 --- a/sdk/app/listview/scroll-to-index/scroll-to-index-model-vertical.ts +++ b/sdk/app/listview/scroll-to-index/scroll-to-index-model-vertical.ts @@ -54,7 +54,7 @@ export class ViewModel extends Observable { public onOptionsTapped(args: any) { if (frameModule.topmost().ios) { var navigationEntry = { - moduleName: "./navigation/options-menu/options", + moduleName: "navigation/options-menu/options", context: this._selectionInfo, animated: true }; diff --git a/sdk/app/navigation/categories-view-model.ts b/sdk/app/navigation/categories-view-model.ts index 5fd95bd4..dedbb65c 100644 --- a/sdk/app/navigation/categories-view-model.ts +++ b/sdk/app/navigation/categories-view-model.ts @@ -1,86 +1,32 @@ -import { Observable } from "tns-core-modules/data/observable"; +import observableModule = require("tns-core-modules/data/observable"); import { topmost } from "tns-core-modules/ui/frame"; +import { Page } from "tns-core-modules/ui/page"; import { isAndroid } from "tns-core-modules/platform/platform"; +import { RadSideDrawer } from "nativescript-ui-sidedrawer"; +import { ActionBar, NavigationButton } from "tns-core-modules/ui/action-bar"; +import utilsModule = require("tns-core-modules/utils/utils"); +import { NavigationItem } from "./navigation-item"; +import { PageViewModel } from "./page-view-model"; -export class NavigationItem { - private _subItems: Array; - private _title: string; - private _module: string; - private _parent: NavigationItem; - - constructor(title: string, module: string, parent: NavigationItem) { - this._title = title; - this._parent = parent; - this._module = module; - this._subItems = new Array(); - } - - get subItems(): Array { - return this._subItems; - } - - get title() { - return this._title; - } - - set title(value: string) { - this._title = value; - } - - get module() { - return this._module; - } - - set module(value: string) { - this._module = value; - } - - get parent() { - return this._parent; - } -} - -export class NavigationViewModel extends Observable { +export class NavigationViewModel extends PageViewModel { private _lastTappedItem; - private _currentSubItems: Array; private _currentNavItem: NavigationItem; private _hasBack: boolean; + public _currentSubItems: Array; constructor() { super(); - this.currentParent = new NavigationItem("SDK Examples", undefined, undefined); + this._currentParent = new NavigationItem("SDK Examples", undefined, undefined); this.buildComponentList(); - this.currentSubItems = this.currentParent.subItems; - this.hasBackNavigation = false; - } - - get currentSubItems(): Array { - return this._currentSubItems; - } - - set currentSubItems(value: Array) { - this._currentSubItems = value; - } - - get currentParent() { - return this._currentNavItem; - } - - set currentParent(value: NavigationItem) { - this._currentNavItem = value; + this._currentSubItems = this._currentParent.subItems; + this._hasBackNavigation = false; } - get hasBackNavigation() { - return this._hasBack; - } - - set hasBackNavigation(value: boolean) { - this._hasBack = value; - } + public page: Page; private buildComponentList() { - var parent = this.currentParent; + var parent = this._currentParent; this.buildChartExamples(parent); this.buildListViewExamples(parent); this.buildSideDrawerExamples(parent); @@ -93,40 +39,40 @@ export class NavigationViewModel extends Observable { private buildCalendarExamples(currentParent: NavigationItem) { var calendarRoot = new NavigationItem("Calendar", undefined, currentParent); currentParent.subItems.push(calendarRoot); - var calendarExample = new NavigationItem("Getting started", "./calendar/getting-started/getting-started-page", calendarRoot); + var calendarExample = new NavigationItem("Getting started", "calendar/getting-started/getting-started-page", calendarRoot); calendarRoot.subItems.push(calendarExample); - calendarExample = new NavigationItem("Localization", "./calendar/calendar-localization/localization-page", calendarRoot); + calendarExample = new NavigationItem("Localization", "calendar/calendar-localization/localization-page", calendarRoot); calendarRoot.subItems.push(calendarExample); - calendarExample = new NavigationItem("Handling Events", "./calendar/events/events-page", calendarRoot); + calendarExample = new NavigationItem("Handling Events", "calendar/events/events-page", calendarRoot); calendarRoot.subItems.push(calendarExample); - calendarExample = new NavigationItem("Populating with data", "./calendar/populating-with-data/populating-with-data-page", calendarRoot); + calendarExample = new NavigationItem("Populating with data", "calendar/populating-with-data/populating-with-data-page", calendarRoot); calendarRoot.subItems.push(calendarExample); - calendarExample = new NavigationItem("Programmatic control", "./calendar/programatic-control/programatic-control-page", calendarRoot); + calendarExample = new NavigationItem("Programmatic control", "calendar/programatic-control/programatic-control-page", calendarRoot); calendarRoot.subItems.push(calendarExample); - calendarExample = new NavigationItem("Selection modes", "./calendar/selection-modes/selection-modes-page", calendarRoot); + calendarExample = new NavigationItem("Selection modes", "calendar/selection-modes/selection-modes-page", calendarRoot); calendarRoot.subItems.push(calendarExample); - calendarExample = new NavigationItem("View modes", "./calendar/view-modes/view-modes-page", calendarRoot); + calendarExample = new NavigationItem("View modes", "calendar/view-modes/view-modes-page", calendarRoot); calendarRoot.subItems.push(calendarExample); - calendarExample = new NavigationItem("Transition modes", "./calendar/transition-modes/transition-modes-page", calendarRoot); + calendarExample = new NavigationItem("Transition modes", "calendar/transition-modes/transition-modes-page", calendarRoot); calendarRoot.subItems.push(calendarExample); - calendarExample = new NavigationItem("Events source", "./calendar/calendar-events/events-source-page", calendarRoot); + calendarExample = new NavigationItem("Events source", "calendar/calendar-events/events-source-page", calendarRoot); calendarRoot.subItems.push(calendarExample); - calendarExample = new NavigationItem("Events view modes", "./calendar/calendar-events/events-view-modes-page", calendarRoot); + calendarExample = new NavigationItem("Events view modes", "calendar/calendar-events/events-view-modes-page", calendarRoot); calendarRoot.subItems.push(calendarExample); - calendarExample = new NavigationItem("Calendar styling", "./calendar/cell-styling/cell-styles-page", calendarRoot); + calendarExample = new NavigationItem("Calendar styling", "calendar/cell-styling/cell-styles-page", calendarRoot); calendarRoot.subItems.push(calendarExample); - calendarExample = new NavigationItem("Calendar day view", "./calendar/day-view/day-view-page", calendarRoot); + calendarExample = new NavigationItem("Calendar day view", "calendar/day-view/day-view-page", calendarRoot); calendarRoot.subItems.push(calendarExample); } @@ -134,95 +80,95 @@ export class NavigationViewModel extends Observable { var dataFormRoot = new NavigationItem("DataForm", undefined, currentParent); currentParent.subItems.push(dataFormRoot); - var dataFormExample = new NavigationItem("Getting started", "./dataform/getting-started/getting-started-page", dataFormRoot); + var dataFormExample = new NavigationItem("Getting started", "dataform/getting-started/getting-started-page", dataFormRoot); dataFormRoot.subItems.push(dataFormExample); - dataFormExample = new NavigationItem("Getting started JSON", "./dataform/getting-started-json/getting-started-json-page", dataFormRoot); + dataFormExample = new NavigationItem("Getting started JSON", "dataform/getting-started-json/getting-started-json-page", dataFormRoot); dataFormRoot.subItems.push(dataFormExample); - dataFormExample = new NavigationItem("Properties", "./dataform/adjustment/adjustment-page", dataFormRoot); + dataFormExample = new NavigationItem("Properties", "dataform/adjustment/adjustment-page", dataFormRoot); dataFormRoot.subItems.push(dataFormExample); - dataFormExample = new NavigationItem("Properties JSON", "./dataform/metadata/metadata-page", dataFormRoot); + dataFormExample = new NavigationItem("Properties JSON", "dataform/metadata/metadata-page", dataFormRoot); dataFormRoot.subItems.push(dataFormExample); var editors = new NavigationItem("Editors", undefined, dataFormRoot); dataFormRoot.subItems.push(editors); - var common = new NavigationItem("Common", "./dataform/editors/editors-page", editors); + var common = new NavigationItem("Common", "dataform/editors/editors-page", editors); editors.subItems.push(common); - var autocomplete = new NavigationItem("AutoComplete", "./dataform/editors/autocomplete/autocomplete-page", editors); + var autocomplete = new NavigationItem("AutoComplete", "dataform/editors/autocomplete/autocomplete-page", editors); editors.subItems.push(autocomplete); - var labels = new NavigationItem("Labels", "./dataform/editors/labels/labels-page", editors); + var labels = new NavigationItem("Labels", "dataform/editors/labels/labels-page", editors); editors.subItems.push(labels); - var customEditor = new NavigationItem("Custom Editors", "./dataform/editors/custom-editors/custom-editors-page", editors); + var customEditor = new NavigationItem("Custom Editors", "dataform/editors/custom-editors/custom-editors-page", editors); editors.subItems.push(customEditor); var validation = new NavigationItem("Validation", undefined, dataFormRoot); dataFormRoot.subItems.push(validation); - var selectionExample = new NavigationItem("Validators", "./dataform/validation/validation-page", validation); + var selectionExample = new NavigationItem("Validators", "dataform/validation/validation-page", validation); validation.subItems.push(selectionExample); - var selectionExample = new NavigationItem("Validation Modes", "./dataform/validation/validation-modes/validation-modes-page", validation); + var selectionExample = new NavigationItem("Validation Modes", "dataform/validation/validation-modes/validation-modes-page", validation); validation.subItems.push(selectionExample); - var selectionExample = new NavigationItem("Validation Events", "./dataform/validation/validation-events/validation-events-page", validation); + var selectionExample = new NavigationItem("Validation Events", "dataform/validation/validation-events/validation-events-page", validation); validation.subItems.push(selectionExample); - var selectionExample = new NavigationItem("Validators JSON", "./dataform/validation/metadata/metadata-page", validation); + var selectionExample = new NavigationItem("Validators JSON", "dataform/validation/metadata/metadata-page", validation); validation.subItems.push(selectionExample); - var selectionExample = new NavigationItem("Async Validation", "./dataform/validation/async-validation/async-validation-page", validation); + var selectionExample = new NavigationItem("Async Validation", "dataform/validation/async-validation/async-validation-page", validation); validation.subItems.push(selectionExample); - var selectionExample = new NavigationItem("Check Validation State", "./dataform/validation/check-errors/check-errors-page", validation); + var selectionExample = new NavigationItem("Check Validation State", "dataform/validation/check-errors/check-errors-page", validation); validation.subItems.push(selectionExample); - var selectionExample = new NavigationItem("Custom Validator", "./dataform/validation/custom-validator/custom-validator-page", validation); + var selectionExample = new NavigationItem("Custom Validator", "dataform/validation/custom-validator/custom-validator-page", validation); validation.subItems.push(selectionExample); - var selectionExample = new NavigationItem("Custom Validation", "./dataform/validation/custom-validation/custom-validation-page", validation); + var selectionExample = new NavigationItem("Custom Validation", "dataform/validation/custom-validation/custom-validation-page", validation); validation.subItems.push(selectionExample); - dataFormExample = new NavigationItem("Commit Modes", "./dataform/commit-modes/commit-modes-page", dataFormRoot); + dataFormExample = new NavigationItem("Commit Modes", "dataform/commit-modes/commit-modes-page", dataFormRoot); dataFormRoot.subItems.push(dataFormExample); - dataFormExample = new NavigationItem("Groups", "./dataform/groups/groups-page", dataFormRoot); + dataFormExample = new NavigationItem("Groups", "dataform/groups/groups-page", dataFormRoot); dataFormRoot.subItems.push(dataFormExample); - dataFormExample = new NavigationItem("Events", "./dataform/events/events-page", dataFormRoot); + dataFormExample = new NavigationItem("Events", "dataform/events/events-page", dataFormRoot); dataFormRoot.subItems.push(dataFormExample); var styling = new NavigationItem("Styling", undefined, dataFormRoot); dataFormRoot.subItems.push(styling); - dataFormExample = new NavigationItem("Common", "./dataform/styling/common/styling-page", styling); + dataFormExample = new NavigationItem("Common", "dataform/styling/common/styling-page", styling); styling.subItems.push(dataFormExample); - dataFormExample = new NavigationItem("Advanced", "./dataform/styling/advanced/styling-advanced-page", styling); + dataFormExample = new NavigationItem("Advanced", "dataform/styling/advanced/styling-advanced-page", styling); styling.subItems.push(dataFormExample); - dataFormExample = new NavigationItem("Editor Background", "./dataform/styling/editor-background/styling-editor-background-page", styling); + dataFormExample = new NavigationItem("Editor Background", "dataform/styling/editor-background/styling-editor-background-page", styling); styling.subItems.push(dataFormExample); - dataFormExample = new NavigationItem("At runtime", "./dataform/styling/editor-style/editor-style-page", styling); + dataFormExample = new NavigationItem("At runtime", "dataform/styling/editor-style/editor-style-page", styling); styling.subItems.push(dataFormExample); - dataFormExample = new NavigationItem("Runtime updates", "./dataform/runtime-updates/runtime-updates-page", dataFormRoot); + dataFormExample = new NavigationItem("Runtime updates", "dataform/runtime-updates/runtime-updates-page", dataFormRoot); dataFormRoot.subItems.push(dataFormExample); - dataFormExample = new NavigationItem("Platform adjustments", "./dataform/platform-specifics/platform-specifics-page", dataFormRoot); + dataFormExample = new NavigationItem("Platform adjustments", "dataform/platform-specifics/platform-specifics-page", dataFormRoot); dataFormRoot.subItems.push(dataFormExample); - dataFormExample = new NavigationItem("Image Labels", "./dataform/image-labels/image-labels-page", dataFormRoot); + dataFormExample = new NavigationItem("Image Labels", "dataform/image-labels/image-labels-page", dataFormRoot); dataFormRoot.subItems.push(dataFormExample); var layouts = new NavigationItem("Layouts", undefined, dataFormRoot); dataFormRoot.subItems.push(layouts); - var selectionExample = new NavigationItem("Stack", "./dataform/layouts/stack-layout-page", layouts); + var selectionExample = new NavigationItem("Stack", "dataform/layouts/stack-layout-page", layouts); layouts.subItems.push(selectionExample); - var selectionExample = new NavigationItem("Grid", "./dataform/layouts/grid-layout-page", layouts); + var selectionExample = new NavigationItem("Grid", "dataform/layouts/grid-layout-page", layouts); layouts.subItems.push(selectionExample); - dataFormExample = new NavigationItem("Read Only", "./dataform/editors/readonly/editor-readonly-page", dataFormRoot); + dataFormExample = new NavigationItem("Read Only", "dataform/editors/readonly/editor-readonly-page", dataFormRoot); dataFormRoot.subItems.push(dataFormExample); - dataFormExample = new NavigationItem("Value Providers", "./dataform/value-providers/value-providers-page", dataFormRoot); + dataFormExample = new NavigationItem("Value Providers", "dataform/value-providers/value-providers-page", dataFormRoot); dataFormRoot.subItems.push(dataFormExample); - dataFormExample = new NavigationItem("Scrollable Form", "./dataform/scrolling/scrolling-page", dataFormRoot); + dataFormExample = new NavigationItem("Scrollable Form", "dataform/scrolling/scrolling-page", dataFormRoot); dataFormRoot.subItems.push(dataFormExample); } @@ -232,114 +178,114 @@ export class NavigationViewModel extends Observable { var seriesRoot = new NavigationItem("Series", undefined, chartRoot); chartRoot.subItems.push(seriesRoot); - var seriesExample = new NavigationItem("Bar series", "./chart/series/bar/bar-series-page", seriesRoot); + var seriesExample = new NavigationItem("Bar series", "chart/series/bar/bar-series-page", seriesRoot); seriesRoot.subItems.push(seriesExample); - seriesExample = new NavigationItem("Range bar series", "./chart/series/bar/range-bar-series-page", seriesRoot); + seriesExample = new NavigationItem("Range bar series", "chart/series/bar/range-bar-series-page", seriesRoot); seriesRoot.subItems.push(seriesExample); - seriesExample = new NavigationItem("Stacked Bar series", "./chart/series/bar/stacked-bar-series-page", seriesRoot); + seriesExample = new NavigationItem("Stacked Bar series", "chart/series/bar/stacked-bar-series-page", seriesRoot); seriesRoot.subItems.push(seriesExample); - seriesExample = new NavigationItem("Area series", "./chart/series/area/area-series-page", seriesRoot); + seriesExample = new NavigationItem("Area series", "chart/series/area/area-series-page", seriesRoot); seriesRoot.subItems.push(seriesExample); - seriesExample = new NavigationItem("Stacked Area series", "./chart/series/area/stacked-area-series-page", seriesRoot); + seriesExample = new NavigationItem("Stacked Area series", "chart/series/area/stacked-area-series-page", seriesRoot); seriesRoot.subItems.push(seriesExample); - seriesExample = new NavigationItem("Line series", "./chart/series/line/line-series-page", seriesRoot); + seriesExample = new NavigationItem("Line series", "chart/series/line/line-series-page", seriesRoot); seriesRoot.subItems.push(seriesExample); - seriesExample = new NavigationItem("Spline series", "./chart/series/spline/spline-series-page", seriesRoot); + seriesExample = new NavigationItem("Spline series", "chart/series/spline/spline-series-page", seriesRoot); seriesRoot.subItems.push(seriesExample); - seriesExample = new NavigationItem("Spline Area series", "./chart/series/spline/spline-area-series-page", seriesRoot); + seriesExample = new NavigationItem("Spline Area series", "chart/series/spline/spline-area-series-page", seriesRoot); seriesRoot.subItems.push(seriesExample); - seriesExample = new NavigationItem("Bubble series", "./chart/series/bubble/bubble-series-page", seriesRoot); + seriesExample = new NavigationItem("Bubble series", "chart/series/bubble/bubble-series-page", seriesRoot); seriesRoot.subItems.push(seriesExample); - seriesExample = new NavigationItem("Scatter Bubble series", "./chart/series/bubble/scatter-bubble-series-page", seriesRoot); + seriesExample = new NavigationItem("Scatter Bubble series", "chart/series/bubble/scatter-bubble-series-page", seriesRoot); seriesRoot.subItems.push(seriesExample); - seriesExample = new NavigationItem("Candlestick series", "./chart/series/financial/candlestick-series-page", seriesRoot); + seriesExample = new NavigationItem("Candlestick series", "chart/series/financial/candlestick-series-page", seriesRoot); seriesRoot.subItems.push(seriesExample); - seriesExample = new NavigationItem("Ohlc series", "./chart/series/financial/ohlc-series-page", seriesRoot); + seriesExample = new NavigationItem("Ohlc series", "chart/series/financial/ohlc-series-page", seriesRoot); seriesRoot.subItems.push(seriesExample); - seriesExample = new NavigationItem("Pie series", "./chart/series/pie/pie-series-page", seriesRoot); + seriesExample = new NavigationItem("Pie series", "chart/series/pie/pie-series-page", seriesRoot); seriesRoot.subItems.push(seriesExample); - seriesExample = new NavigationItem("Scatter series", "./chart/series/scatter/scatter-series-page", seriesRoot); + seriesExample = new NavigationItem("Scatter series", "chart/series/scatter/scatter-series-page", seriesRoot); seriesRoot.subItems.push(seriesExample); var stylingRoot = new NavigationItem("Styling", undefined, chartRoot); chartRoot.subItems.push(stylingRoot); - var stylingExample = new NavigationItem("Styling axes", "./chart/styling/styling-axes-page", stylingRoot); + var stylingExample = new NavigationItem("Styling axes", "chart/styling/styling-axes-page", stylingRoot); stylingRoot.subItems.push(stylingExample); - stylingExample = new NavigationItem("Styling series", "./chart/styling/styling-series-page", stylingRoot); + stylingExample = new NavigationItem("Styling series", "chart/styling/styling-series-page", stylingRoot); stylingRoot.subItems.push(stylingExample); - stylingExample = new NavigationItem("Styling Pie Chart series", "./chart/styling/styling-pie-series-page", stylingRoot); + stylingExample = new NavigationItem("Styling Pie Chart series", "chart/styling/styling-pie-series-page", stylingRoot); stylingRoot.subItems.push(stylingExample); - stylingExample = new NavigationItem("Styling grid", "./chart/styling/styling-grid-page", stylingRoot); + stylingExample = new NavigationItem("Styling grid", "chart/styling/styling-grid-page", stylingRoot); stylingRoot.subItems.push(stylingExample); - stylingExample = new NavigationItem("Styling labels", "./chart/styling/styling-labels-page", stylingRoot); + stylingExample = new NavigationItem("Styling labels", "chart/styling/styling-labels-page", stylingRoot); stylingRoot.subItems.push(stylingExample); - stylingExample = new NavigationItem("Styling series selection", "./chart/styling/styling-selection-page", stylingRoot); + stylingExample = new NavigationItem("Styling series selection", "chart/styling/styling-selection-page", stylingRoot); stylingRoot.subItems.push(stylingExample); - var legendRoot = new NavigationItem("Legend", "./chart/legend/chart-legend-page", chartRoot); + var legendRoot = new NavigationItem("Legend", "chart/legend/chart-legend-page", chartRoot); chartRoot.subItems.push(legendRoot); var behaviorsRoot = new NavigationItem("Interaction", undefined, chartRoot); chartRoot.subItems.push(behaviorsRoot); - var interactionExample = new NavigationItem("Pan & Zoom", "./chart/behaviors/chart-pan-zoom-page", behaviorsRoot); + var interactionExample = new NavigationItem("Pan & Zoom", "chart/behaviors/chart-pan-zoom-page", behaviorsRoot); behaviorsRoot.subItems.push(interactionExample); - interactionExample = new NavigationItem("Trackball", "./chart/behaviors/chart-trackball-page", behaviorsRoot); + interactionExample = new NavigationItem("Trackball", "chart/behaviors/chart-trackball-page", behaviorsRoot); behaviorsRoot.subItems.push(interactionExample); - interactionExample = new NavigationItem("Pie selection", "./chart/behaviors/chart-pie-selection-page", behaviorsRoot); + interactionExample = new NavigationItem("Pie selection", "chart/behaviors/chart-pie-selection-page", behaviorsRoot); behaviorsRoot.subItems.push(interactionExample); - interactionExample = new NavigationItem("Series selection", "./chart/behaviors/chart-series-selection-page", behaviorsRoot); + interactionExample = new NavigationItem("Series selection", "chart/behaviors/chart-series-selection-page", behaviorsRoot); behaviorsRoot.subItems.push(interactionExample); - interactionExample = new NavigationItem("Datapoint selection", "./chart/behaviors/chart-datapoint-selection-page", behaviorsRoot); + interactionExample = new NavigationItem("Datapoint selection", "chart/behaviors/chart-datapoint-selection-page", behaviorsRoot); behaviorsRoot.subItems.push(interactionExample); var axesRoot = new NavigationItem("Axes", undefined, chartRoot); chartRoot.subItems.push(axesRoot); - var axesExample = new NavigationItem("Customization", "./chart/axes/customization/axes-customization-page", axesRoot); + var axesExample = new NavigationItem("Customization", "chart/axes/customization/axes-customization-page", axesRoot); axesRoot.subItems.push(axesExample); - axesExample = new NavigationItem("Multiple axes", "./chart/axes/multiple/multiple-axes-page", axesRoot); + axesExample = new NavigationItem("Multiple axes", "chart/axes/multiple/multiple-axes-page", axesRoot); axesRoot.subItems.push(axesExample); - axesExample = new NavigationItem("Negative values", "./chart/axes/negative-values/negative-values-page", axesRoot); + axesExample = new NavigationItem("Negative values", "chart/axes/negative-values/negative-values-page", axesRoot); axesRoot.subItems.push(axesExample); - axesExample = new NavigationItem("Date time axis", "./chart/axes/date-time-axes/date-time-axes-page", axesRoot); + axesExample = new NavigationItem("Date time axis", "chart/axes/date-time-axes/date-time-axes-page", axesRoot); axesRoot.subItems.push(axesExample); - axesExample = new NavigationItem("Label visibility", "./chart/axes/label-visibility/label-visibility-page", axesRoot); + axesExample = new NavigationItem("Label visibility", "chart/axes/label-visibility/label-visibility-page", axesRoot); axesRoot.subItems.push(axesExample); var annotationsRoot = new NavigationItem("Annotations", undefined, chartRoot); chartRoot.subItems.push(annotationsRoot); - var annotationsExample = new NavigationItem("Plot band", "./chart/annotations/plot-band-page", annotationsRoot); + var annotationsExample = new NavigationItem("Plot band", "chart/annotations/plot-band-page", annotationsRoot); annotationsRoot.subItems.push(annotationsExample); - annotationsExample = new NavigationItem("Grid line", "./chart/annotations/grid-line-page", annotationsRoot); + annotationsExample = new NavigationItem("Grid line", "chart/annotations/grid-line-page", annotationsRoot); annotationsRoot.subItems.push(annotationsExample); } @@ -347,195 +293,192 @@ export class NavigationViewModel extends Observable { var currentItem = new NavigationItem("ListView", undefined, currentParent); currentParent.subItems.push(currentItem); - var exampleItem = new NavigationItem("Getting Started", "./listview/getting-started/getting-started-page", currentItem); + var exampleItem = new NavigationItem("Getting Started", "listview/getting-started/getting-started-page", currentItem); currentItem.subItems.push(exampleItem); // Data operations var dataOperations = new NavigationItem("Data Operations", undefined, currentItem); currentItem.subItems.push(dataOperations); - exampleItem = new NavigationItem("Filtering", "./listview/filtering/filtering-page", dataOperations); + exampleItem = new NavigationItem("Filtering", "listview/filtering/filtering-page", dataOperations); dataOperations.subItems.push(exampleItem); - exampleItem = new NavigationItem("Sorting", "./listview/sorting/sorting-page", dataOperations); + exampleItem = new NavigationItem("Sorting", "listview/sorting/sorting-page", dataOperations); dataOperations.subItems.push(exampleItem); - var exampleItem = new NavigationItem("Grouping", "./listview/grouping/grouping-page", dataOperations); + var exampleItem = new NavigationItem("Grouping", "listview/grouping/grouping-page", dataOperations); dataOperations.subItems.push(exampleItem); - if(isAndroid) { - exampleItem = new NavigationItem("Collapsible Grouping", "./listview/grouping/grouping-collapsible-page", dataOperations); + if (isAndroid) { + exampleItem = new NavigationItem("Collapsible Grouping", "listview/grouping/grouping-collapsible-page", dataOperations); dataOperations.subItems.push(exampleItem); } - - exampleItem = new NavigationItem("Multiple operations", "./listview/multiple-data-operations/multiple-data-operations-page", dataOperations); + + exampleItem = new NavigationItem("Multiple operations", "listview/multiple-data-operations/multiple-data-operations-page", dataOperations); dataOperations.subItems.push(exampleItem); - - - var exampleItem = new NavigationItem("Multiple Item Templates", "./listview/multiple-templates/multiple-templates-page", currentItem); + + + var exampleItem = new NavigationItem("Multiple Item Templates", "listview/multiple-templates/multiple-templates-page", currentItem); currentItem.subItems.push(exampleItem); - var exampleItem = new NavigationItem("Item Loading", "./listview/item-loading/item-loading-page", currentItem); + var exampleItem = new NavigationItem("Item Loading", "listview/item-loading/item-loading-page", currentItem); currentItem.subItems.push(exampleItem); - exampleItem = new NavigationItem("Item Animations", "./listview/item-animations/item-animations-page", currentItem); + exampleItem = new NavigationItem("Item Animations", "listview/item-animations/item-animations-page", currentItem); currentItem.subItems.push(exampleItem); // Layouts var layoutsItem = new NavigationItem("Item Layouts", undefined, currentItem); currentItem.subItems.push(layoutsItem); - var layoutsExample = new NavigationItem("Linear", "./listview/item-layouts/item-layouts-linear-page", layoutsItem); + var layoutsExample = new NavigationItem("Linear", "listview/item-layouts/item-layouts-linear-page", layoutsItem); layoutsItem.subItems.push(layoutsExample); - layoutsExample = new NavigationItem("Grid", "./listview/item-layouts/item-layouts-grid-page", layoutsItem); + layoutsExample = new NavigationItem("Grid", "listview/item-layouts/item-layouts-grid-page", layoutsItem); layoutsItem.subItems.push(layoutsExample); - layoutsExample = new NavigationItem("Staggered", "./listview/item-layouts/item-layouts-staggered-page", layoutsItem); + layoutsExample = new NavigationItem("Staggered", "listview/item-layouts/item-layouts-staggered-page", layoutsItem); layoutsItem.subItems.push(layoutsExample); - layoutsExample = new NavigationItem("Change at runtime", "./listview/item-layouts/item-layouts-runtime-page", layoutsItem); + layoutsExample = new NavigationItem("Change at runtime", "listview/item-layouts/item-layouts-runtime-page", layoutsItem); layoutsItem.subItems.push(layoutsExample); // Item reorder - exampleItem = new NavigationItem("Item Reorder", "./listview/item-reorder/item-reorder-page", currentItem); + exampleItem = new NavigationItem("Item Reorder", "listview/item-reorder/item-reorder-page", currentItem); currentItem.subItems.push(exampleItem); - exampleItem = new NavigationItem("Item Reorder with handle", "./listview/item-reorder/item-reorder-handle-page", currentItem); + exampleItem = new NavigationItem("Item Reorder with handle", "listview/item-reorder/item-reorder-handle-page", currentItem); currentItem.subItems.push(exampleItem); // Selection var selectionItem = new NavigationItem("Selection", undefined, currentItem); currentItem.subItems.push(selectionItem); - var selectionExample = new NavigationItem("Single Selection", "./listview/listview-selection/single-selection-page", selectionItem); + var selectionExample = new NavigationItem("Single Selection", "listview/listview-selection/single-selection-page", selectionItem); selectionItem.subItems.push(selectionExample); - selectionExample = new NavigationItem("Multiple Selection", "./listview/listview-selection/multiple-selection-page", selectionItem); + selectionExample = new NavigationItem("Multiple Selection", "listview/listview-selection/multiple-selection-page", selectionItem); selectionItem.subItems.push(selectionExample); - selectionExample = new NavigationItem("Programmatic Selection", "./listview/listview-selection/programmatic-selection-page", selectionItem); + selectionExample = new NavigationItem("Programmatic Selection", "listview/listview-selection/programmatic-selection-page", selectionItem); selectionItem.subItems.push(selectionExample); - exampleItem = new NavigationItem("Selection states", "./listview/selection-states/selection-states-page", selectionItem); + exampleItem = new NavigationItem("Selection states", "listview/selection-states/selection-states-page", selectionItem); selectionItem.subItems.push(exampleItem); var demand = new NavigationItem("Load on Demand", undefined, currentItem); currentItem.subItems.push(demand); - var selectionExample = new NavigationItem("Manual with Fixed Item Size", "./listview/load-on-demand/fixed-size-manual/fixed-size-manual-page", demand); + var selectionExample = new NavigationItem("Manual with Fixed Item Size", "listview/load-on-demand/fixed-size-manual/fixed-size-manual-page", demand); demand.subItems.push(selectionExample); - var selectionExample = new NavigationItem("Auto with Fixed Item Size", "./listview/load-on-demand/fixed-size-auto/fixed-size-auto-page", demand); + var selectionExample = new NavigationItem("Auto with Fixed Item Size", "listview/load-on-demand/fixed-size-auto/fixed-size-auto-page", demand); demand.subItems.push(selectionExample); - var selectionExample = new NavigationItem("Manual with Variable Item Size", "./listview/load-on-demand/dynamic-size-manual/dynamic-size-manual-page", demand); + var selectionExample = new NavigationItem("Manual with Variable Item Size", "listview/load-on-demand/dynamic-size-manual/dynamic-size-manual-page", demand); demand.subItems.push(selectionExample); - var selectionExample = new NavigationItem("Auto with Variable Item Size", "./listview/load-on-demand/dynamic-size-auto/dynamic-size-auto-page", demand); + var selectionExample = new NavigationItem("Auto with Variable Item Size", "listview/load-on-demand/dynamic-size-auto/dynamic-size-auto-page", demand); demand.subItems.push(selectionExample); - exampleItem = new NavigationItem("Observable Array", "./listview/observable-array/observable-array-page", currentItem); + exampleItem = new NavigationItem("Observable Array", "listview/observable-array/observable-array-page", currentItem); currentItem.subItems.push(exampleItem); - exampleItem = new NavigationItem("Pull to Refresh", "./listview/pull-to-refresh/pull-to-refresh-page", currentItem); + exampleItem = new NavigationItem("Pull to Refresh", "listview/pull-to-refresh/pull-to-refresh-page", currentItem); currentItem.subItems.push(exampleItem); // Swipe actions var swipeActions = new NavigationItem("Swipe actions", undefined, currentItem); currentItem.subItems.push(swipeActions); - exampleItem = new NavigationItem("Getting started", "./listview/swipe-actions/swipe-actions-page", swipeActions); + exampleItem = new NavigationItem("Getting started", "listview/swipe-actions/swipe-actions-page", swipeActions); swipeActions.subItems.push(exampleItem); - exampleItem = new NavigationItem("Animated thresholds", "./listview/swipe-actions/swipe-actions-thresholds-page", swipeActions); + exampleItem = new NavigationItem("Animated thresholds", "listview/swipe-actions/swipe-actions-thresholds-page", swipeActions); swipeActions.subItems.push(exampleItem); - exampleItem = new NavigationItem("Multiple actions", "./listview/swipe-actions/swipe-actions-multiple-page", swipeActions); + exampleItem = new NavigationItem("Multiple actions", "listview/swipe-actions/swipe-actions-multiple-page", swipeActions); swipeActions.subItems.push(exampleItem); - exampleItem = new NavigationItem("Disable\\Enable", "./listview/swipe-actions/swipe-disable-page", swipeActions); + exampleItem = new NavigationItem("Disable\\Enable", "listview/swipe-actions/swipe-disable-page", swipeActions); swipeActions.subItems.push(exampleItem); // Header and footer - exampleItem = new NavigationItem("Header and Footer", "./listview/header-footer/header-footer-page", currentItem); + exampleItem = new NavigationItem("Header and Footer", "listview/header-footer/header-footer-page", currentItem); currentItem.subItems.push(exampleItem); // Scroll to index var scrollToIndex = new NavigationItem("Scroll to index", undefined, currentItem); currentItem.subItems.push(scrollToIndex); - var selectionExample = new NavigationItem("In vertical direction", "./listview/scroll-to-index/scroll-to-index-vertical-page", scrollToIndex); + var selectionExample = new NavigationItem("In vertical direction", "listview/scroll-to-index/scroll-to-index-vertical-page", scrollToIndex); scrollToIndex.subItems.push(selectionExample); - var selectionExample = new NavigationItem("In horizontal direction", "./listview/scroll-to-index/scroll-to-index-horizontal-page", scrollToIndex); + var selectionExample = new NavigationItem("In horizontal direction", "listview/scroll-to-index/scroll-to-index-horizontal-page", scrollToIndex); scrollToIndex.subItems.push(selectionExample); - var selectionExample = new NavigationItem("Initially scrolled", "./listview/scroll-to-index/scroll-to-index-initial-page", scrollToIndex); + var selectionExample = new NavigationItem("Initially scrolled", "listview/scroll-to-index/scroll-to-index-initial-page", scrollToIndex); scrollToIndex.subItems.push(selectionExample); // Scroll events - exampleItem = new NavigationItem("Scroll Events", "./listview/scroll-events/scroll-events-page", currentItem); + exampleItem = new NavigationItem("Scroll Events", "listview/scroll-events/scroll-events-page", currentItem); currentItem.subItems.push(exampleItem); } private buildSideDrawerExamples(currentParent: NavigationItem) { var currentItem = new NavigationItem("SideDrawer", undefined, currentParent); currentParent.subItems.push(currentItem); - var exampleItem = new NavigationItem("Getting started", "./sidedrawer/getting-started/getting-started-page", currentItem); + var exampleItem = new NavigationItem("Getting started", "sidedrawer/getting-started/getting-started-page", currentItem); currentItem.subItems.push(exampleItem); - exampleItem = new NavigationItem("Position", "./sidedrawer/position/drawer-position-page", currentItem); + exampleItem = new NavigationItem("Position", "sidedrawer/position/drawer-position-page", currentItem); currentItem.subItems.push(exampleItem); - exampleItem = new NavigationItem("Transitions", "./sidedrawer/transitions/drawer-transitions-page", currentItem); + exampleItem = new NavigationItem("Transitions", "sidedrawer/transitions/drawer-transitions-page", currentItem); currentItem.subItems.push(exampleItem); - exampleItem = new NavigationItem("Events", "./sidedrawer/callbacks/drawer-callbacks-page", currentItem); - currentItem.subItems.push(exampleItem); - - exampleItem = new NavigationItem("Drawer Over Navigation", "./sidedrawer/over-navigation/drawer-over-navigation-page", currentItem); + exampleItem = new NavigationItem("Events", "sidedrawer/callbacks/drawer-callbacks-page", currentItem); currentItem.subItems.push(exampleItem); } private buildAutoCompleteExamples(currentParent: NavigationItem) { var currentItem = new NavigationItem("AutoCompleteTextView", undefined, currentParent); currentParent.subItems.push(currentItem); - var exampleItem = new NavigationItem("Getting started", "./autocomplete/getting-started/autocomplete-getting-started-page", currentItem); + var exampleItem = new NavigationItem("Getting started", "autocomplete/getting-started/autocomplete-getting-started-page", currentItem); currentItem.subItems.push(exampleItem); var completionModes = new NavigationItem("Completion modes", undefined, currentItem); currentItem.subItems.push(completionModes); - var exampleItem = new NavigationItem("Contains", "./autocomplete/completion-mode/autocomplete-contains-page", completionModes); + var exampleItem = new NavigationItem("Contains", "autocomplete/completion-mode/autocomplete-contains-page", completionModes); completionModes.subItems.push(exampleItem); - var exampleItem = new NavigationItem("Starts with", "./autocomplete/completion-mode/autocomplete-startswith-page", completionModes); + var exampleItem = new NavigationItem("Starts with", "autocomplete/completion-mode/autocomplete-startswith-page", completionModes); completionModes.subItems.push(exampleItem); var displayModes = new NavigationItem("Display modes", undefined, currentItem); currentItem.subItems.push(displayModes); - var exampleItem = new NavigationItem("Tokens", "./autocomplete/display-mode/autocomplete-tokens-page", displayModes); + var exampleItem = new NavigationItem("Tokens", "autocomplete/display-mode/autocomplete-tokens-page", displayModes); displayModes.subItems.push(exampleItem); - var exampleItem = new NavigationItem("Plain", "./autocomplete/display-mode/autocomplete-plain-page", displayModes); + var exampleItem = new NavigationItem("Plain", "autocomplete/display-mode/autocomplete-plain-page", displayModes); displayModes.subItems.push(exampleItem); var layoutModes = new NavigationItem("Token Layouts", undefined, currentItem); currentItem.subItems.push(layoutModes); - var exampleItem = new NavigationItem("Switching at runtime", "./autocomplete/layouts/autocomplete-runtime-page", layoutModes); + var exampleItem = new NavigationItem("Switching at runtime", "autocomplete/layouts/autocomplete-runtime-page", layoutModes); layoutModes.subItems.push(exampleItem); - var exampleItem = new NavigationItem("Horizontal", "./autocomplete/layouts/autocomplete-horizontal-page", layoutModes); + var exampleItem = new NavigationItem("Horizontal", "autocomplete/layouts/autocomplete-horizontal-page", layoutModes); layoutModes.subItems.push(exampleItem); - var exampleItem = new NavigationItem("Wrap", "./autocomplete/layouts/autocomplete-wrap-page", layoutModes); + var exampleItem = new NavigationItem("Wrap", "autocomplete/layouts/autocomplete-wrap-page", layoutModes); layoutModes.subItems.push(exampleItem); var suggestModes = new NavigationItem("Suggest Mode", undefined, currentItem); currentItem.subItems.push(suggestModes); - var exampleItem = new NavigationItem("Append", "./autocomplete/suggest-mode/autocomplete-append-page", suggestModes); + var exampleItem = new NavigationItem("Append", "autocomplete/suggest-mode/autocomplete-append-page", suggestModes); suggestModes.subItems.push(exampleItem); - var exampleItem = new NavigationItem("Suggest", "./autocomplete/suggest-mode/autocomplete-suggest-page", suggestModes); + var exampleItem = new NavigationItem("Suggest", "autocomplete/suggest-mode/autocomplete-suggest-page", suggestModes); suggestModes.subItems.push(exampleItem); - var exampleItem = new NavigationItem("Suggest & Append", "./autocomplete/suggest-mode/autocomplete-suggest-append-page", suggestModes); + var exampleItem = new NavigationItem("Suggest & Append", "autocomplete/suggest-mode/autocomplete-suggest-append-page", suggestModes); suggestModes.subItems.push(exampleItem); - exampleItem = new NavigationItem("Customization", "./autocomplete/customization/autocomplete-customization-page", currentItem); + exampleItem = new NavigationItem("Customization", "autocomplete/customization/autocomplete-customization-page", currentItem); currentItem.subItems.push(exampleItem); - exampleItem = new NavigationItem("Events", "./autocomplete/events/autocomplete-events-page", currentItem); + exampleItem = new NavigationItem("Events", "autocomplete/events/autocomplete-events-page", currentItem); currentItem.subItems.push(exampleItem); - exampleItem = new NavigationItem("Async Data Fetch", "./autocomplete/remote-data-fetch/autocomplete-remote-page", currentItem); + exampleItem = new NavigationItem("Async Data Fetch", "autocomplete/remote-data-fetch/autocomplete-remote-page", currentItem); currentItem.subItems.push(exampleItem); - exampleItem = new NavigationItem("Read Only", "./autocomplete/readonly/autocomplete-readonly-page", currentItem); + exampleItem = new NavigationItem("Read Only", "autocomplete/readonly/autocomplete-readonly-page", currentItem); currentItem.subItems.push(exampleItem); - exampleItem = new NavigationItem("Hint", "./autocomplete/hint/autocomplete-hint-page", currentItem); + exampleItem = new NavigationItem("Hint", "autocomplete/hint/autocomplete-hint-page", currentItem); currentItem.subItems.push(exampleItem); - exampleItem = new NavigationItem("Preselected items", "./autocomplete/preselected-tokens/autocomplete-preselected-tokens-page", currentItem); + exampleItem = new NavigationItem("Preselected items", "autocomplete/preselected-tokens/autocomplete-preselected-tokens-page", currentItem); currentItem.subItems.push(exampleItem); } @@ -543,56 +486,16 @@ export class NavigationViewModel extends Observable { let currentItem = new NavigationItem("Gauges", undefined, currentParent); currentParent.subItems.push(currentItem); - var exampleItem = new NavigationItem("Getting started", "./gauges/getting-started/getting-started-page", currentItem); + var exampleItem = new NavigationItem("Getting started", "gauges/getting-started/getting-started-page", currentItem); currentItem.subItems.push(exampleItem); - exampleItem = new NavigationItem("Scales", "./gauges/scales/scales-page", currentItem); + exampleItem = new NavigationItem("Scales", "gauges/scales/scales-page", currentItem); currentItem.subItems.push(exampleItem); - exampleItem = new NavigationItem("Customization", "./gauges/customization/customization-page", currentItem); + exampleItem = new NavigationItem("Customization", "gauges/customization/customization-page", currentItem); currentItem.subItems.push(exampleItem); - exampleItem = new NavigationItem("Animations", "./gauges/animations/animations-page", currentItem); + exampleItem = new NavigationItem("Animations", "gauges/animations/animations-page", currentItem); currentItem.subItems.push(exampleItem); } - - public canMoveBack(): boolean { - return this.hasBackNavigation; - } - - public moveBack() { - this.currentParent = this.currentParent.parent; - this.hasBackNavigation = this.currentParent.parent !== undefined; - } - - public initModelData() { - if (this.currentParent && this.currentParent.module === undefined) { - this.currentSubItems = this.currentParent.subItems; - } - } - - public onNavigationItemTap(args) { - - var itemIndex = args.index; - var tappedItem = this.currentSubItems[itemIndex]; - if (tappedItem.module === undefined) { - this.hasBackNavigation = tappedItem.parent !== undefined; - this.currentParent = tappedItem; - } - - if (tappedItem.subItems.length > 0) { - topmost().navigate({ - moduleName: "./navigation/category-list-page" - }); - } else { - if (tappedItem.module) { - topmost().navigate({ - moduleName: tappedItem.module, - context: tappedItem - }); - } - } - } } - -export var navigationModel = new NavigationViewModel(); diff --git a/sdk/app/navigation/category-list-nested-page.css b/sdk/app/navigation/category-list-nested-page.css new file mode 100644 index 00000000..d9cafd3b --- /dev/null +++ b/sdk/app/navigation/category-list-nested-page.css @@ -0,0 +1,11 @@ +.titleLabel { + margin: 16; + vertical-align: center; +} + +.itemStackLayout { + text-align: left; + vertical-align: center; + font-size: 16; + color:#404040; +} \ No newline at end of file diff --git a/sdk/app/navigation/category-list-nested-page.ts b/sdk/app/navigation/category-list-nested-page.ts new file mode 100644 index 00000000..94f78ba0 --- /dev/null +++ b/sdk/app/navigation/category-list-nested-page.ts @@ -0,0 +1,4 @@ +export function pageLoaded(args) { + var page = args.object; + page.bindingContext = page.navigationContext; +} diff --git a/sdk/app/navigation/category-list-page.ios.xml b/sdk/app/navigation/category-list-nested-page.xml similarity index 78% rename from sdk/app/navigation/category-list-page.ios.xml rename to sdk/app/navigation/category-list-nested-page.xml index 26723932..fa287465 100644 --- a/sdk/app/navigation/category-list-page.ios.xml +++ b/sdk/app/navigation/category-list-nested-page.xml @@ -6,9 +6,12 @@ navigatingTo="onPageNavigatingTo"> - + + + + - + @@ -21,4 +24,4 @@ - \ No newline at end of file + diff --git a/sdk/app/navigation/category-list-page.css b/sdk/app/navigation/category-list-page.css new file mode 100644 index 00000000..7742fc08 --- /dev/null +++ b/sdk/app/navigation/category-list-page.css @@ -0,0 +1,10 @@ +.root-drawer-content { + background-color: lightgray; +} + +.root-item-stack-layout { + text-align: left; + vertical-align: center; + font-size: 16; + color:#404040; +} \ No newline at end of file diff --git a/sdk/app/navigation/category-list-page.ts b/sdk/app/navigation/category-list-page.ts index 3e47c964..e69de29b 100644 --- a/sdk/app/navigation/category-list-page.ts +++ b/sdk/app/navigation/category-list-page.ts @@ -1,49 +0,0 @@ -import categoriesViewModel = require("./categories-view-model"); -import frameModule = require("tns-core-modules/ui/frame"); -import actionBarModule = require("tns-core-modules/ui/action-bar"); -import applicationModule = require("tns-core-modules/application"); -import utilsModule = require("tns-core-modules/utils/utils"); - -var dataModel = categoriesViewModel.navigationModel; - -export function pageLoaded(args) { - if (frameModule.topmost().android) { - var page = args.object; - var actionBar = page.actionBar === undefined ? new actionBarModule.ActionBar() : page.actionBar; - actionBar.title = dataModel.currentParent.title; - if (applicationModule.android) { - var navigationButton = new actionBarModule.NavigationButton(); - navigationButton.on("tap", args => { - if (page.content) { - utilsModule.ad.dismissSoftInput(page.content.android); - } - frameModule.topmost().goBack(); - }); - if (dataModel.hasBackNavigation) { - navigationButton.icon = "res://ic_arrow_back_black_24dp"; - actionBar.navigationButton = navigationButton; - } - } - - if (page.actionBar !== actionBar) { - page.actionBar = actionBar; - } - } -} - -export function onPageNavigatingTo(args) { - var page = args.object; - dataModel.initModelData(); - - page.bindingContext = dataModel; -} - -export function onPageNavigatingFrom(args) { - if (args.isBackNavigation && (dataModel.canMoveBack() === true)) { - dataModel.moveBack(); - } -} - -export function onBackTap(args) { - frameModule.topmost().goBack(); -} \ No newline at end of file diff --git a/sdk/app/navigation/category-list-page.xml b/sdk/app/navigation/category-list-page.xml new file mode 100644 index 00000000..e395f37b --- /dev/null +++ b/sdk/app/navigation/category-list-page.xml @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + diff --git a/sdk/app/navigation/example-page.ts b/sdk/app/navigation/example-page.ts index fb9e8edf..b756129d 100644 --- a/sdk/app/navigation/example-page.ts +++ b/sdk/app/navigation/example-page.ts @@ -1,11 +1,10 @@ -import pageModule = require("tns-core-modules/ui/page"); -import actionBarModule = require("tns-core-modules/ui/action-bar"); -import applicationModule = require("tns-core-modules/application"); -import frameModule = require("tns-core-modules/ui/frame"); -import utilsModule = require("tns-core-modules/utils/utils"); - -export class ExamplePage extends pageModule.Page { +import { Page } from "tns-core-modules/ui/page"; +import { ActionBar, NavigationButton } from "tns-core-modules/ui/action-bar"; +import { isAndroid } from "tns-core-modules/platform"; +import { topmost } from "tns-core-modules/ui/frame"; +import { ad as androidUtils } from "tns-core-modules/utils/utils"; +export class ExamplePage extends Page { private _associatedExampleMeta; public constructor() { @@ -14,27 +13,25 @@ export class ExamplePage extends pageModule.Page { this.on("navigatingTo", function (args) { that.get()._associatedExampleMeta = args.context; }); - - } public onLoaded() { super.onLoaded(); - var actionBar = this.actionBar === undefined ? new actionBarModule.ActionBar() : this.actionBar; + var actionBar = this.actionBar === undefined ? new ActionBar() : this.actionBar; let title = "Default title"; if (this._associatedExampleMeta && this._associatedExampleMeta.title) { title = this._associatedExampleMeta.title; } actionBar.title = title; - var navigationButton = new actionBarModule.NavigationButton(); - if (applicationModule.android) { + var navigationButton = new NavigationButton(); + if (isAndroid) { navigationButton.on("tap", args => { if (this.content) { - utilsModule.ad.dismissSoftInput(this.content.android); + androidUtils.dismissSoftInput(this.content.android); } - frameModule.topmost().goBack(); + topmost().goBack(); }); navigationButton.icon = "res://ic_arrow_back_black_24dp"; actionBar.navigationButton = navigationButton; diff --git a/sdk/app/navigation/main-content-page.css b/sdk/app/navigation/main-content-page.css new file mode 100644 index 00000000..39d77c85 --- /dev/null +++ b/sdk/app/navigation/main-content-page.css @@ -0,0 +1,11 @@ +.titleLabel { + margin: 16; + vertical-align: center; +} + +.itemStackLayout { + text-align: left; + vertical-align: center; + font-size: 16; + color:#404040; +} diff --git a/sdk/app/navigation/main-content-page.ts b/sdk/app/navigation/main-content-page.ts new file mode 100644 index 00000000..eb7de429 --- /dev/null +++ b/sdk/app/navigation/main-content-page.ts @@ -0,0 +1,11 @@ +import { NavigationViewModel } from "./categories-view-model"; +import { Page } from "tns-core-modules/ui/page"; +import { RadSideDrawer } from "nativescript-ui-sidedrawer"; + +export function pageLoaded(args) { + let dataModel = new NavigationViewModel(); + let page = args.object as Page; + page.bindingContext = dataModel; + dataModel.sideDrawer = page.parent.parent as RadSideDrawer; + dataModel.sideDrawer.drawerContent.bindingContext = page.bindingContext; +} \ No newline at end of file diff --git a/sdk/app/navigation/category-list-page.android.xml b/sdk/app/navigation/main-content-page.xml similarity index 53% rename from sdk/app/navigation/category-list-page.android.xml rename to sdk/app/navigation/main-content-page.xml index 34655ab5..df0ec26e 100644 --- a/sdk/app/navigation/category-list-page.android.xml +++ b/sdk/app/navigation/main-content-page.xml @@ -1,11 +1,11 @@ - + + + + - +