docs: migrate demo pages

angular.json

@@ -27,7 +27,8 @@
               "src/assets"
             ],
             "styles": [
-              "src/styles.scss"
+              "src/styles.scss",
+              "node_modules/bootstrap/dist/css/bootstrap.css"
             ],
             "scripts": []
           },

package.json

@@ -15,6 +15,7 @@
     "e2e": "ng e2e",
     "validate-release": "npm run lint && npm run test:app:ci && npm run test:lib:ci",
     "prepare-release": "npm run build:lib && cp README.md dist/ngx-sortablejs && cp LICENSE.md dist/ngx-sortablejs && npm run build:app && cp dist/ngx-sortablejs-app/index.html dist/ngx-sortablejs-app/404.html",
+    "pages:update": "git subtree split --branch gh-pages --prefix dist/ngx-sortablejs-app/",
     "release": "npm run validate-release && npm run prepare-release && semantic-release -d",
     "release:apply": "npm run validate-release && npm run prepare-release && semantic-release --ci false"
   },
@@ -28,6 +29,8 @@
     "@angular/platform-browser": "~8.0.0",
     "@angular/platform-browser-dynamic": "~8.0.0",
     "@angular/router": "~8.0.0",
+    "bootstrap": "^4.1.3",
+    "ngx-bootstrap": "^4.3.0",
     "rxjs": "~6.4.0",
     "sortablejs": "^1.9.0",
     "tslib": "^1.9.0",

src/app/app.component.css

@@ -0,0 +1 @@
+

src/app/app.component.html

@@ -1,20 +1,49 @@
-<!--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://angular.io/cli">CLI Documentation</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
-  </li>
-</ul>
+<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
+  <a class="navbar-brand" href="https://github.com/sortablejs/ngx-sortablejs" target="_blank">
+    <img width="30" height="30"
+      src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
+    +
+    <img src="assets/sortable-logo.png" width="30" height="30">
+
+    = ngx-sortablejs
+  </a>
+  <button class="navbar-toggler" type="button" (click)="navbarCollapsed = !navbarCollapsed">
+    <span class="navbar-toggler-icon"></span>
+  </button>
+
+  <div class="navbar-collapse" [class.collapse]="navbarCollapsed">
+    <ul class="navbar-nav mr-auto">
+      <li class="nav-item" routerLinkActive="active">
+        <a class="nav-link" routerLink="sortable-array">Simple sortable</a>
+      </li>
+      <li class="nav-item" routerLinkActive="active">
+        <a class="nav-link" routerLink="sortable-form-array">FormArray</a>
+      </li>
+      <li class="nav-item" routerLinkActive="active">
+        <a class="nav-link" routerLink="custom-options">Custom options</a>
+      </li>
+      <li class="nav-item" routerLinkActive="active">
+        <a class="nav-link" routerLink="multiple-lists">Multiple lists</a>
+      </li>
 
+      <li class="nav-item dropdown" dropdown *ngIf="showTestCases">
+        <a class="nav-link dropdown-toggle" dropdownToggle>Test cases</a>
+        <div *dropdownMenu class="dropdown-menu">
+          <a class="dropdown-item" routerLinkActive="active" routerLink="tests/cross-components-multiple-list">
+            Cross-component multiple lists
+          </a>
+        </div>
+      </li>
+    </ul>
+
+    <ul class="navbar-nav ml-auto">
+      <li class="nav-item">
+        <a class="nav-link" href="https://github.com/smnbbrv/ngx-sortablejs-demo" target="_blank">Github</a>
+      </li>
+    </ul>
+  </div>
+</nav>
+
+<div class="container-fluid my-4" style="padding-top: 58px">
+  <router-outlet></router-outlet>
+</div>

src/app/app.component.spec.ts

@@ -1,6 +1,5 @@
 import { async, TestBed } from '@angular/core/testing';
 import { AppComponent } from './app.component';
-
 describe('AppComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
@@ -9,23 +8,20 @@ describe('AppComponent', () => {
       ],
     }).compileComponents();
   }));
-
-  it('should create the app', () => {
+  it('should create the app', async(() => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.debugElement.componentInstance;
     expect(app).toBeTruthy();
-  });
-
-  it(`should have as title 'ngx-sortablejs-app'`, () => {
+  }));
+  it(`should have as title 'app'`, async(() => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.debugElement.componentInstance;
-    expect(app.title).toEqual('ngx-sortablejs-app');
-  });
-
-  it('should render title in a h1 tag', () => {
+    expect(app.title).toEqual('app');
+  }));
+  it('should render title in a h1 tag', async(() => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
     const compiled = fixture.debugElement.nativeElement;
-    expect(compiled.querySelector('h1').textContent).toContain('Welcome to ngx-sortablejs-app!');
-  });
+    expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!');
+  }));
 });

