Merge pull request #60 from czeckd/disabled

Code for disabled dual-list and/or disabled drag-and-drop.

Author: czeckd

README.md

@@ -42,14 +42,15 @@ The following parameters can be set on a dual-list:
 - **display** - The field of each object for displaying the object each the
 lists, default is ``_name``. (With a source of an array of strings, each string is its own display.)
 - **height** - The height of the lists, default is ``100px``.
-- **format** - A format object, default is ``{ add: 'Add', remove: 'Remove', all: 'All', none: 'None', direction: 'left-to-right' }``
+- **format** - A format object, default is ``{ add: 'Add', remove: 'Remove', all: 'All', none: 'None', direction: 'left-to-right', draggable: true }``
 - **filter** - A boolean whether or not to display a filter for the lists, default is ``false``.
 - **sort** - A boolean whether or not to keep the lists sorted, default is ``false``.
 - **compare** - A compare function to be used for sorting the lists. Note if
 sort is not set and compare is set, then sort will be set ``true``.
 - **source** - The source array of objects or strings for the list. (This is the universal, master list of all possible objects.)
 - **destination** The destination array of objects or strings selected from the source.
 Note, the ``destination`` array can have prexisting elements.
+- **disabled** - The dual-list is disabled, default is ``false``.
 
 For more usage examples, see the [`demo-app.component.ts`](https://github.com/czeckd/angular-dual-listbox/blob/master/app/demo-app.component.ts).
 

app/demo-app.component.ts

@@ -5,11 +5,12 @@ import { DualListComponent } from 'angular-dual-listbox';
 
 @Component({
 	selector: 'demo-app',
+	styles: [ '.form-group { margin-bottom: 16px; }', '.checkbox { margin-top: inherit }' ],
 	template: `
 <div class="container-fluid">
 	<p></p>
 	<dual-list [sort]="keepSorted" [source]="source" [key]="key" [display]="display" [filter]="filter"
-		[(destination)]="confirmed" height="265px" [format]="format"></dual-list>
+		[(destination)]="confirmed" height="265px" [format]="format" [disabled]="disabled"></dual-list>
 
 	<ul class="nav nav-tabs" style="margin-top:50px;">
 		<li [class.active]="tab===1"><a (click)="tab=1">Arrays</a><li>
@@ -52,6 +53,12 @@ import { DualListComponent } from 'angular-dual-listbox';
 					<label>None button</label>
 					<input class="form-control col-sm-2" [(ngModel)]="format.none" name="noneBtn">
 				</div>
+				<div class="form-group">
+					<label>Enable drag-and-drop</label>
+					<div class="checkbox">
+						<label><input type="checkbox" [(ngModel)]="format.draggable" name="drag">draggable</label>
+					</div>
+				</div>
 			</form>
 		</div>
 
@@ -92,6 +99,7 @@ import { DualListComponent } from 'angular-dual-listbox';
 					<label>General</label><br/>
 					<form class="form-inline well">
 						<button class="btn btn-default" (click)="doFilter()">{{filterBtn()}}</button>
+						<button class="btn btn-default" (click)="doDisable()">{{disableBtn()}}</button>
 						<button class="btn btn-primary" (click)="doReset()">Reset</button>
 					</form>
 				</div>
@@ -111,6 +119,7 @@ export class DemoAppComponent implements OnInit {
 	source:Array<any>;
 	confirmed:Array<any>;
 	userAdd = '';
+	disabled = false;
 
 	sourceLeft = true;
 	format:any = DualListComponent.DEFAULT_FORMAT;
@@ -209,7 +218,7 @@ export class DemoAppComponent implements OnInit {
 
 	private useStations() {
 		this.key = 'key';
-		this.display = 'station'; //[ 'station', 'state' ];
+		this.display = 'station'; // [ 'station', 'state' ];
 		this.keepSorted = true;
 		this.source = this.sourceStations;
 		this.confirmed = this.confirmedStations;
@@ -241,7 +250,7 @@ export class DemoAppComponent implements OnInit {
 			break;
 		case this.arrayType[2].value:
 			this.useTube();
-			break
+			break;
 		}
 	}
 
@@ -279,7 +288,7 @@ export class DemoAppComponent implements OnInit {
 
 	doCreate() {
 		if (typeof this.source[0] === 'object') {
-			let o:any = {};
+			const o = {};
 			o[this.key] = this.source.length + 1;
 			o[this.display] = this.userAdd;
 			this.source.push( o );
@@ -291,8 +300,8 @@ export class DemoAppComponent implements OnInit {
 
 	doAdd() {
 		for (let i = 0, len = this.source.length; i < len; i += 1) {
-			let o = this.source[i];
-			let found = this.confirmed.find( (e:any) => e === o );
+			const o = this.source[i];
+			const found = this.confirmed.find( (e:any) => e === o );
 			if (!found) {
 				this.confirmed.push(o);
 				break;
@@ -314,6 +323,14 @@ export class DemoAppComponent implements OnInit {
 		return (this.filter ? 'Hide Filter' : 'Show Filter');
 	}
 
+	doDisable() {
+		this.disabled = !this.disabled;
+	}
+
+	disableBtn() {
+		return (this.disabled ? 'Enable' : 'Disabled');
+	}
+
 	swapDirection() {
 		this.sourceLeft = !this.sourceLeft;
 		this.format.direction = this.sourceLeft ? DualListComponent.LTR : DualListComponent.RTL;

demo/index.html

@@ -10,12 +10,12 @@
 		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" 
 			integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
 
-	    <script src="https://unpkg.com/typescript@2.2.0/lib/typescript.js"></script> 
+	    <script src="https://unpkg.com/typescript@2.4.2/lib/typescript.js"></script> 
 
 		<!-- Polyfill(s) for older browsers -->
 	    <script src="https://unpkg.com/core-js/client/shim.min.js"></script>
 
-	    <script src="https://unpkg.com/[email protected].4?main=browser"></script>
+	    <script src="https://unpkg.com/[email protected].18?main=browser"></script>
 	    <script src="https://unpkg.com/[email protected]/dist/system.src.js"></script>
 
 		<script src="demo/systemjs.config.js"></script>

demo/systemjs.config.js

@@ -1,11 +1,11 @@
 (function(global) {
 
-  var ngVer = '@4.4.4';
+  var ngVer = '@5.0.0';
 
   // map tells the System loader where to look for things
   var map = {
     'app':  'app', // 'dist',
-    'rxjs': 'https://unpkg.com/rxjs@5.2.0',
+    'rxjs': 'https://unpkg.com/rxjs@5.5.2',
     '@angular': 'https://unpkg.com/@angular',
     'angular-dual-listbox': 'lib'
   };
@@ -36,7 +36,8 @@
   });
 
   var config = {
-	transpiler: 'typescript',
+//	transpiler: 'typescript',
+	transpiler: 'ts',
     typescriptOptions: {
       emitDecoratorMetadata: true
     },

lib/dual-list.component.css

@@ -77,6 +77,7 @@ div.record-picker::-webkit-scrollbar-thumb:hover {
 .record-picker li.disabled {
 	opacity: 0.5;
 	cursor: default;
+	background-color: inherit;
 }
 
 .record-picker li:first-child {

lib/dual-list.component.html

@@ -12,16 +12,16 @@
 			<ul [ngStyle]="{'max-height': height, 'min-height': height}" [ngClass]="{over:available.dragOver}"
 				(drop)="drop($event, confirmed)" (dragover)="allowDrop($event, available)" (dragleave)="dragLeave()">
 				<li *ngFor="let item of available.sift; let idx=index;"
-					(click)="selectItem(available.pick, item); shiftClick($event, idx, available, item)"
-					[ngClass]="{selected: isItemSelected(available.pick, item)}"
-					draggable="true" (dragstart)="drag($event, item, available)" (dragend)="dragEnd(available)"
+					(click)="disabled ? null : selectItem(available.pick, item); shiftClick($event, idx, available, item)"
+					[ngClass]="{selected: isItemSelected(available.pick, item), disabled: disabled}"
+					[draggable]="!disabled && format.draggable" (dragstart)="drag($event, item, available)" (dragend)="dragEnd(available)"
 				><label>{{item._name}}</label></li>
 			</ul>
 		</div>
 
 		<div class="button-bar">
 			<button type="button" class="btn btn-primary pull-left" (click)="selectAll(available)"
-				[disabled]="isAllSelected(available)">{{format.all}}</button>
+				[disabled]="disabled || isAllSelected(available)">{{format.all}}</button>
 			<button type="button" class="btn btn-default pull-right" (click)="selectNone(available)"
 				[disabled]="!isAnySelected(available)">{{format.none}}</button>
 		</div>
@@ -39,17 +39,17 @@
 		<div class="record-picker">
 			<ul [ngStyle]="{'max-height': height, 'min-height': height}" [ngClass]="{over:confirmed.dragOver}"
 				(drop)="drop($event, available)" (dragover)="allowDrop($event, confirmed)" (dragleave)="dragLeave()">
-				<li *ngFor="let item of confirmed.sift; let idx=index;"
-					(click)="selectItem(confirmed.pick, item); shiftClick($event, idx, confirmed, item)"
-					[ngClass]="{selected: isItemSelected(confirmed.pick, item)}"
-					draggable="true" (dragstart)="drag($event, item, confirmed)" (dragend)="dragEnd(confirmed)"
+				<li #itmConf *ngFor="let item of confirmed.sift; let idx=index;"
+					(click)="disabled ? null : selectItem(confirmed.pick, item); shiftClick($event, idx, confirmed, item)"
+					[ngClass]="{selected: isItemSelected(confirmed.pick, item), disabled: disabled}"
+					[draggable]="!disabled && format.draggable" (dragstart)="drag($event, item, confirmed)" (dragend)="dragEnd(confirmed)"
 				><label>{{item._name}}</label></li>
 			</ul>
 		</div>
 
 		<div class="button-bar">
 			<button type="button" class="btn btn-primary pull-left" (click)="selectAll(confirmed)"
-				[disabled]="isAllSelected(confirmed)">{{format.all}}</button>
+				[disabled]="disabled || isAllSelected(confirmed)">{{format.all}}</button>
 			<button type="button" class="btn btn-default pull-right" (click)="selectNone(confirmed)"
 				[disabled]="!isAnySelected(confirmed)">{{format.none}}</button>
 		</div>

lib/dual-list.component.ts

@@ -20,7 +20,7 @@ export class DualListComponent implements DoCheck, OnChanges {
 	static LTR = 'left-to-right';
 	static RTL = 'right-to-left';
 
-	static DEFAULT_FORMAT = { add: 'Add', remove: 'Remove', all: 'All', none: 'None', direction: DualListComponent.LTR };
+	static DEFAULT_FORMAT = { add: 'Add', remove: 'Remove', all: 'All', none: 'None', direction: DualListComponent.LTR, draggable: true };
 
 	@Input() id = `dual-list-${nextId++}`;
 	@Input() key = '_id';
@@ -30,6 +30,7 @@ export class DualListComponent implements DoCheck, OnChanges {
 	@Input() format = DualListComponent.DEFAULT_FORMAT;
 	@Input() sort = false;
 	@Input() compare:compareFunction;
+	@Input() disabled = false;
 	@Input() source:Array<any>;
 	@Input() destination:Array<any>;
 	@Output() destinationChange = new EventEmitter();
@@ -85,6 +86,10 @@ export class DualListComponent implements DoCheck, OnChanges {
 			if (typeof(this.format.none) === 'undefined') {
 				this.format.none = DualListComponent.DEFAULT_FORMAT.none;
 			}
+
+			if (typeof(this.format.draggable) === 'undefined') {
+				this.format.draggable = DualListComponent.DEFAULT_FORMAT.draggable;
+			}
 		}
 
 		if (changeRecord['source']) {