angular-sortablejs - npm Package Compare versions

Comparing version 2.5.2 to 2.6.0

dist/src/sortablejs-options.d.ts

@@ -10,2 +10,3 @@ export interface SortablejsOptions {
     delay?: number;
+    touchStartThreshold?: number;
     disabled?: boolean;
@@ -12,0 +13,0 @@ store?: {

dist/src/sortablejs.directive.d.ts

@@ -1,5 +0,5 @@
-import { ApplicationRef, ElementRef, NgZone, OnChanges, OnDestroy, OnInit, Renderer2, SimpleChanges } from '@angular/core';
+import { ElementRef, NgZone, OnChanges, OnDestroy, OnInit, Renderer2, SimpleChanges } from '@angular/core';
+import { SortablejsBindingTarget } from './sortablejs-binding-target';
 import { SortablejsOptions } from './sortablejs-options';
 import { SortablejsService } from './sortablejs.service';
-import { SortablejsBindingTarget } from './sortablejs-binding-target';
 export declare class SortablejsDirective implements OnInit, OnChanges, OnDestroy {
@@ -10,3 +10,2 @@ private globalConfig;
     private zone;
-    private applicationRef;
     private renderer;
@@ -18,3 +17,3 @@ sortablejs: SortablejsBindingTarget;
     runInsideAngular: boolean;
-    constructor(globalConfig: SortablejsOptions, service: SortablejsService, element: ElementRef, zone: NgZone, applicationRef: ApplicationRef, renderer: Renderer2);
+    constructor(globalConfig: SortablejsOptions, service: SortablejsService, element: ElementRef, zone: NgZone, renderer: Renderer2);
     ngOnInit(): void;
@@ -29,4 +28,3 @@ ngOnChanges(changes: SimpleChanges): void;
     private clone<T>(item);
-    private detectChanges();
     private readonly overridenOptions;
 }

dist/src/sortablejs.directive.js

@@ -13,7 +13,7 @@ "use strict";
 var globals_1 = require("./globals");
+var sortablejs_bindings_1 = require("./sortablejs-bindings");
 var sortablejs_service_1 = require("./sortablejs.service");
-var sortablejs_bindings_1 = require("./sortablejs-bindings");
 var OriginalSortable = require('sortablejs');
 var SortablejsDirective = (function () {
-    function SortablejsDirective(globalConfig, service, element, zone, applicationRef, renderer) {
+    function SortablejsDirective(globalConfig, service, element, zone, renderer) {
         this.globalConfig = globalConfig;
@@ -23,3 +23,2 @@ this.service = service;
         this.zone = zone;
-        this.applicationRef = applicationRef;
         this.renderer = renderer;
@@ -83,2 +82,3 @@ this.runInsideAngular = false;
     SortablejsDirective.prototype.proxyEvent = function (eventName) {
+        var _this = this;
         var params = [];
@@ -88,7 +88,8 @@ for (var _i = 1; _i < arguments.length; _i++) {
         }
-        if (this.optionsWithoutEvents && this.optionsWithoutEvents[eventName]) {
-            (_a = this.optionsWithoutEvents)[eventName].apply(_a, params);
-        }
-        this.detectChanges();
-        var _a;
+        this.zone.run(function () {
+            if (_this.optionsWithoutEvents && _this.optionsWithoutEvents[eventName]) {
+                (_a = _this.optionsWithoutEvents)[eventName].apply(_a, params);
+            }
+            var _a;
+        });
     };
@@ -105,5 +106,2 @@ Object.defineProperty(SortablejsDirective.prototype, "isCloning", {
     };
-    SortablejsDirective.prototype.detectChanges = function () {
-        this.applicationRef.tick();
-    };
     Object.defineProperty(SortablejsDirective.prototype, "overridenOptions", {
@@ -158,3 +156,2 @@ get: function () {
     { type: core_1.NgZone, },
-    { type: core_1.ApplicationRef, },
     { type: core_1.Renderer2, },
@@ -161,0 +158,0 @@ ]; };

dist/src/sortablejs.directive.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"SortablejsDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[sortablejs]"}]}],"members":{"sortablejs":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"inputOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["sortablejsOptions"]}]}],"inputCloneFunction":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["sortablejsCloneFunction"]}]}],"runInsideAngular":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":[{"__symbolic":"reference","module":"./globals","name":"GLOBALS"}]}],null,null,null,null,null],"parameters":[{"__symbolic":"reference","module":"./sortablejs-options","name":"SortablejsOptions"},{"__symbolic":"reference","module":"./sortablejs.service","name":"SortablejsService"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"NgZone"},{"__symbolic":"reference","module":"@angular/core","name":"ApplicationRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"getBindings":[{"__symbolic":"method"}],"proxyEvent":[{"__symbolic":"method"}],"clone":[{"__symbolic":"method"}],"detectChanges":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"SortablejsDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[sortablejs]"}]}],"members":{"sortablejs":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"inputOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["sortablejsOptions"]}]}],"inputCloneFunction":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["sortablejsCloneFunction"]}]}],"runInsideAngular":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":[{"__symbolic":"reference","module":"./globals","name":"GLOBALS"}]}],null,null,null,null,null],"parameters":[{"__symbolic":"reference","module":"./sortablejs-options","name":"SortablejsOptions"},{"__symbolic":"reference","module":"./sortablejs.service","name":"SortablejsService"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"NgZone"},{"__symbolic":"reference","module":"@angular/core","name":"ApplicationRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"getBindings":[{"__symbolic":"method"}],"proxyEvent":[{"__symbolic":"method"}],"clone":[{"__symbolic":"method"}],"detectChanges":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"SortablejsDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[sortablejs]"}]}],"members":{"sortablejs":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"inputOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["sortablejsOptions"]}]}],"inputCloneFunction":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["sortablejsCloneFunction"]}]}],"runInsideAngular":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":[{"__symbolic":"reference","module":"./globals","name":"GLOBALS"}]}],null,null,null,null],"parameters":[{"__symbolic":"reference","module":"./sortablejs-options","name":"SortablejsOptions"},{"__symbolic":"reference","module":"./sortablejs.service","name":"SortablejsService"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"NgZone"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"getBindings":[{"__symbolic":"method"}],"proxyEvent":[{"__symbolic":"method"}],"clone":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"SortablejsDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[sortablejs]"}]}],"members":{"sortablejs":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"inputOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["sortablejsOptions"]}]}],"inputCloneFunction":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["sortablejsCloneFunction"]}]}],"runInsideAngular":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":[{"__symbolic":"reference","module":"./globals","name":"GLOBALS"}]}],null,null,null,null],"parameters":[{"__symbolic":"reference","module":"./sortablejs-options","name":"SortablejsOptions"},{"__symbolic":"reference","module":"./sortablejs.service","name":"SortablejsService"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"NgZone"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"getBindings":[{"__symbolic":"method"}],"proxyEvent":[{"__symbolic":"method"}],"clone":[{"__symbolic":"method"}]}}}}]

