Fixed submitting form on button click and fixed infinite spin up on m…

…ouseleave.
nkovacic · Jul 31, 2017 · d957fc3 · d957fc3
1 parent 477c92b
commit d957fc3
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 21 deletions.
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
     "name": "angular-touchspin",
-    "version": "1.4.4",
+    "version": "1.4.5",
     "authors": [
         "Niko Kovacic <niko.kovacic2@gmail.com>"
     ],

diff --git a/dev/controllers/main.controller.ts b/dev/controllers/main.controller.ts
@@ -15,7 +15,6 @@ export class MainController {
 			decimals: 2,
 			max: 100,
 			min: 1,
-			step: 0.1,
 			prefix: '$',
 			//postfix: '%'
 		};

diff --git a/dev/index.html b/dev/index.html
@@ -21,7 +21,7 @@
                         Example:
                     </label>
                     <div class="col-md-8">
-                        <touch-spin disabled="vm.touchSpinDisabled" ng-model="vm.currency" options="vm.touchSpinOptions">
+                        <touch-spin disabled="vm.touchSpinDisabled" ng-model="vm.test.currency" options="vm.touchSpinOptions">
                         </touch-spin>
                     </div>
                 </div>
@@ -48,7 +48,7 @@
                         Example value:
                     </label>
                     <div class="col-md-8">
-                        {{vm.currency}}
+                        {{vm.test.currency}}
                     </div>
                 </div>
                 <div class="form-group">

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "angular-touchspin",
-    "version": "1.4.4",
+    "version": "1.4.5",
     "author": "Niko Kovačič <niko.kovacic2@gmail.com>",
     "title": "Angular Touchspin",
     "description": "A input spinner component for Bootstrap 3 and angular",
