Version 2.0 (#145)

* refactor: add dragscroll item and refactor code

* fix: unit tests

* feat: fix unit test and update readme

* docs: update readme

* fix: fix ngc

* refactor: move template to inline

* feat: use inline-block for items

* fix: add sanity check to moveTo

* refactor: refactor build remove js files

* build: update .gitignore and .npmignore

* refactor: resolve issue mention in #146

.gitignore

@@ -3,6 +3,7 @@
 # compiled output
 /dist
 /tmp
+/lib
 
 # dependencies
 /node_modules
@@ -38,10 +39,3 @@ testem.log
 #System Files
 .DS_Store
 Thumbs.db
-
-*.map
-*.metadata.json
-*.d.ts
-index.js
-ngx-drag-scroll.js
-drag-scroll-option.js

.npmignore

@@ -17,6 +17,11 @@ tslint.json
 
 demo
 dist
+src
+commitlint.config.js
+CONTRIBUTING.md
+RELEASE.md
+angular.json
 config
 angular-cli.json
 LICENSE

CHANGELOG.md

@@ -1,3 +1,8 @@
+#### 2.0.0-bate.1
+- Refactor host directive to a componet.
+- Add drag scroll item directive to mark children elements.
+- Refactor code to Angular Style.
+
 #### 1.8.2
 Issue #54 - fix: prevent click propagation immediately after drag and drop
 

README.md

@@ -55,15 +55,46 @@ Add the `drag-scroll` attribute to a scrollable element:
 @Component({
   selector: 'sample',
   template:`
-  <div dragScroll>
+  <drag-scroll style="width: 100px; height: 10px">
     Big text goes here...
-  </div>
-  `
+  </drag-scroll>
+  `,
+  styles: [`
+    drag-scroll {
+      height: 50px
+      width: 100px
+    }
+    `]
 })
-class Sample {}
+class SampleBigText {}
 ```
 That's it! Now you can scroll it by dragging.
 
+If you want to group items into a carousel, you will need to add `drag-scroll-item` to the carsousel items.
+```typescript
+@Component({
+  selector: 'sample',
+  template:`
+  <drag-scroll>
+    <img drag-scroll-item src="some-url" />
+    <img drag-scroll-item src="some-url" />
+    <img drag-scroll-item src="some-url" />
+  </drag-scroll>
+  `,
+  styles: [`
+    drag-scroll {
+      height: 50px
+      width: 100px
+    }
+    img {
+      height: 50px
+      width: 50px
+    }
+    `]
+})
+class SampleCarousel {}
+```
+
 
 ## API REFERENCE
 
@@ -87,15 +118,17 @@ ___
 @Component({
   selector: 'sample',
   template:`
-  <div dragScroll #nav>
-    Big text goes here...
-  </div>
+  <drag-scroll #nav>
+    <img drag-scroll-item src="some-url" />
+    <img drag-scroll-item src="some-url" />
+    <img drag-scroll-item src="some-url" />
+  </drag-scroll>
   <button (click)="moveLeft()">Left</button>
   <button (click)="moveRight()">Right</button>
   `
 })
 class Sample {
-  @ViewChild('nav', {read: DragScrollDirective}) ds: DragScrollDirective;
+  @ViewChild('nav', {read: DragScrollComponent}) ds: DragScrollComponent;
 
   moveLeft() {
     this.ds.moveLeft();
@@ -107,34 +140,6 @@ class Sample {
 }
 ```
 
-## Dynamically apply the plugin to a DOM element
-
-This was brought by @tommykamkcm. The below code block demonstrates how to attach the directive dynamically on a DOM i.e. deep rendered element.
-```javascript
-
-constructor(
-  private cdr: ChangeDetectorRef,
-  private element: ElementRef,
-  private renderer: Renderer
-) {}
-dragScrollDom: any;
-dragScrollRef: ElementRef;
-dragScroll: DragScrollDirective;
-
-ngAfterViewInit() {
-  // attach to .nav-tabs element
-  this.dragScrollDom = this.element.nativeElement.querySelector('.nav-tabs');
-  this.dragScrollRef = new ElementRef(this.dragScrollDom );
-
-  this.dragScroll = new DragScrollDirective(this.dragScrollRef, this.renderer, this.cdr);
-  this.dragScroll.attach({
-    disabled: false,
-    scrollbarHidden: true,
-    yDisabled: true,
-    xDisabled: false,
-  });
-}
-```
 
 ### Contributing
 Clone the repository, and run `npm install`, `npm start`. The demo app will starts on port :4200. I usually do my development on the demo app.

demo/app/app.module.ts

@@ -12,7 +12,7 @@ import {
 
 import { AppComponent } from './app.component';
 import { HeaderComponent } from './header/header.component';
-import { DragScrollModule } from '../../src/ngx-drag-scroll';
+import { DragScrollModule } from '../../src';
 import { NotFoundComponent } from './not-found/not-found.component';
 import { AppRoutingModule } from './app-routing.module';
 import { HomeComponent } from './home/home.component';

demo/app/home/home.component.html

@@ -1,16 +1,15 @@
 <div class="content">
   <p class="title">DRAG AND SCROLL!</p>
   <div class="demo-border">
-    <div class="demo-one"
-      dragScroll
+    <drag-scroll class="demo-one"
       drag-scroll-y-disabled="true"
       scrollbar-hidden="true"
       (reachesLeftBound)="leftBoundStat($event)"
       (reachesRightBound)="rightBoundStat($event)"
       #nav
       >
-      <img *ngFor="let image of imagelist" [src]="'assets/img/' + image" (click)="clickItem(image)"/>
-    </div>
+      <img drag-scroll-item *ngFor="let image of imagelist" [src]="'assets/img/' + image" (click)="clickItem(image)"/>
+    </drag-scroll>
   </div>
   <div fxLayout="row" fxLayoutGap="5px" fxLayoutAlign="center center">
     <button mat-raised-button color="primary" [disabled]="leftNavDisabled" (click)="moveLeft()">left</button>
@@ -26,14 +25,14 @@
     <mat-slide-toggle (change)="toggleYDisable()">Disable vertical drag/scroll</mat-slide-toggle>
   </div>
   <div class="demo-border">
-    <div class="demo-two"
-        dragScroll [scrollbar-hidden]="hideScrollbar"
+    <drag-scroll class="demo-two"
+        [scrollbar-hidden]="hideScrollbar"
         [drag-scroll-disabled]="disabled"
         [drag-scroll-x-disabled]="xDisabled"
         [drag-scroll-y-disabled]="yDisabled"
       >
-      <img src='assets/img/star-wars-big.jpg' />
-    </div>
+      <img drag-scroll-item src='assets/img/star-wars-big.jpg' />
+    </drag-scroll>
   </div>
   <div class="api-table-containter">
     <p class="title">API REFERENCE</p>

demo/app/home/home.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit, ElementRef, Renderer2, ViewChild } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { MatIconRegistry } from '@angular/material';
-import { DragScrollDirective } from '../../../src/ngx-drag-scroll';
+import { DragScrollComponent } from '../../../src/ngx-drag-scroll';
 
 @Component({
   selector: 'app-home',
@@ -31,11 +31,7 @@ export class HomeComponent implements OnInit {
   leftNavDisabled = false;
   rightNavDisabled = false;
 
-  dragScrollDom: any;
-  dragScrollRef: ElementRef;
-  dragScroll: DragScrollDirective;
-
-  @ViewChild('nav', {read: DragScrollDirective}) ds: DragScrollDirective;
+  @ViewChild('nav', {read: DragScrollComponent}) ds: DragScrollComponent;
 
   constructor(
     matIconRegistry: MatIconRegistry,
@@ -54,7 +50,7 @@ export class HomeComponent implements OnInit {
   }
 
   clickItem(item) {
-    console.log('itmen clicked');
+    console.log('itme clicked');
   }
 
   remove() {