KevinMidboe/zoff
1
0
Fork 0
mirror of https://github.com/KevinMidboe/zoff.git synced 2025-10-29 18:00:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixed issue with slider not working properly on mobile

Browse Source
This commit is contained in:
Kasper Rynning-Tønnesen
2018-04-24 10:17:29 +02:00
parent 6dabe2963e
commit af384de79e
4 changed files with 73 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
server/public/assets/css/style.css
View File

@@ -2484,6 +2484,7 @@ nav ul li:hover, nav ul li.active {
#volume.rc, #volume-control-remote { #volume.rc, #volume-control-remote {
width:100%; width:100%;
height: auto;
margin-top: 30px; margin-top: 30px;
background: darkgrey; background: darkgrey;
} }

29
server/public/assets/js/mobileremote.js
View File

@@ -44,22 +44,19 @@ var Mobile_remote = {
$("#volume-control-remote").append("<div class='volume-handle-remote'></div>"); $("#volume-control-remote").append("<div class='volume-handle-remote'></div>");
$(".volume-slid-remote").css("width", vol + "%"); $(".volume-slid-remote").css("width", vol + "%");
$(".volume-handle-remote").css("left", "calc(" + vol + "% - 1px)"); $(".volume-handle-remote").css("left", "calc(" + vol + "% - 1px)");
document.getElementById("volume-control-remote").onmousedown = function(e) { document.getElementById("volume-control-remote").addEventListener("touchstart", function(e) {
e.preventDefault(); console.log("start");
Playercontrols.dragMouseDown(e); e.preventDefault();
} Playercontrols.dragMouseDown(e);
document.getElementById("volume-control-remote").touchstart = function(e) { }, false);
e.preventDefault();
Playercontrols.dragMouseDown(e); document.getElementById("volume-control-remote").addEventListener("touchmove", function(e) {
} console.log("move");
document.getElementById("volume-control-remote").touchmove = function(e) { e.preventDefault();
e.preventDefault(); Playercontrols.elementDrag(e);
Playercontrols.dragMouseDown(e); }, false);
}
document.getElementById("volume-control-remote").onclick = function(e) {
Playercontrols.elementDrag(e);
Playercontrols.closeDragElement();
}
} }
}; };

51
server/public/assets/js/playercontrols.js
View File

