Skip to content

Commit

Permalink
Merge pull request #92 from meiblorn/develop
Browse files Browse the repository at this point in the history 
Release 2.0.2
  • Loading branch information
@vsfedorenko
vsfedorenko authored Sep 20, 2016
2 parents 80e1ea2 + 91fc41d commit 82e5d5a
Show file tree
Hide file tree
Showing 15 changed files with 272 additions and 121 deletions.
164 changes: 121 additions & 43 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,51 +20,106 @@ Check out the live demo [HERE](http://meiblorn.github.io/ng2-fullpage)

## Quick Start

###Start with SystemJS

[Plunker example](http://embed.plnkr.co/1p9zKp4CNI1HncAh1h9m)


#### With [AngularClass/angular2-webpack-starter](https://github.com/AngularClass/angular2-webpack-starter):
Install `ng2-fullpage` npm module:
```bash
npm install ng2-fullpage --save
```
Install ambient typings for `jquery` library:
```bash
npm install @types/jquery --save-dev

# or if you prefer "typings" tool
typings install jquery --save --ambient
```
Write some code (e.g. in app/app.component.ts):

**Write some code:**

_app/app.module.ts_:
```typescript

/**
*
* File: app/app.module.ts
*
*/

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";

import { AppComponent } from "./app.component";
import { MnFullpageDirective, MnFullpageService } from "ng2-fullpage";

@NgModule({
bootstrap: [ AppComponent ],
declarations: [
AppComponent,
MnFullpageDirective // add MnFullpageDirective declaration here
],
imports: [
BrowserModule,
],
providers: [
MnFullpageService // also add MnFullpageService provider here
]
})
export class AppModule {

}
```

```typescript
/**
*
* File: app/app.component.ts
*
* If you are starting from scratch replace existing content with the code below
* Otherwise update your template with 'mnFullpage' directive and section div-blocks.
* Otherwise update your html template with 'mnFullpage' directive.
*
*/

import {Component} from '@angular/core';
import {MnFullpageDirective} from 'ng2-fullpage';
import { Component } from '@angular/core';

@Component({
selector: 'app',
directives: [MnFullpageDirective],
template: `
<div mnFullpage [mnFullpageNavigation]="true" [mnFullpageKeyboardScrolling]="true">
<div class="section"> Some section 1 </div>
<div class="section"> Some section 2 </div>
<div class="section">
selector: 'app',
template: `
<div mnFullpage
[mnFullpageNavigation]="true"
[mnFullpageKeyboardScrolling]="true"
[mnFullpageControlArrows]="false">
<div class="section fp-section fp-table">
<div class="fp-tableCell">
Some section 1
</div>
</div>
<div class="section fp-section fp-table">
<div class="fp-tableCell"> Some section 2</div>
</div>
<div class="section fp-section fp-table">
<div class="fp-tableCell">
<div class="slide"> Slide 1 </div>
<div class="slide"> Slide 2 </div>
<div class="slide"> Slide 3 </div>
<div class="slide"> Slide 4 </div>
</div>
<div class="section"> Some section 4 </div>
</div>
<div class="section fp-section fp-table">
<div class="fp-tableCell"> Some section 4</div>
</div>
</div>
`
})
export class AppComponent {
// no additional config is required
// no additional config is required
}
```
Update webpack vendors entry file (src/vendor.browser.ts) with 'jquery' import:
Update webpack vendors entry file (src/vendor.browser.ts) with 'jquery' and 'fullpage.js' import:

```typescript
/**
Expand All @@ -76,6 +131,7 @@ Update webpack vendors entry file (src/vendor.browser.ts) with 'jquery' import:
*/

import 'jquery';
import 'fullpage.js'

```

Expand All @@ -91,25 +147,53 @@ npm run start
All you need to do is just add [mnFullpage] @Component.directives array
and add directive to an html element inside your template:

_app/app.module.ts_:
```typescript
/**
*
* Just add MnFullpageDirective inside your @Component.directives array
* Just add MnFullpageDirective into the @Component.declarations
* and MnFullpageService into the @Component.providers arrays
*
*/
import {Component} from '@angular/core';
import {MnFullpageDirective} from 'ng2-fullpage';

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";

import { AppComponent } from "./app.component";
import { MnFullpageDirective, MnFullpageService } from "ng2-fullpage";

@NgModule({
bootstrap: [ AppComponent ],
declarations: [
AppComponent,
MnFullpageDirective // add MnFullpageDirective declaration here
],
imports: [
BrowserModule,
],
providers: [
MnFullpageService // also add MnFullpageService provider here
]
})
export class AppModule {

}
```

_app/app.component.ts_:
```typescript
import { Component } from '@angular/core';

@Component({
selector: 'app',
directives: [MnFullpageDirective],
template: ` ... `
selector: 'my-app',
templateUrl: ./template.html
})
export class AppComponent {
// no additional config is required
// no additional config is required
}
```

_template.html_:
```html
<!-- Add fullpage directive to an element -->

Expand All @@ -125,20 +209,18 @@ There 3 ways to configure fullPage.js:

- **Via attributes**. Define options like attributes on the same element.

