diff --git a/index.html b/index.html
index 10d0400..cc9e8bd 100644
--- a/index.html
+++ b/index.html
@@ -14,7 +14,7 @@
- Window Engine 3.2.1
+ Window Engine 4.0
diff --git a/window-engine/window-engine.css b/window-engine/window-engine.css
index 5334c6b..65093d5 100644
--- a/window-engine/window-engine.css
+++ b/window-engine/window-engine.css
@@ -22,6 +22,7 @@
height: 40px;
justify-content: space-between !important;
display: flex !important;
+ touch-action: none;
}
.mydivheader p {
diff --git a/window-engine/window-engine.js b/window-engine/window-engine.js
index 001e816..96df98a 100644
--- a/window-engine/window-engine.js
+++ b/window-engine/window-engine.js
@@ -1,5 +1,10 @@
/* Window Engine - MIT License - Copyright (c) 2019 Gauthier Staehler */
+var metaTag = document.createElement('meta');
+metaTag.name = "viewport"
+metaTag.content = "user-scalable=0"
+document.getElementsByTagName('head')[0].appendChild(metaTag);
+
const lastWindow = document.getElementsByClassName("windowGroup")[0].lastElementChild.id.substring(5);
for (i = 1; i <= lastWindow; i++) {
@@ -32,19 +37,37 @@ function dragElement(elmnt) {
pos2 = 0,
pos3 = 0,
pos4 = 0;
+ if ("ontouchstart" in document.documentElement) {
+ var pos1touch = 0,
+ pos2touch = 0,
+ pos3touch = 0,
+ pos4touch = 0;
+ }
if (document.getElementById(elmnt.id + "header")) {
document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
+ document.getElementById(elmnt.id + "header").ontouchstart = dragMouseDown;
} else {
elmnt.onmousedown = dragMouseDown;
+ elmnt.ontouchstart = dragMouseDown;
}
function dragMouseDown(e) {
e = e || window.event;
- e.preventDefault();
+ if (!"ontouchstart" in document.documentElement) {
+ e.preventDefault();
+ }
pos3 = e.clientX;
pos4 = e.clientY;
+ if ("ontouchstart" in document.documentElement) {
+ try {
+ pos3touch = e.touches[0].clientX;
+ pos4touch = e.touches[0].clientY;
+ } catch {}
+ }
document.onmouseup = closeDragElement;
document.onmousemove = elementDrag;
+ document.ontouchend = closeDragElement;
+ document.ontouchmove = elementDrag;
var active = document.getElementsByClassName("mydiv");
for (var i = active.length - 1; i > -1; i--) {
active[i].classList.remove("mydivActive");
@@ -55,17 +78,28 @@ function dragElement(elmnt) {
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
- pos1 = pos3 - e.clientX;
- pos2 = pos4 - e.clientY;
- pos3 = e.clientX;
- pos4 = e.clientY;
- elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
- elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
+ if ("ontouchstart" in document.documentElement) {
+ pos1touch = pos3touch - e.touches[0].clientX;
+ pos2touch = pos4touch - e.touches[0].clientY;
+ pos3touch = e.touches[0].clientX;
+ pos4touch = e.touches[0].clientY;
+ elmnt.style.top = (elmnt.offsetTop - pos2touch) + "px";
+ elmnt.style.left = (elmnt.offsetLeft - pos1touch) + "px";
+ } else {
+ pos1 = pos3 - e.clientX;
+ pos2 = pos4 - e.clientY;
+ pos3 = e.clientX;
+ pos4 = e.clientY;
+ elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
+ elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
+ }
}
function closeDragElement() {
document.onmouseup = null;
document.onmousemove = null;
+ document.ontouchend = null;
+ document.ontouchmove = null;
}
}
diff --git a/window-engine/window-engine.min.js b/window-engine/window-engine.min.js
index 5ef6ae9..bb079ba 100644
--- a/window-engine/window-engine.min.js
+++ b/window-engine/window-engine.min.js
@@ -1,2 +1,2 @@
/* Window Engine - MIT License - Copyright (c) 2019 Gauthier Staehler */
-const lastWindow=document.getElementsByClassName("windowGroup")[0].lastElementChild.id.substring(5);for(i=1;i<=lastWindow;i++)createWindow(i);function createWindow(e){var t;document.getElementById("closeButton"+e).onclick=function(){fadeOut(document.getElementById("mydiv"+e),50),t=!0},document.getElementById("button"+e).onclick=function(){"initial"===document.getElementById("mydiv"+e).style.display&&(t=!1),t&&(document.getElementById("mydiv"+e).style="position: absolute;",document.getElementById("mydiv"+e).style="top: 80px;",fadeIn(document.getElementById("mydiv"+e),50)),t=!1},dragElement(document.getElementById("mydiv"+e)),t=!0}function dragElement(e){var t=0,n=0,i=0,o=0;function l(t){(t=t||window.event).preventDefault(),i=t.clientX,o=t.clientY,document.onmouseup=m,document.onmousemove=s;for(var n=document.getElementsByClassName("mydiv"),l=n.length-1;l>-1;l--)n[l].classList.remove("mydivActive");document.getElementById(e.id).className+=" mydivActive"}function s(l){(l=l||window.event).preventDefault(),t=i-l.clientX,n=o-l.clientY,i=l.clientX,o=l.clientY,e.style.top=e.offsetTop-n+"px",e.style.left=e.offsetLeft-t+"px"}function m(){document.onmouseup=null,document.onmousemove=null}document.getElementById(e.id+"header")?document.getElementById(e.id+"header").onmousedown=l:e.onmousedown=l}function fadeIn(e,t){if(e.style.opacity=0,e.style.display="initial",e.classList.contains("fade"))var n=0,o=setInterval(function(){(n+=10/t)>=1&&(clearInterval(o),n=.9),e.style.opacity=n;for(var i=document.getElementsByClassName("mydiv"),l=i.length-1;l>-1;l--)i[l].classList.remove("mydivActive");e.className+=" mydivActive"},50);else{e.style.opacity=.9;var l=document.getElementsByClassName("mydiv");for(i=l.length-1;i>-1;i--)l[i].classList.remove("mydivActive");e.className+=" mydivActive"}}function fadeOut(e,t){if(e.classList.contains("fade"))var n=1,o=setInterval(function(){(n-=10/t)<=0&&(clearInterval(o),n=0,e.style.display="none"),e.style.opacity=n},50);else{e.style.opacity=0,e.style.display="none";var l=document.getElementsByClassName("mydiv");for(i=l.length-1;i>-1;i--)l[i].classList.remove("mydivActive");e.className+=" mydivActive"}}
\ No newline at end of file
+var metaTag=document.createElement("meta");metaTag.name="viewport",metaTag.content="user-scalable=0",document.getElementsByTagName("head")[0].appendChild(metaTag);const lastWindow=document.getElementsByClassName("windowGroup")[0].lastElementChild.id.substring(5);for(i=1;i<=lastWindow;i++)createWindow(i);function createWindow(e){var t;document.getElementById("closeButton"+e).onclick=function(){fadeOut(document.getElementById("mydiv"+e),50),t=!0},document.getElementById("button"+e).onclick=function(){"initial"===document.getElementById("mydiv"+e).style.display&&(t=!1),t&&(document.getElementById("mydiv"+e).style="position: absolute;",document.getElementById("mydiv"+e).style="top: 80px;",fadeIn(document.getElementById("mydiv"+e),50)),t=!1},dragElement(document.getElementById("mydiv"+e)),t=!0}function dragElement(e){var t=0,n=0,o=0,c=0;if("ontouchstart"in document.documentElement)var i=0,l=0,m=0,d=0;function s(t){if(t=t||window.event,!1 in document.documentElement&&t.preventDefault(),o=t.clientX,c=t.clientY,"ontouchstart"in document.documentElement)try{m=t.touches[0].clientX,d=t.touches[0].clientY}catch{}document.onmouseup=u,document.onmousemove=a,document.ontouchend=u,document.ontouchmove=a;for(var n=document.getElementsByClassName("mydiv"),i=n.length-1;i>-1;i--)n[i].classList.remove("mydivActive");document.getElementById(e.id).className+=" mydivActive"}function a(s){(s=s||window.event).preventDefault(),"ontouchstart"in document.documentElement?(i=m-s.touches[0].clientX,l=d-s.touches[0].clientY,m=s.touches[0].clientX,d=s.touches[0].clientY,e.style.top=e.offsetTop-l+"px",e.style.left=e.offsetLeft-i+"px"):(t=o-s.clientX,n=c-s.clientY,o=s.clientX,c=s.clientY,e.style.top=e.offsetTop-n+"px",e.style.left=e.offsetLeft-t+"px")}function u(){document.onmouseup=null,document.onmousemove=null,document.ontouchend=null,document.ontouchmove=null}document.getElementById(e.id+"header")?(document.getElementById(e.id+"header").onmousedown=s,document.getElementById(e.id+"header").ontouchstart=s):(e.onmousedown=s,e.ontouchstart=s)}function fadeIn(e,t){if(e.style.opacity=0,e.style.display="initial",e.classList.contains("fade"))var n=0,o=setInterval(function(){(n+=10/t)>=1&&(clearInterval(o),n=.9),e.style.opacity=n;for(var c=document.getElementsByClassName("mydiv"),i=c.length-1;i>-1;i--)c[i].classList.remove("mydivActive");e.className+=" mydivActive"},50);else{e.style.opacity=.9;var c=document.getElementsByClassName("mydiv");for(i=c.length-1;i>-1;i--)c[i].classList.remove("mydivActive");e.className+=" mydivActive"}}function fadeOut(e,t){if(e.classList.contains("fade"))var n=1,o=setInterval(function(){(n-=10/t)<=0&&(clearInterval(o),n=0,e.style.display="none"),e.style.opacity=n},50);else{e.style.opacity=0,e.style.display="none";var c=document.getElementsByClassName("mydiv");for(i=c.length-1;i>-1;i--)c[i].classList.remove("mydivActive");e.className+=" mydivActive"}}
\ No newline at end of file