Merge pull request #141 from NativeScript/niliev/bottom

[DO-NOT-MERGE] BottomNavigation & Tabs Examples

Author: NickIliev

.eslintrc

@@ -100,7 +100,7 @@
         "no-multi-str": "error",
         "no-multiple-empty-lines": "error",
         "no-negated-condition": "off",
-        "no-nested-ternary": "error",
+        "no-nested-ternary": "off",
         "no-new": "error",
         "no-new-func": "error",
         "no-new-object": "error",

.gitignore

@@ -8,6 +8,7 @@ report
 
 app/**/*.map
 app/**/*-ts-*.js
+.migration_backup/
 
 .DS_Store
 **/*.log

.migration_backup/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "nativescript-sdk-examples-js",
+  "description": "NativeScript SDK Examples",
+  "author": "Telerik <support@telerik.com>",
+  "version": "0.1.0",
+  "homepage": "https://github.com/NativeScript/nativescript-sdk-examples-js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/NativeScript/nativescript-sdk-examples-js"
+  },
+  "bugs": {
+    "url": "https://github.com/NativeScript/nativescript-sdk-examples-js/issues"
+  },
+  "keywords": [
+    "NativeScript",
+    "JavaScript",
+    "SDK",
+    "example",
+    "documentation"
+  ],
+  "license": "Apache-2.0",
+  "nativescript": {
+    "id": "org.nativescript.nativescriptsdkexamplesjs",
+    "tns-android": {
+      "version": "6.0.0"
+    },
+    "tns-ios": {
+      "version": "6.0.0"
+    }
+  },
+  "dependencies": {
+    "nativescript-theme-core": "~1.0.4",
+    "tns-core-modules": "6.0.1"
+  },
+  "devDependencies": {
+    "eslint": "~5.9.0",
+    "fs-extra": "^0.30.0",
+    "markdown-snippet-injector": "^0.2.4",
+    "nativescript-dev-webpack": "1.0.0",
+    "tar.gz": "^1.0.7",
+    "tns-platform-declarations": "6.0.1",
+    "tslint": "5.11.0",
+    "typescript": "3.4.1"
+  },
+  "scripts": {
+    "lint": "eslint \"app/**/*.js\"",
+    "tslint": "tslint -p tsconfig.json",
+    "tsc": "tsc",
+    "build": "node scripts/build.js",
+    "archive": "node scripts/archive.js",
+    "inject": "mdinject --root=app --docsroot=dist/cookbook --sourceext=\".js|.ts|.css|.xml\" --snippettitles=\"JavaScript|TypeScript|CSS|XML\"",
+    "pretsc": "npm install",
+    "pretslint": "npm run tsc",
+    "prelint": "npm run tslint",
+    "prebuild": "npm run lint",
+    "postbuild": "npm run inject && npm run archive",
+    "e2e": "mocha --opts ./e2e/config/mocha.opts",
+    "update-webpack": "./node_modules/.bin/update-ns-webpack --deps --configs"
+  }
+}

.migration_backup/tsconfig.tns.json

@@ -0,0 +1,7 @@
+{
+    "extends": "./tsconfig",
+    "compilerOptions": {
+        "module": "es2015",
+        "moduleResolution": "node"
+    }
+}

app/App_Resources/Android/AndroidManifest.xml renamed to app/App_Resources/Android/src/main/AndroidManifest.xml

