Merge pull request #1 from vdanyliv/develop

Develop

README.md

@@ -1,27 +1,72 @@
-# NgxTinySliderWrapper
+# ngx-tiny-slider
+Angular component that gives you possibility to use [tiny-slider](https://www.npmjs.com/package/tiny-slider) library. 
+1. Demo [page](http://ganlanyuan.github.io/tiny-slider/demo/)
+2. tiny-slider official [repo](https://github.com/ganlanyuan/tiny-slider#readme)
 
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 7.0.3.
+# How to use
 
-## Development server
+1. Import NgxTinySliderModule into your module
+2. Use in your component template <ngx-tiny-slider>
 
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+# Usage example
+Your component template
+```html
+<ngx-tiny-slider [config]="tinySliderConfig">
+    <ng-container class="items">
+      <div class="item">
+        <a target="_blank" href="google.com">
+          <img src="http://www.mattsorger.com/newsletterpics/gsw07_01.jpg">
+        </a>
+      </div>
 
-## Code scaffolding
+      <div class="item">
+        <a target="_blank" href="google.com">
+          <img src="http://www.mattsorger.com/newsletterpics/gsw07_01.jpg">
+        </a>
+      </div>
 
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+      <div class="item">
+        <a target="_blank" href="google.com">
+          <img src="http://www.mattsorger.com/newsletterpics/gsw07_01.jpg">
+        </a>
+      </div>
 
-## Build
+      <div class="item">
+        <a target="_blank" href="google.com">
+          <img src="http://www.mattsorger.com/newsletterpics/gsw07_01.jpg">
+        </a>
+      </div>
 
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
+      <div class="item">
+        <a target="_blank" href="google.com">
+          <img src="http://www.mattsorger.com/newsletterpics/gsw07_01.jpg">
+        </a>
+      </div>
+    </ng-container>
+  </ngx-tiny-slider>
+  ```
+
+Your component defenition
+
+  ```javascript
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss']
+})
+export class AppComponent implements OnInit {
+  tinySliderConfig: NgxTinySliderSettingsInterface;
 
-## Running unit tests
+  ngOnInit() {
+    this.tinySliderConfig = {
+      arrowKeys: true,
+      autoWidth: true,
+      gutter: 10,
+      centerNavigation: true,
+      customControlsStyle: true,
+      controlsText: ['<', '>'],
+    };
+  }
+}
 
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
-
-## Running end-to-end tests
-
-Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
-
-## Further help
-
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
+  ```

package.json

@@ -22,6 +22,7 @@
     "@angular/router": "~7.0.0",
     "core-js": "^2.5.4",
     "rxjs": "~6.3.3",
+    "tiny-slider": "^2.9.1",
     "zone.js": "~0.8.26"
   },
   "devDependencies": {

projects/ngx-tiny-slider/ng-package.json

@@ -1,7 +1,10 @@
 {
   "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
   "dest": "./dist/ngx-tiny-slider",
+  "whitelistedNonPeerDependencies": [
+    "tiny-slider"
+  ],
   "lib": {
     "entryFile": "src/public_api.ts"
   }
-}
+}

projects/ngx-tiny-slider/package.json

@@ -1,8 +1,12 @@
 {
   "name": "ngx-tiny-slider",
   "version": "0.0.1",
+  "dependencies": {
+    "tiny-slider": "^2.9.1"
+  },
   "peerDependencies": {
     "@angular/common": "^7.0.0",
     "@angular/core": "^7.0.0"
-  }
+  },
+  "author": "Volodymyr Danyliv"
 }

projects/ngx-tiny-slider/src/lib/interfaces/ngx-tiny-slider-settings.interface.ts

@@ -0,0 +1,6 @@
+import {TinySliderSettings} from 'tiny-slider';
+
+export interface NgxTinySliderSettingsInterface extends TinySliderSettings {
+  centerNavigation?: boolean;
+  customControlsStyle?: boolean;
+}

projects/ngx-tiny-slider/src/lib/ngx-tiny-slider.component.html

@@ -0,0 +1,5 @@
+<div class="slider-wrapper" [ngClass]="{'slider-wrapper-nav-center': config?.centerNavigation, 'slider-wrapper-custom-nav-style': config?.customControlsStyle}">
+  <div class="slide-items" #slideItems>
+    <ng-content select=".items"></ng-content>
+  </div>
+</div>

projects/ngx-tiny-slider/src/lib/ngx-tiny-slider.component.scss

@@ -1 +1,40 @@
-@import "~tiny-slider/dist/tiny-slider.css";
+@import "~tiny-slider/dist/tiny-slider.css";
+
+.slider-wrapper {
+  &-nav-center {
+    position: relative;
+    padding: 0 28px;
+
+    .tns-controls {
+      position: absolute;
+      width: 100%;
+      left: 0;
+      top: 50%;
+
+      [data-controls*='next'] {
+        right: 0;
+        position: absolute;
+      }
+
+      [data-controls*='prev'] {
+        left: 0;
+        position: absolute;
+      }
+    }
+  }
+
+  &-custom-nav-style {
+    .tns-controls {
+      button {
+        width: 25px;
+        height: 25px;
+        color: #fff;
+        background: #808080;
+        border-radius: 12px;
+        padding: 0;
+        font-size: 18px;
+        outline: none;
+      }
+    }
+  }
+}

projects/ngx-tiny-slider/src/lib/ngx-tiny-slider.component.ts

@@ -1,19 +1,32 @@
-import {Component, OnInit, ViewChild} from '@angular/core';
+import {Component, Input, OnInit, ViewChild, ViewEncapsulation} from '@angular/core';
 
 import {NgxTinySliderService} from './ngx-tiny-slider.service';
 
 @Component({
-  selector: 'lib-ngx-tiny-slider',
-  templateUrl: 'ngx-tiny-slider.component.ts',
-  styleUrls: ['ngx-tiny-slider.component.scss']
+  selector: 'ngx-tiny-slider',
+  templateUrl: 'ngx-tiny-slider.component.html',
+  styleUrls: ['ngx-tiny-slider.component.scss'],
+  encapsulation: ViewEncapsulation.None
 })
 export class NgxTinySliderComponent implements OnInit {
-  @ViewChild('ref') containerRef;
+  @Input() config;
+  @ViewChild('slideItems') slideItemsContainerRef;
+
+  defaultConfig = this.ngxTinySliderService.getDefaultConfig();
 
   constructor(private ngxTinySliderService: NgxTinySliderService) {
   }
 
   ngOnInit() {
-    this.ngxTinySliderService.initSlider(this.containerRef);
+    this.extendConfig();
+    this.initSlider();
+  }
+
+  private extendConfig() {
+    Object.keys(this.config).forEach(i => this.defaultConfig[i] = this.config[i]);
+  }
+
+  private initSlider() {
+    this.ngxTinySliderService.initSlider(this.defaultConfig, this.slideItemsContainerRef);
   }
 }

projects/ngx-tiny-slider/src/lib/ngx-tiny-slider.module.ts

@@ -1,17 +1,23 @@
 import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+
 import {NgxTinySliderComponent} from './ngx-tiny-slider.component';
+
 import {NgxTinySliderService} from './ngx-tiny-slider.service';
 
 @NgModule({
-  declarations: [
-    NgxTinySliderComponent
-  ],
-  imports: [
-    NgxTinySliderService
-  ],
-  exports: [
-    NgxTinySliderComponent
-  ]
+    imports: [
+      CommonModule
+    ],
+    declarations: [
+        NgxTinySliderComponent
+    ],
+    providers: [
+        NgxTinySliderService
+    ],
+    exports: [
+        NgxTinySliderComponent
+    ]
 })
 export class NgxTinySliderModule {
 }

projects/ngx-tiny-slider/src/lib/ngx-tiny-slider.service.ts

@@ -1,5 +1,5 @@
-import {Injectable} from '@angular/core';
-import {tns} from 'tiny-slider';
+import {ElementRef, Injectable} from '@angular/core';
+import {tns} from 'tiny-slider/src/tiny-slider';
 
 @Injectable({
   providedIn: 'root'
@@ -9,12 +9,17 @@ export class NgxTinySliderService {
   constructor() {
   }
 
-  initSlider(elementRef) {
-    return tns({
-      container: elementRef,
+  initSlider(config, elementRef: ElementRef) {
+    return tns(Object.assign({container: elementRef.nativeElement}, config));
+  }
+
+  getDefaultConfig() {
+    return {
       items: 3,
-      slideBy: 'page',
-      autoplay: true
-    });
+      nav: false,
+      mode: 'carousel',
+      controlsPosition: 'bottom',
+      speed: 400,
+    };
   }
 }

projects/ngx-tiny-slider/tslint.json

@@ -10,7 +10,6 @@
     "component-selector": [
       true,
       "element",
-      "lib",
       "kebab-case"
     ]
   }

src/app/app.component.html

@@ -1,20 +1,35 @@
-<!--The content below is only a placeholder and can be replaced.-->
-<div style="text-align:center">
-  <h1>
-    Welcome to {{ title }}!
-  </h1>
-  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
-</div>
-<h2>Here are some links to help you start: </h2>
-<ul>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
-  </li>
-</ul>
+<div class="component-wrapper">
+  <ngx-tiny-slider [config]="tinySliderConfig">
+    <ng-container class="items">
+      <div class="item">
+        <a target="_blank" href="google.com">
+          <img src="http://www.mattsorger.com/newsletterpics/gsw07_01.jpg">
+        </a>
+      </div>
+
+      <div class="item">
+        <a target="_blank" href="google.com">
+          <img src="http://www.mattsorger.com/newsletterpics/gsw07_01.jpg">
+        </a>
+      </div>
+
+      <div class="item">
+        <a target="_blank" href="google.com">
+          <img src="http://www.mattsorger.com/newsletterpics/gsw07_01.jpg">
+        </a>
+      </div>
 
+      <div class="item">
+        <a target="_blank" href="google.com">
+          <img src="http://www.mattsorger.com/newsletterpics/gsw07_01.jpg">
+        </a>
+      </div>
+
+      <div class="item">
+        <a target="_blank" href="google.com">
+          <img src="http://www.mattsorger.com/newsletterpics/gsw07_01.jpg">
+        </a>
+      </div>
+    </ng-container>
+  </ngx-tiny-slider>
+</div>

src/app/app.component.ts

@@ -1,10 +1,22 @@
-import { Component } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
+import {NgxTinySliderSettingsInterface} from '../../projects/ngx-tiny-slider/src/lib/interfaces/ngx-tiny-slider-settings.interface';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })
-export class AppComponent {
-  title = 'ngx-tiny-slider-wrapper';
+export class AppComponent implements OnInit {
+  tinySliderConfig: NgxTinySliderSettingsInterface;
+
+  ngOnInit() {
+    this.tinySliderConfig = {
+      arrowKeys: true,
+      autoWidth: true,
+      gutter: 10,
+      centerNavigation: true,
+      customControlsStyle: true,
+      controlsText: ['<', '>'],
+    };
+  }
 }