diff --git a/.eslintrc b/.eslintrc index 12c201f..a6bbbc8 100644 --- a/.eslintrc +++ b/.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", diff --git a/app/App_Resources/iOS/baseline_account_balance_black_24pt@1x.png b/app/App_Resources/iOS/baseline_account_balance_black_24pt@1x.png new file mode 100755 index 0000000..384f82d Binary files /dev/null and b/app/App_Resources/iOS/baseline_account_balance_black_24pt@1x.png differ diff --git a/app/App_Resources/iOS/baseline_account_balance_black_24pt@2x.png b/app/App_Resources/iOS/baseline_account_balance_black_24pt@2x.png new file mode 100755 index 0000000..caac1ad Binary files /dev/null and b/app/App_Resources/iOS/baseline_account_balance_black_24pt@2x.png differ diff --git a/app/App_Resources/iOS/baseline_account_balance_black_24pt@3x.png b/app/App_Resources/iOS/baseline_account_balance_black_24pt@3x.png new file mode 100755 index 0000000..6fe8260 Binary files /dev/null and b/app/App_Resources/iOS/baseline_account_balance_black_24pt@3x.png differ diff --git a/app/App_Resources/iOS/baseline_home_black_24pt@1x.png b/app/App_Resources/iOS/baseline_home_black_24pt@1x.png new file mode 100755 index 0000000..1eba637 Binary files /dev/null and b/app/App_Resources/iOS/baseline_home_black_24pt@1x.png differ diff --git a/app/App_Resources/iOS/baseline_home_black_24pt@2x.png b/app/App_Resources/iOS/baseline_home_black_24pt@2x.png new file mode 100755 index 0000000..e20865a Binary files /dev/null and b/app/App_Resources/iOS/baseline_home_black_24pt@2x.png differ diff --git a/app/App_Resources/iOS/baseline_home_black_24pt@3x.png b/app/App_Resources/iOS/baseline_home_black_24pt@3x.png new file mode 100755 index 0000000..bcbeb19 Binary files /dev/null and b/app/App_Resources/iOS/baseline_home_black_24pt@3x.png differ diff --git a/app/App_Resources/iOS/baseline_search_black_24pt@1x.png b/app/App_Resources/iOS/baseline_search_black_24pt@1x.png new file mode 100755 index 0000000..87e74ff Binary files /dev/null and b/app/App_Resources/iOS/baseline_search_black_24pt@1x.png differ diff --git a/app/App_Resources/iOS/baseline_search_black_24pt@2x.png b/app/App_Resources/iOS/baseline_search_black_24pt@2x.png new file mode 100755 index 0000000..090acd4 Binary files /dev/null and b/app/App_Resources/iOS/baseline_search_black_24pt@2x.png differ diff --git a/app/App_Resources/iOS/baseline_search_black_24pt@3x.png b/app/App_Resources/iOS/baseline_search_black_24pt@3x.png new file mode 100755 index 0000000..96f68e2 Binary files /dev/null and b/app/App_Resources/iOS/baseline_search_black_24pt@3x.png differ diff --git a/app/ns-ui-widgets-category/bottom-navigation/basics/article.md b/app/ns-ui-widgets-category/bottom-navigation/basics/article.md deleted file mode 100644 index 21fd02c..0000000 --- a/app/ns-ui-widgets-category/bottom-navigation/basics/article.md +++ /dev/null @@ -1,5 +0,0 @@ -The `BottomNavigation` component contains two sub-components: -- The `TabStrip` which defines and rendres the bottom bar and its `TabStripItem` components. -- `TabContentItem` components which total number should be equal to the number of the tabs (`TabStripItem` components). Each `TabContentItem` acts as a container for your tab content. - - \ No newline at end of file diff --git a/app/ns-ui-widgets-category/bottom-navigation/basics/basics-page.js b/app/ns-ui-widgets-category/bottom-navigation/basics/basics-page.js deleted file mode 100644 index e036615..0000000 --- a/app/ns-ui-widgets-category/bottom-navigation/basics/basics-page.js +++ /dev/null @@ -1,4 +0,0 @@ -function onNavigatingTo(args) { - const page = args.object; -} -exports.onNavigatingTo = onNavigatingTo; diff --git a/app/ns-ui-widgets-category/bottom-navigation/basics/basics-page.xml b/app/ns-ui-widgets-category/bottom-navigation/basics/basics-page.xml deleted file mode 100644 index 7205eb7..0000000 --- a/app/ns-ui-widgets-category/bottom-navigation/basics/basics-page.xml +++ /dev/null @@ -1,31 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/app/ns-ui-widgets-category/bottom-navigation/basics/basics-ts-page.ts b/app/ns-ui-widgets-category/bottom-navigation/basics/basics-ts-page.ts deleted file mode 100644 index 70bc20b..0000000 --- a/app/ns-ui-widgets-category/bottom-navigation/basics/basics-ts-page.ts +++ /dev/null @@ -1,3 +0,0 @@ -export function onNavigatingTo(args) { - const page = args.object; -} \ No newline at end of file diff --git a/app/ns-ui-widgets-category/bottom-navigation/basics/basics-ts-page.xml b/app/ns-ui-widgets-category/bottom-navigation/basics/basics-ts-page.xml deleted file mode 100644 index d97ee09..0000000 --- a/app/ns-ui-widgets-category/bottom-navigation/basics/basics-ts-page.xml +++ /dev/null @@ -1,29 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/app/ns-ui-widgets-category/bottom-navigation/bottom-navigation-page.js b/app/ns-ui-widgets-category/bottom-navigation/bottom-navigation-page.js index 11ea5e8..569b2a0 100644 --- a/app/ns-ui-widgets-category/bottom-navigation/bottom-navigation-page.js +++ b/app/ns-ui-widgets-category/bottom-navigation/bottom-navigation-page.js @@ -1,16 +1,18 @@ const ListViewLinksModel = require("../../links-view-model"); const link = require("../../link"); const navigationLinks = [ - new link("Basics", "ns-ui-widgets-category/bottom-navigation/basics/basics-page") - // new link("Styling", "ns-ui-widgets-category/tab-view/styling/styling-page"), - // new link("Title Icon Fonts", "ns-ui-widgets-category/tab-view/title-icon-fonts/title-icon-fonts-page"), - // new link("Code Behind", "ns-ui-widgets-category/tab-view/code-behind/code-behind-page"), - // new link("Navigation", "ns-ui-widgets-category/tab-view/navigation/navigation") + new link("Usage", "ns-ui-widgets-category/bottom-navigation/usage/usage-page"), + new link("Usage", "ns-ui-widgets-category/bottom-navigation/styling/styling-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") ]; const navigationLinksTsc = [ - new link("Basics", "ns-ui-widgets-category/bottom-navigation/basics/basics-ts-page") - // new link("Navigation", "ns-ui-widgets-category/tab-view/navigation/navigation-ts-page") + new link("Usage", "ns-ui-widgets-category/bottom-navigation/usage/usage-ts-page"), + new link("Usage", "ns-ui-widgets-category/bottom-navigation/styling/styling-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-page") ]; + function onNavigatingTo(args) { const page = args.object; diff --git a/app/ns-ui-widgets-category/bottom-navigation/events/article.md b/app/ns-ui-widgets-category/bottom-navigation/events/article.md new file mode 100644 index 0000000..a34e2a9 --- /dev/null +++ b/app/ns-ui-widgets-category/bottom-navigation/events/article.md @@ -0,0 +1,6 @@ +- `selectedIndexChanged` - Event used to track the tabs interaction though the change of `selectedIndex` property of `BottomNavigation` component. The event data is of type `SelectedIndexChangedEventData` extends `EventData` with two new properties: + - `oldIndex` - Provides the old selected index. + - `newIndwex` - Provides the new selected index. + + + \ No newline at end of file diff --git a/app/ns-ui-widgets-category/bottom-navigation/events/events-page.js b/app/ns-ui-widgets-category/bottom-navigation/events/events-page.js new file mode 100644 index 0000000..f76d1cb --- /dev/null +++ b/app/ns-ui-widgets-category/bottom-navigation/events/events-page.js @@ -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 diff --git a/app/ns-ui-widgets-category/bottom-navigation/events/events-page.xml b/app/ns-ui-widgets-category/bottom-navigation/events/events-page.xml new file mode 100644 index 0000000..f486778 --- /dev/null +++ b/app/ns-ui-widgets-category/bottom-navigation/events/events-page.xml @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/app/ns-ui-widgets-category/bottom-navigation/events/events-ts-page.ts b/app/ns-ui-widgets-category/bottom-navigation/events/events-ts-page.ts new file mode 100644 index 0000000..53c444a --- /dev/null +++ b/app/ns-ui-widgets-category/bottom-navigation/events/events-ts-page.ts @@ -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 , (args: SelectedIndexChangedEventData) => { + const oldIndex: number = args.oldIndex; + const newIndex: number = args.newIndex; + console.log(`oldIndex: ${oldIndex}; newIndex: ${newIndex}`); + + (args.object).page.bindingContext.set("selectedIndex", newIndex); + }); +}; +// << bottom-navigation-events-tsc \ No newline at end of file diff --git a/app/ns-ui-widgets-category/bottom-navigation/events/events-ts-page.xml b/app/ns-ui-widgets-category/bottom-navigation/events/events-ts-page.xml new file mode 100644 index 0000000..054416e --- /dev/null +++ b/app/ns-ui-widgets-category/bottom-navigation/events/events-ts-page.xml @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/app/ns-ui-widgets-category/bottom-navigation/metadata.md b/app/ns-ui-widgets-category/bottom-navigation/metadata.md index 2df2829..877a767 100644 --- a/app/ns-ui-widgets-category/bottom-navigation/metadata.md +++ b/app/ns-ui-widgets-category/bottom-navigation/metadata.md @@ -4,3 +4,4 @@ description: The NativeScript's BottomNavigation component provides a simple way position: 416 slug: bottom-navigation --- +example-order: usage, styling, properties, events, tips-and-tricks \ No newline at end of file diff --git a/app/ns-ui-widgets-category/bottom-navigation/overview.md b/app/ns-ui-widgets-category/bottom-navigation/overview.md index a9ea677..8168ebc 100644 --- a/app/ns-ui-widgets-category/bottom-navigation/overview.md +++ b/app/ns-ui-widgets-category/bottom-navigation/overview.md @@ -1,4 +1,4 @@ - +> **Disclaimer:** The `BottomNavigation` component is currently in **Beta** version. The component is being actively developed - use [the tracking issue](https://github.com/NativeScript/NativeScript/issues/6967) for details about the ongoing implementation. The `BottomNavigation` component provides a simple way to navigate between different views while providing common UI for both iOS and Android platforms. The recommended scenario suitable for `BottomNavigation` is a high level navigaiton with 3 to 5 tabs each with separate function. For additional information and details about bottom navigation refer to [the Material Design guidelines](https://material.io/design/components/bottom-navigation.html#usage). @@ -12,27 +12,3 @@ Limitations - No navigation transitions. - No navigation gestures (e.g., swipe to navigate). - No content preloading. - - - - \ No newline at end of file diff --git a/app/ns-ui-widgets-category/bottom-navigation/properties/article.md b/app/ns-ui-widgets-category/bottom-navigation/properties/article.md new file mode 100644 index 0000000..7dba1fe --- /dev/null +++ b/app/ns-ui-widgets-category/bottom-navigation/properties/article.md @@ -0,0 +1,14 @@ + +- `items: Array;` - Gets or sets the items of the BottomNavigation. + +- `tabStrip: TabStrip;` - Gets or sets the tab strip of the BottomNavigation. + +- `selectedIndex: number;` - Gets or sets the selectedIndex of the BottomNavigation. + +- `android: any` /* android.view.View */; - Gets the native [android widget](http://developer.android.com/reference/android/support/v4/view/ViewPager.html) that represents the user interface for this component. Valid only when running on Android OS. + +- `ios: any` /* UITabBarController */; - Gets the native iOS [UITabBarController](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITabBarController_Class/) that represents the user interface for this component. Valid only when running on iOS. + + + + \ No newline at end of file diff --git a/app/ns-ui-widgets-category/bottom-navigation/properties/properties-page.js b/app/ns-ui-widgets-category/bottom-navigation/properties/properties-page.js new file mode 100644 index 0000000..1226d9e --- /dev/null +++ b/app/ns-ui-widgets-category/bottom-navigation/properties/properties-page.js @@ -0,0 +1,87 @@ +const Label = require("tns-core-modules/ui/label").Label; +const StackLayout = require("tns-core-modules/ui/layouts/stack-layout").StackLayout; +const Color = require("tns-core-modules/color/color").Color; +// >> bottom-navigation-events-js +const TabStrip = require("tns-core-modules/ui/bottom-navigation").TabStrip; +const TabStripItem = require("tns-core-modules/ui/bottom-navigation").TabStripItem; +const TabContentItem = require("tns-core-modules/ui/bottom-navigation").TabContentItem; + +exports.onBottomNavLoaded = (args) => { + // BottomNavigation + const bottomNav = args.object; + /* + Using the items property to assign array of TabContentItem components (with content) + Note: The number of TabContentItem components should be equal to the number of TabStripItem components + */ + const tabContentItemsArray = createTabsContentArray(); + bottomNav.items = tabContentItemsArray; + + /* + Using the tabStrip property to createa a TabStrip with multiple TabStripItems (tabs) + Note: The number of TabStripItem components should be equal to the number of TabContentItem components + */ + const tabStrip = createTabStrip(); + bottomNav.tabStrip = tabStrip; + + /* + Using the selectedIndex property + */ + bottomNav.selectedIndex = 1; + + /* + Using the nativeView property (correspnding to bottomNav.ios or bottomNav.android depending on the used platform) + */ + console.log("bottomNav.nativeView: ", bottomNav.nativeView); +}; +// << bottom-navigation-events-js + +function createTabStrip() { + // TabStrip + const tabStrip = new TabStrip(); + tabStrip.iosIconRenderingMode = "automatic"; // iOS only (automatic is the default value) + + // An array of TabStripItem + const tabStripItems = []; + for (let index = 0; index < 3; index++) { + // Each item is of type TabStripItem + const item = new TabStripItem(); + /* + Using TabStripItem title property + */ + item.title = `${index === 0 ? "Home" : (index === 1 ? "Account" : "Search")}`; + /* + Using TabStripItem title property + */ + item.iconSource = index === 0 ? "res://baseline_home_black_24pt" : (index === 1 ? "res://baseline_account_balance_black_24pt" : "res://baseline_search_black_24pt"); + tabStripItems.push(item); + } + tabStrip.items = tabStripItems; + + return tabStrip; +} + +function createTabsContentArray() { + // array of TabContentItem + const arr = []; + for (let index = 0; index < 3; index++) { + // item is of type TabContentItem + const item = new TabContentItem(); + // The createContent is a custom method that returns a StackLayout with a Label as a chils + item.view = createContent(index); + arr.push(item); + } + + return arr; +} + +function createContent(index) { + const label = new Label(); + label.text = `${index === 0 ? "Home" : (index === 1 ? "Account" : "Search")}`; + label.className = "h2 text-center"; + label.color = new Color("red"); + const stack = new StackLayout(); + stack.verticalAlignment = "middle"; + stack.addChild(label); + + return stack; +} diff --git a/app/ns-ui-widgets-category/bottom-navigation/properties/properties-page.xml b/app/ns-ui-widgets-category/bottom-navigation/properties/properties-page.xml new file mode 100644 index 0000000..00bec78 --- /dev/null +++ b/app/ns-ui-widgets-category/bottom-navigation/properties/properties-page.xml @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/app/ns-ui-widgets-category/bottom-navigation/properties/properties-ts-page.ts b/app/ns-ui-widgets-category/bottom-navigation/properties/properties-ts-page.ts new file mode 100644 index 0000000..e153035 --- /dev/null +++ b/app/ns-ui-widgets-category/bottom-navigation/properties/properties-ts-page.ts @@ -0,0 +1,77 @@ +import { Label } from "tns-core-modules/ui/label"; +import { StackLayout } from "tns-core-modules/ui/layouts/stack-layout"; +import { Color } from "tns-core-modules/color/color"; +// >> bottom-navigation-events-tsc +import { EventData } from "tns-core-modules/data/observable"; +import { BottomNavigation, TabStrip, TabStripItem, TabContentItem } from "tns-core-modules/ui/bottom-navigation"; + +export function onBottomNavLoaded(args: EventData) { + const bottomNav = args.object as BottomNavigation; + + /* + Using the items property to assign array of TabContentItem componentns + Note: The number of TabContentItem components should be equal to the number of TabStripItem components + */ + const tabContentItemsArray: Array = createTabsContentArray(); + bottomNav.items = tabContentItemsArray; + + /* + Using the tabStrip property to createa a TabStrip with multiple TabStripItems (tabs) + Note: The number of TabStripItem components should be equal to the number of TabContentItem components + */ + const tabStrip = createTabStrip(); + bottomNav.tabStrip = tabStrip; + + /* + Using the selectedIndex property + */ + bottomNav.selectedIndex = 1; + + console.log(bottomNav.nativeView); +} +// << bottom-navigation-events-tsc + +function createTabStrip() { + const tabStrip: TabStrip = new TabStrip(); + tabStrip.iosIconRenderingMode = "automatic"; // iOS only (automatic is the default value) + const tabStripItems: Array = []; + for (let index = 0; index < 3; index++) { + const item: TabStripItem = new TabStripItem(); + /* + Using TabStripItem title property + */ + item.title = `Tab ${index === 0 ? "res://baseline_home_black_24pt" : (index === 1 ? "res://baseline_account_balance_black_24pt" : "res://baseline_search_black_24pt" )}`; + /* + Using TabStripItem title property + */ + item.iconSource = index === 0 ? "res://baseline_home_black_24pt" : (index === 1 ? "res://baseline_account_balance_black_24pt" : "res://baseline_search_black_24pt" ); + tabStripItems.push(item); + } + tabStrip.items = tabStripItems; + + return tabStrip; +} + +function createTabsContentArray() { + const arr: Array = []; + for (let index = 0; index < 3; index++) { + const item: TabContentItem = new TabContentItem(); + // The createContent is a custom method that returns a StackLayout with a Label as a chils + item.view = createContent(index); + arr.push(item); + } + + return arr; +} + +function createContent(index: number) { + const label = new Label(); + label.text = `${index === 0 ? "Home" : (index === 1 ? "Account" : "Search")}`; + label.className = "h2 text-center"; + label.color = new Color("red"); + const stack = new StackLayout(); + stack.verticalAlignment = "middle"; + stack.addChild(label); + + return stack; +} \ No newline at end of file diff --git a/app/ns-ui-widgets-category/bottom-navigation/properties/properties-ts-page.xml b/app/ns-ui-widgets-category/bottom-navigation/properties/properties-ts-page.xml new file mode 100644 index 0000000..dd4a7ff --- /dev/null +++ b/app/ns-ui-widgets-category/bottom-navigation/properties/properties-ts-page.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/app/ns-ui-widgets-category/bottom-navigation/styling/article.md b/app/ns-ui-widgets-category/bottom-navigation/styling/article.md new file mode 100644 index 0000000..e69de29 diff --git a/app/ns-ui-widgets-category/bottom-navigation/styling/styling-page.xml b/app/ns-ui-widgets-category/bottom-navigation/styling/styling-page.xml new file mode 100644 index 0000000..ac4e642 --- /dev/null +++ b/app/ns-ui-widgets-category/bottom-navigation/styling/styling-page.xml @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/app/ns-ui-widgets-category/bottom-navigation/styling/styling-ts-page.xml b/app/ns-ui-widgets-category/bottom-navigation/styling/styling-ts-page.xml new file mode 100644 index 0000000..b452564 --- /dev/null +++ b/app/ns-ui-widgets-category/bottom-navigation/styling/styling-ts-page.xml @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/app/ns-ui-widgets-category/bottom-navigation/usage/article.md b/app/ns-ui-widgets-category/bottom-navigation/usage/article.md new file mode 100644 index 0000000..ad0dc20 --- /dev/null +++ b/app/ns-ui-widgets-category/bottom-navigation/usage/article.md @@ -0,0 +1,7 @@ +The `BottomNavigation` component contains two sub-components: +- The `TabStrip` which defines and rendres the bottom bar and its `TabStripItem` components. +- Multiple `TabContentItem` components which total number should be equal to the number of the tabs (`TabStripItem` components). Each `TabContentItem` acts as a container for your tab content. + + + +> **Note:** The number of `TabStripItem` components must be equal to the number of `tabContentItem` components. \ No newline at end of file diff --git a/app/ns-ui-widgets-category/bottom-navigation/usage/usage-page.xml b/app/ns-ui-widgets-category/bottom-navigation/usage/usage-page.xml new file mode 100644 index 0000000..ac4e642 --- /dev/null +++ b/app/ns-ui-widgets-category/bottom-navigation/usage/usage-page.xml @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/app/ns-ui-widgets-category/bottom-navigation/usage/usage-ts-page.xml b/app/ns-ui-widgets-category/bottom-navigation/usage/usage-ts-page.xml new file mode 100644 index 0000000..b452564 --- /dev/null +++ b/app/ns-ui-widgets-category/bottom-navigation/usage/usage-ts-page.xml @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/package.json b/package.json index 593e7f6..2b819bf 100644 --- a/package.json +++ b/package.json @@ -30,13 +30,13 @@ }, "dependencies": { "nativescript-theme-core": "~1.0.4", - "tns-core-modules": "next" + "tns-core-modules": "^6.0.0-rc-2019-07-03-223248-02" }, "devDependencies": { "eslint": "~5.9.0", "fs-extra": "^0.30.0", "markdown-snippet-injector": "^0.2.4", - "nativescript-dev-webpack": "next", + "nativescript-dev-webpack": "^1.0.0-next-2019-06-28-135258-05", "tar.gz": "^1.0.7", "tns-platform-declarations": "next", "tslint": "5.11.0", diff --git a/scripts/build.js b/scripts/build.js index e4e5cd0..8e096cb 100644 --- a/scripts/build.js +++ b/scripts/build.js @@ -33,15 +33,15 @@ function compareFiles(leftFile, rightFile) { // Example: // metadata.md - activity-indicator // example-order: styling, basics -function orderExamples (array, order, dirName) { +function orderExamples(array, order, dirName) { var customSortArray = []; - order.forEach(function(item){ - var index = array.indexOf(dirName+"/"+item+"/article.md"); - if(index >= 0){ + order.forEach(function (item) { + var index = array.indexOf(dirName + "/" + item + "/article.md"); + if (index >= 0) { customSortArray.push(array[index]); array.splice(index, 1); } - }); + }); array = array.sort(compareFiles); var resultArray = customSortArray.concat(array); return resultArray; @@ -84,7 +84,7 @@ function gatherArticles(cwd, appDir, articlesDir, jenkinsPosition) { var subDirPath = path.join(appDir, subDir); // Gather all component overviews in the subdirs - ns-ui-widgets-category, data-category - var components = glob.sync(subDirPath + "/*/overview.md").filter(function (file) { + var components = glob.sync(subDirPath + "/*/overview.md").filter(function (file) { return !path.parse(file).dir.endsWith(CATEGORY); }).sort(compareFiles); getComponents(cwd, components, currentDir, jenkinsPosition); @@ -106,116 +106,116 @@ function getComponents(cwd, components, currentDir, jenkinsPosition) { fs.mkdirSync(imgDir); } - components.forEach(function (overview) { - var componentDirName = path.dirname(overview); - var componentHeader = path.basename(componentDirName); - // Create the component article file, i.e. button.md - var componentArticleFile = path.join(currentDir, componentHeader + ".md"); - - var componentPrettyHeader = prettify(componentHeader); - - var componentArticlesOrder = []; - // Jenkins Header - // MetaData.md - var subDirPath = overview.replace("/overview.md", ""); - var pathExists = fs.existsSync(path.join(subDirPath, "metadata.md")); - - if (pathExists) { - var metadata = path.join(subDirPath, "metadata.md"); - var metadataContents = fs.readFileSync(metadata, { encoding: 'utf8' }); - var metadataSplit = metadataContents.split("---"); - fs.appendFileSync(componentArticleFile, "---\n", { encoding: 'utf8' }); - fs.appendFileSync(componentArticleFile, metadataSplit[1] , { encoding: 'utf8' }); - fs.appendFileSync(componentArticleFile, "---\n\n", { encoding: 'utf8' }); - - if(metadataSplit[2].indexOf("example-order") >=0){ - var exampleOrderString = metadataSplit[2].split(":"); - var orderString = exampleOrderString[1].replace(/\s/g,''); - componentArticlesOrder = orderString.split(","); - } - } - else { - fs.appendFileSync(componentArticleFile, "---\n", { encoding: 'utf8' }); - fs.appendFileSync(componentArticleFile, "title: " + componentPrettyHeader + "\n", { encoding: 'utf8' }); - fs.appendFileSync(componentArticleFile, "description: " + componentPrettyHeader + " SDK Examples" + "\n", { encoding: 'utf8' }); - fs.appendFileSync(componentArticleFile, "position: " + jenkinsPosition++ + "\n", { encoding: 'utf8' }); - fs.appendFileSync(componentArticleFile, "slug: " + componentHeader + "\n", { encoding: 'utf8' }); - fs.appendFileSync(componentArticleFile, "---\n\n", { encoding: 'utf8' }); + components.forEach(function (overview) { + var componentDirName = path.dirname(overview); + var componentHeader = path.basename(componentDirName); + // Create the component article file, i.e. button.md + var componentArticleFile = path.join(currentDir, componentHeader + ".md"); + + var componentPrettyHeader = prettify(componentHeader); + + var componentArticlesOrder = []; + // Jenkins Header + // MetaData.md + var subDirPath = overview.replace("/overview.md", ""); + var pathExists = fs.existsSync(path.join(subDirPath, "metadata.md")); + + if (pathExists) { + var metadata = path.join(subDirPath, "metadata.md"); + var metadataContents = fs.readFileSync(metadata, { encoding: 'utf8' }); + var metadataSplit = metadataContents.split("---"); + fs.appendFileSync(componentArticleFile, "---\n", { encoding: 'utf8' }); + fs.appendFileSync(componentArticleFile, metadataSplit[1], { encoding: 'utf8' }); + fs.appendFileSync(componentArticleFile, "---\n\n", { encoding: 'utf8' }); + + if (metadataSplit[2].indexOf("example-order") >= 0) { + var exampleOrderString = metadataSplit[2].split(":"); + var orderString = exampleOrderString[1].replace(/\s/g, ''); + componentArticlesOrder = orderString.split(","); } + } + else { + fs.appendFileSync(componentArticleFile, "---\n", { encoding: 'utf8' }); + fs.appendFileSync(componentArticleFile, "title: " + componentPrettyHeader + "\n", { encoding: 'utf8' }); + fs.appendFileSync(componentArticleFile, "description: " + componentPrettyHeader + " SDK Examples" + "\n", { encoding: 'utf8' }); + fs.appendFileSync(componentArticleFile, "position: " + jenkinsPosition++ + "\n", { encoding: 'utf8' }); + fs.appendFileSync(componentArticleFile, "slug: " + componentHeader + "\n", { encoding: 'utf8' }); + fs.appendFileSync(componentArticleFile, "---\n\n", { encoding: 'utf8' }); + } - // Component Markdown Header - fs.appendFileSync(componentArticleFile, "# " + componentPrettyHeader + "\n\n", {encoding:'utf8'}); + // Component Markdown Header + fs.appendFileSync(componentArticleFile, "# " + componentPrettyHeader + "\n\n", { encoding: 'utf8' }); - // Component Overview - var overviewContents = fs.readFileSync(overview, {encoding:'utf8'}); - fs.appendFileSync(componentArticleFile, overviewContents + "\n\n", {encoding:'utf8'}); + // Component Overview + var overviewContents = fs.readFileSync(overview, { encoding: 'utf8' }); + fs.appendFileSync(componentArticleFile, overviewContents + "\n\n", { encoding: 'utf8' }); - // Component Images - let componentImage = path.join(componentDirName, "image.png"); - if (fs.existsSync(componentImage)) { - let newImageFileName = componentHeader + "-" + "image.png"; - fs.copySync(componentImage, path.join(imgDir, newImageFileName)); + // Component Images + let componentImage = path.join(componentDirName, "image.png"); + if (fs.existsSync(componentImage)) { + let newImageFileName = componentHeader + "-" + "image.png"; + fs.copySync(componentImage, path.join(imgDir, newImageFileName)); - fs.appendFileSync(componentArticleFile, "![Image](img/" + newImageFileName + " \"Image\")\n\n", {encoding:'utf8'}); - } - var articles = []; - if(componentArticlesOrder.length >0){ - articles = orderExamples(glob.sync(componentDirName + "/**/article.md"), componentArticlesOrder, componentDirName); - } else{ - articles = glob.sync(componentDirName + "/**/article.md").sort(compareFiles); + fs.appendFileSync(componentArticleFile, "![Image](img/" + newImageFileName + " \"Image\")\n\n", { encoding: 'utf8' }); + } + var articles = []; + if (componentArticlesOrder.length > 0) { + articles = orderExamples(glob.sync(componentDirName + "/**/article.md"), componentArticlesOrder, componentDirName); + } else { + articles = glob.sync(componentDirName + "/**/article.md").sort(compareFiles); + } + + // Append each example to the big article file. + articles.forEach(function (article) { + var articleDirName = path.dirname(article); + var articleHeader = path.basename(articleDirName); + + // Header + var prettyArticleHeader = prettify(articleHeader); + prettyArticleHeader = prettyArticleHeader.replace(/Ios|IOS/, "iOS"); + fs.appendFileSync(componentArticleFile, "## " + prettyArticleHeader + "\n\n", { encoding: 'utf8' }); + + // Content + var articleContents = fs.readFileSync(article, { encoding: 'utf8' }); + fs.appendFileSync(componentArticleFile, articleContents + "\n\n", { encoding: 'utf8' }); + + // Article Images + let articleImage = path.join(articleDirName, "image.png"); + + if (fs.existsSync(articleImage)) { + let newArticleImageFileName = componentHeader + "-" + articleHeader + "-image.png"; + let joined = path.join(imgDir, newArticleImageFileName); + fs.copySync(articleImage, joined); + + fs.appendFileSync(componentArticleFile, "![Image](img/" + newArticleImageFileName + " \"Image\")\n\n", { encoding: 'utf8' }); } + let articleImages = glob.sync(articleDirName + "/*.png"); + articleImages.forEach(function (imagePath) { + let stringSplitResult = imagePath.split("/"); + let imageName = stringSplitResult[stringSplitResult.length - 1]; + let joined = path.join(imgDir, imageName); + fs.copySync(imagePath, joined); + }) + + // Links + var githubDirUrl = pjson.homepage + "/edit/master/" + path.relative(cwd, articleDirName).replace(/\\/g, "/"); - // Append each example to the big article file. - articles.forEach(function (article) { - var articleDirName = path.dirname(article); - var articleHeader = path.basename(articleDirName); - - // Header - var prettyArticleHeader = prettify(articleHeader); - prettyArticleHeader = prettyArticleHeader.replace(/Ios|IOS/, "iOS"); - fs.appendFileSync(componentArticleFile, "## " + prettyArticleHeader + "\n\n", {encoding:'utf8'}); - - // Content - var articleContents = fs.readFileSync(article, {encoding:'utf8'}); - fs.appendFileSync(componentArticleFile, articleContents + "\n\n", {encoding:'utf8'}); - - // Article Images - let articleImage = path.join(articleDirName, "image.png"); - - if (fs.existsSync(articleImage)) { - let newArticleImageFileName = componentHeader + "-" + articleHeader + "-image.png"; - let joined = path.join(imgDir, newArticleImageFileName); - fs.copySync(articleImage, joined); - - fs.appendFileSync(componentArticleFile, "![Image](img/" + newArticleImageFileName + " \"Image\")\n\n", {encoding:'utf8'}); - } - let articleImages = glob.sync(articleDirName + "/*.png"); - articleImages.forEach(function(imagePath){ - let stringSplitResult = imagePath.split("/"); - let imageName = stringSplitResult[stringSplitResult.length - 1]; - let joined = path.join(imgDir, imageName); - fs.copySync(imagePath, joined); - }) - - // Links - var githubDirUrl = pjson.homepage + "/edit/master/" + path.relative(cwd, articleDirName).replace(/\\/g, "/"); - - var linkToDocument = "[Improve this document](" + githubDirUrl + "/" + path.basename(article) + ")" - fs.appendFileSync(componentArticleFile, linkToDocument + "\n\n", {encoding:'utf8'}); - - var linkToSource = "[Demo Source](" + githubDirUrl + ")" - fs.appendFileSync(componentArticleFile, linkToSource + "\n\n", {encoding:'utf8'}); - - // Horizontal Line - fs.appendFileSync(componentArticleFile, "---\n\n", {encoding:'utf8'}); - }); - - // End.md - var subDirPath = overview.replace("/overview.md", ""); - var end = path.join(subDirPath, "end.md"); - var endContents = fs.readFileSync(end, {encoding:'utf8'}); - fs.appendFileSync(componentArticleFile, endContents + "\n\n", {encoding:'utf8'}); + var linkToDocument = "[Improve this document](" + githubDirUrl + "/" + path.basename(article) + ")" + fs.appendFileSync(componentArticleFile, linkToDocument + "\n\n", { encoding: 'utf8' }); + + var linkToSource = "[Demo Source](" + githubDirUrl + ")" + fs.appendFileSync(componentArticleFile, linkToSource + "\n\n", { encoding: 'utf8' }); + + // Horizontal Line + fs.appendFileSync(componentArticleFile, "---\n\n", { encoding: 'utf8' }); }); + + // End.md + var subDirPath = overview.replace("/overview.md", ""); + var end = path.join(subDirPath, "end.md"); + var endContents = fs.readFileSync(end, { encoding: 'utf8' }); + fs.appendFileSync(componentArticleFile, endContents + "\n\n", { encoding: 'utf8' }); + }); } build(); \ No newline at end of file