@@ -50,7 +50,9 @@ const navigationLinks = [
     new link("ImageSource", "ns-framework-modules-category/image-source/image-source-page"),
     new link("File System", "ns-framework-modules-category/file-system/file-system-page"),
     new link("Modal view", "ns-ui-category/modal-view/modal-view-examples-page"),
-    new link("XML Parser", "ns-framework-modules-category/xml-parser/xml-parser-page")
+    new link("XML Parser", "ns-framework-modules-category/xml-parser/xml-parser-page"),
+    new link("BottomNavigation", "ns-ui-widgets-category/bottom-navigation/bottom-navigation-page"),
+    new link("Tabs", "ns-ui-widgets-category/tabs/tabs-page")
 ];
 
 function onNavigatingTo(args) {

app/App_Resources/Android/drawable-hdpi/background.png renamed to app/App_Resources/Android/src/main/res/drawable-hdpi/background.png

@@ -23,5 +23,8 @@
         <!-- Using IcoMoon-Free.ttf -->
         <Label text="&#xe904;" class="ico"/>
         <!-- << icon-font-xml-def -->
+
+        <!-- Using font icons in Images requires the font:// prefix -->
+        <Image src="font://&#xf019;" class="far"></Image>
     </StackLayout>
 </Page>

app/App_Resources/Android/drawable-hdpi/icon.png renamed to app/App_Resources/Android/src/main/res/drawable-hdpi/icon.png

@@ -0,0 +1,28 @@
+const ListViewLinksModel = require("../../links-view-model");
+const link = require("../../link");
+const navigationLinks = [
+    new link("Usage", "ns-ui-widgets-category/bottom-navigation/usage/usage-page"),
+    new link("Theming", "ns-ui-widgets-category/bottom-navigation/theming/theming-page"),
+    new link("Events", "ns-ui-widgets-category/bottom-navigation/events/events-page"),
+    new link("Properties", "ns-ui-widgets-category/bottom-navigation/properties/properties-page"),
+    new link("Tips & Tricks", "ns-ui-widgets-category/bottom-navigation/tips-and-tricks/tips-and-tricks-page")
+];
+const navigationLinksTsc = [
+    new link("Usage", "ns-ui-widgets-category/bottom-navigation/usage/usage-ts-page"),
+    new link("Theming", "ns-ui-widgets-category/bottom-navigation/theming/theming-ts-page"),
+    new link("Events", "ns-ui-widgets-category/bottom-navigation/events/events-ts-page"),
+    new link("Properties", "ns-ui-widgets-category/bottom-navigation/properties/properties-ts-page"),
+    new link("Tips & Tricks", "ns-ui-widgets-category/bottom-navigation/tips-and-tricks/tips-and-tricks-ts-page")
+];
+
+function onNavigatingTo(args) {
+    const page = args.object;
+
+    page.bindingContext = new ListViewLinksModel({
+        links: navigationLinks,
+        actionBarTitle: args.context.title,
+        showTypeScriptExamples: false,
+        tsclinks: navigationLinksTsc
+    });
+}
+exports.onNavigatingTo = onNavigatingTo;

app/App_Resources/Android/drawable-hdpi/logo.png renamed to app/App_Resources/Android/src/main/res/drawable-hdpi/logo.png

@@ -0,0 +1,10 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" 
+	  xmlns:myList="components" 
+	  navigatingTo="onNavigatingTo" 
+	  navigatedTo="onNavigatedTo">
+    <Page.actionBar>
+		<ActionBar title="{{ actionBarTitle == null ? '' : actionBarTitle }}" icon="" class="action-bar"/>
+	</Page.actionBar>
+
+	<myList:list/>
+</Page>

app/App_Resources/Android/drawable-hdpi/menu.png renamed to app/App_Resources/Android/src/main/res/drawable-hdpi/menu.png

@@ -0,0 +1,27 @@
+const fromObject = require("tns-core-modules/data/observable").fromObject;
+
+exports.onNavigatingTo = (args) => {
+    const page = args.object;
+    const vm = fromObject({
+        selectedIndex: 1
+    });
+
+    page.bindingContext = vm;
+};
+
+// >> bottom-navigation-events-js
+exports.onBottomNavLoaded = (args) => {
+    // Using the loaded event to ger a reference to the BottomNavigation
+    const bottomNavigation = args.object;
+
+    // Using selectedIndexChanged
+    bottomNavigation.on("selectedIndexChanged", (args) => {
+        // args is of type SelectedIndexChangedEventData
+        const oldIndex = args.oldIndex;
+        const newIndex = args.newIndex;
+        console.log(`oldIndex: ${oldIndex}; newIndex: ${newIndex}`);
+
+        args.object.page.bindingContext.set("selectedIndex", newIndex);
+    });
+};
+// << bottom-navigation-events-js

app/App_Resources/Android/drawable-ldpi/background.png renamed to app/App_Resources/Android/src/main/res/drawable-ldpi/background.png

@@ -0,0 +1,28 @@
+<Page navigatingTo="onNavigatingTo">
+    <Page.actionBar>
+		<ActionBar title="BottomNavigation - Events"/>
+	</Page.actionBar>
+    <!-- >> bottom-navigation-events-xml -->
+    <BottomNavigation selectedIndex="1" loaded="onBottomNavLoaded">
+        <!-- The bottom tab UI is created via TabStrip (the containier) and TabStripItem (for each tab)-->
+        <TabStrip>
+            <TabStripItem title="Home" iconSource="res://baseline_home_black_24pt"></TabStripItem>
+            <TabStripItem title="Account" iconSource="res://baseline_account_balance_black_24pt"></TabStripItem>
+        </TabStrip>
+
+        <!-- The number of TabContentItem components should corespond to the number of TabStripItem components -->
+        <TabContentItem>
+            <GridLayout rows="*, *">
+                <Label row="0" text="Home Page" class="h2 text-center" color="orange"></Label>
+                <Label row="1" text="{{ 'newIndex: ' +  selectedIndex }}" class="h2 text-center"></Label>
+            </GridLayout>
+        </TabContentItem>
+        <TabContentItem>
+            <GridLayout rows="*, *">
+                 <Label row="0" text="Account Page" class="h2 text-center"></Label>
+                 <Label row="1" text="{{ 'newIndex: ' +  selectedIndex }}" class="h2 text-center"></Label>
+            </GridLayout>
+        </TabContentItem>
+    </BottomNavigation>
+    <!-- << bottom-navigation-events-xml -->
+</Page>

app/App_Resources/Android/drawable-ldpi/icon.png renamed to app/App_Resources/Android/src/main/res/drawable-ldpi/icon.png

@@ -0,0 +1,29 @@
+// >> bottom-navigation-events-tsc
+import { EventData, fromObject } from "tns-core-modules/data/observable";
+import { BottomNavigation, SelectedIndexChangedEventData } from "tns-core-modules/ui/bottom-navigation";
+// >> (hide)
+import { Page } from "tns-core-modules/ui/page";
+
+export function onNavigatingTo(args: EventData) {
+    const page = args.object as Page;
+    const vm = fromObject({
+        selectedIndex: 1
+    });
+
+    page.bindingContext = vm;
+}
+// << (hide)
+export function onBottomNavLoaded(args: EventData) {
+    // Using the loaded event to ger a reference to the BottomNavigation
+    const bottomNavigation = args.object as BottomNavigation;
+
+    // Using selectedIndexChanged
+    bottomNavigation.on(BottomNavigation.selectedIndexChangedEvent, (data: SelectedIndexChangedEventData) => {
+        const oldIndex: number = data.oldIndex;
+        const newIndex: number = data.newIndex;
+        console.log(`oldIndex: ${oldIndex}; newIndex: ${newIndex}`);
+
+        (<any>args.object).page.bindingContext.set("selectedIndex", newIndex);
+    });
+}
+// << bottom-navigation-events-tsc

app/App_Resources/Android/drawable-ldpi/logo.png renamed to app/App_Resources/Android/src/main/res/drawable-ldpi/logo.png

@@ -0,0 +1,29 @@
+<Page navigatingTo="onNavigatingTo">
+    <Page.actionBar>
+		<ActionBar title="BottomNavigation - Events"/>
+	</Page.actionBar>
+    <!-- >> bottom-navigation-events-xml -->
+    <BottomNavigation selectedIndex="1" loaded="onBottomNavLoaded">
+
+        <!-- The bottom tab UI is created via TabStrip (the containier) and TabStripItem (for each tab)-->
+        <TabStrip>
+            <TabStripItem title="Home" iconSource="res://baseline_home_black_24pt"></TabStripItem>
+            <TabStripItem title="Account" iconSource="res://baseline_account_balance_black_24pt"></TabStripItem>
+        </TabStrip>
+
+        <!-- The number of TabContentItem components should corespond to the number of TabStripItem components -->
+        <TabContentItem>
+            <GridLayout rows="*, *">
+                <Label row="0" text="Home Page" class="h2 text-center" color="orangered"></Label>
+                <Label row="1" text="{{ 'newIndex: ' +  selectedIndex }}" class="h2 text-center"></Label>
+            </GridLayout>
+        </TabContentItem>
+        <TabContentItem>
+            <GridLayout rows="*, *">
+                 <Label row="0" text="Account Page" class="h2 text-center"></Label>
+                 <Label row="1" text="{{ 'selectednewIndexIndex: ' +  selectedIndex }}" class="h2 text-center"></Label>
+            </GridLayout>
+        </TabContentItem>
+    </BottomNavigation>
+    <!-- << bottom-navigation-events-xml -->
+</Page>