From 7555de10bfc6f6bb426c91bff9c9536c50348d00 Mon Sep 17 00:00:00 2001 From: "A.Olokhtonov" Date: Thu, 11 Jan 2024 02:14:03 +0300 Subject: [PATCH] Long touch to open color picker details --- client/default.css | 1 - client/index.html | 32 ++++++++++++++++---------------- client/tools.js | 23 +++++++++++++++++++++++ 3 files changed, 39 insertions(+), 17 deletions(-) diff --git a/client/default.css b/client/default.css index d79886d..8d3a41a 100644 --- a/client/default.css +++ b/client/default.css @@ -164,7 +164,6 @@ canvas.mousemoving { transition: var(--transform-amimate); transform: translateX(calc(-100% + 2 * var(--gap) + 24px)); cursor: pointer; - overflow: hidden; } .pallete .color-major.extended { diff --git a/client/index.html b/client/index.html index 9e3c3b5..a6f646f 100644 --- a/client/index.html +++ b/client/index.html @@ -7,22 +7,22 @@ - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + +
diff --git a/client/tools.js b/client/tools.js index ddaf2ff..d3e94ae 100644 --- a/client/tools.js +++ b/client/tools.js @@ -115,6 +115,29 @@ function init_tools(state) { tools.forEach((item) => { item.addEventListener('click', () => switch_tool(state, item)); }); color_groups.forEach((item) => { item.setAttribute('data-last-color', item.lastElementChild.getAttribute('data-color')); + + let longtouch_timer = null; + + item.addEventListener('touchstart', (e) => { + longtouch_timer = setTimeout(() => { + extend_major_color(state, item); + }, 500); + }); + + item.addEventListener('touchmove', (e) => { + if (longtouch_timer) { + clearTimeout(longtouch_timer); + } + longtouch_timer = null; + }); + + item.addEventListener('touchend', (e) => { + if (longtouch_timer) { + clearTimeout(longtouch_timer); + } + longtouch_timer = null; + }); + item.addEventListener('click', (e) => { if (e.ctrlKey) { extend_major_color(state, item);