Jan/WLED_MM_Infinity
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #3617 from imeszaros/cpal-mobile

Browse Source 
Make palette editor more mobile friendly
This commit is contained in:
Blaž Kristan
2023-12-30 18:43:49 +01:00
committed by Frank
parent 01c187f8aa
commit 620075fc02
1 changed files with 26 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
wled00/data/cpal/cpal.htm
View File

@@ -1,6 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"> <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0"> <meta http-equiv="Expires" content="0">
@@ -45,6 +46,7 @@
width: 7px; width: 7px;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
touch-action: none;
} }
.color-picker-marker { .color-picker-marker {
height: 7px; height: 7px;
@@ -94,9 +96,14 @@
line-height: 1; line-height: 1;
} }
.wrap { .wrap {
width: 800px; width: 100%;
margin: 0 auto; margin: 0 auto;
} }
@media (min-width: 800px) {
.wrap {
width: 800px;
}
}
.palette { .palette {
height: 20px; height: 20px;
} }
@@ -136,6 +143,9 @@
.sendSpan, .editSpan{ .sendSpan, .editSpan{
cursor: pointer; cursor: pointer;
} }
h1 {
font-size: 1.6rem;
}
</style> </style>
</head> </head>
<body> <body>
@@ -349,24 +359,31 @@
var gradientLength = maxX - minX + 1; var gradientLength = maxX - minX + 1;
elmnt.onmousedown = dragMouseDown; elmnt.onmousedown = dragMouseDown;
elmnt.ontouchstart = dragMouseDown;
function dragMouseDown(e) { function dragMouseDown(e) {
removeTrashcan(event) removeTrashcan(event)
e = e || window.event; e = e || window.event;
e.preventDefault(); var isTouch = e.type.startsWith('touch');
if (!isTouch) e.preventDefault();
// get the mouse cursor position at startup: // get the mouse cursor position at startup:
mousePos = e.clientX; mousePos = isTouch ? e.touches[0].clientX : e.clientX;
d.onmouseup = closeDragElement; d.onmouseup = closeDragElement;
d.ontouchcancel = closeDragElement;
d.ontouchend = closeDragElement;
// call a function whenever the cursor moves: // call a function whenever the cursor moves:
d.onmousemove = elementDrag; d.onmousemove = elementDrag;
d.ontouchmove = elementDrag;
} }
function elementDrag(e) { function elementDrag(e) {
e = e || window.event; e = e || window.event;
e.preventDefault(); var isTouch = e.type.startsWith('touch');
if (!isTouch) e.preventDefault();
// calculate the new cursor position: // calculate the new cursor position:
posNew = mousePos - e.clientX; var clientX = isTouch ? e.touches[0].clientX : e.clientX;
mousePos = e.clientX; posNew = mousePos - clientX;
mousePos = clientX;
mousePosInGradient = mousePos - (minX + 1) mousePosInGradient = mousePos - (minX + 1)
truePos = Math.round((mousePosInGradient/gradientLength)*256); truePos = Math.round((mousePosInGradient/gradientLength)*256);
@@ -393,7 +410,10 @@
function closeDragElement() { function closeDragElement() {
/* stop moving when mouse button is released:*/ /* stop moving when mouse button is released:*/
d.onmouseup = null; d.onmouseup = null;
d.ontouchcancel = null;
d.ontouchend = null;
d.onmousemove = null; d.onmousemove = null;
d.ontouchmove = null;
} }
} }