@@ -57,14 +57,17 @@ var Playercontrols = {
document.getElementById("volume").onmousedown = function(e) { document.getElementById("volume").onmousedown = function(e) {
Playercontrols.dragMouseDown(e, "player"); Playercontrols.dragMouseDown(e, "player");
} }
document.getElementById("volume").touchstart = function(e) { if(!Helper.mobilecheck()) {
document.getElementById("volume").onclick = function(e) {
Playercontrols.elementDrag(e, "player");
Playercontrols.closeDragElement("player");
}
}
document.getElementById("volume").addEventListener("touchstart", function(e) {
e.preventDefault(); e.preventDefault();
Playercontrols.dragMouseDown(e, "player"); Playercontrols.dragMouseDown(e, "player");
} }, false);
document.getElementById("volume").onclick = function(e) {
Playercontrols.elementDrag(e, "player");
Playercontrols.closeDragElement("player");
}
}, },
dragMouseDown: function(e, element) { dragMouseDown: function(e, element) {
@@ -73,16 +76,17 @@ var Playercontrols = {
document.onmouseup = function() { document.onmouseup = function() {
Playercontrols.closeDragElement(element); Playercontrols.closeDragElement(element);
} }
document.touchend = function() { document.getElementById("volume").addEventListener("touchend", function() {
Playercontrols.closeDragElement(element); Playercontrols.closeDragElement(element);
} }, false);
// call a function whenever the cursor moves: // call a function whenever the cursor moves:
document.onmousemove = function(e) { document.onmousemove = function(e) {
Playercontrols.elementDrag(e, element); Playercontrols.elementDrag(e, element);
} }
document.touchmove = function(e) { document.getElementById("volume").addEventListener("touchmove", function(e) {
e.preventDefault();
Playercontrols.elementDrag(e, element); Playercontrols.elementDrag(e, element);
} }, false);
}, },
elementDrag: function(e, element) { elementDrag: function(e, element) {
@@ -102,7 +106,14 @@ var Playercontrols = {
var pos3 = e.clientX; var pos3 = e.clientX;
var pos4 = e.clientY; var pos4 = e.clientY;
if(pos3 == undefined) {
pos3 = e.touches[0].clientX;
}
if(pos4 == undefined) {
pos4 = e.touches[0].clientY;
}
var volume = 0; var volume = 0;
console.log(slider_type, element, slider_type != "vertical" || element != "player");
if(slider_type != "vertical" || element != "player") { if(slider_type != "vertical" || element != "player") {
if(elmnt.className.indexOf("ui-state-active") == -1) { if(elmnt.className.indexOf("ui-state-active") == -1) {
elmnt.className += " ui-state-active"; elmnt.className += " ui-state-active";
@@ -118,7 +129,7 @@ var Playercontrols = {
elmnt.style.left = cmp_elmnt.offsetWidth + "px"; elmnt.style.left = cmp_elmnt.offsetWidth + "px";
volume = 1; volume = 1;
} }
console.log(volume);
slid_elmnt.style.width = volume * 100 + "%"; slid_elmnt.style.width = volume * 100 + "%";
if(element == "player") Playercontrols.setVolume(volume * 100); if(element == "player") Playercontrols.setVolume(volume * 100);
else socket.emit("id", {id: Mobile_remote.id, type: "volume", value: volume * 100}); else socket.emit("id", {id: Mobile_remote.id, type: "volume", value: volume * 100});
@@ -156,7 +167,23 @@ var Playercontrols = {
} }
document.onmouseup = null; document.onmouseup = null;
document.onmousemove = null; document.onmousemove = null;
if(element == "player") {
document.getElementById("volume").removeEventListener("touchmove", function(e) {
e.preventDefault();
Playercontrols.elementDrag(e, element);
}, false);
document.getElementById("volume").removeEventListener("touchend", function() {
Playercontrols.closeDragElement(element);
}, false);
} else {
document.getElementById("volume-control-remote").removeEventListener("touchmove", function(e) {
e.preventDefault();
Playercontrols.elementDrag(e);
}, false);
document.getElementById("volume-control-remote").removeEventListener("touchend", function() {
Playercontrols.closeDragElement();
}, false);
}
}, },
fullscreen: function() { fullscreen: function() {

24
server/public/assets/js/remotecontroller.js
View File

@@ -90,10 +90,10 @@ var Remotecontroller = {
//$("#volume").slider(slider_values); //$("#volume").slider(slider_values);
//document.getElementsByClassName("volume-slid")[0].onmousedown = Remotecontroller.dragMouseDown; //document.getElementsByClassName("volume-slid")[0].onmousedown = Remotecontroller.dragMouseDown;
document.getElementById("volume").onmousedown = Remotecontroller.dragMouseDown; document.getElementById("volume").onmousedown = Remotecontroller.dragMouseDown;
document.getElementById("volume").touchstart = function(e) { document.getElementById("volume").addEventListener("touchstart", function(e) {
e.preventDefault(); e.preventDefault();
Remotecontroller.dragMouseDown(e); Remotecontroller.dragMouseDown(e);
} }, false);
document.getElementById("volume").onclick = function(e) { document.getElementById("volume").onclick = function(e) {
Remotecontroller.elementDrag(e); Remotecontroller.elementDrag(e);
Remotecontroller.closeDragElement(); Remotecontroller.closeDragElement();
@@ -110,10 +110,15 @@ var Remotecontroller = {
e = e || window.event; e = e || window.event;
// get the mouse cursor position at startup: // get the mouse cursor position at startup:
document.onmouseup = Remotecontroller.closeDragElement; document.onmouseup = Remotecontroller.closeDragElement;
document.touchend = Remotecontroller.closeDragElement;
// call a function whenever the cursor moves: // call a function whenever the cursor moves:
document.onmousemove = Remotecontroller.elementDrag; document.onmousemove = Remotecontroller.elementDrag;
document.touchmove = Remotecontroller.elementDrag; document.getElementById("volume").addEventListener("touchend", function() {
Remotecontroller.closeDragElement();
}, false);
document.getElementById("volume").addEventListener("touchmove", function(e) {
e.preventDefault();
Remotecontroller.elementDrag(e);
}, false);
}, },
elementDrag: function(e) { elementDrag: function(e) {
@@ -121,6 +126,9 @@ var Remotecontroller = {
e = e || window.event; e = e || window.event;
var pos3 = e.clientX; var pos3 = e.clientX;
if(pos3 == undefined) {
pos3 = e.touches[0].clientX;
}
if(elmnt.className.indexOf("ui-state-active") == -1) { if(elmnt.className.indexOf("ui-state-active") == -1) {
elmnt.className += " ui-state-active"; elmnt.className += " ui-state-active";
@@ -154,5 +162,13 @@ var Remotecontroller = {
document.onmouseup = null; document.onmouseup = null;
document.onmousemove = null; document.onmousemove = null;
document.getElementById("volume").removeEventListener("touchmove", function(e) {
e.preventDefault();
Playercontrols.elementDrag(e);
});
document.getElementById("volume").removeEventListener("touchend", function() {
Playercontrols.closeDragElement();
}, false);
}, },
}; };