add config input and refactor demos page

tb · Apr 24, 2016 · a04308d · a04308d
1 parent 6beab97
commit a04308d
Show file tree

Hide file tree

Showing 9 changed files with 103 additions and 36 deletions.
diff --git a/README.md b/README.md
@@ -2,7 +2,7 @@
 
 Angular2 nouislider directive
 
-See [demo](http://tb.github.io/ng2-nouislider/)
+See [demos](http://tb.github.io/ng2-nouislider/)
 
 ## Install
 

diff --git a/demo/app.html b/demo/app.html
@@ -1,5 +1,5 @@
 <div class="page-header">
-	<h3>Example 1</h3>
+	<h3>Single value</h3>
 </div>
 
 <pre>&lt;div nouislider [min]=&quot;0&quot; [max]=&quot;10&quot; [step]=&quot;0.05&quot; [(ngModel)]=&quot;someValue&quot;&gt;&lt;/div&gt;</pre>
@@ -14,7 +14,7 @@ <h3>Example 1</h3>
 </div>
 
 <div class="page-header">
-	<h3>Example 2</h3>
+	<h3>Range</h3>
 </div>
 
 <pre>&lt;div nouislider [connect]=&quot;true&quot; [min]=&quot;0&quot; [max]=&quot;15&quot; [step]=&quot;1&quot; [(ngModel)]=&quot;someRange&quot;&gt;&lt;/div&gt;</pre>
@@ -31,4 +31,29 @@ <h3>Example 2</h3>
 <div class="btn-group">
 	<button type="button" class="btn btn-primary" (click)="changeSomeRange(1,-1)">-</button>
 	<button type="button" class="btn btn-primary" (click)="changeSomeRange(1,1)">+</button>
-</div>
+</div>
+
+<div class="page-header">
+	<h3>Range with config</h3>
+</div>
+
+<pre>someRange2config: any = {
+  behaviour: 'drag',
+  connect: true,
+  margin: 1,
+  limit: 5, // NOTE: overwritten by [limit]="10"
+  range: {
+    min: 0,
+    max: 20
+  },
+  pips: {
+    mode: 'steps',
+    density: 5
+  }
+};</pre>
+
+<pre>&lt;div nouislider [config]=&quot;someRange2config&quot; [limit]=&quot;10&quot; [(ngModel)]=&quot;someRange2&quot;&gt;&lt;/div&gt;</pre>
+
+<code>someRange2: {{ someRange2 | json }}</code>
+
+<div nouislider [config]="someRange2config" [limit]="10" [(ngModel)]="someRange2"></div>
diff --git a/demo/app.ts b/demo/app.ts
@@ -11,6 +11,21 @@ import {Nouislider} from 'ng2nouislider';
 export class App {
   public someValue: any = 5;
   public someRange: any = [3,7];
+  public someRange2: any = [10,15];
+  public someRange2config: any = {
+    behaviour: 'drag',
+    connect: true,
+    margin: 1,
+    limit: 5,
+    range: {
+      min: 0,
+      max: 20
+    },
+    pips: {
+      mode: 'steps',
+      density: 5
+    }
+  };
 
   changeSomeValue(value: number) {
     this.someValue = this.someValue + value;

diff --git a/index.html b/index.html
@@ -22,8 +22,8 @@
 <body>
 	<div class="jumbotron">
 		<div class="container">
-			<h1>ng2-nouislider</h1>
-			<p>Angular2 nouislider directive</p>
+			<h2>ng2-nouislider demos</h2>
+			<a href="https://github.com/tb/ng2-nouislider" class="btn btn-default">Back to GitHub</a>
 		</div>
 	</div>
 	<div class="container">

diff --git a/nouislider.d.ts b/nouislider.d.ts
@@ -1,4 +1,4 @@
-import { OnInit, ElementRef, EventEmitter } from 'angular2/core';
+import { ElementRef, EventEmitter, OnInit } from 'angular2/core';
 import { ControlValueAccessor } from 'angular2/common';
 export declare function toValue(value: string[]): number | number[];
 export declare class Nouislider implements ControlValueAccessor, OnInit {
@@ -7,10 +7,13 @@ export declare class Nouislider implements ControlValueAccessor, OnInit {
     value: any;
     onChange: any;
     onTouched: any;
+    behaviour: string;
     connect: boolean;
+    limit: number;
     min: number;
     max: number;
     step: number;
+    config: any;
     ngModelChange: EventEmitter<any>;
     constructor(el: ElementRef);
     ngOnInit(): void;

diff --git a/nouislider.js b/nouislider.js
diff --git a/nouislider.js.map b/nouislider.js.map
diff --git a/nouislider.ts b/nouislider.ts
@@ -1,5 +1,14 @@
 import * as noUiSlider from 'nouislider';
-import {Directive, OnInit, ElementRef, forwardRef, Provider, Input, Output, EventEmitter} from 'angular2/core';
+import {
+  Directive,
+  ElementRef,
+  EventEmitter,
+  forwardRef,
+  Input,
+  OnInit,
+  Output,
+  Provider
+} from 'angular2/core';
 import {ControlValueAccessor} from 'angular2/common';
 
 import {NG_VALUE_ACCESSOR} from 'angular2/src/common/forms/directives/control_value_accessor';
@@ -31,26 +40,33 @@ export class Nouislider implements ControlValueAccessor, OnInit {
   public onChange: any = Function.prototype;
   public onTouched: any = Function.prototype;
 
-  @Input() connect: boolean = false;
-  @Input() min: number = 0;
-  @Input() max: number = 10;
-  @Input() step: number = 1;
+  @Input() behaviour: string;
+  @Input() connect: boolean;
+  @Input() limit: number;
+  @Input() min: number;
+  @Input() max: number;
+  @Input() step: number;
+  @Input() config: any = {};
   @Output() ngModelChange: EventEmitter<any> = new EventEmitter();
 
   public constructor(el:ElementRef) {
     this.el = el;
   }
 
   ngOnInit(): void {
-    this.slider = noUiSlider.create(this.el.nativeElement, {
-      start: this.value || 0,
-      step: this.step,
+    let inputsConfig = JSON.parse(JSON.stringify({
+      behaviour: this.behaviour,
       connect: this.connect,
-      range: {
-        min: this.min,
-        max: this.max
-      }
-    });
+      limit: this.limit,
+      start: this.value,
+      step: this.step,
+      range: this.config.range || {min: this.min, max: this.max}
+    }));
+
+    this.slider = noUiSlider.create(
+      this.el.nativeElement,
+      Object.assign(this.config, inputsConfig)
+    );
 
     this.slider.on('set', (value) => {
       this.writeValue(toValue(value));

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ng2-nouislider",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "Angular2 noUiSlider directive",
   "main": "nouislider.js",
   "typings": "nouislider.d.ts",