├── .editorconfig ├── .gitattributes ├── .gitignore ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── angular.json ├── demo ├── angular12 │ ├── .gitignore │ ├── README.md │ ├── angular.json │ ├── app │ │ ├── app-routing.module.ts │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ └── examples │ │ │ ├── basic │ │ │ ├── basic.component.html │ │ │ ├── basic.component.scss │ │ │ └── basic.component.ts │ │ │ ├── dynamic-changes │ │ │ ├── dynamic-changes.component.html │ │ │ ├── dynamic-changes.component.scss │ │ │ └── dynamic-changes.component.ts │ │ │ ├── dynamic-ng-for │ │ │ ├── dynamic-ng-for.component.html │ │ │ ├── dynamic-ng-for.component.scss │ │ │ └── dynamic-ng-for.component.ts │ │ │ ├── scrolloverflow │ │ │ ├── scrolloverflow.component.html │ │ │ ├── scrolloverflow.component.scss │ │ │ └── scrolloverflow.component.ts │ │ │ ├── type-definitions │ │ │ ├── type.component.html │ │ │ ├── type.component.scss │ │ │ └── type.component.ts │ │ │ └── using-directive │ │ │ ├── using-directive.html │ │ │ ├── using-directive.scss │ │ │ └── using-directive.ts │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── index.html │ ├── main.ts │ ├── package-lock.json │ ├── package.json │ ├── polyfills.ts │ ├── styles.scss │ ├── tsconfig.app.json │ ├── tsconfig.json │ └── tslint.json ├── angular13 │ ├── .gitignore │ ├── README.md │ ├── angular.json │ ├── app │ │ ├── app-routing.module.ts │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ └── examples │ │ │ ├── basic │ │ │ ├── basic.component.html │ │ │ ├── basic.component.scss │ │ │ └── basic.component.ts │ │ │ ├── dynamic-changes │ │ │ ├── dynamic-changes.component.html │ │ │ ├── dynamic-changes.component.scss │ │ │ └── dynamic-changes.component.ts │ │ │ ├── dynamic-ng-for │ │ │ ├── dynamic-ng-for.component.html │ │ │ ├── dynamic-ng-for.component.scss │ │ │ └── dynamic-ng-for.component.ts │ │ │ ├── scrolloverflow │ │ │ ├── scrolloverflow.component.html │ │ │ ├── scrolloverflow.component.scss │ │ │ └── scrolloverflow.component.ts │ │ │ ├── type-definitions │ │ │ ├── type.component.html │ │ │ ├── type.component.scss │ │ │ └── type.component.ts │ │ │ └── using-directive │ │ │ ├── using-directive.html │ │ │ ├── using-directive.scss │ │ │ └── using-directive.ts │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── index.html │ ├── main.ts │ ├── package-lock.json │ ├── package.json │ ├── polyfills.ts │ ├── styles.scss │ ├── tsconfig.app.json │ ├── tsconfig.json │ └── tslint.json ├── angular14 │ ├── .gitignore │ ├── README.md │ ├── angular.json │ ├── app │ │ ├── app-routing.module.ts │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ └── examples │ │ │ ├── basic │ │ │ ├── basic.component.html │ │ │ ├── basic.component.scss │ │ │ └── basic.component.ts │ │ │ ├── dynamic-changes │ │ │ ├── dynamic-changes.component.html │ │ │ ├── dynamic-changes.component.scss │ │ │ └── dynamic-changes.component.ts │ │ │ ├── dynamic-ng-for │ │ │ ├── dynamic-ng-for.component.html │ │ │ ├── dynamic-ng-for.component.scss │ │ │ └── dynamic-ng-for.component.ts │ │ │ ├── scrolloverflow │ │ │ ├── scrolloverflow.component.html │ │ │ ├── scrolloverflow.component.scss │ │ │ └── scrolloverflow.component.ts │ │ │ ├── type-definitions │ │ │ ├── type.component.html │ │ │ ├── type.component.scss │ │ │ └── type.component.ts │ │ │ └── using-directive │ │ │ ├── using-directive.html │ │ │ ├── using-directive.scss │ │ │ └── using-directive.ts │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── index.html │ ├── main.ts │ ├── package-lock.json │ ├── package.json │ ├── polyfills.ts │ ├── styles.scss │ ├── tsconfig.app.json │ ├── tsconfig.json │ └── tslint.json ├── angular15 │ ├── .gitignore │ ├── README.md │ ├── angular.json │ ├── app │ │ ├── app-routing.module.ts │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ └── examples │ │ │ ├── basic │ │ │ ├── basic.component.html │ │ │ ├── basic.component.scss │ │ │ └── basic.component.ts │ │ │ ├── dynamic-changes │ │ │ ├── dynamic-changes.component.html │ │ │ ├── dynamic-changes.component.scss │ │ │ └── dynamic-changes.component.ts │ │ │ ├── dynamic-ng-for │ │ │ ├── dynamic-ng-for.component.html │ │ │ ├── dynamic-ng-for.component.scss │ │ │ └── dynamic-ng-for.component.ts │ │ │ ├── scrolloverflow │ │ │ ├── scrolloverflow.component.html │ │ │ ├── scrolloverflow.component.scss │ │ │ └── scrolloverflow.component.ts │ │ │ ├── type-definitions │ │ │ ├── type.component.html │ │ │ ├── type.component.scss │ │ │ └── type.component.ts │ │ │ └── using-directive │ │ │ ├── using-directive.html │ │ │ ├── using-directive.scss │ │ │ └── using-directive.ts │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── index.html │ ├── main.ts │ ├── package-lock.json │ ├── package.json │ ├── polyfills.ts │ ├── styles.scss │ ├── tsconfig.app.json │ ├── tsconfig.json │ └── tslint.json ├── angular16 │ ├── .gitignore │ ├── README.md │ ├── angular.json │ ├── app │ │ ├── app-routing.module.ts │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ └── examples │ │ │ ├── basic │ │ │ ├── basic.component.html │ │ │ ├── basic.component.scss │ │ │ └── basic.component.ts │ │ │ ├── dynamic-changes │ │ │ ├── dynamic-changes.component.html │ │ │ ├── dynamic-changes.component.scss │ │ │ └── dynamic-changes.component.ts │ │ │ ├── dynamic-ng-for │ │ │ ├── dynamic-ng-for.component.html │ │ │ ├── dynamic-ng-for.component.scss │ │ │ └── dynamic-ng-for.component.ts │ │ │ ├── scrolloverflow │ │ │ ├── scrolloverflow.component.html │ │ │ ├── scrolloverflow.component.scss │ │ │ └── scrolloverflow.component.ts │ │ │ ├── type-definitions │ │ │ ├── type.component.html │ │ │ ├── type.component.scss │ │ │ └── type.component.ts │ │ │ └── using-directive │ │ │ ├── using-directive.html │ │ │ ├── using-directive.scss │ │ │ └── using-directive.ts │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── index.html │ ├── main.ts │ ├── package-lock.json │ ├── package.json │ ├── polyfills.ts │ ├── styles.scss │ ├── tsconfig.app.json │ ├── tsconfig.json │ └── tslint.json ├── angular17 │ ├── .eslintrc.json │ ├── .gitignore │ ├── README.md │ ├── angular.json │ ├── app │ │ ├── app-routing.module.ts │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ └── examples │ │ │ ├── basic │ │ │ ├── basic.component.html │ │ │ ├── basic.component.scss │ │ │ └── basic.component.ts │ │ │ ├── dynamic-changes │ │ │ ├── dynamic-changes.component.html │ │ │ ├── dynamic-changes.component.scss │ │ │ └── dynamic-changes.component.ts │ │ │ ├── dynamic-ng-for │ │ │ ├── dynamic-ng-for.component.html │ │ │ ├── dynamic-ng-for.component.scss │ │ │ └── dynamic-ng-for.component.ts │ │ │ ├── scrolloverflow │ │ │ ├── scrolloverflow.component.html │ │ │ ├── scrolloverflow.component.scss │ │ │ └── scrolloverflow.component.ts │ │ │ ├── type-definitions │ │ │ ├── type.component.html │ │ │ ├── type.component.scss │ │ │ └── type.component.ts │ │ │ └── using-directive │ │ │ ├── using-directive.html │ │ │ ├── using-directive.scss │ │ │ └── using-directive.ts │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── index.html │ ├── main.ts │ ├── package-lock.json │ ├── package.json │ ├── polyfills.ts │ ├── styles.scss │ ├── tsconfig.app.json │ ├── tsconfig.json │ └── tslint.json ├── angular18 │ ├── .eslintrc.json │ ├── .gitignore │ ├── README.md │ ├── angular.json │ ├── app │ │ ├── app-routing.module.ts │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ └── examples │ │ │ ├── basic │ │ │ ├── basic.component.html │ │ │ ├── basic.component.scss │ │ │ └── basic.component.ts │ │ │ ├── dynamic-changes │ │ │ ├── dynamic-changes.component.html │ │ │ ├── dynamic-changes.component.scss │ │ │ └── dynamic-changes.component.ts │ │ │ ├── dynamic-ng-for │ │ │ ├── dynamic-ng-for.component.html │ │ │ ├── dynamic-ng-for.component.scss │ │ │ └── dynamic-ng-for.component.ts │ │ │ ├── scrolloverflow │ │ │ ├── scrolloverflow.component.html │ │ │ ├── scrolloverflow.component.scss │ │ │ └── scrolloverflow.component.ts │ │ │ ├── type-definitions │ │ │ ├── type.component.html │ │ │ ├── type.component.scss │ │ │ └── type.component.ts │ │ │ └── using-directive │ │ │ ├── using-directive.html │ │ │ ├── using-directive.scss │ │ │ └── using-directive.ts │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── index.html │ ├── main.ts │ ├── package-lock.json │ ├── package.json │ ├── polyfills.ts │ ├── styles.scss │ ├── tsconfig.app.json │ ├── tsconfig.json │ └── tslint.json └── angular19 │ ├── .gitignore │ ├── README.md │ ├── angular.json │ ├── app │ ├── app-routing.module.ts │ ├── app.component.ts │ ├── app.module.ts │ └── examples │ │ ├── basic │ │ ├── basic.component.html │ │ ├── basic.component.scss │ │ └── basic.component.ts │ │ ├── dynamic-changes │ │ ├── dynamic-changes.component.html │ │ ├── dynamic-changes.component.scss │ │ └── dynamic-changes.component.ts │ │ ├── dynamic-ng-for │ │ ├── dynamic-ng-for.component.html │ │ ├── dynamic-ng-for.component.scss │ │ └── dynamic-ng-for.component.ts │ │ ├── scrolloverflow │ │ ├── scrolloverflow.component.html │ │ ├── scrolloverflow.component.scss │ │ └── scrolloverflow.component.ts │ │ ├── type-definitions │ │ ├── type.component.html │ │ ├── type.component.scss │ │ └── type.component.ts │ │ └── using-directive │ │ ├── using-directive.html │ │ ├── using-directive.scss │ │ └── using-directive.ts │ ├── environments │ ├── environment.prod.ts │ └── environment.ts │ ├── index.html │ ├── main.ts │ ├── package-lock.json │ ├── package.json │ ├── polyfills.ts │ ├── styles.scss │ ├── tsconfig.app.json │ ├── tsconfig.json │ └── tslint.json ├── dist └── @fullpage │ └── angular-fullpage │ ├── README.md │ ├── bundles │ ├── fullpage-angular-fullpage.umd.js │ └── fullpage-angular-fullpage.umd.js.map │ ├── esm2015 │ ├── fullpage-angular-fullpage.js │ ├── lib │ │ ├── angular-fullpage.module.js │ │ ├── fullpage.directive.js │ │ └── fullpage.interface.js │ └── public_api.js │ ├── fesm2015 │ ├── fullpage-angular-fullpage.js │ └── fullpage-angular-fullpage.js.map │ ├── fullpage-angular-fullpage.d.ts │ ├── lib │ ├── angular-fullpage.module.d.ts │ ├── fullpage.directive.d.ts │ └── fullpage.interface.d.ts │ ├── package.json │ └── public_api.d.ts ├── package-lock.json ├── package.json ├── src ├── angular-fullpage │ ├── lib │ │ ├── angular-fullpage.module.ts │ │ ├── fullpage.directive.ts │ │ └── fullpage.interface.ts │ └── public_api.ts ├── ng-package.json ├── package.json ├── tsconfig.lib.json └── tslint.json ├── tsconfig.json └── tslint.json /.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | max_line_length = off 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | src/app/examples/* linguist-vendored -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /tmp 5 | /out-tsc 6 | 7 | # dependencies 8 | /node_modules 9 | /src/node_modules 10 | 11 | /dist/demo/* 12 | 13 | # IDEs and editors 14 | /.idea 15 | .project 16 | .classpath 17 | .c9/ 18 | *.launch 19 | *.angular 20 | .settings/ 21 | *.sublime-workspace 22 | .vscode/* 23 | 24 | # IDE - VSCode 25 | /.vscode 26 | .vscode/* 27 | !.vscode/settings.json 28 | !.vscode/tasks.json 29 | !.vscode/launch.json 30 | !.vscode/extensions.json 31 | 32 | # misc 33 | /.sass-cache 34 | /connect.lock 35 | /coverage 36 | /libpeerconnection.log 37 | npm-debug.log 38 | yarn-error.log 39 | testem.log 40 | /typings 41 | /.history 42 | 43 | # System Files 44 | .DS_Store 45 | Thumbs.db 46 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | Contributions are **welcome** and will be fully **credited**. 4 | 5 | We accept contributions via Pull Requests on [Github](https://github.com/alvarotrigo/angular-fullpage). 6 | 7 | 8 | ## Pull Requests 9 | 10 | Please make sure you follow these points: 11 | 12 | - Use the `dev` branch to commit your pull requests. 13 | - Do not edit files in `dist/` directory 14 | - If the pull request is related with an issue, please name the issue number in the comments (eg: #16) 15 | - Please prefer clarity over brevity in all cases (variable names, conditions, functions...) 16 | - Describe the problem in the Pull Request description (of course you would do it, why do I mention that?) 17 | 18 | Thank you for your commitment! 19 | 20 | **Happy coding**! 21 | -------------------------------------------------------------------------------- /angular.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "version": 1, 4 | "newProjectRoot": "projects", 5 | "projects": { 6 | "angular-fullpage": { 7 | "root": "src", 8 | "sourceRoot": "src/angular-fullpage", 9 | "projectType": "library", 10 | "prefix": "fp", 11 | "architect": { 12 | "build": { 13 | "builder": "@angular-devkit/build-angular:ng-packagr", 14 | "options": { 15 | "tsConfig": "src/tsconfig.lib.json", 16 | "project": "src/ng-package.json" 17 | } 18 | }, 19 | "lint": { 20 | "builder": "@angular-devkit/build-angular:tslint", 21 | "options": { 22 | "tsConfig": [ 23 | "src/tsconfig.lib.json" 24 | ], 25 | "exclude": [ 26 | "**/node_modules/**" 27 | ] 28 | } 29 | } 30 | } 31 | } 32 | }, 33 | "cli": { 34 | "analytics": false 35 | } 36 | } -------------------------------------------------------------------------------- /demo/angular12/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /tmp 5 | /out-tsc 6 | 7 | # dependencies 8 | /node_modules 9 | /src/node_modules 10 | 11 | # IDEs and editors 12 | /.idea 13 | .project 14 | .classpath 15 | .c9/ 16 | *.launch 17 | *.angular 18 | .settings/ 19 | *.sublime-workspace 20 | .vscode/* 21 | 22 | # IDE - VSCode 23 | .vscode/* 24 | !.vscode/settings.json 25 | !.vscode/tasks.json 26 | !.vscode/launch.json 27 | !.vscode/extensions.json 28 | 29 | # misc 30 | /.sass-cache 31 | /connect.lock 32 | /coverage 33 | /libpeerconnection.log 34 | npm-debug.log 35 | yarn-error.log 36 | testem.log 37 | /typings 38 | 39 | # System Files 40 | .DS_Store 41 | Thumbs.db 42 | -------------------------------------------------------------------------------- /demo/angular12/README.md: -------------------------------------------------------------------------------- 1 | # Examples 2 | 3 | In order to run the examples you'll have to first install the dependencies: 4 | 5 | ```shell 6 | # install dependencies 7 | npm install 8 | ``` 9 | 10 | Then run them with: 11 | 12 | ```shell 13 | # serve examples 14 | npm run start 15 | ``` 16 | 17 | A page will open in the browser, where you'll be able to swap between examles by accessing one or anothe URL: 18 | 19 | - http://localhost:4200/ 20 | - http://localhost:4200/dynamicChanges 21 | - http://localhost:4200/scrollOverflow 22 | - http://localhost:4200/typeDefinitions 23 | - http://localhost:4200/dynamicNgFor 24 | - http://localhost:4200/usingDirective -------------------------------------------------------------------------------- /demo/angular12/app/app-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | import { BasicExampleComponent } from './examples/basic/basic.component'; 4 | import { DynamicChangesExampleComponent } from './examples/dynamic-changes/dynamic-changes.component'; 5 | import { ScrollOverflowExampleComponent } from './examples/scrolloverflow/scrolloverflow.component'; 6 | import { TypeExampleComponent } from './examples/type-definitions/type.component'; 7 | import { DynamicNgForComponent } from './examples/dynamic-ng-for/dynamic-ng-for.component'; 8 | import { UsingDirectiveComponent } from './examples/using-directive/using-directive'; 9 | 10 | 11 | const routes: Routes = [ 12 | { path: '', component: BasicExampleComponent, pathMatch: 'full' }, 13 | { path: 'dynamicChanges', component: DynamicChangesExampleComponent }, 14 | { path: 'scrollOverflow', component: ScrollOverflowExampleComponent }, 15 | { path: 'typeDefinitions', component: TypeExampleComponent }, 16 | { path: 'dynamicNgFor', component: DynamicNgForComponent }, 17 | { path: 'usingDirective', component: UsingDirectiveComponent } 18 | ]; 19 | 20 | @NgModule({ 21 | imports: [RouterModule.forRoot(routes)], 22 | exports: [RouterModule] 23 | }) 24 | export class AppRoutingModule { } 25 | -------------------------------------------------------------------------------- /demo/angular12/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | template: `` 6 | }) 7 | export class AppComponent { 8 | 9 | constructor() {} 10 | 11 | } 12 | -------------------------------------------------------------------------------- /demo/angular12/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { BrowserModule } from '@angular/platform-browser'; 2 | import { NgModule } from '@angular/core'; 3 | 4 | import { AppRoutingModule } from './app-routing.module'; 5 | import { AppComponent } from './app.component'; 6 | 7 | import { BasicExampleComponent } from './examples/basic/basic.component'; 8 | import { DynamicChangesExampleComponent } from './examples/dynamic-changes/dynamic-changes.component'; 9 | import { ScrollOverflowExampleComponent } from './examples/scrolloverflow/scrolloverflow.component'; 10 | import { TypeExampleComponent } from './examples/type-definitions/type.component'; 11 | import { DynamicNgForComponent } from './examples/dynamic-ng-for/dynamic-ng-for.component'; 12 | import { UsingDirectiveComponent } from './examples/using-directive/using-directive'; 13 | 14 | import { AngularFullpageModule } from '@fullpage/angular-fullpage'; 15 | 16 | @NgModule({ 17 | declarations: [ 18 | AppComponent, 19 | BasicExampleComponent, 20 | DynamicChangesExampleComponent, 21 | ScrollOverflowExampleComponent, 22 | TypeExampleComponent, 23 | DynamicNgForComponent, 24 | UsingDirectiveComponent 25 | ], 26 | imports: [ 27 | BrowserModule, 28 | AppRoutingModule, 29 | AngularFullpageModule, 30 | 31 | ], 32 | providers: [], 33 | bootstrap: [AppComponent] 34 | }) 35 | export class AppModule { } 36 | -------------------------------------------------------------------------------- /demo/angular12/app/examples/basic/basic.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 10 |

Section 1

11 |
12 |

Section 2

13 |
14 |

Slide 2.1

15 |

Slide 3.2

16 |

Slide 3.3

17 |
18 |

Section 4

19 |
20 | -------------------------------------------------------------------------------- /demo/angular12/app/examples/basic/basic.component.scss: -------------------------------------------------------------------------------- 1 | .section { 2 | text-align:center; 3 | font-size: 3em; 4 | } 5 | .examples{ 6 | position: fixed; 7 | top: 0; 8 | left: 0; 9 | right: 0; 10 | margin: 0; 11 | padding: 0; 12 | z-index: 999; 13 | } 14 | .examples li{ 15 | display: inline-block; 16 | } 17 | .examples li a{ 18 | color: white; 19 | text-decoration: none; 20 | font-family: arial; 21 | font-size: 0.5em; 22 | margin-right: 2em; 23 | } 24 | .examples li a:hover{ 25 | text-decoration: underline; 26 | } -------------------------------------------------------------------------------- /demo/angular12/app/examples/basic/basic.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-basic', 5 | templateUrl: './basic.component.html', 6 | styleUrls: ['./basic.component.scss'] 7 | }) 8 | export class BasicExampleComponent implements OnInit { 9 | config; 10 | fullpageApi; 11 | 12 | constructor() { 13 | 14 | // this is just an example => for more details on config please visit fullPage.js docs 15 | this.config = { 16 | licenseKey: 'YOUR LICENSE KEY HERE', 17 | sectionsColor: ['#7BAABE', 'whitesmoke', '#7BAABE', 'whitesmoke', '#7BAABE'], 18 | anchors: ['p1', 'p2', 'p3', 'p4', 'p5'], 19 | navigation: true, 20 | }; 21 | } 22 | 23 | ngOnInit() { 24 | } 25 | 26 | getRef(fullPageRef) { 27 | this.fullpageApi = fullPageRef; 28 | } 29 | 30 | } 31 | -------------------------------------------------------------------------------- /demo/angular12/app/examples/dynamic-changes/dynamic-changes.component.html: -------------------------------------------------------------------------------- 1 | 7 | 8 |
9 |

Section 1

10 |
11 |

Section 2

12 | 13 | 14 | 15 |
16 |
17 |

Slide 3.1

18 |

Slide 3.2

19 |
20 |

Slide 3.3

21 | name 22 |
23 |
24 |
25 |

Section 4

26 | 27 | 28 | 29 |
30 |
-------------------------------------------------------------------------------- /demo/angular12/app/examples/dynamic-changes/dynamic-changes.component.scss: -------------------------------------------------------------------------------- 1 | .section { 2 | text-align:center; 3 | font-size: 3em; 4 | } 5 | 6 | #menu li { 7 | display:inline-block; 8 | margin: 10px; 9 | color: #000; 10 | background:#fff; 11 | background: rgba(255,255,255, 0.5); 12 | -webkit-border-radius: 10px; 13 | border-radius: 10px; 14 | } 15 | #menu li.active{ 16 | background:#666; 17 | background: rgba(0,0,0, 0.5); 18 | color: #fff; 19 | } 20 | #menu li a{ 21 | text-decoration:none; 22 | color: #000; 23 | } 24 | #menu li.active a:hover{ 25 | color: #000; 26 | } 27 | #menu li:hover{ 28 | background: rgba(255,255,255, 0.8); 29 | } 30 | #menu li a, 31 | #menu li.active a{ 32 | padding: 9px 18px; 33 | display:block; 34 | } 35 | #menu li.active a{ 36 | color: #fff; 37 | } 38 | #menu{ 39 | position:fixed; 40 | top:0; 41 | left:0; 42 | height: 40px; 43 | z-index: 70; 44 | width: 100%; 45 | padding: 0; 46 | margin:0; 47 | } 48 | -------------------------------------------------------------------------------- /demo/angular12/app/examples/dynamic-ng-for/dynamic-ng-for.component.html: -------------------------------------------------------------------------------- 1 | 7 | 8 |
9 |
10 |

Section {{section}}

11 | 12 |
13 |
-------------------------------------------------------------------------------- /demo/angular12/app/examples/dynamic-ng-for/dynamic-ng-for.component.scss: -------------------------------------------------------------------------------- 1 | .section { 2 | text-align:center; 3 | font-size: 3em; 4 | } 5 | 6 | #menu li { 7 | display:inline-block; 8 | margin: 10px; 9 | color: #000; 10 | background:#fff; 11 | background: rgba(255,255,255, 0.5); 12 | -webkit-border-radius: 10px; 13 | border-radius: 10px; 14 | } 15 | #menu li.active{ 16 | background:#666; 17 | background: rgba(0,0,0, 0.5); 18 | color: #fff; 19 | } 20 | #menu li a{ 21 | text-decoration:none; 22 | color: #000; 23 | } 24 | #menu li.active a:hover{ 25 | color: #000; 26 | } 27 | #menu li:hover{ 28 | background: rgba(255,255,255, 0.8); 29 | } 30 | #menu li a, 31 | #menu li.active a{ 32 | padding: 9px 18px; 33 | display:block; 34 | } 35 | #menu li.active a{ 36 | color: #fff; 37 | } 38 | #menu{ 39 | position:fixed; 40 | top:0; 41 | left:0; 42 | height: 40px; 43 | z-index: 70; 44 | width: 100%; 45 | padding: 0; 46 | margin:0; 47 | } 48 | -------------------------------------------------------------------------------- /demo/angular12/app/examples/dynamic-ng-for/dynamic-ng-for.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, AfterViewInit, ViewChildren, QueryList } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-dynamic-ng-for', 5 | templateUrl: './dynamic-ng-for.component.html', 6 | styleUrls: ['./dynamic-ng-for.component.scss'] 7 | }) 8 | export class DynamicNgForComponent implements OnInit, AfterViewInit { 9 | @ViewChildren('sectionRef') sectionRef: QueryList; 10 | config: any; 11 | fullpageApi: any; 12 | sections = [1]; 13 | 14 | constructor() { 15 | // this is just an example => for more details on config please visit fullPage.js docs 16 | this.config = { 17 | licenseKey: 'YOUR LICENSE KEY HERE', 18 | anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'], 19 | menu: '#menu', 20 | navigation: true, 21 | sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'], 22 | }; 23 | } 24 | 25 | ngOnInit() { 26 | } 27 | 28 | ngAfterViewInit() { 29 | this.sectionRef.changes.subscribe(() => { 30 | this.ngForRendred(); 31 | }); 32 | } 33 | 34 | getRef(fullPageRef) { 35 | this.fullpageApi = fullPageRef; 36 | } 37 | 38 | add() { 39 | const twoDigits = Math.random() * 100; 40 | this.sections.push( Math.round(twoDigits) ); 41 | } 42 | 43 | ngForRendred() { 44 | console.log('ngFor dom render is done'); 45 | this.fullpageApi.build(); 46 | } 47 | 48 | } 49 | -------------------------------------------------------------------------------- /demo/angular12/app/examples/scrolloverflow/scrolloverflow.component.scss: -------------------------------------------------------------------------------- 1 | .section { 2 | text-align:center; 3 | font-size: 3em; 4 | } 5 | .section p{ 6 | width: 600px; 7 | margin: 0 auto; 8 | } 9 | 10 | #menu li { 11 | display:inline-block; 12 | margin: 10px; 13 | color: #000; 14 | background:#fff; 15 | background: rgba(255,255,255, 0.5); 16 | -webkit-border-radius: 10px; 17 | border-radius: 10px; 18 | } 19 | #menu li.active{ 20 | background:#666; 21 | background: rgba(0,0,0, 0.5); 22 | color: #fff; 23 | } 24 | #menu li a{ 25 | text-decoration:none; 26 | color: #000; 27 | } 28 | #menu li.active a:hover{ 29 | color: #000; 30 | } 31 | #menu li:hover{ 32 | background: rgba(255,255,255, 0.8); 33 | } 34 | #menu li a, 35 | #menu li.active a{ 36 | padding: 9px 18px; 37 | display:block; 38 | } 39 | #menu li.active a{ 40 | color: #fff; 41 | } 42 | #menu{ 43 | position:fixed; 44 | top:0; 45 | left:0; 46 | height: 40px; 47 | z-index: 70; 48 | width: 100%; 49 | padding: 0; 50 | margin:0; 51 | } 52 | -------------------------------------------------------------------------------- /demo/angular12/app/examples/scrolloverflow/scrolloverflow.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit} from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-scrolloverflow', 5 | templateUrl: './scrolloverflow.component.html', 6 | styleUrls: ['./scrolloverflow.component.scss'] 7 | }) 8 | export class ScrollOverflowExampleComponent implements OnInit { 9 | config; 10 | fullpageApi; 11 | 12 | constructor() { 13 | 14 | // this is just an example => for more details on config please visit fullPage.js docs 15 | this.config = { 16 | licenseKey: 'YOUR LICENSE KEY HERE', 17 | anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'], 18 | menu: '#menu', 19 | scrollOverflow: true, 20 | sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'], 21 | 22 | // events callback 23 | afterLoad: (origin, destination, direction) => { 24 | // console.log(destination); 25 | }, 26 | afterRender: () => { 27 | // console.log('afterRender'); 28 | }, 29 | afterResize: (width, height) => { 30 | // console.log('afterResize' + width + ' ' + height); 31 | }, 32 | afterSlideLoad: (section, origin, destination, direction) => { 33 | // console.log(destination); 34 | } 35 | }; 36 | } 37 | 38 | ngOnInit() { 39 | } 40 | 41 | getRef(fullPageRef) { 42 | this.fullpageApi = fullPageRef; 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /demo/angular12/app/examples/type-definitions/type.component.html: -------------------------------------------------------------------------------- 1 |
2 |

Section 1

3 |
4 |

Section 2

5 | 6 |
7 |
8 |

Slide 2.1

9 |

Slide 3.2

10 |

Slide 3.3

11 |
12 |
13 |

Section 4

14 | 15 |
16 |
17 | -------------------------------------------------------------------------------- /demo/angular12/app/examples/type-definitions/type.component.scss: -------------------------------------------------------------------------------- 1 | .section { 2 | text-align:center; 3 | font-size: 3em; 4 | } -------------------------------------------------------------------------------- /demo/angular12/app/examples/type-definitions/type.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { fullpageOptions, fullpageApi } from 'fullpage.js/dist/fullpage.extensions.min'; 3 | 4 | @Component({ 5 | selector: 'app-type', 6 | templateUrl: './type.component.html', 7 | styleUrls: ['./type.component.scss'] 8 | }) 9 | export class TypeExampleComponent implements OnInit { 10 | config: fullpageOptions; 11 | fullpageApi: fullpageApi; 12 | 13 | constructor() { 14 | 15 | // this is just an example => for more details on config please visit fullPage.js docs 16 | this.config = { 17 | licenseKey: 'YOUR LICENSE KEY HERE', 18 | anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'], 19 | menu: '#menu', 20 | scrollOverflow: true, 21 | sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'], 22 | credits: { 23 | enabled: false, 24 | }, 25 | 26 | // events callback 27 | afterLoad: (origin, destination, direction) => { 28 | console.log(destination); 29 | }, 30 | afterRender: () => { 31 | console.log('afterRender'); 32 | }, 33 | afterResize: (width, height) => { 34 | console.log('afterResize' + width + ' ' + height); 35 | }, 36 | afterSlideLoad: (section, origin, destination, direction) => { 37 | console.log(destination); 38 | } 39 | }; 40 | } 41 | 42 | ngOnInit() { 43 | } 44 | 45 | getRef(fullPageRef) { 46 | this.fullpageApi = fullPageRef; 47 | } 48 | 49 | } 50 | -------------------------------------------------------------------------------- /demo/angular12/app/examples/using-directive/using-directive.html: -------------------------------------------------------------------------------- 1 |
2 |

Section 1

3 |

Section 2

4 |
5 |

Slide 2.1

6 |

Slide 3.2

7 |

Slide 3.3

8 |
9 |

Section 4

10 |
-------------------------------------------------------------------------------- /demo/angular12/app/examples/using-directive/using-directive.scss: -------------------------------------------------------------------------------- 1 | .section { 2 | text-align:center; 3 | font-size: 3em; 4 | } -------------------------------------------------------------------------------- /demo/angular12/app/examples/using-directive/using-directive.ts: -------------------------------------------------------------------------------- 1 | import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core'; 2 | import { ɵa as FullpageDirective } from '@fullpage/angular-fullpage'; 3 | import { fullpageOptions } from 'fullpage.js/dist/fullpage.extensions.min'; 4 | 5 | 6 | @Component({ 7 | selector: 'app-using-directive', 8 | templateUrl: './using-directive.html', 9 | styleUrls: ['./using-directive.scss'], 10 | }) 11 | export class UsingDirectiveComponent implements OnInit, AfterViewInit { 12 | config: fullpageOptions; 13 | fullpageApi; 14 | 15 | @ViewChild(FullpageDirective) 16 | fullpageDirective: FullpageDirective; 17 | 18 | constructor() { 19 | 20 | // this is just an example => for more details on config please visit fullPage.js docs 21 | this.config = { 22 | licenseKey: 'asdf', 23 | sectionsColor: ['#7BAABE', 'whitesmoke', '#7BAABE', 'whitesmoke', '#7BAABE'], 24 | anchors: ['p1', 'p2', 'p3', 'p4', 'p5'], 25 | navigation: true, 26 | credits: { 27 | enabled: false, 28 | }, 29 | }; 30 | } 31 | 32 | ngAfterViewInit() { 33 | this.fullpageApi = this.fullpageDirective.fullpage_api; 34 | } 35 | 36 | ngOnInit() { 37 | } 38 | 39 | } 40 | -------------------------------------------------------------------------------- /demo/angular12/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /demo/angular12/environments/environment.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: false 3 | }; -------------------------------------------------------------------------------- /demo/angular12/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Fullpage 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /demo/angular12/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.error(err)); 13 | 14 | -------------------------------------------------------------------------------- /demo/angular12/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@fullpage/angular-fullpage-demo-angular12", 3 | "version": "0.0.1", 4 | "description": "Official Angular wrapper for fullPage.js", 5 | "author": "vh12294", 6 | "contributors": [ 7 | "vh12294", 8 | "alvarotrigo", 9 | "alidihaw" 10 | ], 11 | "homepage": "https://github.com/alvarotrigo/angular-fullpage", 12 | "repository": { 13 | "type": "git", 14 | "url": "https://github.com/alvarotrigo/angular-fullpage" 15 | }, 16 | "license": "GPL-3.0", 17 | "private": false, 18 | "main": "dist/@fullpage/angular-fullpage", 19 | "files": [ 20 | "dist" 21 | ], 22 | "scripts": { 23 | "ng": "ng", 24 | "start": "ng serve", 25 | "build": "ng build", 26 | "test": "ng test", 27 | "lint": "ng lint", 28 | "e2e": "ng e2e" 29 | }, 30 | "dependencies": { 31 | "@angular/animations": "12.2.0", 32 | "@angular/common": "12.2.0", 33 | "@angular/compiler": "12.2.0", 34 | "@angular/core": "12.2.0", 35 | "@angular/forms": "12.2.0", 36 | "@angular/platform-browser": "12.2.0", 37 | "@angular/platform-browser-dynamic": "12.2.0", 38 | "@angular/router": "12.2.0", 39 | "@fullpage/angular-fullpage": "0.1.6", 40 | "fullpage.js": "4.0.35", 41 | "rxjs": "~6.6.0", 42 | "zone.js": "~0.11.4" 43 | }, 44 | "devDependencies": { 45 | "@angular-devkit/build-angular": "12.2.0", 46 | "@angular/cli": "12.2.0", 47 | "@angular/compiler-cli": "12.2.0", 48 | "@types/node": "^12.11.1", 49 | "codelyzer": "~6.0.2", 50 | "ts-node": "~8.0.0", 51 | "tslib": "^2.4.0", 52 | "tslint": "~6.1.0", 53 | "typescript": "4.2.3" 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /demo/angular12/styles.scss: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | @import url(~fullpage.js/dist/fullpage.min.css); 3 | 4 | // change default css 5 | .fp-controlArrow { 6 | padding: 0 1%; 7 | } 8 | -------------------------------------------------------------------------------- /demo/angular12/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "types": [] 6 | }, 7 | "files": [ 8 | "main.ts", 9 | "polyfills.ts" 10 | ], 11 | "exclude": [ 12 | "test.ts", 13 | "**/*.spec.ts", 14 | ] 15 | } -------------------------------------------------------------------------------- /demo/angular12/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "sourceMap": true, 7 | "declaration": false, 8 | "module": "ES2015", 9 | "moduleResolution": "node", 10 | "emitDecoratorMetadata": true, 11 | "experimentalDecorators": true, 12 | "target": "ES2015", 13 | "typeRoots": [ 14 | "node_modules/@types" 15 | ], 16 | "lib": [ 17 | "ES2015", 18 | "dom" 19 | ], 20 | "paths": { 21 | } 22 | } 23 | } -------------------------------------------------------------------------------- /demo/angular12/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tslint.json", 3 | "rules": { 4 | "directive-selector": [ 5 | true, 6 | "attribute", 7 | "app", 8 | "camelCase" 9 | ], 10 | "component-selector": [ 11 | true, 12 | "element", 13 | "app", 14 | "kebab-case" 15 | ] 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /demo/angular13/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /tmp 5 | /out-tsc 6 | 7 | # dependencies 8 | /node_modules 9 | /src/node_modules 10 | 11 | # IDEs and editors 12 | /.idea 13 | .project 14 | .classpath 15 | .c9/ 16 | *.launch 17 | *.angular 18 | .settings/ 19 | *.sublime-workspace 20 | .vscode/* 21 | 22 | # IDE - VSCode 23 | .vscode/* 24 | !.vscode/settings.json 25 | !.vscode/tasks.json 26 | !.vscode/launch.json 27 | !.vscode/extensions.json 28 | 29 | # misc 30 | /.sass-cache 31 | /connect.lock 32 | /coverage 33 | /libpeerconnection.log 34 | npm-debug.log 35 | yarn-error.log 36 | testem.log 37 | /typings 38 | 39 | # System Files 40 | .DS_Store 41 | Thumbs.db 42 | -------------------------------------------------------------------------------- /demo/angular13/README.md: -------------------------------------------------------------------------------- 1 | # Examples 2 | 3 | In order to run the examples you'll have to first install the dependencies: 4 | 5 | ```shell 6 | # install dependencies 7 | npm install 8 | ``` 9 | 10 | Then run them with: 11 | 12 | ```shell 13 | # serve examples 14 | npm run start 15 | ``` 16 | 17 | A page will open in the browser, where you'll be able to swap between examles by accessing one or anothe URL: 18 | 19 | - http://localhost:4200/ 20 | - http://localhost:4200/dynamicChanges 21 | - http://localhost:4200/scrollOverflow 22 | - http://localhost:4200/typeDefinitions 23 | - http://localhost:4200/dynamicNgFor 24 | - http://localhost:4200/usingDirective -------------------------------------------------------------------------------- /demo/angular13/app/app-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | import { BasicExampleComponent } from './examples/basic/basic.component'; 4 | import { DynamicChangesExampleComponent } from './examples/dynamic-changes/dynamic-changes.component'; 5 | import { ScrollOverflowExampleComponent } from './examples/scrolloverflow/scrolloverflow.component'; 6 | import { TypeExampleComponent } from './examples/type-definitions/type.component'; 7 | import { DynamicNgForComponent } from './examples/dynamic-ng-for/dynamic-ng-for.component'; 8 | import { UsingDirectiveComponent } from './examples/using-directive/using-directive'; 9 | 10 | 11 | const routes: Routes = [ 12 | { path: '', component: BasicExampleComponent, pathMatch: 'full' }, 13 | { path: 'dynamicChanges', component: DynamicChangesExampleComponent }, 14 | { path: 'scrollOverflow', component: ScrollOverflowExampleComponent }, 15 | { path: 'typeDefinitions', component: TypeExampleComponent }, 16 | { path: 'dynamicNgFor', component: DynamicNgForComponent }, 17 | { path: 'usingDirective', component: UsingDirectiveComponent } 18 | ]; 19 | 20 | @NgModule({ 21 | imports: [RouterModule.forRoot(routes)], 22 | exports: [RouterModule] 23 | }) 24 | export class AppRoutingModule { } 25 | -------------------------------------------------------------------------------- /demo/angular13/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | template: `` 6 | }) 7 | export class AppComponent { 8 | 9 | constructor() {} 10 | 11 | } 12 | -------------------------------------------------------------------------------- /demo/angular13/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { BrowserModule } from '@angular/platform-browser'; 2 | import { NgModule } from '@angular/core'; 3 | 4 | import { AppRoutingModule } from './app-routing.module'; 5 | import { AppComponent } from './app.component'; 6 | 7 | import { BasicExampleComponent } from './examples/basic/basic.component'; 8 | import { DynamicChangesExampleComponent } from './examples/dynamic-changes/dynamic-changes.component'; 9 | import { ScrollOverflowExampleComponent } from './examples/scrolloverflow/scrolloverflow.component'; 10 | import { TypeExampleComponent } from './examples/type-definitions/type.component'; 11 | import { DynamicNgForComponent } from './examples/dynamic-ng-for/dynamic-ng-for.component'; 12 | import { UsingDirectiveComponent } from './examples/using-directive/using-directive'; 13 | 14 | import { AngularFullpageModule } from '@fullpage/angular-fullpage'; 15 | 16 | @NgModule({ 17 | declarations: [ 18 | AppComponent, 19 | BasicExampleComponent, 20 | DynamicChangesExampleComponent, 21 | ScrollOverflowExampleComponent, 22 | TypeExampleComponent, 23 | DynamicNgForComponent, 24 | UsingDirectiveComponent 25 | ], 26 | imports: [ 27 | BrowserModule, 28 | AppRoutingModule, 29 | AngularFullpageModule, 30 | 31 | ], 32 | providers: [], 33 | bootstrap: [AppComponent] 34 | }) 35 | export class AppModule { } 36 | -------------------------------------------------------------------------------- /demo/angular13/app/examples/basic/basic.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 10 |

Section 1

11 |
12 |

Section 2

13 |
14 |

Slide 2.1

15 |

Slide 3.2

16 |

Slide 3.3

17 |
18 |

Section 4

19 |
20 | -------------------------------------------------------------------------------- /demo/angular13/app/examples/basic/basic.component.scss: -------------------------------------------------------------------------------- 1 | .section { 2 | text-align:center; 3 | font-size: 3em; 4 | } 5 | .examples{ 6 | position: fixed; 7 | top: 0; 8 | left: 0; 9 | right: 0; 10 | margin: 0; 11 | padding: 0; 12 | z-index: 999; 13 | } 14 | .examples li{ 15 | display: inline-block; 16 | } 17 | .examples li a{ 18 | color: white; 19 | text-decoration: none; 20 | font-family: arial; 21 | font-size: 0.5em; 22 | margin-right: 2em; 23 | } 24 | .examples li a:hover{ 25 | text-decoration: underline; 26 | } -------------------------------------------------------------------------------- /demo/angular13/app/examples/basic/basic.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-basic', 5 | templateUrl: './basic.component.html', 6 | styleUrls: ['./basic.component.scss'] 7 | }) 8 | export class BasicExampleComponent implements OnInit { 9 | config; 10 | fullpageApi; 11 | 12 | constructor() { 13 | 14 | // this is just an example => for more details on config please visit fullPage.js docs 15 | this.config = { 16 | licenseKey: 'YOUR LICENSE KEY HERE', 17 | sectionsColor: ['#7BAABE', 'whitesmoke', '#7BAABE', 'whitesmoke', '#7BAABE'], 18 | anchors: ['p1', 'p2', 'p3', 'p4', 'p5'], 19 | navigation: true, 20 | }; 21 | } 22 | 23 | ngOnInit() { 24 | } 25 | 26 | getRef(fullPageRef) { 27 | this.fullpageApi = fullPageRef; 28 | } 29 | 30 | } 31 | -------------------------------------------------------------------------------- /demo/angular13/app/examples/dynamic-changes/dynamic-changes.component.html: -------------------------------------------------------------------------------- 1 | 7 | 8 |
9 |

Section 1

10 |
11 |

Section 2

12 | 13 | 14 | 15 |
16 |
17 |

Slide 3.1

18 |

Slide 3.2

19 |
20 |

Slide 3.3

21 | name 22 |
23 |
24 |
25 |

Section 4

26 | 27 | 28 | 29 |
30 |
-------------------------------------------------------------------------------- /demo/angular13/app/examples/dynamic-changes/dynamic-changes.component.scss: -------------------------------------------------------------------------------- 1 | .section { 2 | text-align:center; 3 | font-size: 3em; 4 | } 5 | 6 | #menu li { 7 | display:inline-block; 8 | margin: 10px; 9 | color: #000; 10 | background:#fff; 11 | background: rgba(255,255,255, 0.5); 12 | -webkit-border-radius: 10px; 13 | border-radius: 10px; 14 | } 15 | #menu li.active{ 16 | background:#666; 17 | background: rgba(0,0,0, 0.5); 18 | color: #fff; 19 | } 20 | #menu li a{ 21 | text-decoration:none; 22 | color: #000; 23 | } 24 | #menu li.active a:hover{ 25 | color: #000; 26 | } 27 | #menu li:hover{ 28 | background: rgba(255,255,255, 0.8); 29 | } 30 | #menu li a, 31 | #menu li.active a{ 32 | padding: 9px 18px; 33 | display:block; 34 | } 35 | #menu li.active a{ 36 | color: #fff; 37 | } 38 | #menu{ 39 | position:fixed; 40 | top:0; 41 | left:0; 42 | height: 40px; 43 | z-index: 70; 44 | width: 100%; 45 | padding: 0; 46 | margin:0; 47 | } 48 | -------------------------------------------------------------------------------- /demo/angular13/app/examples/dynamic-ng-for/dynamic-ng-for.component.html: -------------------------------------------------------------------------------- 1 | 7 | 8 |
9 |
10 |

Section {{section}}

11 | 12 |
13 |
-------------------------------------------------------------------------------- /demo/angular13/app/examples/dynamic-ng-for/dynamic-ng-for.component.scss: -------------------------------------------------------------------------------- 1 | .section { 2 | text-align:center; 3 | font-size: 3em; 4 | } 5 | 6 | #menu li { 7 | display:inline-block; 8 | margin: 10px; 9 | color: #000; 10 | background:#fff; 11 | background: rgba(255,255,255, 0.5); 12 | -webkit-border-radius: 10px; 13 | border-radius: 10px; 14 | } 15 | #menu li.active{ 16 | background:#666; 17 | background: rgba(0,0,0, 0.5); 18 | color: #fff; 19 | } 20 | #menu li a{ 21 | text-decoration:none; 22 | color: #000; 23 | } 24 | #menu li.active a:hover{ 25 | color: #000; 26 | } 27 | #menu li:hover{ 28 | background: rgba(255,255,255, 0.8); 29 | } 30 | #menu li a, 31 | #menu li.active a{ 32 | padding: 9px 18px; 33 | display:block; 34 | } 35 | #menu li.active a{ 36 | color: #fff; 37 | } 38 | #menu{ 39 | position:fixed; 40 | top:0; 41 | left:0; 42 | height: 40px; 43 | z-index: 70; 44 | width: 100%; 45 | padding: 0; 46 | margin:0; 47 | } 48 | -------------------------------------------------------------------------------- /demo/angular13/app/examples/dynamic-ng-for/dynamic-ng-for.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, AfterViewInit, ViewChildren, QueryList } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-dynamic-ng-for', 5 | templateUrl: './dynamic-ng-for.component.html', 6 | styleUrls: ['./dynamic-ng-for.component.scss'] 7 | }) 8 | export class DynamicNgForComponent implements OnInit, AfterViewInit { 9 | @ViewChildren('sectionRef') sectionRef: QueryList; 10 | config: any; 11 | fullpageApi: any; 12 | sections = [1]; 13 | 14 | constructor() { 15 | // this is just an example => for more details on config please visit fullPage.js docs 16 | this.config = { 17 | licenseKey: 'YOUR LICENSE KEY HERE', 18 | anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'], 19 | menu: '#menu', 20 | navigation: true, 21 | sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'], 22 | }; 23 | } 24 | 25 | ngOnInit() { 26 | } 27 | 28 | ngAfterViewInit() { 29 | this.sectionRef.changes.subscribe(() => { 30 | this.ngForRendred(); 31 | }); 32 | } 33 | 34 | getRef(fullPageRef) { 35 | this.fullpageApi = fullPageRef; 36 | } 37 | 38 | add() { 39 | const twoDigits = Math.random() * 100; 40 | this.sections.push( Math.round(twoDigits) ); 41 | } 42 | 43 | ngForRendred() { 44 | console.log('ngFor dom render is done'); 45 | this.fullpageApi.build(); 46 | } 47 | 48 | } 49 | -------------------------------------------------------------------------------- /demo/angular13/app/examples/scrolloverflow/scrolloverflow.component.scss: -------------------------------------------------------------------------------- 1 | .section { 2 | text-align:center; 3 | font-size: 3em; 4 | } 5 | .section p{ 6 | width: 600px; 7 | margin: 0 auto; 8 | } 9 | 10 | #menu li { 11 | display:inline-block; 12 | margin: 10px; 13 | color: #000; 14 | background:#fff; 15 | background: rgba(255,255,255, 0.5); 16 | -webkit-border-radius: 10px; 17 | border-radius: 10px; 18 | } 19 | #menu li.active{ 20 | background:#666; 21 | background: rgba(0,0,0, 0.5); 22 | color: #fff; 23 | } 24 | #menu li a{ 25 | text-decoration:none; 26 | color: #000; 27 | } 28 | #menu li.active a:hover{ 29 | color: #000; 30 | } 31 | #menu li:hover{ 32 | background: rgba(255,255,255, 0.8); 33 | } 34 | #menu li a, 35 | #menu li.active a{ 36 | padding: 9px 18px; 37 | display:block; 38 | } 39 | #menu li.active a{ 40 | color: #fff; 41 | } 42 | #menu{ 43 | position:fixed; 44 | top:0; 45 | left:0; 46 | height: 40px; 47 | z-index: 70; 48 | width: 100%; 49 | padding: 0; 50 | margin:0; 51 | } 52 | -------------------------------------------------------------------------------- /demo/angular13/app/examples/scrolloverflow/scrolloverflow.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit} from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-scrolloverflow', 5 | templateUrl: './scrolloverflow.component.html', 6 | styleUrls: ['./scrolloverflow.component.scss'] 7 | }) 8 | export class ScrollOverflowExampleComponent implements OnInit { 9 | config; 10 | fullpageApi; 11 | 12 | constructor() { 13 | 14 | // this is just an example => for more details on config please visit fullPage.js docs 15 | this.config = { 16 | licenseKey: 'YOUR LICENSE KEY HERE', 17 | anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'], 18 | menu: '#menu', 19 | scrollOverflow: true, 20 | sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'], 21 | 22 | // events callback 23 | afterLoad: (origin, destination, direction) => { 24 | // console.log(destination); 25 | }, 26 | afterRender: () => { 27 | // console.log('afterRender'); 28 | }, 29 | afterResize: (width, height) => { 30 | // console.log('afterResize' + width + ' ' + height); 31 | }, 32 | afterSlideLoad: (section, origin, destination, direction) => { 33 | // console.log(destination); 34 | } 35 | }; 36 | } 37 | 38 | ngOnInit() { 39 | } 40 | 41 | getRef(fullPageRef) { 42 | this.fullpageApi = fullPageRef; 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /demo/angular13/app/examples/type-definitions/type.component.html: -------------------------------------------------------------------------------- 1 |
2 |

Section 1

3 |
4 |

Section 2

5 | 6 |
7 |
8 |

Slide 2.1

9 |

Slide 3.2

10 |

Slide 3.3

11 |
12 |
13 |

Section 4

14 | 15 |
16 |
17 | -------------------------------------------------------------------------------- /demo/angular13/app/examples/type-definitions/type.component.scss: -------------------------------------------------------------------------------- 1 | .section { 2 | text-align:center; 3 | font-size: 3em; 4 | } -------------------------------------------------------------------------------- /demo/angular13/app/examples/type-definitions/type.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { fullpageOptions, fullpageApi } from 'fullpage.js/dist/fullpage.extensions.min'; 3 | 4 | @Component({ 5 | selector: 'app-type', 6 | templateUrl: './type.component.html', 7 | styleUrls: ['./type.component.scss'] 8 | }) 9 | export class TypeExampleComponent implements OnInit { 10 | config: fullpageOptions; 11 | fullpageApi: fullpageApi; 12 | 13 | constructor() { 14 | 15 | // this is just an example => for more details on config please visit fullPage.js docs 16 | this.config = { 17 | licenseKey: 'YOUR LICENSE KEY HERE', 18 | anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'], 19 | menu: '#menu', 20 | scrollOverflow: true, 21 | sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'], 22 | credits: { 23 | enabled: false, 24 | }, 25 | 26 | // events callback 27 | afterLoad: (origin, destination, direction) => { 28 | console.log(destination); 29 | }, 30 | afterRender: () => { 31 | console.log('afterRender'); 32 | }, 33 | afterResize: (width, height) => { 34 | console.log('afterResize' + width + ' ' + height); 35 | }, 36 | afterSlideLoad: (section, origin, destination, direction) => { 37 | console.log(destination); 38 | } 39 | }; 40 | } 41 | 42 | ngOnInit() { 43 | } 44 | 45 | getRef(fullPageRef) { 46 | this.fullpageApi = fullPageRef; 47 | } 48 | 49 | } 50 | -------------------------------------------------------------------------------- /demo/angular13/app/examples/using-directive/using-directive.html: -------------------------------------------------------------------------------- 1 |
2 |

Section 1

3 |

Section 2

4 |
5 |

Slide 2.1

6 |

Slide 3.2

7 |

Slide 3.3

8 |
9 |

Section 4

10 |
-------------------------------------------------------------------------------- /demo/angular13/app/examples/using-directive/using-directive.scss: -------------------------------------------------------------------------------- 1 | .section { 2 | text-align:center; 3 | font-size: 3em; 4 | } -------------------------------------------------------------------------------- /demo/angular13/app/examples/using-directive/using-directive.ts: -------------------------------------------------------------------------------- 1 | import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core'; 2 | import { ɵa as FullpageDirective } from '@fullpage/angular-fullpage'; 3 | import { fullpageOptions } from 'fullpage.js/dist/fullpage.extensions.min'; 4 | 5 | 6 | @Component({ 7 | selector: 'app-using-directive', 8 | templateUrl: './using-directive.html', 9 | styleUrls: ['./using-directive.scss'], 10 | }) 11 | export class UsingDirectiveComponent implements OnInit, AfterViewInit { 12 | config: fullpageOptions; 13 | fullpageApi: any; 14 | 15 | @ViewChild(FullpageDirective) 16 | fullpageDirective: FullpageDirective; 17 | 18 | constructor() { 19 | 20 | // this is just an example => for more details on config please visit fullPage.js docs 21 | this.config = { 22 | licenseKey: 'asdf', 23 | sectionsColor: ['#7BAABE', 'whitesmoke', '#7BAABE', 'whitesmoke', '#7BAABE'], 24 | anchors: ['p1', 'p2', 'p3', 'p4', 'p5'], 25 | navigation: true, 26 | credits: { 27 | enabled: false, 28 | }, 29 | }; 30 | } 31 | 32 | ngAfterViewInit() { 33 | this.fullpageApi = this.fullpageDirective.fullpage_api; 34 | } 35 | 36 | ngOnInit() { 37 | } 38 | 39 | } 40 | -------------------------------------------------------------------------------- /demo/angular13/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /demo/angular13/environments/environment.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: false 3 | }; -------------------------------------------------------------------------------- /demo/angular13/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Fullpage 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /demo/angular13/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.error(err)); 13 | 14 | -------------------------------------------------------------------------------- /demo/angular13/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@fullpage/angular-fullpage-demo-angular13", 3 | "version": "0.0.1", 4 | "description": "Official Angular wrapper for fullPage.js", 5 | "author": "vh13294", 6 | "contributors": [ 7 | "vh13294", 8 | "alvarotrigo", 9 | "alidihaw" 10 | ], 11 | "homepage": "https://github.com/alvarotrigo/angular-fullpage", 12 | "repository": { 13 | "type": "git", 14 | "url": "https://github.com/alvarotrigo/angular-fullpage" 15 | }, 16 | "license": "GPL-3.0", 17 | "private": false, 18 | "main": "dist/@fullpage/angular-fullpage", 19 | "files": [ 20 | "dist" 21 | ], 22 | "scripts": { 23 | "ng": "ng", 24 | "start": "ng serve", 25 | "build": "ng build", 26 | "test": "ng test", 27 | "lint": "ng lint", 28 | "e2e": "ng e2e" 29 | }, 30 | "dependencies": { 31 | "@angular/animations": "13.0.0", 32 | "@angular/common": "13.0.0", 33 | "@angular/compiler": "13.0.0", 34 | "@angular/core": "13.0.0", 35 | "@angular/forms": "13.0.0", 36 | "@angular/platform-browser": "13.0.0", 37 | "@angular/platform-browser-dynamic": "13.0.0", 38 | "@angular/router": "13.0.0", 39 | "@fullpage/angular-fullpage": "0.1.6", 40 | "fullpage.js": "4.0.35", 41 | "rxjs": "~6.6.0", 42 | "zone.js": "~0.11.4" 43 | }, 44 | "devDependencies": { 45 | "@angular-devkit/build-angular": "13.0.0", 46 | "@angular/cli": "13.0.0", 47 | "@angular/compiler-cli": "13.0.0", 48 | "@types/node": "^12.11.1", 49 | "codelyzer": "~6.0.2", 50 | "ts-node": "~8.0.0", 51 | "tslib": "^2.4.0", 52 | "tslint": "~5.11.0", 53 | "typescript": "4.4.4" 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /demo/angular13/styles.scss: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | @import url(~fullpage.js/dist/fullpage.min.css); 3 | 4 | // change default css 5 | .fp-controlArrow { 6 | padding: 0 1%; 7 | } 8 | -------------------------------------------------------------------------------- /demo/angular13/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "types": [] 6 | }, 7 | "files": [ 8 | "main.ts", 9 | "polyfills.ts" 10 | ], 11 | "exclude": [ 12 | "test.ts", 13 | "**/*.spec.ts", 14 | ] 15 | } -------------------------------------------------------------------------------- /demo/angular13/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "sourceMap": true, 7 | "declaration": false, 8 | "module": "ES2015", 9 | "moduleResolution": "node", 10 | "emitDecoratorMetadata": true, 11 | "experimentalDecorators": true, 12 | "target": "ES2015", 13 | "typeRoots": [ 14 | "node_modules/@types" 15 | ], 16 | "lib": [ 17 | "ES2015", 18 | "dom" 19 | ], 20 | "paths": { 21 | } 22 | } 23 | } -------------------------------------------------------------------------------- /demo/angular13/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tslint.json", 3 | "rules": { 4 | "directive-selector": [ 5 | true, 6 | "attribute", 7 | "app", 8 | "camelCase" 9 | ], 10 | "component-selector": [ 11 | true, 12 | "element", 13 | "app", 14 | "kebab-case" 15 | ] 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /demo/angular14/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /tmp 5 | /out-tsc 6 | 7 | # dependencies 8 | /node_modules 9 | /src/node_modules 10 | 11 | # IDEs and editors 12 | /.idea 13 | .project 14 | .classpath 15 | .c9/ 16 | *.launch 17 | *.angular 18 | .settings/ 19 | *.sublime-workspace 20 | .vscode/* 21 | 22 | # IDE - VSCode 23 | .vscode/* 24 | !.vscode/settings.json 25 | !.vscode/tasks.json 26 | !.vscode/launch.json 27 | !.vscode/extensions.json 28 | 29 | # misc 30 | /.sass-cache 31 | /connect.lock 32 | /coverage 33 | /libpeerconnection.log 34 | npm-debug.log 35 | yarn-error.log 36 | testem.log 37 | /typings 38 | 39 | # System Files 40 | .DS_Store 41 | Thumbs.db 42 | -------------------------------------------------------------------------------- /demo/angular14/README.md: -------------------------------------------------------------------------------- 1 | # Examples 2 | 3 | In order to run the examples you'll have to first install the dependencies: 4 | 5 | ```shell 6 | # install dependencies 7 | npm install 8 | ``` 9 | 10 | Then run them with: 11 | 12 | ```shell 13 | # serve examples 14 | npm run start 15 | ``` 16 | 17 | A page will open in the browser, where you'll be able to swap between examles by accessing one or anothe URL: 18 | 19 | - http://localhost:4200/ 20 | - http://localhost:4200/dynamicChanges 21 | - http://localhost:4200/scrollOverflow 22 | - http://localhost:4200/typeDefinitions 23 | - http://localhost:4200/dynamicNgFor 24 | - http://localhost:4200/usingDirective -------------------------------------------------------------------------------- /demo/angular14/app/app-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | import { BasicExampleComponent } from './examples/basic/basic.component'; 4 | import { DynamicChangesExampleComponent } from './examples/dynamic-changes/dynamic-changes.component'; 5 | import { ScrollOverflowExampleComponent } from './examples/scrolloverflow/scrolloverflow.component'; 6 | import { TypeExampleComponent } from './examples/type-definitions/type.component'; 7 | import { DynamicNgForComponent } from './examples/dynamic-ng-for/dynamic-ng-for.component'; 8 | import { UsingDirectiveComponent } from './examples/using-directive/using-directive'; 9 | 10 | 11 | const routes: Routes = [ 12 | { path: '', component: BasicExampleComponent, pathMatch: 'full' }, 13 | { path: 'dynamicChanges', component: DynamicChangesExampleComponent }, 14 | { path: 'scrollOverflow', component: ScrollOverflowExampleComponent }, 15 | { path: 'typeDefinitions', component: TypeExampleComponent }, 16 | { path: 'dynamicNgFor', component: DynamicNgForComponent }, 17 | { path: 'usingDirective', component: UsingDirectiveComponent } 18 | ]; 19 | 20 | @NgModule({ 21 | imports: [RouterModule.forRoot(routes)], 22 | exports: [RouterModule] 23 | }) 24 | export class AppRoutingModule { } 25 | -------------------------------------------------------------------------------- /demo/angular14/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | template: `` 6 | }) 7 | export class AppComponent { 8 | 9 | constructor() {} 10 | 11 | } 12 | -------------------------------------------------------------------------------- /demo/angular14/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { BrowserModule } from '@angular/platform-browser'; 2 | import { NgModule } from '@angular/core'; 3 | 4 | import { AppRoutingModule } from './app-routing.module'; 5 | import { AppComponent } from './app.component'; 6 | 7 | import { BasicExampleComponent } from './examples/basic/basic.component'; 8 | import { DynamicChangesExampleComponent } from './examples/dynamic-changes/dynamic-changes.component'; 9 | import { ScrollOverflowExampleComponent } from './examples/scrolloverflow/scrolloverflow.component'; 10 | import { TypeExampleComponent } from './examples/type-definitions/type.component'; 11 | import { DynamicNgForComponent } from './examples/dynamic-ng-for/dynamic-ng-for.component'; 12 | import { UsingDirectiveComponent } from './examples/using-directive/using-directive'; 13 | 14 | import { AngularFullpageModule } from '@fullpage/angular-fullpage'; 15 | 16 | @NgModule({ 17 | declarations: [ 18 | AppComponent, 19 | BasicExampleComponent, 20 | DynamicChangesExampleComponent, 21 | ScrollOverflowExampleComponent, 22 | TypeExampleComponent, 23 | DynamicNgForComponent, 24 | UsingDirectiveComponent 25 | ], 26 | imports: [ 27 | BrowserModule, 28 | AppRoutingModule, 29 | AngularFullpageModule, 30 | 31 | ], 32 | providers: [], 33 | bootstrap: [AppComponent] 34 | }) 35 | export class AppModule { } 36 | -------------------------------------------------------------------------------- /demo/angular14/app/examples/basic/basic.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 10 |

Section 1

11 |
12 |

Section 2

13 |
14 |

Slide 2.1

15 |

Slide 3.2

16 |

Slide 3.3

17 |
18 |

Section 4

19 |
20 | -------------------------------------------------------------------------------- /demo/angular14/app/examples/basic/basic.component.scss: -------------------------------------------------------------------------------- 1 | .section { 2 | text-align:center; 3 | font-size: 3em; 4 | } 5 | .examples{ 6 | position: fixed; 7 | top: 0; 8 | left: 0; 9 | right: 0; 10 | margin: 0; 11 | padding: 0; 12 | z-index: 999; 13 | } 14 | .examples li{ 15 | display: inline-block; 16 | } 17 | .examples li a{ 18 | color: white; 19 | text-decoration: none; 20 | font-family: arial; 21 | font-size: 0.5em; 22 | margin-right: 2em; 23 | } 24 | .examples li a:hover{ 25 | text-decoration: underline; 26 | } -------------------------------------------------------------------------------- /demo/angular14/app/examples/basic/basic.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-basic', 5 | templateUrl: './basic.component.html', 6 | styleUrls: ['./basic.component.scss'] 7 | }) 8 | export class BasicExampleComponent implements OnInit { 9 | config; 10 | fullpageApi; 11 | 12 | constructor() { 13 | 14 | // this is just an example => for more details on config please visit fullPage.js docs 15 | this.config = { 16 | licenseKey: 'YOUR LICENSE KEY HERE', 17 | sectionsColor: ['#7BAABE', 'whitesmoke', '#7BAABE', 'whitesmoke', '#7BAABE'], 18 | anchors: ['p1', 'p2', 'p3', 'p4', 'p5'], 19 | navigation: true, 20 | }; 21 | } 22 | 23 | ngOnInit() { 24 | } 25 | 26 | getRef(fullPageRef) { 27 | this.fullpageApi = fullPageRef; 28 | } 29 | 30 | } 31 | -------------------------------------------------------------------------------- /demo/angular14/app/examples/dynamic-changes/dynamic-changes.component.html: -------------------------------------------------------------------------------- 1 | 7 | 8 |
9 |

Section 1

10 |
11 |

Section 2

12 | 13 | 14 | 15 |
16 |
17 |

Slide 3.1

18 |

Slide 3.2

19 |
20 |

Slide 3.3

21 | name 22 |
23 |
24 |
25 |

Section 4

26 | 27 | 28 | 29 |
30 |
-------------------------------------------------------------------------------- /demo/angular14/app/examples/dynamic-changes/dynamic-changes.component.scss: -------------------------------------------------------------------------------- 1 | .section { 2 | text-align:center; 3 | font-size: 3em; 4 | } 5 | 6 | #menu li { 7 | display:inline-block; 8 | margin: 10px; 9 | color: #000; 10 | background:#fff; 11 | background: rgba(255,255,255, 0.5); 12 | -webkit-border-radius: 10px; 13 | border-radius: 10px; 14 | } 15 | #menu li.active{ 16 | background:#666; 17 | background: rgba(0,0,0, 0.5); 18 | color: #fff; 19 | } 20 | #menu li a{ 21 | text-decoration:none; 22 | color: #000; 23 | } 24 | #menu li.active a:hover{ 25 | color: #000; 26 | } 27 | #menu li:hover{ 28 | background: rgba(255,255,255, 0.8); 29 | } 30 | #menu li a, 31 | #menu li.active a{ 32 | padding: 9px 18px; 33 | display:block; 34 | } 35 | #menu li.active a{ 36 | color: #fff; 37 | } 38 | #menu{ 39 | position:fixed; 40 | top:0; 41 | left:0; 42 | height: 40px; 43 | z-index: 70; 44 | width: 100%; 45 | padding: 0; 46 | margin:0; 47 | } 48 | -------------------------------------------------------------------------------- /demo/angular14/app/examples/dynamic-ng-for/dynamic-ng-for.component.html: -------------------------------------------------------------------------------- 1 | 7 | 8 |
9 |
10 |

Section {{section}}

11 | 12 |
13 |
-------------------------------------------------------------------------------- /demo/angular14/app/examples/dynamic-ng-for/dynamic-ng-for.component.scss: -------------------------------------------------------------------------------- 1 | .section { 2 | text-align:center; 3 | font-size: 3em; 4 | } 5 | 6 | #menu li { 7 | display:inline-block; 8 | margin: 10px; 9 | color: #000; 10 | background:#fff; 11 | background: rgba(255,255,255, 0.5); 12 | -webkit-border-radius: 10px; 13 | border-radius: 10px; 14 | } 15 | #menu li.active{ 16 | background:#666; 17 | background: rgba(0,0,0, 0.5); 18 | color: #fff; 19 | } 20 | #menu li a{ 21 | text-decoration:none; 22 | color: #000; 23 | } 24 | #menu li.active a:hover{ 25 | color: #000; 26 | } 27 | #menu li:hover{ 28 | background: rgba(255,255,255, 0.8); 29 | } 30 | #menu li a, 31 | #menu li.active a{ 32 | padding: 9px 18px; 33 | display:block; 34 | } 35 | #menu li.active a{ 36 | color: #fff; 37 | } 38 | #menu{ 39 | position:fixed; 40 | top:0; 41 | left:0; 42 | height: 40px; 43 | z-index: 70; 44 | width: 100%; 45 | padding: 0; 46 | margin:0; 47 | } 48 | -------------------------------------------------------------------------------- /demo/angular14/app/examples/dynamic-ng-for/dynamic-ng-for.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, AfterViewInit, ViewChildren, QueryList } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-dynamic-ng-for', 5 | templateUrl: './dynamic-ng-for.component.html', 6 | styleUrls: ['./dynamic-ng-for.component.scss'] 7 | }) 8 | export class DynamicNgForComponent implements OnInit, AfterViewInit { 9 | @ViewChildren('sectionRef') sectionRef: QueryList; 10 | config: any; 11 | fullpageApi: any; 12 | sections = [1]; 13 | 14 | constructor() { 15 | // this is just an example => for more details on config please visit fullPage.js docs 16 | this.config = { 17 | licenseKey: 'YOUR LICENSE KEY HERE', 18 | anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'], 19 | menu: '#menu', 20 | navigation: true, 21 | sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'], 22 | }; 23 | } 24 | 25 | ngOnInit() { 26 | } 27 | 28 | ngAfterViewInit() { 29 | this.sectionRef.changes.subscribe(() => { 30 | this.ngForRendred(); 31 | }); 32 | } 33 | 34 | getRef(fullPageRef) { 35 | this.fullpageApi = fullPageRef; 36 | } 37 | 38 | add() { 39 | const twoDigits = Math.random() * 100; 40 | this.sections.push( Math.round(twoDigits) ); 41 | } 42 | 43 | ngForRendred() { 44 | console.log('ngFor dom render is done'); 45 | this.fullpageApi.build(); 46 | } 47 | 48 | } 49 | -------------------------------------------------------------------------------- /demo/angular14/app/examples/scrolloverflow/scrolloverflow.component.scss: -------------------------------------------------------------------------------- 1 | .section { 2 | text-align:center; 3 | font-size: 3em; 4 | } 5 | .section p{ 6 | width: 600px; 7 | margin: 0 auto; 8 | } 9 | 10 | #menu li { 11 | display:inline-block; 12 | margin: 10px; 13 | color: #000; 14 | background:#fff; 15 | background: rgba(255,255,255, 0.5); 16 | -webkit-border-radius: 10px; 17 | border-radius: 10px; 18 | } 19 | #menu li.active{ 20 | background:#666; 21 | background: rgba(0,0,0, 0.5); 22 | color: #fff; 23 | } 24 | #menu li a{ 25 | text-decoration:none; 26 | color: #000; 27 | } 28 | #menu li.active a:hover{ 29 | color: #000; 30 | } 31 | #menu li:hover{ 32 | background: rgba(255,255,255, 0.8); 33 | } 34 | #menu li a, 35 | #menu li.active a{ 36 | padding: 9px 18px; 37 | display:block; 38 | } 39 | #menu li.active a{ 40 | color: #fff; 41 | } 42 | #menu{ 43 | position:fixed; 44 | top:0; 45 | left:0; 46 | height: 40px; 47 | z-index: 70; 48 | width: 100%; 49 | padding: 0; 50 | margin:0; 51 | } 52 | -------------------------------------------------------------------------------- /demo/angular14/app/examples/scrolloverflow/scrolloverflow.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit} from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-scrolloverflow', 5 | templateUrl: './scrolloverflow.component.html', 6 | styleUrls: ['./scrolloverflow.component.scss'] 7 | }) 8 | export class ScrollOverflowExampleComponent implements OnInit { 9 | config; 10 | fullpageApi; 11 | 12 | constructor() { 13 | 14 | // this is just an example => for more details on config please visit fullPage.js docs 15 | this.config = { 16 | licenseKey: 'YOUR LICENSE KEY HERE', 17 | anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'], 18 | menu: '#menu', 19 | scrollOverflow: true, 20 | sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'], 21 | 22 | // events callback 23 | afterLoad: (origin, destination, direction) => { 24 | // console.log(destination); 25 | }, 26 | afterRender: () => { 27 | // console.log('afterRender'); 28 | }, 29 | afterResize: (width, height) => { 30 | // console.log('afterResize' + width + ' ' + height); 31 | }, 32 | afterSlideLoad: (section, origin, destination, direction) => { 33 | // console.log(destination); 34 | } 35 | }; 36 | } 37 | 38 | ngOnInit() { 39 | } 40 | 41 | getRef(fullPageRef) { 42 | this.fullpageApi = fullPageRef; 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /demo/angular14/app/examples/type-definitions/type.component.html: -------------------------------------------------------------------------------- 1 |
2 |

Section 1

3 |
4 |

Section 2

5 | 6 |
7 |
8 |

Slide 2.1

9 |

Slide 3.2

10 |

Slide 3.3

11 |
12 |
13 |

Section 4

14 | 15 |
16 |
17 | -------------------------------------------------------------------------------- /demo/angular14/app/examples/type-definitions/type.component.scss: -------------------------------------------------------------------------------- 1 | .section { 2 | text-align:center; 3 | font-size: 3em; 4 | } -------------------------------------------------------------------------------- /demo/angular14/app/examples/type-definitions/type.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { fullpageOptions, fullpageApi } from 'fullpage.js/dist/fullpage.extensions.min'; 3 | 4 | @Component({ 5 | selector: 'app-type', 6 | templateUrl: './type.component.html', 7 | styleUrls: ['./type.component.scss'] 8 | }) 9 | export class TypeExampleComponent implements OnInit { 10 | config: fullpageOptions; 11 | fullpageApi: fullpageApi; 12 | 13 | constructor() { 14 | 15 | // this is just an example => for more details on config please visit fullPage.js docs 16 | this.config = { 17 | licenseKey: 'YOUR LICENSE KEY HERE', 18 | anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'], 19 | menu: '#menu', 20 | scrollOverflow: true, 21 | sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'], 22 | credits: { 23 | enabled: false, 24 | }, 25 | 26 | // events callback 27 | afterLoad: (origin, destination, direction) => { 28 | console.log(destination); 29 | }, 30 | afterRender: () => { 31 | console.log('afterRender'); 32 | }, 33 | afterResize: (width, height) => { 34 | console.log('afterResize' + width + ' ' + height); 35 | }, 36 | afterSlideLoad: (section, origin, destination, direction) => { 37 | console.log(destination); 38 | } 39 | }; 40 | } 41 | 42 | ngOnInit() { 43 | } 44 | 45 | getRef(fullPageRef) { 46 | this.fullpageApi = fullPageRef; 47 | } 48 | 49 | } 50 | -------------------------------------------------------------------------------- /demo/angular14/app/examples/using-directive/using-directive.html: -------------------------------------------------------------------------------- 1 |
2 |

Section 1

3 |

Section 2

4 |
5 |

Slide 2.1

6 |

Slide 3.2

7 |

Slide 3.3

8 |
9 |

Section 4

10 |
-------------------------------------------------------------------------------- /demo/angular14/app/examples/using-directive/using-directive.scss: -------------------------------------------------------------------------------- 1 | .section { 2 | text-align:center; 3 | font-size: 3em; 4 | } -------------------------------------------------------------------------------- /demo/angular14/app/examples/using-directive/using-directive.ts: -------------------------------------------------------------------------------- 1 | import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core'; 2 | import { ɵa as FullpageDirective} from '@fullpage/angular-fullpage'; 3 | import { fullpageOptions } from 'fullpage.js/dist/fullpage.extensions.min'; 4 | 5 | 6 | @Component({ 7 | selector: 'app-using-directive', 8 | templateUrl: './using-directive.html', 9 | styleUrls: ['./using-directive.scss'], 10 | }) 11 | export class UsingDirectiveComponent implements OnInit, AfterViewInit { 12 | config: fullpageOptions; 13 | fullpageApi; 14 | 15 | @ViewChild(FullpageDirective) 16 | fullpageDirective: FullpageDirective; 17 | 18 | constructor() { 19 | 20 | // this is just an example => for more details on config please visit fullPage.js docs 21 | this.config = { 22 | licenseKey: 'asdf', 23 | sectionsColor: ['#7BAABE', 'whitesmoke', '#7BAABE', 'whitesmoke', '#7BAABE'], 24 | anchors: ['p1', 'p2', 'p3', 'p4', 'p5'], 25 | navigation: true, 26 | credits: { 27 | enabled: false, 28 | }, 29 | }; 30 | } 31 | 32 | ngAfterViewInit() { 33 | this.fullpageApi = this.fullpageDirective.fullpage_api; 34 | } 35 | 36 | ngOnInit() { 37 | } 38 | 39 | } 40 | -------------------------------------------------------------------------------- /demo/angular14/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /demo/angular14/environments/environment.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: false 3 | }; -------------------------------------------------------------------------------- /demo/angular14/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Fullpage 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /demo/angular14/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.error(err)); 13 | 14 | -------------------------------------------------------------------------------- /demo/angular14/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@fullpage/angular-fullpage-demo-angular14", 3 | "version": "0.0.1", 4 | "description": "Official Angular wrapper for fullPage.js", 5 | "author": "vh13294", 6 | "contributors": [ 7 | "vh13294", 8 | "alvarotrigo", 9 | "alidihaw" 10 | ], 11 | "homepage": "https://github.com/alvarotrigo/angular-fullpage", 12 | "repository": { 13 | "type": "git", 14 | "url": "https://github.com/alvarotrigo/angular-fullpage" 15 | }, 16 | "license": "GPL-3.0", 17 | "private": false, 18 | "main": "dist/@fullpage/angular-fullpage", 19 | "files": [ 20 | "dist" 21 | ], 22 | "scripts": { 23 | "ng": "ng", 24 | "start": "ng serve", 25 | "build": "ng build", 26 | "test": "ng test", 27 | "lint": "ng lint", 28 | "e2e": "ng e2e" 29 | }, 30 | "dependencies": { 31 | "@angular/animations": "14.0.0", 32 | "@angular/common": "14.0.0", 33 | "@angular/compiler": "14.0.0", 34 | "@angular/core": "14.0.0", 35 | "@angular/forms": "14.0.0", 36 | "@angular/platform-browser": "14.0.0", 37 | "@angular/platform-browser-dynamic": "14.0.0", 38 | "@angular/router": "14.0.0", 39 | "@fullpage/angular-fullpage": "0.1.6", 40 | "fullpage.js": "4.0.35", 41 | "rxjs": "~6.6.0", 42 | "zone.js": "~0.11.4" 43 | }, 44 | "devDependencies": { 45 | "@angular-devkit/build-angular": "14.0.0", 46 | "@angular/cli": "14.0.0", 47 | "@angular/compiler-cli": "14.0.0", 48 | "@types/node": "^12.11.1", 49 | "codelyzer": "~6.0.2", 50 | "ts-node": "~8.0.0", 51 | "tslib": "^2.4.0", 52 | "tslint": "~5.11.0", 53 | "typescript": "4.6.2" 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /demo/angular14/styles.scss: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | @import url(~fullpage.js/dist/fullpage.min.css); 3 | 4 | // change default css 5 | .fp-controlArrow { 6 | padding: 0 1%; 7 | } 8 | -------------------------------------------------------------------------------- /demo/angular14/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "types": [] 6 | }, 7 | "files": [ 8 | "main.ts", 9 | "polyfills.ts" 10 | ], 11 | "exclude": [ 12 | "test.ts", 13 | "**/*.spec.ts", 14 | ] 15 | } -------------------------------------------------------------------------------- /demo/angular14/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "sourceMap": true, 7 | "declaration": false, 8 | "module": "es2022", 9 | "moduleResolution": "node", 10 | "emitDecoratorMetadata": true, 11 | "experimentalDecorators": true, 12 | "target": "es2022", 13 | "typeRoots": [ 14 | "node_modules/@types" 15 | ], 16 | "lib": [ 17 | "es2022", 18 | "dom" 19 | ], 20 | "paths": { 21 | } 22 | } 23 | } -------------------------------------------------------------------------------- /demo/angular14/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tslint.json", 3 | "rules": { 4 | "directive-selector": [ 5 | true, 6 | "attribute", 7 | "app", 8 | "camelCase" 9 | ], 10 | "component-selector": [ 11 | true, 12 | "element", 13 | "app", 14 | "kebab-case" 15 | ] 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /demo/angular15/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /tmp 5 | /out-tsc 6 | 7 | # dependencies 8 | /node_modules 9 | /src/node_modules 10 | 11 | # IDEs and editors 12 | /.idea 13 | .project 14 | .classpath 15 | .c9/ 16 | *.launch 17 | *.angular 18 | .settings/ 19 | *.sublime-workspace 20 | .vscode/* 21 | 22 | # IDE - VSCode 23 | .vscode/* 24 | !.vscode/settings.json 25 | !.vscode/tasks.json 26 | !.vscode/launch.json 27 | !.vscode/extensions.json 28 | 29 | # misc 30 | /.sass-cache 31 | /connect.lock 32 | /coverage 33 | /libpeerconnection.log 34 | npm-debug.log 35 | yarn-error.log 36 | testem.log 37 | /typings 38 | 39 | # System Files 40 | .DS_Store 41 | Thumbs.db 42 | -------------------------------------------------------------------------------- /demo/angular15/README.md: -------------------------------------------------------------------------------- 1 | # Examples 2 | 3 | In order to run the examples you'll have to first install the dependencies: 4 | 5 | ```shell 6 | # install dependencies 7 | npm install 8 | ``` 9 | 10 | Then run them with: 11 | 12 | ```shell 13 | # serve examples 14 | npm run start 15 | ``` 16 | 17 | A page will open in the browser, where you'll be able to swap between examles by accessing one or anothe URL: 18 | 19 | - http://localhost:4200/ 20 | - http://localhost:4200/dynamicChanges 21 | - http://localhost:4200/scrollOverflow 22 | - http://localhost:4200/typeDefinitions 23 | - http://localhost:4200/dynamicNgFor 24 | - http://localhost:4200/usingDirective -------------------------------------------------------------------------------- /demo/angular15/app/app-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | import { BasicExampleComponent } from './examples/basic/basic.component'; 4 | import { DynamicChangesExampleComponent } from './examples/dynamic-changes/dynamic-changes.component'; 5 | import { ScrollOverflowExampleComponent } from './examples/scrolloverflow/scrolloverflow.component'; 6 | import { TypeExampleComponent } from './examples/type-definitions/type.component'; 7 | import { DynamicNgForComponent } from './examples/dynamic-ng-for/dynamic-ng-for.component'; 8 | import { UsingDirectiveComponent } from './examples/using-directive/using-directive'; 9 | 10 | 11 | const routes: Routes = [ 12 | { path: '', component: BasicExampleComponent, pathMatch: 'full' }, 13 | { path: 'dynamicChanges', component: DynamicChangesExampleComponent }, 14 | { path: 'scrollOverflow', component: ScrollOverflowExampleComponent }, 15 | { path: 'typeDefinitions', component: TypeExampleComponent }, 16 | { path: 'dynamicNgFor', component: DynamicNgForComponent }, 17 | { path: 'usingDirective', component: UsingDirectiveComponent } 18 | ]; 19 | 20 | @NgModule({ 21 | imports: [RouterModule.forRoot(routes)], 22 | exports: [RouterModule] 23 | }) 24 | export class AppRoutingModule { } 25 | -------------------------------------------------------------------------------- /demo/angular15/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | template: `` 6 | }) 7 | export class AppComponent { 8 | 9 | constructor() {} 10 | 11 | } 12 | -------------------------------------------------------------------------------- /demo/angular15/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { BrowserModule } from '@angular/platform-browser'; 2 | import { NgModule } from '@angular/core'; 3 | 4 | import { AppRoutingModule } from './app-routing.module'; 5 | import { AppComponent } from './app.component'; 6 | 7 | import { BasicExampleComponent } from './examples/basic/basic.component'; 8 | import { DynamicChangesExampleComponent } from './examples/dynamic-changes/dynamic-changes.component'; 9 | import { ScrollOverflowExampleComponent } from './examples/scrolloverflow/scrolloverflow.component'; 10 | import { TypeExampleComponent } from './examples/type-definitions/type.component'; 11 | import { DynamicNgForComponent } from './examples/dynamic-ng-for/dynamic-ng-for.component'; 12 | import { UsingDirectiveComponent } from './examples/using-directive/using-directive'; 13 | 14 | import { AngularFullpageModule } from '@fullpage/angular-fullpage'; 15 | 16 | @NgModule({ 17 | declarations: [ 18 | AppComponent, 19 | BasicExampleComponent, 20 | DynamicChangesExampleComponent, 21 | ScrollOverflowExampleComponent, 22 | TypeExampleComponent, 23 | DynamicNgForComponent, 24 | UsingDirectiveComponent 25 | ], 26 | imports: [ 27 | BrowserModule, 28 | AppRoutingModule, 29 | AngularFullpageModule, 30 | 31 | ], 32 | providers: [], 33 | bootstrap: [AppComponent] 34 | }) 35 | export class AppModule { } 36 | -------------------------------------------------------------------------------- /demo/angular15/app/examples/basic/basic.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 10 |

Section 1

11 |
12 |

Section 2

13 |
14 |

Slide 2.1

15 |

Slide 3.2

16 |

Slide 3.3

17 |
18 |

Section 4

19 |
20 | -------------------------------------------------------------------------------- /demo/angular15/app/examples/basic/basic.component.scss: -------------------------------------------------------------------------------- 1 | .section { 2 | text-align:center; 3 | font-size: 3em; 4 | } 5 | .examples{ 6 | position: fixed; 7 | top: 0; 8 | left: 0; 9 | right: 0; 10 | margin: 0; 11 | padding: 0; 12 | z-index: 999; 13 | } 14 | .examples li{ 15 | display: inline-block; 16 | } 17 | .examples li a{ 18 | color: white; 19 | text-decoration: none; 20 | font-family: arial; 21 | font-size: 0.5em; 22 | margin-right: 2em; 23 | } 24 | .examples li a:hover{ 25 | text-decoration: underline; 26 | } -------------------------------------------------------------------------------- /demo/angular15/app/examples/basic/basic.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-basic', 5 | templateUrl: './basic.component.html', 6 | styleUrls: ['./basic.component.scss'] 7 | }) 8 | export class BasicExampleComponent implements OnInit { 9 | config; 10 | fullpageApi; 11 | 12 | constructor() { 13 | 14 | // this is just an example => for more details on config please visit fullPage.js docs 15 | this.config = { 16 | licenseKey: 'YOUR LICENSE KEY HERE', 17 | sectionsColor: ['#7BAABE', 'whitesmoke', '#7BAABE', 'whitesmoke', '#7BAABE'], 18 | anchors: ['p1', 'p2', 'p3', 'p4', 'p5'], 19 | navigation: true, 20 | }; 21 | } 22 | 23 | ngOnInit() { 24 | } 25 | 26 | getRef(fullPageRef) { 27 | this.fullpageApi = fullPageRef; 28 | } 29 | 30 | } 31 | -------------------------------------------------------------------------------- /demo/angular15/app/examples/dynamic-changes/dynamic-changes.component.html: -------------------------------------------------------------------------------- 1 | 7 | 8 |
9 |

Section 1

10 |
11 |

Section 2

12 | 13 | 14 | 15 |
16 |
17 |

Slide 3.1

18 |

Slide 3.2

19 |
20 |

Slide 3.3

21 | name 22 |
23 |
24 |
25 |

Section 4

26 | 27 | 28 | 29 |
30 |
-------------------------------------------------------------------------------- /demo/angular15/app/examples/dynamic-changes/dynamic-changes.component.scss: -------------------------------------------------------------------------------- 1 | .section { 2 | text-align:center; 3 | font-size: 3em; 4 | } 5 | 6 | #menu li { 7 | display:inline-block; 8 | margin: 10px; 9 | color: #000; 10 | background:#fff; 11 | background: rgba(255,255,255, 0.5); 12 | -webkit-border-radius: 10px; 13 | border-radius: 10px; 14 | } 15 | #menu li.active{ 16 | background:#666; 17 | background: rgba(0,0,0, 0.5); 18 | color: #fff; 19 | } 20 | #menu li a{ 21 | text-decoration:none; 22 | color: #000; 23 | } 24 | #menu li.active a:hover{ 25 | color: #000; 26 | } 27 | #menu li:hover{ 28 | background: rgba(255,255,255, 0.8); 29 | } 30 | #menu li a, 31 | #menu li.active a{ 32 | padding: 9px 18px; 33 | display:block; 34 | } 35 | #menu li.active a{ 36 | color: #fff; 37 | } 38 | #menu{ 39 | position:fixed; 40 | top:0; 41 | left:0; 42 | height: 40px; 43 | z-index: 70; 44 | width: 100%; 45 | padding: 0; 46 | margin:0; 47 | } 48 | -------------------------------------------------------------------------------- /demo/angular15/app/examples/dynamic-ng-for/dynamic-ng-for.component.html: -------------------------------------------------------------------------------- 1 | 7 | 8 |
9 |
10 |

Section {{section}}

11 | 12 |
13 |
-------------------------------------------------------------------------------- /demo/angular15/app/examples/dynamic-ng-for/dynamic-ng-for.component.scss: -------------------------------------------------------------------------------- 1 | .section { 2 | text-align:center; 3 | font-size: 3em; 4 | } 5 | 6 | #menu li { 7 | display:inline-block; 8 | margin: 10px; 9 | color: #000; 10 | background:#fff; 11 | background: rgba(255,255,255, 0.5); 12 | -webkit-border-radius: 10px; 13 | border-radius: 10px; 14 | } 15 | #menu li.active{ 16 | background:#666; 17 | background: rgba(0,0,0, 0.5); 18 | color: #fff; 19 | } 20 | #menu li a{ 21 | text-decoration:none; 22 | color: #000; 23 | } 24 | #menu li.active a:hover{ 25 | color: #000; 26 | } 27 | #menu li:hover{ 28 | background: rgba(255,255,255, 0.8); 29 | } 30 | #menu li a, 31 | #menu li.active a{ 32 | padding: 9px 18px; 33 | display:block; 34 | } 35 | #menu li.active a{ 36 | color: #fff; 37 | } 38 | #menu{ 39 | position:fixed; 40 | top:0; 41 | left:0; 42 | height: 40px; 43 | z-index: 70; 44 | width: 100%; 45 | padding: 0; 46 | margin:0; 47 | } 48 | -------------------------------------------------------------------------------- /demo/angular15/app/examples/dynamic-ng-for/dynamic-ng-for.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, AfterViewInit, ViewChildren, QueryList } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-dynamic-ng-for', 5 | templateUrl: './dynamic-ng-for.component.html', 6 | styleUrls: ['./dynamic-ng-for.component.scss'] 7 | }) 8 | export class DynamicNgForComponent implements OnInit, AfterViewInit { 9 | @ViewChildren('sectionRef') sectionRef: QueryList; 10 | config: any; 11 | fullpageApi: any; 12 | sections = [1]; 13 | 14 | constructor() { 15 | // this is just an example => for more details on config please visit fullPage.js docs 16 | this.config = { 17 | licenseKey: 'YOUR LICENSE KEY HERE', 18 | anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'], 19 | menu: '#menu', 20 | navigation: true, 21 | sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'], 22 | }; 23 | } 24 | 25 | ngOnInit() { 26 | } 27 | 28 | ngAfterViewInit() { 29 | this.sectionRef.changes.subscribe(() => { 30 | this.ngForRendred(); 31 | }); 32 | } 33 | 34 | getRef(fullPageRef) { 35 | this.fullpageApi = fullPageRef; 36 | } 37 | 38 | add() { 39 | const twoDigits = Math.random() * 100; 40 | this.sections.push( Math.round(twoDigits) ); 41 | } 42 | 43 | ngForRendred() { 44 | console.log('ngFor dom render is done'); 45 | this.fullpageApi.build(); 46 | } 47 | 48 | } 49 | -------------------------------------------------------------------------------- /demo/angular15/app/examples/scrolloverflow/scrolloverflow.component.scss: -------------------------------------------------------------------------------- 1 | .section { 2 | text-align:center; 3 | font-size: 3em; 4 | } 5 | .section p{ 6 | width: 600px; 7 | margin: 0 auto; 8 | } 9 | 10 | #menu li { 11 | display:inline-block; 12 | margin: 10px; 13 | color: #000; 14 | background:#fff; 15 | background: rgba(255,255,255, 0.5); 16 | -webkit-border-radius: 10px; 17 | border-radius: 10px; 18 | } 19 | #menu li.active{ 20 | background:#666; 21 | background: rgba(0,0,0, 0.5); 22 | color: #fff; 23 | } 24 | #menu li a{ 25 | text-decoration:none; 26 | color: #000; 27 | } 28 | #menu li.active a:hover{ 29 | color: #000; 30 | } 31 | #menu li:hover{ 32 | background: rgba(255,255,255, 0.8); 33 | } 34 | #menu li a, 35 | #menu li.active a{ 36 | padding: 9px 18px; 37 | display:block; 38 | } 39 | #menu li.active a{ 40 | color: #fff; 41 | } 42 | #menu{ 43 | position:fixed; 44 | top:0; 45 | left:0; 46 | height: 40px; 47 | z-index: 70; 48 | width: 100%; 49 | padding: 0; 50 | margin:0; 51 | } 52 | -------------------------------------------------------------------------------- /demo/angular15/app/examples/scrolloverflow/scrolloverflow.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit} from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-scrolloverflow', 5 | templateUrl: './scrolloverflow.component.html', 6 | styleUrls: ['./scrolloverflow.component.scss'] 7 | }) 8 | export class ScrollOverflowExampleComponent implements OnInit { 9 | config; 10 | fullpageApi; 11 | 12 | constructor() { 13 | 14 | // this is just an example => for more details on config please visit fullPage.js docs 15 | this.config = { 16 | licenseKey: 'YOUR LICENSE KEY HERE', 17 | anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'], 18 | menu: '#menu', 19 | scrollOverflow: true, 20 | sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'], 21 | 22 | // events callback 23 | afterLoad: (origin, destination, direction) => { 24 | // console.log(destination); 25 | }, 26 | afterRender: () => { 27 | // console.log('afterRender'); 28 | }, 29 | afterResize: (width, height) => { 30 | // console.log('afterResize' + width + ' ' + height); 31 | }, 32 | afterSlideLoad: (section, origin, destination, direction) => { 33 | // console.log(destination); 34 | } 35 | }; 36 | } 37 | 38 | ngOnInit() { 39 | } 40 | 41 | getRef(fullPageRef) { 42 | this.fullpageApi = fullPageRef; 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /demo/angular15/app/examples/type-definitions/type.component.html: -------------------------------------------------------------------------------- 1 |
2 |

Section 1

3 |
4 |

Section 2

5 | 6 |
7 |
8 |

Slide 2.1

9 |

Slide 3.2

10 |

Slide 3.3

11 |
12 |
13 |

Section 4

14 | 15 |
16 |
17 | -------------------------------------------------------------------------------- /demo/angular15/app/examples/type-definitions/type.component.scss: -------------------------------------------------------------------------------- 1 | .section { 2 | text-align:center; 3 | font-size: 3em; 4 | } -------------------------------------------------------------------------------- /demo/angular15/app/examples/type-definitions/type.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { fullpageOptions, fullpageApi } from 'fullpage.js/dist/fullpage.extensions.min'; 3 | 4 | @Component({ 5 | selector: 'app-type', 6 | templateUrl: './type.component.html', 7 | styleUrls: ['./type.component.scss'] 8 | }) 9 | export class TypeExampleComponent implements OnInit { 10 | config: fullpageOptions; 11 | fullpageApi: fullpageApi; 12 | 13 | constructor() { 14 | 15 | // this is just an example => for more details on config please visit fullPage.js docs 16 | this.config = { 17 | licenseKey: 'YOUR LICENSE KEY HERE', 18 | anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'], 19 | menu: '#menu', 20 | scrollOverflow: true, 21 | sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'], 22 | credits: { 23 | enabled: false, 24 | }, 25 | 26 | // events callback 27 | afterLoad: (origin, destination, direction) => { 28 | console.log(destination); 29 | }, 30 | afterRender: () => { 31 | console.log('afterRender'); 32 | }, 33 | afterResize: (width, height) => { 34 | console.log('afterResize' + width + ' ' + height); 35 | }, 36 | afterSlideLoad: (section, origin, destination, direction) => { 37 | console.log(destination); 38 | } 39 | }; 40 | } 41 | 42 | ngOnInit() { 43 | } 44 | 45 | getRef(fullPageRef) { 46 | this.fullpageApi = fullPageRef; 47 | } 48 | 49 | } 50 | -------------------------------------------------------------------------------- /demo/angular15/app/examples/using-directive/using-directive.html: -------------------------------------------------------------------------------- 1 |
2 |

Section 1

3 |

Section 2

4 |
5 |

Slide 2.1

6 |

Slide 3.2

7 |

Slide 3.3

8 |
9 |

Section 4

10 |
-------------------------------------------------------------------------------- /demo/angular15/app/examples/using-directive/using-directive.scss: -------------------------------------------------------------------------------- 1 | .section { 2 | text-align:center; 3 | font-size: 3em; 4 | } -------------------------------------------------------------------------------- /demo/angular15/app/examples/using-directive/using-directive.ts: -------------------------------------------------------------------------------- 1 | import { AfterViewInit, Component, OnInit, ViewChild, ViewChildren } from '@angular/core'; 2 | import { ɵa as FullpageDirective} from '@fullpage/angular-fullpage'; 3 | import { fullpageOptions } from 'fullpage.js/dist/fullpage.extensions.min'; 4 | 5 | 6 | @Component({ 7 | selector: 'app-using-directive', 8 | templateUrl: './using-directive.html', 9 | styleUrls: ['./using-directive.scss'], 10 | }) 11 | export class UsingDirectiveComponent implements OnInit, AfterViewInit { 12 | config: fullpageOptions; 13 | fullpageApi; 14 | 15 | @ViewChild(FullpageDirective) 16 | fullpageDirective: FullpageDirective; 17 | 18 | constructor() { 19 | 20 | // this is just an example => for more details on config please visit fullPage.js docs 21 | this.config = { 22 | licenseKey: 'asdf', 23 | sectionsColor: ['#7BAABE', 'whitesmoke', '#7BAABE', 'whitesmoke', '#7BAABE'], 24 | anchors: ['p1', 'p2', 'p3', 'p4', 'p5'], 25 | navigation: true, 26 | credits: { 27 | enabled: false, 28 | }, 29 | }; 30 | } 31 | 32 | ngAfterViewInit() { 33 | this.fullpageApi = this.fullpageDirective.fullpage_api; 34 | } 35 | 36 | ngOnInit() { 37 | } 38 | 39 | } 40 | -------------------------------------------------------------------------------- /demo/angular15/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /demo/angular15/environments/environment.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: false 3 | }; -------------------------------------------------------------------------------- /demo/angular15/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Fullpage 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /demo/angular15/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.error(err)); 13 | 14 | -------------------------------------------------------------------------------- /demo/angular15/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@fullpage/angular-fullpage-demo-angular15", 3 | "version": "0.0.1", 4 | "description": "Official Angular wrapper for fullPage.js", 5 | "author": "vh13294", 6 | "contributors": [ 7 | "vh13294", 8 | "alvarotrigo", 9 | "alidihaw" 10 | ], 11 | "homepage": "https://github.com/alvarotrigo/angular-fullpage", 12 | "repository": { 13 | "type": "git", 14 | "url": "https://github.com/alvarotrigo/angular-fullpage" 15 | }, 16 | "license": "GPL-3.0", 17 | "private": false, 18 | "main": "dist/@fullpage/angular-fullpage", 19 | "files": [ 20 | "dist" 21 | ], 22 | "scripts": { 23 | "ng": "ng", 24 | "start": "ng serve", 25 | "build": "ng build", 26 | "test": "ng test", 27 | "lint": "ng lint", 28 | "e2e": "ng e2e" 29 | }, 30 | "dependencies": { 31 | "@angular/animations": "15.0.0", 32 | "@angular/common": "15.0.0", 33 | "@angular/compiler": "15.0.0", 34 | "@angular/core": "15.0.0", 35 | "@angular/forms": "15.0.0", 36 | "@angular/platform-browser": "15.0.0", 37 | "@angular/platform-browser-dynamic": "15.0.0", 38 | "@angular/router": "15.0.0", 39 | "@fullpage/angular-fullpage": "0.1.6", 40 | "fullpage.js": "4.0.35", 41 | "rxjs": "~6.6.0", 42 | "zone.js": "~0.12.0" 43 | }, 44 | "devDependencies": { 45 | "@angular-devkit/build-angular": "15.0.0", 46 | "@angular/cli": "15.0.0", 47 | "@angular/compiler-cli": "15.0.0", 48 | "@types/node": "^12.11.1", 49 | "codelyzer": "~6.0.2", 50 | "ts-node": "~8.0.0", 51 | "tslib": "^2.4.0", 52 | "tslint": "~5.11.0", 53 | "typescript": "4.8.2" 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /demo/angular15/styles.scss: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | @import url(~fullpage.js/dist/fullpage.min.css); 3 | 4 | // change default css 5 | .fp-controlArrow { 6 | padding: 0 1%; 7 | } 8 | -------------------------------------------------------------------------------- /demo/angular15/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "types": [] 6 | }, 7 | "files": [ 8 | "main.ts", 9 | "polyfills.ts" 10 | ], 11 | "exclude": [ 12 | "test.ts", 13 | "**/*.spec.ts", 14 | ] 15 | } -------------------------------------------------------------------------------- /demo/angular15/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "sourceMap": true, 7 | "declaration": false, 8 | "module": "es2022", 9 | "moduleResolution": "node", 10 | "emitDecoratorMetadata": true, 11 | "experimentalDecorators": true, 12 | "target": "es2022", 13 | "typeRoots": [ 14 | "node_modules/@types" 15 | ], 16 | "lib": [ 17 | "es2022", 18 | "dom" 19 | ], 20 | "paths": { 21 | } 22 | } 23 | } -------------------------------------------------------------------------------- /demo/angular15/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tslint.json", 3 | "rules": { 4 | "directive-selector": [ 5 | true, 6 | "attribute", 7 | "app", 8 | "camelCase" 9 | ], 10 | "component-selector": [ 11 | true, 12 | "element", 13 | "app", 14 | "kebab-case" 15 | ] 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /demo/angular16/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /tmp 5 | /out-tsc 6 | 7 | # dependencies 8 | /node_modules 9 | /src/node_modules 10 | 11 | # IDEs and editors 12 | /.idea 13 | .project 14 | .classpath 15 | .c9/ 16 | *.launch 17 | *.angular 18 | .settings/ 19 | *.sublime-workspace 20 | .vscode/* 21 | 22 | # IDE - VSCode 23 | .vscode/* 24 | !.vscode/settings.json 25 | !.vscode/tasks.json 26 | !.vscode/launch.json 27 | !.vscode/extensions.json 28 | 29 | # misc 30 | /.sass-cache 31 | /connect.lock 32 | /coverage 33 | /libpeerconnection.log 34 | npm-debug.log 35 | yarn-error.log 36 | testem.log 37 | /typings 38 | 39 | # System Files 40 | .DS_Store 41 | Thumbs.db 42 | -------------------------------------------------------------------------------- /demo/angular16/README.md: -------------------------------------------------------------------------------- 1 | # Examples 2 | 3 | In order to run the examples you'll have to first install the dependencies: 4 | 5 | ```shell 6 | # install dependencies 7 | npm install 8 | ``` 9 | 10 | Then run them with: 11 | 12 | ```shell 13 | # serve examples 14 | npm run start 15 | ``` 16 | 17 | A page will open in the browser, where you'll be able to swap between examles by accessing one or anothe URL: 18 | 19 | - http://localhost:4200/ 20 | - http://localhost:4200/dynamicChanges 21 | - http://localhost:4200/scrollOverflow 22 | - http://localhost:4200/typeDefinitions 23 | - http://localhost:4200/dynamicNgFor 24 | - http://localhost:4200/usingDirective -------------------------------------------------------------------------------- /demo/angular16/app/app-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | import { BasicExampleComponent } from './examples/basic/basic.component'; 4 | import { DynamicChangesExampleComponent } from './examples/dynamic-changes/dynamic-changes.component'; 5 | import { ScrollOverflowExampleComponent } from './examples/scrolloverflow/scrolloverflow.component'; 6 | import { TypeExampleComponent } from './examples/type-definitions/type.component'; 7 | import { DynamicNgForComponent } from './examples/dynamic-ng-for/dynamic-ng-for.component'; 8 | import { UsingDirectiveComponent } from './examples/using-directive/using-directive'; 9 | 10 | 11 | const routes: Routes = [ 12 | { path: '', component: BasicExampleComponent, pathMatch: 'full' }, 13 | { path: 'dynamicChanges', component: DynamicChangesExampleComponent }, 14 | { path: 'scrollOverflow', component: ScrollOverflowExampleComponent }, 15 | { path: 'typeDefinitions', component: TypeExampleComponent }, 16 | { path: 'dynamicNgFor', component: DynamicNgForComponent }, 17 | { path: 'usingDirective', component: UsingDirectiveComponent } 18 | ]; 19 | 20 | @NgModule({ 21 | imports: [RouterModule.forRoot(routes)], 22 | exports: [RouterModule] 23 | }) 24 | export class AppRoutingModule { } 25 | -------------------------------------------------------------------------------- /demo/angular16/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | template: `` 6 | }) 7 | export class AppComponent { 8 | 9 | constructor() {} 10 | 11 | } 12 | -------------------------------------------------------------------------------- /demo/angular16/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { BrowserModule } from '@angular/platform-browser'; 2 | import { NgModule } from '@angular/core'; 3 | 4 | import { AppRoutingModule } from './app-routing.module'; 5 | import { AppComponent } from './app.component'; 6 | 7 | import { BasicExampleComponent } from './examples/basic/basic.component'; 8 | import { DynamicChangesExampleComponent } from './examples/dynamic-changes/dynamic-changes.component'; 9 | import { ScrollOverflowExampleComponent } from './examples/scrolloverflow/scrolloverflow.component'; 10 | import { TypeExampleComponent } from './examples/type-definitions/type.component'; 11 | import { DynamicNgForComponent } from './examples/dynamic-ng-for/dynamic-ng-for.component'; 12 | import { UsingDirectiveComponent } from './examples/using-directive/using-directive'; 13 | import { AngularFullpageModule } from '@fullpage/angular-fullpage'; 14 | 15 | @NgModule({ 16 | declarations: [ 17 | AppComponent, 18 | BasicExampleComponent, 19 | DynamicChangesExampleComponent, 20 | ScrollOverflowExampleComponent, 21 | TypeExampleComponent, 22 | DynamicNgForComponent, 23 | UsingDirectiveComponent 24 | ], 25 | imports: [ 26 | BrowserModule, 27 | AppRoutingModule, 28 | AngularFullpageModule 29 | ], 30 | providers: [], 31 | bootstrap: [AppComponent] 32 | }) 33 | export class AppModule { } 34 | -------------------------------------------------------------------------------- /demo/angular16/app/examples/basic/basic.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 10 |

Section 1

11 |
12 |

Section 2

13 |
14 |

Slide 2.1

15 |

Slide 3.2

16 |

Slide 3.3

17 |
18 |

Section 4

19 |
20 | -------------------------------------------------------------------------------- /demo/angular16/app/examples/basic/basic.component.scss: -------------------------------------------------------------------------------- 1 | .section { 2 | text-align:center; 3 | font-size: 3em; 4 | } 5 | .examples{ 6 | position: fixed; 7 | top: 0; 8 | left: 0; 9 | right: 0; 10 | margin: 0; 11 | padding: 0; 12 | z-index: 999; 13 | } 14 | .examples li{ 15 | display: inline-block; 16 | } 17 | .examples li a{ 18 | color: white; 19 | text-decoration: none; 20 | font-family: arial; 21 | font-size: 0.5em; 22 | margin-right: 2em; 23 | } 24 | .examples li a:hover{ 25 | text-decoration: underline; 26 | } -------------------------------------------------------------------------------- /demo/angular16/app/examples/basic/basic.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-basic', 5 | templateUrl: './basic.component.html', 6 | styleUrls: ['./basic.component.scss'] 7 | }) 8 | export class BasicExampleComponent implements OnInit { 9 | config; 10 | fullpageApi; 11 | 12 | constructor() { 13 | 14 | // this is just an example => for more details on config please visit fullPage.js docs 15 | this.config = { 16 | licenseKey: 'YOUR LICENSE KEY HERE', 17 | sectionsColor: ['#7BAABE', 'whitesmoke', '#7BAABE', 'whitesmoke', '#7BAABE'], 18 | anchors: ['p1', 'p2', 'p3', 'p4', 'p5'], 19 | navigation: true, 20 | }; 21 | } 22 | 23 | ngOnInit() { 24 | } 25 | 26 | getRef(fullPageRef) { 27 | this.fullpageApi = fullPageRef; 28 | } 29 | 30 | } 31 | -------------------------------------------------------------------------------- /demo/angular16/app/examples/dynamic-changes/dynamic-changes.component.html: -------------------------------------------------------------------------------- 1 | 7 | 8 |
9 |

Section 1

10 |
11 |

Section 2

12 | 13 | 14 | 15 |
16 |
17 |

Slide 3.1

18 |

Slide 3.2

19 |
20 |

Slide 3.3

21 | name 22 |
23 |
24 |
25 |

Section 4

26 | 27 | 28 | 29 |
30 |
-------------------------------------------------------------------------------- /demo/angular16/app/examples/dynamic-changes/dynamic-changes.component.scss: -------------------------------------------------------------------------------- 1 | .section { 2 | text-align:center; 3 | font-size: 3em; 4 | } 5 | 6 | #menu li { 7 | display:inline-block; 8 | margin: 10px; 9 | color: #000; 10 | background:#fff; 11 | background: rgba(255,255,255, 0.5); 12 | -webkit-border-radius: 10px; 13 | border-radius: 10px; 14 | } 15 | #menu li.active{ 16 | background:#666; 17 | background: rgba(0,0,0, 0.5); 18 | color: #fff; 19 | } 20 | #menu li a{ 21 | text-decoration:none; 22 | color: #000; 23 | } 24 | #menu li.active a:hover{ 25 | color: #000; 26 | } 27 | #menu li:hover{ 28 | background: rgba(255,255,255, 0.8); 29 | } 30 | #menu li a, 31 | #menu li.active a{ 32 | padding: 9px 18px; 33 | display:block; 34 | } 35 | #menu li.active a{ 36 | color: #fff; 37 | } 38 | #menu{ 39 | position:fixed; 40 | top:0; 41 | left:0; 42 | height: 40px; 43 | z-index: 70; 44 | width: 100%; 45 | padding: 0; 46 | margin:0; 47 | } 48 | -------------------------------------------------------------------------------- /demo/angular16/app/examples/dynamic-ng-for/dynamic-ng-for.component.html: -------------------------------------------------------------------------------- 1 | 7 | 8 |
9 |
10 |

Section {{section}}

11 | 12 |
13 |
-------------------------------------------------------------------------------- /demo/angular16/app/examples/dynamic-ng-for/dynamic-ng-for.component.scss: -------------------------------------------------------------------------------- 1 | .section { 2 | text-align:center; 3 | font-size: 3em; 4 | } 5 | 6 | #menu li { 7 | display:inline-block; 8 | margin: 10px; 9 | color: #000; 10 | background:#fff; 11 | background: rgba(255,255,255, 0.5); 12 | -webkit-border-radius: 10px; 13 | border-radius: 10px; 14 | } 15 | #menu li.active{ 16 | background:#666; 17 | background: rgba(0,0,0, 0.5); 18 | color: #fff; 19 | } 20 | #menu li a{ 21 | text-decoration:none; 22 | color: #000; 23 | } 24 | #menu li.active a:hover{ 25 | color: #000; 26 | } 27 | #menu li:hover{ 28 | background: rgba(255,255,255, 0.8); 29 | } 30 | #menu li a, 31 | #menu li.active a{ 32 | padding: 9px 18px; 33 | display:block; 34 | } 35 | #menu li.active a{ 36 | color: #fff; 37 | } 38 | #menu{ 39 | position:fixed; 40 | top:0; 41 | left:0; 42 | height: 40px; 43 | z-index: 70; 44 | width: 100%; 45 | padding: 0; 46 | margin:0; 47 | } 48 | -------------------------------------------------------------------------------- /demo/angular16/app/examples/dynamic-ng-for/dynamic-ng-for.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, AfterViewInit, ViewChildren, QueryList } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-dynamic-ng-for', 5 | templateUrl: './dynamic-ng-for.component.html', 6 | styleUrls: ['./dynamic-ng-for.component.scss'] 7 | }) 8 | export class DynamicNgForComponent implements OnInit, AfterViewInit { 9 | @ViewChildren('sectionRef') sectionRef: QueryList; 10 | config: any; 11 | fullpageApi: any; 12 | sections = [1]; 13 | 14 | constructor() { 15 | // this is just an example => for more details on config please visit fullPage.js docs 16 | this.config = { 17 | licenseKey: 'YOUR LICENSE KEY HERE', 18 | anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'], 19 | menu: '#menu', 20 | navigation: true, 21 | sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'], 22 | }; 23 | } 24 | 25 | ngOnInit() { 26 | } 27 | 28 | ngAfterViewInit() { 29 | this.sectionRef.changes.subscribe(() => { 30 | this.ngForRendred(); 31 | }); 32 | } 33 | 34 | getRef(fullPageRef) { 35 | this.fullpageApi = fullPageRef; 36 | } 37 | 38 | add() { 39 | const twoDigits = Math.random() * 100; 40 | this.sections.push( Math.round(twoDigits) ); 41 | } 42 | 43 | ngForRendred() { 44 | console.log('ngFor dom render is done'); 45 | this.fullpageApi.build(); 46 | } 47 | 48 | } 49 | -------------------------------------------------------------------------------- /demo/angular16/app/examples/scrolloverflow/scrolloverflow.component.scss: -------------------------------------------------------------------------------- 1 | .section { 2 | text-align:center; 3 | font-size: 3em; 4 | } 5 | .section p{ 6 | width: 600px; 7 | margin: 0 auto; 8 | } 9 | 10 | #menu li { 11 | display:inline-block; 12 | margin: 10px; 13 | color: #000; 14 | background:#fff; 15 | background: rgba(255,255,255, 0.5); 16 | -webkit-border-radius: 10px; 17 | border-radius: 10px; 18 | } 19 | #menu li.active{ 20 | background:#666; 21 | background: rgba(0,0,0, 0.5); 22 | color: #fff; 23 | } 24 | #menu li a{ 25 | text-decoration:none; 26 | color: #000; 27 | } 28 | #menu li.active a:hover{ 29 | color: #000; 30 | } 31 | #menu li:hover{ 32 | background: rgba(255,255,255, 0.8); 33 | } 34 | #menu li a, 35 | #menu li.active a{ 36 | padding: 9px 18px; 37 | display:block; 38 | } 39 | #menu li.active a{ 40 | color: #fff; 41 | } 42 | #menu{ 43 | position:fixed; 44 | top:0; 45 | left:0; 46 | height: 40px; 47 | z-index: 70; 48 | width: 100%; 49 | padding: 0; 50 | margin:0; 51 | } 52 | -------------------------------------------------------------------------------- /demo/angular16/app/examples/scrolloverflow/scrolloverflow.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit} from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-scrolloverflow', 5 | templateUrl: './scrolloverflow.component.html', 6 | styleUrls: ['./scrolloverflow.component.scss'] 7 | }) 8 | export class ScrollOverflowExampleComponent implements OnInit { 9 | config; 10 | fullpageApi; 11 | 12 | constructor() { 13 | 14 | // this is just an example => for more details on config please visit fullPage.js docs 15 | this.config = { 16 | licenseKey: 'YOUR LICENSE KEY HERE', 17 | anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'], 18 | menu: '#menu', 19 | scrollOverflow: true, 20 | sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'], 21 | 22 | // events callback 23 | afterLoad: (origin, destination, direction) => { 24 | // console.log(destination); 25 | }, 26 | afterRender: () => { 27 | // console.log('afterRender'); 28 | }, 29 | afterResize: (width, height) => { 30 | // console.log('afterResize' + width + ' ' + height); 31 | }, 32 | afterSlideLoad: (section, origin, destination, direction) => { 33 | // console.log(destination); 34 | } 35 | }; 36 | } 37 | 38 | ngOnInit() { 39 | } 40 | 41 | getRef(fullPageRef) { 42 | this.fullpageApi = fullPageRef; 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /demo/angular16/app/examples/type-definitions/type.component.html: -------------------------------------------------------------------------------- 1 |
2 |

Section 1

3 |
4 |

Section 2

5 | 6 |
7 |
8 |

Slide 2.1

9 |

Slide 3.2

10 |

Slide 3.3

11 |
12 |
13 |

Section 4

14 | 15 |
16 |
17 | -------------------------------------------------------------------------------- /demo/angular16/app/examples/type-definitions/type.component.scss: -------------------------------------------------------------------------------- 1 | .section { 2 | text-align:center; 3 | font-size: 3em; 4 | } -------------------------------------------------------------------------------- /demo/angular16/app/examples/type-definitions/type.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { fullpageOptions, fullpageApi } from 'fullpage.js/dist/fullpage.extensions.min'; 3 | 4 | @Component({ 5 | selector: 'app-type', 6 | templateUrl: './type.component.html', 7 | styleUrls: ['./type.component.scss'] 8 | }) 9 | export class TypeExampleComponent implements OnInit { 10 | config: fullpageOptions; 11 | fullpageApi: fullpageApi; 12 | 13 | constructor() { 14 | 15 | // this is just an example => for more details on config please visit fullPage.js docs 16 | this.config = { 17 | licenseKey: 'YOUR LICENSE KEY HERE', 18 | anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'], 19 | menu: '#menu', 20 | scrollOverflow: true, 21 | sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'], 22 | credits: { 23 | enabled: false, 24 | }, 25 | 26 | // events callback 27 | afterLoad: (origin, destination, direction) => { 28 | console.log(destination); 29 | }, 30 | afterRender: () => { 31 | console.log('afterRender'); 32 | }, 33 | afterResize: (width, height) => { 34 | console.log('afterResize' + width + ' ' + height); 35 | }, 36 | afterSlideLoad: (section, origin, destination, direction) => { 37 | console.log(destination); 38 | } 39 | }; 40 | } 41 | 42 | ngOnInit() { 43 | } 44 | 45 | getRef(fullPageRef) { 46 | this.fullpageApi = fullPageRef; 47 | } 48 | 49 | } 50 | -------------------------------------------------------------------------------- /demo/angular16/app/examples/using-directive/using-directive.html: -------------------------------------------------------------------------------- 1 |
2 |

Section 1

3 |

Section 2

4 |
5 |

Slide 2.1

6 |

Slide 3.2

7 |

Slide 3.3

8 |
9 |

Section 4

10 |
-------------------------------------------------------------------------------- /demo/angular16/app/examples/using-directive/using-directive.scss: -------------------------------------------------------------------------------- 1 | .section { 2 | text-align:center; 3 | font-size: 3em; 4 | } -------------------------------------------------------------------------------- /demo/angular16/app/examples/using-directive/using-directive.ts: -------------------------------------------------------------------------------- 1 | import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core'; 2 | import { FullpageDirective } from '@fullpage/angular-fullpage'; 3 | import { fullpageOptions } from 'fullpage.js/dist/fullpage.extensions.min'; 4 | 5 | 6 | @Component({ 7 | selector: 'app-using-directive', 8 | templateUrl: './using-directive.html', 9 | styleUrls: ['./using-directive.scss'], 10 | }) 11 | export class UsingDirectiveComponent implements OnInit, AfterViewInit { 12 | config: fullpageOptions; 13 | fullpageApi; 14 | 15 | @ViewChild(FullpageDirective) 16 | fullpageDirective: FullpageDirective; 17 | 18 | constructor() { 19 | 20 | // this is just an example => for more details on config please visit fullPage.js docs 21 | this.config = { 22 | licenseKey: 'asdf', 23 | sectionsColor: ['#7BAABE', 'whitesmoke', '#7BAABE', 'whitesmoke', '#7BAABE'], 24 | anchors: ['p1', 'p2', 'p3', 'p4', 'p5'], 25 | navigation: true, 26 | credits: { 27 | enabled: false, 28 | }, 29 | }; 30 | } 31 | 32 | ngAfterViewInit() { 33 | this.fullpageApi = this.fullpageDirective.fullpageApi; 34 | } 35 | 36 | ngOnInit() { 37 | } 38 | 39 | } 40 | -------------------------------------------------------------------------------- /demo/angular16/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /demo/angular16/environments/environment.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: false 3 | }; -------------------------------------------------------------------------------- /demo/angular16/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Fullpage 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /demo/angular16/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.error(err)); 13 | 14 | -------------------------------------------------------------------------------- /demo/angular16/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@fullpage/angular-fullpage-demo-angular16", 3 | "version": "0.0.1", 4 | "description": "Official Angular wrapper for fullPage.js", 5 | "author": "vh13294", 6 | "contributors": [ 7 | "vh13294", 8 | "alvarotrigo", 9 | "alidihaw" 10 | ], 11 | "homepage": "https://github.com/alvarotrigo/angular-fullpage", 12 | "repository": { 13 | "type": "git", 14 | "url": "https://github.com/alvarotrigo/angular-fullpage" 15 | }, 16 | "license": "GPL-3.0", 17 | "private": false, 18 | "main": "dist/@fullpage/angular-fullpage", 19 | "files": [ 20 | "dist" 21 | ], 22 | "scripts": { 23 | "ng": "ng", 24 | "start": "ng serve", 25 | "build": "ng build", 26 | "test": "ng test", 27 | "lint": "ng lint", 28 | "e2e": "ng e2e" 29 | }, 30 | "dependencies": { 31 | "@angular/animations": "16.0.0", 32 | "@angular/common": "16.0.0", 33 | "@angular/compiler": "16.0.0", 34 | "@angular/core": "16.0.0", 35 | "@angular/forms": "16.0.0", 36 | "@angular/platform-browser": "16.0.0", 37 | "@angular/platform-browser-dynamic": "16.0.0", 38 | "@angular/router": "16.0.0", 39 | "@fullpage/angular-fullpage": "^0.1.6", 40 | "fullpage.js": "4.0.35", 41 | "rxjs": "~6.6.0", 42 | "zone.js": "~0.13.0" 43 | }, 44 | "devDependencies": { 45 | "@angular-devkit/build-angular": "^16.2.16", 46 | "@angular/cli": "^16.2.16", 47 | "@angular/compiler-cli": "16.0.0", 48 | "@types/node": "^12.11.1", 49 | "codelyzer": "~6.0.2", 50 | "ts-node": "~8.0.0", 51 | "tslib": "^2.4.0", 52 | "tslint": "~6.1.0", 53 | "typescript": "4.9.3" 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /demo/angular16/styles.scss: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | @import url(~fullpage.js/dist/fullpage.min.css); 3 | 4 | // change default css 5 | .fp-controlArrow { 6 | padding: 0 1%; 7 | } 8 | -------------------------------------------------------------------------------- /demo/angular16/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "types": [] 6 | }, 7 | "angularCompilerOptions": { 8 | "enableIvy": true, 9 | "strictInjectionParameters": true, 10 | "strictTemplates": true 11 | }, 12 | "files": [ 13 | "main.ts", 14 | "polyfills.ts" 15 | ], 16 | "exclude": [ 17 | "test.ts", 18 | "**/*.spec.ts", 19 | ] 20 | } 21 | -------------------------------------------------------------------------------- /demo/angular16/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "sourceMap": true, 7 | "declaration": false, 8 | "module": "es2022", 9 | "moduleResolution": "node", 10 | "emitDecoratorMetadata": true, 11 | "experimentalDecorators": true, 12 | "target": "es2022", 13 | "typeRoots": [ 14 | "node_modules/@types" 15 | ], 16 | "lib": [ 17 | "es2022", 18 | "dom" 19 | ], 20 | "paths": { 21 | } 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /demo/angular16/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tslint.json", 3 | "rules": { 4 | "directive-selector": [ 5 | true, 6 | "attribute", 7 | "app", 8 | "camelCase" 9 | ], 10 | "component-selector": [ 11 | true, 12 | "element", 13 | "app", 14 | "kebab-case" 15 | ] 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /demo/angular17/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "root": true, 3 | "ignorePatterns": [ 4 | "projects/**/*" 5 | ], 6 | "overrides": [ 7 | { 8 | "files": [ 9 | "*.ts" 10 | ], 11 | "extends": [ 12 | "eslint:recommended", 13 | "plugin:@typescript-eslint/recommended", 14 | "plugin:@angular-eslint/recommended", 15 | "plugin:@angular-eslint/template/process-inline-templates" 16 | ], 17 | "rules": { 18 | "@angular-eslint/directive-selector": [ 19 | "error", 20 | { 21 | "type": "attribute", 22 | "prefix": "app", 23 | "style": "camelCase" 24 | } 25 | ], 26 | "@angular-eslint/component-selector": [ 27 | "error", 28 | { 29 | "type": "element", 30 | "prefix": "app", 31 | "style": "kebab-case" 32 | } 33 | ] 34 | } 35 | }, 36 | { 37 | "files": [ 38 | "*.html" 39 | ], 40 | "extends": [ 41 | "plugin:@angular-eslint/template/recommended" 42 | ], 43 | "rules": {} 44 | } 45 | ] 46 | } -------------------------------------------------------------------------------- /demo/angular17/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /tmp 5 | /out-tsc 6 | 7 | # dependencies 8 | /node_modules 9 | /src/node_modules 10 | 11 | # IDEs and editors 12 | /.idea 13 | .project 14 | .classpath 15 | .c9/ 16 | *.launch 17 | *.angular 18 | .settings/ 19 | *.sublime-workspace 20 | .vscode/* 21 | 22 | # IDE - VSCode 23 | .vscode/* 24 | !.vscode/settings.json 25 | !.vscode/tasks.json 26 | !.vscode/launch.json 27 | !.vscode/extensions.json 28 | 29 | # misc 30 | /.sass-cache 31 | /connect.lock 32 | /coverage 33 | /libpeerconnection.log 34 | npm-debug.log 35 | yarn-error.log 36 | testem.log 37 | /typings 38 | 39 | # System Files 40 | .DS_Store 41 | Thumbs.db 42 | -------------------------------------------------------------------------------- /demo/angular17/README.md: -------------------------------------------------------------------------------- 1 | # Examples 2 | 3 | In order to run the examples you'll have to first install the dependencies: 4 | 5 | ```shell 6 | # install dependencies 7 | npm install 8 | ``` 9 | 10 | Then run them with: 11 | 12 | ```shell 13 | # serve examples 14 | npm run start 15 | ``` 16 | 17 | A page will open in the browser, where you'll be able to swap between examles by accessing one or anothe URL: 18 | 19 | - http://localhost:4200/ 20 | - http://localhost:4200/dynamicChanges 21 | - http://localhost:4200/scrollOverflow 22 | - http://localhost:4200/typeDefinitions 23 | - http://localhost:4200/dynamicNgFor 24 | - http://localhost:4200/usingDirective -------------------------------------------------------------------------------- /demo/angular17/app/app-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | import { BasicExampleComponent } from './examples/basic/basic.component'; 4 | import { DynamicChangesExampleComponent } from './examples/dynamic-changes/dynamic-changes.component'; 5 | import { ScrollOverflowExampleComponent } from './examples/scrolloverflow/scrolloverflow.component'; 6 | import { TypeExampleComponent } from './examples/type-definitions/type.component'; 7 | import { DynamicNgForComponent } from './examples/dynamic-ng-for/dynamic-ng-for.component'; 8 | import { UsingDirectiveComponent } from './examples/using-directive/using-directive'; 9 | 10 | 11 | const routes: Routes = [ 12 | { path: '', component: BasicExampleComponent, pathMatch: 'full' }, 13 | { path: 'dynamicChanges', component: DynamicChangesExampleComponent }, 14 | { path: 'scrollOverflow', component: ScrollOverflowExampleComponent }, 15 | { path: 'typeDefinitions', component: TypeExampleComponent }, 16 | { path: 'dynamicNgFor', component: DynamicNgForComponent }, 17 | { path: 'usingDirective', component: UsingDirectiveComponent } 18 | ]; 19 | 20 | @NgModule({ 21 | imports: [RouterModule.forRoot(routes)], 22 | exports: [RouterModule] 23 | }) 24 | export class AppRoutingModule { } 25 | -------------------------------------------------------------------------------- /demo/angular17/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | template: `` 6 | }) 7 | export class AppComponent { 8 | 9 | constructor() {} 10 | 11 | } 12 | -------------------------------------------------------------------------------- /demo/angular17/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { BrowserModule } from '@angular/platform-browser'; 2 | import { NgModule } from '@angular/core'; 3 | 4 | import { AppRoutingModule } from './app-routing.module'; 5 | import { AppComponent } from './app.component'; 6 | 7 | import { BasicExampleComponent } from './examples/basic/basic.component'; 8 | import { DynamicChangesExampleComponent } from './examples/dynamic-changes/dynamic-changes.component'; 9 | import { ScrollOverflowExampleComponent } from './examples/scrolloverflow/scrolloverflow.component'; 10 | import { TypeExampleComponent } from './examples/type-definitions/type.component'; 11 | import { DynamicNgForComponent } from './examples/dynamic-ng-for/dynamic-ng-for.component'; 12 | import { UsingDirectiveComponent } from './examples/using-directive/using-directive'; 13 | 14 | import { AngularFullpageModule } from '@fullpage/angular-fullpage'; 15 | 16 | @NgModule({ 17 | declarations: [ 18 | AppComponent, 19 | BasicExampleComponent, 20 | DynamicChangesExampleComponent, 21 | ScrollOverflowExampleComponent, 22 | TypeExampleComponent, 23 | DynamicNgForComponent, 24 | UsingDirectiveComponent 25 | ], 26 | imports: [ 27 | BrowserModule, 28 | AppRoutingModule, 29 | AngularFullpageModule 30 | ], 31 | providers: [], 32 | bootstrap: [AppComponent] 33 | }) 34 | export class AppModule { } 35 | -------------------------------------------------------------------------------- /demo/angular17/app/examples/basic/basic.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 10 |

Section 1

11 |
12 |

Section 2

13 |
14 |

Slide 2.1

15 |

Slide 3.2

16 |

Slide 3.3

17 |
18 |

Section 4

19 |
20 | -------------------------------------------------------------------------------- /demo/angular17/app/examples/basic/basic.component.scss: -------------------------------------------------------------------------------- 1 | .section { 2 | text-align:center; 3 | font-size: 3em; 4 | } 5 | .examples{ 6 | position: fixed; 7 | top: 0; 8 | left: 0; 9 | right: 0; 10 | margin: 0; 11 | padding: 0; 12 | z-index: 999; 13 | } 14 | .examples li{ 15 | display: inline-block; 16 | } 17 | .examples li a{ 18 | color: white; 19 | text-decoration: none; 20 | font-family: arial; 21 | font-size: 0.5em; 22 | margin-right: 2em; 23 | } 24 | .examples li a:hover{ 25 | text-decoration: underline; 26 | } -------------------------------------------------------------------------------- /demo/angular17/app/examples/basic/basic.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-basic', 5 | templateUrl: './basic.component.html', 6 | styleUrls: ['./basic.component.scss'] 7 | }) 8 | export class BasicExampleComponent implements OnInit { 9 | config; 10 | fullpageApi; 11 | 12 | constructor() { 13 | 14 | // this is just an example => for more details on config please visit fullPage.js docs 15 | this.config = { 16 | licenseKey: 'YOUR LICENSE KEY HERE', 17 | sectionsColor: ['#7BAABE', 'whitesmoke', '#7BAABE', 'whitesmoke', '#7BAABE'], 18 | anchors: ['p1', 'p2', 'p3', 'p4', 'p5'], 19 | navigation: true, 20 | }; 21 | } 22 | 23 | ngOnInit() { 24 | } 25 | 26 | getRef(fullPageRef) { 27 | this.fullpageApi = fullPageRef; 28 | } 29 | 30 | } 31 | -------------------------------------------------------------------------------- /demo/angular17/app/examples/dynamic-changes/dynamic-changes.component.html: -------------------------------------------------------------------------------- 1 | 7 | 8 |
9 |

Section 1

10 |
11 |

Section 2

12 | 13 | 14 | 15 |
16 |
17 |

Slide 3.1

18 |

Slide 3.2

19 |
20 |

Slide 3.3

21 | name 22 |
23 |
24 |
25 |

Section 4

26 | 27 | 28 | 29 |
30 |
-------------------------------------------------------------------------------- /demo/angular17/app/examples/dynamic-changes/dynamic-changes.component.scss: -------------------------------------------------------------------------------- 1 | .section { 2 | text-align:center; 3 | font-size: 3em; 4 | } 5 | 6 | #menu li { 7 | display:inline-block; 8 | margin: 10px; 9 | color: #000; 10 | background:#fff; 11 | background: rgba(255,255,255, 0.5); 12 | -webkit-border-radius: 10px; 13 | border-radius: 10px; 14 | } 15 | #menu li.active{ 16 | background:#666; 17 | background: rgba(0,0,0, 0.5); 18 | color: #fff; 19 | } 20 | #menu li a{ 21 | text-decoration:none; 22 | color: #000; 23 | } 24 | #menu li.active a:hover{ 25 | color: #000; 26 | } 27 | #menu li:hover{ 28 | background: rgba(255,255,255, 0.8); 29 | } 30 | #menu li a, 31 | #menu li.active a{ 32 | padding: 9px 18px; 33 | display:block; 34 | } 35 | #menu li.active a{ 36 | color: #fff; 37 | } 38 | #menu{ 39 | position:fixed; 40 | top:0; 41 | left:0; 42 | height: 40px; 43 | z-index: 70; 44 | width: 100%; 45 | padding: 0; 46 | margin:0; 47 | } 48 | -------------------------------------------------------------------------------- /demo/angular17/app/examples/dynamic-ng-for/dynamic-ng-for.component.html: -------------------------------------------------------------------------------- 1 | 7 | 8 |
9 |
10 |

Section {{section}}

11 | 12 |
13 |
-------------------------------------------------------------------------------- /demo/angular17/app/examples/dynamic-ng-for/dynamic-ng-for.component.scss: -------------------------------------------------------------------------------- 1 | .section { 2 | text-align:center; 3 | font-size: 3em; 4 | } 5 | 6 | #menu li { 7 | display:inline-block; 8 | margin: 10px; 9 | color: #000; 10 | background:#fff; 11 | background: rgba(255,255,255, 0.5); 12 | -webkit-border-radius: 10px; 13 | border-radius: 10px; 14 | } 15 | #menu li.active{ 16 | background:#666; 17 | background: rgba(0,0,0, 0.5); 18 | color: #fff; 19 | } 20 | #menu li a{ 21 | text-decoration:none; 22 | color: #000; 23 | } 24 | #menu li.active a:hover{ 25 | color: #000; 26 | } 27 | #menu li:hover{ 28 | background: rgba(255,255,255, 0.8); 29 | } 30 | #menu li a, 31 | #menu li.active a{ 32 | padding: 9px 18px; 33 | display:block; 34 | } 35 | #menu li.active a{ 36 | color: #fff; 37 | } 38 | #menu{ 39 | position:fixed; 40 | top:0; 41 | left:0; 42 | height: 40px; 43 | z-index: 70; 44 | width: 100%; 45 | padding: 0; 46 | margin:0; 47 | } 48 | -------------------------------------------------------------------------------- /demo/angular17/app/examples/dynamic-ng-for/dynamic-ng-for.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, AfterViewInit, ViewChildren, QueryList } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-dynamic-ng-for', 5 | templateUrl: './dynamic-ng-for.component.html', 6 | styleUrls: ['./dynamic-ng-for.component.scss'] 7 | }) 8 | export class DynamicNgForComponent implements OnInit, AfterViewInit { 9 | @ViewChildren('sectionRef') sectionRef: QueryList; 10 | config: any; 11 | fullpageApi: any; 12 | sections = [1]; 13 | 14 | constructor() { 15 | // this is just an example => for more details on config please visit fullPage.js docs 16 | this.config = { 17 | licenseKey: 'YOUR LICENSE KEY HERE', 18 | anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'], 19 | menu: '#menu', 20 | navigation: true, 21 | sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'], 22 | }; 23 | } 24 | 25 | ngOnInit() { 26 | } 27 | 28 | ngAfterViewInit() { 29 | this.sectionRef.changes.subscribe(() => { 30 | this.ngForRendred(); 31 | }); 32 | } 33 | 34 | getRef(fullPageRef) { 35 | this.fullpageApi = fullPageRef; 36 | } 37 | 38 | add() { 39 | const twoDigits = Math.random() * 100; 40 | this.sections.push( Math.round(twoDigits) ); 41 | } 42 | 43 | ngForRendred() { 44 | console.log('ngFor dom render is done'); 45 | this.fullpageApi.build(); 46 | } 47 | 48 | } 49 | -------------------------------------------------------------------------------- /demo/angular17/app/examples/scrolloverflow/scrolloverflow.component.scss: -------------------------------------------------------------------------------- 1 | .section { 2 | text-align:center; 3 | font-size: 3em; 4 | } 5 | .section p{ 6 | width: 600px; 7 | margin: 0 auto; 8 | } 9 | 10 | #menu li { 11 | display:inline-block; 12 | margin: 10px; 13 | color: #000; 14 | background:#fff; 15 | background: rgba(255,255,255, 0.5); 16 | -webkit-border-radius: 10px; 17 | border-radius: 10px; 18 | } 19 | #menu li.active{ 20 | background:#666; 21 | background: rgba(0,0,0, 0.5); 22 | color: #fff; 23 | } 24 | #menu li a{ 25 | text-decoration:none; 26 | color: #000; 27 | } 28 | #menu li.active a:hover{ 29 | color: #000; 30 | } 31 | #menu li:hover{ 32 | background: rgba(255,255,255, 0.8); 33 | } 34 | #menu li a, 35 | #menu li.active a{ 36 | padding: 9px 18px; 37 | display:block; 38 | } 39 | #menu li.active a{ 40 | color: #fff; 41 | } 42 | #menu{ 43 | position:fixed; 44 | top:0; 45 | left:0; 46 | height: 40px; 47 | z-index: 70; 48 | width: 100%; 49 | padding: 0; 50 | margin:0; 51 | } 52 | -------------------------------------------------------------------------------- /demo/angular17/app/examples/scrolloverflow/scrolloverflow.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit} from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-scrolloverflow', 5 | templateUrl: './scrolloverflow.component.html', 6 | styleUrls: ['./scrolloverflow.component.scss'] 7 | }) 8 | export class ScrollOverflowExampleComponent implements OnInit { 9 | config; 10 | fullpageApi; 11 | 12 | constructor() { 13 | 14 | // this is just an example => for more details on config please visit fullPage.js docs 15 | this.config = { 16 | licenseKey: 'YOUR LICENSE KEY HERE', 17 | anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'], 18 | menu: '#menu', 19 | scrollOverflow: true, 20 | sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'], 21 | 22 | // events callback 23 | afterLoad: (origin, destination, direction) => { 24 | // console.log(destination); 25 | }, 26 | afterRender: () => { 27 | // console.log('afterRender'); 28 | }, 29 | afterResize: (width, height) => { 30 | // console.log('afterResize' + width + ' ' + height); 31 | }, 32 | afterSlideLoad: (section, origin, destination, direction) => { 33 | // console.log(destination); 34 | } 35 | }; 36 | } 37 | 38 | ngOnInit() { 39 | } 40 | 41 | getRef(fullPageRef) { 42 | this.fullpageApi = fullPageRef; 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /demo/angular17/app/examples/type-definitions/type.component.html: -------------------------------------------------------------------------------- 1 |
2 |

Section 1

3 |
4 |

Section 2

5 | 6 |
7 |
8 |

Slide 2.1

9 |

Slide 3.2

10 |

Slide 3.3

11 |
12 |
13 |

Section 4

14 | 15 |
16 |
17 | -------------------------------------------------------------------------------- /demo/angular17/app/examples/type-definitions/type.component.scss: -------------------------------------------------------------------------------- 1 | .section { 2 | text-align:center; 3 | font-size: 3em; 4 | } -------------------------------------------------------------------------------- /demo/angular17/app/examples/type-definitions/type.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { fullpageOptions, fullpageApi } from 'fullpage.js/dist/fullpage.extensions.min'; 3 | 4 | @Component({ 5 | selector: 'app-type', 6 | templateUrl: './type.component.html', 7 | styleUrls: ['./type.component.scss'] 8 | }) 9 | export class TypeExampleComponent implements OnInit { 10 | config: fullpageOptions; 11 | fullpageApi: fullpageApi; 12 | 13 | constructor() { 14 | 15 | // this is just an example => for more details on config please visit fullPage.js docs 16 | this.config = { 17 | licenseKey: 'YOUR LICENSE KEY HERE', 18 | anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'], 19 | menu: '#menu', 20 | scrollOverflow: true, 21 | sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'], 22 | credits: { 23 | enabled: false, 24 | }, 25 | 26 | // events callback 27 | afterLoad: (origin, destination, direction) => { 28 | console.log(destination); 29 | }, 30 | afterRender: () => { 31 | console.log('afterRender'); 32 | }, 33 | afterResize: (width, height) => { 34 | console.log('afterResize' + width + ' ' + height); 35 | }, 36 | afterSlideLoad: (section, origin, destination, direction) => { 37 | console.log(destination); 38 | } 39 | }; 40 | } 41 | 42 | ngOnInit() { 43 | } 44 | 45 | getRef(fullPageRef) { 46 | this.fullpageApi = fullPageRef; 47 | } 48 | 49 | } 50 | -------------------------------------------------------------------------------- /demo/angular17/app/examples/using-directive/using-directive.html: -------------------------------------------------------------------------------- 1 |
2 |

Section 1

3 |

Section 2

4 |
5 |

Slide 2.1

6 |

Slide 3.2

7 |

Slide 3.3

8 |
9 |

Section 4

10 |
-------------------------------------------------------------------------------- /demo/angular17/app/examples/using-directive/using-directive.scss: -------------------------------------------------------------------------------- 1 | .section { 2 | text-align:center; 3 | font-size: 3em; 4 | } -------------------------------------------------------------------------------- /demo/angular17/app/examples/using-directive/using-directive.ts: -------------------------------------------------------------------------------- 1 | import { AfterViewInit, Component, OnInit, ViewChild, ViewChildren } from '@angular/core'; 2 | import { FullpageDirective} from '@fullpage/angular-fullpage'; 3 | import { fullpageOptions } from 'fullpage.js/dist/fullpage.extensions.min'; 4 | 5 | 6 | @Component({ 7 | selector: 'app-using-directive', 8 | templateUrl: './using-directive.html', 9 | styleUrls: ['./using-directive.scss'], 10 | }) 11 | export class UsingDirectiveComponent implements OnInit, AfterViewInit { 12 | config: fullpageOptions; 13 | fullpageApi; 14 | 15 | @ViewChild(FullpageDirective) 16 | fullpageDirective: FullpageDirective; 17 | 18 | constructor() { 19 | 20 | // this is just an example => for more details on config please visit fullPage.js docs 21 | this.config = { 22 | licenseKey: 'asdf', 23 | sectionsColor: ['#7BAABE', 'whitesmoke', '#7BAABE', 'whitesmoke', '#7BAABE'], 24 | anchors: ['p1', 'p2', 'p3', 'p4', 'p5'], 25 | navigation: true, 26 | credits: { 27 | enabled: false, 28 | }, 29 | }; 30 | } 31 | 32 | ngAfterViewInit() { 33 | this.fullpageApi = this.fullpageDirective.fullpageApi; 34 | } 35 | 36 | ngOnInit() { 37 | } 38 | 39 | } 40 | -------------------------------------------------------------------------------- /demo/angular17/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /demo/angular17/environments/environment.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: false 3 | }; -------------------------------------------------------------------------------- /demo/angular17/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Fullpage 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /demo/angular17/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.error(err)); 13 | 14 | -------------------------------------------------------------------------------- /demo/angular17/styles.scss: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | @import url(~fullpage.js/dist/fullpage.min.css); 3 | 4 | // change default css 5 | .fp-controlArrow { 6 | padding: 0 1%; 7 | } 8 | -------------------------------------------------------------------------------- /demo/angular17/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "types": [] 6 | }, 7 | "angularCompilerOptions": { 8 | "enableIvy": true, 9 | "strictInjectionParameters": true, 10 | "strictTemplates": true 11 | }, 12 | "files": [ 13 | "main.ts", 14 | "polyfills.ts" 15 | ], 16 | "exclude": [ 17 | "test.ts", 18 | "**/*.spec.ts", 19 | ] 20 | } 21 | -------------------------------------------------------------------------------- /demo/angular17/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "sourceMap": true, 7 | "declaration": false, 8 | "module": "es2022", 9 | "moduleResolution": "node", 10 | "emitDecoratorMetadata": true, 11 | "experimentalDecorators": true, 12 | "target": "es2022", 13 | "typeRoots": [ 14 | "node_modules/@types" 15 | ], 16 | "lib": [ 17 | "es2022", 18 | "dom" 19 | ], 20 | "paths": { 21 | } 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /demo/angular17/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tslint.json", 3 | "rules": { 4 | "directive-selector": [ 5 | true, 6 | "attribute", 7 | "app", 8 | "camelCase" 9 | ], 10 | "component-selector": [ 11 | true, 12 | "element", 13 | "app", 14 | "kebab-case" 15 | ] 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /demo/angular18/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "root": true, 3 | "ignorePatterns": [ 4 | "projects/**/*" 5 | ], 6 | "overrides": [ 7 | { 8 | "files": [ 9 | "*.ts" 10 | ], 11 | "extends": [ 12 | "eslint:recommended", 13 | "plugin:@typescript-eslint/recommended", 14 | "plugin:@angular-eslint/recommended", 15 | "plugin:@angular-eslint/template/process-inline-templates" 16 | ], 17 | "rules": { 18 | "@angular-eslint/directive-selector": [ 19 | "error", 20 | { 21 | "type": "attribute", 22 | "prefix": "app", 23 | "style": "camelCase" 24 | } 25 | ], 26 | "@angular-eslint/component-selector": [ 27 | "error", 28 | { 29 | "type": "element", 30 | "prefix": "app", 31 | "style": "kebab-case" 32 | } 33 | ] 34 | } 35 | }, 36 | { 37 | "files": [ 38 | "*.html" 39 | ], 40 | "extends": [ 41 | "plugin:@angular-eslint/template/recommended" 42 | ], 43 | "rules": {} 44 | } 45 | ] 46 | } -------------------------------------------------------------------------------- /demo/angular18/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /tmp 5 | /out-tsc 6 | 7 | # dependencies 8 | /node_modules 9 | /src/node_modules 10 | 11 | # IDEs and editors 12 | /.idea 13 | .project 14 | .classpath 15 | .c9/ 16 | *.launch 17 | *.angular 18 | .settings/ 19 | *.sublime-workspace 20 | .vscode/* 21 | 22 | # IDE - VSCode 23 | .vscode/* 24 | !.vscode/settings.json 25 | !.vscode/tasks.json 26 | !.vscode/launch.json 27 | !.vscode/extensions.json 28 | 29 | # misc 30 | /.sass-cache 31 | /connect.lock 32 | /coverage 33 | /libpeerconnection.log 34 | npm-debug.log 35 | yarn-error.log 36 | testem.log 37 | /typings 38 | 39 | # System Files 40 | .DS_Store 41 | Thumbs.db 42 | -------------------------------------------------------------------------------- /demo/angular18/README.md: -------------------------------------------------------------------------------- 1 | # Examples 2 | 3 | In order to run the examples you'll have to first install the dependencies: 4 | 5 | ```shell 6 | # install dependencies 7 | npm install 8 | ``` 9 | 10 | Then run them with: 11 | 12 | ```shell 13 | # serve examples 14 | npm run start 15 | ``` 16 | 17 | A page will open in the browser, where you'll be able to swap between examles by accessing one or anothe URL: 18 | 19 | - http://localhost:4200/ 20 | - http://localhost:4200/dynamicChanges 21 | - http://localhost:4200/scrollOverflow 22 | - http://localhost:4200/typeDefinitions 23 | - http://localhost:4200/dynamicNgFor 24 | - http://localhost:4200/usingDirective -------------------------------------------------------------------------------- /demo/angular18/app/app-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | import { BasicExampleComponent } from './examples/basic/basic.component'; 4 | import { DynamicChangesExampleComponent } from './examples/dynamic-changes/dynamic-changes.component'; 5 | import { ScrollOverflowExampleComponent } from './examples/scrolloverflow/scrolloverflow.component'; 6 | import { TypeExampleComponent } from './examples/type-definitions/type.component'; 7 | import { DynamicNgForComponent } from './examples/dynamic-ng-for/dynamic-ng-for.component'; 8 | import { UsingDirectiveComponent } from './examples/using-directive/using-directive'; 9 | 10 | 11 | const routes: Routes = [ 12 | { path: '', component: BasicExampleComponent, pathMatch: 'full' }, 13 | { path: 'dynamicChanges', component: DynamicChangesExampleComponent }, 14 | { path: 'scrollOverflow', component: ScrollOverflowExampleComponent }, 15 | { path: 'typeDefinitions', component: TypeExampleComponent }, 16 | { path: 'dynamicNgFor', component: DynamicNgForComponent }, 17 | { path: 'usingDirective', component: UsingDirectiveComponent } 18 | ]; 19 | 20 | @NgModule({ 21 | imports: [RouterModule.forRoot(routes)], 22 | exports: [RouterModule] 23 | }) 24 | export class AppRoutingModule { } 25 | -------------------------------------------------------------------------------- /demo/angular18/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | template: `` 6 | }) 7 | export class AppComponent { 8 | 9 | constructor() {} 10 | 11 | } 12 | -------------------------------------------------------------------------------- /demo/angular18/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { BrowserModule } from '@angular/platform-browser'; 2 | import { NgModule } from '@angular/core'; 3 | 4 | import { AppRoutingModule } from './app-routing.module'; 5 | import { AppComponent } from './app.component'; 6 | 7 | import { BasicExampleComponent } from './examples/basic/basic.component'; 8 | import { DynamicChangesExampleComponent } from './examples/dynamic-changes/dynamic-changes.component'; 9 | import { ScrollOverflowExampleComponent } from './examples/scrolloverflow/scrolloverflow.component'; 10 | import { TypeExampleComponent } from './examples/type-definitions/type.component'; 11 | import { DynamicNgForComponent } from './examples/dynamic-ng-for/dynamic-ng-for.component'; 12 | import { UsingDirectiveComponent } from './examples/using-directive/using-directive'; 13 | 14 | import { AngularFullpageModule } from '@fullpage/angular-fullpage'; 15 | 16 | @NgModule({ 17 | declarations: [ 18 | AppComponent, 19 | BasicExampleComponent, 20 | DynamicChangesExampleComponent, 21 | ScrollOverflowExampleComponent, 22 | TypeExampleComponent, 23 | DynamicNgForComponent, 24 | UsingDirectiveComponent 25 | ], 26 | imports: [ 27 | BrowserModule, 28 | AppRoutingModule, 29 | AngularFullpageModule 30 | ], 31 | providers: [], 32 | bootstrap: [AppComponent] 33 | }) 34 | export class AppModule { } 35 | -------------------------------------------------------------------------------- /demo/angular18/app/examples/basic/basic.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 10 |

Section 1

11 |
12 |

Section 2

13 |
14 |

Slide 2.1

15 |

Slide 3.2

16 |

Slide 3.3

17 |
18 |

Section 4

19 |
20 | -------------------------------------------------------------------------------- /demo/angular18/app/examples/basic/basic.component.scss: -------------------------------------------------------------------------------- 1 | .section { 2 | text-align:center; 3 | font-size: 3em; 4 | } 5 | .examples{ 6 | position: fixed; 7 | top: 0; 8 | left: 0; 9 | right: 0; 10 | margin: 0; 11 | padding: 0; 12 | z-index: 999; 13 | } 14 | .examples li{ 15 | display: inline-block; 16 | } 17 | .examples li a{ 18 | color: white; 19 | text-decoration: none; 20 | font-family: arial; 21 | font-size: 0.5em; 22 | margin-right: 2em; 23 | } 24 | .examples li a:hover{ 25 | text-decoration: underline; 26 | } -------------------------------------------------------------------------------- /demo/angular18/app/examples/basic/basic.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-basic', 5 | templateUrl: './basic.component.html', 6 | styleUrls: ['./basic.component.scss'] 7 | }) 8 | export class BasicExampleComponent implements OnInit { 9 | config; 10 | fullpageApi; 11 | 12 | constructor() { 13 | 14 | // this is just an example => for more details on config please visit fullPage.js docs 15 | this.config = { 16 | licenseKey: 'YOUR LICENSE KEY HERE', 17 | sectionsColor: ['#7BAABE', 'whitesmoke', '#7BAABE', 'whitesmoke', '#7BAABE'], 18 | anchors: ['p1', 'p2', 'p3', 'p4', 'p5'], 19 | navigation: true, 20 | }; 21 | } 22 | 23 | ngOnInit() { 24 | } 25 | 26 | getRef(fullPageRef) { 27 | this.fullpageApi = fullPageRef; 28 | } 29 | 30 | } 31 | -------------------------------------------------------------------------------- /demo/angular18/app/examples/dynamic-changes/dynamic-changes.component.html: -------------------------------------------------------------------------------- 1 | 7 | 8 |
9 |

Section 1

10 |
11 |

Section 2

12 | 13 | 14 | 15 |
16 |
17 |

Slide 3.1

18 |

Slide 3.2

19 |
20 |

Slide 3.3

21 | name 22 |
23 |
24 |
25 |

Section 4

26 | 27 | 28 | 29 |
30 |
-------------------------------------------------------------------------------- /demo/angular18/app/examples/dynamic-changes/dynamic-changes.component.scss: -------------------------------------------------------------------------------- 1 | .section { 2 | text-align:center; 3 | font-size: 3em; 4 | } 5 | 6 | #menu li { 7 | display:inline-block; 8 | margin: 10px; 9 | color: #000; 10 | background:#fff; 11 | background: rgba(255,255,255, 0.5); 12 | -webkit-border-radius: 10px; 13 | border-radius: 10px; 14 | } 15 | #menu li.active{ 16 | background:#666; 17 | background: rgba(0,0,0, 0.5); 18 | color: #fff; 19 | } 20 | #menu li a{ 21 | text-decoration:none; 22 | color: #000; 23 | } 24 | #menu li.active a:hover{ 25 | color: #000; 26 | } 27 | #menu li:hover{ 28 | background: rgba(255,255,255, 0.8); 29 | } 30 | #menu li a, 31 | #menu li.active a{ 32 | padding: 9px 18px; 33 | display:block; 34 | } 35 | #menu li.active a{ 36 | color: #fff; 37 | } 38 | #menu{ 39 | position:fixed; 40 | top:0; 41 | left:0; 42 | height: 40px; 43 | z-index: 70; 44 | width: 100%; 45 | padding: 0; 46 | margin:0; 47 | } 48 | -------------------------------------------------------------------------------- /demo/angular18/app/examples/dynamic-ng-for/dynamic-ng-for.component.html: -------------------------------------------------------------------------------- 1 | 7 | 8 |
9 |
10 |

Section {{section}}

11 | 12 |
13 |
-------------------------------------------------------------------------------- /demo/angular18/app/examples/dynamic-ng-for/dynamic-ng-for.component.scss: -------------------------------------------------------------------------------- 1 | .section { 2 | text-align:center; 3 | font-size: 3em; 4 | } 5 | 6 | #menu li { 7 | display:inline-block; 8 | margin: 10px; 9 | color: #000; 10 | background:#fff; 11 | background: rgba(255,255,255, 0.5); 12 | -webkit-border-radius: 10px; 13 | border-radius: 10px; 14 | } 15 | #menu li.active{ 16 | background:#666; 17 | background: rgba(0,0,0, 0.5); 18 | color: #fff; 19 | } 20 | #menu li a{ 21 | text-decoration:none; 22 | color: #000; 23 | } 24 | #menu li.active a:hover{ 25 | color: #000; 26 | } 27 | #menu li:hover{ 28 | background: rgba(255,255,255, 0.8); 29 | } 30 | #menu li a, 31 | #menu li.active a{ 32 | padding: 9px 18px; 33 | display:block; 34 | } 35 | #menu li.active a{ 36 | color: #fff; 37 | } 38 | #menu{ 39 | position:fixed; 40 | top:0; 41 | left:0; 42 | height: 40px; 43 | z-index: 70; 44 | width: 100%; 45 | padding: 0; 46 | margin:0; 47 | } 48 | -------------------------------------------------------------------------------- /demo/angular18/app/examples/dynamic-ng-for/dynamic-ng-for.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, AfterViewInit, ViewChildren, QueryList } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-dynamic-ng-for', 5 | templateUrl: './dynamic-ng-for.component.html', 6 | styleUrls: ['./dynamic-ng-for.component.scss'] 7 | }) 8 | export class DynamicNgForComponent implements OnInit, AfterViewInit { 9 | @ViewChildren('sectionRef') sectionRef: QueryList; 10 | config: any; 11 | fullpageApi: any; 12 | sections = [1]; 13 | 14 | constructor() { 15 | // this is just an example => for more details on config please visit fullPage.js docs 16 | this.config = { 17 | licenseKey: 'YOUR LICENSE KEY HERE', 18 | anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'], 19 | menu: '#menu', 20 | navigation: true, 21 | sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'], 22 | }; 23 | } 24 | 25 | ngOnInit() { 26 | } 27 | 28 | ngAfterViewInit() { 29 | this.sectionRef.changes.subscribe(() => { 30 | this.ngForRendred(); 31 | }); 32 | } 33 | 34 | getRef(fullPageRef) { 35 | this.fullpageApi = fullPageRef; 36 | } 37 | 38 | add() { 39 | const twoDigits = Math.random() * 100; 40 | this.sections.push( Math.round(twoDigits) ); 41 | } 42 | 43 | ngForRendred() { 44 | console.log('ngFor dom render is done'); 45 | this.fullpageApi.build(); 46 | } 47 | 48 | } 49 | -------------------------------------------------------------------------------- /demo/angular18/app/examples/scrolloverflow/scrolloverflow.component.scss: -------------------------------------------------------------------------------- 1 | .section { 2 | text-align:center; 3 | font-size: 3em; 4 | } 5 | .section p{ 6 | width: 600px; 7 | margin: 0 auto; 8 | } 9 | 10 | #menu li { 11 | display:inline-block; 12 | margin: 10px; 13 | color: #000; 14 | background:#fff; 15 | background: rgba(255,255,255, 0.5); 16 | -webkit-border-radius: 10px; 17 | border-radius: 10px; 18 | } 19 | #menu li.active{ 20 | background:#666; 21 | background: rgba(0,0,0, 0.5); 22 | color: #fff; 23 | } 24 | #menu li a{ 25 | text-decoration:none; 26 | color: #000; 27 | } 28 | #menu li.active a:hover{ 29 | color: #000; 30 | } 31 | #menu li:hover{ 32 | background: rgba(255,255,255, 0.8); 33 | } 34 | #menu li a, 35 | #menu li.active a{ 36 | padding: 9px 18px; 37 | display:block; 38 | } 39 | #menu li.active a{ 40 | color: #fff; 41 | } 42 | #menu{ 43 | position:fixed; 44 | top:0; 45 | left:0; 46 | height: 40px; 47 | z-index: 70; 48 | width: 100%; 49 | padding: 0; 50 | margin:0; 51 | } 52 | -------------------------------------------------------------------------------- /demo/angular18/app/examples/scrolloverflow/scrolloverflow.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit} from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-scrolloverflow', 5 | templateUrl: './scrolloverflow.component.html', 6 | styleUrls: ['./scrolloverflow.component.scss'] 7 | }) 8 | export class ScrollOverflowExampleComponent implements OnInit { 9 | config; 10 | fullpageApi; 11 | 12 | constructor() { 13 | 14 | // this is just an example => for more details on config please visit fullPage.js docs 15 | this.config = { 16 | licenseKey: 'YOUR LICENSE KEY HERE', 17 | anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'], 18 | menu: '#menu', 19 | scrollOverflow: true, 20 | sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'], 21 | 22 | // events callback 23 | afterLoad: (origin, destination, direction) => { 24 | // console.log(destination); 25 | }, 26 | afterRender: () => { 27 | // console.log('afterRender'); 28 | }, 29 | afterResize: (width, height) => { 30 | // console.log('afterResize' + width + ' ' + height); 31 | }, 32 | afterSlideLoad: (section, origin, destination, direction) => { 33 | // console.log(destination); 34 | } 35 | }; 36 | } 37 | 38 | ngOnInit() { 39 | } 40 | 41 | getRef(fullPageRef) { 42 | this.fullpageApi = fullPageRef; 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /demo/angular18/app/examples/type-definitions/type.component.html: -------------------------------------------------------------------------------- 1 |
2 |

Section 1

3 |
4 |

Section 2

5 | 6 |
7 |
8 |

Slide 2.1

9 |

Slide 3.2

10 |

Slide 3.3

11 |
12 |
13 |

Section 4

14 | 15 |
16 |
17 | -------------------------------------------------------------------------------- /demo/angular18/app/examples/type-definitions/type.component.scss: -------------------------------------------------------------------------------- 1 | .section { 2 | text-align:center; 3 | font-size: 3em; 4 | } -------------------------------------------------------------------------------- /demo/angular18/app/examples/type-definitions/type.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { fullpageOptions, fullpageApi } from 'fullpage.js/dist/fullpage.extensions.min'; 3 | 4 | @Component({ 5 | selector: 'app-type', 6 | templateUrl: './type.component.html', 7 | styleUrls: ['./type.component.scss'] 8 | }) 9 | export class TypeExampleComponent implements OnInit { 10 | config: fullpageOptions; 11 | fullpageApi: fullpageApi; 12 | 13 | constructor() { 14 | 15 | // this is just an example => for more details on config please visit fullPage.js docs 16 | this.config = { 17 | licenseKey: 'YOUR LICENSE KEY HERE', 18 | anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'], 19 | menu: '#menu', 20 | scrollOverflow: true, 21 | sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'], 22 | credits: { 23 | enabled: false, 24 | }, 25 | 26 | // events callback 27 | afterLoad: (origin, destination, direction) => { 28 | console.log(destination); 29 | }, 30 | afterRender: () => { 31 | console.log('afterRender'); 32 | }, 33 | afterResize: (width, height) => { 34 | console.log('afterResize' + width + ' ' + height); 35 | }, 36 | afterSlideLoad: (section, origin, destination, direction) => { 37 | console.log(destination); 38 | } 39 | }; 40 | } 41 | 42 | ngOnInit() { 43 | } 44 | 45 | getRef(fullPageRef) { 46 | this.fullpageApi = fullPageRef; 47 | } 48 | 49 | } 50 | -------------------------------------------------------------------------------- /demo/angular18/app/examples/using-directive/using-directive.html: -------------------------------------------------------------------------------- 1 |
2 |

Section 1

3 |

Section 2

4 |
5 |

Slide 2.1

6 |

Slide 3.2

7 |

Slide 3.3

8 |
9 |

Section 4

10 |
-------------------------------------------------------------------------------- /demo/angular18/app/examples/using-directive/using-directive.scss: -------------------------------------------------------------------------------- 1 | .section { 2 | text-align:center; 3 | font-size: 3em; 4 | } -------------------------------------------------------------------------------- /demo/angular18/app/examples/using-directive/using-directive.ts: -------------------------------------------------------------------------------- 1 | import { AfterViewInit, Component, OnInit, ViewChild, ViewChildren } from '@angular/core'; 2 | import { FullpageDirective} from '@fullpage/angular-fullpage'; 3 | import { fullpageOptions } from 'fullpage.js/dist/fullpage.extensions.min'; 4 | 5 | 6 | @Component({ 7 | selector: 'app-using-directive', 8 | templateUrl: './using-directive.html', 9 | styleUrls: ['./using-directive.scss'], 10 | }) 11 | export class UsingDirectiveComponent implements OnInit, AfterViewInit { 12 | config: fullpageOptions; 13 | fullpageApi; 14 | 15 | @ViewChild(FullpageDirective) 16 | fullpageDirective: FullpageDirective; 17 | 18 | constructor() { 19 | 20 | // this is just an example => for more details on config please visit fullPage.js docs 21 | this.config = { 22 | licenseKey: 'asdf', 23 | sectionsColor: ['#7BAABE', 'whitesmoke', '#7BAABE', 'whitesmoke', '#7BAABE'], 24 | anchors: ['p1', 'p2', 'p3', 'p4', 'p5'], 25 | navigation: true, 26 | credits: { 27 | enabled: false, 28 | }, 29 | }; 30 | } 31 | 32 | ngAfterViewInit() { 33 | this.fullpageApi = this.fullpageDirective.fullpageApi; 34 | } 35 | 36 | ngOnInit() { 37 | } 38 | 39 | } 40 | -------------------------------------------------------------------------------- /demo/angular18/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /demo/angular18/environments/environment.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: false 3 | }; -------------------------------------------------------------------------------- /demo/angular18/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Fullpage 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /demo/angular18/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.error(err)); 13 | 14 | -------------------------------------------------------------------------------- /demo/angular18/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@fullpage/angular-fullpage-demo-angular18", 3 | "version": "0.0.1", 4 | "description": "Official Angular wrapper for fullPage.js", 5 | "author": "vh13294", 6 | "contributors": [ 7 | "vh13294", 8 | "alvarotrigo", 9 | "alidihaw" 10 | ], 11 | "homepage": "https://github.com/alvarotrigo/angular-fullpage", 12 | "repository": { 13 | "type": "git", 14 | "url": "https://github.com/alvarotrigo/angular-fullpage" 15 | }, 16 | "license": "GPL-3.0", 17 | "private": false, 18 | "main": "dist/@fullpage/angular-fullpage", 19 | "files": [ 20 | "dist" 21 | ], 22 | "scripts": { 23 | "ng": "ng", 24 | "start": "ng serve", 25 | "build": "ng build", 26 | "test": "ng test", 27 | "lint": "ng lint", 28 | "e2e": "ng e2e" 29 | }, 30 | "dependencies": { 31 | "@angular/animations": "18.0.0", 32 | "@angular/common": "18.0.0", 33 | "@angular/compiler": "18.0.0", 34 | "@angular/core": "18.0.0", 35 | "@angular/forms": "18.0.0", 36 | "@angular/platform-browser": "18.0.0", 37 | "@angular/platform-browser-dynamic": "18.0.0", 38 | "@angular/router": "18.0.0", 39 | "@fullpage/angular-fullpage": "^0.1.6", 40 | "fullpage.js": "4.0.35", 41 | "rxjs": "~7.8.0", 42 | "zone.js": "~0.14.0" 43 | }, 44 | "devDependencies": { 45 | "@angular-devkit/build-angular": "^18.2.19", 46 | "@angular/cli": "18.0.0", 47 | "@angular/compiler-cli": "18.0.0", 48 | "@angular-eslint/builder": "^18.0.0", 49 | "@angular-eslint/eslint-plugin": "^18.0.0", 50 | "@angular-eslint/eslint-plugin-template": "^18.0.0", 51 | "@angular-eslint/template-parser": "^18.0.0", 52 | "@types/node": "^20.0.0", 53 | "@typescript-eslint/eslint-plugin": "^7.0.0", 54 | "@typescript-eslint/parser": "^7.0.0", 55 | "eslint": "^8.56.0", 56 | "ts-node": "~10.9.0", 57 | "tslib": "^2.4.0", 58 | "typescript": "5.4" 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /demo/angular18/styles.scss: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | @import url(~fullpage.js/dist/fullpage.min.css); 3 | 4 | // change default css 5 | .fp-controlArrow { 6 | padding: 0 1%; 7 | } 8 | -------------------------------------------------------------------------------- /demo/angular18/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "types": [] 6 | }, 7 | "angularCompilerOptions": { 8 | "enableIvy": true, 9 | "strictInjectionParameters": true, 10 | "strictTemplates": true 11 | }, 12 | "files": [ 13 | "main.ts", 14 | "polyfills.ts" 15 | ], 16 | "exclude": [ 17 | "test.ts", 18 | "**/*.spec.ts", 19 | ] 20 | } 21 | -------------------------------------------------------------------------------- /demo/angular18/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "sourceMap": true, 7 | "declaration": false, 8 | "module": "es2022", 9 | "moduleResolution": "node", 10 | "emitDecoratorMetadata": true, 11 | "experimentalDecorators": true, 12 | "target": "es2022", 13 | "typeRoots": [ 14 | "node_modules/@types" 15 | ], 16 | "lib": [ 17 | "es2022", 18 | "dom" 19 | ], 20 | "paths": { 21 | } 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /demo/angular18/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tslint.json", 3 | "rules": { 4 | "directive-selector": [ 5 | true, 6 | "attribute", 7 | "app", 8 | "camelCase" 9 | ], 10 | "component-selector": [ 11 | true, 12 | "element", 13 | "app", 14 | "kebab-case" 15 | ] 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /demo/angular19/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /tmp 5 | /out-tsc 6 | 7 | # dependencies 8 | /node_modules 9 | /src/node_modules 10 | 11 | # IDEs and editors 12 | /.idea 13 | .project 14 | .classpath 15 | .c9/ 16 | *.launch 17 | *.angular 18 | .settings/ 19 | *.sublime-workspace 20 | .vscode/* 21 | 22 | # IDE - VSCode 23 | .vscode/* 24 | !.vscode/settings.json 25 | !.vscode/tasks.json 26 | !.vscode/launch.json 27 | !.vscode/extensions.json 28 | 29 | # misc 30 | /.sass-cache 31 | /connect.lock 32 | /coverage 33 | /libpeerconnection.log 34 | npm-debug.log 35 | yarn-error.log 36 | testem.log 37 | /typings 38 | 39 | # System Files 40 | .DS_Store 41 | Thumbs.db 42 | -------------------------------------------------------------------------------- /demo/angular19/README.md: -------------------------------------------------------------------------------- 1 | # Examples 2 | 3 | In order to run the examples you'll have to first install the dependencies: 4 | 5 | ```shell 6 | # install dependencies 7 | npm install 8 | ``` 9 | 10 | Then run them with: 11 | 12 | ```shell 13 | # serve examples 14 | npm run start 15 | ``` 16 | 17 | A page will open in the browser, where you'll be able to swap between examles by accessing one or anothe URL: 18 | 19 | - http://localhost:4200/ 20 | - http://localhost:4200/dynamicChanges 21 | - http://localhost:4200/scrollOverflow 22 | - http://localhost:4200/typeDefinitions 23 | - http://localhost:4200/dynamicNgFor 24 | - http://localhost:4200/usingDirective -------------------------------------------------------------------------------- /demo/angular19/app/app-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | import { BasicExampleComponent } from './examples/basic/basic.component'; 4 | import { DynamicChangesExampleComponent } from './examples/dynamic-changes/dynamic-changes.component'; 5 | import { ScrollOverflowExampleComponent } from './examples/scrolloverflow/scrolloverflow.component'; 6 | import { TypeExampleComponent } from './examples/type-definitions/type.component'; 7 | import { DynamicNgForComponent } from './examples/dynamic-ng-for/dynamic-ng-for.component'; 8 | import { UsingDirectiveComponent } from './examples/using-directive/using-directive'; 9 | 10 | 11 | const routes: Routes = [ 12 | { path: '', component: BasicExampleComponent, pathMatch: 'full' }, 13 | { path: 'dynamicChanges', component: DynamicChangesExampleComponent }, 14 | { path: 'scrollOverflow', component: ScrollOverflowExampleComponent }, 15 | { path: 'typeDefinitions', component: TypeExampleComponent }, 16 | { path: 'dynamicNgFor', component: DynamicNgForComponent }, 17 | { path: 'usingDirective', component: UsingDirectiveComponent } 18 | ]; 19 | 20 | @NgModule({ 21 | imports: [RouterModule.forRoot(routes)], 22 | exports: [RouterModule] 23 | }) 24 | export class AppRoutingModule { } 25 | -------------------------------------------------------------------------------- /demo/angular19/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | standalone: false, 6 | template: `` 7 | }) 8 | export class AppComponent { 9 | 10 | constructor() {} 11 | 12 | } 13 | -------------------------------------------------------------------------------- /demo/angular19/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { BrowserModule } from '@angular/platform-browser'; 2 | import { NgModule } from '@angular/core'; 3 | 4 | import { AppRoutingModule } from './app-routing.module'; 5 | import { AppComponent } from './app.component'; 6 | 7 | import { BasicExampleComponent } from './examples/basic/basic.component'; 8 | import { DynamicChangesExampleComponent } from './examples/dynamic-changes/dynamic-changes.component'; 9 | import { ScrollOverflowExampleComponent } from './examples/scrolloverflow/scrolloverflow.component'; 10 | import { TypeExampleComponent } from './examples/type-definitions/type.component'; 11 | import { DynamicNgForComponent } from './examples/dynamic-ng-for/dynamic-ng-for.component'; 12 | import { UsingDirectiveComponent } from './examples/using-directive/using-directive'; 13 | import { AngularFullpageModule } from '@fullpage/angular-fullpage'; 14 | 15 | @NgModule({ 16 | declarations: [ 17 | AppComponent, 18 | BasicExampleComponent, 19 | DynamicChangesExampleComponent, 20 | ScrollOverflowExampleComponent, 21 | TypeExampleComponent, 22 | DynamicNgForComponent, 23 | UsingDirectiveComponent 24 | ], 25 | imports: [ 26 | BrowserModule, 27 | AppRoutingModule, 28 | AngularFullpageModule 29 | ], 30 | providers: [], 31 | bootstrap: [AppComponent] 32 | }) 33 | export class AppModule { } 34 | -------------------------------------------------------------------------------- /demo/angular19/app/examples/basic/basic.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 10 |

Section 1

11 |
12 |

Section 2

13 |
14 |

Slide 2.1

15 |

Slide 3.2

16 |

Slide 3.3

17 |
18 |

Section 4

19 |
20 | -------------------------------------------------------------------------------- /demo/angular19/app/examples/basic/basic.component.scss: -------------------------------------------------------------------------------- 1 | .section { 2 | text-align:center; 3 | font-size: 3em; 4 | } 5 | .examples{ 6 | position: fixed; 7 | top: 0; 8 | left: 0; 9 | right: 0; 10 | margin: 0; 11 | padding: 0; 12 | z-index: 999; 13 | } 14 | .examples li{ 15 | display: inline-block; 16 | } 17 | .examples li a{ 18 | color: white; 19 | text-decoration: none; 20 | font-family: arial; 21 | font-size: 0.5em; 22 | margin-right: 2em; 23 | } 24 | .examples li a:hover{ 25 | text-decoration: underline; 26 | } -------------------------------------------------------------------------------- /demo/angular19/app/examples/basic/basic.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-basic', 5 | standalone: false, 6 | templateUrl: './basic.component.html', 7 | styleUrls: ['./basic.component.scss'] 8 | }) 9 | export class BasicExampleComponent implements OnInit { 10 | config; 11 | fullpageApi; 12 | 13 | constructor() { 14 | 15 | // this is just an example => for more details on config please visit fullPage.js docs 16 | this.config = { 17 | licenseKey: 'YOUR LICENSE KEY HERE', 18 | sectionsColor: ['#7BAABE', 'whitesmoke', '#7BAABE', 'whitesmoke', '#7BAABE'], 19 | anchors: ['p1', 'p2', 'p3', 'p4', 'p5'], 20 | navigation: true, 21 | }; 22 | } 23 | 24 | ngOnInit() { 25 | } 26 | 27 | getRef(fullPageRef) { 28 | this.fullpageApi = fullPageRef; 29 | } 30 | 31 | } 32 | -------------------------------------------------------------------------------- /demo/angular19/app/examples/dynamic-changes/dynamic-changes.component.html: -------------------------------------------------------------------------------- 1 | 7 | 8 |
9 |

Section 1

10 |
11 |

Section 2

12 | 13 | 14 | 15 |
16 |
17 |

Slide 3.1

18 |

Slide 3.2

19 |
20 |

Slide 3.3

21 | name 22 |
23 |
24 |
25 |

Section 4

26 | 27 | 28 | 29 |
30 |
-------------------------------------------------------------------------------- /demo/angular19/app/examples/dynamic-changes/dynamic-changes.component.scss: -------------------------------------------------------------------------------- 1 | .section { 2 | text-align:center; 3 | font-size: 3em; 4 | } 5 | 6 | #menu li { 7 | display:inline-block; 8 | margin: 10px; 9 | color: #000; 10 | background:#fff; 11 | background: rgba(255,255,255, 0.5); 12 | -webkit-border-radius: 10px; 13 | border-radius: 10px; 14 | } 15 | #menu li.active{ 16 | background:#666; 17 | background: rgba(0,0,0, 0.5); 18 | color: #fff; 19 | } 20 | #menu li a{ 21 | text-decoration:none; 22 | color: #000; 23 | } 24 | #menu li.active a:hover{ 25 | color: #000; 26 | } 27 | #menu li:hover{ 28 | background: rgba(255,255,255, 0.8); 29 | } 30 | #menu li a, 31 | #menu li.active a{ 32 | padding: 9px 18px; 33 | display:block; 34 | } 35 | #menu li.active a{ 36 | color: #fff; 37 | } 38 | #menu{ 39 | position:fixed; 40 | top:0; 41 | left:0; 42 | height: 40px; 43 | z-index: 70; 44 | width: 100%; 45 | padding: 0; 46 | margin:0; 47 | } 48 | -------------------------------------------------------------------------------- /demo/angular19/app/examples/dynamic-ng-for/dynamic-ng-for.component.html: -------------------------------------------------------------------------------- 1 | 7 | 8 |
9 |
10 |

Section {{section}}

11 | 12 |
13 |
-------------------------------------------------------------------------------- /demo/angular19/app/examples/dynamic-ng-for/dynamic-ng-for.component.scss: -------------------------------------------------------------------------------- 1 | .section { 2 | text-align:center; 3 | font-size: 3em; 4 | } 5 | 6 | #menu li { 7 | display:inline-block; 8 | margin: 10px; 9 | color: #000; 10 | background:#fff; 11 | background: rgba(255,255,255, 0.5); 12 | -webkit-border-radius: 10px; 13 | border-radius: 10px; 14 | } 15 | #menu li.active{ 16 | background:#666; 17 | background: rgba(0,0,0, 0.5); 18 | color: #fff; 19 | } 20 | #menu li a{ 21 | text-decoration:none; 22 | color: #000; 23 | } 24 | #menu li.active a:hover{ 25 | color: #000; 26 | } 27 | #menu li:hover{ 28 | background: rgba(255,255,255, 0.8); 29 | } 30 | #menu li a, 31 | #menu li.active a{ 32 | padding: 9px 18px; 33 | display:block; 34 | } 35 | #menu li.active a{ 36 | color: #fff; 37 | } 38 | #menu{ 39 | position:fixed; 40 | top:0; 41 | left:0; 42 | height: 40px; 43 | z-index: 70; 44 | width: 100%; 45 | padding: 0; 46 | margin:0; 47 | } 48 | -------------------------------------------------------------------------------- /demo/angular19/app/examples/dynamic-ng-for/dynamic-ng-for.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, AfterViewInit, ViewChildren, QueryList } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-dynamic-ng-for', 5 | standalone: false, 6 | templateUrl: './dynamic-ng-for.component.html', 7 | styleUrls: ['./dynamic-ng-for.component.scss'] 8 | }) 9 | export class DynamicNgForComponent implements OnInit, AfterViewInit { 10 | @ViewChildren('sectionRef') sectionRef: QueryList; 11 | config: any; 12 | fullpageApi: any; 13 | sections = [1]; 14 | 15 | constructor() { 16 | // this is just an example => for more details on config please visit fullPage.js docs 17 | this.config = { 18 | licenseKey: 'YOUR LICENSE KEY HERE', 19 | anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'], 20 | menu: '#menu', 21 | navigation: true, 22 | sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'], 23 | }; 24 | } 25 | 26 | ngOnInit() { 27 | } 28 | 29 | ngAfterViewInit() { 30 | this.sectionRef.changes.subscribe(() => { 31 | this.ngForRendred(); 32 | }); 33 | } 34 | 35 | getRef(fullPageRef) { 36 | this.fullpageApi = fullPageRef; 37 | } 38 | 39 | add() { 40 | const twoDigits = Math.random() * 100; 41 | this.sections.push( Math.round(twoDigits) ); 42 | } 43 | 44 | ngForRendred() { 45 | console.log('ngFor dom render is done'); 46 | this.fullpageApi.build(); 47 | } 48 | 49 | } 50 | -------------------------------------------------------------------------------- /demo/angular19/app/examples/scrolloverflow/scrolloverflow.component.scss: -------------------------------------------------------------------------------- 1 | .section { 2 | text-align:center; 3 | font-size: 3em; 4 | } 5 | .section p{ 6 | width: 600px; 7 | margin: 0 auto; 8 | } 9 | 10 | #menu li { 11 | display:inline-block; 12 | margin: 10px; 13 | color: #000; 14 | background:#fff; 15 | background: rgba(255,255,255, 0.5); 16 | -webkit-border-radius: 10px; 17 | border-radius: 10px; 18 | } 19 | #menu li.active{ 20 | background:#666; 21 | background: rgba(0,0,0, 0.5); 22 | color: #fff; 23 | } 24 | #menu li a{ 25 | text-decoration:none; 26 | color: #000; 27 | } 28 | #menu li.active a:hover{ 29 | color: #000; 30 | } 31 | #menu li:hover{ 32 | background: rgba(255,255,255, 0.8); 33 | } 34 | #menu li a, 35 | #menu li.active a{ 36 | padding: 9px 18px; 37 | display:block; 38 | } 39 | #menu li.active a{ 40 | color: #fff; 41 | } 42 | #menu{ 43 | position:fixed; 44 | top:0; 45 | left:0; 46 | height: 40px; 47 | z-index: 70; 48 | width: 100%; 49 | padding: 0; 50 | margin:0; 51 | } 52 | -------------------------------------------------------------------------------- /demo/angular19/app/examples/scrolloverflow/scrolloverflow.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit} from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-scrolloverflow', 5 | standalone: false, 6 | templateUrl: './scrolloverflow.component.html', 7 | styleUrls: ['./scrolloverflow.component.scss'] 8 | }) 9 | export class ScrollOverflowExampleComponent implements OnInit { 10 | config; 11 | fullpageApi; 12 | 13 | constructor() { 14 | 15 | // this is just an example => for more details on config please visit fullPage.js docs 16 | this.config = { 17 | licenseKey: 'YOUR LICENSE KEY HERE', 18 | anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'], 19 | menu: '#menu', 20 | scrollOverflow: true, 21 | sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'], 22 | 23 | // events callback 24 | afterLoad: (origin, destination, direction) => { 25 | // console.log(destination); 26 | }, 27 | afterRender: () => { 28 | // console.log('afterRender'); 29 | }, 30 | afterResize: (width, height) => { 31 | // console.log('afterResize' + width + ' ' + height); 32 | }, 33 | afterSlideLoad: (section, origin, destination, direction) => { 34 | // console.log(destination); 35 | } 36 | }; 37 | } 38 | 39 | ngOnInit() { 40 | } 41 | 42 | getRef(fullPageRef) { 43 | this.fullpageApi = fullPageRef; 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /demo/angular19/app/examples/type-definitions/type.component.html: -------------------------------------------------------------------------------- 1 |
2 |

Section 1

3 |
4 |

Section 2

5 | 6 |
7 |
8 |

Slide 2.1

9 |

Slide 3.2

10 |

Slide 3.3

11 |
12 |
13 |

Section 4

14 | 15 |
16 |
17 | -------------------------------------------------------------------------------- /demo/angular19/app/examples/type-definitions/type.component.scss: -------------------------------------------------------------------------------- 1 | .section { 2 | text-align:center; 3 | font-size: 3em; 4 | } -------------------------------------------------------------------------------- /demo/angular19/app/examples/type-definitions/type.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { fullpageOptions, fullpageApi } from 'fullpage.js/dist/fullpage.extensions.min'; 3 | 4 | @Component({ 5 | selector: 'app-type', 6 | standalone: false, 7 | templateUrl: './type.component.html', 8 | styleUrls: ['./type.component.scss'] 9 | }) 10 | export class TypeExampleComponent implements OnInit { 11 | config: fullpageOptions; 12 | fullpageApi: fullpageApi; 13 | 14 | constructor() { 15 | 16 | // this is just an example => for more details on config please visit fullPage.js docs 17 | this.config = { 18 | licenseKey: 'YOUR LICENSE KEY HERE', 19 | anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'], 20 | menu: '#menu', 21 | scrollOverflow: true, 22 | sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'], 23 | credits: { 24 | enabled: false, 25 | }, 26 | 27 | // events callback 28 | afterLoad: (origin, destination, direction) => { 29 | console.log(destination); 30 | }, 31 | afterRender: () => { 32 | console.log('afterRender'); 33 | }, 34 | afterResize: (width, height) => { 35 | console.log('afterResize' + width + ' ' + height); 36 | }, 37 | afterSlideLoad: (section, origin, destination, direction) => { 38 | console.log(destination); 39 | } 40 | }; 41 | } 42 | 43 | ngOnInit() { 44 | } 45 | 46 | getRef(fullPageRef) { 47 | this.fullpageApi = fullPageRef; 48 | } 49 | 50 | } 51 | -------------------------------------------------------------------------------- /demo/angular19/app/examples/using-directive/using-directive.html: -------------------------------------------------------------------------------- 1 |
2 |

Section 1

3 |

Section 2

4 |
5 |

Slide 2.1

6 |

Slide 3.2

7 |

Slide 3.3

8 |
9 |

Section 4

10 |
-------------------------------------------------------------------------------- /demo/angular19/app/examples/using-directive/using-directive.scss: -------------------------------------------------------------------------------- 1 | .section { 2 | text-align:center; 3 | font-size: 3em; 4 | } -------------------------------------------------------------------------------- /demo/angular19/app/examples/using-directive/using-directive.ts: -------------------------------------------------------------------------------- 1 | import { AfterViewInit, Component, OnInit, ViewChild, ViewChildren } from '@angular/core'; 2 | import { FullpageDirective} from '@fullpage/angular-fullpage'; 3 | import { fullpageOptions } from 'fullpage.js/dist/fullpage.extensions.min'; 4 | 5 | 6 | @Component({ 7 | selector: 'app-using-directive', 8 | standalone: false, 9 | templateUrl: './using-directive.html', 10 | styleUrls: ['./using-directive.scss'], 11 | }) 12 | export class UsingDirectiveComponent implements OnInit, AfterViewInit { 13 | config: fullpageOptions; 14 | fullpageApi; 15 | 16 | @ViewChild(FullpageDirective) 17 | fullpageDirective: FullpageDirective; 18 | 19 | constructor() { 20 | 21 | // this is just an example => for more details on config please visit fullPage.js docs 22 | this.config = { 23 | licenseKey: 'asdf', 24 | sectionsColor: ['#7BAABE', 'whitesmoke', '#7BAABE', 'whitesmoke', '#7BAABE'], 25 | anchors: ['p1', 'p2', 'p3', 'p4', 'p5'], 26 | navigation: true, 27 | credits: { 28 | enabled: false, 29 | }, 30 | }; 31 | } 32 | 33 | ngAfterViewInit() { 34 | this.fullpageApi = this.fullpageDirective.fullpageApi; 35 | } 36 | 37 | ngOnInit() { 38 | } 39 | 40 | } 41 | -------------------------------------------------------------------------------- /demo/angular19/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /demo/angular19/environments/environment.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: false 3 | }; -------------------------------------------------------------------------------- /demo/angular19/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Fullpage 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /demo/angular19/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.error(err)); 13 | 14 | -------------------------------------------------------------------------------- /demo/angular19/styles.scss: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | @import url(~fullpage.js/dist/fullpage.min.css); 3 | 4 | // change default css 5 | .fp-controlArrow { 6 | padding: 0 1%; 7 | } 8 | -------------------------------------------------------------------------------- /demo/angular19/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "types": [] 6 | }, 7 | "angularCompilerOptions": { 8 | "enableIvy": true, 9 | "strictInjectionParameters": true, 10 | "strictTemplates": true 11 | }, 12 | "files": [ 13 | "main.ts", 14 | "polyfills.ts" 15 | ], 16 | "exclude": [ 17 | "test.ts", 18 | "**/*.spec.ts", 19 | ] 20 | } 21 | -------------------------------------------------------------------------------- /demo/angular19/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "sourceMap": true, 7 | "declaration": false, 8 | "module": "es2022", 9 | "moduleResolution": "node", 10 | "emitDecoratorMetadata": true, 11 | "experimentalDecorators": true, 12 | "target": "es2022", 13 | "typeRoots": [ 14 | "node_modules/@types" 15 | ], 16 | "lib": [ 17 | "es2022", 18 | "dom" 19 | ], 20 | "paths": { 21 | } 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /demo/angular19/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tslint.json", 3 | "rules": { 4 | "directive-selector": [ 5 | true, 6 | "attribute", 7 | "app", 8 | "camelCase" 9 | ], 10 | "component-selector": [ 11 | true, 12 | "element", 13 | "app", 14 | "kebab-case" 15 | ] 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /dist/@fullpage/angular-fullpage/esm2015/fullpage-angular-fullpage.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Generated bundle index. Do not edit. 3 | */ 4 | export * from './public_api'; 5 | //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZnVsbHBhZ2UtYW5ndWxhci1mdWxscGFnZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9hbmd1bGFyLWZ1bGxwYWdlL2Z1bGxwYWdlLWFuZ3VsYXItZnVsbHBhZ2UudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFFSCxjQUFjLGNBQWMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogR2VuZXJhdGVkIGJ1bmRsZSBpbmRleC4gRG8gbm90IGVkaXQuXG4gKi9cblxuZXhwb3J0ICogZnJvbSAnLi9wdWJsaWNfYXBpJztcbiJdfQ== -------------------------------------------------------------------------------- /dist/@fullpage/angular-fullpage/esm2015/public_api.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of angular-fullpage 3 | */ 4 | /// 5 | export { AngularFullpageModule } from './lib/angular-fullpage.module'; 6 | export { FullpageDirective, AnchorLinkDirective } from './lib/fullpage.directive'; 7 | //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljX2FwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9hbmd1bGFyLWZ1bGxwYWdlL3B1YmxpY19hcGkudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFFSCxvREFBb0Q7QUFFcEQsT0FBTyxFQUFFLHFCQUFxQixFQUFFLE1BQU0sK0JBQStCLENBQUM7QUFDdEUsT0FBTyxFQUFFLGlCQUFpQixFQUFFLG1CQUFtQixFQUFFLE1BQU0sMEJBQTBCLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyIvKlxuICogUHVibGljIEFQSSBTdXJmYWNlIG9mIGFuZ3VsYXItZnVsbHBhZ2VcbiAqL1xuXG4vLy8gPHJlZmVyZW5jZSBwYXRoPVwiLi9saWIvZnVsbHBhZ2UuaW50ZXJmYWNlLnRzXCIgLz5cblxuZXhwb3J0IHsgQW5ndWxhckZ1bGxwYWdlTW9kdWxlIH0gZnJvbSAnLi9saWIvYW5ndWxhci1mdWxscGFnZS5tb2R1bGUnO1xuZXhwb3J0IHsgRnVsbHBhZ2VEaXJlY3RpdmUsIEFuY2hvckxpbmtEaXJlY3RpdmUgfSBmcm9tICcuL2xpYi9mdWxscGFnZS5kaXJlY3RpdmUnO1xuIl19 -------------------------------------------------------------------------------- /dist/@fullpage/angular-fullpage/fullpage-angular-fullpage.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Generated bundle index. Do not edit. 3 | */ 4 | /// 5 | export * from './public_api'; 6 | -------------------------------------------------------------------------------- /dist/@fullpage/angular-fullpage/lib/angular-fullpage.module.d.ts: -------------------------------------------------------------------------------- 1 | import * as i0 from "@angular/core"; 2 | import * as i1 from "./fullpage.directive"; 3 | export declare class AngularFullpageModule { 4 | static ɵfac: i0.ɵɵFactoryDeclaration; 5 | static ɵmod: i0.ɵɵNgModuleDeclaration; 6 | static ɵinj: i0.ɵɵInjectorDeclaration; 7 | } 8 | -------------------------------------------------------------------------------- /dist/@fullpage/angular-fullpage/lib/fullpage.directive.d.ts: -------------------------------------------------------------------------------- 1 | import { AfterViewInit, OnDestroy, EventEmitter, Renderer2 } from '@angular/core'; 2 | import * as i0 from "@angular/core"; 3 | export declare class FullpageDirective implements AfterViewInit, OnDestroy { 4 | private platformId; 5 | private renderer; 6 | id: any; 7 | options: any; 8 | ref: EventEmitter; 9 | fullpageApi: any; 10 | constructor(platformId: Object, renderer: Renderer2); 11 | ngAfterViewInit(): void; 12 | initFullpage(): void; 13 | addBuildFunction(): void; 14 | destroyFullpage(): void; 15 | ngOnDestroy(): void; 16 | static ɵfac: i0.ɵɵFactoryDeclaration; 17 | static ɵdir: i0.ɵɵDirectiveDeclaration; 18 | } 19 | export declare class AnchorLinkDirective { 20 | href: string; 21 | onClick(event: any): void; 22 | static ɵfac: i0.ɵɵFactoryDeclaration; 23 | static ɵdir: i0.ɵɵDirectiveDeclaration; 24 | } 25 | -------------------------------------------------------------------------------- /dist/@fullpage/angular-fullpage/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@fullpage/angular-fullpage", 3 | "version": "0.1.7", 4 | "description": "Official Angular wrapper for fullPage.js", 5 | "author": "vh13294", 6 | "contributors": [ 7 | "vh13294", 8 | "alvarotrigo", 9 | "alidihaw" 10 | ], 11 | "homepage": "https://github.com/alvarotrigo/angular-fullpage", 12 | "repository": { 13 | "type": "git", 14 | "url": "https://github.com/alvarotrigo/angular-fullpage" 15 | }, 16 | "license": "GPL-3.0", 17 | "private": false, 18 | "peerDependencies": { 19 | "@angular/common": ">12.0.0", 20 | "@angular/core": ">12.0.0" 21 | }, 22 | "dependencies": { 23 | "fullpage.js": "4.0.35", 24 | "tslib": "^2.1.0" 25 | }, 26 | "main": "bundles/fullpage-angular-fullpage.umd.js", 27 | "module": "fesm2015/fullpage-angular-fullpage.js", 28 | "es2015": "fesm2015/fullpage-angular-fullpage.js", 29 | "esm2015": "esm2015/fullpage-angular-fullpage.js", 30 | "fesm2015": "fesm2015/fullpage-angular-fullpage.js", 31 | "typings": "fullpage-angular-fullpage.d.ts", 32 | "sideEffects": false 33 | } -------------------------------------------------------------------------------- /dist/@fullpage/angular-fullpage/public_api.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | export { AngularFullpageModule } from './lib/angular-fullpage.module'; 3 | export { FullpageDirective, AnchorLinkDirective } from './lib/fullpage.directive'; 4 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@fullpage/angular-fullpage", 3 | "version": "0.1.7", 4 | "description": "Official Angular wrapper for fullPage.js", 5 | "author": "vh13294", 6 | "contributors": [ 7 | "vh13294", 8 | "alvarotrigo", 9 | "alidihaw" 10 | ], 11 | "homepage": "https://github.com/alvarotrigo/angular-fullpage", 12 | "repository": { 13 | "type": "git", 14 | "url": "https://github.com/alvarotrigo/angular-fullpage" 15 | }, 16 | "license": "GPL-3.0", 17 | "private": false, 18 | "main": "dist/@fullpage/angular-fullpage", 19 | "files": [ 20 | "dist" 21 | ], 22 | "scripts": { 23 | "ng": "ng", 24 | "start": "ng serve", 25 | "post-build": "cpx README.md dist/@fullpage/angular-fullpage", 26 | "build": "node --openssl-legacy-provider ./node_modules/@angular/cli/bin/ng build angular-fullpage && npm run post-build", 27 | "lint": "ng lint" 28 | }, 29 | "dependencies": { 30 | "@angular-devkit/build-angular": "12.0.0", 31 | "@angular/common": "12.0.0", 32 | "@angular/core": "12.0.0", 33 | "@angular/cli": "12.0.0", 34 | "@angular/compiler": "12.0.0", 35 | "@angular/compiler-cli": "12.0.0", 36 | "fullpage.js": "4.0.35" 37 | }, 38 | "devDependencies": { 39 | "cpx": "^1.5.0", 40 | "cross-env": "^7.0.3", 41 | "ng-packagr": "^12.0.0", 42 | "ts-node": "~8.0.0", 43 | "typescript": "4.2.3" 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /src/angular-fullpage/lib/angular-fullpage.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { FullpageDirective, AnchorLinkDirective } from './fullpage.directive'; 3 | 4 | @NgModule({ 5 | imports: [], 6 | declarations: [FullpageDirective, AnchorLinkDirective], 7 | exports: [FullpageDirective, AnchorLinkDirective] 8 | }) 9 | export class AngularFullpageModule { } 10 | -------------------------------------------------------------------------------- /src/angular-fullpage/public_api.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of angular-fullpage 3 | */ 4 | 5 | /// 6 | 7 | export { AngularFullpageModule } from './lib/angular-fullpage.module'; 8 | export { FullpageDirective, AnchorLinkDirective } from './lib/fullpage.directive'; 9 | -------------------------------------------------------------------------------- /src/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../node_modules/ng-packagr/ng-package.schema.json", 3 | "allowedNonPeerDependencies": ["fullpage.js"], 4 | "dest": "../dist/@fullpage/angular-fullpage", 5 | "lib": { 6 | "entryFile": "angular-fullpage/public_api.ts" 7 | } 8 | } -------------------------------------------------------------------------------- /src/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@fullpage/angular-fullpage", 3 | "version": "0.1.5", 4 | "description": "Official Angular wrapper for fullPage.js", 5 | "author": "vh13294", 6 | "contributors": [ 7 | "vh13294", 8 | "alvarotrigo", 9 | "alidihaw" 10 | ], 11 | "homepage": "https://github.com/alvarotrigo/angular-fullpage", 12 | "repository": { 13 | "type": "git", 14 | "url": "https://github.com/alvarotrigo/angular-fullpage" 15 | }, 16 | "license": "GPL-3.0", 17 | "private": false, 18 | "peerDependencies": { 19 | "@angular/common": ">12.0.0", 20 | "@angular/core": ">12.0.0" 21 | }, 22 | "dependencies": { 23 | "fullpage.js": "4.0.35" 24 | } 25 | } -------------------------------------------------------------------------------- /src/tsconfig.lib.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "typeRoots": ["src/angular-fullpage/lib/fullpage.interface.ts"], 5 | "outDir": "../out-tsc/lib", 6 | "target": "ES2015", 7 | "module": "ES2015", 8 | "moduleResolution": "node", 9 | "declaration": true, 10 | "sourceMap": true, 11 | "inlineSources": true, 12 | "emitDecoratorMetadata": true, 13 | "experimentalDecorators": true, 14 | "importHelpers": true, 15 | "types": [], 16 | "lib": [ 17 | "dom", 18 | "ES2015" 19 | ] 20 | }, 21 | "angularCompilerOptions": { 22 | "annotateForClosureCompiler": true, 23 | "skipTemplateCodegen": true, 24 | "strictMetadataEmit": true, 25 | "fullTemplateTypeCheck": true, 26 | "strictInjectionParameters": true, 27 | "enableResourceInlining": true, 28 | "compilationMode": "partial", 29 | "enableIvy": true 30 | }, 31 | "exclude": [ 32 | "src/test.ts", 33 | "**/*.spec.ts" 34 | ] 35 | } 36 | -------------------------------------------------------------------------------- /src/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tslint.json", 3 | "rules": { 4 | "directive-selector": [ 5 | true, 6 | "attribute", 7 | "fp", 8 | "camelCase" 9 | ], 10 | "component-selector": [ 11 | true, 12 | "element", 13 | "fp", 14 | "kebab-case" 15 | ] 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "sourceMap": true, 7 | "declaration": false, 8 | "module": "ES2015", 9 | "moduleResolution": "node", 10 | "emitDecoratorMetadata": true, 11 | "experimentalDecorators": true, 12 | "target": "ES2015", 13 | "typeRoots": [ 14 | "node_modules/@types" 15 | ], 16 | "lib": [ 17 | "ES2015", 18 | "dom" 19 | ] 20 | } 21 | } --------------------------------------------------------------------------------