mirror of
https://github.com/OrcaSlicer/OrcaSlicer.git
synced 2026-09-12 19:47:43 +00:00
Add actions speed dial
This commit is contained in:
Andrew
395
resources/web/dialog/SpeedDial/speeddial.js
Normal file
395
resources/web/dialog/SpeedDial/speeddial.js
Normal file
@@ -0,0 +1,395 @@
|
||||
// Speed Dial launcher page. Static-safe module: no DOM access at load time so a
|
||||
// node vm can exercise the pure helpers (filterActions / parseId / nextSel).
|
||||
|
||||
// ---- state (populated by the C++ bridge via window.HandleStudio) ----
|
||||
var ACTIONS = []; // [{id,title,pkg,runnable,shortcut}], already frecency-sorted by C++
|
||||
var FAVS = []; // [id...]
|
||||
var query = "";
|
||||
var sel = { zone: "list", i: 0 }; // zone: 'list' | 'fav'
|
||||
var lastResizeHeight = 0;
|
||||
var matchIndex = {};
|
||||
|
||||
function FoldChar(ch) {
|
||||
return ch.normalize("NFD").replace(/\p{Diacritic}/gu, "");
|
||||
}
|
||||
|
||||
function NormChar(ch) {
|
||||
return FoldChar(ch).toLowerCase();
|
||||
}
|
||||
|
||||
// element handles, assigned in OnInit (kept null so load-time touches no DOM)
|
||||
var qEl = null, listEl = null, favEl = null, clearEl = null, eyeEl = null;
|
||||
|
||||
// ---- pure helpers (no DOM; unit-tested) -------------------------------------
|
||||
function fuzzyRanges(text, query) {
|
||||
var t = text || "";
|
||||
var q = query || "";
|
||||
if (!q)
|
||||
return null;
|
||||
var needle = Array.from(q).map(function (c) { return NormChar(c); }).join("");
|
||||
var ranges = [];
|
||||
var qi = 0;
|
||||
for (var i = 0; i < t.length && qi < needle.length; i++) {
|
||||
if (NormChar(t[i]) === needle[qi]) {
|
||||
if (ranges.length && ranges[ranges.length - 1][1] === i)
|
||||
ranges[ranges.length - 1][1] = i + 1;
|
||||
else
|
||||
ranges.push([i, i + 1]);
|
||||
qi++;
|
||||
}
|
||||
}
|
||||
return qi === needle.length ? ranges : null;
|
||||
}
|
||||
|
||||
function filterActions(actions, query) {
|
||||
var q = (query || "").trim();
|
||||
var list = actions || [];
|
||||
matchIndex = {};
|
||||
if (!q)
|
||||
return list.slice(0);
|
||||
|
||||
var out = [];
|
||||
for (var i = 0; i < list.length; i++) {
|
||||
var a = list[i];
|
||||
var titleMatch = fuzzyRanges(a.title, q);
|
||||
var pkgMatch = fuzzyRanges(a.pkg, q);
|
||||
if (!titleMatch && !pkgMatch)
|
||||
continue;
|
||||
matchIndex[a.id] = { title: titleMatch, pkg: pkgMatch, useTitle: !!titleMatch };
|
||||
out.push(a);
|
||||
}
|
||||
return out;
|
||||
}
|
||||
|
||||
// why: ids are "script:<key>::<cap>"; C++ keys off <key> for dont-ask scoping.
|
||||
function parseId(id) {
|
||||
var body = id.slice(id.indexOf(":") + 1); // strip "script:"
|
||||
var sep = body.indexOf("::");
|
||||
return { key: body.slice(0, sep), cap: body.slice(sep + 2) };
|
||||
}
|
||||
|
||||
function visibleFavourites(favourites, actions) {
|
||||
var seen = {};
|
||||
(actions || []).forEach(function (a) { seen[a.id] = true; });
|
||||
return (favourites || []).filter(function (id, i, arr) {
|
||||
return seen[id] && arr.indexOf(id) === i;
|
||||
});
|
||||
}
|
||||
|
||||
function syncClearButton() {
|
||||
if (clearEl)
|
||||
clearEl.hidden = !query;
|
||||
}
|
||||
|
||||
function stateFromPayload(payload) {
|
||||
return {
|
||||
actions: payload.actions || [],
|
||||
favourites: payload.favourites || [],
|
||||
query: "",
|
||||
sel: { zone: "list", i: 0 },
|
||||
lastResizeHeight: 0
|
||||
};
|
||||
}
|
||||
|
||||
function resetScrollPositions(list, doc) {
|
||||
if (list)
|
||||
list.scrollTop = 0;
|
||||
if (doc && doc.scrollingElement)
|
||||
doc.scrollingElement.scrollTop = 0;
|
||||
if (doc && doc.documentElement)
|
||||
doc.documentElement.scrollTop = 0;
|
||||
if (doc && doc.body)
|
||||
doc.body.scrollTop = 0;
|
||||
}
|
||||
|
||||
// nextSel: pure arrow-nav transition. Down fav->list0; Down list->clamp; Up list@0->fav0;
|
||||
// Up list->i-1; Left/Right clamp within fav. Returns a fresh {zone,i}.
|
||||
function nextSel(sel, key, listLen, favLen) {
|
||||
var zone = sel.zone, i = sel.i;
|
||||
if (key === "ArrowDown") {
|
||||
if (zone === "fav") return { zone: "list", i: 0 };
|
||||
return { zone: "list", i: Math.min(i + 1, Math.max(0, listLen - 1)) };
|
||||
}
|
||||
if (key === "ArrowUp") {
|
||||
if (zone === "list") {
|
||||
if (i <= 0) return favLen ? { zone: "fav", i: 0 } : { zone: "list", i: 0 };
|
||||
return { zone: "list", i: i - 1 };
|
||||
}
|
||||
return { zone: zone, i: i };
|
||||
}
|
||||
if (key === "ArrowLeft" && zone === "fav") return { zone: "fav", i: Math.max(0, i - 1) };
|
||||
if (key === "ArrowRight" && zone === "fav") return { zone: "fav", i: Math.min(favLen - 1, i + 1) };
|
||||
return { zone: zone, i: i };
|
||||
}
|
||||
|
||||
// ---- bridge ------------------------------------------------------------------
|
||||
function SendMessage(msg) {
|
||||
if (typeof SendWXMessage !== "function")
|
||||
return;
|
||||
if (typeof msg === "string") msg = { command: msg };
|
||||
if (msg.sequence_id === undefined) msg.sequence_id = Date.now();
|
||||
SendWXMessage(JSON.stringify(msg));
|
||||
}
|
||||
|
||||
// C++ pushes payloads here. Only list_actions is handled; it (re)seeds all state.
|
||||
window.HandleStudio = function (payload) {
|
||||
if (!payload) return;
|
||||
if (typeof payload === "string") { try { payload = JSON.parse(payload); } catch (e) { return; } }
|
||||
if (payload.command === "list_actions") {
|
||||
var next = stateFromPayload(payload);
|
||||
ACTIONS = next.actions;
|
||||
FAVS = next.favourites;
|
||||
query = next.query;
|
||||
sel = next.sel;
|
||||
lastResizeHeight = next.lastResizeHeight;
|
||||
if (qEl) {
|
||||
qEl.value = "";
|
||||
syncClearButton();
|
||||
}
|
||||
render({ resize: true, resetScroll: true });
|
||||
focusInput();
|
||||
}
|
||||
};
|
||||
|
||||
// ---- DOM helpers -------------------------------------------------------------
|
||||
function $(id) { return document.getElementById(id); }
|
||||
|
||||
function byId(id) {
|
||||
for (var i = 0; i < ACTIONS.length; i++) if (ACTIONS[i].id === id) return ACTIONS[i];
|
||||
return null;
|
||||
}
|
||||
|
||||
function currentVisibleFavs() { return visibleFavourites(FAVS, ACTIONS); }
|
||||
|
||||
function hue(id) {
|
||||
var h = 0;
|
||||
for (var i = 0; i < id.length; i++)
|
||||
h = (h * 31 + id.charCodeAt(i)) >>> 0;
|
||||
return h % 360;
|
||||
}
|
||||
|
||||
// Build a <div class=className> with the search-match ranges wrapped in <mark>. Used for both the
|
||||
// title and the pkg eyebrow. Pure (only touches the document factory), so the node-vm test never
|
||||
// calls it and load-time stays DOM-free.
|
||||
function markedText(className, text, match) {
|
||||
var node = document.createElement("div");
|
||||
node.className = className; node.title = text;
|
||||
if (!match || !match.length) {
|
||||
node.textContent = text;
|
||||
return node;
|
||||
}
|
||||
var last = 0;
|
||||
for (var i = 0; i < match.length; i++) {
|
||||
var range = match[i];
|
||||
if (range[0] > last)
|
||||
node.appendChild(document.createTextNode(text.slice(last, range[0])));
|
||||
var m = document.createElement("mark");
|
||||
m.textContent = text.slice(range[0], range[1]);
|
||||
node.appendChild(m);
|
||||
last = range[1];
|
||||
}
|
||||
if (last < text.length)
|
||||
node.appendChild(document.createTextNode(text.slice(last)));
|
||||
return node;
|
||||
}
|
||||
|
||||
function starSvg(on) {
|
||||
return '<svg width="15" height="15" viewBox="0 0 24 24" fill="' + (on ? "currentColor" : "none") +
|
||||
'" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round">' +
|
||||
'<path d="M12 3.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8L12 17.9 6.8 20.6l1-5.8L3.5 9.7l5.9-.9z"/></svg>';
|
||||
}
|
||||
|
||||
// ---- render ------------------------------------------------------------------
|
||||
function renderFav() {
|
||||
favEl.innerHTML = "";
|
||||
var favs = currentVisibleFavs();
|
||||
favEl.hidden = favs.length === 0;
|
||||
if (!favs.length && sel.zone === "fav")
|
||||
sel = { zone: "list", i: 0 };
|
||||
else if (sel.zone === "fav")
|
||||
sel.i = Math.max(0, Math.min(sel.i, favs.length - 1));
|
||||
updateFavEyebrow(favs);
|
||||
favs.forEach(function (id, i) {
|
||||
var a = byId(id);
|
||||
var tile = document.createElement("button");
|
||||
tile.className = "fav-tile" + (sel.zone === "fav" && sel.i === i ? " sel" : "");
|
||||
tile.style.setProperty("--h", hue(id));
|
||||
tile.textContent = a.title.charAt(0).toUpperCase();
|
||||
tile.title = a.title;
|
||||
tile.onclick = function () { sel = { zone: "fav", i: i }; run(a); };
|
||||
favEl.appendChild(tile);
|
||||
});
|
||||
}
|
||||
|
||||
// Name of the selected favourite, shown above the bar; hidden unless a fav is selected.
|
||||
function updateFavEyebrow(favs) {
|
||||
if (!eyeEl) return;
|
||||
var a = sel.zone === "fav" && favs.length ? byId(favs[sel.i]) : null;
|
||||
eyeEl.textContent = a ? a.title : "";
|
||||
eyeEl.hidden = !a;
|
||||
}
|
||||
|
||||
function renderList() {
|
||||
var q = (query || "").trim();
|
||||
var arr = filterActions(ACTIONS, query);
|
||||
if (sel.zone === "list")
|
||||
sel.i = Math.max(0, Math.min(sel.i, arr.length - 1));
|
||||
listEl.innerHTML = "";
|
||||
// why: search-first - the list stays blank until the user types; only a
|
||||
// non-empty query with zero hits earns the "No actions match" message.
|
||||
if (!q) {
|
||||
listEl.className = "dial-list empty";
|
||||
return;
|
||||
}
|
||||
listEl.className = "dial-list" + (!arr.length ? " empty" : "");
|
||||
if (!arr.length) {
|
||||
var empty = document.createElement("div");
|
||||
empty.className = "dial-empty";
|
||||
empty.textContent = "No actions match";
|
||||
listEl.appendChild(empty);
|
||||
return;
|
||||
}
|
||||
arr.forEach(function (a, i) {
|
||||
var on = FAVS.indexOf(a.id) !== -1;
|
||||
var row = document.createElement("div");
|
||||
row.className = "row" + (sel.zone === "list" && sel.i === i ? " sel" : "") + (a.runnable === false ? " disabled" : "");
|
||||
|
||||
var tile = document.createElement("div");
|
||||
tile.className = "tile";
|
||||
tile.style.setProperty("--h", hue(a.id));
|
||||
tile.textContent = a.title.charAt(0).toUpperCase();
|
||||
|
||||
var left = document.createElement("div");
|
||||
left.className = "row-left";
|
||||
var mi = matchIndex[a.id];
|
||||
var pkg = markedText("row-eyebrow", a.pkg, mi ? mi.pkg : null);
|
||||
var line = document.createElement("div");
|
||||
line.className = "row-line";
|
||||
var name = markedText("row-name", a.title, mi ? mi.title : null);
|
||||
line.appendChild(name);
|
||||
if (a.shortcut) {
|
||||
var sc = document.createElement("div");
|
||||
sc.className = "row-sc";
|
||||
a.shortcut.split("+").forEach(function (k) {
|
||||
var key = document.createElement("kbd");
|
||||
key.textContent = k;
|
||||
sc.appendChild(key);
|
||||
});
|
||||
line.appendChild(sc);
|
||||
}
|
||||
left.appendChild(pkg);
|
||||
left.appendChild(line);
|
||||
row.appendChild(tile);
|
||||
row.appendChild(left);
|
||||
|
||||
if (a.runnable !== false) {
|
||||
var star = document.createElement("button");
|
||||
star.className = "star" + (on ? " on" : "");
|
||||
star.innerHTML = starSvg(on);
|
||||
star.title = on ? "Unpin from favourites" : "Pin to favourites";
|
||||
star.onclick = function (ev) { ev.stopPropagation(); toggleFav(a.id); };
|
||||
// why: two quick fav/unfav clicks must not dblclick-run the row
|
||||
star.ondblclick = function (ev) { ev.stopPropagation(); };
|
||||
row.appendChild(star);
|
||||
}
|
||||
|
||||
row.onclick = function () { sel = { zone: "list", i: i }; render(); };
|
||||
row.ondblclick = function () { sel = { zone: "list", i: i }; run(a); };
|
||||
listEl.appendChild(row);
|
||||
});
|
||||
}
|
||||
|
||||
function render(opts) {
|
||||
renderFav();
|
||||
renderList();
|
||||
scrollSelectedIntoView();
|
||||
if (opts && opts.resetScroll)
|
||||
resetScrollPositions(listEl, document);
|
||||
if (opts && opts.resize)
|
||||
requestResize();
|
||||
}
|
||||
|
||||
// Keep the selected item in view as arrows move it: the list scrolls vertically, the fav bar
|
||||
// horizontally (arrow nav "pushes" the scrollable fav row to follow the selection).
|
||||
function scrollSelectedIntoView() {
|
||||
var el = null;
|
||||
if (sel.zone === "list" && listEl)
|
||||
el = listEl.querySelector(".row.sel");
|
||||
else if (sel.zone === "fav" && favEl)
|
||||
el = favEl.querySelector(".fav-tile.sel");
|
||||
if (el && el.scrollIntoView)
|
||||
el.scrollIntoView({ block: "nearest", inline: "nearest" });
|
||||
}
|
||||
|
||||
function requestResize() {
|
||||
if (!document.body)
|
||||
return;
|
||||
setTimeout(function () {
|
||||
var launcher = document.querySelector(".launcher");
|
||||
if (!launcher)
|
||||
return;
|
||||
var height = Math.ceil(launcher.getBoundingClientRect().height);
|
||||
if (!height || height === lastResizeHeight)
|
||||
return;
|
||||
lastResizeHeight = height;
|
||||
SendMessage({ command: "resize", height: height });
|
||||
}, 0);
|
||||
}
|
||||
|
||||
// ---- actions -----------------------------------------------------------------
|
||||
function toggleFav(id) {
|
||||
var k = FAVS.indexOf(id);
|
||||
var newState = k === -1;
|
||||
if (newState) FAVS.push(id); else FAVS.splice(k, 1);
|
||||
SendMessage({ command: "toggle_favourite", id: id, fav: newState });
|
||||
render({ resize: true });
|
||||
}
|
||||
|
||||
// Fire the action; C++ owns the run-confirm (native dialog) + suppression, then closes the popup + toasts.
|
||||
function run(a) {
|
||||
if (!a || a.runnable === false) return;
|
||||
SendMessage({ command: "run_action", id: a.id, title: a.title });
|
||||
}
|
||||
|
||||
function runSelected() {
|
||||
if (sel.zone === "fav") { var id = currentVisibleFavs()[sel.i]; if (id) run(byId(id)); return; }
|
||||
var a = filterActions(ACTIONS, query)[sel.i];
|
||||
if (a) run(a);
|
||||
}
|
||||
|
||||
function focusInput() { setTimeout(function () { qEl.focus(); }, 0); }
|
||||
|
||||
// ---- init --------------------------------------------------------------------
|
||||
function OnInit() {
|
||||
qEl = $("q"); listEl = $("list"); favEl = $("favBar"); clearEl = $("clear"); eyeEl = $("favEyebrow");
|
||||
syncClearButton();
|
||||
|
||||
$("clear").onclick = function () {
|
||||
query = ""; qEl.value = ""; sel = { zone: "list", i: 0 }; render({ resize: true, resetScroll: true }); qEl.focus();
|
||||
syncClearButton();
|
||||
};
|
||||
qEl.addEventListener("input", function () {
|
||||
query = qEl.value; sel = { zone: "list", i: 0 }; syncClearButton(); render({ resize: true, resetScroll: true });
|
||||
});
|
||||
|
||||
document.addEventListener("keydown", function (e) {
|
||||
var arr = filterActions(ACTIONS, query);
|
||||
var favs = currentVisibleFavs();
|
||||
if (e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "ArrowLeft" || e.key === "ArrowRight") {
|
||||
e.preventDefault();
|
||||
sel = nextSel(sel, e.key, arr.length, favs.length);
|
||||
// why: entering/leaving the fav zone toggles the eyebrow line, changing launcher height;
|
||||
// resize so the popup grows/shrinks instead of clipping. requestResize no-ops when unchanged.
|
||||
render({ resize: true });
|
||||
} else if (e.key === "Enter") {
|
||||
e.preventDefault();
|
||||
runSelected();
|
||||
} else if (e.key === "Escape") {
|
||||
e.preventDefault();
|
||||
if (query) { query = ""; qEl.value = ""; sel = { zone: "list", i: 0 }; syncClearButton(); render({ resize: true, resetScroll: true }); }
|
||||
else SendMessage({ command: "close_page" });
|
||||
}
|
||||
});
|
||||
|
||||
SendMessage({ command: "request_actions" });
|
||||
}
|
||||
Reference in New Issue
Block a user