src/app/app.component.ts

@@ -3,8 +3,14 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss'],
+  styleUrls: ['./app.component.css'],
 })
 export class AppComponent {
-  title = 'ngx-sortablejs-app';
+
+  navbarCollapsed = true;
+
+  get showTestCases() {
+    return localStorage.getItem('showTestCases') === 'true';
+  }
+
 }

src/app/app.module.ts

@@ -1,16 +1,58 @@
-import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
-
+import { BrowserModule } from '@angular/platform-browser';
+import { RouterModule } from '@angular/router';
+import { BsDropdownModule } from 'ngx-bootstrap';
+import { SortablejsModule } from 'ngx-sortablejs';
 import { AppComponent } from './app.component';
+import { ExamplesModule } from './examples/examples.module';
+import { MultipleListsComponent } from './examples/multiple-lists/multiple-lists.component';
+import { SimpleSortableComponent } from './examples/simple-sortable/simple-sortable.component';
+import { SortableFormArrayComponent } from './examples/sortable-form-array/sortable-form-array.component';
+import { SortableWithOptionsComponent } from './examples/sortable-with-options/sortable-with-options.component';
+import { CrossComponentsMultipleListsComponent } from './test-cases/cross-components-multiple-lists/cross-components-multiple-lists.component';
+import { TestCasesModule } from './test-cases/test-cases.module';
 
 @NgModule({
   declarations: [
     AppComponent,
   ],
   imports: [
     BrowserModule,
+    RouterModule.forRoot([
+      { path: '', pathMatch: 'full', redirectTo: 'sortable-array' },
+      {
+        path: 'sortable-array',
+        component: SimpleSortableComponent,
+      },
+      {
+        path: 'sortable-form-array',
+        component: SortableFormArrayComponent,
+      },
+      {
+        path: 'custom-options',
+        component: SortableWithOptionsComponent,
+      },
+      {
+        path: 'multiple-lists',
+        component: MultipleListsComponent,
+      },
+
+      {
+        path: 'tests/cross-components-multiple-list',
+        component: CrossComponentsMultipleListsComponent,
+      },
+    ]),
+
+    // global settings
+    SortablejsModule.forRoot({
+      animation: 200,
+    }),
+
+    BsDropdownModule.forRoot(),
+
+    ExamplesModule,
+    TestCasesModule,
   ],
-  providers: [],
   bootstrap: [AppComponent],
 })
 export class AppModule { }

src/app/examples/examples.module.ts

@@ -0,0 +1,23 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
+import { SortablejsModule } from 'ngx-sortablejs';
+import { MultipleListsComponent } from './multiple-lists/multiple-lists.component';
+import { SimpleSortableComponent } from './simple-sortable/simple-sortable.component';
+import { SortableFormArrayComponent } from './sortable-form-array/sortable-form-array.component';
+import { SortableWithOptionsComponent } from './sortable-with-options/sortable-with-options.component';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    SortablejsModule,
+    ReactiveFormsModule,
+  ],
+  declarations: [
+    SimpleSortableComponent,
+    SortableWithOptionsComponent,
+    SortableFormArrayComponent,
+    MultipleListsComponent,
+  ],
+})
+export class ExamplesModule { }

src/app/examples/multiple-lists/multiple-lists.component.css

@@ -0,0 +1,5 @@
+.sortable {
+  background: #eee;
+  border-radius: 0.25rem;
+  min-height: 40px;
+}

src/app/examples/multiple-lists/multiple-lists.component.html

