feat(Axes): change 'mapInput' from (#34)

* feat(Axes): change 'mapInput' from 'connect' * test(HammerInput): add testcase for isEnable
naver · Jul 19, 2017 · e2d1d12 · e2d1d12
1 parent 663ffeb
commit e2d1d12
Show file tree

Hide file tree

Showing 13 changed files with 108 additions and 43 deletions.
diff --git a/demo/assets/js/car360viewer.js b/demo/assets/js/car360viewer.js
@@ -19,5 +19,5 @@
 			v.style.display = i === index ? "inline-block" : "none";
 		});
 	});
-	axes.mapInput("angle", new eg.Axes.HammerInput(".car_rotate"));
+	axes.connect("angle", new eg.Axes.HammerInput(".car_rotate"));
 })();
diff --git a/demo/assets/js/cardinhand.js b/demo/assets/js/cardinhand.js
@@ -89,7 +89,7 @@
 						pos.top) + "px)";
 			});
 		}
-	}).mapInput(["hand", "top"], new eg.Axes.HammerInput(hand, {
+	}).connect(["hand", "top"], new eg.Axes.HammerInput(hand, {
 		scale: [0.3, 0.8]
 	})).setTo({
 		hand: (handRotMin + handRotMax) / 2

diff --git a/demo/assets/js/carousel.js b/demo/assets/js/carousel.js
@@ -124,12 +124,12 @@
             destPos.carousel = ((idx - 1) * PANEL_WIDTH * -1) + BASE;
         },
     })
