diff --git a/.gitignore b/.gitignore index 3212634f..2b77c3ca 100644 --- a/.gitignore +++ b/.gitignore @@ -2,6 +2,7 @@ # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git /node_modules npm-debug.log +package-lock.json # WebStorm .idea diff --git a/demo/src/app/app.component.ts b/demo/src/app/app.component.ts index 6fd6eca0..bbb97944 100755 --- a/demo/src/app/app.component.ts +++ b/demo/src/app/app.component.ts @@ -19,6 +19,8 @@ import { Component, ViewEncapsulation } from '@angular/core'; + + diff --git a/demo/src/app/app.module.ts b/demo/src/app/app.module.ts index 8ece56fb..709d13a3 100644 --- a/demo/src/app/app.module.ts +++ b/demo/src/app/app.module.ts @@ -5,10 +5,12 @@ import { CommonModule } from '@angular/common'; import { DragulaModule } from 'ng2-dragula'; import { EXAMPLES } from './examples'; +import { CallbackparamsPipe } from './callback.pipe'; import { DemoComponent } from './app.component'; @NgModule({ declarations: [ + CallbackparamsPipe, DemoComponent, ...EXAMPLES ], diff --git a/demo/src/app/callback.pipe.ts b/demo/src/app/callback.pipe.ts new file mode 100644 index 00000000..e11cd8da --- /dev/null +++ b/demo/src/app/callback.pipe.ts @@ -0,0 +1,15 @@ +import { PipeTransform, Pipe } from '@angular/core'; + +@Pipe({ + name: 'callbackparams', + pure: false +}) +export class CallbackparamsPipe implements PipeTransform { + public transform(items: any[], callback: (item: any, params: any) => boolean, params: any): any { + if (!items || !callback) { + return items; + } + const _params = params || {}; + return items.filter((item: any) => callback(item, _params)); + } +} diff --git a/demo/src/app/examples.ts b/demo/src/app/examples.ts index 6f813159..c4b67d13 100644 --- a/demo/src/app/examples.ts +++ b/demo/src/app/examples.ts @@ -177,6 +177,49 @@ export class RepeatExampleComponent { } } +@Component({ + selector: 'filter-example', + templateUrl: './templates/filter-example.html' +}) +export class FilterExampleComponent { + public searchMany: string; + public searchMany2: string; + public many:Array = ['The', 'possibilities', 'are', 'endless!', 'Try', 'filtering!']; + public many2:Array = ['Explore', 'them']; + + public constructor(private dragulaService:DragulaService) { + dragulaService.dropModel.subscribe((value:any) => { + this.onDropModel(value.slice(1)); + }); + dragulaService.removeModel.subscribe((value:any) => { + this.onRemoveModel(value.slice(1)); + }); + } + + public filterMany(item: string, searchValue: string) { + if (searchValue && (searchValue.length >= 0)) { + return (item.indexOf(searchValue) !== -1); + } else { + return true; + } + } + + private onDropModel(args:any):void { + let [el, target, source] = args; + console.log('onDropModel:'); + console.log(el); + console.log(target); + console.log(source); + } + + private onRemoveModel(args:any):void { + let [el, source] = args; + console.log('onRemoveModel:'); + console.log(el); + console.log(source); + } +} + @Component({ selector: 'nested-repeat-example', templateUrl: './templates/nested-repeat-example.html' @@ -203,5 +246,6 @@ export const EXAMPLES:any[] = [ MuchExampleComponent, WowExampleComponent, RepeatExampleComponent, + FilterExampleComponent, NestedRepeatExampleComponent ]; diff --git a/demo/src/app/templates/filter-example.html b/demo/src/app/templates/filter-example.html new file mode 100644 index 00000000..6f1a8a2c --- /dev/null +++ b/demo/src/app/templates/filter-example.html @@ -0,0 +1,80 @@ +
+ +
+
+ +
+
+
+
+
+ +
+
+
+
+
+
+
+ 
{{many | json}}
+
+
+ 
{{many2 | json}}
+
+
+ 
+    
+<div class='wrapper'>
+  <div class='container'>
+    <input type='text' [(ngModel)]='searchMany' placeholder='Search many'>
+    <div class='container' [dragula]='"another-bag"' [dragulaModel]='many'>
+      <div *ngFor='let text of many | callbackparams: filterMany: searchMany'
+              [innerHtml]='text'
+              [attr.filter-index]='many.indexOf(text)'></div>
+    </div>
+  <div class='container'>
+    <input type='text' [(ngModel)]='searchMany2' placeholder='Search many2'>
+    <div class='container' [dragula]='"another-bag"' [dragulaModel]='many2'>
+      <div *ngFor='let text of many2 | callbackparams: filterMany: searchMany2'
+              [innerHtml]='text'
+              [attr.filter-index]='many2.indexOf(text)'></div>
+    </div>
+  </div>
+</div>
+
+class RepeatExample {
+public searchMany: string;
+public searchMany2: string;
+public many: Array<string> = ['The', 'possibilities', 'are', 'endless!', 'Try', 'filtering!'];
+public many2: Array<string> = ['Explore', 'them'];
+
+constructor(private dragulaService: DragulaService) {
+  dragulaService.dropModel.subscribe((value) => {
+    this.onDropModel(value.slice(1));
+  });
+  dragulaService.removeModel.subscribe((value) => {
+    this.onRemoveModel(value.slice(1));
+  });
+}
+
+public filterMany(item: string, searchValue: string) {
+  if (searchValue && (searchValue.length >= 0)) {
+    return (item.indexOf(searchValue) !== -1);
+  } else {
+    return true;
+  }
+}
+
+private onDropModel(args) {
+  let [el, target, source] = args;
+  // do something else
+}
+
+private onRemoveModel(args) {
+  let [el, source] = args;
+  // do something else
+}
+}
+    
+
+
\ No newline at end of file diff --git a/demo/src/assets/css/example.css b/demo/src/assets/css/example.css index c4f740a3..d0ccf99c 100644 --- a/demo/src/assets/css/example.css +++ b/demo/src/assets/css/example.css @@ -104,7 +104,8 @@ input { border: 0; margin: 5px 0; display: block; - width: 100%; + width: calc(100% - 1em); + margin: .5em; } button { diff --git a/package.json b/package.json index cd1d3500..afc185e8 100644 --- a/package.json +++ b/package.json @@ -29,7 +29,7 @@ "lite-server": "lite-server -c demo/bs-config.json", "demo.serve": "run-s build link demo.build lite-server", "demo.gh-pages": "run-s build demo.build demo.deploy", - "demo.build": "ng build -prod --aot", + "demo.build": "ng build --env=prod", "demo.deploy": "gh-pages -d demo/dist", "link": "ngm link -p src --here", "lint": "exit 0", @@ -54,6 +54,7 @@ "@angular/forms": "^2.3.1 || >=4.0.0" }, "devDependencies": { + "@angular/cli": "1.0.0", "@angular/common": "2.4.3", "@angular/compiler": "2.4.3", "@angular/compiler-cli": "2.4.3", @@ -65,12 +66,11 @@ "@angular/platform-browser-dynamic": "2.4.3", "@angular/router": "3.4.3", "@angular/tsc-wrapped": "0.5.1", - "@types/jasmine": "2.5.40", "@types/dragula": "2.1.29", + "@types/jasmine": "2.5.40", "@types/marked": "0.0.28", "@types/node": "7.0.0", "@types/webpack": "2.2.0", - "@angular/cli": "1.0.0", "bootstrap": "3.3.7", "chokidar-cli": "1.2.0", "classlist-polyfill": "1.0.3", @@ -93,17 +93,17 @@ "karma": "1.4.0", "karma-chrome-launcher": "^2.0.0", "karma-cli": "^1.0.1", + "karma-coverage-istanbul-reporter": "^0.2.0", "karma-jasmine": "^1.0.2", - "karma-jasmine-html-reporter" : "^0.2.2", - "karma-coverage-istanbul-reporter" : "^0.2.0", + "karma-jasmine-html-reporter": "^0.2.2", "karma-sauce-launcher": "1.1.0", "lite-server": "2.2.2", "lodash": "4.17.4", "markdown-loader": "github:valorkin/markdown-loader", "marked": "0.3.6", "ng2-page-scroll": "4.0.0-beta.2", - "ngx-bootstrap": "1.6.6", "ngm-cli": "0.5.0", + "ngx-bootstrap": "1.6.6", "npm-run-all": "4.0.0", "pre-commit": "1.2.2", "protractor": "5.0.0", @@ -121,4 +121,4 @@ "webdriver-manager": "11.1.1", "zone.js": "0.7.5" } -} \ No newline at end of file +} diff --git a/src/components/dragula.provider.ts b/src/components/dragula.provider.ts index 92f2c4bd..d04d4442 100644 --- a/src/components/dragula.provider.ts +++ b/src/components/dragula.provider.ts @@ -73,7 +73,7 @@ export class DragulaService { }); drake.on('drag', (el: any, source: any) => { dragElm = el; - dragIndex = this.domIndexOf(el, source); + dragIndex = (el.getAttribute('filter-index')) ? +el.getAttribute('filter-index') : this.domIndexOf(el, source); }); drake.on('drop', (dropElm: any, target: any, source: any) => { if (!drake.models || !target) {