Sudokupad: Cycle Color Palette with Dot Key

sudokupad-color-palette-cycle-keyboard.js · 4.6 KiB · JavaScript Raw

// ==UserScript==
// @name        Cycle through color palettes with dot key
// @namespace   Violentmonkey Scripts
// @icon        data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAGoUlEQVR42rWXS2xdVxWGv7X3edx7bceJSRo7iRPioAQaoko8g6gYMMgAqQhVqpAqZqWDigESpYiZ1SktQ4QoyrQIkBgwYYJQhFRCE0vIzctpHo4d53HtWz/ie+7jnLP3YnDuTa7taxtR2NLS0ZH23utfa/3rsWWSSfM2b/vXjvxyZIC9P/UqryjuuKIGEP43SwXxgp01on9MWH33/MKby5NMGgF4Y/RXXwhs+U+BiT6faRuvjv/HMmIJJSb36Uzumi//+vGPbshrR347Enu9VLIDJ1o+yUADkMJy+fQuUN38J3nJDIQtl9xpG/laEHn/VmwHTrR8PQMJu1pFBJ97nNcdFewEUAFjDCYA9dAxLGz5ehbbgRPqkrcCkFcz31Yg6N6oTslbGaWRMqWyxfudlGihaTMqVYy1tBpt0jWPjQUM3b1BoVNeDUQY9zh56m+vGCucfPMs+75xhG+eqHB4b4jXp4HZsBpJA68bEXqvxHHE7N1ZpqamWLsRcu/POeq7d4h4HCKMB71eFBHyZsapn5zl+A/O0PykydV1OHo0pryNr6Xk8b0uUsVay/r6OjdmrxINWcbPGVDlzh8cQaUbjuK46XWbzz3RSJkDL47TWm5ivLKe5HzwcR3VwjJVNojLfI84XK7kmePiP/5JM2lhMKRrysgZS7QHvNtIHLOZNRIaRApXKVAKhfurOTPVNsZ0kkP6C0AcR1y5coVqtUocR6hqoVBAArbwxfSlbm88FeJA+NdCi1riCmDaL92UKIpYWFjg+vXrxHG8MTR97u4PABB0w27psPri3QaZ0y25p524J0nC5cuXMcb0Bdi3OPVTn/oYrxZBEVFUldAKqw3H1Hyzm2UbLzKGqakp6vU61lq896gWZ40xhGG4OwBVITAZx/bcohw0SH1E6gowqkophNtLbWZr6dNQqCpxHDMzM8P8/DxhGOK9x1pLFEWEYUir1eLBgwc455AuuTor2FzRBMeXDv4du6dC9ckYj5Jj1JpjNLJBPBZrMqbmGxwYMgzGliAIqFYfMz09TalUemp9kiTUajUWF5dYXVumve4Y8S9uqZxBP7dkPqZkUsaHbnN0z21aeYXl1nM8TI6x1DzMSmMPF256vnMmQFWZnp5GjNBoNKjValSrVVZWVmi324gINjCEYdw3BMF2JFSEzMeIQGAyxgbmODQwS8tVWMlHuVc/zNzaKW59eJELf/uARrPOerJGnmeggrWGKIo65PfbkjDYsdGoIgoqQmZjJBAC5zjYvMP+R9dpfHSBcGCM504r8x+1yVcdeQo2ELCybcruDqCTvhIKEoDmoCs52XxKPpuRP3Zo6jDPr/DC4PcZ+94oa99dYGmuyb2bS9y5WqU6/4RGPcVaQxibp0XsPwtBWRCjuMc5bi4ln8twtRxtKRgQY5BTTRj25IlQuXmGtYmHjE0MM35yH2fPnWDxwRPuXlvk7tUlFh+u0VxPGdTdAEhRf9qXG7Cckj7KIesoDQSpCGQCB9qwN4VU0FJGuX2Iz1RfYHF0iqwZgYWD48McntjH2XOfY6VW59alT7h2VSDbqRcIaKq0P2ySP8yK+l0WJOr08kyg7OBwk24HB8EHKcMrJxla/ywaZYgKWZrTqKfkmWf/oUG+8u0J4rLFe90BQG8IInnGh25lNgrHGsVXN9Z4lZwDj79M2B5CjUOkiLsIZKmjmaR9CWm2JaFuCo2TwvKBvMf6HgzGY/OYA4++2oP42ZyxHQnNrjOeALnASFrEPt9mUlXB24xKfYx9tdN4m4LKrgPkBgAikHt5NnAA6gSNPXqkifpOn9RtxIOzbfYuPU95fawA0XOfT7eOdaZ3YLYG6onh2sdlhgYd1oC1ij2eYEsOaxQbbJai1BZfi7UGGxhGl75OpBWIHJX9wtxfHc0lMBFbmpF2neMVolD5y4VhEDg90YLRFogiK2HvVPtsxRlIi978UlFMHlFOv8jSwSlu/t5x6Rdb5sFi6xuH3puzYsc9eYcuBZA0E4YGPDb2zw715VHcL5tRFIMl9W2aNU9QFsR2DVA1BDh19wPQ90MT/7zt8wwItcOFcqy0UoFWsMvbJ+t14pb5TsQQDRU86PFeHpo4dC55P0iNeUdc45WSHdzwNPMKRkCCXbpJd+Jkh+HOb36aDYYtl9xJjXnHnF94fVl99lLm2zOxqYRGAtn8mvs00ssZI4HEphJmvj2jPnvp/MLry3aSSfNu/WdLZ4a/9buA0KvKGOjwLqb9l89zcxfy3zRk9YfvPfzx/Ukmzb8BY/WXJ90QXEwAAAAASUVORK5CYII=
// @version     1.0.1
//
// @match       https://sudokupad.app/*
// @grant       none
//
// @author      Marcus Jaschen
// @description Add a keyboard shortcut which allows cycling through the three color palettes.
// ==/UserScript==

