mirrors/Remotely
3
0
Fork 0
mirror of https://github.com/immense/Remotely.git synced 2025-10-26 11:27:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

Remote control menu button refinements.

Browse Source
This commit is contained in:
Jared Goodwin 2019-06-26 16:33:50 -07:00
parent 52c1613491
commit aaab92e4d1
4 changed files with 59 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
Server/wwwroot/css/remote-control.css
View File

@ -63,6 +63,7 @@ button[disabled] {
position: absolute;
top: 50%;
left: 0;
color: gray;
transform: translateY(-50%);
background-color: rgb(50,50,50);
font-size: 1.5em;
@ -73,7 +74,9 @@ button[disabled] {
z-index: 3;
transition: .5s ease left;
}
#menuButton:hover {
color: white;
}
#menuButton:focus {
outline: none;
}
@ -107,9 +110,7 @@ button[disabled] {
transition: .5s ease all;
}
#menuButton:hover {
color: white;
}
.horizontal-button-bar {
position: fixed;

39
Server/wwwroot/scripts/RemoteControl/UI.js
View File

@ -38,28 +38,24 @@ var startPinchPoint1;
var startPinchPoint2;
var isMenuButtonDragging;
var startMenuDraggingY;
var ignoreNextMenuClick;
export function ApplyInputHandlers(sockets) {
MenuButton.addEventListener("click", (ev) => {
if (isMenuButtonDragging && Math.abs(ev.clientY - startMenuDraggingY) > 5) {
ev.preventDefault();
isMenuButtonDragging = false;
if (ignoreNextMenuClick) {
ignoreNextMenuClick = false;
return;
}
isMenuButtonDragging = false;
MenuFrame.classList.toggle("open");
MenuButton.classList.toggle("open");
closeAllHorizontalBars(null);
});
MenuButton.addEventListener("mousemove", (ev) => {
if (ev.buttons == 1) {
if (!isMenuButtonDragging) {
startMenuDraggingY = ev.clientY;
}
isMenuButtonDragging = true;
if (Math.abs(ev.clientY - startMenuDraggingY) > 5) {
MenuButton.style.top = `${ev.clientY}px`;
}
}
MenuButton.addEventListener("mousedown", (ev) => {
isMenuButtonDragging = true;
ignoreNextMenuClick = false;
startMenuDraggingY = ev.clientY;
window.addEventListener("mousemove", moveMenuButton);
window.addEventListener("mouseup", removeMouseButtonWindowListeners);
window.addEventListener("mouseleave", removeMouseButtonWindowListeners);
});
MenuButton.addEventListener("touchmove", (ev) => {
MenuButton.style.top = `${ev.touches[0].clientY}px`;
@ -375,4 +371,19 @@ function closeAllHorizontalBars(exceptBarId) {
}
});
}
function moveMenuButton(ev) {
if (Math.abs(ev.clientY - startMenuDraggingY) > 5) {
if (ev.clientY < 0 || ev.clientY > window.innerHeight) {
return;
}
ignoreNextMenuClick = true;
MenuButton.style.top = `${ev.clientY}px`;
}
}
function removeMouseButtonWindowListeners(ev) {
window.removeEventListener("mousemove", moveMenuButton);
window.removeEventListener("mouseup", removeMouseButtonWindowListeners);
window.removeEventListener("mouseleave", removeMouseButtonWindowListeners);
isMenuButtonDragging = false;
}
//# sourceMappingURL=UI.js.map

2
Server/wwwroot/scripts/RemoteControl/UI.js.map
View File

File diff suppressed because one or more lines are too long

44
Server/wwwroot/scripts/RemoteControl/UI.ts
View File

@ -43,34 +43,29 @@ var startPinchPoint1: Point;
var startPinchPoint2: Point;
var isMenuButtonDragging: boolean;
var startMenuDraggingY: number;
var ignoreNextMenuClick: boolean;
export function ApplyInputHandlers(sockets: RCBrowserSockets) {
MenuButton.addEventListener("click", (ev) => {
if (isMenuButtonDragging && Math.abs(ev.clientY - startMenuDraggingY) > 5) {
ev.preventDefault();
isMenuButtonDragging = false;
if (ignoreNextMenuClick) {
ignoreNextMenuClick = false;
return;
}
isMenuButtonDragging = false;
MenuFrame.classList.toggle("open");
MenuButton.classList.toggle("open");
closeAllHorizontalBars(null);
});
MenuButton.addEventListener("mousemove", (ev) => {
if (ev.buttons == 1) {
if (!isMenuButtonDragging) {
startMenuDraggingY = ev.clientY;
}
isMenuButtonDragging = true;
if (Math.abs(ev.clientY - startMenuDraggingY) > 5) {
MenuButton.style.top = `${ev.clientY}px`;
}
}
MenuButton.addEventListener("mousedown", (ev) => {
isMenuButtonDragging = true;
ignoreNextMenuClick = false;
startMenuDraggingY = ev.clientY;
window.addEventListener("mousemove", moveMenuButton);
window.addEventListener("mouseup", removeMouseButtonWindowListeners);
window.addEventListener("mouseleave", removeMouseButtonWindowListeners);
});
MenuButton.addEventListener("touchmove", (ev) => {
MenuButton.style.top = `${ev.touches[0].clientY}px`;
});
@ -411,4 +406,21 @@ function closeAllHorizontalBars(exceptBarId: string) {
x.classList.remove('open');
}
})
}
function moveMenuButton(ev: MouseEvent) {
if (Math.abs(ev.clientY - startMenuDraggingY) > 5) {
if (ev.clientY < 0 || ev.clientY > window.innerHeight) {
return;
}
ignoreNextMenuClick = true;
MenuButton.style.top = `${ev.clientY}px`;
}
}
function removeMouseButtonWindowListeners(ev: MouseEvent) {
window.removeEventListener("mousemove", moveMenuButton);
window.removeEventListener("mouseup", removeMouseButtonWindowListeners);
window.removeEventListener("mouseleave", removeMouseButtonWindowListeners);
isMenuButtonDragging = false;
}