├── app ├── app.css ├── vendor-platform.ios.ts ├── onboarding │ ├── components │ │ ├── onboarding-slide │ │ │ ├── onboarding-slide.component.ios.scss │ │ │ ├── onboarding-slide.component.android.scss │ │ │ ├── onboarding-slide.component.ios.css │ │ │ ├── onboarding-slide.component.android.css │ │ │ ├── _onboarding-slide.common.scss │ │ │ ├── onboarding-slide.component.html │ │ │ └── onboarding-slide.component.ts │ │ └── onboarding │ │ │ ├── onboarding.component.html │ │ │ └── onboarding.component.ts │ ├── index.ts │ ├── interfaces │ │ └── OnboardingSlide.ts │ └── onboarding.module.ts ├── fonts │ ├── Roboto-Bold.ttf │ ├── Roboto-Medium.ttf │ └── Roboto-Regular.ttf ├── App_Resources │ ├── iOS │ │ ├── Assets.xcassets │ │ │ ├── Contents.json │ │ │ ├── AppIcon.appiconset │ │ │ │ ├── icon-29.png │ │ │ │ ├── icon-40.png │ │ │ │ ├── icon-76.png │ │ │ │ ├── icon-29@2x.png │ │ │ │ ├── icon-29@3x.png │ │ │ │ ├── icon-40@2x.png │ │ │ │ ├── icon-40@3x.png │ │ │ │ ├── icon-60@2x.png │ │ │ │ ├── icon-60@3x.png │ │ │ │ ├── icon-76@2x.png │ │ │ │ ├── icon-83.5@2x.png │ │ │ │ └── Contents.json │ │ │ ├── LaunchImage.launchimage │ │ │ │ ├── Default.png │ │ │ │ ├── Default@2x.png │ │ │ │ ├── Default-568h@2x.png │ │ │ │ ├── Default-667h@2x.png │ │ │ │ ├── Default-736h@3x.png │ │ │ │ ├── Default-Landscape.png │ │ │ │ ├── Default-Portrait.png │ │ │ │ ├── Default-Portrait@2x.png │ │ │ │ ├── Default-Landscape@2x.png │ │ │ │ ├── Default-Landscape@3x.png │ │ │ │ └── Contents.json │ │ │ ├── LaunchScreen.Center.imageset │ │ │ │ ├── LaunchScreen-Center.png │ │ │ │ ├── LaunchScreen-Center@2x.png │ │ │ │ └── Contents.json │ │ │ └── LaunchScreen.AspectFill.imageset │ │ │ │ ├── LaunchScreen-AspectFill.png │ │ │ │ ├── LaunchScreen-AspectFill@2x.png │ │ │ │ └── Contents.json │ │ ├── slide_1.png │ │ ├── slide_2.png │ │ ├── slide_3.png │ │ ├── slide_4.png │ │ ├── build.xcconfig │ │ ├── Info.plist │ │ └── LaunchScreen.storyboard │ └── Android │ │ ├── values-v21 │ │ ├── colors.xml │ │ └── styles.xml │ │ ├── drawable-hdpi │ │ ├── icon.png │ │ ├── logo.png │ │ ├── slide_1.png │ │ ├── slide_2.png │ │ ├── slide_3.png │ │ ├── slide_4.png │ │ └── background.png │ │ ├── drawable-ldpi │ │ ├── icon.png │ │ ├── logo.png │ │ ├── slide_1.png │ │ ├── slide_2.png │ │ ├── slide_3.png │ │ ├── slide_4.png │ │ └── background.png │ │ ├── drawable-mdpi │ │ ├── icon.png │ │ ├── logo.png │ │ ├── slide_1.png │ │ ├── slide_2.png │ │ ├── slide_3.png │ │ ├── slide_4.png │ │ └── background.png │ │ ├── drawable-xhdpi │ │ ├── icon.png │ │ ├── logo.png │ │ ├── slide_1.png │ │ ├── slide_2.png │ │ ├── slide_3.png │ │ ├── slide_4.png │ │ └── background.png │ │ ├── drawable-xxhdpi │ │ ├── icon.png │ │ ├── logo.png │ │ ├── slide_1.png │ │ ├── slide_2.png │ │ ├── slide_3.png │ │ ├── slide_4.png │ │ └── background.png │ │ ├── drawable-xxxhdpi │ │ ├── icon.png │ │ ├── logo.png │ │ ├── slide_1.png │ │ ├── slide_2.png │ │ ├── slide_3.png │ │ ├── slide_4.png │ │ └── background.png │ │ ├── values │ │ ├── colors.xml │ │ └── styles.xml │ │ ├── drawable-nodpi │ │ └── splash_screen.xml │ │ ├── app.gradle │ │ └── AndroidManifest.xml ├── app.component.html ├── package.json ├── app.component.ts ├── +home │ ├── components │ │ └── home │ │ │ ├── home.component.html │ │ │ └── home.component.ts │ ├── home.routing.ts │ └── home.module.ts ├── main.aot.ts ├── vendor.ts ├── vendor-platform.android.ts ├── app.scss ├── app.routing.ts ├── main.ts └── app.module.ts ├── .gitignore ├── tsconfig.json ├── LICENSE ├── tsconfig.aot.json ├── package.json ├── README.md └── webpack.config.js /app/app.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /app/vendor-platform.ios.ts: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | hooks/ 2 | node_modules/ 3 | platforms/ 4 | report/ 5 | .nsbuildinfo 6 | app/**/*.js 7 | npm-debug.log 8 | -------------------------------------------------------------------------------- /app/onboarding/components/onboarding-slide/onboarding-slide.component.ios.scss: -------------------------------------------------------------------------------- 1 | @import 'onboarding-slide.common'; 2 | -------------------------------------------------------------------------------- /app/onboarding/index.ts: -------------------------------------------------------------------------------- 1 | export * from './onboarding.module'; 2 | export * from './interfaces/OnboardingSlide'; 3 | -------------------------------------------------------------------------------- /app/fonts/Roboto-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sean-perkins/nativescript-onboarding/HEAD/app/fonts/Roboto-Bold.ttf -------------------------------------------------------------------------------- /app/fonts/Roboto-Medium.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sean-perkins/nativescript-onboarding/HEAD/app/fonts/Roboto-Medium.ttf -------------------------------------------------------------------------------- /app/fonts/Roboto-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sean-perkins/nativescript-onboarding/HEAD/app/fonts/Roboto-Regular.ttf -------------------------------------------------------------------------------- /app/App_Resources/iOS/Assets.xcassets/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "info" : { 3 | "version" : 1, 4 | "author" : "xcode" 5 | } 6 | } -------------------------------------------------------------------------------- /app/App_Resources/iOS/slide_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sean-perkins/nativescript-onboarding/HEAD/app/App_Resources/iOS/slide_1.png -------------------------------------------------------------------------------- /app/App_Resources/iOS/slide_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sean-perkins/nativescript-onboarding/HEAD/app/App_Resources/iOS/slide_2.png -------------------------------------------------------------------------------- /app/App_Resources/iOS/slide_3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sean-perkins/nativescript-onboarding/HEAD/app/App_Resources/iOS/slide_3.png -------------------------------------------------------------------------------- /app/App_Resources/iOS/slide_4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sean-perkins/nativescript-onboarding/HEAD/app/App_Resources/iOS/slide_4.png -------------------------------------------------------------------------------- /app/App_Resources/Android/values-v21/colors.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | #3d5afe 4 | -------------------------------------------------------------------------------- /app/App_Resources/Android/drawable-hdpi/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sean-perkins/nativescript-onboarding/HEAD/app/App_Resources/Android/drawable-hdpi/icon.png -------------------------------------------------------------------------------- /app/App_Resources/Android/drawable-hdpi/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sean-perkins/nativescript-onboarding/HEAD/app/App_Resources/Android/drawable-hdpi/logo.png -------------------------------------------------------------------------------- /app/App_Resources/Android/drawable-ldpi/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sean-perkins/nativescript-onboarding/HEAD/app/App_Resources/Android/drawable-ldpi/icon.png -------------------------------------------------------------------------------- /app/App_Resources/Android/drawable-ldpi/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sean-perkins/nativescript-onboarding/HEAD/app/App_Resources/Android/drawable-ldpi/logo.png -------------------------------------------------------------------------------- /app/App_Resources/Android/drawable-mdpi/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sean-perkins/nativescript-onboarding/HEAD/app/App_Resources/Android/drawable-mdpi/icon.png -------------------------------------------------------------------------------- /app/App_Resources/Android/drawable-mdpi/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sean-perkins/nativescript-onboarding/HEAD/app/App_Resources/Android/drawable-mdpi/logo.png -------------------------------------------------------------------------------- /app/App_Resources/Android/drawable-xhdpi/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sean-perkins/nativescript-onboarding/HEAD/app/App_Resources/Android/drawable-xhdpi/icon.png -------------------------------------------------------------------------------- /app/App_Resources/Android/drawable-xhdpi/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sean-perkins/nativescript-onboarding/HEAD/app/App_Resources/Android/drawable-xhdpi/logo.png -------------------------------------------------------------------------------- /app/App_Resources/Android/drawable-xxhdpi/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sean-perkins/nativescript-onboarding/HEAD/app/App_Resources/Android/drawable-xxhdpi/icon.png -------------------------------------------------------------------------------- /app/App_Resources/Android/drawable-xxhdpi/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sean-perkins/nativescript-onboarding/HEAD/app/App_Resources/Android/drawable-xxhdpi/logo.png -------------------------------------------------------------------------------- /app/App_Resources/Android/drawable-hdpi/slide_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sean-perkins/nativescript-onboarding/HEAD/app/App_Resources/Android/drawable-hdpi/slide_1.png -------------------------------------------------------------------------------- /app/App_Resources/Android/drawable-hdpi/slide_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sean-perkins/nativescript-onboarding/HEAD/app/App_Resources/Android/drawable-hdpi/slide_2.png -------------------------------------------------------------------------------- /app/App_Resources/Android/drawable-hdpi/slide_3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sean-perkins/nativescript-onboarding/HEAD/app/App_Resources/Android/drawable-hdpi/slide_3.png -------------------------------------------------------------------------------- /app/App_Resources/Android/drawable-hdpi/slide_4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sean-perkins/nativescript-onboarding/HEAD/app/App_Resources/Android/drawable-hdpi/slide_4.png -------------------------------------------------------------------------------- /app/App_Resources/Android/drawable-ldpi/slide_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sean-perkins/nativescript-onboarding/HEAD/app/App_Resources/Android/drawable-ldpi/slide_1.png -------------------------------------------------------------------------------- /app/App_Resources/Android/drawable-ldpi/slide_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sean-perkins/nativescript-onboarding/HEAD/app/App_Resources/Android/drawable-ldpi/slide_2.png -------------------------------------------------------------------------------- /app/App_Resources/Android/drawable-ldpi/slide_3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sean-perkins/nativescript-onboarding/HEAD/app/App_Resources/Android/drawable-ldpi/slide_3.png -------------------------------------------------------------------------------- /app/App_Resources/Android/drawable-ldpi/slide_4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sean-perkins/nativescript-onboarding/HEAD/app/App_Resources/Android/drawable-ldpi/slide_4.png -------------------------------------------------------------------------------- /app/App_Resources/Android/drawable-mdpi/slide_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sean-perkins/nativescript-onboarding/HEAD/app/App_Resources/Android/drawable-mdpi/slide_1.png -------------------------------------------------------------------------------- /app/App_Resources/Android/drawable-mdpi/slide_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sean-perkins/nativescript-onboarding/HEAD/app/App_Resources/Android/drawable-mdpi/slide_2.png -------------------------------------------------------------------------------- /app/App_Resources/Android/drawable-mdpi/slide_3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sean-perkins/nativescript-onboarding/HEAD/app/App_Resources/Android/drawable-mdpi/slide_3.png -------------------------------------------------------------------------------- /app/App_Resources/Android/drawable-mdpi/slide_4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sean-perkins/nativescript-onboarding/HEAD/app/App_Resources/Android/drawable-mdpi/slide_4.png -------------------------------------------------------------------------------- /app/App_Resources/Android/drawable-xhdpi/slide_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sean-perkins/nativescript-onboarding/HEAD/app/App_Resources/Android/drawable-xhdpi/slide_1.png -------------------------------------------------------------------------------- /app/App_Resources/Android/drawable-xhdpi/slide_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sean-perkins/nativescript-onboarding/HEAD/app/App_Resources/Android/drawable-xhdpi/slide_2.png -------------------------------------------------------------------------------- /app/App_Resources/Android/drawable-xhdpi/slide_3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sean-perkins/nativescript-onboarding/HEAD/app/App_Resources/Android/drawable-xhdpi/slide_3.png -------------------------------------------------------------------------------- /app/App_Resources/Android/drawable-xhdpi/slide_4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sean-perkins/nativescript-onboarding/HEAD/app/App_Resources/Android/drawable-xhdpi/slide_4.png -------------------------------------------------------------------------------- /app/App_Resources/Android/drawable-xxhdpi/slide_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sean-perkins/nativescript-onboarding/HEAD/app/App_Resources/Android/drawable-xxhdpi/slide_1.png -------------------------------------------------------------------------------- /app/App_Resources/Android/drawable-xxhdpi/slide_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sean-perkins/nativescript-onboarding/HEAD/app/App_Resources/Android/drawable-xxhdpi/slide_2.png -------------------------------------------------------------------------------- /app/App_Resources/Android/drawable-xxhdpi/slide_3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sean-perkins/nativescript-onboarding/HEAD/app/App_Resources/Android/drawable-xxhdpi/slide_3.png -------------------------------------------------------------------------------- /app/App_Resources/Android/drawable-xxhdpi/slide_4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sean-perkins/nativescript-onboarding/HEAD/app/App_Resources/Android/drawable-xxhdpi/slide_4.png -------------------------------------------------------------------------------- /app/App_Resources/Android/drawable-xxxhdpi/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sean-perkins/nativescript-onboarding/HEAD/app/App_Resources/Android/drawable-xxxhdpi/icon.png -------------------------------------------------------------------------------- /app/App_Resources/Android/drawable-xxxhdpi/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sean-perkins/nativescript-onboarding/HEAD/app/App_Resources/Android/drawable-xxxhdpi/logo.png -------------------------------------------------------------------------------- /app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /app/App_Resources/Android/drawable-hdpi/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sean-perkins/nativescript-onboarding/HEAD/app/App_Resources/Android/drawable-hdpi/background.png -------------------------------------------------------------------------------- /app/App_Resources/Android/drawable-ldpi/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sean-perkins/nativescript-onboarding/HEAD/app/App_Resources/Android/drawable-ldpi/background.png -------------------------------------------------------------------------------- /app/App_Resources/Android/drawable-mdpi/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sean-perkins/nativescript-onboarding/HEAD/app/App_Resources/Android/drawable-mdpi/background.png -------------------------------------------------------------------------------- /app/App_Resources/Android/drawable-xhdpi/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sean-perkins/nativescript-onboarding/HEAD/app/App_Resources/Android/drawable-xhdpi/background.png -------------------------------------------------------------------------------- /app/App_Resources/Android/drawable-xxxhdpi/slide_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sean-perkins/nativescript-onboarding/HEAD/app/App_Resources/Android/drawable-xxxhdpi/slide_1.png -------------------------------------------------------------------------------- /app/App_Resources/Android/drawable-xxxhdpi/slide_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sean-perkins/nativescript-onboarding/HEAD/app/App_Resources/Android/drawable-xxxhdpi/slide_2.png -------------------------------------------------------------------------------- /app/App_Resources/Android/drawable-xxxhdpi/slide_3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sean-perkins/nativescript-onboarding/HEAD/app/App_Resources/Android/drawable-xxxhdpi/slide_3.png -------------------------------------------------------------------------------- /app/App_Resources/Android/drawable-xxxhdpi/slide_4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sean-perkins/nativescript-onboarding/HEAD/app/App_Resources/Android/drawable-xxxhdpi/slide_4.png -------------------------------------------------------------------------------- /app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "android": { 3 | "v8Flags": "--expose_gc" 4 | }, 5 | "main": "main.js", 6 | "name": "tns-template-hello-world-ng", 7 | "version": "3.1.2" 8 | } -------------------------------------------------------------------------------- /app/App_Resources/Android/drawable-xxhdpi/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sean-perkins/nativescript-onboarding/HEAD/app/App_Resources/Android/drawable-xxhdpi/background.png -------------------------------------------------------------------------------- /app/App_Resources/Android/drawable-xxxhdpi/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sean-perkins/nativescript-onboarding/HEAD/app/App_Resources/Android/drawable-xxxhdpi/background.png -------------------------------------------------------------------------------- /app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-29.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sean-perkins/nativescript-onboarding/HEAD/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-29.png -------------------------------------------------------------------------------- /app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-40.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sean-perkins/nativescript-onboarding/HEAD/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-40.png -------------------------------------------------------------------------------- /app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-76.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sean-perkins/nativescript-onboarding/HEAD/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-76.png -------------------------------------------------------------------------------- /app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ns-app', 5 | templateUrl: 'app.component.html', 6 | }) 7 | 8 | export class AppComponent { } 9 | -------------------------------------------------------------------------------- /app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-29@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sean-perkins/nativescript-onboarding/HEAD/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-29@2x.png -------------------------------------------------------------------------------- /app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-29@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sean-perkins/nativescript-onboarding/HEAD/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-29@3x.png -------------------------------------------------------------------------------- /app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-40@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sean-perkins/nativescript-onboarding/HEAD/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-40@2x.png -------------------------------------------------------------------------------- /app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-40@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sean-perkins/nativescript-onboarding/HEAD/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-40@3x.png -------------------------------------------------------------------------------- /app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-60@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sean-perkins/nativescript-onboarding/HEAD/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-60@2x.png -------------------------------------------------------------------------------- /app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-60@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sean-perkins/nativescript-onboarding/HEAD/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-60@3x.png -------------------------------------------------------------------------------- /app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-76@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sean-perkins/nativescript-onboarding/HEAD/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-76@2x.png -------------------------------------------------------------------------------- /app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-83.5@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sean-perkins/nativescript-onboarding/HEAD/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-83.5@2x.png -------------------------------------------------------------------------------- /app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sean-perkins/nativescript-onboarding/HEAD/app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default.png -------------------------------------------------------------------------------- /app/+home/components/home/home.component.html: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sean-perkins/nativescript-onboarding/HEAD/app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default@2x.png -------------------------------------------------------------------------------- /app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default-568h@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sean-perkins/nativescript-onboarding/HEAD/app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default-568h@2x.png -------------------------------------------------------------------------------- /app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default-667h@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sean-perkins/nativescript-onboarding/HEAD/app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default-667h@2x.png -------------------------------------------------------------------------------- /app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default-736h@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sean-perkins/nativescript-onboarding/HEAD/app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default-736h@3x.png -------------------------------------------------------------------------------- /app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default-Landscape.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sean-perkins/nativescript-onboarding/HEAD/app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default-Landscape.png -------------------------------------------------------------------------------- /app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default-Portrait.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sean-perkins/nativescript-onboarding/HEAD/app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default-Portrait.png -------------------------------------------------------------------------------- /app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default-Portrait@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sean-perkins/nativescript-onboarding/HEAD/app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default-Portrait@2x.png -------------------------------------------------------------------------------- /app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default-Landscape@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sean-perkins/nativescript-onboarding/HEAD/app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default-Landscape@2x.png -------------------------------------------------------------------------------- /app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default-Landscape@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sean-perkins/nativescript-onboarding/HEAD/app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default-Landscape@3x.png -------------------------------------------------------------------------------- /app/App_Resources/iOS/Assets.xcassets/LaunchScreen.Center.imageset/LaunchScreen-Center.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sean-perkins/nativescript-onboarding/HEAD/app/App_Resources/iOS/Assets.xcassets/LaunchScreen.Center.imageset/LaunchScreen-Center.png -------------------------------------------------------------------------------- /app/App_Resources/iOS/Assets.xcassets/LaunchScreen.Center.imageset/LaunchScreen-Center@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sean-perkins/nativescript-onboarding/HEAD/app/App_Resources/iOS/Assets.xcassets/LaunchScreen.Center.imageset/LaunchScreen-Center@2x.png -------------------------------------------------------------------------------- /app/App_Resources/iOS/Assets.xcassets/LaunchScreen.AspectFill.imageset/LaunchScreen-AspectFill.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sean-perkins/nativescript-onboarding/HEAD/app/App_Resources/iOS/Assets.xcassets/LaunchScreen.AspectFill.imageset/LaunchScreen-AspectFill.png -------------------------------------------------------------------------------- /app/App_Resources/iOS/Assets.xcassets/LaunchScreen.AspectFill.imageset/LaunchScreen-AspectFill@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sean-perkins/nativescript-onboarding/HEAD/app/App_Resources/iOS/Assets.xcassets/LaunchScreen.AspectFill.imageset/LaunchScreen-AspectFill@2x.png -------------------------------------------------------------------------------- /app/App_Resources/Android/values/colors.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | #F5F5F5 4 | #757575 5 | #33B5E5 6 | #272734 7 | -------------------------------------------------------------------------------- /app/main.aot.ts: -------------------------------------------------------------------------------- 1 | // this import should be first in order to load some required settings (like globals and reflect-metadata) 2 | import { platformNativeScript } from "nativescript-angular/platform-static"; 3 | 4 | import { AppModuleNgFactory } from "./app.module.ngfactory"; 5 | 6 | platformNativeScript().bootstrapModuleFactory(AppModuleNgFactory); 7 | -------------------------------------------------------------------------------- /app/App_Resources/Android/drawable-nodpi/splash_screen.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /app/onboarding/components/onboarding-slide/onboarding-slide.component.android.scss: -------------------------------------------------------------------------------- 1 | @import 'onboarding-slide.common'; 2 | 3 | .slide { 4 | &-btn, &-btn-outline { 5 | font-size: 16; 6 | } 7 | &-btn-skip { 8 | padding-top: 40; 9 | } 10 | &-btn-outline { 11 | margin-top: 20; 12 | } 13 | &-image.shrink { 14 | width: 250; 15 | height: 250; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /app/vendor.ts: -------------------------------------------------------------------------------- 1 | require("./vendor-platform"); 2 | 3 | require("reflect-metadata"); 4 | require("@angular/platform-browser"); 5 | require("@angular/core"); 6 | require("@angular/common"); 7 | require("@angular/forms"); 8 | require("@angular/http"); 9 | require("@angular/router"); 10 | 11 | require("nativescript-angular/platform-static"); 12 | require("nativescript-angular/forms"); 13 | require("nativescript-angular/router"); 14 | -------------------------------------------------------------------------------- /app/App_Resources/Android/app.gradle: -------------------------------------------------------------------------------- 1 | // Add your native dependencies here: 2 | 3 | // Uncomment to add recyclerview-v7 dependency 4 | //dependencies { 5 | // compile 'com.android.support:recyclerview-v7:+' 6 | //} 7 | 8 | android { 9 | defaultConfig { 10 | generatedDensities = [] 11 | applicationId = "org.nativescript.nativescriptonboarding" 12 | } 13 | aaptOptions { 14 | additionalParameters "--no-version-vectors" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /app/vendor-platform.android.ts: -------------------------------------------------------------------------------- 1 | require("application"); 2 | if (!global["__snapshot"]) { 3 | // In case snapshot generation is enabled these modules will get into the bundle 4 | // but will not be required/evaluated. 5 | // The snapshot webpack plugin will add them to the tns-java-classes.js bundle file. 6 | // This way, they will be evaluated on app start as early as possible. 7 | require("ui/frame"); 8 | require("ui/frame/activity"); 9 | } 10 | -------------------------------------------------------------------------------- /app/onboarding/interfaces/OnboardingSlide.ts: -------------------------------------------------------------------------------- 1 | export interface OnboardingSlide { 2 | 3 | title?: string; 4 | 5 | description?: string; 6 | 7 | okButtonText?: string; 8 | 9 | skipButtonText?: string; 10 | 11 | imageUrl?: string; 12 | 13 | backgroundColor?: string; 14 | 15 | translateX?: number; 16 | 17 | translateY?: number; 18 | 19 | animation?: 'slide_up' | 'slide_down' | 'slide_left' | 'slide_right' | 'stack_over' | 'stack_under'; 20 | 21 | } 22 | -------------------------------------------------------------------------------- /app/app.scss: -------------------------------------------------------------------------------- 1 | /* 2 | In NativeScript, the app.css file is where you place CSS rules that 3 | you would like to apply to your entire application. Check out 4 | http://docs.nativescript.org/ui/styling for a full list of the CSS 5 | selectors and properties you can use to style UI components. 6 | 7 | /* 8 | In many cases you may want to use the NativeScript core theme instead 9 | of writing your own CSS rules. For a full list of class names in the theme 10 | refer to http://docs.nativescript.org/ui/theme. 11 | */ 12 | -------------------------------------------------------------------------------- /app/App_Resources/iOS/Assets.xcassets/LaunchScreen.Center.imageset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "idiom" : "universal", 5 | "filename" : "LaunchScreen-Center.png", 6 | "scale" : "1x" 7 | }, 8 | { 9 | "idiom" : "universal", 10 | "filename" : "LaunchScreen-Center@2x.png", 11 | "scale" : "2x" 12 | }, 13 | { 14 | "idiom" : "universal", 15 | "scale" : "3x" 16 | } 17 | ], 18 | "info" : { 19 | "version" : 1, 20 | "author" : "xcode" 21 | } 22 | } -------------------------------------------------------------------------------- /app/App_Resources/iOS/Assets.xcassets/LaunchScreen.AspectFill.imageset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "idiom" : "universal", 5 | "filename" : "LaunchScreen-AspectFill.png", 6 | "scale" : "1x" 7 | }, 8 | { 9 | "idiom" : "universal", 10 | "filename" : "LaunchScreen-AspectFill@2x.png", 11 | "scale" : "2x" 12 | }, 13 | { 14 | "idiom" : "universal", 15 | "scale" : "3x" 16 | } 17 | ], 18 | "info" : { 19 | "version" : 1, 20 | "author" : "xcode" 21 | } 22 | } -------------------------------------------------------------------------------- /app/App_Resources/iOS/build.xcconfig: -------------------------------------------------------------------------------- 1 | // You can add custom settings here 2 | // for example you can uncomment the following line to force distribution code signing 3 | // CODE_SIGN_IDENTITY = iPhone Distribution 4 | // To build for device with Xcode 8 you need to specify your development team. More info: https://developer.apple.com/library/prerelease/content/releasenotes/DeveloperTools/RN-Xcode/Introduction.html 5 | // DEVELOPMENT_TEAM = YOUR_TEAM_ID; 6 | ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon; 7 | ASSETCATALOG_COMPILER_LAUNCHIMAGE_NAME = LaunchImage; 8 | -------------------------------------------------------------------------------- /app/+home/home.routing.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from "@angular/core"; 2 | import { NativeScriptRouterModule } from 'nativescript-angular/router'; 3 | import { Routes } from '@angular/router'; 4 | import { HomeComponent } from './components/home/home.component'; 5 | 6 | const routes: Routes = [ 7 | { path: '', pathMatch: 'full', component: HomeComponent }, 8 | ]; 9 | 10 | @NgModule({ 11 | imports: [ 12 | NativeScriptRouterModule.forChild(routes) 13 | ], 14 | exports: [ 15 | NativeScriptRouterModule 16 | ] 17 | }) 18 | export class HomeRoutingModule { } 19 | -------------------------------------------------------------------------------- /app/+home/home.module.ts: -------------------------------------------------------------------------------- 1 | import { NO_ERRORS_SCHEMA } from '@angular/core'; 2 | import { NgModule } from '@angular/core'; 3 | import { HomeRoutingModule } from './home.routing'; 4 | import { HomeComponent } from './components/home/home.component'; 5 | import { OnboardingModule } from '../onboarding/onboarding.module'; 6 | 7 | @NgModule({ 8 | imports: [ 9 | HomeRoutingModule, 10 | OnboardingModule 11 | ], 12 | declarations: [ 13 | HomeComponent 14 | ], 15 | schemas: [ 16 | NO_ERRORS_SCHEMA 17 | ] 18 | }) 19 | export class HomeModule { } 20 | -------------------------------------------------------------------------------- /app/app.routing.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { NativeScriptRouterModule } from 'nativescript-angular/router'; 3 | import { Routes } from '@angular/router'; 4 | 5 | const routes: Routes = [ 6 | { 7 | path: '', 8 | redirectTo: '/home', 9 | pathMatch: 'full' 10 | }, 11 | { 12 | path: 'home', 13 | loadChildren: './+home/home.module#HomeModule' 14 | }, 15 | ]; 16 | 17 | @NgModule({ 18 | imports: [NativeScriptRouterModule.forRoot(routes)], 19 | exports: [NativeScriptRouterModule] 20 | }) 21 | export class AppRoutingModule { } 22 | -------------------------------------------------------------------------------- /app/onboarding/components/onboarding-slide/onboarding-slide.component.ios.css: -------------------------------------------------------------------------------- 1 | .slide-btn{border-color:transparent;border-width:1}.slide-btn,.slide-btn-outline{color:#fff;font-size:18;font-family:'Roboto';background-color:transparent}.slide-btn-skip{padding:20 20 0 0;font-weight:500;text-align:right}.slide-btn-outline{border-width:1;border-color:#fff;border-radius:20;padding:10 20;text-transform:uppercase;margin:0 60;height:40;font-weight:500;vertical-align:middle}.slide-title,.slide-description{color:#fff;text-align:center}.slide-title{font-size:24;margin:0 40 20 40;font-weight:700}.slide-description{font-size:17;margin:0 60;line-height:9}.slide-image{vertical-align:middle;horizontal-align:center;width:300;height:300} 2 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "commonjs", 4 | "target": "es5", 5 | "experimentalDecorators": true, 6 | "emitDecoratorMetadata": true, 7 | "noEmitHelpers": true, 8 | "noEmitOnError": true, 9 | "lib": [ 10 | "es6", 11 | "dom", 12 | "es2015.iterable" 13 | ], 14 | "baseUrl": ".", 15 | "paths": { 16 | "*": [ 17 | "./node_modules/tns-core-modules/*", 18 | "./node_modules/*" 19 | ] 20 | } 21 | }, 22 | "exclude": [ 23 | "node_modules", 24 | "platforms", 25 | "**/*.aot.ts" 26 | ] 27 | } -------------------------------------------------------------------------------- /app/onboarding/components/onboarding/onboarding.component.html: -------------------------------------------------------------------------------- 1 | 2 | 16 | 17 | -------------------------------------------------------------------------------- /app/onboarding/onboarding.module.ts: -------------------------------------------------------------------------------- 1 | import { NO_ERRORS_SCHEMA } from '@angular/core'; 2 | import { NgModule } from '@angular/core'; 3 | import { CommonModule } from '@angular/common'; 4 | import { OnboardingComponent } from './components/onboarding/onboarding.component'; 5 | import { OnboardingSlideComponent } from './components/onboarding-slide/onboarding-slide.component'; 6 | 7 | @NgModule({ 8 | imports: [ 9 | CommonModule 10 | ], 11 | declarations: [ 12 | OnboardingComponent, 13 | OnboardingSlideComponent 14 | ], 15 | exports: [ 16 | OnboardingComponent, 17 | OnboardingSlideComponent 18 | ], 19 | schemas: [ 20 | NO_ERRORS_SCHEMA 21 | ] 22 | }) 23 | export class OnboardingModule { } 24 | -------------------------------------------------------------------------------- /app/main.ts: -------------------------------------------------------------------------------- 1 | // this import should be first in order to load some required settings (like globals and reflect-metadata) 2 | import { platformNativeScriptDynamic } from "nativescript-angular/platform"; 3 | 4 | import { AppModule } from "./app.module"; 5 | 6 | // A traditional NativeScript application starts by initializing global objects, setting up global CSS rules, creating, and navigating to the main page. 7 | // Angular applications need to take care of their own initialization: modules, components, directives, routes, DI providers. 8 | // A NativeScript Angular app needs to make both paradigms work together, so we provide a wrapper platform object, platformNativeScriptDynamic, 9 | // that sets up a NativeScript application and can bootstrap the Angular framework. 10 | platformNativeScriptDynamic().bootstrapModule(AppModule); 11 | -------------------------------------------------------------------------------- /app/onboarding/components/onboarding-slide/onboarding-slide.component.android.css: -------------------------------------------------------------------------------- 1 | .slide-btn{border-color:transparent;border-width:1}.slide-btn,.slide-btn-outline{color:#fff;font-size:18;font-family:'Roboto';background-color:transparent}.slide-btn-skip{padding:20 20 0 0;font-weight:500;text-align:right}.slide-btn-outline{border-width:1;border-color:#fff;border-radius:20;padding:10 20;text-transform:uppercase;margin:0 60;height:40;font-weight:500;vertical-align:middle}.slide-title,.slide-description{color:#fff;text-align:center}.slide-title{font-size:24;margin:0 40 20 40;font-weight:700}.slide-description{font-size:17;margin:0 60;line-height:9}.slide-image{vertical-align:middle;horizontal-align:center;width:300;height:300}.slide-btn,.slide-btn-outline{font-size:16}.slide-btn-skip{padding-top:40}.slide-btn-outline{margin-top:20}.slide-image.shrink{width:250;height:250} 2 | -------------------------------------------------------------------------------- /app/App_Resources/Android/values-v21/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | 10 | 11 | 14 | 15 | 16 | 19 | 20 | 23 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License 2 | 3 | Copyright (c) 2017 Devonite 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule, NO_ERRORS_SCHEMA, NgModuleFactoryLoader } from "@angular/core"; 2 | import { NativeScriptModule } from "nativescript-angular/nativescript.module"; 3 | import { AppRoutingModule } from "./app.routing"; 4 | import { AppComponent } from "./app.component"; 5 | 6 | import { NSModuleFactoryLoader } from "nativescript-angular/router"; 7 | 8 | // Uncomment and add to NgModule imports if you need to use two-way binding 9 | // import { NativeScriptFormsModule } from "nativescript-angular/forms"; 10 | 11 | // Uncomment and add to NgModule imports if you need to use the HTTP wrapper 12 | // import { NativeScriptHttpModule } from "nativescript-angular/http"; 13 | 14 | @NgModule({ 15 | bootstrap: [ 16 | AppComponent 17 | ], 18 | imports: [ 19 | NativeScriptModule, 20 | AppRoutingModule 21 | ], 22 | declarations: [ 23 | AppComponent 24 | ], 25 | providers: [ 26 | { provide: NgModuleFactoryLoader, useClass: NSModuleFactoryLoader }, 27 | ], 28 | schemas: [ 29 | NO_ERRORS_SCHEMA 30 | ] 31 | }) 32 | /* 33 | Pass your application module to the bootstrapModule function located in main.ts to start your app 34 | */ 35 | export class AppModule { } 36 | -------------------------------------------------------------------------------- /app/onboarding/components/onboarding-slide/_onboarding-slide.common.scss: -------------------------------------------------------------------------------- 1 | .slide { 2 | &-btn { 3 | border-color: transparent; 4 | border-width: 1; 5 | } 6 | &-btn, &-btn-outline { 7 | color: #fff; 8 | font-size: 18; 9 | font-family: 'Roboto'; 10 | background-color: transparent; 11 | } 12 | &-btn-skip { 13 | padding: 20 20 0 0; 14 | font-weight: 500; 15 | text-align: right; 16 | } 17 | &-btn-outline { 18 | border-width: 1; 19 | border-color: #fff; 20 | border-radius: 20; 21 | padding: 10 20; 22 | text-transform: uppercase; 23 | margin: 0 60; 24 | height: 40; 25 | font-weight: 500; 26 | vertical-align: middle; 27 | } 28 | &-title, &-description { 29 | color: #fff; 30 | text-align: center; 31 | } 32 | &-title { 33 | font-size: 24; 34 | margin: 0 40 20 40; 35 | font-weight: 700; 36 | } 37 | &-description { 38 | font-size: 17; 39 | margin: 0 60; 40 | line-height: 9; 41 | } 42 | &-image { 43 | vertical-align: middle; 44 | horizontal-align: center; 45 | width: 300; 46 | height: 300; 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /app/onboarding/components/onboarding-slide/onboarding-slide.component.html: -------------------------------------------------------------------------------- 1 | 9 | 17 | 24 | 30 | 36 | 44 | 45 | -------------------------------------------------------------------------------- /app/App_Resources/Android/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | 12 | 13 | 16 | 17 | 18 | 19 | 20 | 21 | 27 | 28 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /app/App_Resources/iOS/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleDisplayName 8 | ${PRODUCT_NAME} 9 | CFBundleExecutable 10 | ${EXECUTABLE_NAME} 11 | CFBundleInfoDictionaryVersion 12 | 6.0 13 | CFBundleName 14 | ${PRODUCT_NAME} 15 | CFBundlePackageType 16 | APPL 17 | CFBundleShortVersionString 18 | 1.0 19 | CFBundleSignature 20 | ???? 21 | CFBundleVersion 22 | 1.0 23 | LSRequiresIPhoneOS 24 | 25 | UILaunchStoryboardName 26 | LaunchScreen 27 | UIRequiresFullScreen 28 | 29 | UIRequiredDeviceCapabilities 30 | 31 | armv7 32 | 33 | UISupportedInterfaceOrientations 34 | 35 | UIInterfaceOrientationPortrait 36 | UIInterfaceOrientationLandscapeLeft 37 | UIInterfaceOrientationLandscapeRight 38 | 39 | UISupportedInterfaceOrientations~ipad 40 | 41 | UIInterfaceOrientationPortrait 42 | UIInterfaceOrientationPortraitUpsideDown 43 | UIInterfaceOrientationLandscapeLeft 44 | UIInterfaceOrientationLandscapeRight 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /tsconfig.aot.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig", 3 | "compilerOptions": { 4 | "baseUrl": ".", 5 | "paths": { 6 | "application": ["node_modules/tns-core-modules/application"], 7 | "application-settings": ["node_modules/tns-core-modules/application-settings"], 8 | "camera": ["node_modules/tns-core-modules/camera"], 9 | "color": ["node_modules/tns-core-modules/color"], 10 | "connectivity": ["node_modules/tns-core-modules/connectivity"], 11 | "console": ["node_modules/tns-core-modules/console"], 12 | "data/*": ["node_modules/tns-core-modules/data/*"], 13 | "fetch": ["node_modules/tns-core-modules/fetch"], 14 | "file-system": ["node_modules/tns-core-modules/file-system"], 15 | "fps-meter": ["node_modules/tns-core-modules/fps-meter"], 16 | "globals": ["node_modules/tns-core-modules/globals"], 17 | "http": ["node_modules/tns-core-modules/http"], 18 | "image-asset": ["node_modules/tns-core-modules/image-asset"], 19 | "image-source": ["node_modules/tns-core-modules/image-source"], 20 | "location": ["node_modules/tns-core-modules/location"], 21 | "platform": ["node_modules/tns-core-modules/platform"], 22 | "text": ["node_modules/tns-core-modules/text"], 23 | "timer": ["node_modules/tns-core-modules/timer"], 24 | "trace": ["node_modules/tns-core-modules/trace"], 25 | "ui/*": ["node_modules/tns-core-modules/ui/*"], 26 | "utils/*": ["node_modules/tns-core-modules/utils/*"], 27 | "xhr": ["node_modules/tns-core-modules/xhr"], 28 | "xml": ["node_modules/tns-core-modules/xml"] 29 | }, 30 | "skipLibCheck": true 31 | }, 32 | "exclude": [ 33 | "node_modules", 34 | "platforms" 35 | ], 36 | "angularCompilerOptions": { 37 | "skipMetadataEmit": true, 38 | "genDir": "./" 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "size" : "29x29", 5 | "idiom" : "iphone", 6 | "filename" : "icon-29.png", 7 | "scale" : "1x" 8 | }, 9 | { 10 | "size" : "29x29", 11 | "idiom" : "iphone", 12 | "filename" : "icon-29@2x.png", 13 | "scale" : "2x" 14 | }, 15 | { 16 | "size" : "29x29", 17 | "idiom" : "iphone", 18 | "filename" : "icon-29@3x.png", 19 | "scale" : "3x" 20 | }, 21 | { 22 | "size" : "40x40", 23 | "idiom" : "iphone", 24 | "filename" : "icon-40@2x.png", 25 | "scale" : "2x" 26 | }, 27 | { 28 | "size" : "40x40", 29 | "idiom" : "iphone", 30 | "filename" : "icon-40@3x.png", 31 | "scale" : "3x" 32 | }, 33 | { 34 | "size" : "60x60", 35 | "idiom" : "iphone", 36 | "filename" : "icon-60@2x.png", 37 | "scale" : "2x" 38 | }, 39 | { 40 | "size" : "60x60", 41 | "idiom" : "iphone", 42 | "filename" : "icon-60@3x.png", 43 | "scale" : "3x" 44 | }, 45 | { 46 | "size" : "29x29", 47 | "idiom" : "ipad", 48 | "filename" : "icon-29.png", 49 | "scale" : "1x" 50 | }, 51 | { 52 | "size" : "29x29", 53 | "idiom" : "ipad", 54 | "filename" : "icon-29@2x.png", 55 | "scale" : "2x" 56 | }, 57 | { 58 | "size" : "40x40", 59 | "idiom" : "ipad", 60 | "filename" : "icon-40.png", 61 | "scale" : "1x" 62 | }, 63 | { 64 | "size" : "40x40", 65 | "idiom" : "ipad", 66 | "filename" : "icon-40@2x.png", 67 | "scale" : "2x" 68 | }, 69 | { 70 | "size" : "76x76", 71 | "idiom" : "ipad", 72 | "filename" : "icon-76.png", 73 | "scale" : "1x" 74 | }, 75 | { 76 | "size" : "76x76", 77 | "idiom" : "ipad", 78 | "filename" : "icon-76@2x.png", 79 | "scale" : "2x" 80 | }, 81 | { 82 | "size" : "83.5x83.5", 83 | "idiom" : "ipad", 84 | "filename" : "icon-83.5@2x.png", 85 | "scale" : "2x" 86 | } 87 | ], 88 | "info" : { 89 | "version" : 1, 90 | "author" : "xcode" 91 | } 92 | } -------------------------------------------------------------------------------- /app/App_Resources/Android/values/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 18 | 19 | 21 | 22 | 23 | 37 | 38 | 40 | 41 | 42 | 48 | 49 | 51 | 52 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "NativeScript OnBoarding Application", 3 | "license": "SEE LICENSE IN ", 4 | "readme": "NativeScript OnBoarding Application", 5 | "repository": "https://github.com/sean-perkins/nativescript-onboarding", 6 | "version": "1.0.0", 7 | "nativescript": { 8 | "id": "org.nativescript.nativescriptonboarding", 9 | "tns-ios": { 10 | "version": "3.2.0" 11 | }, 12 | "tns-android": { 13 | "version": "3.2.0" 14 | } 15 | }, 16 | "dependencies": { 17 | "@angular/animations": "~4.2.0", 18 | "@angular/common": "~4.2.0", 19 | "@angular/compiler": "~4.2.0", 20 | "@angular/core": "~4.2.0", 21 | "@angular/forms": "~4.2.0", 22 | "@angular/http": "~4.2.0", 23 | "@angular/platform-browser": "~4.2.0", 24 | "@angular/router": "~4.2.0", 25 | "nativescript-angular": "~4.2.0", 26 | "reflect-metadata": "~0.1.8", 27 | "rxjs": "~5.4.2", 28 | "tns-core-modules": "~3.1.0", 29 | "zone.js": "~0.8.2" 30 | }, 31 | "devDependencies": { 32 | "@angular/compiler-cli": "~4.2.0", 33 | "@ngtools/webpack": "~1.6.0", 34 | "babel-traverse": "6.26.0", 35 | "babel-types": "6.26.0", 36 | "babylon": "6.18.0", 37 | "copy-webpack-plugin": "~4.0.1", 38 | "extract-text-webpack-plugin": "~3.0.0", 39 | "lazy": "1.0.11", 40 | "nativescript-css-loader": "~0.26.0", 41 | "nativescript-dev-sass": "^1.3.2", 42 | "nativescript-dev-typescript": "~0.5.0", 43 | "nativescript-dev-webpack": "^0.8.0", 44 | "nativescript-worker-loader": "~0.8.1", 45 | "raw-loader": "~0.5.1", 46 | "resolve-url-loader": "~2.1.0", 47 | "typescript": "~2.4.2", 48 | "webpack": "~3.2.0", 49 | "webpack-bundle-analyzer": "^2.8.2", 50 | "webpack-sources": "~1.0.1" 51 | }, 52 | "scripts": { 53 | "ns-bundle": "ns-bundle", 54 | "start-android-bundle": "npm run ns-bundle --android --run-app", 55 | "start-ios-bundle": "npm run ns-bundle --ios --run-app", 56 | "build-android-bundle": "npm run ns-bundle --android --build-app", 57 | "build-ios-bundle": "npm run ns-bundle --ios --build-app", 58 | "publish-ios-bundle": "npm run ns-bundle --ios --publish-app", 59 | "generate-android-snapshot": "generate-android-snapshot --targetArchs arm,arm64,ia32 --install" 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /app/+home/components/home/home.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { OnboardingSlide } from '../../../onboarding'; 3 | 4 | import * as dialogs from 'tns-core-modules/ui/dialogs'; 5 | 6 | @Component({ 7 | moduleId: module.id, 8 | selector: 'app-home', 9 | templateUrl: './home.component.html' 10 | }) 11 | export class HomeComponent implements OnInit { 12 | 13 | slides: OnboardingSlide[] = []; 14 | 15 | ngOnInit() { 16 | this.slides = [ 17 | { 18 | title: 'Find out if college is a right choice for you', 19 | description: 'College is a good investment for most people, but is it a good investment for you?', 20 | okButtonText: 'Continue', 21 | skipButtonText: 'Skip', 22 | backgroundColor: '#8A63B3', 23 | imageUrl: 'res://slide_1', 24 | animation: 'slide_left' 25 | }, 26 | { 27 | title: 'We can help you to find your own university', 28 | description: 'Choosing the right college can seem overwhelming! Take our quiz to narrow down the options.', 29 | okButtonText: 'Continue', 30 | skipButtonText: 'Skip', 31 | backgroundColor: '#41A9CC', 32 | imageUrl: 'res://slide_2', 33 | animation: 'slide_up' 34 | }, 35 | { 36 | title: 'See how you compare with other students', 37 | description: 'Explore our test scores, which allows you to compare your performance to other students.', 38 | okButtonText: 'Continue', 39 | skipButtonText: 'Skip', 40 | backgroundColor: '#E1615D', 41 | imageUrl: 'res://slide_3', 42 | animation: 'slide_down' 43 | }, 44 | { 45 | title: 'Expert corner', 46 | description: 'Get professional consultance from our experts.', 47 | okButtonText: 'I GOT IT!', 48 | skipButtonText: 'Skip', 49 | backgroundColor: '#FDBD57', 50 | imageUrl: 'res://slide_4', 51 | animation: 'slide_right' 52 | } 53 | ]; 54 | } 55 | 56 | finish(): void { 57 | dialogs.alert('You finished the onboarding!'); 58 | } 59 | 60 | } 61 | -------------------------------------------------------------------------------- /app/onboarding/components/onboarding-slide/onboarding-slide.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input, Output, EventEmitter, AfterViewInit, OnChanges, SimpleChanges, ViewChild, ElementRef } from '@angular/core'; 2 | import { Page } from 'tns-core-modules/ui/page/page'; 3 | import { Color } from 'tns-core-modules/color/color'; 4 | import * as gestures from 'tns-core-modules/ui/gestures'; 5 | import * as platform from 'tns-core-modules/platform'; 6 | import * as app from 'tns-core-modules/application'; 7 | 8 | @Component({ 9 | moduleId: module.id, 10 | selector: 'ns-onboarding-slide', 11 | templateUrl: './onboarding-slide.component.html', 12 | styleUrls: ['./onboarding-slide.component.css'] 13 | }) 14 | export class OnboardingSlideComponent implements OnChanges, AfterViewInit { 15 | 16 | @Input() okButtonText: string; 17 | @Input() skipButtonText: string; 18 | 19 | @Input() title: string; 20 | @Input() description: string; 21 | @Input() imageUrl: string; 22 | 23 | @Input() backgroundColor = '#8A63B3'; 24 | @Input() visible = true; 25 | 26 | @Input() translateY = 0; 27 | @Input() translateX = 0; 28 | @Input() interactive = true; 29 | @Input() hasNext = false; 30 | 31 | @Output() onSkip: EventEmitter = new EventEmitter(); 32 | @Output() onContinue: EventEmitter = new EventEmitter(); 33 | 34 | @ViewChild('slide') slideEl: ElementRef; 35 | @ViewChild('continueBtn') continueBtn: ElementRef; 36 | @ViewChild('skipBtn') skipBtn: ElementRef; 37 | 38 | constructor(private page: Page) { 39 | page.actionBarHidden = true; 40 | } 41 | 42 | ngAfterViewInit() { 43 | if (platform.isAndroid) { 44 | this.animateBtn(this.continueBtn.nativeElement); 45 | if (this.skipBtn) { 46 | this.animateBtn(this.skipBtn.nativeElement); 47 | } 48 | } 49 | } 50 | 51 | ngOnChanges(changes: SimpleChanges) { 52 | const visibility = changes.visible; 53 | if (visibility && visibility.currentValue === true) { 54 | this.setPageBackground(); 55 | } 56 | } 57 | 58 | get navBarHeight(): number { 59 | if (app.android) { 60 | let result = 0; 61 | const resourceId = app.android.currentContext 62 | .getResources() 63 | .getIdentifier('navigation_bar_height', 'dimen', 'android'); 64 | if (resourceId > 0) { 65 | result = app.android.currentContext 66 | .getResources() 67 | .getDimensionPixelSize(resourceId); 68 | result = 69 | result / 70 | app.android.currentContext.getResources().getDisplayMetrics().density; 71 | } 72 | return result; 73 | } 74 | return 0; 75 | } 76 | 77 | private animateBtn(el: any) { 78 | el.on('tap', (args: gestures.GestureEventData) => { 79 | el.animate({ 80 | opacity: 0.5, 81 | duration: 200 82 | }).then(() => el.animate({ opacity: 1, duration: 200 })); 83 | }); 84 | } 85 | 86 | private setPageBackground(): void { 87 | this.page.backgroundColor = new Color(this.backgroundColor); 88 | } 89 | 90 | } 91 | -------------------------------------------------------------------------------- /app/App_Resources/iOS/LaunchScreen.storyboard: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "extent" : "full-screen", 5 | "idiom" : "iphone", 6 | "subtype" : "736h", 7 | "filename" : "Default-736h@3x.png", 8 | "minimum-system-version" : "8.0", 9 | "orientation" : "portrait", 10 | "scale" : "3x" 11 | }, 12 | { 13 | "extent" : "full-screen", 14 | "idiom" : "iphone", 15 | "subtype" : "736h", 16 | "filename" : "Default-Landscape@3x.png", 17 | "minimum-system-version" : "8.0", 18 | "orientation" : "landscape", 19 | "scale" : "3x" 20 | }, 21 | { 22 | "extent" : "full-screen", 23 | "idiom" : "iphone", 24 | "subtype" : "667h", 25 | "filename" : "Default-667h@2x.png", 26 | "minimum-system-version" : "8.0", 27 | "orientation" : "portrait", 28 | "scale" : "2x" 29 | }, 30 | { 31 | "orientation" : "portrait", 32 | "idiom" : "iphone", 33 | "filename" : "Default@2x.png", 34 | "extent" : "full-screen", 35 | "minimum-system-version" : "7.0", 36 | "scale" : "2x" 37 | }, 38 | { 39 | "extent" : "full-screen", 40 | "idiom" : "iphone", 41 | "subtype" : "retina4", 42 | "filename" : "Default-568h@2x.png", 43 | "minimum-system-version" : "7.0", 44 | "orientation" : "portrait", 45 | "scale" : "2x" 46 | }, 47 | { 48 | "orientation" : "portrait", 49 | "idiom" : "ipad", 50 | "filename" : "Default-Portrait.png", 51 | "extent" : "full-screen", 52 | "minimum-system-version" : "7.0", 53 | "scale" : "1x" 54 | }, 55 | { 56 | "orientation" : "landscape", 57 | "idiom" : "ipad", 58 | "filename" : "Default-Landscape.png", 59 | "extent" : "full-screen", 60 | "minimum-system-version" : "7.0", 61 | "scale" : "1x" 62 | }, 63 | { 64 | "orientation" : "portrait", 65 | "idiom" : "ipad", 66 | "filename" : "Default-Portrait@2x.png", 67 | "extent" : "full-screen", 68 | "minimum-system-version" : "7.0", 69 | "scale" : "2x" 70 | }, 71 | { 72 | "orientation" : "landscape", 73 | "idiom" : "ipad", 74 | "filename" : "Default-Landscape@2x.png", 75 | "extent" : "full-screen", 76 | "minimum-system-version" : "7.0", 77 | "scale" : "2x" 78 | }, 79 | { 80 | "orientation" : "portrait", 81 | "idiom" : "iphone", 82 | "filename" : "Default.png", 83 | "extent" : "full-screen", 84 | "scale" : "1x" 85 | }, 86 | { 87 | "orientation" : "portrait", 88 | "idiom" : "iphone", 89 | "filename" : "Default@2x.png", 90 | "extent" : "full-screen", 91 | "scale" : "2x" 92 | }, 93 | { 94 | "orientation" : "portrait", 95 | "idiom" : "iphone", 96 | "filename" : "Default-568h@2x.png", 97 | "extent" : "full-screen", 98 | "subtype" : "retina4", 99 | "scale" : "2x" 100 | }, 101 | { 102 | "orientation" : "portrait", 103 | "idiom" : "ipad", 104 | "extent" : "to-status-bar", 105 | "scale" : "1x" 106 | }, 107 | { 108 | "orientation" : "portrait", 109 | "idiom" : "ipad", 110 | "filename" : "Default-Portrait.png", 111 | "extent" : "full-screen", 112 | "scale" : "1x" 113 | }, 114 | { 115 | "orientation" : "landscape", 116 | "idiom" : "ipad", 117 | "extent" : "to-status-bar", 118 | "scale" : "1x" 119 | }, 120 | { 121 | "orientation" : "landscape", 122 | "idiom" : "ipad", 123 | "filename" : "Default-Landscape.png", 124 | "extent" : "full-screen", 125 | "scale" : "1x" 126 | }, 127 | { 128 | "orientation" : "portrait", 129 | "idiom" : "ipad", 130 | "extent" : "to-status-bar", 131 | "scale" : "2x" 132 | }, 133 | { 134 | "orientation" : "portrait", 135 | "idiom" : "ipad", 136 | "filename" : "Default-Portrait@2x.png", 137 | "extent" : "full-screen", 138 | "scale" : "2x" 139 | }, 140 | { 141 | "orientation" : "landscape", 142 | "idiom" : "ipad", 143 | "extent" : "to-status-bar", 144 | "scale" : "2x" 145 | }, 146 | { 147 | "orientation" : "landscape", 148 | "idiom" : "ipad", 149 | "filename" : "Default-Landscape@2x.png", 150 | "extent" : "full-screen", 151 | "scale" : "2x" 152 | } 153 | ], 154 | "info" : { 155 | "version" : 1, 156 | "author" : "xcode" 157 | } 158 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # NativeScript Onboarding App 2 | Instruct your users with a beautiful interface that quickly showcases how to use your application. On-board new users to your NativeScript application with ease. 3 | 4 | --- 5 | 6 | **Current Version**: 1.0.0 7 | 8 | **Release Date**: 09/30/2017 9 | 10 | **Last Updated**: 09/30/2017 11 | 12 | **Author**: Sean Perkins _()_, Devonite 13 | 14 | --- 15 | 16 | ### Features 17 | - Supports iOS and Android 18 | - Pre-built Animations (`slide_up`, `slide_down`, `slide_left`, `slide_right`, `stack_over`, `stack_under`) 19 | - Configurable Properties for: background color, title, description, skip button text, continue button text and image url. 20 | 21 | ### Demo Images 22 | 23 | |iOS|Android| 24 | |:---:|:---:| 25 | ||| 26 | 27 | ### Requirements 28 | 1. `nativescript-angular@~4.2.0` 29 | 2. `tns-core-modules@3.1.0` 30 | 3. Underscore named image paths (for Android) 31 | 32 | ## Integrating Into Your Application 33 | You can easily integrate this module and functionality into your existing application by following these instructions: 34 | 35 | 1. Copy the fonts located in `app/fonts` into your project. 36 | 2. Copy the `onboarding` folder and contents into your project. 37 | 3. Import `OnboardingModule` into your project's feature module. 38 | 4. Copy over any asset images desired into your `App_Resources` directories for each platform. 39 | 40 | ### Recommended Component Usage 41 | 42 | _example.component.html_ 43 | 44 | ```html 45 | 48 | ``` 49 | 50 | _example.component.ts_ 51 | 52 | ```js 53 | slides = [ 54 | { 55 | title: 'Example Title', 56 | description: 'Example Description', 57 | okButtonText: 'Continue', 58 | skipButtonText: 'Skip', 59 | backgroundColor: '#8A63B3', 60 | imageUrl: 'res://slide_1', 61 | animation: 'slide_left' 62 | } 63 | ]; 64 | ``` 65 | 66 | ### Experimental Component Usage 67 | 68 | This is not a recommended usage, but you may use the individual slide component directly. Animations are not expected to work with this method. You may try manage the `translateX` and `translateY` properties directly. 69 | 70 | _example.component.html_ 71 | 72 | ```html 73 | 83 | 84 | ``` 85 | 86 | ## Animations 87 | 88 | There are **6** supported animation types that can be passed as an option to the onboarding component. 89 | 90 | 1. `slide_up` - The slides will animate from the bottom towards the top. 91 | 2. `slide_down` - The slides will animate from the top towards the bottom. 92 | 3. `slide_left` - The slides will animate from the right towards the left. 93 | 4. `slide_right` - The slides will animate from the left towards the right. 94 | 5. `stack_over` - The current slide will animate down while the next slide will animate down over. 95 | 6. `stack_under` - The current slide will animate up while the next slide will animate under from the bottom. 96 | 97 | **Note**: For `slide_left` and `slide_right` animations, the status bar background will animate cleanly across. If desired, you can disable the transparent status bar by passing `disableStatusBar` as false to the `ns-onboarding` component. 98 | 99 | ```html 100 | 103 | ``` 104 | 105 | ### Event Hooks 106 | 1. `ns-onboarding` 107 | 108 | This component has two hooks for `(onSkip)` and `(onFinish)`. 109 | 110 | onSkip - When the user selects the skip option. The `$event` object contains the slide that was skipped. 111 | 112 | onFinish - When the user has completed all slides or skipped the onboarding. The `$event` object contains the boolean value of if the onboarding was skipped. 113 | 114 | ## Example App 115 | 116 | The example app includes the appropriate configuration to handle both `SASS` stylesheets as well as webpack builds. 117 | 118 | To get started, install all needed NPM dependencies: 119 | 120 | - `npm install` 121 | 122 | You may leverage the stock NativeScript CLI commands to run the example app: 123 | 124 | - `tns run ios` 125 | - `tns run android` 126 | 127 | To leverage the webpack build, you may run: 128 | 129 | - `npm run start-ios-bundle` 130 | - `npm run start-android-bundle` 131 | 132 | Please refer to the respective repositories and/or the `package.json` for additional CLI commands. 133 | 134 | 135 | ### Contributors 136 | 137 | [Sean perkins](https://github.com/sean-perkins) | 138 | :---: 139 | |[Sean Perkins](https://github.com/sean-perkins)| 140 | 141 | 142 | ### Image Rights 143 | 144 | - Icon images are a snapshot of animated sequences created by [Virgil Pana](https://dribbble.com/virgilpana). 145 | -------------------------------------------------------------------------------- /app/onboarding/components/onboarding/onboarding.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input, Output, EventEmitter, ViewChild, ElementRef, OnInit } from '@angular/core'; 2 | import { OnboardingSlide } from '../../interfaces/OnboardingSlide'; 3 | import { OnboardingSlideComponent } from '../onboarding-slide/onboarding-slide.component'; 4 | import * as platform from 'tns-core-modules/platform'; 5 | import { Page } from 'tns-core-modules/ui/page/page'; 6 | 7 | @Component({ 8 | moduleId: module.id, 9 | selector: 'ns-onboarding', 10 | templateUrl: './onboarding.component.html' 11 | }) 12 | export class OnboardingComponent implements OnInit { 13 | 14 | currentIndex = 0; 15 | 16 | animating = false; 17 | 18 | @Input() slides: OnboardingSlide[]; 19 | @Input() disableStatusBar = true; 20 | 21 | @Output() onFinish: EventEmitter = new EventEmitter(); 22 | @Output() onContinue: EventEmitter = new EventEmitter(); 23 | @Output() onSkip: EventEmitter = new EventEmitter(); 24 | 25 | @ViewChild('slide') slidesEl: ElementRef; 26 | 27 | constructor(private page: Page) { } 28 | 29 | ngOnInit() { 30 | if (this.disableStatusBar) { 31 | this.page.backgroundSpanUnderStatusBar = true; 32 | } 33 | } 34 | 35 | /** 36 | * Continues to the next slide (or emits the finished event) 37 | * Animates the slide if configured 38 | */ 39 | continue(): void { 40 | this.animateSlides.then( 41 | () => { 42 | this.incrementSlide(); 43 | this.onContinue.next(this.currentSlide); 44 | }) 45 | .catch( 46 | () => { 47 | this.onFinish.next(false); 48 | }); 49 | } 50 | 51 | /** 52 | * Skips the remaining slides 53 | * Emits the onSkip event and onFinish event hooks 54 | */ 55 | skip(): void { 56 | this.onSkip.next(this.currentSlide); 57 | this.onFinish.next(true); 58 | } 59 | 60 | translateY(index: number): number { 61 | const prev = this.getPreviousAnimation(index); 62 | if (index === 0 || (index === this.currentIndex && prev !== this.currentSlide.animation)) { 63 | return 0; 64 | } 65 | if (this.currentSlide && this.currentSlide.animation) { 66 | const animation = this.currentSlide.animation; 67 | if (animation === 'slide_up' || animation === 'stack_under') { 68 | return platform.screen.mainScreen.heightDIPs; 69 | } 70 | else if (animation === 'slide_down' || animation === 'stack_over') { 71 | return (-1 * platform.screen.mainScreen.heightDIPs); 72 | } 73 | } 74 | return 0; 75 | } 76 | 77 | translateX(index: number): number { 78 | const prev = this.getPreviousAnimation(index); 79 | if (index === 0 || (index === this.currentIndex && prev !== this.currentSlide.animation)) { 80 | return 0; 81 | } 82 | if (this.currentSlide && this.currentSlide.animation) { 83 | const animation = this.currentSlide.animation; 84 | if (animation === 'slide_right') { 85 | return (-1 * platform.screen.mainScreen.widthDIPs); 86 | } 87 | else if (animation === 'slide_left') { 88 | return platform.screen.mainScreen.widthDIPs; 89 | } 90 | } 91 | return 0; 92 | } 93 | 94 | private getPreviousAnimation(index: number) { 95 | return index - 1 > 0 ? this.slides[index - 1].animation : null; 96 | } 97 | 98 | 99 | /** 100 | * Returns the current slide value to emit through the event chain 101 | */ 102 | private get currentSlide(): OnboardingSlide { 103 | if (this.slides.length > 0) { 104 | if (this.slides.length > this.currentIndex) { 105 | return this.slides[this.currentIndex]; 106 | } 107 | } 108 | return null; 109 | } 110 | 111 | /** 112 | * Handles animation of the slide (page) transitions 113 | */ 114 | private get animateSlides(): Promise { 115 | if (this.currentIndex + 1 < this.slides.length) { 116 | const slides = this.slidesEl.nativeElement; 117 | const current = slides.getChildAt(this.currentIndex + 1).getChildAt(0); 118 | const next = slides.getChildAt(this.currentIndex + 2).getChildAt(0); 119 | if (this.currentSlide.animation) { 120 | this.animating = true; 121 | switch (this.currentSlide.animation) { 122 | case 'slide_up': 123 | case 'stack_over': 124 | return this.animateSlideVertical(current, next, true); 125 | case 'slide_down': 126 | case 'stack_under': 127 | return this.animateSlideVertical(current, next, false); 128 | case 'slide_right': 129 | return this.animateSlideHorizontal(current, next, false); 130 | case 'slide_left': 131 | return this.animateSlideHorizontal(current, next, true); 132 | } 133 | } 134 | return Promise.resolve(); 135 | } 136 | return Promise.reject('slide_end'); 137 | } 138 | 139 | private animateSlideVertical(current: any, next: any, upwards: boolean): Promise { 140 | return new Promise((resolve, reject) => { 141 | next.animate({ 142 | translate: { 143 | x: 0, 144 | y: 0 145 | }, 146 | delay: 300, 147 | duration: 1000 148 | }); 149 | current.animate({ 150 | translate: { 151 | x: 0, 152 | y: (upwards ? -1 : 1) * platform.screen.mainScreen.heightDIPs 153 | }, 154 | duration: 1000, 155 | delay: 300 156 | }).then(() => { 157 | this.animating = false; 158 | resolve(true); 159 | }); 160 | }); 161 | } 162 | 163 | private animateSlideHorizontal(current: any, next: any, left: boolean): Promise { 164 | return new Promise((resolve, reject) => { 165 | next.animate({ 166 | translate: { 167 | x: 0, 168 | y: 0 169 | }, 170 | delay: 300, 171 | duration: 1000 172 | }); 173 | current.animate({ 174 | translate: { 175 | x: (left ? -1 : 1) * platform.screen.mainScreen.widthDIPs, 176 | y: 0 177 | }, 178 | duration: 1000, 179 | delay: 300 180 | }).then(() => { 181 | this.animating = false; 182 | resolve(true); 183 | }); 184 | }); 185 | } 186 | 187 | /** 188 | * Increments the current slide if there is a next slide 189 | * Emits the finished event if at the end of the stack 190 | */ 191 | private incrementSlide(): void { 192 | if (this.hasNext) { 193 | this.currentIndex++; 194 | } 195 | else { 196 | this.onFinish.next(true); 197 | } 198 | } 199 | 200 | /** 201 | * {true} if there is another slide in the stack, {false} if at the end 202 | */ 203 | private get hasNext(): boolean { 204 | return this.currentIndex < this.slides.length; 205 | } 206 | 207 | } 208 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const { resolve, join } = require("path"); 2 | 3 | const webpack = require("webpack"); 4 | const nsWebpack = require("nativescript-dev-webpack"); 5 | const nativescriptTarget = require("nativescript-dev-webpack/nativescript-target"); 6 | const CopyWebpackPlugin = require("copy-webpack-plugin"); 7 | const ExtractTextPlugin = require("extract-text-webpack-plugin"); 8 | const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer"); 9 | const { NativeScriptWorkerPlugin } = require("nativescript-worker-loader/NativeScriptWorkerPlugin"); 10 | 11 | const { AotPlugin } = require("@ngtools/webpack"); 12 | 13 | const ngToolsWebpackOptions = { tsConfigPath: "tsconfig.aot.json" }; 14 | 15 | const mainSheet = `app.css`; 16 | 17 | module.exports = env => { 18 | const platform = getPlatform(env); 19 | 20 | // Default destination inside platforms//... 21 | const path = resolve(nsWebpack.getAppPath(platform)); 22 | 23 | const entry = { 24 | // Discover entry module from package.json 25 | bundle: `./${nsWebpack.getEntryModule()}`, 26 | 27 | // Vendor entry with third-party libraries 28 | vendor: `./vendor`, 29 | 30 | // Entry for stylesheet with global application styles 31 | [mainSheet]: `./${mainSheet}`, 32 | }; 33 | 34 | const rules = getRules(); 35 | const plugins = getPlugins(platform, env); 36 | const extensions = getExtensions(platform); 37 | 38 | const config = { 39 | context: resolve("./app"), 40 | target: nativescriptTarget, 41 | entry, 42 | output: { 43 | pathinfo: true, 44 | path, 45 | libraryTarget: "commonjs2", 46 | filename: "[name].js", 47 | }, 48 | resolve: { 49 | extensions, 50 | 51 | // Resolve {N} system modules from tns-core-modules 52 | modules: [ 53 | "node_modules/tns-core-modules", 54 | "node_modules", 55 | ], 56 | 57 | alias: { 58 | '~': resolve("./app") 59 | }, 60 | }, 61 | node: { 62 | // Disable node shims that conflict with NativeScript 63 | "http": false, 64 | "timers": false, 65 | "setImmediate": false, 66 | "fs": "empty", 67 | }, 68 | module: { rules }, 69 | plugins, 70 | }; 71 | 72 | if (env.snapshot) { 73 | plugins.push(new nsWebpack.NativeScriptSnapshotPlugin({ 74 | chunk: "vendor", 75 | projectRoot: __dirname, 76 | webpackConfig: config, 77 | targetArchs: ["arm", "arm64", "ia32"], 78 | tnsJavaClassesOptions: { packages: ["tns-core-modules" ] }, 79 | useLibs: false 80 | })); 81 | } 82 | 83 | return config; 84 | }; 85 | 86 | 87 | function getPlatform(env) { 88 | return env.android ? "android" : 89 | env.ios ? "ios" : 90 | () => { throw new Error("You need to provide a target platform!") }; 91 | } 92 | 93 | function getRules() { 94 | return [ 95 | { 96 | test: /\.html$|\.xml$/, 97 | use: [ 98 | "raw-loader", 99 | ] 100 | }, 101 | // Root stylesheet gets extracted with bundled dependencies 102 | { 103 | test: new RegExp(mainSheet), 104 | use: ExtractTextPlugin.extract([ 105 | { 106 | loader: "resolve-url-loader", 107 | options: { silent: true }, 108 | }, 109 | { 110 | loader: "nativescript-css-loader", 111 | options: { minimize: false } 112 | }, 113 | "nativescript-dev-webpack/platform-css-loader", 114 | ]), 115 | }, 116 | // Other CSS files get bundled using the raw loader 117 | { 118 | test: /\.css$/, 119 | exclude: new RegExp(mainSheet), 120 | use: [ 121 | "raw-loader", 122 | ] 123 | }, 124 | // SASS support 125 | { 126 | test: /\.scss$/, 127 | use: [ 128 | "raw-loader", 129 | "resolve-url-loader", 130 | "sass-loader", 131 | ] 132 | }, 133 | 134 | 135 | // Compile TypeScript files with ahead-of-time compiler. 136 | { 137 | test: /.ts$/, 138 | use: [ 139 | { loader: "nativescript-dev-webpack/tns-aot-loader" }, 140 | { 141 | loader: "@ngtools/webpack", 142 | options: ngToolsWebpackOptions, 143 | }, 144 | ] 145 | }, 146 | 147 | ]; 148 | } 149 | 150 | function getPlugins(platform, env) { 151 | let plugins = [ 152 | new ExtractTextPlugin(mainSheet), 153 | 154 | // Vendor libs go to the vendor.js chunk 155 | new webpack.optimize.CommonsChunkPlugin({ 156 | name: ["vendor"], 157 | }), 158 | 159 | // Define useful constants like TNS_WEBPACK 160 | new webpack.DefinePlugin({ 161 | "global.TNS_WEBPACK": "true", 162 | }), 163 | 164 | // Copy assets to out dir. Add your own globs as needed. 165 | new CopyWebpackPlugin([ 166 | { from: mainSheet }, 167 | { from: "css/**" }, 168 | { from: "fonts/**" }, 169 | { from: "**/*.jpg" }, 170 | { from: "**/*.png" }, 171 | { from: "**/*.xml" }, 172 | ], { ignore: ["App_Resources/**"] }), 173 | 174 | // Generate a bundle starter script and activate it in package.json 175 | new nsWebpack.GenerateBundleStarterPlugin([ 176 | "./vendor", 177 | "./bundle", 178 | ]), 179 | 180 | // Support for web workers since v3.2 181 | new NativeScriptWorkerPlugin(), 182 | 183 | // Generate report files for bundles content 184 | new BundleAnalyzerPlugin({ 185 | analyzerMode: "static", 186 | openAnalyzer: false, 187 | generateStatsFile: true, 188 | reportFilename: join(__dirname, "report", `report.html`), 189 | statsFilename: join(__dirname, "report", `stats.json`), 190 | }), 191 | 192 | // Angular AOT compiler 193 | new AotPlugin( 194 | Object.assign({ 195 | entryModule: resolve(__dirname, "app/app.module#AppModule"), 196 | typeChecking: false 197 | }, ngToolsWebpackOptions) 198 | ), 199 | 200 | // Resolve .ios.css and .android.css component stylesheets, and .ios.html and .android component views 201 | new nsWebpack.UrlResolvePlugin({ 202 | platform: platform, 203 | resolveStylesUrls: true, 204 | resolveTemplateUrl: true 205 | }), 206 | 207 | ]; 208 | 209 | if (env.uglify) { 210 | plugins.push(new webpack.LoaderOptionsPlugin({ minimize: true })); 211 | 212 | // Work around an Android issue by setting compress = false 213 | const compress = platform !== "android"; 214 | plugins.push(new webpack.optimize.UglifyJsPlugin({ 215 | mangle: { except: nsWebpack.uglifyMangleExcludes }, 216 | compress, 217 | })); 218 | } 219 | 220 | return plugins; 221 | } 222 | 223 | // Resolve platform-specific modules like module.android.js 224 | function getExtensions(platform) { 225 | return Object.freeze([ 226 | `.${platform}.ts`, 227 | `.${platform}.js`, 228 | ".aot.ts", 229 | ".ts", 230 | ".js", 231 | ".css", 232 | `.${platform}.css`, 233 | ]); 234 | } 235 | --------------------------------------------------------------------------------