Sternenlabor/WLED
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

Make palette editor mobile friendly.

Browse Source
This commit is contained in:
Istvan Meszaros
2023-12-26 11:09:20 +01:00
committed by Blaz Kristan
parent ecdc3be52e
commit 680cec5abb
2 changed files with 333 additions and 303 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>
<html>
<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="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
@@ -45,6 +46,7 @@
width: 7px;
top: 50%;
transform: translateY(-50%);
touch-action: none;
}
.color-picker-marker {
height: 7px;
@@ -94,9 +96,14 @@
line-height: 1;
}
.wrap {
width: 800px;
width: 100%;
margin: 0 auto;
}
@media (min-width: 800px) {
.wrap {
width: 800px;
}
}
.palette {
height: 20px;
}
@@ -136,6 +143,9 @@
.sendSpan, .editSpan{
cursor: pointer;
}
h1 {
font-size: 1.6rem;
}
</style>
</head>
<body>
@@ -349,24 +359,31 @@
var gradientLength = maxX - minX + 1;
elmnt.onmousedown = dragMouseDown;
elmnt.ontouchstart = dragMouseDown;
function dragMouseDown(e) {
removeTrashcan(event)
e = e || window.event;
e.preventDefault();
var isTouch = e.type.startsWith('touch');
if (!isTouch) e.preventDefault();
// get the mouse cursor position at startup:
mousePos = e.clientX;
mousePos = isTouch ? e.touches[0].clientX : e.clientX;
d.onmouseup = closeDragElement;
d.ontouchcancel = closeDragElement;
d.ontouchend = closeDragElement;
// call a function whenever the cursor moves:
d.onmousemove = elementDrag;
d.ontouchmove = elementDrag;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
var isTouch = e.type.startsWith('touch');
if (!isTouch) e.preventDefault();
// calculate the new cursor position:
posNew = mousePos - e.clientX;
mousePos = e.clientX;
var clientX = isTouch ? e.touches[0].clientX : e.clientX;
posNew = mousePos - clientX;
mousePos = clientX;
mousePosInGradient = mousePos - (minX + 1)
truePos = Math.round((mousePosInGradient/gradientLength)*256);
@@ -393,7 +410,10 @@
function closeDragElement() {
/* stop moving when mouse button is released:*/
d.onmouseup = null;
d.ontouchcancel = null;
d.ontouchend = null;
d.onmousemove = null;
d.ontouchmove = null;
}
}