@@ -19,7 +19,7 @@
     "main": "./dist/angular-touchspin.js",
     "licence": "MIT",
     "dependencies": {
-        "angular": "~1.6"
+        "angular": "~1.5"
     },
     "devDependencies": {
         "babel": "5.8.23",

diff --git a/src/components/touchspin/touchspin.controller.ts b/src/components/touchspin/touchspin.controller.ts
@@ -8,6 +8,7 @@ export class TouchSpinController {
 	public options: angular.touchspin.ITouchSpinOptions;
 	public val: string;
 
+	private mouseButtonDown: boolean;
 	private clickStart: number;
 	private focused: boolean;
 	private inputElement: angular.IAugmentedJQuery;
@@ -43,9 +44,15 @@ export class TouchSpinController {
 			this.increment();
 		}	
 
+		this.stopSpin(true);
+
 		this.clickStart = Date.now();
 
 		this.timeout = this.$timeout(() => {
+			// if (this.timer) {
+			// 	this.$interval.cancel(this.timer);
+			// }
+
 			this.timer = this.$interval(() => {
 				if (this.touchSpinOptions.verticalButtons) {
 					this.decrement();
@@ -65,7 +72,6 @@ export class TouchSpinController {
 		else {
 			this.decrement();
 		}
-
 
 		this.clickStart = Date.now();
 		this.stopSpin();
@@ -81,8 +87,8 @@ export class TouchSpinController {
 			}, this.touchSpinOptions.stepInterval);
 		}, this.touchSpinOptions.stepIntervalDelay);
 	}
-	stopSpin() {
-		if (Date.now() - this.clickStart > this.touchSpinOptions.stepIntervalDelay) {
+	stopSpin(force?: boolean) {
+		if (force || Date.now() - this.clickStart > this.touchSpinOptions.stepIntervalDelay) {
 			this.$timeout.cancel(this.timeout);
 			this.$interval.cancel(this.timer);
 		} else {
@@ -205,25 +211,51 @@ export class TouchSpinController {
 
 		this.changeValue(value);
 	}
-	private keyUp(event: MouseEvent) {
-    	let code = <number>(<any>event).keyCode || event.which;
+	private keyUp(event: KeyboardEvent) {
+    	let code = event.keyCode || event.which;
 
         if (code === Char.ArrowDown || code === Char.ArrowUp) {
             this.stopSpin();
+
+            event.preventDefault();
         }
     }
-	private keyDown(event: MouseEvent) {
-    	let  code = <number>(<any>event).keyCode || event.which;
+	private keyDown(event: KeyboardEvent) {
+    	let  code = event.keyCode || event.which;
 
         if (code === Char.ArrowUp) {
-        	this.increment();
+        	this.startSpinUp();
 
         	event.preventDefault();
         }
         else if (code === Char.ArrowDown) {
-            this.decrement();
+            this.startSpinDown();
 
             event.preventDefault();
         }
     }
+    private mouseDown(event: MouseEvent, increment: boolean) {
+    	this.mouseButtonDown = true;
+
+		if (increment) {
+			this.startSpinUp();
+		}
+		else {
+			this.startSpinDown();
+		}   	
+    }
+    private mouseUp(event: MouseEvent) {
+		this.mouseButtonDown = false;
+
+
+    	this.stopSpin();
+    }
+    private mouseEnter(event: MouseEvent, increment: boolean) {
+
+    }
+    private mouseLeave(event: MouseEvent) {
+    	if (this.mouseButtonDown) {
+    		this.mouseUp(event);
+    	}
+    }
 }
diff --git a/src/components/touchspin/touchspin.directive.html b/src/components/touchspin/touchspin.directive.html
@@ -1,6 +1,7 @@
 <div class="input-group bootstrap-touchspin" ng-class="{ 'bootstrap-touchspin-disabled': vm.disabled }">
     <span class="input-group-btn" ng-if="!vm.touchSpinOptions.verticalButtons">
-        <button ng-class="vm.touchSpinOptions.buttonDownClass" ng-disabled="vm.disabled" ng-mousedown="vm.startSpinDown()" ng-mouseup="vm.stopSpin()">
+        <button ng-class="vm.touchSpinOptions.buttonDownClass" type="button" ng-disabled="vm.disabled" 
+            ng-mousedown="vm.mouseDown($event, false)" ng-mouseup="vm.mouseUp($event)" ng-mouseenter="vm.mouseEnter($event)" ng-mouseleave="vm.mouseLeave($event)">
             -
         </button>
     </span>
@@ -10,17 +11,19 @@
     <span class="input-group-addon" ng-class="vm.touchSpinOptions.postfixExtraClass" ng-if="vm.touchSpinOptions.postfix" ng-bind="vm.touchSpinOptions.postfix">
     </span>
     <span class="input-group-btn" ng-if="!vm.touchSpinOptions.verticalButtons">
-        <button class="btn btn-default" ng-class="vm.touchSpinOptions.buttonUpClass" ng-disabled="vm.disabled" ng-mousedown="vm.startSpinUp()" ng-mouseup="vm.stopSpin()">
+        <button class="btn btn-default" ng-class="vm.touchSpinOptions.buttonUpClass" type="button" ng-disabled="vm.disabled" 
+            ng-mousedown="vm.mouseDown($event, true)" ng-mouseup="vm.mouseUp($event)" ng-mouseenter="vm.mouseEnter($event)" ng-mouseleave="vm.mouseLeave($event)">
             +
         </button>
     </span>
     <span class="input-group-btn-vertical" ng-if="vm.touchSpinOptions.verticalButtons">
-        <button class="bootstrap-touchspin-up" ng-class="vm.touchSpinOptions.buttonUpClass" ng-disabled="vm.disabled" 
-            ng-mousedown="vm.startSpinDown()" ng-mouseup="vm.stopSpin()" type="button">
+        <button class="bootstrap-touchspin-up" ng-class="vm.touchSpinOptions.buttonUpClass" type="button" ng-disabled="vm.disabled" 
+            ng-mousedown="vm.mouseDown($event, false)" ng-mouseup="vm.mouseUp($event)" ng-mouseenter="vm.mouseEnter($event)" ng-mouseleave="vm.mouseLeave($event)">
             <i ng-class="vm.touchSpinOptions.verticalUpClass"></i>
         </button>
-        <button class="bootstrap-touchspin-down" ng-class="vm.touchSpinOptions.buttonUpClass" ng-disabled="vm.disabled"
-            ng-mousedown="vm.startSpinUp()" ng-mouseup="vm.stopSpin()" type="button">
+        <button class="bootstrap-touchspin-down" ng-class="vm.touchSpinOptions.buttonUpClass" type="button" ng-disabled="vm.disabled" 
+            ng-mousedown="vm.mouseDown($event, true)" ng-mouseup="vm.mouseUp($event)" ng-mouseenter="vm.mouseEnter($event)" 
+            ng-mouseleave="vm.mouseLeave($event)">
             <i ng-class="vm.touchSpinOptions.verticalDownClass"></i>
         </button>
     </span>