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 {
width:100%;
height: auto;
margin-top: 30px;
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-slid-remote").css("width", vol + "%");
$(".volume-handle-remote").css("left", "calc(" + vol + "% - 1px)");
document.getElementById("volume-control-remote").onmousedown = function(e) {
e.preventDefault();
Playercontrols.dragMouseDown(e);
}
document.getElementById("volume-control-remote").touchstart = function(e) {
e.preventDefault();
Playercontrols.dragMouseDown(e);
}
document.getElementById("volume-control-remote").touchmove = function(e) {
e.preventDefault();
Playercontrols.dragMouseDown(e);
}
document.getElementById("volume-control-remote").onclick = function(e) {
Playercontrols.elementDrag(e);
Playercontrols.closeDragElement();
}
document.getElementById("volume-control-remote").addEventListener("touchstart", function(e) {
console.log("start");
e.preventDefault();
Playercontrols.dragMouseDown(e);
}, false);
document.getElementById("volume-control-remote").addEventListener("touchmove", function(e) {
console.log("move");
e.preventDefault();
Playercontrols.elementDrag(e);
}, false);
}
};

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

@@ -57,14 +57,17 @@ var Playercontrols = {
document.getElementById("volume").onmousedown = function(e) {
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();
Playercontrols.dragMouseDown(e, "player");
}
document.getElementById("volume").onclick = function(e) {
Playercontrols.elementDrag(e, "player");
Playercontrols.closeDragElement("player");
}
}, false);
},
dragMouseDown: function(e, element) {
@@ -73,16 +76,17 @@ var Playercontrols = {
document.onmouseup = function() {
Playercontrols.closeDragElement(element);
}
document.touchend = function() {
document.getElementById("volume").addEventListener("touchend", function() {
Playercontrols.closeDragElement(element);
}
}, false);
// call a function whenever the cursor moves:
document.onmousemove = function(e) {
Playercontrols.elementDrag(e, element);
}
document.touchmove = function(e) {
document.getElementById("volume").addEventListener("touchmove", function(e) {
e.preventDefault();
Playercontrols.elementDrag(e, element);
}
}, false);
},
elementDrag: function(e, element) {
@@ -102,7 +106,14 @@ var Playercontrols = {
var pos3 = e.clientX;
var pos4 = e.clientY;
if(pos3 == undefined) {
pos3 = e.touches[0].clientX;
}
if(pos4 == undefined) {
pos4 = e.touches[0].clientY;
}
var volume = 0;
console.log(slider_type, element, slider_type != "vertical" || element != "player");
if(slider_type != "vertical" || element != "player") {
if(elmnt.className.indexOf("ui-state-active") == -1) {
elmnt.className += " ui-state-active";
@@ -118,7 +129,7 @@ var Playercontrols = {
elmnt.style.left = cmp_elmnt.offsetWidth + "px";
volume = 1;
}
console.log(volume);
slid_elmnt.style.width = volume * 100 + "%";
if(element == "player") Playercontrols.setVolume(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.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() {

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

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