@@ -0,0 +1,127 @@
+<h1>Connecting multiple sortable lists</h1>
+
+<p class="lead">
+  <strong>
+    <a href="https://github.com/smnbbrv/ngx-sortablejs-demo/tree/master/src/app/examples/multiple-lists"
+      target="_blank">The source code</a>
+  </strong>
+</p>
+
+This shows how the <em>sortable</em> lists can be connected together. Pay attention to the <em>sortable</em> CSS class
+(gives a <em>min-height</em>) that does not allow lists to become invisible when all items are gone
+
+<h2 class="mt-4 mb-3">Transfer between lists</h2>
+
+<p>
+  These lists are connected together. You can drag / drop elements across the lists.
+</p>
+
+<div class="row">
+  <div class="col-sm-3">
+    <ul class="list-group sortable" [sortablejs]="normalList1" [sortablejsOptions]="normalOptions">
+      <li class="list-group-item" *ngFor="let item of normalList1">Element {{ item }}</li>
+    </ul>
+  </div>
+
+  <div class="col-sm-3">
+    <ul class="list-group sortable" [sortablejs]="normalList2" [sortablejsOptions]="normalOptions">
+      <li class="list-group-item" *ngFor="let item of normalList2">Element {{ item }}</li>
+    </ul>
+  </div>
+</div>
+
+<p class="my-3">and the actual state is</p>
+
+<div class="row">
+  <div class="col-sm-3">
+    <div class="alert alert-dark">> {{ normalList1 | json }}</div>
+  </div>
+  <div class="col-sm-3">
+    <div class="alert alert-dark">> {{ normalList2 | json }}</div>
+  </div>
+</div>
+
+<h2 class="mt-4 mb-3">Clone items</h2>
+
+<p>The list 1 is a clone factory and list 2 can be its target.</p>
+
+<div class="row">
+  <div class="col-sm-3">
+    <ul class="list-group sortable" [sortablejs]="cloneList1" [sortablejsOptions]="clone1Options">
+      <li class="list-group-item" *ngFor="let item of cloneList1">Element {{ item }}</li>
+    </ul>
+  </div>
+
+  <div class="col-sm-3">
+    <ul class="list-group sortable" [sortablejs]="cloneList2" [sortablejsOptions]="clone2Options">
+      <li class="list-group-item" *ngFor="let item of cloneList2">Element {{ item }}</li>
+    </ul>
+  </div>
+</div>
+
+<p class="my-3">and the actual state is</p>
+
+<div class="row">
+  <div class="col-sm-3">
+    <div class="alert alert-dark">> {{ cloneList1 | json }}</div>
+  </div>
+  <div class="col-sm-3">
+    <div class="alert alert-dark">> {{ cloneList2 | json }}</div>
+  </div>
+</div>
+
+
+<h2 class="mt-4 mb-3">Super complicated example</h2>
+
+<p>
+  These lists are connected together.
+  You can drag / drop elements across the lists. Pay attention to the <em>sortable</em> CSS class
+  (gives a <em>min-height</em>) that does not allow list to become invisible when all items are gone
+</p>
+
+<div class="row">
+  <div class="col-sm-3">
+    <strong>1. This list cannot accept items</strong>
+    <ul class="mt-2 list-group sortable" [sortablejs]="list1" [sortablejsOptions]="list1Options">
+      <li class="list-group-item" *ngFor="let item of list1">Element {{ item }}</li>
+    </ul>
+  </div>
+
+  <div class="col-sm-3">
+    <strong>2. This is a <em>normal</em> list</strong>
+    <ul class="mt-2 list-group sortable" [sortablejs]="list2" [sortablejsOptions]="list2Options">
+      <li class="list-group-item" *ngFor="let item of list2">Element {{ item }}</li>
+    </ul>
+  </div>
+
+  <div class="col-sm-3">
+    <strong>3. This list clones its children</strong>
+    <ul class="mt-2 list-group sortable" [sortablejs]="list3" [sortablejsOptions]="list3Options">
+      <li class="list-group-item" *ngFor="let item of list3">Element {{ item }}</li>
+    </ul>
+  </div>
+
+  <div class="col-sm-3">
+    <strong>4. Only #1 can put here</strong>
+    <ul class="mt-2 list-group sortable" [sortablejs]="list4" [sortablejsOptions]="list4Options">
+      <li class="list-group-item" *ngFor="let item of list4">Element {{ item }}</li>
+    </ul>
+  </div>
+</div>
+
+<p class="my-3">and the actual state is</p>
+
+<div class="row">
+  <div class="col-sm-3">
+    <div class="alert alert-dark">> {{ list1 | json }}</div>
+  </div>
+  <div class="col-sm-3">
+    <div class="alert alert-dark">> {{ list2 | json }}</div>
+  </div>
+  <div class="col-sm-3">
+    <div class="alert alert-dark">> {{ list3 | json }}</div>
+  </div>
+  <div class="col-sm-3">
+    <div class="alert alert-dark">> {{ list4 | json }}</div>
+  </div>
+</div>