(function () {
  "use strict";

const PALETTE_BUTTON_SELECTOR = 'button.palettebutton[data-control="selectpalette"]';

const getPaletteButton = () => {
    const button = document.querySelector(PALETTE_BUTTON_SELECTOR);
    if (!button) return null;
    const visible = button.offsetParent !== null || button.getClientRects().length > 0;
    return visible ? button : null;
  };

const isTypingTarget = target => {
    if (!(target instanceof Element)) return false;
    if (target.isContentEditable) return true;
    return /^(input|textarea|select)$/i.test(target.tagName);
  };

const isDialogOpen = () => document.querySelector('.dialog-overlay') !== null;
  const isDotKey = event => event.key === '.' || event.code === 'NumpadDecimal';

const cyclePalette = () => {
    // Check if SudokuPad's app framework is accessible
    const app = window.Framework?.app;
    const tool = app?.tools?.color;
    if (tool && typeof tool.nextPalette === "function") {
      tool.nextPalette();
      return;
    }

// Fallback: Dispatch instantaneous pointer events with release
    const button = getPaletteButton();
    if (!button) return;

const opts = { bubbles: true, cancelable: true, view: window, button: 0, pointerType: 'mouse' };
    button.dispatchEvent(new PointerEvent('pointerdown', opts));
    button.dispatchEvent(new MouseEvent('mousedown', opts));
    button.dispatchEvent(new PointerEvent('pointerup', opts));
    button.dispatchEvent(new MouseEvent('mouseup', opts));
    button.dispatchEvent(new MouseEvent('click', opts));
  };

const handleKeyDown = event => {
    if (!isDotKey(event)) return;
    if (event.repeat) return;
    if (event.ctrlKey || event.altKey || event.metaKey) return;
    if (isTypingTarget(event.target)) return;
    if (isDialogOpen()) return;

if (getPaletteButton() === null) return;

event.preventDefault();
    event.stopPropagation();
    cyclePalette();
  };

document.addEventListener('keydown', handleKeyDown, { capture: true });
})();

1	// ==UserScript==
2	// @name Cycle through color palettes with dot key
3	// @namespace Violentmonkey Scripts
4	// @icon data:image/png;base64,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
5	// @version 1.0.1
6	//
7	// @match https://sudokupad.app/*
8	// @grant none
9	//
10	// @author Marcus Jaschen
11	// @description Add a keyboard shortcut which allows cycling through the three color palettes.
12	// ==/UserScript==
13
14	(function () {
15	"use strict";
16
17	const PALETTE_BUTTON_SELECTOR = 'button.palettebutton[data-control="selectpalette"]';
18
19	const getPaletteButton = () => {
20	const button = document.querySelector(PALETTE_BUTTON_SELECTOR);
21	if (!button) return null;
22	const visible = button.offsetParent !== null \|\| button.getClientRects().length > 0;
23	return visible ? button : null;
24	};
25
26	const isTypingTarget = target => {
27	if (!(target instanceof Element)) return false;
28	if (target.isContentEditable) return true;
29	return /^(input\|textarea\|select)$/i.test(target.tagName);
30	};
31
32	const isDialogOpen = () => document.querySelector('.dialog-overlay') !== null;
33	const isDotKey = event => event.key === '.' \|\| event.code === 'NumpadDecimal';
34
35	const cyclePalette = () => {
36	// Check if SudokuPad's app framework is accessible
37	const app = window.Framework?.app;
38	const tool = app?.tools?.color;
39	if (tool && typeof tool.nextPalette === "function") {
40	tool.nextPalette();
41	return;
42	}
43
44	// Fallback: Dispatch instantaneous pointer events with release
45	const button = getPaletteButton();
46	if (!button) return;
47
48	const opts = { bubbles: true, cancelable: true, view: window, button: 0, pointerType: 'mouse' };
49	button.dispatchEvent(new PointerEvent('pointerdown', opts));
50	button.dispatchEvent(new MouseEvent('mousedown', opts));
51	button.dispatchEvent(new PointerEvent('pointerup', opts));
52	button.dispatchEvent(new MouseEvent('mouseup', opts));
53	button.dispatchEvent(new MouseEvent('click', opts));
54	};
55
56	const handleKeyDown = event => {
57	if (!isDotKey(event)) return;
58	if (event.repeat) return;
59	if (event.ctrlKey \|\| event.altKey \|\| event.metaKey) return;
60	if (isTypingTarget(event.target)) return;
61	if (isDialogOpen()) return;
62
63	if (getPaletteButton() === null) return;
64
65	event.preventDefault();
66	event.stopPropagation();
67	cyclePalette();
68	};
69
70	document.addEventListener('keydown', handleKeyDown, { capture: true });
71	})();
72