-    .mapInput(
+    .connect(
         ["detailX", "detailY"],
         new eg.Axes.HammerInput("#detail-view-carousel-container", {
             scale: [-AXES_SCALE, -AXES_SCALE],
         }))
-    .mapInput(
+    .connect(
         "carousel",
         new eg.Axes.HammerInput("#carousel-container", {
             scale: [AXES_SCALE, 0]

diff --git a/demo/assets/js/cube.js b/demo/assets/js/cube.js
@@ -14,7 +14,7 @@
 		deceleration: 0.0024
 	}).on("change", function(e) {
 		box.style[eg.Axes.TRANSFORM] = "rotateY(" + e.pos.rotateX + "deg) rotateX(" + e.pos.rotateY + "deg)";
-	}).mapInput(["rotateX", "rotateY"], new eg.Axes.HammerInput("#area"))
+	}).connect(["rotateX", "rotateY"], new eg.Axes.HammerInput("#area"))
 	.setTo({
 		"rotateX": 40,
 		"rotateY": 315

diff --git a/demo/demo.md b/demo/demo.md
@@ -17,7 +17,7 @@ var axes = new eg.Axes({
 	images.forEach(function (v, i) {
 		v.style.display = i === index ? "inline-block" : "none";
 	});
-}).mapInput("angle", new eg.Axes.HammerInput(".car_rotate"));
+}).connect("angle", new eg.Axes.HammerInput(".car_rotate"));
 ```
 
 ### Cards in hands
@@ -54,7 +54,7 @@ var axes = new eg.Axes({
 			"translateY(" + (parseFloat(v.getAttribute("data-cardOffset")) +
 				pos.top) + "px)";
 	});
-}).mapInput(["hand", "top"], new eg.Axes.HammerInput(hand, {
+}).connect(["hand", "top"], new eg.Axes.HammerInput(hand, {
 	scale: [0.3, 0.8]
 })).setTo({
 	hand: (handRotMin + handRotMax) / 2
@@ -81,7 +81,7 @@ var axes = new eg.Axes({
 	deceleration: 0.0024
 }).on("change", function(e) {
 	box.style[eg.Axes.TRANSFORM] = "rotateY(" + e.pos.rotateX + "deg) rotateX(" + e.pos.rotateY + "deg)";
-}).mapInput(["rotateX", "rotateY"], new eg.Axes.HammerInput("#area"));
+}).connect(["rotateX", "rotateY"], new eg.Axes.HammerInput("#area"));
 .setTo({
 	"rotateX": 40,
 	"rotateY": 315
@@ -139,12 +139,12 @@ const axes = new eg.Axes({
 		destPos.carousel = ((idx - 1) * PANEL_WIDTH * -1) + BASE;
 	},
 })
-.mapInput(
+.connect(
 	["detailX", "detailY"],
 	new eg.Axes.HammerInput("#detail-view-carousel-container", {
 		scale: [-AXES_SCALE, -AXES_SCALE],
 	}))
-.mapInput(
+.connect(
 	"carousel",
 	new eg.Axes.HammerInput("#carousel-container", {
 		scale: [AXES_SCALE, 0]

diff --git a/demo/started.md b/demo/started.md
@@ -43,7 +43,7 @@ var hammerType = new eg.Axes.HammerInputType("#area", {
 });
 
 // add innputType at axes
-axes.mapInput(["left", "top"], hammerType);
+axes.connect(["left", "top"], hammerType);
 ```
 
 #### ES6
@@ -62,5 +62,5 @@ const hammerType = new Axes.HammerInputType("#area", {
 });
 
 // add innputType at axes
-axes.mapInput(["left", "top"], hammerType);
+axes.connect(["left", "top"], hammerType);
 ```
diff --git a/package.json b/package.json
@@ -15,7 +15,7 @@
     "demo:build": "npm run demo:updateVersion && jekyll build -s demo",
     "demo:prebuild-version": "cpx 'dist/**/*' demo/release/$npm_package_version/dist --clean && cpx 'doc/**/*' demo/release/$npm_package_version/doc --clean",
     "demo:prebuild-latest": "cpx 'dist/**/*' demo/release/latest/dist --clean && cpx 'doc/**/*' demo/release/latest/doc --clean",
-    "demo:deploy": "npm run build && npm run jsdoc && npm run demo:prebuild-version && npm run demo:prebuild-latest && npm run demo:build && gh-pages -d demo/_site",
+    "demo:deploy": "npm run build && npm run jsdoc && npm run demo:prebuild-version && npm run demo:prebuild-latest && npm run demo:build && gh-pages -d demo/_site --remote upstream",
     "demo:updateVersion": "echo $npm_package_version > demo/_data/version.yml",
     "demo:setup": "cpx 'node_modules/@egjs/common-demo/**/*' 'demo/' && rm demo/package.json",
     "coveralls": "cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js",

diff --git a/src/Axes.ts b/src/Axes.ts
@@ -30,6 +30,7 @@ export default class Axes extends Component {
 	private _itm: InterruptManager;
 	private _am: AnimationManager;
 	private _io: InputObserver;
+	private _inputs: InputType[] = [];
 
 	constructor(options: AxesOption) {
 		super();
@@ -74,18 +75,33 @@ export default class Axes extends Component {
 		});
 	}
 
-	mapInput(axes: string[] | string, inputType: InputType) {
+	connect(axes: string[] | string, inputType: InputType) {
 		let mapped;
 		if (typeof axes === "string") {
-			mapped = [axes];
+			mapped = axes.split(" ");
 		} else {
 			mapped = axes.concat();
 		}
+		if (~this._inputs.indexOf(inputType)) {
+			inputType.disconnect();
+		}
 		inputType.mapAxes(mapped);
 		inputType.connect(this._io);
 		return this;
 	}
 
+	disconnect(inputType?: InputType) {
+		if (inputType) {
+			const index = this._inputs.indexOf(inputType);
+
+			~index && this._inputs.splice(index, 1);
+		} else {
+			this._inputs.forEach(v => v.disconnect());
+			this._inputs = [];
+		}
+		return this;
+	}
+
 	get(axes?: string[]) {
 		return this._axm.get(axes);
 	}
@@ -105,6 +121,7 @@ export default class Axes extends Component {
 	}
 
 	destroy() {
+		this.disconnect();
 		this._em.destroy();
 	}
 }
diff --git a/src/inputType/HammerInput.ts b/src/inputType/HammerInput.ts
@@ -121,7 +121,7 @@ export class HammerInput extends InputType {
 
 		let keyValue: string = this.element[UNIQUEKEY];
 		if (keyValue) {
-			this.hammer.destroy();
+			this.hammer && this.hammer.destroy();
 		} else {
 			keyValue = String(Math.round(Math.random() * new Date().getTime()));
 		}
@@ -140,19 +140,16 @@ export class HammerInput extends InputType {
 	}
 
 	disconnect() {
-		if (this.element[UNIQUEKEY]) {
+		if (this.hammer) {
 			this.hammer.off("hammer.input panstart panmove panend");
 			this.hammer.destroy();
+			this.hammer = null;
 			delete this.element[UNIQUEKEY];
 		}
-		this.hammer = null;
-		return this;
-	}
-
-	destroy() {
-		this.disconnect();
+		this._direction = DIRECTION.DIRECTION_NONE;
 		this.element = null;
 		this.options = {};
+		return this;
 	}
 
 	private createHammer(inputClass) {
@@ -257,7 +254,7 @@ export class HammerInput extends InputType {
 		this.hammer && (this.hammer.get("pan").options.enable = false);
 	}
 	isEnable() {
-		return this.hammer && this.hammer.get("pan").options.enable;
+		return !!(this.hammer && this.hammer.get("pan").options.enable);
 	}
 }
 
diff --git a/src/inputType/InputType.ts b/src/inputType/InputType.ts
@@ -5,7 +5,6 @@ export abstract class InputType {
 	axes: string[];
 	abstract connect(observer: IInputTypeObserver): InputType;
 	abstract disconnect();
-	abstract destroy();
 	abstract enable?();
 	abstract disable?();
 	abstract isEnable?(): boolean;

diff --git a/test/manual/js/index.js b/test/manual/js/index.js
@@ -49,6 +49,6 @@ var axes = new eg.Axes({
 });
 
 
-axes.mapInput(["x", "y"], hammerInputArea)
-	.mapInput(["x"], hammerInputHmove)
-	.mapInput(["", "y"], hammerInputVmode);
+axes.connect(["x", "y"], hammerInputArea)
+	.connect(["x"], hammerInputHmove)
+	.connect(["", "y"], hammerInputVmode);
diff --git a/test/unit/Axes.spec.js b/test/unit/Axes.spec.js
@@ -2,7 +2,7 @@ import Axes from "../../src/Axes.ts";
 import {HammerInput} from "../../src/inputType/HammerInput.ts";
 
 describe("Axes", function () {
-  describe("Axes init Test", function () {
+  describe("Axes Test", function () {
     beforeEach(() => {
       this.inst = null;
     });
@@ -154,34 +154,89 @@ describe("Axes", function () {
       cleanup();
     });
 
-    it("should check `mapInput` method", () => {
+    it("should check `connect` method", () => {
       // Given
       const input = new HammerInput("#sandbox");
 
       // When
-      let ret = this.inst.mapInput("x", input);
+      let ret = this.inst.connect("x", input);
 
       // Then
       expect(input.axes).to.be.eql(["x"]);
       expect(ret).to.be.equal(this.inst);
-      input.disconnect();
 
       // When
-      ret = this.inst.mapInput(["x"], input);
+      ret = this.inst.connect(["x"], input);
 
       // Then
       expect(input.axes).to.be.eql(["x"]);
       expect(ret).to.be.equal(this.inst);
-      input.disconnect();
 
       // When
-      ret = this.inst.mapInput(["x", "y"], input);
+      ret = this.inst.connect(["x", "y"], input);
 
       // Then
       expect(input.axes).to.be.eql(["x", "y"]);
       expect(ret).to.be.equal(this.inst);
-      input.disconnect();
+
+      // When
+      ret = this.inst.connect("x y", input);
+
+      // Then
+      expect(input.axes).to.be.eql(["x", "y"]);
+      expect(ret).to.be.equal(this.inst);
+    });
+
+    it("should check `disconnect` method", () => {
+      // Given
+      const input1 = new HammerInput("#sandbox");
+      const input2 = new HammerInput("#sandbox");
+      const input3 = new HammerInput("#sandbox");
+      this.inst.connect("x", input1);
+      this.inst.connect("y", input2);
+      this.inst.connect("x y", input3);
+
+      // When
+      let ret = this.inst.disconnect(input1);
+
+      // Then
+      expect(this.inst._inputs.indexOf(input1)).to.be.equal(-1);
+      expect(ret).to.be.equal(this.inst);
+
+      // When
+      ret = this.inst.disconnect();
+
+      // Then
+      expect(this.inst._inputs).to.be.eql([]);
+      expect(ret).to.be.equal(this.inst);
     });
+    it("should check `enable/disalbe` methods of inputType", () => {
+      // Given
+      // When
+      const input = new HammerInput("#sandbox");
+
+      // Then
+      expect(input.isEnable()).to.be.false;
+
+      // When
+      this.inst.connect("x", input);
+
+      // Then
+      expect(input.isEnable()).to.be.true;
+
+      // When
+      input.disable();
+
+      // Then
+      expect(input.isEnable()).to.be.false;
+
+      // When
+      input.enable();
+
+      // Then
+      expect(input.isEnable()).to.be.true;
+    });
+
   });
   describe("Axes Custom Event Test with interruptable", function () {
     beforeEach(() => {
@@ -210,14 +265,13 @@ describe("Axes", function () {
         expect(self._itm._prevented).to.be.false;
       };
       this.input = new HammerInput(this.el);
-      this.inst.mapInput(["x", "y"], this.input);
+      this.inst.connect(["x", "y"], this.input);
     });
     afterEach(() => {
       if (this.inst) {
         this.inst.destroy();
         this.inst = null;
       }
-      this.input.disconnect();
       cleanup();
     });
 
@@ -286,7 +340,7 @@ describe("Axes", function () {
         "release": this.releaseHandler,
         "animationStart": this.animationStartHandler,
         "animationEnd": this.animationEndHandler
-      }).mapInput(["x", "y"], this.input);
+      }).connect(["x", "y"], this.input);
     });
     afterEach(() => {
       if (this.inst) {
@@ -297,7 +351,6 @@ describe("Axes", function () {
       this.releaseHandler.reset();
       this.animationStartHandler.reset();
       this.animationEndHandler.reset();
-      this.input.disconnect();
       cleanup();
     });
 
@@ -437,8 +490,7 @@ describe("Axes", function () {
               expect(holdHandler.calledOnce).to.be.true;
               expect(releaseHandler.calledOnce).to.be.true;
               expect(animationStartHandler.calledOnce).to.be.true;
-              console.log(animationEndHandler.callCount);
-              // expect(animationEndHandler.calledOnce).to.be.true;
+              expect(animationEndHandler.calledOnce).to.be.true;
               done();
           }, 1000);    
       }); 

diff --git a/test/unit/HammerInput.spec.js b/test/unit/HammerInput.spec.js
@@ -9,7 +9,7 @@ describe("HammerInput", () => {
     });
     afterEach(() => {
       if (this.inst) {
-        this.inst.destroy();
+        this.inst.disconnect();
         this.inst = null;
       }
       cleanup();