package.json

 {
   "name": "angular-sortablejs",
-  "version": "2.5.2",
+  "version": "2.6.0",
   "description": "SortableJS for Angular",
@@ -5,0 +5,0 @@ "main": "./dist/index.js",

README.md

@@ -9,16 +9,10 @@ # angular-sortablejs
 
+Trees are also supported: [tree with fake root element (\*ngFor once, root can also be hidden anyway)](https://stackblitz.com/edit/angular-o1pq84) or [without (\*ngFor 2 times)](https://stackblitz.com/edit/angular-ptu94s).
+
 ## Installation
 
-Angular >= 4.x (angular-sortablejs@2.x.x; sortablejs must be installed separately)
-
 ```sh
-npm install --save sortablejs && npm install --save angular-sortablejs
+npm i sortablejs angular-sortablejs
 ```
 
-Angular 2.x (angular-sortablejs@1.x.x; sortablejs is included)
-
-```sh
-npm install --save angular-sortablejs@1.3.1
-```
-
 You are configured now. If you use Webpack or Angular CLI go to the usage. If you have SystemJS, that's sad, but you can go to the end of the document to find configuration steps there.
@@ -216,2 +210,29 @@
 
+## Angular Material specifics
+
+### Ripple effect
+
+The elements with ripple effect like `mat-list-item` are affected. The dragging is broken because there is a [div created right under the cursor](https://github.com/angular/material2/blob/master/src/lib/core/ripple/ripple-renderer.ts#L142) and the webkit has no idea what to do with it.
+
+There are two solutions:
+
+1. Disable the ripple effect
+
+```ts
+<a mat-list-item [disableRipple]="true">
+```
+
+2. Use `handle` property and block propagation of `mousedown` and `touchstart` events on the handler to prevent ripple.
+
+```ts
+<div [sortablejs]="..." [sortablejsOptions]="{ handle: '.handle' }">
+  <a mat-list-item *ngFor="let a of b" [routerLink]="..." routerLinkActive="active">
+    <mat-icon matListIcon
+              class="handle"
+              (mousedown)="$event.stopPropagation()"
+              (touchstart)="$event.stopPropagation()">drag_handle</mat-icon> {{ a }}
+  </a>
+</div>
+```
+
 ## How it works
@@ -218,0 +239,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

45295

increased by0.81%

Number of lines in readme file

276

increased by8.24%

Worsened metrics

Lines of code

387

decreased by-1.02%

No dependency changes