From a1b09992e0e073d903956b2c59566c4d5796091e Mon Sep 17 00:00:00 2001 From: chenshu Date: Sun, 5 Mar 2017 01:09:44 +0800 Subject: [PATCH] change the implement of freeze-vertical --- dist/vue-krpano.common.js | 2 +- dist/vue-krpano.esm.js | 2 +- package.json | 2 +- src/features/freezeVertical.js | 111 ++++++++++++++++++++------------- 4 files changed, 70 insertions(+), 47 deletions(-) diff --git a/dist/vue-krpano.common.js b/dist/vue-krpano.common.js index b4b7479..847ef7f 100644 --- a/dist/vue-krpano.common.js +++ b/dist/vue-krpano.common.js @@ -31,7 +31,7 @@ this.createPano();}else{this.krpanoObj.call("if(autorotate.enabled,autorotate.re /** * Created by chenshu on 03/03/2017. - */function touchstart(e){var touch=e.changedTouches[0];this.touchOrigin={x:touch.clientX,y:touch.clientY};}function touchmove(e){e.stopPropagation();var touch=e.changedTouches[0];var current={x:touch.clientX,y:touch.clientY};var deltaX=this.touchOrigin.x-current.x;var deltaY=this.touchOrigin.y-current.y;window.scrollBy(0,deltaY);var vlookat=this.get("view.vlookat");var hlookat=this.get("view.hlookat")+deltaX;this.call("lookat("+hlookat+","+vlookat+")");this.touchOrigin=current;}var config$4={props:{freezeVertical:{type:Boolean,default:false}},methods:{setVerticalFreeze:function setVerticalFreeze(freeze){if(freeze){this.krpanoObj.addEventListener("touchstart",touchstart,true);this.krpanoObj.addEventListener("touchmove",touchmove,true);this.log("vertical freeze");}else{this.krpanoObj.removeEventListener("touchstart",touchstart,true);this.krpanoObj.removeEventListener("touchmove",touchmove,true);this.log("vertical release");}}},watch:{freezeVertical:function freezeVertical(val){this.setVerticalFreeze(val);}},created:function created(){var _this=this;this.$on("panoCreated",function(){_this.setVerticalFreeze(_this.freezeVertical);});}}; + */var config$4={props:{freezeVertical:{type:Boolean,default:false}},data:function data(){return{eventDelegate:undefined};},methods:{},watch:{freezeVertical:function freezeVertical(val){if(this.eventDelegate){if(val){this.eventDelegate.style.display="block";var hlookat=this.krpanoObj.get("view.hlookat");this.krpanoObj.call("lookat("+hlookat+",0)");}else{this.eventDelegate.style.display="none";}}}},created:function created(){var _this=this;this.$on("panoCreated",function(krpano){var origin=krpano.firstChild;var eventDelegate=document.createElement("DIV");eventDelegate.className="event-delegate";Object.assign(eventDelegate.style,{display:_this.freezeVertical?"block":"none",width:"100%",height:"100%",position:"absolute","user-select":"none","z-index":1});krpano.appendChild(eventDelegate);_this.eventDelegate=eventDelegate;var originTouch=void 0;eventDelegate.addEventListener("touchstart",function(e){originTouch=e;Object.defineProperty(e,"cancelable",{value:true});var event=new TouchEvent("touchstart",e);return origin.dispatchEvent(event);});eventDelegate.addEventListener("touchend",function(e){Object.defineProperty(e,"cancelable",{value:true});var event=new TouchEvent("touchend",e);return origin.dispatchEvent(event);});eventDelegate.addEventListener("touchmove",function(e){var currentTouch=e.changedTouches[0];var deltaX=originTouch.clientX-currentTouch.clientX;var hlookat=krpano.get("view.hlookat")+deltaX;var vlookat=krpano.get("view.vlookat");krpano.call("lookat("+hlookat+","+vlookat+")");originTouch=currentTouch;return true;});eventDelegate.addEventListener("mousedown",function(e){Object.defineProperty(e,"cancelable",{value:true});return origin.dispatchEvent(new MouseEvent("mousedown",e));});eventDelegate.addEventListener("mousewheel",function(e){Object.defineProperty(e,"cancelable",{value:true});return origin.dispatchEvent(new MouseEvent("mousewheel",e));});});}}; /** * Created by chenshu on 02/03/2017. diff --git a/dist/vue-krpano.esm.js b/dist/vue-krpano.esm.js index ded313d..150e274 100644 --- a/dist/vue-krpano.esm.js +++ b/dist/vue-krpano.esm.js @@ -29,7 +29,7 @@ this.createPano();}else{this.krpanoObj.call("if(autorotate.enabled,autorotate.re /** * Created by chenshu on 03/03/2017. - */function touchstart(e){var touch=e.changedTouches[0];this.touchOrigin={x:touch.clientX,y:touch.clientY};}function touchmove(e){e.stopPropagation();var touch=e.changedTouches[0];var current={x:touch.clientX,y:touch.clientY};var deltaX=this.touchOrigin.x-current.x;var deltaY=this.touchOrigin.y-current.y;window.scrollBy(0,deltaY);var vlookat=this.get("view.vlookat");var hlookat=this.get("view.hlookat")+deltaX;this.call("lookat("+hlookat+","+vlookat+")");this.touchOrigin=current;}var config$4={props:{freezeVertical:{type:Boolean,default:false}},methods:{setVerticalFreeze:function setVerticalFreeze(freeze){if(freeze){this.krpanoObj.addEventListener("touchstart",touchstart,true);this.krpanoObj.addEventListener("touchmove",touchmove,true);this.log("vertical freeze");}else{this.krpanoObj.removeEventListener("touchstart",touchstart,true);this.krpanoObj.removeEventListener("touchmove",touchmove,true);this.log("vertical release");}}},watch:{freezeVertical:function freezeVertical(val){this.setVerticalFreeze(val);}},created:function created(){var _this=this;this.$on("panoCreated",function(){_this.setVerticalFreeze(_this.freezeVertical);});}}; + */var config$4={props:{freezeVertical:{type:Boolean,default:false}},data:function data(){return{eventDelegate:undefined};},methods:{},watch:{freezeVertical:function freezeVertical(val){if(this.eventDelegate){if(val){this.eventDelegate.style.display="block";var hlookat=this.krpanoObj.get("view.hlookat");this.krpanoObj.call("lookat("+hlookat+",0)");}else{this.eventDelegate.style.display="none";}}}},created:function created(){var _this=this;this.$on("panoCreated",function(krpano){var origin=krpano.firstChild;var eventDelegate=document.createElement("DIV");eventDelegate.className="event-delegate";Object.assign(eventDelegate.style,{display:_this.freezeVertical?"block":"none",width:"100%",height:"100%",position:"absolute","user-select":"none","z-index":1});krpano.appendChild(eventDelegate);_this.eventDelegate=eventDelegate;var originTouch=void 0;eventDelegate.addEventListener("touchstart",function(e){originTouch=e;Object.defineProperty(e,"cancelable",{value:true});var event=new TouchEvent("touchstart",e);return origin.dispatchEvent(event);});eventDelegate.addEventListener("touchend",function(e){Object.defineProperty(e,"cancelable",{value:true});var event=new TouchEvent("touchend",e);return origin.dispatchEvent(event);});eventDelegate.addEventListener("touchmove",function(e){var currentTouch=e.changedTouches[0];var deltaX=originTouch.clientX-currentTouch.clientX;var hlookat=krpano.get("view.hlookat")+deltaX;var vlookat=krpano.get("view.vlookat");krpano.call("lookat("+hlookat+","+vlookat+")");originTouch=currentTouch;return true;});eventDelegate.addEventListener("mousedown",function(e){Object.defineProperty(e,"cancelable",{value:true});return origin.dispatchEvent(new MouseEvent("mousedown",e));});eventDelegate.addEventListener("mousewheel",function(e){Object.defineProperty(e,"cancelable",{value:true});return origin.dispatchEvent(new MouseEvent("mousewheel",e));});});}}; /** * Created by chenshu on 02/03/2017. diff --git a/package.json b/package.json index f3ec3a1..5155be9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vue-krpano", - "version": "1.4.0", + "version": "1.4.1", "description": "", "main": "dist/vue-krpano.common.js", "scripts": { diff --git a/src/features/freezeVertical.js b/src/features/freezeVertical.js index aa12313..ae86159 100644 --- a/src/features/freezeVertical.js +++ b/src/features/freezeVertical.js @@ -3,36 +3,6 @@ */ "use strict"; -function touchstart(e) { - - let touch = e.changedTouches[0]; - this.touchOrigin = { - x: touch.clientX, - y: touch.clientY - }; -} - -function touchmove(e) { - - e.stopPropagation(); - - let touch = e.changedTouches[0]; - let current = { - x: touch.clientX, - y: touch.clientY - }; - let deltaX = this.touchOrigin.x - current.x; - let deltaY = this.touchOrigin.y - current.y; - window.scrollBy(0, deltaY); - - let vlookat = this.get("view.vlookat"); - let hlookat = this.get("view.hlookat") + deltaX; - this.call(`lookat(${hlookat},${vlookat})`); - - this.touchOrigin = current; - -} - let config = { props: { freezeVertical: { @@ -40,27 +10,80 @@ let config = { default: false } }, - methods: { - setVerticalFreeze(freeze){ - if (freeze) { - this.krpanoObj.addEventListener("touchstart", touchstart, true); - this.krpanoObj.addEventListener("touchmove", touchmove, true); - this.log("vertical freeze"); - } else { - this.krpanoObj.removeEventListener("touchstart", touchstart, true); - this.krpanoObj.removeEventListener("touchmove", touchmove, true); - this.log("vertical release"); - } + data(){ + return { + eventDelegate: undefined } }, + methods: {}, watch: { freezeVertical(val){ - this.setVerticalFreeze(val) + if (this.eventDelegate) { + if (val) { + this.eventDelegate.style.display = "block"; + let hlookat = this.krpanoObj.get("view.hlookat"); + this.krpanoObj.call(`lookat(${hlookat},0)`); + } else { + this.eventDelegate.style.display = "none"; + } + } } }, created(){ - this.$on("panoCreated", () => { - this.setVerticalFreeze(this.freezeVertical); + this.$on("panoCreated", krpano => { + + let origin = krpano.firstChild; + + let eventDelegate = document.createElement("DIV"); + eventDelegate.className = "event-delegate"; + Object.assign(eventDelegate.style, { + display: this.freezeVertical ? "block" : "none", + width: "100%", + height: "100%", + position: "absolute", + "user-select": "none", + "z-index": 1 + }); + krpano.appendChild(eventDelegate); + this.eventDelegate = eventDelegate; + + let originTouch; + + eventDelegate.addEventListener("touchstart", function (e) { + originTouch = e; + Object.defineProperty(e, "cancelable", {value: true}); + let event = new TouchEvent("touchstart", e); + return origin.dispatchEvent(event); + }); + + eventDelegate.addEventListener("touchend", function (e) { + Object.defineProperty(e, "cancelable", {value: true}); + let event = new TouchEvent("touchend", e); + return origin.dispatchEvent(event); + }); + + eventDelegate.addEventListener("touchmove", function (e) { + + let currentTouch = e.changedTouches[0]; + let deltaX = originTouch.clientX - currentTouch.clientX; + let hlookat = krpano.get("view.hlookat") + deltaX; + let vlookat = krpano.get("view.vlookat"); + krpano.call(`lookat(${hlookat},${vlookat})`); + + originTouch = currentTouch; + + return true; + }); + + eventDelegate.addEventListener("mousedown", function (e) { + Object.defineProperty(e, "cancelable", {value: true}); + return origin.dispatchEvent(new MouseEvent("mousedown", e)); + }); + + eventDelegate.addEventListener("mousewheel", function (e) { + Object.defineProperty(e, "cancelable", {value: true}); + return origin.dispatchEvent(new MouseEvent("mousewheel", e)); + }); }); } };