> Notice, options must be prefixed with 'fullpage' word and written in camelCase style.
> Notice, options must be prefixed with 'mnFullpage' word and written in camelCase style.
```typescript
import {Component, Input} from '@angular/core';
import {MnFullpageDirective, MnFullpageOptions} from 'ng2-fullpage';
import { Component } from '@angular/core';

@Component({
selector: 'app',
directives: [MnFullpageDirective],
template: `
<div mnFullpage [mnFullpageNavigation]="true" [mnFullpageKeyboardScrolling]="true">
....
</div>
`
selector: 'app',
template: `
<div mnFullpage [mnFullpageNavigation]="true" [mnFullpageKeyboardScrolling]="true">
....
</div>
`
})
export class AppComponent {
}
Expand All @@ -148,12 +230,11 @@ export class AppComponent {
> Notice to wrap directive in square brackets **[mnFullpage]** and reference it to your options object
```typescript
import {Component, Input} from '@angular/core';
import {MnFullpageDirective, MnFullpageOptions} from 'ng2-fullpage';
import { Component, Input } from '@angular/core';
import { MnFullpageOptions } from 'ng2-fullpage';

@Component({
selector: 'app',
directives: [MnFullpageDirective],
template: `
<div [mnFullpage]="options">
....
Expand All @@ -162,7 +243,7 @@ import {MnFullpageDirective, MnFullpageOptions} from 'ng2-fullpage';
})
export class AppComponent {

@Input() public options:MnFullpageOptions = new MnFullpageOptions({
@Input() public options: MnFullpageOptions = new MnFullpageOptions({
navigation: true,
keyboardScrolling: true
});
Expand All @@ -171,15 +252,14 @@ export class AppComponent {
```
- **Mixed**. Mix two approaches to configure.

> Notice, Element options have more priority than options inside options object.
> Notice, html element options have less priority than options inside options object.
```typescript
import {Component, Input} from '@angular/core';
import {MnFullpageDirective, MnFullpageOptions} from 'ng2-fullpage';
import { Component, Input } from '@angular/core';
import { MnFullpageOptions } from 'ng2-fullpage';

@Component({
selector: 'app',
directives: [MnFullpageDirective],
template: `
<div [mnFullpage]="options" [mnFullpageNavigation]="true">
....
Expand All @@ -200,13 +280,11 @@ export class AppComponent {
Service `MnFullpageService` contains `$.fn.*` static methods for `fullPage.js` library.

```typescript
import {Component, Input} from '@angular/core';
import {MnFullpageDirective, MnFullpageService} from 'ng2-fullpage';
import { Component, Input } from '@angular/core';
import { MnFullpageService } from 'ng2-fullpage';

@Component({
selector: 'app',
providers: [provide(MnFullpageService, {useClass: MnFullpageService}],
directives: [MnFullpageDirective],
template: `
<button (click)="fullpageService.moveSectionUp();">Move section up</button>
<button (click)="fullpageService.moveSectionDown();">Move section down</button>
Expand Down
34 changes: 26 additions & 8 deletions demo/app/app.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,11 +37,25 @@ <h1>Easy to install !</h1>
</div>
<div class="section usage-section fp-section fp-table">
<div class="fp-tableCell">
<h1>Easy to use !</h1>
<div class="code-block">
<pre>
<code class="html">{{templates.usage}}</code>
</pre>
<div class="slide">
<h1>Easy to use !</h1>
<h4>Use keyboard arrows or navigation below to slide right</h4>
</div>
<div class="slide">
<h1>Declare it in your module</h1>
<div class="code-block">
<pre>
<code class="javascript">{{templates.usage.slides.module}}</code>
</pre>
</div>
</div>
<div class="slide">
<h1>Now use it in your html template</h1>
<div class="code-block">
<pre>
<code class="html">{{templates.usage.slides.html}}</code>
</pre>
</div>
</div>
</div>
</div>
Expand All @@ -55,23 +69,23 @@ <h4>Use keyboard arrows or navigation below to slide right</h4>
<h1>Configure it via attributes</h1>
<div class="code-block">
<pre>
<code class="html">{{templates.slides.attributes}}</code>
<code class="html">{{templates.configuration.slides.attributes}}</code>
</pre>
</div>
</div>
<div class="slide">
<h1>Use configuration object instead</h1>
<div class="code-block">
<pre>
<code class="javascript">{{templates.slides.classOptions}}</code>
<code class="javascript">{{templates.configuration.slides.classOptions}}</code>
</pre>
</div>
</div>
<div class="slide">
<h1>Or MIX IT !</h1>
<div class="code-block">
<pre>
<code class="javascript">{{templates.slides.mix}}</code>
<code class="javascript">{{templates.configuration.slides.mix}}</code>
</pre>
</div>
</div>
Expand All @@ -85,6 +99,10 @@ <h1>Get full control on the page !</h1>
<code class="html">{{templates.service}}</code>
</pre>
</div>
<div>
<button (click)="fullpageService.moveSectionUp();">Move section up</button>
<button (click)="fullpageService.moveSectionDown();">Move section down</button>
</div>
</div>
</div>
<div class="section start-use-it-now-section fp-section fp-table">
Expand Down
20 changes: 19 additions & 1 deletion demo/app/app.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ h1, h2, h3, h4, h5, h6 {
}

h1 {
font-size: 4em;
font-size: 3em;
}

h4 {
Expand Down Expand Up @@ -130,6 +130,24 @@ h4 {
display: inline-block;
}

.code-block code {
font-size: 1em !important;
}

button {
display: inline-block;
margin: 10px;
color: $menu-color;
background: $menu-color-active;
background: $menu-color-background;
-webkit-border-radius: 5px;
border-radius: 5px;
text-align: center;
padding: 7px 50px;
border-color: white;
background: rgba(255, 255, 255, 0.1);
}

.welcome-section {
background: linear-gradient($welcome-section-degree, $welcome-section-first-color, $welcome-section-second-color);
}
Expand Down
Loading

0 comments on commit 82e5d5a

Please sign in to comment.