Wickedness
b050f2f06c
Add the MBN-branded startup intro, semantic sidebar icons, and refined card-based operator visuals. Strengthen packaged UI and input smoke coverage for the updated experience.
6637 lines
274 KiB
JavaScript
6637 lines
274 KiB
JavaScript
(function () {
|
|
"use strict";
|
|
|
|
const webview = window.chrome && window.chrome.webview;
|
|
const searchInput = document.getElementById("stock-search");
|
|
const searchButton = document.getElementById("stock-search-button");
|
|
const stockSearchMeta = document.getElementById("stock-search-meta");
|
|
const stockResults = document.getElementById("stock-results");
|
|
const cutList = document.getElementById("cut-list");
|
|
const cutDragFeedback = document.getElementById("cut-drag-feedback");
|
|
const playlistRows = document.getElementById("playlist-rows");
|
|
const playlistHeadingCount = document.getElementById("playlist-heading-count");
|
|
const playlistDropZone = document.getElementById("playlist-drop-zone");
|
|
const playlistMoveUp = document.getElementById("playlist-move-up");
|
|
const playlistMoveDown = document.getElementById("playlist-move-down");
|
|
const playlistDeleteSelected = document.getElementById("playlist-delete-selected");
|
|
const playlistDeleteAll = document.getElementById("playlist-delete-all");
|
|
const playlistEnableAll = document.getElementById("playlist-enable-all");
|
|
const marketTabs = document.getElementById("market-tabs");
|
|
const categoryTree = document.getElementById("category-tree");
|
|
const catalogExpandAll = document.getElementById("catalog-expand-all");
|
|
const movingAverage5 = document.getElementById("moving-average-5");
|
|
const movingAverage20 = document.getElementById("moving-average-20");
|
|
const status = document.getElementById("operator-status");
|
|
const operatorSettingsMessage = document.getElementById("operator-settings-message");
|
|
const operatorSettingsRestart = document.getElementById("operator-settings-restart");
|
|
const operatorNavigationExpanded = document.getElementById("operator-navigation-expanded");
|
|
const operatorAppearanceControls = Object.freeze({
|
|
colorTheme: Object.freeze({
|
|
element: document.getElementById("operator-color-theme"),
|
|
values: Object.freeze(["system", "light", "dark"]),
|
|
fallback: "system"
|
|
}),
|
|
viewMode: Object.freeze({
|
|
element: document.getElementById("operator-view-mode"),
|
|
values: Object.freeze(["automatic", "compact", "cards"]),
|
|
fallback: "automatic"
|
|
}),
|
|
startWorkspace: Object.freeze({
|
|
element: document.getElementById("operator-start-workspace"),
|
|
values: Object.freeze(["stockCut", "lastWorkspace"]),
|
|
fallback: "stockCut"
|
|
})
|
|
});
|
|
const operatorSettingsAppVersion = document.getElementById("operator-settings-app-version");
|
|
const operatorSettingsPlayoutMode = document.getElementById("operator-settings-playout-mode");
|
|
const operatorSettingsPlayoutConnection = document.getElementById(
|
|
"operator-settings-playout-connection");
|
|
const operatorSettingsOracleState = document.getElementById("operator-settings-oracle-state");
|
|
const operatorSettingsMariaState = document.getElementById("operator-settings-maria-state");
|
|
const operatorSettingsDbMonitor = document.getElementById("operator-settings-db-monitor");
|
|
const operatorFolderControls = Object.freeze({
|
|
design: Object.freeze({
|
|
name: document.getElementById("operator-design-folder-name"),
|
|
status: document.getElementById("operator-design-folder-status"),
|
|
source: document.getElementById("operator-design-folder-source"),
|
|
select: document.getElementById("operator-design-folder-select"),
|
|
reset: document.getElementById("operator-design-folder-reset")
|
|
}),
|
|
resource: Object.freeze({
|
|
name: document.getElementById("operator-resource-folder-name"),
|
|
status: document.getElementById("operator-resource-folder-status"),
|
|
source: document.getElementById("operator-resource-folder-source"),
|
|
select: document.getElementById("operator-resource-folder-select"),
|
|
reset: document.getElementById("operator-resource-folder-reset")
|
|
}),
|
|
background: Object.freeze({
|
|
name: document.getElementById("operator-background-folder-name"),
|
|
status: document.getElementById("operator-background-folder-status"),
|
|
source: document.getElementById("operator-background-folder-source"),
|
|
select: document.getElementById("operator-background-folder-select"),
|
|
reset: document.getElementById("operator-background-folder-reset")
|
|
})
|
|
});
|
|
const dialog = document.getElementById("legacy-dialog");
|
|
const dialogCaption = document.getElementById("legacy-dialog-caption");
|
|
const dialogMessage = document.getElementById("legacy-dialog-message");
|
|
const dialogOk = document.getElementById("legacy-dialog-ok");
|
|
const dialogNo = document.getElementById("legacy-dialog-no");
|
|
const dbSaveButton = document.getElementById("db-save-button");
|
|
const dbLoadButton = document.getElementById("db-load-button");
|
|
const namedPlaylistModal = document.getElementById("named-playlist-modal");
|
|
const namedPlaylistTitle = document.getElementById("named-playlist-title");
|
|
const namedPlaylistClose = document.getElementById("named-playlist-close");
|
|
const namedPlaylistStatus = document.getElementById("named-playlist-status");
|
|
const namedPlaylistDefinitions = document.getElementById("named-playlist-definitions");
|
|
const namedPlaylistNewTitle = document.getElementById("named-playlist-new-title");
|
|
const namedPlaylistCreateButton = document.getElementById("named-playlist-create-button");
|
|
const namedPlaylistDeleteButton = document.getElementById("named-playlist-delete-button");
|
|
const namedPlaylistCancelButton = document.getElementById("named-playlist-cancel-button");
|
|
const namedPlaylistConfirmButton = document.getElementById("named-playlist-confirm-button");
|
|
const namedPlaylistConfirmationModal = document.getElementById(
|
|
"named-playlist-confirmation");
|
|
const namedPlaylistConfirmationMessage = document.getElementById(
|
|
"named-playlist-confirmation-message");
|
|
const namedPlaylistConfirmationYes = document.getElementById(
|
|
"named-playlist-confirmation-yes");
|
|
const namedPlaylistConfirmationNo = document.getElementById(
|
|
"named-playlist-confirmation-no");
|
|
const manualButtons = Array.from(document.querySelectorAll("button[data-manual-screen]"));
|
|
const manualModal = document.getElementById("manual-financial-modal");
|
|
const manualTitle = document.getElementById("manual-financial-title");
|
|
const manualClose = document.getElementById("manual-financial-close");
|
|
const manualExit = document.getElementById("manual-financial-exit");
|
|
const manualWorkspace = document.getElementById("manual-financial-workspace");
|
|
const manualListButtons = Array.from(
|
|
document.querySelectorAll("button[data-manual-list-screen]"));
|
|
const manualListModal = document.getElementById("manual-list-modal");
|
|
const manualListTitle = document.getElementById("manual-list-title");
|
|
const manualListClose = document.getElementById("manual-list-close");
|
|
const manualListCancel = document.getElementById("manual-list-cancel");
|
|
const manualListWorkspace = document.getElementById("manual-list-workspace");
|
|
const operatorCatalogModal = document.getElementById("operator-catalog-modal");
|
|
const operatorCatalogTitle = document.getElementById("operator-catalog-title");
|
|
const operatorCatalogClose = document.getElementById("operator-catalog-close");
|
|
const operatorCatalogStatus = document.getElementById("operator-catalog-status");
|
|
const operatorCatalogToolbar = document.getElementById("operator-catalog-toolbar");
|
|
const operatorCatalogBody = document.getElementById("operator-catalog-body");
|
|
const operatorCatalogListPanel = document.getElementById("operator-catalog-list-panel");
|
|
const operatorCatalogThemeTab = document.getElementById("operator-catalog-theme-tab");
|
|
const operatorCatalogExpertTab = document.getElementById("operator-catalog-expert-tab");
|
|
const operatorCatalogQuery = document.getElementById("operator-catalog-query");
|
|
const operatorCatalogSession = document.getElementById("operator-catalog-session");
|
|
const operatorCatalogSearch = document.getElementById("operator-catalog-search");
|
|
const operatorCatalogNewMarket = document.getElementById("operator-catalog-new-market");
|
|
const operatorCatalogNew = document.getElementById("operator-catalog-new");
|
|
const operatorCatalogResults = document.getElementById("operator-catalog-results");
|
|
const operatorCatalogEditor = document.getElementById("operator-catalog-editor");
|
|
const operatorCatalogEditorMarketField = document.getElementById(
|
|
"operator-catalog-editor-market-field");
|
|
const operatorCatalogEditorMarket = document.getElementById(
|
|
"operator-catalog-editor-market");
|
|
const operatorCatalogCode = document.getElementById("operator-catalog-code");
|
|
const operatorCatalogNameLabel = document.getElementById("operator-catalog-name-label");
|
|
const operatorCatalogName = document.getElementById("operator-catalog-name");
|
|
const operatorCatalogNameCheck = document.getElementById("operator-catalog-name-check");
|
|
const operatorCatalogNameStatus = document.getElementById("operator-catalog-name-status");
|
|
const operatorCatalogStockSearchLine = document.getElementById("operator-catalog-stock-search-line");
|
|
const operatorCatalogStockQuery = document.getElementById("operator-catalog-stock-query");
|
|
const operatorCatalogStockSearch = document.getElementById("operator-catalog-stock-search");
|
|
const operatorCatalogStockResults = document.getElementById("operator-catalog-stock-results");
|
|
const operatorCatalogAmountLabel = document.getElementById("operator-catalog-amount-label");
|
|
const operatorCatalogAmount = document.getElementById("operator-catalog-amount");
|
|
const operatorCatalogAddStock = document.getElementById("operator-catalog-add-stock");
|
|
const operatorCatalogAddLine = document.getElementById("operator-catalog-add-line");
|
|
const operatorCatalogDraftHeader = document.getElementById("operator-catalog-draft-header");
|
|
const operatorCatalogDraftRows = document.getElementById("operator-catalog-draft-rows");
|
|
const operatorCatalogDeleteAll = document.getElementById("operator-catalog-delete-all");
|
|
const operatorCatalogCancel = document.getElementById("operator-catalog-cancel");
|
|
const operatorCatalogSave = document.getElementById("operator-catalog-save");
|
|
const namedPlaylistDialog = namedPlaylistModal.querySelector("[role='dialog']");
|
|
const namedPlaylistConfirmationDialog = namedPlaylistConfirmationModal.querySelector(
|
|
"[role='alertdialog']");
|
|
const manualDialog = manualModal.querySelector("[role='dialog']");
|
|
const manualListDialog = manualListModal.querySelector("[role='dialog']");
|
|
const operatorCatalogDialog = operatorCatalogModal.querySelector("[role='dialog']");
|
|
const legacyAlertDialog = dialog.querySelector("[role='alertdialog']");
|
|
if (!window.LegacyModalFocus || typeof window.LegacyModalFocus.create !== "function") {
|
|
throw new Error("Legacy modal focus support was not loaded.");
|
|
}
|
|
if (!window.LegacyCutDrag ||
|
|
typeof window.LegacyCutDrag.createDragRectangle !== "function" ||
|
|
typeof window.LegacyCutDrag.shouldStart !== "function" ||
|
|
typeof window.LegacyCutDrag.toCssDragSize !== "function") {
|
|
throw new Error("Legacy cut drag support was not loaded.");
|
|
}
|
|
if (!window.LegacyNamedPlaylistSelection ||
|
|
typeof window.LegacyNamedPlaylistSelection.create !== "function") {
|
|
throw new Error("Legacy named-playlist selection support was not loaded.");
|
|
}
|
|
const modalFocusManager = window.LegacyModalFocus.create({ document: document });
|
|
const namedPlaylistSelection = window.LegacyNamedPlaylistSelection.create();
|
|
modalFocusManager.start();
|
|
let uiBusy = false;
|
|
const searchDraftInputIds = new Set([
|
|
"stock-search",
|
|
"overseas-industry-search",
|
|
"overseas-stock-search",
|
|
"comparison-domestic-search",
|
|
"comparison-world-search",
|
|
"theme-search",
|
|
"expert-search",
|
|
"halt-search",
|
|
"manual-financial-list-query",
|
|
"manual-financial-find-query",
|
|
"manual-vi-search",
|
|
"operator-catalog-query",
|
|
"operator-catalog-stock-query"
|
|
]);
|
|
const searchDrafts = new Map();
|
|
let namedPlaylistMode = null;
|
|
let namedPlaylistState = null;
|
|
let namedPlaylistConfirmation = null;
|
|
let manualDraft = null;
|
|
let manualDraftKey = "";
|
|
let manualDraftResetPending = false;
|
|
let operatorCatalogState = null;
|
|
let operatorCatalogNameDraft = "";
|
|
let operatorCatalogDraftKey = "";
|
|
let manualResultClickTimer = null;
|
|
let comparisonTargetClickTimer = null;
|
|
let themeResultClickTimer = null;
|
|
let manualViResultClickTimer = null;
|
|
let manualResultPendingSelection = null;
|
|
let comparisonTargetPendingSelection = null;
|
|
let themeResultPendingSelection = null;
|
|
let manualViResultPendingSelection = null;
|
|
let pendingNamedPlaylistCommand = null;
|
|
let nextNamedPlaylistRequestId = 1;
|
|
let lastCommandSequence = 0;
|
|
let operatorMutationLocked = true;
|
|
const operatorCatalogDragMime = "text/x-mbn-operator-catalog-row";
|
|
let deferredPlaylistPlainSelectionRowId = null;
|
|
let playlistDragGesture = null;
|
|
let playlistMutationLocked = false;
|
|
let playlistStructureMutationLocked = true;
|
|
let playlistProgramEnableMutationLocked = true;
|
|
let playlistDeleteSelectedLocked = true;
|
|
let cutSelectionEnabled = false;
|
|
let cutDragSize = { width: 4, height: 4 };
|
|
let cutDragGesture = null;
|
|
let lastPresentedPlayoutRowKey = "";
|
|
let draggedTabId = null;
|
|
let tabDragLastTargetId = null;
|
|
let pendingTabHoverSwap = null;
|
|
let draggedOperatorCatalogRowId = null;
|
|
let operatorCatalogDragBlockedRowId = null;
|
|
let operatorCatalogMutationLocked = false;
|
|
let legacyDialogIsConfirmation = false;
|
|
let industryRenderStructureKey = "";
|
|
let overseasRenderStructureKey = "";
|
|
let themeRenderStructureKey = "";
|
|
let comparisonRenderStructureKey = "";
|
|
let expertRenderStructureKey = "";
|
|
let tradingHaltRenderStructureKey = "";
|
|
let manualFinancialRenderStateKey = "";
|
|
let manualListRenderStateKey = "";
|
|
let operatorCatalogRenderStateKey = "";
|
|
let manualFinancialSearchFocus = null;
|
|
let manualListSearchFocus = null;
|
|
let operatorCatalogSearchFocus = null;
|
|
let operatorSettingsRenderRevision = null;
|
|
let operatorSettingsRevisionInitialized = false;
|
|
let operatorAppearanceSnapshot = Object.freeze({
|
|
colorTheme: "system",
|
|
viewMode: "automatic",
|
|
startWorkspace: "stockCut"
|
|
});
|
|
let pendingOperatorSettingsFocusId = null;
|
|
let pendingOperatorSettingsFallbackFocusId = null;
|
|
let operatorSettingsWasBusy = false;
|
|
let renderedTreeTabId = null;
|
|
let treeInteractionLocked = false;
|
|
let treeFocusOwnedBeforeRender = false;
|
|
const treeUiStateByTab = new Map();
|
|
const pendingTreeResetTabs = new Set();
|
|
|
|
function preferredModalFocus(modal) {
|
|
if (modal === legacyAlertDialog) return dialogOk;
|
|
if (modal === namedPlaylistConfirmationDialog) return namedPlaylistConfirmationYes;
|
|
if (modal === namedPlaylistDialog) {
|
|
return namedPlaylistDefinitions.querySelector("button[aria-selected='true']") ||
|
|
namedPlaylistDefinitions.querySelector("button") || namedPlaylistNewTitle;
|
|
}
|
|
if (modal === manualDialog) {
|
|
return manualWorkspace.querySelector(
|
|
"button.selected[data-manual-stock-result-id]") ||
|
|
manualWorkspace.querySelector("button.selected[data-manual-result-id]") ||
|
|
manualWorkspace.querySelector("button[data-manual-result-id]") ||
|
|
manualWorkspace.querySelector(".manual-financial-list-header");
|
|
}
|
|
if (modal === manualListDialog) {
|
|
return manualListWorkspace.querySelector(
|
|
"button.selected[data-manual-vi-result-id]") ||
|
|
manualListWorkspace.querySelector("input:not([disabled])") ||
|
|
manualListWorkspace.querySelector("button:not([disabled])");
|
|
}
|
|
if (modal === operatorCatalogDialog) {
|
|
if (!operatorCatalogEditor.hidden && !operatorCatalogName.disabled) {
|
|
return operatorCatalogName;
|
|
}
|
|
return operatorCatalogResults.querySelector("button[aria-selected='true']") ||
|
|
operatorCatalogResults.querySelector("button") || operatorCatalogQuery;
|
|
}
|
|
return null;
|
|
}
|
|
|
|
function createModalOpenerReference() {
|
|
const opener = document.activeElement;
|
|
if (!renderedTreeTabId || !categoryTree.contains(opener)) return opener;
|
|
|
|
captureTreeUiState(renderedTreeTabId);
|
|
const node = opener.closest("[data-tree-node-key]");
|
|
const descriptor = {
|
|
tabId: renderedTreeTabId,
|
|
controlId: opener.id || null,
|
|
nodeKey: node ? node.dataset.treeNodeKey : null,
|
|
selectionStart: Number.isInteger(opener.selectionStart) ? opener.selectionStart : null,
|
|
selectionEnd: Number.isInteger(opener.selectionEnd) ? opener.selectionEnd : null
|
|
};
|
|
return function resolveTreeModalOpener() {
|
|
if (descriptor.tabId !== renderedTreeTabId) return null;
|
|
let resolved = descriptor.controlId
|
|
? document.getElementById(descriptor.controlId) : null;
|
|
if (!resolved && descriptor.nodeKey) {
|
|
resolved = findTreeNodeByKey(descriptor.nodeKey);
|
|
}
|
|
if (!resolved || !categoryTree.contains(resolved) || resolved.disabled === true) {
|
|
return null;
|
|
}
|
|
if (Number.isInteger(descriptor.selectionStart) &&
|
|
Number.isInteger(descriptor.selectionEnd) &&
|
|
typeof resolved.setSelectionRange === "function") {
|
|
try {
|
|
resolved.setSelectionRange(descriptor.selectionStart, descriptor.selectionEnd);
|
|
} catch (_) {
|
|
// A recreated non-text control may expose, but reject, selection ranges.
|
|
}
|
|
}
|
|
return resolved;
|
|
};
|
|
}
|
|
|
|
function rememberModalOpener(modal) {
|
|
if (modal) modalFocusManager.rememberOpener(modal, createModalOpenerReference());
|
|
}
|
|
|
|
function syncModalFocus() {
|
|
modalFocusManager.sync(preferredModalFocus);
|
|
}
|
|
|
|
function activeTreeTabId(state) {
|
|
if (!state || !Array.isArray(state.tabs)) return null;
|
|
const active = state.tabs.find(function (tab) { return tab.isActive === true; });
|
|
return active ? active.id : null;
|
|
}
|
|
|
|
function treeSectionIdentity(summary, index) {
|
|
if (summary.dataset.sectionIndex != null) {
|
|
return "fixed:" + summary.dataset.sectionIndex;
|
|
}
|
|
if (summary.dataset.industrySectionIndex != null) {
|
|
return "industry:" + summary.dataset.industrySectionIndex;
|
|
}
|
|
if (summary.dataset.comparisonSectionIndex != null) {
|
|
return "comparison:" + summary.dataset.comparisonSectionIndex;
|
|
}
|
|
return "section:" + index + ":" + (summary.textContent || "").trim();
|
|
}
|
|
|
|
function markVisualCardList(element, context) {
|
|
if (!element) return element;
|
|
element.dataset.visualCardList = "true";
|
|
if (context) element.dataset.visualCardContext = context;
|
|
return element;
|
|
}
|
|
|
|
function setVisualCardContent(button, options) {
|
|
if (!button) return;
|
|
const content = options || {};
|
|
const titleText = content.title == null ? "" : String(content.title);
|
|
const metaText = content.meta == null ? "" : String(content.meta);
|
|
|
|
button.classList.add("visual-card");
|
|
button.dataset.visualCardKind = content.kind || "graphic";
|
|
if (titleText) button.setAttribute("aria-label", titleText);
|
|
|
|
const copy = document.createElement("span");
|
|
copy.className = "visual-card-copy";
|
|
const title = document.createElement("span");
|
|
title.className = "visual-card-title";
|
|
title.textContent = titleText;
|
|
copy.appendChild(title);
|
|
if (metaText) {
|
|
const meta = document.createElement("span");
|
|
meta.className = "visual-card-meta";
|
|
meta.textContent = metaText;
|
|
copy.appendChild(meta);
|
|
}
|
|
|
|
button.replaceChildren(copy);
|
|
}
|
|
|
|
function treeLeafIdentity(button, index) {
|
|
return button.dataset.actionId ||
|
|
button.dataset.industryActionId ||
|
|
button.dataset.comparisonActionId ||
|
|
button.dataset.overseasActionId ||
|
|
button.dataset.themeActionId ||
|
|
button.dataset.expertActionId ||
|
|
button.dataset.haltActionId ||
|
|
("leaf:" + index + ":" + (button.textContent || "").trim());
|
|
}
|
|
|
|
function syncTreeSectionExpanded(details) {
|
|
const summary = details.querySelector(":scope > summary[data-tree-root]");
|
|
if (summary) summary.setAttribute("aria-expanded", details.open ? "true" : "false");
|
|
}
|
|
|
|
function clearTreeRovingLists() {
|
|
const lists = [];
|
|
if (categoryTree.dataset.rovingTree === "true") lists.push(categoryTree);
|
|
categoryTree.querySelectorAll("[data-roving-tree=\"true\"]")
|
|
.forEach(function (list) { lists.push(list); });
|
|
lists.forEach(function (list) {
|
|
list.querySelectorAll("[data-tree-node-key]").forEach(function (node) {
|
|
delete node.dataset.rovingRow;
|
|
node.removeAttribute("tabindex");
|
|
});
|
|
delete list.dataset.rovingTree;
|
|
delete list.dataset.rovingList;
|
|
delete list.dataset.rovingPageSize;
|
|
delete list.dataset.rovingSelectionFollowsFocus;
|
|
delete list.dataset.rovingActivation;
|
|
list.removeAttribute("tabindex");
|
|
list.removeAttribute("role");
|
|
});
|
|
}
|
|
|
|
function configureTreeRovingLists() {
|
|
const containers = new Set();
|
|
categoryTree.querySelectorAll("details[data-tree-section-key]")
|
|
.forEach(function (details) {
|
|
if (details.parentElement) containers.add(details.parentElement);
|
|
});
|
|
containers.forEach(function (list) {
|
|
const rows = Array.from(list.querySelectorAll("[data-tree-node-key]"))
|
|
.filter(function (row) {
|
|
const details = row.closest("details[data-tree-section-key]");
|
|
return details && details.parentElement === list;
|
|
});
|
|
const selected = rows.find(function (row) {
|
|
return row.classList.contains("tree-node-selected");
|
|
}) || null;
|
|
configureRovingList(list, rows, selected, {
|
|
listRole: "tree",
|
|
rowRole: "treeitem",
|
|
pageSize: 9,
|
|
selectionFollowsFocus: false
|
|
});
|
|
list.dataset.rovingTree = "true";
|
|
});
|
|
}
|
|
|
|
function decorateTreeNodes(tabId) {
|
|
if (!tabId) return;
|
|
clearTreeRovingLists();
|
|
categoryTree.querySelectorAll("details").forEach(function (details, sectionIndex) {
|
|
const summary = details.querySelector(":scope > summary");
|
|
if (!summary) return;
|
|
const sectionKey = tabId + "|" + treeSectionIdentity(summary, sectionIndex);
|
|
details.dataset.treeSectionKey = sectionKey;
|
|
summary.dataset.treeRoot = "true";
|
|
summary.dataset.treeNodeKey = "root|" + sectionKey;
|
|
summary.setAttribute("role", "treeitem");
|
|
summary.setAttribute("aria-selected", "false");
|
|
summary.setAttribute("aria-disabled", treeInteractionLocked ? "true" : "false");
|
|
|
|
if (!summary.querySelector("[data-tree-disclosure]")) {
|
|
const labelText = summary.textContent || "";
|
|
const disclosure = document.createElement("span");
|
|
disclosure.className = "tree-disclosure";
|
|
disclosure.dataset.treeDisclosure = "true";
|
|
disclosure.setAttribute("aria-hidden", "true");
|
|
const label = document.createElement("span");
|
|
label.className = "tree-root-label";
|
|
label.dataset.treeRootLabel = "true";
|
|
label.textContent = labelText;
|
|
summary.replaceChildren(disclosure, label);
|
|
}
|
|
|
|
details.querySelectorAll(".tree-item").forEach(function (button, leafIndex) {
|
|
button.dataset.treeNodeKey = "leaf|" + sectionKey + "|" +
|
|
treeLeafIdentity(button, leafIndex);
|
|
button.setAttribute("role", "treeitem");
|
|
if (!button.classList.contains("tree-node-selected")) {
|
|
button.setAttribute("aria-selected", "false");
|
|
}
|
|
});
|
|
syncTreeSectionExpanded(details);
|
|
});
|
|
configureTreeRovingLists();
|
|
}
|
|
|
|
function findTreeNodeByKey(key) {
|
|
if (!key) return null;
|
|
return Array.from(categoryTree.querySelectorAll("[data-tree-node-key]")).find(
|
|
function (node) { return node.dataset.treeNodeKey === key; }) || null;
|
|
}
|
|
|
|
function selectTreeNode(node, focus) {
|
|
if (!node || !renderedTreeTabId) return;
|
|
categoryTree.querySelectorAll("[data-tree-node-key].tree-node-selected")
|
|
.forEach(function (selected) {
|
|
selected.classList.remove("tree-node-selected");
|
|
selected.setAttribute("aria-selected", "false");
|
|
});
|
|
node.classList.add("tree-node-selected");
|
|
node.setAttribute("aria-selected", "true");
|
|
const previous = treeUiStateByTab.get(renderedTreeTabId) || {};
|
|
treeUiStateByTab.set(renderedTreeTabId, Object.assign({}, previous, {
|
|
selectedKey: node.dataset.treeNodeKey
|
|
}));
|
|
const list = node.closest("[data-roving-tree=\"true\"]");
|
|
if (list) setRovingListTabStop(list, node);
|
|
if (focus !== false && typeof node.focus === "function") {
|
|
node.focus({ preventScroll: true });
|
|
}
|
|
}
|
|
|
|
function captureTreeUiState(tabId) {
|
|
if (!tabId) return;
|
|
decorateTreeNodes(tabId);
|
|
const previous = treeUiStateByTab.get(tabId) || {};
|
|
const openSections = new Map();
|
|
categoryTree.querySelectorAll("details[data-tree-section-key]")
|
|
.forEach(function (details) {
|
|
openSections.set(details.dataset.treeSectionKey, details.open === true);
|
|
});
|
|
const selected = categoryTree.querySelector(
|
|
"[data-tree-node-key].tree-node-selected");
|
|
const activeElement = categoryTree.contains(document.activeElement)
|
|
? document.activeElement
|
|
: null;
|
|
const active = activeElement
|
|
? activeElement.closest("[data-tree-node-key]")
|
|
: null;
|
|
const controlFocus = activeElement && activeElement.id
|
|
? {
|
|
id: activeElement.id,
|
|
value: typeof activeElement.value === "string" ? activeElement.value : null,
|
|
selectionStart: Number.isInteger(activeElement.selectionStart)
|
|
? activeElement.selectionStart : null,
|
|
selectionEnd: Number.isInteger(activeElement.selectionEnd)
|
|
? activeElement.selectionEnd : null
|
|
}
|
|
: null;
|
|
treeUiStateByTab.set(tabId, {
|
|
openSections: openSections,
|
|
selectedKey: selected ? selected.dataset.treeNodeKey : previous.selectedKey || null,
|
|
focusKey: active ? active.dataset.treeNodeKey : previous.focusKey || null,
|
|
controlFocus: activeElement ? controlFocus : previous.controlFocus || null,
|
|
scrollTop: categoryTree.scrollTop
|
|
});
|
|
}
|
|
|
|
function beginTreeRender(state) {
|
|
const nextTabId = activeTreeTabId(state);
|
|
treeFocusOwnedBeforeRender = categoryTree.contains(document.activeElement);
|
|
if (renderedTreeTabId) captureTreeUiState(renderedTreeTabId);
|
|
if (nextTabId !== renderedTreeTabId) {
|
|
clearThemeResultPendingSelection(false);
|
|
clearComparisonTargetPendingSelection(false);
|
|
renderedTreeTabId = nextTabId;
|
|
pendingTreeResetTabs.clear();
|
|
if (nextTabId) pendingTreeResetTabs.add(nextTabId);
|
|
if (nextTabId) treeUiStateByTab.delete(nextTabId);
|
|
catalogExpandAll.checked = true;
|
|
}
|
|
treeInteractionLocked = state.isBusy === true || state.fixedSectionBatch != null;
|
|
return nextTabId;
|
|
}
|
|
|
|
function finishTreeRender(tabId) {
|
|
if (!tabId) return;
|
|
const keyboardMarketFocusPending = typeof window !== "undefined" &&
|
|
window.LegacyWorkspaceNavigation?.hasPendingKeyboardMarketFocus?.() === true;
|
|
decorateTreeNodes(tabId);
|
|
const details = Array.from(categoryTree.querySelectorAll("details[data-tree-section-key]"));
|
|
const roots = Array.from(categoryTree.querySelectorAll("summary[data-tree-root]"));
|
|
if (pendingTreeResetTabs.has(tabId) && roots.length === 0) {
|
|
const originalFocusedControl = tabId === "expert"
|
|
? categoryTree.querySelector("#expert-preview")
|
|
: null;
|
|
if (originalFocusedControl && !modalFocusManager.getActiveModal() &&
|
|
!keyboardMarketFocusPending) {
|
|
originalFocusedControl.focus({ preventScroll: true });
|
|
}
|
|
pendingTreeResetTabs.delete(tabId);
|
|
return;
|
|
}
|
|
if (pendingTreeResetTabs.has(tabId) && roots.length > 0) {
|
|
details.forEach(function (section) {
|
|
section.open = true;
|
|
syncTreeSectionExpanded(section);
|
|
});
|
|
const firstRoot = roots[0];
|
|
selectTreeNode(firstRoot,
|
|
!modalFocusManager.getActiveModal() && !keyboardMarketFocusPending);
|
|
if (typeof firstRoot.scrollIntoView === "function") {
|
|
firstRoot.scrollIntoView({ block: "nearest", inline: "nearest" });
|
|
}
|
|
treeUiStateByTab.set(tabId, {
|
|
openSections: new Map(details.map(function (section) {
|
|
return [section.dataset.treeSectionKey, true];
|
|
})),
|
|
selectedKey: firstRoot.dataset.treeNodeKey,
|
|
focusKey: firstRoot.dataset.treeNodeKey,
|
|
scrollTop: categoryTree.scrollTop
|
|
});
|
|
pendingTreeResetTabs.delete(tabId);
|
|
return;
|
|
}
|
|
|
|
const saved = treeUiStateByTab.get(tabId);
|
|
if (!saved) return;
|
|
if (saved.openSections instanceof Map) {
|
|
details.forEach(function (section) {
|
|
if (saved.openSections.has(section.dataset.treeSectionKey)) {
|
|
section.open = saved.openSections.get(section.dataset.treeSectionKey) === true;
|
|
}
|
|
syncTreeSectionExpanded(section);
|
|
});
|
|
}
|
|
const selected = findTreeNodeByKey(saved.selectedKey);
|
|
if (selected) selectTreeNode(selected, false);
|
|
const canRestoreFocus = treeFocusOwnedBeforeRender &&
|
|
!keyboardMarketFocusPending &&
|
|
!modalFocusManager.getActiveModal();
|
|
const focused = findTreeNodeByKey(saved.focusKey);
|
|
const control = canRestoreFocus && saved.controlFocus && saved.controlFocus.id
|
|
? document.getElementById(saved.controlFocus.id)
|
|
: null;
|
|
const canRestoreControl = control && categoryTree.contains(control) &&
|
|
control.disabled !== true && typeof control.focus === "function";
|
|
// A focused editor must never be blurred through the previously selected
|
|
// tree node. Apart from losing the local draft, that blur commits/cancels
|
|
// an in-progress Korean IME composition on every native status refresh.
|
|
if (canRestoreFocus && !canRestoreControl && focused &&
|
|
typeof focused.focus === "function") {
|
|
focused.focus({ preventScroll: true });
|
|
}
|
|
if (canRestoreControl) {
|
|
const controlWasRecreated = document.activeElement !== control;
|
|
if (controlWasRecreated && typeof saved.controlFocus.value === "string" &&
|
|
typeof control.value === "string") {
|
|
control.value = saved.controlFocus.value;
|
|
}
|
|
if (controlWasRecreated) control.focus({ preventScroll: true });
|
|
if (Number.isInteger(saved.controlFocus.selectionStart) &&
|
|
Number.isInteger(saved.controlFocus.selectionEnd) &&
|
|
typeof control.setSelectionRange === "function" && controlWasRecreated) {
|
|
try {
|
|
control.setSelectionRange(
|
|
saved.controlFocus.selectionStart,
|
|
saved.controlFocus.selectionEnd);
|
|
} catch (_) {
|
|
// Non-text controls can expose selection properties without accepting a range.
|
|
}
|
|
}
|
|
}
|
|
if (Number.isFinite(saved.scrollTop)) categoryTree.scrollTop = saved.scrollTop;
|
|
}
|
|
|
|
function send(type, payload) {
|
|
if (!webview || uiBusy) return false;
|
|
try {
|
|
webview.postMessage({ type: type, payload: payload || {} });
|
|
return true;
|
|
} catch (_) {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
function rememberSearchDraft(input) {
|
|
if (!input || !searchDraftInputIds.has(input.id)) return;
|
|
const previous = searchDrafts.get(input.id);
|
|
const stateValue = previous ? previous.stateValue : "";
|
|
searchDrafts.set(input.id, {
|
|
value: input.value,
|
|
stateValue: stateValue,
|
|
dirty: input.value !== stateValue,
|
|
scope: previous ? previous.scope : null
|
|
});
|
|
}
|
|
|
|
function syncSearchDraft(input, stateValue, scope) {
|
|
if (!input) return;
|
|
const canonicalStateValue = stateValue || "";
|
|
const canonicalScope = scope === undefined || scope === null ? null : String(scope);
|
|
const remembered = searchDrafts.get(input.id);
|
|
const previous = remembered && remembered.scope === canonicalScope
|
|
? remembered : null;
|
|
let next;
|
|
if (!previous) {
|
|
next = {
|
|
value: canonicalStateValue,
|
|
stateValue: canonicalStateValue,
|
|
dirty: false,
|
|
scope: canonicalScope
|
|
};
|
|
} else if (previous.value === canonicalStateValue) {
|
|
next = {
|
|
value: canonicalStateValue,
|
|
stateValue: canonicalStateValue,
|
|
dirty: false,
|
|
scope: canonicalScope
|
|
};
|
|
} else if (previous.dirty) {
|
|
next = {
|
|
value: previous.value,
|
|
stateValue: canonicalStateValue,
|
|
dirty: true,
|
|
scope: canonicalScope
|
|
};
|
|
} else {
|
|
next = {
|
|
value: canonicalStateValue,
|
|
stateValue: canonicalStateValue,
|
|
dirty: false,
|
|
scope: canonicalScope
|
|
};
|
|
}
|
|
searchDrafts.set(input.id, next);
|
|
if (document.activeElement !== input) input.value = next.value;
|
|
}
|
|
|
|
function forgetSearchDraft() {
|
|
Array.from(arguments).forEach(function (inputId) {
|
|
searchDrafts.delete(inputId);
|
|
});
|
|
}
|
|
|
|
function captureSearchDraftFocus(root) {
|
|
const input = document.activeElement;
|
|
if (!root || !input || !searchDraftInputIds.has(input.id) ||
|
|
typeof root.contains !== "function" || !root.contains(input)) return null;
|
|
rememberSearchDraft(input);
|
|
return {
|
|
inputId: input.id,
|
|
selectionStart: Number.isInteger(input.selectionStart) ? input.selectionStart : null,
|
|
selectionEnd: Number.isInteger(input.selectionEnd) ? input.selectionEnd : null,
|
|
selectionDirection: typeof input.selectionDirection === "string"
|
|
? input.selectionDirection : null
|
|
};
|
|
}
|
|
|
|
function restoreSearchDraftFocus(root, saved) {
|
|
if (!root || !saved || !saved.inputId) return false;
|
|
const input = document.getElementById(saved.inputId);
|
|
if (!input || input.disabled === true || typeof root.contains !== "function" ||
|
|
!root.contains(input) || typeof input.focus !== "function") return false;
|
|
if (document.activeElement !== input) input.focus({ preventScroll: true });
|
|
if (Number.isInteger(saved.selectionStart) && Number.isInteger(saved.selectionEnd) &&
|
|
typeof input.setSelectionRange === "function") {
|
|
try {
|
|
input.setSelectionRange(
|
|
saved.selectionStart,
|
|
saved.selectionEnd,
|
|
saved.selectionDirection || "none");
|
|
} catch (_) {
|
|
// Text-like modal inputs support ranges; retain focus if a host rejects one.
|
|
}
|
|
}
|
|
return true;
|
|
}
|
|
|
|
function isImeComposing(event) {
|
|
return event.isComposing === true || event.keyCode === 229;
|
|
}
|
|
|
|
function setTransientControlsBusy(root, busy) {
|
|
if (!root) return;
|
|
root.querySelectorAll("button, input, select, textarea").forEach(function (control) {
|
|
if (busy) {
|
|
if (control.dataset.busyDisabled === undefined) {
|
|
control.dataset.busyDisabled = control.disabled === true ? "true" : "false";
|
|
}
|
|
control.disabled = true;
|
|
} else if (control.dataset.busyDisabled !== undefined) {
|
|
control.disabled = control.dataset.busyDisabled === "true";
|
|
delete control.dataset.busyDisabled;
|
|
}
|
|
});
|
|
}
|
|
|
|
function isOperatorMutationLocked(state) {
|
|
const playout = state && state.playout;
|
|
return !state || state.isBusy === true || state.fixedSectionBatch != null ||
|
|
(playout && (playout.isBusy === true || playout.outcomeUnknown === true ||
|
|
playout.isPlayCompletionPending === true ||
|
|
playout.isTakeOutCompletionPending === true));
|
|
}
|
|
|
|
function isPlaylistStructureMutationLocked(state) {
|
|
const playout = state && state.playout;
|
|
return isOperatorMutationLocked(state) ||
|
|
(playout && playout.phase !== "idle");
|
|
}
|
|
|
|
function isPlaylistProgramEnableMutationLocked(state) {
|
|
const playout = state && state.playout;
|
|
return isOperatorMutationLocked(state) || !playout ||
|
|
(playout.phase !== "idle" && playout.phase !== "program");
|
|
}
|
|
|
|
function canDeleteSelectedPlaylistRows(state) {
|
|
if (isOperatorMutationLocked(state) || !state || !Array.isArray(state.playlist)) {
|
|
return false;
|
|
}
|
|
const selectedIndices = [];
|
|
state.playlist.forEach(function (row, index) {
|
|
if (row.isSelected === true) selectedIndices.push(index);
|
|
});
|
|
if (selectedIndices.length === 0) return false;
|
|
const playout = state.playout;
|
|
if (!playout || playout.phase === "idle") return true;
|
|
const currentIndex = Number(playout.currentCueIndexZeroBased);
|
|
return Number.isSafeInteger(currentIndex) && currentIndex >= 0 &&
|
|
selectedIndices.every(function (index) { return index > currentIndex; });
|
|
}
|
|
|
|
function isCutSelectionLocked(state) {
|
|
const playout = state && state.playout;
|
|
return !state || state.isBusy === true || state.fixedSectionBatch != null ||
|
|
(playout && (playout.isBusy === true || playout.outcomeUnknown === true ||
|
|
playout.isPlayCompletionPending === true ||
|
|
playout.isTakeOutCompletionPending === true));
|
|
}
|
|
|
|
function dragDropPosition(event, element) {
|
|
const bounds = element.getBoundingClientRect();
|
|
return event.clientY < bounds.top + (bounds.height / 2) ? "before" : "after";
|
|
}
|
|
|
|
function playlistPlayoutPresentation(state, row, position) {
|
|
const playout = state && state.playout;
|
|
const phase = playout && typeof playout.phase === "string"
|
|
? playout.phase : "idle";
|
|
const hasActiveScene = phase === "prepared" || phase === "program";
|
|
const currentEntryId = playout && typeof playout.currentEntryId === "string" &&
|
|
playout.currentEntryId.length > 0 ? playout.currentEntryId : null;
|
|
const currentIndex = playout && Number.isInteger(playout.currentCueIndexZeroBased)
|
|
? playout.currentCueIndexZeroBased : -1;
|
|
const isCurrent = hasActiveScene && (currentEntryId !== null
|
|
? currentEntryId === row.rowId
|
|
: currentIndex === position);
|
|
const pageCount = isCurrent && Number.isInteger(playout.pageCount) &&
|
|
playout.pageCount > 0 ? playout.pageCount : 0;
|
|
const pageIndex = isCurrent && Number.isInteger(playout.pageIndexZeroBased) &&
|
|
playout.pageIndexZeroBased >= 0 && playout.pageIndexZeroBased < pageCount
|
|
? playout.pageIndexZeroBased : -1;
|
|
|
|
return {
|
|
isSelected: row.isSelected === true,
|
|
isCurrent: isCurrent,
|
|
isOnAir: isCurrent && phase === "program",
|
|
pageText: pageIndex >= 0
|
|
? String(pageIndex + 1) + "/" + String(pageCount)
|
|
: row.pageText,
|
|
focusKey: isCurrent
|
|
? [phase, currentEntryId || row.rowId || currentIndex, pageIndex, pageCount].join(":")
|
|
: ""
|
|
};
|
|
}
|
|
|
|
function presentCurrentPlaylistRow(element, focusKey) {
|
|
if (!element || !focusKey) {
|
|
lastPresentedPlayoutRowKey = "";
|
|
return;
|
|
}
|
|
if (lastPresentedPlayoutRowKey === focusKey) return;
|
|
|
|
lastPresentedPlayoutRowKey = focusKey;
|
|
element.focus({ preventScroll: true });
|
|
if (typeof element.scrollIntoView === "function") {
|
|
element.scrollIntoView({ block: "nearest", inline: "nearest" });
|
|
}
|
|
}
|
|
|
|
function selectPlaylistBoundary(boundary) {
|
|
const rows = playlistRows.querySelectorAll(".playlist-data-row");
|
|
const element = boundary === "last"
|
|
? rows.item(rows.length - 1)
|
|
: rows.item(0);
|
|
if (!element) return;
|
|
|
|
// MainForm's KeyPreview changed the playlist selection but returned the
|
|
// base key result. Keep the textbox/ListBox caret and focus where the
|
|
// operator pressed Home/End; only mirror the playlist scroll/selection.
|
|
if (typeof element.scrollIntoView === "function") {
|
|
element.scrollIntoView({ block: "nearest", inline: "nearest" });
|
|
}
|
|
send("select-playlist-boundary", { boundary: boundary });
|
|
}
|
|
|
|
function movePlaylistKeyboardSelection(element, event) {
|
|
if (!element || uiBusy) return false;
|
|
const rows = Array.from(playlistRows.querySelectorAll(".playlist-data-row"));
|
|
const currentIndex = rows.indexOf(element);
|
|
if (currentIndex < 0 || rows.length === 0) return false;
|
|
const offset = event.key === "ArrowUp" ? -1 : 1;
|
|
const nextIndex = Math.max(0, Math.min(rows.length - 1, currentIndex + offset));
|
|
const next = rows[nextIndex];
|
|
next.focus({ preventScroll: true });
|
|
if (typeof next.scrollIntoView === "function") {
|
|
next.scrollIntoView({ block: "nearest", inline: "nearest" });
|
|
}
|
|
if (nextIndex !== currentIndex) {
|
|
send("select-playlist-row", {
|
|
rowId: next.dataset.rowId,
|
|
control: event.ctrlKey,
|
|
shift: event.shiftKey
|
|
});
|
|
}
|
|
return true;
|
|
}
|
|
|
|
const fallbackDoubleClickTimeMilliseconds = 500;
|
|
const maximumDoubleClickTimeMilliseconds = 5000;
|
|
const doubleClickTimerGraceMilliseconds = 50;
|
|
let doubleClickTimeMilliseconds = fallbackDoubleClickTimeMilliseconds;
|
|
|
|
function updateDoubleClickTime(state) {
|
|
const candidate = state && state.interactionMetrics &&
|
|
state.interactionMetrics.doubleClickTimeMilliseconds;
|
|
doubleClickTimeMilliseconds = Number.isInteger(candidate) && candidate > 0 &&
|
|
candidate <= maximumDoubleClickTimeMilliseconds
|
|
? candidate
|
|
: fallbackDoubleClickTimeMilliseconds;
|
|
}
|
|
|
|
function deferLegacySingleClick(callback) {
|
|
return window.setTimeout(
|
|
callback,
|
|
doubleClickTimeMilliseconds + doubleClickTimerGraceMilliseconds);
|
|
}
|
|
|
|
function clearDelayedClick(timer) {
|
|
if (timer !== null) window.clearTimeout(timer);
|
|
}
|
|
|
|
function pendingSelectionContainer(row) {
|
|
if (!row || typeof row.closest !== "function") return null;
|
|
return row.closest("[role=\"listbox\"]") || row.parentElement;
|
|
}
|
|
|
|
function applyPendingRowSelection(pending, focus) {
|
|
if (!pending || !pending.container || !pending.row ||
|
|
pending.container.isConnected === false || pending.row.isConnected === false) {
|
|
return false;
|
|
}
|
|
pending.rows.forEach(function (entry) {
|
|
if (!entry.element || entry.element.isConnected === false) return;
|
|
const selected = entry.element === pending.row;
|
|
entry.element.classList.toggle("selected", selected);
|
|
entry.element.setAttribute("aria-selected", selected ? "true" : "false");
|
|
entry.element.tabIndex = selected ? 0 : -1;
|
|
});
|
|
if (pending.row.id) {
|
|
pending.container.setAttribute("aria-activedescendant", pending.row.id);
|
|
}
|
|
if (focus !== false && typeof pending.row.focus === "function") {
|
|
pending.row.focus({ preventScroll: true });
|
|
}
|
|
return true;
|
|
}
|
|
|
|
function createPendingRowSelection(row, rowSelector, key) {
|
|
const container = pendingSelectionContainer(row);
|
|
if (!container) return null;
|
|
const rows = Array.from(container.querySelectorAll(rowSelector)).map(function (element) {
|
|
return {
|
|
element: element,
|
|
selected: element.classList.contains("selected"),
|
|
ariaSelected: element.getAttribute("aria-selected"),
|
|
tabIndex: element.tabIndex
|
|
};
|
|
});
|
|
const pending = {
|
|
key: key,
|
|
row: row,
|
|
container: container,
|
|
rows: rows,
|
|
activeDescendant: container.getAttribute("aria-activedescendant"),
|
|
sent: false,
|
|
lockedControls: []
|
|
};
|
|
applyPendingRowSelection(pending, true);
|
|
return pending;
|
|
}
|
|
|
|
function restorePendingRowSelection(pending) {
|
|
if (!pending || !pending.container || pending.container.isConnected === false) return;
|
|
pending.rows.forEach(function (entry) {
|
|
if (!entry.element || entry.element.isConnected === false) return;
|
|
entry.element.classList.toggle("selected", entry.selected);
|
|
entry.element.setAttribute(
|
|
"aria-selected",
|
|
entry.ariaSelected === null ? "false" : entry.ariaSelected);
|
|
entry.element.tabIndex = entry.tabIndex;
|
|
});
|
|
if (pending.activeDescendant) {
|
|
pending.container.setAttribute("aria-activedescendant", pending.activeDescendant);
|
|
} else if (typeof pending.container.removeAttribute === "function") {
|
|
pending.container.removeAttribute("aria-activedescendant");
|
|
}
|
|
}
|
|
|
|
function lockPendingControls(root, selector) {
|
|
if (!root) return [];
|
|
const controls = Array.from(root.querySelectorAll(selector));
|
|
const locked = controls.map(function (control) {
|
|
return { control: control, disabled: control.disabled === true };
|
|
});
|
|
controls.forEach(function (control) { control.disabled = true; });
|
|
return locked;
|
|
}
|
|
|
|
function applyPendingControlLocks(lockedControls) {
|
|
(lockedControls || []).forEach(function (entry) {
|
|
if (entry.control && entry.control.isConnected !== false) {
|
|
entry.control.disabled = true;
|
|
}
|
|
});
|
|
}
|
|
|
|
function releasePendingControlLocks(lockedControls) {
|
|
(lockedControls || []).forEach(function (entry) {
|
|
const control = entry.control;
|
|
if (!control || control.isConnected === false) return;
|
|
if (control.dataset && control.dataset.busyDisabled !== undefined) {
|
|
// Keep a host busy snapshot authoritative while correcting the semantic
|
|
// value that setTransientControlsBusy will restore when that snapshot ends.
|
|
control.dataset.busyDisabled = entry.disabled ? "true" : "false";
|
|
} else {
|
|
control.disabled = entry.disabled;
|
|
}
|
|
});
|
|
}
|
|
|
|
function finishPendingRowSelection(pending, restoreVisual) {
|
|
if (!pending) return;
|
|
releasePendingControlLocks(pending.lockedControls);
|
|
if (restoreVisual === true) restorePendingRowSelection(pending);
|
|
}
|
|
|
|
function clearManualResultPendingSelection(restoreVisual) {
|
|
clearDelayedClick(manualResultClickTimer);
|
|
manualResultClickTimer = null;
|
|
const pending = manualResultPendingSelection;
|
|
manualResultPendingSelection = null;
|
|
finishPendingRowSelection(pending, restoreVisual);
|
|
}
|
|
|
|
function clearThemeResultPendingSelection(restoreVisual) {
|
|
clearDelayedClick(themeResultClickTimer);
|
|
themeResultClickTimer = null;
|
|
const pending = themeResultPendingSelection;
|
|
themeResultPendingSelection = null;
|
|
finishPendingRowSelection(pending, restoreVisual);
|
|
}
|
|
|
|
function clearComparisonTargetPendingSelection(restoreVisual) {
|
|
clearDelayedClick(comparisonTargetClickTimer);
|
|
comparisonTargetClickTimer = null;
|
|
const pending = comparisonTargetPendingSelection;
|
|
comparisonTargetPendingSelection = null;
|
|
finishPendingRowSelection(pending, restoreVisual);
|
|
}
|
|
|
|
function clearManualViResultPendingSelection(restoreVisual) {
|
|
clearDelayedClick(manualViResultClickTimer);
|
|
manualViResultClickTimer = null;
|
|
const pending = manualViResultPendingSelection;
|
|
manualViResultPendingSelection = null;
|
|
finishPendingRowSelection(pending, restoreVisual);
|
|
}
|
|
|
|
function beginManualResultPendingSelection(row) {
|
|
const key = row.dataset.manualResultId;
|
|
if (manualResultPendingSelection && !manualResultPendingSelection.sent &&
|
|
manualResultPendingSelection.key === key) {
|
|
applyPendingRowSelection(manualResultPendingSelection, true);
|
|
applyPendingControlLocks(manualResultPendingSelection.lockedControls);
|
|
return manualResultPendingSelection;
|
|
}
|
|
clearManualResultPendingSelection(true);
|
|
manualResultPendingSelection = createPendingRowSelection(
|
|
row,
|
|
"button[data-manual-result-id]",
|
|
key);
|
|
if (manualResultPendingSelection) {
|
|
manualResultPendingSelection.lockedControls = lockPendingControls(
|
|
manualWorkspace,
|
|
".manual-financial-editor input, .manual-financial-editor select, " +
|
|
".manual-financial-editor textarea, button[data-manual-stock-search], " +
|
|
"button[data-manual-stock-result-id], button[data-manual-save], " +
|
|
"button[data-manual-delete], button[data-manual-delete-all], " +
|
|
"button[data-manual-action-id]");
|
|
}
|
|
return manualResultPendingSelection;
|
|
}
|
|
|
|
function beginThemeResultPendingSelection(row) {
|
|
const key = row.dataset.themeResultId;
|
|
if (themeResultPendingSelection && !themeResultPendingSelection.sent &&
|
|
themeResultPendingSelection.key === key) {
|
|
applyPendingRowSelection(themeResultPendingSelection, true);
|
|
applyPendingControlLocks(themeResultPendingSelection.lockedControls);
|
|
return themeResultPendingSelection;
|
|
}
|
|
clearThemeResultPendingSelection(true);
|
|
themeResultPendingSelection = createPendingRowSelection(
|
|
row,
|
|
"button[data-theme-result-id]",
|
|
key);
|
|
if (themeResultPendingSelection) {
|
|
themeResultPendingSelection.lockedControls = lockPendingControls(
|
|
categoryTree,
|
|
"button[data-theme-action-id], #uc4-theme-edit, #uc4-theme-delete");
|
|
}
|
|
return themeResultPendingSelection;
|
|
}
|
|
|
|
function beginComparisonTargetPendingSelection(row, key) {
|
|
if (comparisonTargetPendingSelection && !comparisonTargetPendingSelection.sent &&
|
|
comparisonTargetPendingSelection.key === key) {
|
|
applyPendingRowSelection(comparisonTargetPendingSelection, true);
|
|
return comparisonTargetPendingSelection;
|
|
}
|
|
clearComparisonTargetPendingSelection(true);
|
|
comparisonTargetPendingSelection = createPendingRowSelection(
|
|
row,
|
|
row.dataset.comparisonTargetId
|
|
? "button[data-comparison-target-id]"
|
|
: "button[data-comparison-selection-id]",
|
|
key);
|
|
if (comparisonTargetPendingSelection) {
|
|
comparisonTargetPendingSelection.kind = row.dataset.comparisonTargetId
|
|
? "fixed" : row.dataset.comparisonChoice;
|
|
}
|
|
return comparisonTargetPendingSelection;
|
|
}
|
|
|
|
function beginManualViResultPendingSelection(row, key) {
|
|
if (manualViResultPendingSelection && !manualViResultPendingSelection.sent &&
|
|
manualViResultPendingSelection.key === key) {
|
|
applyPendingRowSelection(manualViResultPendingSelection, true);
|
|
return manualViResultPendingSelection;
|
|
}
|
|
clearManualViResultPendingSelection(true);
|
|
manualViResultPendingSelection = createPendingRowSelection(
|
|
row,
|
|
"button[data-manual-vi-result-id]",
|
|
key);
|
|
return manualViResultPendingSelection;
|
|
}
|
|
|
|
function isRovingListNavigationKey(key) {
|
|
return key === "ArrowUp" || key === "ArrowDown" ||
|
|
key === "Home" || key === "End" ||
|
|
key === "PageUp" || key === "PageDown";
|
|
}
|
|
|
|
function rovingListRows(list) {
|
|
return list
|
|
? Array.from(list.querySelectorAll("[data-roving-row]"))
|
|
: [];
|
|
}
|
|
|
|
function configureRovingList(list, rows, selectedRow, options) {
|
|
if (!list) return;
|
|
const settings = options || {};
|
|
list.dataset.rovingList = "true";
|
|
list.dataset.rovingPageSize = String(
|
|
Number.isSafeInteger(settings.pageSize) && settings.pageSize > 0
|
|
? settings.pageSize : 9);
|
|
list.dataset.rovingSelectionFollowsFocus =
|
|
settings.selectionFollowsFocus === false ? "false" : "true";
|
|
list.dataset.rovingActivation = settings.activation === "focus"
|
|
? "focus" : "select";
|
|
list.setAttribute("role", settings.listRole || "listbox");
|
|
const enabledRows = rows.filter(isRovingListRowAvailable);
|
|
const tabStop = selectedRow && isRovingListRowAvailable(selectedRow)
|
|
? selectedRow
|
|
: (enabledRows[0] || null);
|
|
rows.forEach(function (row) {
|
|
row.dataset.rovingRow = "true";
|
|
row.setAttribute("role", settings.rowRole || "option");
|
|
row.tabIndex = row === tabStop ? 0 : -1;
|
|
});
|
|
// An empty WinForms ListBox is still one tab stop. Once it has rows, the
|
|
// selected (or first selectable) row carries that one stop for WebView2.
|
|
list.tabIndex = tabStop ? -1 : 0;
|
|
}
|
|
|
|
function isRovingListRowAvailable(row) {
|
|
if (!row || row.disabled === true ||
|
|
row.getAttribute("aria-disabled") === "true") return false;
|
|
if (row.dataset && row.dataset.treeNodeKey &&
|
|
row.dataset.treeRoot !== "true" && typeof row.closest === "function") {
|
|
const details = row.closest("details");
|
|
if (details && details.open !== true) return false;
|
|
}
|
|
return true;
|
|
}
|
|
|
|
function rovingListPageSize(list) {
|
|
const value = list && list.dataset
|
|
? Number(list.dataset.rovingPageSize) : NaN;
|
|
return Number.isSafeInteger(value) && value > 0 ? value : 9;
|
|
}
|
|
|
|
function rovingListKeyTarget(list, currentRow, key) {
|
|
if (!list || !isRovingListNavigationKey(key)) return null;
|
|
const rows = rovingListRows(list).filter(isRovingListRowAvailable);
|
|
if (rows.length === 0) return null;
|
|
let index = rows.indexOf(currentRow);
|
|
if (index < 0) {
|
|
index = rows.findIndex(function (row) {
|
|
return row.getAttribute("aria-selected") === "true";
|
|
});
|
|
}
|
|
if (key === "Home") return rows[0];
|
|
if (key === "End") return rows[rows.length - 1];
|
|
if (index < 0) {
|
|
return key === "PageDown"
|
|
? rows[Math.min(rows.length - 1, rovingListPageSize(list))]
|
|
: rows[0];
|
|
}
|
|
const offset = key === "PageUp" || key === "PageDown"
|
|
? rovingListPageSize(list) : 1;
|
|
return key === "ArrowUp" || key === "PageUp"
|
|
? rows[Math.max(0, index - offset)]
|
|
: rows[Math.min(rows.length - 1, index + offset)];
|
|
}
|
|
|
|
function setRovingListTabStop(list, row) {
|
|
if (!list || !row || !isRovingListRowAvailable(row)) return false;
|
|
rovingListRows(list).forEach(function (candidate) {
|
|
candidate.tabIndex = candidate === row ? 0 : -1;
|
|
});
|
|
list.tabIndex = -1;
|
|
return true;
|
|
}
|
|
|
|
function focusRovingListRow(list, row, select) {
|
|
if (!setRovingListTabStop(list, row)) return false;
|
|
rovingListRows(list).forEach(function (candidate) {
|
|
const isTarget = candidate === row;
|
|
if (select === true) {
|
|
candidate.classList.toggle("selected", isTarget);
|
|
candidate.setAttribute("aria-selected", isTarget ? "true" : "false");
|
|
}
|
|
});
|
|
if (document.activeElement !== row) row.focus({ preventScroll: true });
|
|
if (typeof row.scrollIntoView === "function") {
|
|
row.scrollIntoView({ block: "nearest", inline: "nearest" });
|
|
}
|
|
return true;
|
|
}
|
|
|
|
function moveRovingListSelection(list, currentRow, key, activate) {
|
|
const target = rovingListKeyTarget(list, currentRow, key);
|
|
if (!target) return false;
|
|
const selectionChanged = target.getAttribute("aria-selected") !== "true";
|
|
const focusOnly = list.dataset.rovingActivation === "focus";
|
|
if (!focusOnly && selectionChanged && activate(target) === false) return false;
|
|
return focusRovingListRow(
|
|
list,
|
|
target,
|
|
list.dataset.rovingSelectionFollowsFocus !== "false");
|
|
}
|
|
|
|
function stockResultPageOffset(button) {
|
|
const itemHeight = button && Number.isFinite(button.offsetHeight)
|
|
? button.offsetHeight
|
|
: 0;
|
|
const viewportHeight = Number.isFinite(stockResults.clientHeight)
|
|
? stockResults.clientHeight
|
|
: 0;
|
|
if (itemHeight <= 0 || viewportHeight <= 0) return 9;
|
|
|
|
// The native 174 px ListBox exposes ten 17 px rows and PageUp/PageDown
|
|
// retain one boundary row, so its selection moves by visibleRows - 1.
|
|
const visibleRows = Math.max(1, Math.floor(viewportHeight / itemHeight));
|
|
return Math.max(1, visibleRows - 1);
|
|
}
|
|
|
|
function stockResultKeyTarget(results, key) {
|
|
if (!results || results.length === 0) return null;
|
|
|
|
let selectedPosition = -1;
|
|
for (let position = 0; position < results.length; position += 1) {
|
|
if (results.item(position).getAttribute("aria-selected") === "true") {
|
|
selectedPosition = position;
|
|
break;
|
|
}
|
|
}
|
|
|
|
const pageOffset = stockResultPageOffset(results.item(0));
|
|
let targetPosition;
|
|
if (key === "End") {
|
|
targetPosition = results.length - 1;
|
|
} else if (key === "Home") {
|
|
targetPosition = 0;
|
|
} else if (key === "ArrowUp" || key === "PageUp") {
|
|
const offset = key === "ArrowUp" ? 1 : pageOffset;
|
|
targetPosition = selectedPosition < 0 ? 0 : selectedPosition - offset;
|
|
} else if (key === "ArrowDown" || key === "PageDown") {
|
|
const offset = key === "ArrowDown" ? 1 : pageOffset;
|
|
targetPosition = selectedPosition < 0
|
|
? (key === "PageDown" ? offset : 0)
|
|
: selectedPosition + offset;
|
|
} else {
|
|
return null;
|
|
}
|
|
|
|
return results.item(Math.max(0, Math.min(results.length - 1, targetPosition)));
|
|
}
|
|
|
|
function selectStockResult(button, focus) {
|
|
if (!button || button.disabled || uiBusy) return;
|
|
const results = stockResults.querySelectorAll("button[data-result-index]");
|
|
const selectionChanged = button.getAttribute("aria-selected") !== "true";
|
|
for (let position = 0; position < results.length; position += 1) {
|
|
const result = results.item(position);
|
|
const isSelected = result === button;
|
|
result.tabIndex = isSelected ? 0 : -1;
|
|
result.classList.toggle("selected", isSelected);
|
|
result.setAttribute("aria-selected", isSelected ? "true" : "false");
|
|
}
|
|
if (focus === true) {
|
|
button.focus({ preventScroll: true });
|
|
if (typeof button.scrollIntoView === "function") {
|
|
button.scrollIntoView({ block: "nearest", inline: "nearest" });
|
|
}
|
|
}
|
|
if (selectionChanged) {
|
|
send("select-stock", { resultIndex: Number(button.dataset.resultIndex) });
|
|
}
|
|
}
|
|
|
|
function createStockResultElement(row) {
|
|
const button = document.createElement("button");
|
|
button.type = "button";
|
|
button.dataset.resultIndex = String(row.index);
|
|
button.setAttribute("role", "option");
|
|
button.addEventListener("click", function () {
|
|
selectStockResult(button, false);
|
|
});
|
|
button.addEventListener("keydown", function (event) {
|
|
const results = stockResults.querySelectorAll("button[data-result-index]");
|
|
const target = stockResultKeyTarget(results, event.key);
|
|
if (!target) return;
|
|
// Consume only the native ListBox navigation behavior. Home/End continue
|
|
// bubbling to MainForm's KeyPreview-equivalent playlist boundary handler.
|
|
event.preventDefault();
|
|
selectStockResult(target, true);
|
|
});
|
|
return button;
|
|
}
|
|
|
|
function renderStockResults(state) {
|
|
let hasSelectedResult = false;
|
|
state.searchResults.forEach(function (row, position) {
|
|
let button = stockResults.children.item(position);
|
|
if (!button || button.dataset.resultIndex !== String(row.index)) {
|
|
button = createStockResultElement(row);
|
|
if (position < stockResults.children.length) {
|
|
stockResults.replaceChild(button, stockResults.children.item(position));
|
|
} else {
|
|
stockResults.appendChild(button);
|
|
}
|
|
}
|
|
|
|
const isSelected = state.selectedStockIndex === row.index;
|
|
if (isSelected) hasSelectedResult = true;
|
|
button.className = "stock-result" + (isSelected ? " selected" : "");
|
|
button.setAttribute("aria-disabled", state.isBusy === true ? "true" : "false");
|
|
button.disabled = state.isBusy === true;
|
|
button.textContent = row.displayName;
|
|
button.setAttribute("aria-selected", isSelected ? "true" : "false");
|
|
button.tabIndex = isSelected ? 0 : -1;
|
|
});
|
|
|
|
while (stockResults.children.length > state.searchResults.length) {
|
|
stockResults.lastElementChild.remove();
|
|
}
|
|
|
|
// A WinForms ListBox is one tab stop even before it has a selection.
|
|
if (!hasSelectedResult && stockResults.children.length > 0) {
|
|
stockResults.children.item(0).tabIndex = 0;
|
|
}
|
|
}
|
|
|
|
function renderStockSearchMeta(state) {
|
|
const results = Array.isArray(state.searchResults) ? state.searchResults : [];
|
|
const selected = results.find(function (row) {
|
|
return row.index === state.selectedStockIndex;
|
|
});
|
|
let label = "";
|
|
|
|
if (state.isBusy === true) {
|
|
label = "검색 중";
|
|
} else if (results.length > 0 || String(state.searchText || "").trim().length > 0) {
|
|
label = String(results.length) + "건";
|
|
if (selected && selected.displayName) {
|
|
label += " · " + selected.displayName;
|
|
}
|
|
}
|
|
|
|
stockSearchMeta.textContent = label;
|
|
stockSearchMeta.hidden = label.length === 0;
|
|
if (state.isBusy !== true && results.length === 0) {
|
|
stockResults.dataset.emptyLabel = "결과 없음";
|
|
} else {
|
|
delete stockResults.dataset.emptyLabel;
|
|
}
|
|
}
|
|
|
|
function pointerPosition(event) {
|
|
const bounds = cutList.getBoundingClientRect();
|
|
return {
|
|
x: event.clientX - bounds.left,
|
|
y: event.clientY - bounds.top
|
|
};
|
|
}
|
|
|
|
function pointInsideElement(element, event) {
|
|
if (!element || typeof element.getBoundingClientRect !== "function") return false;
|
|
const bounds = element.getBoundingClientRect();
|
|
return event.clientX >= bounds.left && event.clientX < bounds.right &&
|
|
event.clientY >= bounds.top && event.clientY < bounds.bottom;
|
|
}
|
|
|
|
function clearCutDragGesture(releaseCapture) {
|
|
const gesture = cutDragGesture;
|
|
cutDragGesture = null;
|
|
playlistDropZone.classList.remove("cut-drag-over");
|
|
cutDragFeedback.hidden = true;
|
|
cutDragFeedback.classList.remove("allowed");
|
|
delete cutDragFeedback.dataset.dropAllowed;
|
|
cutDragFeedback.style.removeProperty("left");
|
|
cutDragFeedback.style.removeProperty("top");
|
|
if (!gesture) return;
|
|
gesture.element.classList.remove("dragging", "drag-allowed");
|
|
if (releaseCapture !== false &&
|
|
typeof gesture.element.hasPointerCapture === "function" &&
|
|
gesture.element.hasPointerCapture(gesture.pointerId) &&
|
|
typeof gesture.element.releasePointerCapture === "function") {
|
|
try {
|
|
gesture.element.releasePointerCapture(gesture.pointerId);
|
|
} catch (_) {
|
|
// The browser may release capture between the key event and cleanup.
|
|
}
|
|
}
|
|
}
|
|
|
|
function showCutDragFeedback(event, allowed) {
|
|
cutDragFeedback.hidden = false;
|
|
cutDragFeedback.classList.toggle("allowed", allowed);
|
|
cutDragFeedback.dataset.dropAllowed = allowed ? "true" : "false";
|
|
const gap = 14;
|
|
const viewportWidth = document.documentElement.clientWidth;
|
|
const viewportHeight = document.documentElement.clientHeight;
|
|
const width = cutDragFeedback.offsetWidth;
|
|
const height = cutDragFeedback.offsetHeight;
|
|
const left = Math.max(4, Math.min(event.clientX + gap, viewportWidth - width - 4));
|
|
const top = Math.max(4, Math.min(event.clientY + gap, viewportHeight - height - 4));
|
|
cutDragFeedback.style.left = Math.round(left) + "px";
|
|
cutDragFeedback.style.top = Math.round(top) + "px";
|
|
}
|
|
|
|
function beginCutDragGesture(element, event, position) {
|
|
clearCutDragGesture();
|
|
if (event.button !== 0) return;
|
|
cutDragGesture = {
|
|
element: element,
|
|
pointerId: event.pointerId,
|
|
down: position,
|
|
rectangle: window.LegacyCutDrag.createDragRectangle(position, cutDragSize),
|
|
started: false
|
|
};
|
|
if (typeof element.setPointerCapture === "function") {
|
|
try {
|
|
element.setPointerCapture(event.pointerId);
|
|
} catch (_) {
|
|
// Pointer capture can fail if the WebView has already released it.
|
|
}
|
|
}
|
|
}
|
|
|
|
function onCutPointerMove(event) {
|
|
const gesture = cutDragGesture;
|
|
if (!gesture || gesture.element !== event.currentTarget ||
|
|
gesture.pointerId !== event.pointerId) return;
|
|
if ((event.buttons & 1) !== 1) {
|
|
clearCutDragGesture();
|
|
return;
|
|
}
|
|
if (!gesture.started &&
|
|
window.LegacyCutDrag.shouldStart(gesture.rectangle, pointerPosition(event))) {
|
|
gesture.started = true;
|
|
gesture.element.classList.add("dragging");
|
|
}
|
|
if (gesture.started) {
|
|
event.preventDefault();
|
|
const dropAllowed = !playlistMutationLocked &&
|
|
pointInsideElement(playlistDropZone, event);
|
|
gesture.element.classList.toggle("drag-allowed", dropAllowed);
|
|
playlistDropZone.classList.toggle("cut-drag-over", dropAllowed);
|
|
showCutDragFeedback(event, dropAllowed);
|
|
}
|
|
}
|
|
|
|
function onCutPointerUp(event) {
|
|
const gesture = cutDragGesture;
|
|
if (!gesture || gesture.element !== event.currentTarget ||
|
|
gesture.pointerId !== event.pointerId) return;
|
|
const shouldDrop = gesture.started && !playlistMutationLocked &&
|
|
pointInsideElement(playlistDropZone, event);
|
|
clearCutDragGesture();
|
|
if (shouldDrop) send("drop-selected-cuts", {});
|
|
}
|
|
|
|
function onCutPointerCancel(event) {
|
|
const gesture = cutDragGesture;
|
|
if (gesture && gesture.element === event.currentTarget &&
|
|
gesture.pointerId === event.pointerId) {
|
|
clearCutDragGesture(event.type !== "lostpointercapture");
|
|
}
|
|
}
|
|
|
|
function legacyCutKey(key) {
|
|
return {
|
|
ArrowUp: "arrow-up",
|
|
ArrowDown: "arrow-down",
|
|
Home: "home",
|
|
End: "end",
|
|
" ": "space"
|
|
}[key] || null;
|
|
}
|
|
|
|
function focusCutElement(element, scroll) {
|
|
if (!element) return;
|
|
Array.from(cutList.children).forEach(function (row) {
|
|
row.tabIndex = row === element ? 0 : -1;
|
|
});
|
|
element.focus({ preventScroll: true });
|
|
if (scroll && typeof element.scrollIntoView === "function") {
|
|
element.scrollIntoView({ block: "nearest", inline: "nearest" });
|
|
}
|
|
}
|
|
|
|
function cutKeyboardTarget(element, key) {
|
|
const rows = Array.from(cutList.children);
|
|
const index = rows.indexOf(element);
|
|
if (index < 0 || rows.length === 0) return null;
|
|
if (key === "ArrowUp") return rows[Math.max(0, index - 1)];
|
|
if (key === "ArrowDown") return rows[Math.min(rows.length - 1, index + 1)];
|
|
if (key === "Home") return rows[0];
|
|
if (key === "End") return rows[rows.length - 1];
|
|
return element;
|
|
}
|
|
|
|
function createCutElement(row) {
|
|
const element = document.createElement("div");
|
|
element.setAttribute("role", "option");
|
|
element.dataset.physicalIndex = String(row.physicalIndex);
|
|
element.tabIndex = -1;
|
|
element.draggable = false;
|
|
|
|
const number = document.createElement("span");
|
|
number.className = "cut-number";
|
|
number.textContent = row.displayOrdinal === null ? "" : String(row.displayOrdinal);
|
|
const label = document.createElement("span");
|
|
label.textContent = row.rawLabel;
|
|
element.append(number, label);
|
|
|
|
element.addEventListener("pointerdown", function (event) {
|
|
if (!cutSelectionEnabled) return event.preventDefault();
|
|
focusCutElement(element, false);
|
|
const position = pointerPosition(event);
|
|
send("cut-pointer-down", {
|
|
physicalIndex: row.physicalIndex,
|
|
control: event.ctrlKey,
|
|
shift: event.shiftKey,
|
|
// C# retains integer coordinates only for the native double-click
|
|
// equality contract. Drag geometry keeps the raw fractional CSS point.
|
|
x: Math.round(position.x),
|
|
y: Math.round(position.y),
|
|
timestampMilliseconds: Math.max(0, Math.round(event.timeStamp)),
|
|
allowAppend: !playlistMutationLocked
|
|
});
|
|
if (!playlistMutationLocked) {
|
|
beginCutDragGesture(element, event, position);
|
|
}
|
|
});
|
|
element.addEventListener("pointermove", onCutPointerMove);
|
|
element.addEventListener("pointerup", onCutPointerUp);
|
|
element.addEventListener("pointercancel", onCutPointerCancel);
|
|
element.addEventListener("lostpointercapture", onCutPointerCancel);
|
|
element.addEventListener("keydown", function (event) {
|
|
const key = legacyCutKey(event.key);
|
|
if (!key) return;
|
|
// The native ListView consumes these keys. Home/End still bubble to the
|
|
// document-level MainForm KeyPreview equivalent for its playlist side effect.
|
|
event.preventDefault();
|
|
if (!cutSelectionEnabled) return;
|
|
const target = cutKeyboardTarget(element, event.key);
|
|
focusCutElement(target, true);
|
|
send("cut-key-down", {
|
|
key: key,
|
|
control: event.ctrlKey,
|
|
shift: event.shiftKey
|
|
});
|
|
});
|
|
return element;
|
|
}
|
|
|
|
function renderCuts(state) {
|
|
const cutDragLocked = isOperatorMutationLocked(state);
|
|
cutSelectionEnabled = Number.isInteger(state.selectedStockIndex) &&
|
|
!isCutSelectionLocked(state);
|
|
const focusedCutIndex = state.cutRows.findIndex(function (row) {
|
|
return row.isFocused === true;
|
|
});
|
|
// renderCuts precedes renderPlaylist, so publish the same lock before a
|
|
// cut row can initiate an append drag for this state revision.
|
|
playlistMutationLocked = cutDragLocked;
|
|
if (!cutSelectionEnabled || cutDragLocked ||
|
|
(cutDragGesture && !cutList.contains(cutDragGesture.element))) {
|
|
clearCutDragGesture();
|
|
}
|
|
state.cutRows.forEach(function (row, index) {
|
|
let element = cutList.children.item(index);
|
|
if (!element || element.dataset.physicalIndex !== String(row.physicalIndex)) {
|
|
element = createCutElement(row);
|
|
if (index < cutList.children.length) {
|
|
cutList.replaceChild(element, cutList.children.item(index));
|
|
} else {
|
|
cutList.appendChild(element);
|
|
}
|
|
}
|
|
|
|
element.className = "cut-row" +
|
|
(row.isSelected ? " selected" : "") +
|
|
(row.isSeparator ? " separator" : "") +
|
|
(cutDragGesture && cutDragGesture.element === element && cutDragGesture.started
|
|
? " dragging" : "");
|
|
element.setAttribute("aria-selected", row.isSelected ? "true" : "false");
|
|
element.setAttribute("aria-disabled", state.isBusy === true ? "true" : "false");
|
|
element.tabIndex = row.isFocused === true || (focusedCutIndex < 0 && index === 0)
|
|
? 0
|
|
: -1;
|
|
element.draggable = false;
|
|
element.dataset.cutDragEnabled = cutSelectionEnabled && !cutDragLocked
|
|
? "true"
|
|
: "false";
|
|
});
|
|
|
|
while (cutList.children.length > state.cutRows.length) {
|
|
cutList.lastElementChild.remove();
|
|
}
|
|
if (cutDragGesture && !cutList.contains(cutDragGesture.element)) {
|
|
clearCutDragGesture();
|
|
}
|
|
|
|
if (state.cutRows.length === 0) {
|
|
cutList.dataset.emptyLabel = Number.isInteger(state.selectedStockIndex)
|
|
? "컷 없음"
|
|
: "종목을 선택하세요";
|
|
} else {
|
|
delete cutList.dataset.emptyLabel;
|
|
}
|
|
}
|
|
|
|
cutList.addEventListener("pointerdown", function (event) {
|
|
if (event.target !== cutList || !cutSelectionEnabled) return;
|
|
send("clear-cut-selection", {});
|
|
});
|
|
|
|
function clearPlaylistDragVisuals() {
|
|
playlistRows.querySelectorAll(".dragging, .drag-allowed, .drag-before, .drag-after")
|
|
.forEach(function (row) {
|
|
row.classList.remove("dragging", "drag-allowed", "drag-before", "drag-after");
|
|
});
|
|
}
|
|
|
|
function playlistPointerPosition(event) {
|
|
const bounds = playlistRows.getBoundingClientRect();
|
|
return {
|
|
x: event.clientX - bounds.left,
|
|
y: event.clientY - bounds.top
|
|
};
|
|
}
|
|
|
|
function playlistRowHeaderAtPoint(event) {
|
|
if (typeof document.elementFromPoint !== "function") return null;
|
|
const pointed = document.elementFromPoint(event.clientX, event.clientY);
|
|
const header = pointed && typeof pointed.closest === "function"
|
|
? pointed.closest(".playlist-row-header") : null;
|
|
return header && playlistRows.contains(header) ? header : null;
|
|
}
|
|
|
|
function clearPlaylistDragGesture(releaseCapture) {
|
|
const gesture = playlistDragGesture;
|
|
if (!gesture) return;
|
|
playlistDragGesture = null;
|
|
clearPlaylistDragVisuals();
|
|
if (releaseCapture !== false &&
|
|
typeof gesture.handle.hasPointerCapture === "function" &&
|
|
gesture.handle.hasPointerCapture(gesture.pointerId) &&
|
|
typeof gesture.handle.releasePointerCapture === "function") {
|
|
try {
|
|
gesture.handle.releasePointerCapture(gesture.pointerId);
|
|
} catch (_) {
|
|
// Chromium can release capture before the final cleanup callback.
|
|
}
|
|
}
|
|
}
|
|
|
|
function beginPlaylistDragGesture(handle, row, event) {
|
|
clearPlaylistDragGesture();
|
|
if (playlistStructureMutationLocked || event.button !== 0 || !row.dataset.rowId) return;
|
|
const position = playlistPointerPosition(event);
|
|
playlistDragGesture = {
|
|
handle: handle,
|
|
row: row,
|
|
rowId: row.dataset.rowId,
|
|
pointerId: event.pointerId,
|
|
down: position,
|
|
rectangle: window.LegacyCutDrag.createDragRectangle(position, cutDragSize),
|
|
started: false,
|
|
targetRowId: null,
|
|
position: null
|
|
};
|
|
if (typeof handle.setPointerCapture === "function") {
|
|
try {
|
|
handle.setPointerCapture(event.pointerId);
|
|
} catch (_) {
|
|
// Pointer capture can fail if WebView2 has already released the pointer.
|
|
}
|
|
}
|
|
}
|
|
|
|
function onPlaylistPointerMove(event) {
|
|
const gesture = playlistDragGesture;
|
|
if (!gesture || gesture.handle !== event.currentTarget ||
|
|
gesture.pointerId !== event.pointerId) return;
|
|
if ((event.buttons & 1) !== 1) {
|
|
deferredPlaylistPlainSelectionRowId = null;
|
|
clearPlaylistDragGesture();
|
|
return;
|
|
}
|
|
if (!gesture.started && window.LegacyCutDrag.shouldStart(
|
|
gesture.rectangle, playlistPointerPosition(event))) {
|
|
gesture.started = true;
|
|
deferredPlaylistPlainSelectionRowId = null;
|
|
gesture.row.classList.add("dragging");
|
|
}
|
|
if (!gesture.started) return;
|
|
|
|
event.preventDefault();
|
|
playlistRows.querySelectorAll(".drag-before, .drag-after").forEach(function (row) {
|
|
row.classList.remove("drag-before", "drag-after");
|
|
});
|
|
const targetHeader = playlistRowHeaderAtPoint(event);
|
|
const targetRow = targetHeader ? targetHeader.closest(".playlist-data-row") : null;
|
|
if (!targetRow || targetRow === gesture.row) {
|
|
gesture.targetRowId = null;
|
|
gesture.position = null;
|
|
gesture.row.classList.remove("drag-allowed");
|
|
return;
|
|
}
|
|
|
|
gesture.targetRowId = targetRow.dataset.rowId || null;
|
|
gesture.position = dragDropPosition(event, targetRow);
|
|
gesture.row.classList.toggle("drag-allowed", gesture.targetRowId !== null);
|
|
targetRow.classList.toggle("drag-before", gesture.position === "before");
|
|
targetRow.classList.toggle("drag-after", gesture.position === "after");
|
|
}
|
|
|
|
function onPlaylistPointerUp(event) {
|
|
const gesture = playlistDragGesture;
|
|
if (!gesture || gesture.handle !== event.currentTarget ||
|
|
gesture.pointerId !== event.pointerId) return;
|
|
const targetHeader = gesture.started ? playlistRowHeaderAtPoint(event) : null;
|
|
const targetRow = targetHeader ? targetHeader.closest(".playlist-data-row") : null;
|
|
const targetRowId = targetRow && targetRow !== gesture.row
|
|
? targetRow.dataset.rowId || null : null;
|
|
const shouldReorder = gesture.started && !playlistStructureMutationLocked &&
|
|
targetRowId && targetRowId !== gesture.rowId;
|
|
const sourceRowId = gesture.rowId;
|
|
const position = targetRow ? dragDropPosition(event, targetRow) : null;
|
|
const wasStarted = gesture.started;
|
|
clearPlaylistDragGesture();
|
|
if (!wasStarted) return;
|
|
|
|
deferredPlaylistPlainSelectionRowId = null;
|
|
event.preventDefault();
|
|
if (shouldReorder) {
|
|
send("reorder-playlist-rows", {
|
|
sourceRowId: sourceRowId,
|
|
targetRowId: targetRowId,
|
|
position: position
|
|
});
|
|
}
|
|
}
|
|
|
|
function onPlaylistPointerCancel(event) {
|
|
const gesture = playlistDragGesture;
|
|
if (!gesture || gesture.handle !== event.currentTarget ||
|
|
gesture.pointerId !== event.pointerId) return;
|
|
deferredPlaylistPlainSelectionRowId = null;
|
|
clearPlaylistDragGesture(event.type !== "lostpointercapture");
|
|
}
|
|
|
|
function createPlaylistElement(row) {
|
|
const element = document.createElement("div");
|
|
element.className = "playlist-row playlist-data-row";
|
|
element.dataset.rowId = row.rowId;
|
|
element.setAttribute("role", "option");
|
|
element.tabIndex = -1;
|
|
element.draggable = false;
|
|
|
|
const rowHeader = document.createElement("div");
|
|
rowHeader.className = "playlist-row-header";
|
|
rowHeader.setAttribute("role", "presentation");
|
|
rowHeader.draggable = false;
|
|
rowHeader.addEventListener("pointerdown", function (event) {
|
|
// FarPoint reports a row-header press separately from normal data-cell
|
|
// selection. It changes the active row used by F8, but it does not
|
|
// rewrite MainForm's Ctrl/Shift deletion set.
|
|
event.stopPropagation();
|
|
element.focus({ preventScroll: true });
|
|
send("activate-playlist-row", { rowId: element.dataset.rowId });
|
|
beginPlaylistDragGesture(rowHeader, element, event);
|
|
});
|
|
rowHeader.addEventListener("pointermove", onPlaylistPointerMove);
|
|
rowHeader.addEventListener("pointerup", onPlaylistPointerUp);
|
|
rowHeader.addEventListener("pointercancel", onPlaylistPointerCancel);
|
|
rowHeader.addEventListener("lostpointercapture", onPlaylistPointerCancel);
|
|
element.appendChild(rowHeader);
|
|
|
|
const enabledCell = document.createElement("div");
|
|
enabledCell.className = "enabled-cell";
|
|
const enabled = document.createElement("input");
|
|
enabled.type = "checkbox";
|
|
enabled.tabIndex = -1;
|
|
enabled.draggable = false;
|
|
enabled.addEventListener("click", function (event) {
|
|
if (playlistStructureMutationLocked) event.preventDefault();
|
|
});
|
|
enabled.addEventListener("change", function () {
|
|
if (playlistStructureMutationLocked) return;
|
|
send("set-playlist-enabled", {
|
|
rowId: element.dataset.rowId,
|
|
enabled: enabled.checked
|
|
});
|
|
});
|
|
enabledCell.appendChild(enabled);
|
|
element.appendChild(enabledCell);
|
|
|
|
for (let index = 0; index < 5; index += 1) {
|
|
element.appendChild(document.createElement("div"));
|
|
}
|
|
|
|
element.addEventListener("pointerdown", function (event) {
|
|
if (event.button !== 0) return;
|
|
if (enabledCell.contains(event.target)) {
|
|
element.focus({ preventScroll: true });
|
|
send("activate-playlist-row", { rowId: element.dataset.rowId });
|
|
return;
|
|
}
|
|
element.focus({ preventScroll: true });
|
|
const plainSelection = !event.ctrlKey && !event.shiftKey;
|
|
const deferSelectedRowPlainClickForDrag = plainSelection &&
|
|
element.getAttribute("aria-selected") === "true" &&
|
|
playlistRows.querySelectorAll('.playlist-data-row[aria-selected="true"]').length > 1;
|
|
if (deferSelectedRowPlainClickForDrag) {
|
|
deferredPlaylistPlainSelectionRowId = element.dataset.rowId;
|
|
return;
|
|
}
|
|
|
|
deferredPlaylistPlainSelectionRowId = null;
|
|
send("select-playlist-row", {
|
|
rowId: element.dataset.rowId,
|
|
control: event.ctrlKey,
|
|
shift: event.shiftKey
|
|
});
|
|
});
|
|
element.addEventListener("pointerup", function (event) {
|
|
if (enabledCell.contains(event.target)) {
|
|
return;
|
|
}
|
|
if (event.button !== 0 ||
|
|
deferredPlaylistPlainSelectionRowId !== element.dataset.rowId) return;
|
|
deferredPlaylistPlainSelectionRowId = null;
|
|
send("select-playlist-row", {
|
|
rowId: element.dataset.rowId,
|
|
control: false,
|
|
shift: false
|
|
});
|
|
});
|
|
element.addEventListener("pointercancel", function () {
|
|
if (deferredPlaylistPlainSelectionRowId === element.dataset.rowId) {
|
|
deferredPlaylistPlainSelectionRowId = null;
|
|
}
|
|
});
|
|
element.addEventListener("dragstart", function (event) {
|
|
// Only the 30 px row header owns the pointer-capture reorder gesture.
|
|
// Suppress Chromium's native text/checkbox/row drag path completely.
|
|
event.preventDefault();
|
|
});
|
|
return element;
|
|
}
|
|
|
|
function renderPlaylist(state) {
|
|
playlistMutationLocked = isOperatorMutationLocked(state);
|
|
playlistStructureMutationLocked = isPlaylistStructureMutationLocked(state);
|
|
playlistProgramEnableMutationLocked =
|
|
isPlaylistProgramEnableMutationLocked(state);
|
|
playlistDeleteSelectedLocked = !canDeleteSelectedPlaylistRows(state);
|
|
if (playlistStructureMutationLocked) {
|
|
deferredPlaylistPlainSelectionRowId = null;
|
|
clearPlaylistDragGesture();
|
|
}
|
|
const existingRows = new Map();
|
|
let currentPlayoutRow = null;
|
|
let currentPlayoutFocusKey = "";
|
|
Array.from(playlistRows.children).forEach(function (element) {
|
|
existingRows.set(element.dataset.rowId, element);
|
|
});
|
|
|
|
state.playlist.forEach(function (row, position) {
|
|
const presentation = playlistPlayoutPresentation(state, row, position);
|
|
let element = existingRows.get(row.rowId);
|
|
if (!element) {
|
|
element = createPlaylistElement(row);
|
|
}
|
|
|
|
const elementAtPosition = playlistRows.children.item(position);
|
|
if (elementAtPosition !== element) {
|
|
playlistRows.insertBefore(element, elementAtPosition);
|
|
}
|
|
|
|
const enabled = element.querySelector("input");
|
|
const rowHeader = element.querySelector(".playlist-row-header");
|
|
rowHeader.textContent = String(position + 1);
|
|
rowHeader.title = String(position + 1);
|
|
rowHeader.setAttribute("aria-label", String(position + 1) + "번 행 이동 핸들");
|
|
rowHeader.dataset.dragEnabled = playlistStructureMutationLocked ? "false" : "true";
|
|
enabled.checked = row.isEnabled;
|
|
enabled.disabled = false;
|
|
enabled.setAttribute("aria-disabled", playlistStructureMutationLocked ? "true" : "false");
|
|
const isCandidate = row.isActive === true;
|
|
const isDragSource = playlistDragGesture?.started === true &&
|
|
playlistDragGesture.rowId === row.rowId;
|
|
const dragTargetPosition = playlistDragGesture?.started === true &&
|
|
playlistDragGesture.targetRowId === row.rowId
|
|
? playlistDragGesture.position
|
|
: null;
|
|
element.className = "playlist-row playlist-data-row" +
|
|
(presentation.isOnAir ? " on-air" : "") +
|
|
(presentation.isCurrent ? " playout-current" : "") +
|
|
(presentation.isSelected || isCandidate ? " selected" : "") +
|
|
(row.isSceneResolved === false ? " scene-unresolved" : "") +
|
|
(isDragSource ? " dragging" : "") +
|
|
(dragTargetPosition === "before" ? " drag-before" : "") +
|
|
(dragTargetPosition === "after" ? " drag-after" : "");
|
|
element.dataset.active = isCandidate ? "true" : "false";
|
|
element.setAttribute(
|
|
"aria-selected",
|
|
presentation.isSelected ? "true" : "false");
|
|
element.setAttribute(
|
|
"aria-current",
|
|
presentation.isCurrent ? "true" : "false");
|
|
const accessibleStates = [];
|
|
if (presentation.isOnAir) accessibleStates.push("현재 PGM");
|
|
if (isCandidate) accessibleStates.push("송출 후보");
|
|
if (presentation.isSelected) accessibleStates.push("삭제 선택됨");
|
|
if (row.isSceneResolved === false) accessibleStates.push("장면 확인 필요");
|
|
element.title = row.isSceneResolved === false
|
|
? "기존 데이터는 정상 로드되었습니다. 이 행은 송출할 때 장면 이름을 다시 확인합니다."
|
|
: "";
|
|
element.setAttribute(
|
|
"aria-label",
|
|
accessibleStates.concat([
|
|
row.marketText,
|
|
row.stockName,
|
|
row.graphicType,
|
|
row.subtype,
|
|
presentation.pageText
|
|
]).filter(Boolean).join(", "));
|
|
element.draggable = false;
|
|
element.setAttribute("aria-disabled", playlistMutationLocked ? "true" : "false");
|
|
[row.marketText, row.stockName, row.graphicType, row.subtype, presentation.pageText]
|
|
.forEach(function (text, cellIndex) {
|
|
const cell = element.children.item(cellIndex + 2);
|
|
cell.textContent = text;
|
|
cell.title = text;
|
|
});
|
|
if (presentation.isCurrent) {
|
|
currentPlayoutRow = element;
|
|
currentPlayoutFocusKey = presentation.focusKey;
|
|
}
|
|
});
|
|
|
|
const retainedRowIds = new Set(state.playlist.map(function (row) { return row.rowId; }));
|
|
Array.from(playlistRows.children).forEach(function (element) {
|
|
if (!retainedRowIds.has(element.dataset.rowId)) element.remove();
|
|
});
|
|
if (playlistDragGesture && !retainedRowIds.has(playlistDragGesture.rowId)) {
|
|
deferredPlaylistPlainSelectionRowId = null;
|
|
clearPlaylistDragGesture();
|
|
}
|
|
presentCurrentPlaylistRow(currentPlayoutRow, currentPlayoutFocusKey);
|
|
|
|
const interactionDisabled = playlistStructureMutationLocked;
|
|
const enabledCount = state.playlist.filter(function (row) { return row.isEnabled; }).length;
|
|
const nextHeadingCount = `총 ${state.playlist.length}개 · 송출 ${enabledCount}개`;
|
|
if (playlistHeadingCount.textContent !== nextHeadingCount) {
|
|
playlistHeadingCount.textContent = nextHeadingCount;
|
|
}
|
|
playlistEnableAll.checked = state.playlist.length === 0 || enabledCount === state.playlist.length;
|
|
playlistEnableAll.indeterminate = enabledCount > 0 && enabledCount < state.playlist.length;
|
|
playlistEnableAll.disabled = playlistProgramEnableMutationLocked;
|
|
playlistMoveUp.disabled = interactionDisabled;
|
|
playlistMoveDown.disabled = interactionDisabled;
|
|
playlistDeleteSelected.disabled = playlistDeleteSelectedLocked;
|
|
playlistDeleteAll.disabled = interactionDisabled;
|
|
}
|
|
|
|
function tabOrderFromDom() {
|
|
return Array.from(marketTabs.querySelectorAll("button[data-tab-id]"))
|
|
.map(function (button) { return button.dataset.tabId; });
|
|
}
|
|
|
|
function clearPendingTabHoverSwap() {
|
|
if (pendingTabHoverSwap && pendingTabHoverSwap.timeoutId !== null) {
|
|
window.clearTimeout(pendingTabHoverSwap.timeoutId);
|
|
}
|
|
pendingTabHoverSwap = null;
|
|
}
|
|
|
|
function acknowledgePendingTabHoverSwap(order) {
|
|
if (!pendingTabHoverSwap) return;
|
|
const orderKey = order.join("|");
|
|
if (orderKey === pendingTabHoverSwap.expectedOrderKey ||
|
|
orderKey !== pendingTabHoverSwap.initialOrderKey) {
|
|
clearPendingTabHoverSwap();
|
|
}
|
|
}
|
|
|
|
function hasCrossedLegacyTabSwapThreshold(
|
|
source,
|
|
target,
|
|
clientX,
|
|
sourceIndex,
|
|
targetIndex
|
|
) {
|
|
if (!source || !target || !Number.isFinite(clientX) ||
|
|
sourceIndex < 0 || targetIndex < 0 || sourceIndex === targetIndex) return false;
|
|
|
|
const sourceRect = source.getBoundingClientRect();
|
|
const targetRect = target.getBoundingClientRect();
|
|
if (sourceRect.width < targetRect.width) {
|
|
// MainForm compensates for the narrow source width so merely entering a
|
|
// wider target cannot immediately swap it. Its comparisons are strict.
|
|
return sourceIndex < targetIndex
|
|
? clientX > targetRect.left + targetRect.width - sourceRect.width
|
|
: clientX < targetRect.left + sourceRect.width;
|
|
}
|
|
|
|
// An equal-width or wider source swaps as soon as it enters another tab.
|
|
return true;
|
|
}
|
|
|
|
function onMarketTabDragOver(event) {
|
|
const target = event.target.closest("button[data-tab-id]");
|
|
if (!target || !draggedTabId) return;
|
|
event.preventDefault();
|
|
if (event.dataTransfer) event.dataTransfer.dropEffect = "move";
|
|
const targetId = target.dataset.tabId;
|
|
if (targetId === draggedTabId) {
|
|
tabDragLastTargetId = null;
|
|
return;
|
|
}
|
|
if (tabDragLastTargetId === targetId || pendingTabHoverSwap) return;
|
|
|
|
const buttons = Array.from(
|
|
marketTabs.querySelectorAll("button[data-tab-id]"));
|
|
const source = buttons.find(function (button) {
|
|
return button.dataset.tabId === draggedTabId;
|
|
});
|
|
const sourceIndex = buttons.indexOf(source);
|
|
const targetIndex = buttons.indexOf(target);
|
|
if (!hasCrossedLegacyTabSwapThreshold(
|
|
source,
|
|
target,
|
|
event.clientX,
|
|
sourceIndex,
|
|
targetIndex)) return;
|
|
|
|
// Record the crossing only when the busy/pending gates actually accepted
|
|
// the opaque native intent. Repeated dragover events then cannot toggle it.
|
|
if (requestTabHoverSwap(targetId)) tabDragLastTargetId = targetId;
|
|
}
|
|
|
|
function requestTabHoverSwap(targetId) {
|
|
if (uiBusy || !draggedTabId || !targetId || draggedTabId === targetId ||
|
|
pendingTabHoverSwap) return false;
|
|
|
|
const order = tabOrderFromDom();
|
|
const sourceIndex = order.indexOf(draggedTabId);
|
|
const targetIndex = order.indexOf(targetId);
|
|
if (sourceIndex < 0 || targetIndex < 0 || sourceIndex === targetIndex) return false;
|
|
|
|
const expectedOrder = order.slice();
|
|
expectedOrder[sourceIndex] = targetId;
|
|
expectedOrder[targetIndex] = draggedTabId;
|
|
const pending = {
|
|
initialOrderKey: order.join("|"),
|
|
expectedOrderKey: expectedOrder.join("|"),
|
|
timeoutId: null
|
|
};
|
|
pending.timeoutId = window.setTimeout(function () {
|
|
if (pendingTabHoverSwap === pending) {
|
|
pendingTabHoverSwap = null;
|
|
tabDragLastTargetId = null;
|
|
}
|
|
}, 500);
|
|
pendingTabHoverSwap = pending;
|
|
send("hover-swap-tabs", {
|
|
source: draggedTabId,
|
|
target: targetId,
|
|
expectedSourceIndex: sourceIndex,
|
|
expectedTargetIndex: targetIndex
|
|
});
|
|
return true;
|
|
}
|
|
|
|
function renderTabs(state) {
|
|
if (!Array.isArray(state.tabs)) return;
|
|
const existingTabs = new Map();
|
|
Array.from(marketTabs.children).forEach(function (button) {
|
|
existingTabs.set(button.dataset.tabId, button);
|
|
});
|
|
state.tabs.forEach(function (tab, position) {
|
|
const button = existingTabs.get(tab.id);
|
|
if (!button) return;
|
|
const buttonAtPosition = marketTabs.children.item(position);
|
|
if (buttonAtPosition !== button) marketTabs.insertBefore(button, buttonAtPosition);
|
|
const label = button.querySelector(".workspace-nav-label");
|
|
if (label) label.textContent = tab.label;
|
|
else button.textContent = tab.label;
|
|
button.setAttribute("aria-label", tab.label);
|
|
button.title = tab.label;
|
|
button.classList.toggle("active", tab.isActive === true);
|
|
button.disabled = state.isBusy === true || state.fixedSectionBatch != null;
|
|
button.draggable = state.isBusy !== true && state.fixedSectionBatch == null;
|
|
});
|
|
const activeTab = state.tabs.find(function (tab) { return tab.isActive === true; });
|
|
// Keep the clicked menu highlighted while native tab loading is in flight.
|
|
// The busy snapshot still carries the previous active tab; only reconcile
|
|
// once the authoritative operation has completed.
|
|
if (activeTab && state.isBusy !== true &&
|
|
window.LegacyWorkspaceNavigation?.syncMarket) {
|
|
window.LegacyWorkspaceNavigation.syncMarket(activeTab.id, {
|
|
authoritativeNativeRender: true
|
|
});
|
|
}
|
|
acknowledgePendingTabHoverSwap(
|
|
state.tabs.map(function (tab) { return tab.id; }));
|
|
}
|
|
|
|
function renderFixedCatalog(state) {
|
|
const catalog = state.fixedCatalog;
|
|
const batch = state.fixedSectionBatch;
|
|
if (!catalog || !Array.isArray(catalog.sections)) {
|
|
return;
|
|
}
|
|
|
|
const fragment = document.createDocumentFragment();
|
|
catalog.sections.forEach(function (section) {
|
|
const details = document.createElement("details");
|
|
details.className = "catalog-section";
|
|
details.open = catalogExpandAll.checked;
|
|
const summary = document.createElement("summary");
|
|
summary.dataset.sectionIndex = String(section.index);
|
|
summary.dataset.cardCount = String(section.actions.length);
|
|
summary.textContent = section.name;
|
|
summary.title = batch
|
|
? "현재 수동 입력 단계를 완료하거나 취소하세요."
|
|
: "하위 항목을 더블클릭해 편성표에 추가합니다.";
|
|
summary.setAttribute("aria-disabled", batch ? "true" : "false");
|
|
const children = document.createElement("div");
|
|
children.className = "catalog-actions";
|
|
markVisualCardList(children, "fixed-actions");
|
|
section.actions.forEach(function (action) {
|
|
const button = document.createElement("button");
|
|
button.type = "button";
|
|
button.className = "tree-item" + (action.isAvailable ? "" : " unavailable");
|
|
button.dataset.actionId = action.id;
|
|
setVisualCardContent(button, {
|
|
title: action.label,
|
|
meta: action.isAvailable
|
|
? (action.detail === section.name ? "" : action.detail)
|
|
: action.prerequisite,
|
|
kind: "fixed"
|
|
});
|
|
button.title = action.isAvailable ? action.detail : action.prerequisite;
|
|
button.disabled = state.isBusy === true || batch != null;
|
|
children.appendChild(button);
|
|
});
|
|
details.append(summary, children);
|
|
fragment.appendChild(details);
|
|
});
|
|
categoryTree.replaceChildren(fragment);
|
|
}
|
|
|
|
function markIndustryRowSelected(row) {
|
|
categoryTree.querySelectorAll("button[data-industry-index]").forEach(function (candidate) {
|
|
const selected = candidate === row;
|
|
candidate.classList.toggle("selected", selected);
|
|
candidate.setAttribute("aria-selected", selected ? "true" : "false");
|
|
});
|
|
const list = row.closest(".industry-list");
|
|
if (list) list.setAttribute("aria-activedescendant", row.id);
|
|
}
|
|
|
|
function selectIndustryRow(row) {
|
|
markIndustryRowSelected(row);
|
|
const list = row.closest(".industry-list");
|
|
if (list) list.focus({ preventScroll: true });
|
|
send("select-industry", { index: Number(row.dataset.industryIndex) });
|
|
}
|
|
|
|
function activateIndustryRow(row) {
|
|
markIndustryRowSelected(row);
|
|
const list = row.closest(".industry-list");
|
|
if (list) list.focus({ preventScroll: true });
|
|
send("double-click-industry", { index: Number(row.dataset.industryIndex) });
|
|
}
|
|
|
|
function renderIndustry(state) {
|
|
const industry = state.industry;
|
|
if (!industry || !Array.isArray(industry.industries) || !Array.isArray(industry.actions)) {
|
|
return;
|
|
}
|
|
|
|
const structureKey = JSON.stringify({
|
|
market: industry.market,
|
|
rows: industry.industries.map(function (row) {
|
|
return [row.index, row.name];
|
|
}),
|
|
actions: industry.actions.map(function (action) {
|
|
return [action.actionId, action.section, action.label];
|
|
})
|
|
});
|
|
const existingWorkspace = categoryTree.querySelector(".industry-workspace");
|
|
if (existingWorkspace && structureKey === industryRenderStructureKey) {
|
|
const firstInput = existingWorkspace.querySelector('input[data-industry-slot="first"]');
|
|
const secondInput = existingWorkspace.querySelector('input[data-industry-slot="second"]');
|
|
if (firstInput && document.activeElement !== firstInput) {
|
|
firstInput.value = industry.firstName || "";
|
|
}
|
|
if (secondInput && document.activeElement !== secondInput) {
|
|
secondInput.value = industry.secondName || "";
|
|
}
|
|
const list = existingWorkspace.querySelector(".industry-list");
|
|
let selectedRow = null;
|
|
existingWorkspace.querySelectorAll("button[data-industry-index]")
|
|
.forEach(function (row) {
|
|
const selected = Number(row.dataset.industryIndex) === industry.selectedIndex;
|
|
row.classList.toggle("selected", selected);
|
|
row.setAttribute("aria-selected", selected ? "true" : "false");
|
|
if (selected) selectedRow = row;
|
|
});
|
|
if (list && selectedRow) {
|
|
list.setAttribute("aria-activedescendant", selectedRow.id);
|
|
} else if (list) {
|
|
list.removeAttribute("aria-activedescendant");
|
|
}
|
|
return;
|
|
}
|
|
|
|
const previousList = categoryTree.querySelector(".industry-list");
|
|
const previousScrollTop = previousList ? previousList.scrollTop : 0;
|
|
const focusedIndustry = document.activeElement &&
|
|
document.activeElement.closest("button[data-industry-index]");
|
|
const focusedIndustryIndex = focusedIndustry
|
|
? focusedIndustry.dataset.industryIndex : null;
|
|
|
|
const workspace = document.createElement("div");
|
|
workspace.className = "industry-workspace";
|
|
const selector = document.createElement("section");
|
|
selector.className = "industry-selector";
|
|
const slots = document.createElement("div");
|
|
slots.className = "industry-slots";
|
|
const first = document.createElement("input");
|
|
first.id = "industry-comparison-first";
|
|
first.dataset.industrySlot = "first";
|
|
first.maxLength = 128;
|
|
first.autocomplete = "off";
|
|
first.value = industry.firstName || "";
|
|
first.setAttribute("aria-label", "첫 번째 업종");
|
|
const swap = document.createElement("button");
|
|
swap.type = "button";
|
|
swap.dataset.industrySwap = "true";
|
|
swap.textContent = "◀▶";
|
|
const second = document.createElement("input");
|
|
second.id = "industry-comparison-second";
|
|
second.dataset.industrySlot = "second";
|
|
second.maxLength = 128;
|
|
second.autocomplete = "off";
|
|
second.value = industry.secondName || "";
|
|
second.setAttribute("aria-label", "두 번째 업종");
|
|
slots.append(first, swap, second);
|
|
const list = document.createElement("div");
|
|
list.className = "industry-list";
|
|
list.setAttribute("role", "listbox");
|
|
list.tabIndex = 0;
|
|
industry.industries.forEach(function (row) {
|
|
const button = document.createElement("button");
|
|
button.type = "button";
|
|
button.id = "industry-row-" + row.index;
|
|
button.dataset.industryIndex = String(row.index);
|
|
button.tabIndex = -1;
|
|
button.setAttribute("role", "option");
|
|
button.textContent = row.name;
|
|
button.className = industry.selectedIndex === row.index ? "selected" : "";
|
|
button.setAttribute("aria-selected", industry.selectedIndex === row.index ? "true" : "false");
|
|
if (industry.selectedIndex === row.index) {
|
|
list.setAttribute("aria-activedescendant", button.id);
|
|
}
|
|
list.appendChild(button);
|
|
});
|
|
const comparisonTitle = document.createElement("strong");
|
|
comparisonTitle.textContent = "업종비교";
|
|
selector.append(list, comparisonTitle, slots);
|
|
|
|
const actionTree = document.createElement("section");
|
|
actionTree.className = "industry-action-tree";
|
|
const group = document.createElement("details");
|
|
group.open = catalogExpandAll.checked;
|
|
const summary = document.createElement("summary");
|
|
summary.textContent = industry.market === "kospi" ? "코스피" : "코스닥";
|
|
summary.dataset.industrySectionIndex = "0";
|
|
summary.dataset.cardCount = String(industry.actions.length);
|
|
const actionCards = document.createElement("div");
|
|
actionCards.className = "catalog-actions";
|
|
markVisualCardList(actionCards, "industry-actions");
|
|
group.append(summary, actionCards);
|
|
industry.actions.forEach(function (action) {
|
|
const button = document.createElement("button");
|
|
button.type = "button";
|
|
button.className = "tree-item";
|
|
button.dataset.industryActionId = action.actionId;
|
|
setVisualCardContent(button, {
|
|
title: action.label,
|
|
kind: "industry"
|
|
});
|
|
actionCards.appendChild(button);
|
|
});
|
|
actionTree.appendChild(group);
|
|
workspace.append(selector, actionTree);
|
|
categoryTree.replaceChildren(workspace);
|
|
list.scrollTop = previousScrollTop;
|
|
if (focusedIndustryIndex !== null) {
|
|
const replacement = Array.from(
|
|
list.querySelectorAll("button[data-industry-index]"))
|
|
.find(function (row) {
|
|
return row.dataset.industryIndex === focusedIndustryIndex;
|
|
});
|
|
if (replacement) replacement.focus({ preventScroll: true });
|
|
}
|
|
industryRenderStructureKey = structureKey;
|
|
}
|
|
|
|
function updateOverseasWorkspace(workspace, overseas, isBusy) {
|
|
[
|
|
["fixed", overseas.selectedFixedIndexId],
|
|
["industry", overseas.industry.selectedId],
|
|
["stock", overseas.stock.selectedId]
|
|
].forEach(function (selection) {
|
|
const kind = selection[0];
|
|
const selectedId = selection[1];
|
|
const list = workspace.querySelector('[data-overseas-list="' + kind + '"]');
|
|
if (!list) return;
|
|
list.setAttribute("aria-disabled", isBusy ? "true" : "false");
|
|
let selected = null;
|
|
list.querySelectorAll("button").forEach(function (button) {
|
|
const id = kind === "fixed"
|
|
? button.dataset.overseasTargetId : button.dataset.overseasSelectionId;
|
|
const isSelected = id === selectedId;
|
|
button.classList.toggle("selected", isSelected);
|
|
button.setAttribute("aria-selected", isSelected ? "true" : "false");
|
|
button.disabled = isBusy;
|
|
if (isSelected) selected = button;
|
|
});
|
|
if (selected) list.setAttribute("aria-activedescendant", selected.id);
|
|
else list.removeAttribute("aria-activedescendant");
|
|
});
|
|
|
|
["industry", "stock"].forEach(function (kind) {
|
|
const input = workspace.querySelector("#overseas-" + kind + "-search");
|
|
syncSearchDraft(input, overseas[kind].query);
|
|
if (input) input.readOnly = isBusy;
|
|
const search = workspace.querySelector('button[data-overseas-search="' + kind + '"]');
|
|
if (search) search.disabled = isBusy;
|
|
});
|
|
|
|
const actionStates = new Map(overseas.actions.map(function (action) {
|
|
return [action.actionId, action];
|
|
}));
|
|
workspace.querySelectorAll("button[data-overseas-action-id]").forEach(function (button) {
|
|
const action = actionStates.get(button.dataset.overseasActionId);
|
|
if (!action) return;
|
|
button.disabled = isBusy || !action.isAvailable;
|
|
button.title = action.isAvailable ? "Add to playlist" : action.reason || "Select an item first.";
|
|
});
|
|
}
|
|
|
|
function markOverseasRowSelected(row) {
|
|
const list = row.closest("[data-overseas-list]");
|
|
if (!list) return;
|
|
list.querySelectorAll("button").forEach(function (candidate) {
|
|
const selected = candidate === row;
|
|
candidate.classList.toggle("selected", selected);
|
|
candidate.setAttribute("aria-selected", selected ? "true" : "false");
|
|
});
|
|
list.setAttribute("aria-activedescendant", row.id);
|
|
}
|
|
|
|
function selectOverseasRow(row) {
|
|
markOverseasRowSelected(row);
|
|
const list = row.closest("[data-overseas-list]");
|
|
if (list) list.focus({ preventScroll: true });
|
|
if (row.dataset.overseasTargetId) {
|
|
send("select-overseas-fixed-index", { targetId: row.dataset.overseasTargetId });
|
|
return;
|
|
}
|
|
send(row.dataset.overseasResultKind === "stock"
|
|
? "select-overseas-stock" : "select-overseas-industry", {
|
|
selectionId: row.dataset.overseasSelectionId
|
|
});
|
|
}
|
|
|
|
function moveOverseasListSelection(list, key) {
|
|
if (!list || list.getAttribute("aria-disabled") === "true") return false;
|
|
const rows = Array.from(list.querySelectorAll("button"));
|
|
if (rows.length === 0) return false;
|
|
const selectedIndex = rows.findIndex(function (row) {
|
|
return row.getAttribute("aria-selected") === "true";
|
|
});
|
|
let nextIndex;
|
|
if (key === "Home") nextIndex = 0;
|
|
else if (key === "End") nextIndex = rows.length - 1;
|
|
else if (selectedIndex < 0) nextIndex = 0;
|
|
else if (key === "ArrowUp") nextIndex = Math.max(0, selectedIndex - 1);
|
|
else nextIndex = Math.min(rows.length - 1, selectedIndex + 1);
|
|
if (nextIndex === selectedIndex) return false;
|
|
const nextRow = rows[nextIndex];
|
|
selectOverseasRow(nextRow);
|
|
nextRow.scrollIntoView({ block: "nearest", inline: "nearest" });
|
|
return true;
|
|
}
|
|
|
|
function renderOverseas(state) {
|
|
const overseas = state.overseas;
|
|
if (!overseas || !Array.isArray(overseas.fixedIndexTargets) ||
|
|
!overseas.industry || !overseas.stock || !Array.isArray(overseas.actions)) return;
|
|
|
|
const structureKey = JSON.stringify({
|
|
fixed: overseas.fixedIndexTargets.map(function (row) {
|
|
return [row.targetId, row.displayName];
|
|
}),
|
|
industry: (overseas.industry.results || []).map(function (row) {
|
|
return [row.selectionId, row.displayName];
|
|
}),
|
|
industryTruncated: overseas.industry.isTruncated === true,
|
|
stock: (overseas.stock.results || []).map(function (row) {
|
|
return [row.selectionId, row.displayName];
|
|
}),
|
|
stockTruncated: overseas.stock.isTruncated === true,
|
|
actions: overseas.actions.map(function (action) {
|
|
return [action.actionId, action.source, action.periodDays];
|
|
})
|
|
});
|
|
const existingWorkspace = categoryTree.querySelector(".overseas-workspace");
|
|
if (existingWorkspace && structureKey === overseasRenderStructureKey) {
|
|
updateOverseasWorkspace(existingWorkspace, overseas, state.isBusy === true);
|
|
return;
|
|
}
|
|
|
|
function actionButton(action, label) {
|
|
const button = document.createElement("button");
|
|
button.type = "button";
|
|
button.dataset.overseasActionId = action.actionId;
|
|
button.textContent = label;
|
|
button.disabled = state.isBusy === true || !action.isAvailable;
|
|
button.title = action.isAvailable ? "Add to playlist" : action.reason || "Select an item first.";
|
|
return button;
|
|
}
|
|
|
|
function periodButtons(source) {
|
|
const buttons = document.createElement("div");
|
|
buttons.className = "overseas-period-actions";
|
|
overseas.actions.filter(function (action) {
|
|
return action.source === source && action.periodDays;
|
|
}).forEach(function (action) {
|
|
buttons.appendChild(actionButton(action, action.periodDays + "일"));
|
|
});
|
|
return buttons;
|
|
}
|
|
|
|
function resultList(kind, model) {
|
|
const list = document.createElement("div");
|
|
list.className = "overseas-results";
|
|
list.dataset.overseasList = kind;
|
|
list.setAttribute("role", "listbox");
|
|
list.tabIndex = 0;
|
|
list.setAttribute("aria-disabled", state.isBusy === true ? "true" : "false");
|
|
(model.results || []).forEach(function (row, index) {
|
|
const button = document.createElement("button");
|
|
button.type = "button";
|
|
button.id = "overseas-" + kind + "-row-" + index;
|
|
button.dataset.overseasResultKind = kind;
|
|
button.dataset.overseasSelectionId = row.selectionId;
|
|
button.tabIndex = -1;
|
|
button.textContent = row.displayName;
|
|
const selected = model.selectedId === row.selectionId;
|
|
button.className = selected ? "selected" : "";
|
|
button.setAttribute("aria-selected", selected ? "true" : "false");
|
|
button.disabled = state.isBusy === true;
|
|
if (selected) list.setAttribute("aria-activedescendant", button.id);
|
|
list.appendChild(button);
|
|
});
|
|
return list;
|
|
}
|
|
|
|
function searchGroup(kind, title, searchLabel, model, includePeriods) {
|
|
const group = document.createElement("section");
|
|
group.className = "overseas-group overseas-search-group";
|
|
const heading = document.createElement("h3");
|
|
heading.textContent = title;
|
|
if (model.isTruncated === true) {
|
|
const truncation = document.createElement("span");
|
|
truncation.className = "overseas-truncation";
|
|
const isolatedCount = Number.isSafeInteger(model.isolatedInvalidRowCount)
|
|
? model.isolatedInvalidRowCount : 0;
|
|
truncation.textContent = isolatedCount > 0
|
|
? "검색 결과 일부가 안전 상한 또는 불완전 데이터 때문에 제외되었습니다. " +
|
|
"(표시명 없음 " + isolatedCount + "건)"
|
|
: "검색 결과가 안전 상한을 초과해 일부만 표시됩니다.";
|
|
heading.appendChild(truncation);
|
|
}
|
|
const searchLine = document.createElement("div");
|
|
searchLine.className = "overseas-search-line";
|
|
const input = document.createElement("input");
|
|
input.id = "overseas-" + kind + "-search";
|
|
input.value = model.query || "";
|
|
input.maxLength = 64;
|
|
input.setAttribute("aria-label", searchLabel);
|
|
input.readOnly = state.isBusy === true;
|
|
const search = document.createElement("button");
|
|
search.type = "button";
|
|
search.dataset.overseasSearch = kind;
|
|
search.textContent = searchLabel;
|
|
search.disabled = state.isBusy === true;
|
|
searchLine.append(input, search);
|
|
const resultArea = document.createElement("div");
|
|
resultArea.className = "overseas-result-area";
|
|
resultArea.appendChild(resultList(kind, model));
|
|
const actionColumn = periodButtons(kind);
|
|
const current = overseas.actions.find(function (action) {
|
|
return action.source === kind && !action.periodDays;
|
|
});
|
|
if (current) actionColumn.prepend(actionButton(current, "1열판"));
|
|
if (includePeriods || current) resultArea.appendChild(actionColumn);
|
|
group.append(heading, searchLine, resultArea);
|
|
return group;
|
|
}
|
|
|
|
const workspace = document.createElement("div");
|
|
workspace.className = "overseas-workspace";
|
|
const fixedGroup = document.createElement("section");
|
|
fixedGroup.className = "overseas-group overseas-fixed-group";
|
|
const fixedHeading = document.createElement("h3");
|
|
fixedHeading.textContent = "해외지수";
|
|
const fixedBody = document.createElement("div");
|
|
fixedBody.className = "overseas-fixed-body";
|
|
const fixedList = document.createElement("div");
|
|
fixedList.className = "overseas-fixed-list";
|
|
fixedList.dataset.overseasList = "fixed";
|
|
fixedList.setAttribute("role", "listbox");
|
|
fixedList.tabIndex = 0;
|
|
fixedList.setAttribute("aria-disabled", state.isBusy === true ? "true" : "false");
|
|
overseas.fixedIndexTargets.forEach(function (target, index) {
|
|
const button = document.createElement("button");
|
|
button.type = "button";
|
|
button.id = "overseas-fixed-row-" + index;
|
|
button.dataset.overseasTargetId = target.targetId;
|
|
button.tabIndex = -1;
|
|
button.textContent = target.displayName;
|
|
const selected = overseas.selectedFixedIndexId === target.targetId;
|
|
button.className = selected ? "selected" : "";
|
|
button.setAttribute("aria-selected", selected ? "true" : "false");
|
|
button.disabled = state.isBusy === true;
|
|
if (selected) fixedList.setAttribute("aria-activedescendant", button.id);
|
|
fixedList.appendChild(button);
|
|
});
|
|
fixedBody.append(fixedList, periodButtons("fixedIndex"));
|
|
fixedGroup.append(fixedHeading, fixedBody);
|
|
workspace.append(
|
|
fixedGroup,
|
|
searchGroup("industry", "해외 업종지수", "업종 검색", overseas.industry, false),
|
|
searchGroup("stock", "해외 종목", "종목 검색", overseas.stock, true));
|
|
categoryTree.replaceChildren(workspace);
|
|
overseasRenderStructureKey = structureKey;
|
|
}
|
|
|
|
function updateComparisonWorkspace(workspace, comparison) {
|
|
["domestic", "world"].forEach(function (kind) {
|
|
const input = workspace.querySelector("#comparison-" + kind + "-search");
|
|
syncSearchDraft(input, comparison[kind + "Search"].query);
|
|
});
|
|
}
|
|
|
|
function comparisonUnavailableText(reason) {
|
|
switch (reason) {
|
|
case "pair-incomplete-or-invalid":
|
|
return "비교할 종목 두 개를 선택하세요.";
|
|
case "deferred-unsafe-comparison-row":
|
|
return "현재 데이터로는 안전하게 비교할 수 없습니다.";
|
|
case "comparison-graphs-require-two-krx-stocks":
|
|
return "국내 종목 두 개를 선택해야 합니다.";
|
|
case "two-futures-targets-are-unsupported":
|
|
return "선물 두 개는 서로 비교할 수 없습니다.";
|
|
case "futures-requires-a-market-target-counterpart":
|
|
return "선물은 시장 지수와 비교해야 합니다.";
|
|
case "expected-mode-supports-only-krx-stocks-and-four-domestic-indices":
|
|
return "예상가는 국내 종목과 지원 지수에서만 사용할 수 있습니다.";
|
|
case "mixed-market-and-world-is-unsupported":
|
|
return "시장 지수와 해외 종목은 함께 비교할 수 없습니다.";
|
|
default:
|
|
if (!reason) return "";
|
|
return /^[a-z0-9-]+$/.test(reason)
|
|
? "현재 선택으로는 사용할 수 없습니다."
|
|
: reason;
|
|
}
|
|
}
|
|
|
|
function renderComparison(state) {
|
|
const comparison = state.comparison;
|
|
if (!comparison || !comparison.domesticSearch || !comparison.worldSearch) {
|
|
clearComparisonTargetPendingSelection(false);
|
|
return;
|
|
}
|
|
|
|
const structureKey = JSON.stringify({
|
|
domestic: {
|
|
results: comparison.domesticSearch.results,
|
|
selectedResultId: comparison.domesticSearch.selectedResultId,
|
|
isTruncated: comparison.domesticSearch.isTruncated,
|
|
isolatedInvalidRowCount: comparison.domesticSearch.isolatedInvalidRowCount,
|
|
deferredUnsafeRowCount: comparison.domesticSearch.deferredUnsafeRowCount
|
|
},
|
|
world: {
|
|
results: comparison.worldSearch.results,
|
|
selectedResultId: comparison.worldSearch.selectedResultId,
|
|
isTruncated: comparison.worldSearch.isTruncated,
|
|
isolatedInvalidRowCount: comparison.worldSearch.isolatedInvalidRowCount,
|
|
deferredUnsafeRowCount: comparison.worldSearch.deferredUnsafeRowCount
|
|
},
|
|
fixedTargets: comparison.fixedTargets,
|
|
selectedFixedTargetId: comparison.selectedFixedTargetId,
|
|
firstTarget: comparison.firstTarget,
|
|
secondTarget: comparison.secondTarget,
|
|
savedPairs: comparison.savedPairs,
|
|
actions: comparison.actions,
|
|
canImportLegacyPairs: comparison.canImportLegacyPairs,
|
|
lastImport: comparison.lastImport,
|
|
statusMessage: comparison.statusMessage,
|
|
statusKind: comparison.statusKind
|
|
});
|
|
if (comparisonTargetPendingSelection) {
|
|
if (comparisonTargetPendingSelection.sent && state.isBusy !== true) {
|
|
const selectedId = comparisonTargetPendingSelection.kind === "fixed"
|
|
? comparison.selectedFixedTargetId
|
|
: comparison[comparisonTargetPendingSelection.kind + "Search"].selectedResultId;
|
|
clearComparisonTargetPendingSelection(
|
|
selectedId !== comparisonTargetPendingSelection.key);
|
|
} else if (!comparisonTargetPendingSelection.sent &&
|
|
comparisonRenderStructureKey &&
|
|
structureKey !== comparisonRenderStructureKey) {
|
|
clearComparisonTargetPendingSelection(false);
|
|
} else {
|
|
applyPendingRowSelection(comparisonTargetPendingSelection, false);
|
|
}
|
|
}
|
|
const existingWorkspace = categoryTree.querySelector(".comparison-workspace");
|
|
if (existingWorkspace && structureKey === comparisonRenderStructureKey) {
|
|
updateComparisonWorkspace(existingWorkspace, comparison);
|
|
return;
|
|
}
|
|
|
|
const workspace = document.createElement("div");
|
|
workspace.className = "comparison-workspace";
|
|
|
|
const searches = document.createElement("section");
|
|
searches.className = "comparison-searches";
|
|
[
|
|
["domestic", "국내·NXT 종목", comparison.domesticSearch],
|
|
["world", "미국·대만 종목", comparison.worldSearch]
|
|
].forEach(function (definition) {
|
|
const kind = definition[0];
|
|
const panel = document.createElement("div");
|
|
panel.className = "comparison-search-panel";
|
|
const line = document.createElement("div");
|
|
line.className = "comparison-search-line";
|
|
const input = document.createElement("input");
|
|
input.id = "comparison-" + kind + "-search";
|
|
input.maxLength = 64;
|
|
input.value = definition[2].query || "";
|
|
input.placeholder = definition[1];
|
|
const button = document.createElement("button");
|
|
button.type = "button";
|
|
button.dataset.comparisonSearch = kind;
|
|
button.textContent = "검색";
|
|
line.append(input, button);
|
|
const results = document.createElement("div");
|
|
results.className = "comparison-results";
|
|
results.setAttribute("aria-label", definition[1] + " 검색 결과");
|
|
let selectedResult = null;
|
|
definition[2].results.forEach(function (row) {
|
|
const result = document.createElement("button");
|
|
result.type = "button";
|
|
result.id = "comparison-" + kind + "-result-" + row.selectionId;
|
|
result.dataset.comparisonChoice = kind;
|
|
result.dataset.comparisonSelectionId = row.selectionId;
|
|
const isSelected = definition[2].selectedResultId === row.selectionId;
|
|
result.className = isSelected
|
|
? "selected" : "";
|
|
result.setAttribute(
|
|
"aria-selected",
|
|
isSelected ? "true" : "false");
|
|
result.disabled = row.canSelect === false;
|
|
if (row.unavailableReason) {
|
|
result.title = comparisonUnavailableText(row.unavailableReason);
|
|
}
|
|
result.textContent = row.displayName + " · " + row.metadata;
|
|
if (isSelected) selectedResult = result;
|
|
results.appendChild(result);
|
|
});
|
|
configureRovingList(
|
|
results,
|
|
Array.from(results.querySelectorAll("button[data-comparison-selection-id]")),
|
|
selectedResult);
|
|
panel.append(line, results);
|
|
if (definition[2].isTruncated === true ||
|
|
Number(definition[2].deferredUnsafeRowCount) > 0) {
|
|
const isolated = Number(definition[2].isolatedInvalidRowCount) || 0;
|
|
const deferred = Number(definition[2].deferredUnsafeRowCount) || 0;
|
|
const messages = [];
|
|
if (isolated > 0) {
|
|
messages.push("식별할 수 없는 기존 데이터 " + String(isolated) +
|
|
"행은 제외하고 나머지 결과를 표시합니다.");
|
|
} else if (definition[2].isTruncated === true) {
|
|
messages.push("안전한 표시 상한을 초과해 일부 결과만 표시합니다.");
|
|
}
|
|
if (deferred > 0) {
|
|
messages.push("대상 구분이 모호한 " + String(deferred) +
|
|
"행은 목록에 표시하되 선택과 송출을 차단합니다.");
|
|
}
|
|
const warning = document.createElement("div");
|
|
warning.className = "comparison-search-warning";
|
|
warning.setAttribute("role", "status");
|
|
warning.textContent = messages.join(" ");
|
|
panel.appendChild(warning);
|
|
}
|
|
searches.appendChild(panel);
|
|
});
|
|
|
|
const fixed = document.createElement("section");
|
|
fixed.className = "comparison-fixed";
|
|
const fixedTitle = document.createElement("strong");
|
|
fixedTitle.textContent = "지수·환율 고정 대상";
|
|
const fixedList = document.createElement("div");
|
|
fixedList.className = "comparison-fixed-list";
|
|
fixedList.setAttribute("aria-label", "지수·환율 고정 대상");
|
|
let selectedFixedTarget = null;
|
|
comparison.fixedTargets.forEach(function (row) {
|
|
const button = document.createElement("button");
|
|
button.type = "button";
|
|
button.id = "comparison-fixed-result-" + row.targetId;
|
|
button.dataset.comparisonTargetId = row.targetId;
|
|
const isSelected = comparison.selectedFixedTargetId === row.targetId;
|
|
button.className = isSelected
|
|
? "selected" : "";
|
|
button.setAttribute(
|
|
"aria-selected",
|
|
isSelected ? "true" : "false");
|
|
button.textContent = row.displayName;
|
|
if (isSelected) selectedFixedTarget = button;
|
|
fixedList.appendChild(button);
|
|
});
|
|
configureRovingList(
|
|
fixedList,
|
|
Array.from(fixedList.querySelectorAll("button[data-comparison-target-id]")),
|
|
selectedFixedTarget);
|
|
fixed.append(fixedTitle, fixedList);
|
|
|
|
const pairPanel = document.createElement("section");
|
|
pairPanel.className = "comparison-pair-panel";
|
|
const draft = document.createElement("div");
|
|
draft.className = "comparison-draft";
|
|
const first = document.createElement("input");
|
|
first.readOnly = true;
|
|
first.value = comparison.firstTarget ? comparison.firstTarget.displayName : "";
|
|
first.setAttribute("aria-label", "첫 번째 비교 대상");
|
|
const second = document.createElement("input");
|
|
second.readOnly = true;
|
|
second.value = comparison.secondTarget ? comparison.secondTarget.displayName : "";
|
|
second.setAttribute("aria-label", "두 번째 비교 대상");
|
|
const swap = document.createElement("button");
|
|
swap.type = "button";
|
|
swap.dataset.comparisonSwap = "true";
|
|
swap.textContent = "◀▶";
|
|
const add = document.createElement("button");
|
|
add.type = "button";
|
|
add.dataset.comparisonAdd = "true";
|
|
add.textContent = "추가";
|
|
add.disabled = !comparison.firstTarget || !comparison.secondTarget;
|
|
draft.append(first, swap, second, add);
|
|
|
|
const saved = document.createElement("div");
|
|
saved.className = "comparison-saved";
|
|
saved.setAttribute("aria-label", "저장된 종목 비교");
|
|
let selectedSavedPair = null;
|
|
comparison.savedPairs.forEach(function (row) {
|
|
const button = document.createElement("button");
|
|
button.type = "button";
|
|
button.id = "comparison-saved-result-" + row.rowId;
|
|
button.dataset.comparisonPairId = row.rowId;
|
|
button.textContent = row.rowNumber + ". " + row.displayLabel;
|
|
button.className = row.isSelected ? "selected" : "";
|
|
button.setAttribute("aria-selected", row.isSelected ? "true" : "false");
|
|
if (row.isSelected) selectedSavedPair = button;
|
|
saved.appendChild(button);
|
|
});
|
|
configureRovingList(
|
|
saved,
|
|
Array.from(saved.querySelectorAll("button[data-comparison-pair-id]")),
|
|
selectedSavedPair);
|
|
const savedTools = document.createElement("div");
|
|
savedTools.className = "comparison-saved-tools";
|
|
const importLegacy = document.createElement("button");
|
|
importLegacy.type = "button";
|
|
importLegacy.dataset.comparisonImport = "true";
|
|
importLegacy.textContent = "원본 비교쌍 가져오기";
|
|
importLegacy.title =
|
|
"현재 저장 순서는 유지하고 원본 프로그램에만 있는 비교쌍을 뒤에 추가합니다.";
|
|
importLegacy.disabled = comparison.canImportLegacyPairs !== true ||
|
|
comparison.isBusy === true;
|
|
savedTools.appendChild(importLegacy);
|
|
[["up", "UP"], ["down", "DOWN"]].forEach(function (item) {
|
|
const button = document.createElement("button");
|
|
button.type = "button";
|
|
button.dataset.comparisonMove = item[0];
|
|
button.textContent = item[1];
|
|
savedTools.appendChild(button);
|
|
});
|
|
const deleteSelected = document.createElement("button");
|
|
deleteSelected.type = "button";
|
|
deleteSelected.dataset.comparisonDelete = "selected";
|
|
deleteSelected.textContent = "DEL";
|
|
const deleteAll = document.createElement("button");
|
|
deleteAll.type = "button";
|
|
deleteAll.dataset.comparisonDelete = "all";
|
|
deleteAll.textContent = "DEL ALL";
|
|
savedTools.append(deleteSelected, deleteAll);
|
|
const importStatus = document.createElement("div");
|
|
importStatus.className = "comparison-import-status";
|
|
importStatus.setAttribute("role", "status");
|
|
importStatus.textContent = comparison.statusMessage || "";
|
|
if (comparison.lastImport) {
|
|
importStatus.title =
|
|
"원본 " + String(comparison.lastImport.sourceRowCount) + "개 · 추가 " +
|
|
String(comparison.lastImport.addedPairCount) + "개 · 중복 " +
|
|
String(comparison.lastImport.skippedDuplicateCount) + "개 · 현재 " +
|
|
String(comparison.lastImport.totalPairCount) + "개";
|
|
}
|
|
pairPanel.append(draft, saved, savedTools, importStatus);
|
|
|
|
const actions = document.createElement("section");
|
|
actions.className = "comparison-actions";
|
|
const comparisonSections = new Map();
|
|
comparison.actions.forEach(function (action) {
|
|
let group = comparisonSections.get(action.section);
|
|
let actionCards;
|
|
if (!group) {
|
|
group = document.createElement("details");
|
|
group.open = catalogExpandAll.checked;
|
|
const summary = document.createElement("summary");
|
|
summary.textContent = action.section;
|
|
summary.dataset.comparisonSectionIndex = String(comparisonSections.size);
|
|
summary.dataset.cardCount = String(comparison.actions.filter(function (candidate) {
|
|
return candidate.section === action.section;
|
|
}).length);
|
|
summary.title = "더블클릭하면 직계 자식 전체를 원본 순서로 추가합니다.";
|
|
actionCards = document.createElement("div");
|
|
actionCards.className = "catalog-actions";
|
|
markVisualCardList(actionCards, "comparison-actions");
|
|
group.append(summary, actionCards);
|
|
comparisonSections.set(action.section, group);
|
|
actions.appendChild(group);
|
|
} else {
|
|
actionCards = group.querySelector(":scope > .catalog-actions");
|
|
}
|
|
const button = document.createElement("button");
|
|
button.type = "button";
|
|
button.className = "tree-item" + (action.isAvailable ? "" : " unavailable");
|
|
button.dataset.comparisonActionId = action.actionId;
|
|
setVisualCardContent(button, {
|
|
title: action.label,
|
|
kind: "comparison"
|
|
});
|
|
button.disabled = !action.isAvailable;
|
|
button.title = action.isAvailable
|
|
? "더블클릭하여 플레이리스트에 추가"
|
|
: comparisonUnavailableText(action.unavailableReason);
|
|
actionCards.appendChild(button);
|
|
});
|
|
|
|
workspace.append(searches, fixed, pairPanel, actions);
|
|
categoryTree.replaceChildren(workspace);
|
|
comparisonRenderStructureKey = structureKey;
|
|
updateComparisonWorkspace(workspace, comparison);
|
|
}
|
|
|
|
function themeActionIsClickable(action) {
|
|
return action.isAvailable === true ||
|
|
(action.actionId === "five-row-expected" &&
|
|
action.unavailableReason === "expected-theme-is-krx-only");
|
|
}
|
|
|
|
function updateThemeWorkspace(workspace, theme) {
|
|
const input = workspace.querySelector("#theme-search");
|
|
syncSearchDraft(input, theme.query);
|
|
|
|
const searchTruncation = workspace.querySelector(".theme-search-truncation");
|
|
if (searchTruncation) {
|
|
searchTruncation.hidden = theme.searchIsTruncated !== true;
|
|
searchTruncation.textContent = theme.searchIsTruncated === true
|
|
? "검색 결과가 최대 5,000건으로 제한되었습니다. 검색어를 좁혀 주세요."
|
|
: "";
|
|
}
|
|
|
|
const results = workspace.querySelector(".theme-results");
|
|
let selectedResult = null;
|
|
results.querySelectorAll("button[data-theme-result-id]").forEach(function (button) {
|
|
const selected = button.dataset.themeResultId === theme.selectedResultId;
|
|
button.classList.toggle("selected", selected);
|
|
button.setAttribute("aria-selected", selected ? "true" : "false");
|
|
if (selected) selectedResult = button;
|
|
});
|
|
configureRovingList(
|
|
results,
|
|
Array.from(results.querySelectorAll("button[data-theme-result-id]")),
|
|
selectedResult);
|
|
if (selectedResult) results.setAttribute("aria-activedescendant", selectedResult.id);
|
|
else results.removeAttribute("aria-activedescendant");
|
|
|
|
workspace.querySelectorAll("input[data-theme-sort]").forEach(function (radio) {
|
|
radio.checked = radio.value === theme.sortId;
|
|
});
|
|
|
|
const preview = workspace.querySelector(".theme-preview-list");
|
|
const previewFragment = document.createDocumentFragment();
|
|
theme.previewItems.forEach(function (row) {
|
|
const item = document.createElement("li");
|
|
item.textContent = row.itemName;
|
|
previewFragment.appendChild(item);
|
|
});
|
|
preview.replaceChildren(previewFragment);
|
|
|
|
const actionStates = new Map(theme.actions.map(function (action) {
|
|
return [action.actionId, action];
|
|
}));
|
|
workspace.querySelectorAll("button[data-theme-action-id]").forEach(function (button) {
|
|
const action = actionStates.get(button.dataset.themeActionId);
|
|
if (!action) return;
|
|
const warningHandledByNative = action.actionId === "five-row-expected" &&
|
|
action.unavailableReason === "expected-theme-is-krx-only";
|
|
button.disabled = !themeActionIsClickable(action);
|
|
button.title = warningHandledByNative
|
|
? "NXT는 데이터가 없습니다."
|
|
: action.unavailableReason || "클릭하여 플레이리스트에 추가";
|
|
});
|
|
|
|
const editTheme = workspace.querySelector("#uc4-theme-edit");
|
|
const deleteTheme = workspace.querySelector("#uc4-theme-delete");
|
|
editTheme.disabled = !theme.selectedTheme;
|
|
deleteTheme.disabled = !theme.selectedTheme;
|
|
}
|
|
|
|
function renderTheme(state) {
|
|
const theme = state.theme;
|
|
if (!theme || !Array.isArray(theme.searchResults) || !Array.isArray(theme.actions)) {
|
|
clearThemeResultPendingSelection(false);
|
|
return;
|
|
}
|
|
|
|
const structureKey = JSON.stringify({
|
|
query: theme.query || "",
|
|
results: theme.searchResults.map(function (row) {
|
|
return [row.resultId, row.displayTitle];
|
|
}),
|
|
sorts: theme.sorts.map(function (row) {
|
|
return [row.id, row.label];
|
|
}),
|
|
actions: theme.actions.map(function (action) {
|
|
return [action.actionId, action.label];
|
|
})
|
|
});
|
|
const existingWorkspace = categoryTree.querySelector(".theme-workspace");
|
|
if (themeResultPendingSelection) {
|
|
if (themeResultPendingSelection.sent && state.isBusy !== true) {
|
|
clearThemeResultPendingSelection(
|
|
theme.selectedResultId !== themeResultPendingSelection.key);
|
|
} else if (themeRenderStructureKey && structureKey !== themeRenderStructureKey) {
|
|
clearThemeResultPendingSelection(false);
|
|
}
|
|
}
|
|
if (existingWorkspace && structureKey === themeRenderStructureKey) {
|
|
updateThemeWorkspace(existingWorkspace, theme);
|
|
if (themeResultPendingSelection) {
|
|
applyPendingRowSelection(themeResultPendingSelection, false);
|
|
applyPendingControlLocks(themeResultPendingSelection.lockedControls);
|
|
}
|
|
return;
|
|
}
|
|
|
|
const workspace = document.createElement("div");
|
|
workspace.className = "theme-workspace";
|
|
const search = document.createElement("div");
|
|
search.className = "theme-search-line";
|
|
const input = document.createElement("input");
|
|
input.id = "theme-search";
|
|
input.value = theme.query || "";
|
|
input.maxLength = 64;
|
|
input.placeholder = "테마명";
|
|
input.setAttribute("aria-label", "테마명");
|
|
const searchButton = document.createElement("button");
|
|
searchButton.type = "button";
|
|
searchButton.dataset.themeSearch = "true";
|
|
searchButton.textContent = "테마검색";
|
|
const addTheme = document.createElement("button");
|
|
addTheme.type = "button";
|
|
addTheme.id = "uc4-theme-add";
|
|
addTheme.dataset.uc4ThemeCatalog = "create";
|
|
addTheme.textContent = "테마추가";
|
|
const editTheme = document.createElement("button");
|
|
editTheme.type = "button";
|
|
editTheme.id = "uc4-theme-edit";
|
|
editTheme.dataset.uc4ThemeCatalog = "edit";
|
|
editTheme.textContent = "테마편집";
|
|
editTheme.disabled = !theme.selectedTheme;
|
|
const deleteTheme = document.createElement("button");
|
|
deleteTheme.type = "button";
|
|
deleteTheme.id = "uc4-theme-delete";
|
|
deleteTheme.dataset.uc4ThemeCatalog = "delete";
|
|
deleteTheme.textContent = "테마삭제";
|
|
deleteTheme.disabled = !theme.selectedTheme;
|
|
search.append(input, searchButton, addTheme, editTheme, deleteTheme);
|
|
|
|
const resultsPanel = document.createElement("section");
|
|
resultsPanel.className = "theme-results-panel";
|
|
const resultsTitle = document.createElement("strong");
|
|
resultsTitle.className = "theme-column-title";
|
|
resultsTitle.textContent = "테마명";
|
|
const searchTruncation = document.createElement("span");
|
|
searchTruncation.className = "theme-search-truncation";
|
|
searchTruncation.hidden = theme.searchIsTruncated !== true;
|
|
searchTruncation.textContent = theme.searchIsTruncated === true
|
|
? "검색 결과가 최대 5,000건으로 제한되었습니다. 검색어를 좁혀 주세요."
|
|
: "";
|
|
resultsTitle.appendChild(searchTruncation);
|
|
const results = document.createElement("div");
|
|
results.className = "theme-results";
|
|
results.setAttribute("role", "listbox");
|
|
results.setAttribute("aria-label", "테마명");
|
|
theme.searchResults.forEach(function (row, index) {
|
|
const button = document.createElement("button");
|
|
button.type = "button";
|
|
button.id = "theme-result-row-" + index;
|
|
button.dataset.themeResultId = row.resultId;
|
|
button.textContent = row.displayTitle;
|
|
button.className = theme.selectedResultId === row.resultId ? "selected" : "";
|
|
button.setAttribute("aria-selected",
|
|
theme.selectedResultId === row.resultId ? "true" : "false");
|
|
results.appendChild(button);
|
|
});
|
|
resultsPanel.append(resultsTitle, results);
|
|
|
|
const sortControls = document.createElement("fieldset");
|
|
sortControls.className = "theme-sort-controls";
|
|
const sortLegend = document.createElement("legend");
|
|
sortLegend.textContent = "정렬";
|
|
sortControls.appendChild(sortLegend);
|
|
theme.sorts.forEach(function (row) {
|
|
const label = document.createElement("label");
|
|
const radio = document.createElement("input");
|
|
radio.type = "radio";
|
|
radio.name = "theme-sort";
|
|
radio.value = row.id;
|
|
radio.dataset.themeSort = "true";
|
|
radio.checked = row.id === theme.sortId;
|
|
label.append(radio, document.createTextNode(row.label));
|
|
sortControls.appendChild(label);
|
|
});
|
|
|
|
const previewPanel = document.createElement("section");
|
|
previewPanel.className = "theme-preview-panel";
|
|
const previewTitle = document.createElement("strong");
|
|
previewTitle.className = "theme-column-title";
|
|
previewTitle.textContent = "종목명";
|
|
const preview = document.createElement("ol");
|
|
preview.className = "theme-preview-list";
|
|
theme.previewItems.forEach(function (row) {
|
|
const item = document.createElement("li");
|
|
item.textContent = row.itemName;
|
|
preview.appendChild(item);
|
|
});
|
|
previewPanel.append(previewTitle, preview);
|
|
|
|
const actions = document.createElement("div");
|
|
actions.className = "theme-actions";
|
|
markVisualCardList(actions, "theme-actions");
|
|
const originalActionOrder = new Map([
|
|
["six-row-current", 0],
|
|
["twelve-row-current", 1],
|
|
["five-row-current", 2],
|
|
["five-row-expected", 3]
|
|
]);
|
|
const originalActionLabels = new Map([
|
|
["six-row-current", "6종목 현재가"],
|
|
["twelve-row-current", "12종목 현재가"],
|
|
["five-row-current", "현재가"],
|
|
["five-row-expected", "예상체결가"]
|
|
]);
|
|
theme.actions.slice().sort(function (left, right) {
|
|
return (originalActionOrder.get(left.actionId) ?? Number.MAX_SAFE_INTEGER) -
|
|
(originalActionOrder.get(right.actionId) ?? Number.MAX_SAFE_INTEGER);
|
|
}).forEach(function (action) {
|
|
const button = document.createElement("button");
|
|
button.type = "button";
|
|
button.dataset.themeActionId = action.actionId;
|
|
setVisualCardContent(button, {
|
|
title: originalActionLabels.get(action.actionId) || action.label,
|
|
kind: "theme"
|
|
});
|
|
actions.appendChild(button);
|
|
});
|
|
// UC4 is a vertical native panel: search, theme rows, sort radios,
|
|
// action buttons, then the selected theme's item preview.
|
|
workspace.append(search, resultsPanel, sortControls, actions, previewPanel);
|
|
categoryTree.replaceChildren(workspace);
|
|
themeRenderStructureKey = structureKey;
|
|
updateThemeWorkspace(workspace, theme);
|
|
}
|
|
|
|
function updateExpertWorkspace(workspace, expert) {
|
|
const input = workspace.querySelector("#expert-search");
|
|
syncSearchDraft(input, expert.search.query);
|
|
}
|
|
|
|
function expertRecommendationText(row) {
|
|
const buyAmount = row.buyAmount == null ? "" : String(row.buyAmount);
|
|
return row.stockName + " · " + buyAmount;
|
|
}
|
|
|
|
function renderExpert(state) {
|
|
const expert = state.expert;
|
|
if (!expert || !expert.search || !expert.preview) return;
|
|
const structureKey = JSON.stringify({
|
|
results: expert.search.results,
|
|
isTruncated: expert.search.isTruncated,
|
|
selectedExpert: expert.selectedExpert,
|
|
preview: expert.preview,
|
|
actions: expert.actions
|
|
});
|
|
const existingWorkspace = categoryTree.querySelector(".expert-workspace");
|
|
if (existingWorkspace && structureKey === expertRenderStructureKey) {
|
|
updateExpertWorkspace(existingWorkspace, expert);
|
|
return;
|
|
}
|
|
const workspace = document.createElement("div");
|
|
workspace.className = "expert-workspace";
|
|
const search = document.createElement("div");
|
|
search.className = "expert-search-line";
|
|
const input = document.createElement("input");
|
|
input.id = "expert-search";
|
|
input.maxLength = 64;
|
|
input.value = expert.search.query || "";
|
|
input.placeholder = "전문가명";
|
|
const searchButton = document.createElement("button");
|
|
searchButton.type = "button";
|
|
searchButton.dataset.expertSearch = "true";
|
|
searchButton.textContent = "조회";
|
|
const addExpert = document.createElement("button");
|
|
addExpert.type = "button";
|
|
addExpert.id = "uc6-expert-add";
|
|
addExpert.dataset.uc6ExpertCatalog = "create";
|
|
addExpert.textContent = "전문가 추가";
|
|
const deleteExpert = document.createElement("button");
|
|
deleteExpert.type = "button";
|
|
deleteExpert.id = "uc6-expert-delete";
|
|
deleteExpert.dataset.uc6ExpertCatalog = "delete";
|
|
deleteExpert.textContent = "전문가 삭제";
|
|
deleteExpert.disabled = !expert.selectedExpert;
|
|
search.append(input, searchButton, addExpert, deleteExpert);
|
|
|
|
const body = document.createElement("div");
|
|
body.className = "expert-body";
|
|
const results = document.createElement("div");
|
|
results.className = "expert-results";
|
|
results.setAttribute("aria-label", "전문가 검색 결과");
|
|
let selectedExpertResult = null;
|
|
expert.search.results.forEach(function (row) {
|
|
const button = document.createElement("button");
|
|
button.type = "button";
|
|
button.id = "expert-result-" + row.selectionId;
|
|
button.dataset.expertSelectionId = row.selectionId;
|
|
button.textContent = row.expertName;
|
|
const isSelected = !!expert.selectedExpert &&
|
|
expert.selectedExpert.selectionId === row.selectionId;
|
|
button.className = isSelected ? "selected" : "";
|
|
button.setAttribute("aria-selected", isSelected ? "true" : "false");
|
|
if (isSelected) selectedExpertResult = button;
|
|
results.appendChild(button);
|
|
});
|
|
configureRovingList(
|
|
results,
|
|
Array.from(results.querySelectorAll("button[data-expert-selection-id]")),
|
|
selectedExpertResult);
|
|
const preview = document.createElement("div");
|
|
preview.id = "expert-preview";
|
|
preview.className = "expert-preview";
|
|
preview.tabIndex = 0;
|
|
const heading = document.createElement("strong");
|
|
heading.textContent = expert.selectedExpert
|
|
? expert.selectedExpert.expertName + " 추천 종목"
|
|
: "전문가를 선택하세요.";
|
|
const list = document.createElement("ol");
|
|
expert.preview.items.forEach(function (row) {
|
|
const item = document.createElement("li");
|
|
item.textContent = expertRecommendationText(row);
|
|
if (row.buyAmount == null) {
|
|
item.setAttribute("aria-label", row.stockName + " · 매수가 미입력");
|
|
}
|
|
list.appendChild(item);
|
|
});
|
|
preview.append(heading, list);
|
|
body.append(results, preview);
|
|
|
|
const actions = document.createElement("div");
|
|
actions.className = "expert-actions";
|
|
markVisualCardList(actions, "expert-actions");
|
|
expert.actions.forEach(function (action) {
|
|
const button = document.createElement("button");
|
|
button.type = "button";
|
|
button.dataset.expertActionId = action.actionId;
|
|
setVisualCardContent(button, {
|
|
title: action.label,
|
|
kind: "expert"
|
|
});
|
|
button.disabled = !action.isAvailable;
|
|
actions.appendChild(button);
|
|
});
|
|
const editRecommendations = document.createElement("button");
|
|
editRecommendations.type = "button";
|
|
editRecommendations.id = "uc6-expert-edit";
|
|
editRecommendations.dataset.uc6ExpertCatalog = "edit";
|
|
editRecommendations.textContent = "추천행 편집·저장·삭제";
|
|
editRecommendations.disabled = !expert.selectedExpert;
|
|
actions.appendChild(editRecommendations);
|
|
workspace.append(search, body, actions);
|
|
categoryTree.replaceChildren(workspace);
|
|
expertRenderStructureKey = structureKey;
|
|
updateExpertWorkspace(workspace, expert);
|
|
}
|
|
|
|
function updateTradingHaltWorkspace(workspace, halt) {
|
|
const input = workspace.querySelector("#halt-search");
|
|
syncSearchDraft(input, halt.query);
|
|
}
|
|
|
|
function renderTradingHalt(state) {
|
|
const halt = state.tradingHalt;
|
|
if (!halt || !Array.isArray(halt.results)) return;
|
|
const structureKey = JSON.stringify({
|
|
results: halt.results,
|
|
nameSort: halt.nameSort,
|
|
actions: halt.actions
|
|
});
|
|
const existingWorkspace = categoryTree.querySelector(".halt-workspace");
|
|
if (existingWorkspace && structureKey === tradingHaltRenderStructureKey) {
|
|
updateTradingHaltWorkspace(existingWorkspace, halt);
|
|
return;
|
|
}
|
|
const workspace = document.createElement("div");
|
|
workspace.className = "halt-workspace";
|
|
const search = document.createElement("div");
|
|
search.className = "halt-search-line";
|
|
const input = document.createElement("input");
|
|
input.id = "halt-search";
|
|
input.maxLength = 64;
|
|
input.value = halt.query || "";
|
|
input.placeholder = "거래정지 종목";
|
|
const searchButton = document.createElement("button");
|
|
searchButton.type = "button";
|
|
searchButton.dataset.haltSearch = "true";
|
|
searchButton.textContent = "검색";
|
|
const sortButton = document.createElement("button");
|
|
sortButton.type = "button";
|
|
sortButton.dataset.haltSort = "true";
|
|
sortButton.textContent = halt.nameSort === "ascending" ? "종목명 ↑" : "종목명 ↓";
|
|
search.append(input, searchButton, sortButton);
|
|
const results = document.createElement("div");
|
|
results.className = "halt-results";
|
|
results.setAttribute("aria-label", "거래정지 종목 검색 결과");
|
|
let selectedHaltResult = null;
|
|
halt.results.forEach(function (row) {
|
|
const button = document.createElement("button");
|
|
button.type = "button";
|
|
button.id = "halt-result-" + row.selectionId;
|
|
button.dataset.haltSelectionId = row.selectionId;
|
|
button.textContent = (row.market === "kospi" ? "코스피 · " : "코스닥 · ") + row.displayName;
|
|
button.className = row.isSelected ? "selected" : "";
|
|
button.setAttribute("aria-selected", row.isSelected ? "true" : "false");
|
|
if (row.isSelected) selectedHaltResult = button;
|
|
results.appendChild(button);
|
|
});
|
|
configureRovingList(
|
|
results,
|
|
Array.from(results.querySelectorAll("button[data-halt-selection-id]")),
|
|
selectedHaltResult);
|
|
const actions = document.createElement("div");
|
|
actions.className = "halt-actions";
|
|
markVisualCardList(actions, "halt-actions");
|
|
halt.actions.forEach(function (action) {
|
|
const button = document.createElement("button");
|
|
button.type = "button";
|
|
button.dataset.haltActionId = action.actionId;
|
|
setVisualCardContent(button, {
|
|
title: action.label,
|
|
kind: "halt"
|
|
});
|
|
button.disabled = !action.isAvailable;
|
|
actions.appendChild(button);
|
|
});
|
|
workspace.append(search, results, actions);
|
|
categoryTree.replaceChildren(workspace);
|
|
tradingHaltRenderStructureKey = structureKey;
|
|
updateTradingHaltWorkspace(workspace, halt);
|
|
}
|
|
|
|
const manualFinancialReferenceImages = Object.freeze({
|
|
"revenue-composition": "./Previews/pie.bmp",
|
|
"growth-metrics": "./Previews/Grow.bmp",
|
|
sales: "./Previews/sell.bmp",
|
|
"operating-profit": "./Previews/profit.bmp"
|
|
});
|
|
|
|
function manualFinancialPreviewColumns(screen) {
|
|
if (screen === "revenue-composition") {
|
|
return ["종목명", "기준일", "구성 1", "구성 2", "구성 3", "구성 4", "구성 5"];
|
|
}
|
|
if (screen === "growth-metrics") {
|
|
return ["종목명", "매출 성장", "영업익 성장", "순자산 성장", "순이익 성장", "기간"];
|
|
}
|
|
return ["종목명", "분기 1", "분기 2", "분기 3", "분기 4", "분기 5", "분기 6"];
|
|
}
|
|
|
|
function manualFinancialPreviewValues(row, count) {
|
|
const projected = Array.isArray(row.previewValues)
|
|
? row.previewValues.slice(0, count)
|
|
: [];
|
|
while (projected.length < count) projected.push("");
|
|
projected[0] = projected[0] == null || String(projected[0]).trim() === ""
|
|
? (row.stockName || "")
|
|
: projected[0];
|
|
return projected.map(function (value) {
|
|
return value == null ? "" : String(value);
|
|
});
|
|
}
|
|
|
|
function manualFinancialReferenceFigure(screen, label) {
|
|
const source = manualFinancialReferenceImages[screen];
|
|
if (!source) return null;
|
|
const figure = manualElement("figure", "manual-financial-reference");
|
|
const image = document.createElement("img");
|
|
image.src = source;
|
|
image.width = 480;
|
|
image.height = 270;
|
|
image.loading = "eager";
|
|
image.decoding = "async";
|
|
image.alt = label + " 기존 송출 화면 참고 이미지";
|
|
const caption = manualElement(
|
|
"figcaption",
|
|
"",
|
|
"기존 송출 화면 참고 · 입력 위치와 구성 확인용");
|
|
figure.append(image, caption);
|
|
return figure;
|
|
}
|
|
|
|
function blankManualRecord(screen) {
|
|
if (screen === "revenue-composition") {
|
|
return {
|
|
screen: screen,
|
|
stockName: "",
|
|
baseDate: "",
|
|
slices: Array.from({ length: 5 }, function () {
|
|
return { label: "", percentageText: "" };
|
|
})
|
|
};
|
|
}
|
|
if (screen === "growth-metrics") {
|
|
return {
|
|
screen: screen,
|
|
stockName: "",
|
|
salesGrowth: [null, null, null, null],
|
|
operatingProfitGrowth: [null, null, null, null],
|
|
netAssetGrowth: [null, null, null, null],
|
|
netIncomeGrowth: [null, null, null, null],
|
|
periods: ["", "", "", ""]
|
|
};
|
|
}
|
|
return {
|
|
screen: screen,
|
|
stockName: "",
|
|
quarters: Array.from({ length: 6 }, function () {
|
|
return { quarter: "", value: 0 };
|
|
})
|
|
};
|
|
}
|
|
|
|
function splitLegacyRawValue(value, count) {
|
|
const tokens = String(value === null || value === undefined ? "" : value).split("_");
|
|
while (tokens.length < count) tokens.push("");
|
|
if (tokens.length > count) {
|
|
tokens[count - 1] = tokens.slice(count - 1).join("_");
|
|
tokens.length = count;
|
|
}
|
|
return tokens;
|
|
}
|
|
|
|
function manualRecordFromRaw(raw) {
|
|
if (!raw) return null;
|
|
const record = blankManualRecord(raw.screen);
|
|
record.stockName = raw.stockName || "";
|
|
record.rawMode = true;
|
|
const values = Array.isArray(raw.storageValues) ? raw.storageValues : [];
|
|
record.rawOriginalStorageValues = values.map(function (value) {
|
|
return String(value === null || value === undefined ? "" : value);
|
|
});
|
|
record.rawDirtyStorageIndices = [];
|
|
if (record.screen === "revenue-composition") {
|
|
record.baseDate = values[0] || "";
|
|
record.slices = record.slices.map(function (_, index) {
|
|
const tokens = splitLegacyRawValue(values[index + 1] || "", 2);
|
|
return { label: tokens[0], percentageText: tokens[1] };
|
|
});
|
|
} else if (record.screen === "growth-metrics") {
|
|
["salesGrowth", "operatingProfitGrowth", "netAssetGrowth", "netIncomeGrowth"]
|
|
.forEach(function (seriesName, index) {
|
|
record[seriesName] = splitLegacyRawValue(values[index] || "", 4);
|
|
});
|
|
record.periods = splitLegacyRawValue(values[4] || "", 4);
|
|
} else {
|
|
record.quarters = record.quarters.map(function (_, index) {
|
|
const tokens = splitLegacyRawValue(values[index] || "", 2);
|
|
return { quarter: tokens[0], value: tokens[1] };
|
|
});
|
|
}
|
|
return record;
|
|
}
|
|
|
|
function preserveManualRawStorageValue(record, index, rebuiltValue) {
|
|
const dirty = Array.isArray(record.rawDirtyStorageIndices) &&
|
|
record.rawDirtyStorageIndices.includes(index);
|
|
const originals = Array.isArray(record.rawOriginalStorageValues)
|
|
? record.rawOriginalStorageValues : [];
|
|
return !dirty && index < originals.length
|
|
? originals[index]
|
|
: rebuiltValue;
|
|
}
|
|
|
|
function cloneManualRecord(record) {
|
|
return record ? JSON.parse(JSON.stringify(record)) : null;
|
|
}
|
|
|
|
function shouldResetManualStockDraft(stockIsSelected, stockNameReadOnly, draft) {
|
|
return stockIsSelected !== true && stockNameReadOnly !== true &&
|
|
!!draft && draft.rawMode !== true;
|
|
}
|
|
|
|
function manualElement(tagName, className, text) {
|
|
const element = document.createElement(tagName);
|
|
if (className) element.className = className;
|
|
if (text !== undefined) element.textContent = text;
|
|
return element;
|
|
}
|
|
|
|
function manualInput(value, dataName, dataValue, type) {
|
|
const input = document.createElement("input");
|
|
input.type = type || "text";
|
|
input.value = value === null || value === undefined ? "" : String(value);
|
|
if (dataName) input.dataset[dataName] = String(dataValue);
|
|
return input;
|
|
}
|
|
|
|
function appendManualLabel(parent, labelText, input) {
|
|
const label = manualElement("label", "manual-financial-field");
|
|
label.append(manualElement("span", "", labelText), input);
|
|
parent.appendChild(label);
|
|
}
|
|
|
|
function renderManualEditorFields(editor, record) {
|
|
const fields = manualElement("div", "manual-financial-fields");
|
|
if (record.screen === "revenue-composition") {
|
|
appendManualLabel(
|
|
fields,
|
|
"기준일",
|
|
manualInput(record.baseDate, "manualBaseDate", "true"));
|
|
const slices = manualElement("div", "manual-financial-grid manual-revenue-grid");
|
|
slices.append(
|
|
manualElement("strong", "", "구성"),
|
|
manualElement("strong", "", "비율"));
|
|
record.slices.forEach(function (slice, index) {
|
|
slices.append(
|
|
manualInput(slice ? slice.label : "", "manualRevenueLabel", index),
|
|
manualInput(
|
|
slice ? slice.percentageText : "",
|
|
"manualRevenuePercentage",
|
|
index));
|
|
});
|
|
fields.appendChild(slices);
|
|
} else if (record.screen === "growth-metrics") {
|
|
const grid = manualElement("div", "manual-financial-grid manual-growth-grid");
|
|
grid.appendChild(manualElement("strong", "", "구분"));
|
|
record.periods.forEach(function (period, index) {
|
|
grid.appendChild(manualInput(period, "manualGrowthPeriod", index));
|
|
});
|
|
[
|
|
["매출 성장", "salesGrowth"],
|
|
["영업이익 성장", "operatingProfitGrowth"],
|
|
["순자산 성장", "netAssetGrowth"],
|
|
["순이익 성장", "netIncomeGrowth"]
|
|
].forEach(function (series) {
|
|
grid.appendChild(manualElement("span", "", series[0]));
|
|
record[series[1]].forEach(function (value, index) {
|
|
const input = manualInput(
|
|
value,
|
|
"manualGrowthValue",
|
|
index,
|
|
record.rawMode ? "text" : "number");
|
|
input.dataset.manualGrowthSeries = series[1];
|
|
input.step = "any";
|
|
grid.appendChild(input);
|
|
});
|
|
});
|
|
fields.appendChild(grid);
|
|
} else {
|
|
const grid = manualElement("div", "manual-financial-grid manual-quarter-grid");
|
|
grid.append(
|
|
manualElement("strong", "", "분기"),
|
|
manualElement("strong", "", "값"));
|
|
record.quarters.forEach(function (quarter, index) {
|
|
grid.append(
|
|
manualInput(quarter.quarter, "manualQuarterLabel", index),
|
|
manualInput(
|
|
quarter.value,
|
|
"manualQuarterValue",
|
|
index,
|
|
record.rawMode ? "text" : "number"));
|
|
});
|
|
fields.appendChild(grid);
|
|
}
|
|
editor.appendChild(fields);
|
|
}
|
|
|
|
function bindManualRawStorageInputs(editor, record) {
|
|
if (!record || record.rawMode !== true) return;
|
|
const bind = function (selector, indexFactory) {
|
|
editor.querySelectorAll(selector).forEach(function (input) {
|
|
input.dataset.manualRawStorageIndex = String(indexFactory(input));
|
|
});
|
|
};
|
|
bind("[data-manual-base-date]", function () { return 0; });
|
|
bind("[data-manual-revenue-label], [data-manual-revenue-percentage]",
|
|
function (input) {
|
|
return Number(input.dataset.manualRevenueLabel !== undefined
|
|
? input.dataset.manualRevenueLabel
|
|
: input.dataset.manualRevenuePercentage) + 1;
|
|
});
|
|
const growthSeriesIndices = {
|
|
salesGrowth: 0,
|
|
operatingProfitGrowth: 1,
|
|
netAssetGrowth: 2,
|
|
netIncomeGrowth: 3
|
|
};
|
|
bind("[data-manual-growth-value]", function (input) {
|
|
return growthSeriesIndices[input.dataset.manualGrowthSeries];
|
|
});
|
|
bind("[data-manual-growth-period]", function () { return 4; });
|
|
bind("[data-manual-quarter-label], [data-manual-quarter-value]",
|
|
function (input) {
|
|
return Number(input.dataset.manualQuarterLabel !== undefined
|
|
? input.dataset.manualQuarterLabel
|
|
: input.dataset.manualQuarterValue);
|
|
});
|
|
}
|
|
|
|
function readManualRecord() {
|
|
if (!manualDraft || !manualWorkspace) return null;
|
|
const stockName = manualWorkspace.querySelector("#manual-financial-stock-name");
|
|
const record = blankManualRecord(manualDraft.screen);
|
|
record.stockName = stockName ? stockName.value.trim() : "";
|
|
if (record.screen === "revenue-composition") {
|
|
const baseDate = manualWorkspace.querySelector("[data-manual-base-date]");
|
|
record.baseDate = baseDate ? baseDate.value : "";
|
|
record.slices = record.slices.map(function (_, index) {
|
|
const label = manualWorkspace.querySelector(
|
|
"[data-manual-revenue-label=\"" + index + "\"]");
|
|
const percentage = manualWorkspace.querySelector(
|
|
"[data-manual-revenue-percentage=\"" + index + "\"]");
|
|
const labelValue = label ? label.value.trim() : "";
|
|
const percentageValue = percentage ? percentage.value.trim() : "";
|
|
return labelValue === "" && percentageValue === "" ? null : {
|
|
label: labelValue,
|
|
percentageText: percentageValue
|
|
};
|
|
});
|
|
} else if (record.screen === "growth-metrics") {
|
|
record.periods = record.periods.map(function (_, index) {
|
|
const input = manualWorkspace.querySelector(
|
|
"[data-manual-growth-period=\"" + index + "\"]");
|
|
return input ? input.value : "";
|
|
});
|
|
["salesGrowth", "operatingProfitGrowth", "netAssetGrowth", "netIncomeGrowth"]
|
|
.forEach(function (seriesName) {
|
|
record[seriesName] = record[seriesName].map(function (_, index) {
|
|
const input = manualWorkspace.querySelector(
|
|
"[data-manual-growth-series=\"" + seriesName + "\"]" +
|
|
"[data-manual-growth-value=\"" + index + "\"]");
|
|
if (!input || input.value.trim() === "") return null;
|
|
const value = Number(input.value);
|
|
return Number.isFinite(value) ? value : null;
|
|
});
|
|
});
|
|
} else {
|
|
record.quarters = record.quarters.map(function (_, index) {
|
|
const quarter = manualWorkspace.querySelector(
|
|
"[data-manual-quarter-label=\"" + index + "\"]");
|
|
const value = manualWorkspace.querySelector(
|
|
"[data-manual-quarter-value=\"" + index + "\"]");
|
|
const parsed = value && /^-?\d+$/.test(value.value.trim())
|
|
? Number(value.value) : null;
|
|
return {
|
|
quarter: quarter ? quarter.value.trim() : "",
|
|
value: parsed
|
|
};
|
|
});
|
|
}
|
|
return record;
|
|
}
|
|
|
|
function readManualRawRecord() {
|
|
if (!manualDraft || !manualWorkspace || manualDraft.rawMode !== true) return null;
|
|
const stockName = manualWorkspace.querySelector("#manual-financial-stock-name");
|
|
const record = {
|
|
screen: manualDraft.screen,
|
|
stockName: stockName ? stockName.value : "",
|
|
storageValues: []
|
|
};
|
|
if (record.screen === "revenue-composition") {
|
|
const baseDate = manualWorkspace.querySelector("[data-manual-base-date]");
|
|
record.storageValues.push(preserveManualRawStorageValue(
|
|
manualDraft,
|
|
0,
|
|
baseDate ? baseDate.value : ""));
|
|
for (let index = 0; index < 5; index += 1) {
|
|
const label = manualWorkspace.querySelector(
|
|
"[data-manual-revenue-label=\"" + index + "\"]");
|
|
const percentage = manualWorkspace.querySelector(
|
|
"[data-manual-revenue-percentage=\"" + index + "\"]");
|
|
record.storageValues.push(preserveManualRawStorageValue(
|
|
manualDraft,
|
|
index + 1,
|
|
(label ? label.value : "") + "_" +
|
|
(percentage ? percentage.value : "")));
|
|
}
|
|
} else if (record.screen === "growth-metrics") {
|
|
["salesGrowth", "operatingProfitGrowth", "netAssetGrowth", "netIncomeGrowth"]
|
|
.forEach(function (seriesName) {
|
|
const values = [];
|
|
for (let index = 0; index < 4; index += 1) {
|
|
const input = manualWorkspace.querySelector(
|
|
"[data-manual-growth-series=\"" + seriesName + "\"]" +
|
|
"[data-manual-growth-value=\"" + index + "\"]");
|
|
values.push(input ? input.value : "");
|
|
}
|
|
record.storageValues.push(preserveManualRawStorageValue(
|
|
manualDraft,
|
|
record.storageValues.length,
|
|
values.join("_")));
|
|
});
|
|
const periods = [];
|
|
for (let index = 0; index < 4; index += 1) {
|
|
const input = manualWorkspace.querySelector(
|
|
"[data-manual-growth-period=\"" + index + "\"]");
|
|
periods.push(input ? input.value : "");
|
|
}
|
|
record.storageValues.push(preserveManualRawStorageValue(
|
|
manualDraft,
|
|
4,
|
|
periods.join("_")));
|
|
} else {
|
|
for (let index = 0; index < 6; index += 1) {
|
|
const quarter = manualWorkspace.querySelector(
|
|
"[data-manual-quarter-label=\"" + index + "\"]");
|
|
const value = manualWorkspace.querySelector(
|
|
"[data-manual-quarter-value=\"" + index + "\"]");
|
|
record.storageValues.push(preserveManualRawStorageValue(
|
|
manualDraft,
|
|
index,
|
|
(quarter ? quarter.value : "") + "_" + (value ? value.value : "")));
|
|
}
|
|
}
|
|
return record;
|
|
}
|
|
|
|
function rememberManualDraft() {
|
|
if (manualDraft && manualDraft.rawMode === true) {
|
|
const raw = readManualRawRecord();
|
|
if (raw) manualDraft = manualRecordFromRaw(raw);
|
|
return;
|
|
}
|
|
const record = readManualRecord();
|
|
if (record) manualDraft = record;
|
|
}
|
|
|
|
function focusManualFinancialStock(stock) {
|
|
if (!stock || stock.disabled === true || !manualWorkspace.contains(stock)) return false;
|
|
if (document.activeElement !== stock) stock.focus({ preventScroll: true });
|
|
return true;
|
|
}
|
|
|
|
function selectManualFinancialStock(stock) {
|
|
if (!focusManualFinancialStock(stock)) return false;
|
|
rememberManualDraft();
|
|
const previousDraft = manualDraft ? cloneManualRecord(manualDraft) : null;
|
|
const previousDraftKey = manualDraftKey;
|
|
const previousDraftResetPending = manualDraftResetPending;
|
|
const stockName = manualWorkspace.querySelector("#manual-financial-stock-name");
|
|
const stockIsSelected = stock.getAttribute("aria-selected") === "true";
|
|
if (stockName && shouldResetManualStockDraft(
|
|
stockIsSelected,
|
|
stockName.readOnly,
|
|
manualDraft)) {
|
|
// The original GraphE forms cleared the other editor cells whenever the
|
|
// operator deliberately chose another stock. Do this only for that
|
|
// selection transition; ordinary native rerenders keep the live draft.
|
|
manualDraft = blankManualRecord(manualDraft.screen);
|
|
manualDraftKey = manualDraft.screen + "|new";
|
|
manualDraftResetPending = true;
|
|
}
|
|
if (send("select-manual-financial-stock", {
|
|
resultId: stock.dataset.manualStockResultId
|
|
})) return true;
|
|
|
|
manualDraft = previousDraft;
|
|
manualDraftKey = previousDraftKey;
|
|
manualDraftResetPending = previousDraftResetPending;
|
|
return false;
|
|
}
|
|
|
|
function captureManualDraftForChangedModel() {
|
|
if (!manualModal.hidden && !manualDraftResetPending) rememberManualDraft();
|
|
manualDraftResetPending = false;
|
|
}
|
|
|
|
function renderManualFinancial(state) {
|
|
const manual = state.manualFinancial;
|
|
manualButtons.forEach(function (button) {
|
|
button.disabled = state.isBusy === true;
|
|
});
|
|
if (!manual) {
|
|
clearManualResultPendingSelection(false);
|
|
setTransientControlsBusy(manualDialog, false);
|
|
manualModal.hidden = true;
|
|
manualWorkspace.replaceChildren();
|
|
forgetSearchDraft(
|
|
"manual-financial-list-query",
|
|
"manual-financial-find-query");
|
|
manualFinancialSearchFocus = null;
|
|
manualDraft = null;
|
|
manualDraftKey = "";
|
|
manualDraftResetPending = false;
|
|
manualFinancialRenderStateKey = "";
|
|
return;
|
|
}
|
|
|
|
const capturedSearchFocus = captureSearchDraftFocus(manualWorkspace);
|
|
if (capturedSearchFocus) manualFinancialSearchFocus = capturedSearchFocus;
|
|
const manualSearchScope = "manual-financial:" + manual.screen;
|
|
const renderStateKey = JSON.stringify(manual);
|
|
if (manualResultPendingSelection) {
|
|
if (manualResultPendingSelection.sent && state.isBusy !== true) {
|
|
const accepted = manual.selectedRowId === manualResultPendingSelection.key;
|
|
clearManualResultPendingSelection(!accepted);
|
|
} else if (!manualResultPendingSelection.sent &&
|
|
manualFinancialRenderStateKey &&
|
|
renderStateKey !== manualFinancialRenderStateKey) {
|
|
clearManualResultPendingSelection(false);
|
|
} else {
|
|
applyPendingRowSelection(manualResultPendingSelection, false);
|
|
applyPendingControlLocks(manualResultPendingSelection.lockedControls);
|
|
}
|
|
}
|
|
if (!manualModal.hidden && renderStateKey === manualFinancialRenderStateKey) {
|
|
setTransientControlsBusy(manualDialog, state.isBusy === true);
|
|
if (state.isBusy !== true &&
|
|
restoreSearchDraftFocus(manualWorkspace, manualFinancialSearchFocus)) {
|
|
manualFinancialSearchFocus = null;
|
|
}
|
|
return;
|
|
}
|
|
|
|
captureManualDraftForChangedModel();
|
|
// Clear the previous transient snapshot before applying a changed model.
|
|
// Otherwise a busy -> new-model transition can restore the old screen's
|
|
// semantic disabled states over the controls rendered below.
|
|
setTransientControlsBusy(manualDialog, false);
|
|
if (manualModal.hidden) rememberModalOpener(manualDialog);
|
|
manualModal.hidden = false;
|
|
manualTitle.textContent = manual.label + " · GraphE 수동 입력";
|
|
const selectedEditorRecord = manual.selectedRawRecord
|
|
? manualRecordFromRaw(manual.selectedRawRecord)
|
|
: manual.selectedRecord;
|
|
const detailKey = manual.screen + "|" + (manual.selectedRowId || "new") + "|" +
|
|
JSON.stringify(manual.selectedRawRecord || manual.selectedRecord || null);
|
|
if (selectedEditorRecord && detailKey !== manualDraftKey) {
|
|
manualDraft = cloneManualRecord(selectedEditorRecord);
|
|
manualDraftKey = detailKey;
|
|
} else if (!manualDraft || manualDraft.screen !== manual.screen) {
|
|
manualDraft = blankManualRecord(manual.screen);
|
|
manualDraftKey = manual.screen + "|new";
|
|
}
|
|
if (!manual.selectedRecord && manual.verifiedStock) {
|
|
manualDraft.stockName = manual.verifiedStock.name;
|
|
}
|
|
|
|
const toolbar = manualElement("div", "manual-financial-toolbar");
|
|
const listQuery = manualInput(manual.query || "", "manualListQuery", "true");
|
|
listQuery.id = "manual-financial-list-query";
|
|
syncSearchDraft(listQuery, manual.query, manualSearchScope);
|
|
const listSearch = manualElement("button", "", "목록 검색");
|
|
listSearch.type = "button";
|
|
listSearch.dataset.manualListSearch = "true";
|
|
const findQuery = manualInput(manual.findQuery || "", "manualFindQuery", "true");
|
|
findQuery.id = "manual-financial-find-query";
|
|
findQuery.placeholder = "종목명 찾기";
|
|
syncSearchDraft(findQuery, manual.findQuery, manualSearchScope);
|
|
const findUp = manualElement("button", "", "▲ 위로 찾기");
|
|
findUp.type = "button";
|
|
findUp.dataset.manualFindDirection = "up";
|
|
findUp.dataset.manualGeneration = String(manual.generation);
|
|
const findDown = manualElement("button", "", "▼ 아래로 찾기");
|
|
findDown.type = "button";
|
|
findDown.dataset.manualFindDirection = "down";
|
|
findDown.dataset.manualGeneration = String(manual.generation);
|
|
const create = manualElement("button", "", "새 입력");
|
|
create.type = "button";
|
|
create.dataset.manualCreate = "true";
|
|
toolbar.append(listQuery, listSearch, create, findQuery, findUp, findDown);
|
|
|
|
const body = manualElement("div", "manual-financial-body");
|
|
const list = manualElement("div", "manual-financial-list");
|
|
list.setAttribute("aria-label", manual.label + " 저장 목록");
|
|
const previewColumns = manualFinancialPreviewColumns(manual.screen);
|
|
list.classList.add("manual-financial-preview-columns-" + String(previewColumns.length));
|
|
const nameHeader = manualElement(
|
|
"button",
|
|
"manual-financial-list-header manual-financial-list-row");
|
|
nameHeader.type = "button";
|
|
nameHeader.dataset.manualNameSort = "true";
|
|
nameHeader.dataset.manualGeneration = String(manual.generation);
|
|
nameHeader.title = "종목명 정렬 방향 전환";
|
|
previewColumns.forEach(function (label, index) {
|
|
nameHeader.appendChild(manualElement(
|
|
"span",
|
|
"manual-financial-preview-cell",
|
|
index === 0
|
|
? label + " " + (manual.nameSortDirection === "descending" ? "▼" : "▲")
|
|
: label));
|
|
});
|
|
list.appendChild(nameHeader);
|
|
let selectedManualRow = null;
|
|
manual.rows.forEach(function (row) {
|
|
const button = manualElement("button", "manual-financial-list-row");
|
|
button.type = "button";
|
|
button.id = "manual-financial-result-" + row.resultId;
|
|
button.dataset.manualResultId = row.resultId;
|
|
const isSelected = manual.selectedRowId === row.resultId;
|
|
button.classList.toggle("selected", isSelected);
|
|
button.setAttribute("aria-selected", isSelected ? "true" : "false");
|
|
const previewValues = manualFinancialPreviewValues(row, previewColumns.length);
|
|
previewValues.forEach(function (value) {
|
|
const cell = manualElement("span", "manual-financial-preview-cell", value);
|
|
if (value) cell.title = value;
|
|
button.appendChild(cell);
|
|
});
|
|
button.setAttribute("aria-label", previewColumns.map(function (label, index) {
|
|
return label + " " + (previewValues[index] || "없음");
|
|
}).join(", "));
|
|
if (row.isDataReadable === false) {
|
|
button.classList.add("manual-financial-row-unreadable");
|
|
button.title = "종목 이름을 읽을 수 없어 이 행을 사용할 수 없습니다.";
|
|
button.setAttribute(
|
|
"aria-label",
|
|
button.getAttribute("aria-label") + " · 읽기 불가");
|
|
} else if (row.isPlayoutReady === false) {
|
|
button.classList.add("manual-financial-row-legacy");
|
|
button.title = "기존 GraphE 원문 형식입니다. 선택해 원문 그대로 확인하고 편집할 수 있습니다.";
|
|
button.setAttribute(
|
|
"aria-label",
|
|
button.getAttribute("aria-label") + " · 기존 원문 형식");
|
|
}
|
|
if (isSelected) selectedManualRow = button;
|
|
list.appendChild(button);
|
|
});
|
|
configureRovingList(
|
|
list,
|
|
Array.from(list.querySelectorAll("button[data-manual-result-id]")),
|
|
selectedManualRow);
|
|
|
|
const editor = manualElement("section", "manual-financial-editor");
|
|
const stockLine = manualElement("div", "manual-financial-stock-line");
|
|
const stockInput = manualInput(manualDraft.stockName || "");
|
|
stockInput.id = "manual-financial-stock-name";
|
|
stockInput.readOnly = !!manual.selectedRecord || !!manual.selectedRawRecord;
|
|
const stockSearch = manualElement("button", "", "종목 확인");
|
|
stockSearch.type = "button";
|
|
stockSearch.dataset.manualStockSearch = "true";
|
|
stockLine.append(stockInput, stockSearch);
|
|
editor.appendChild(stockLine);
|
|
|
|
const candidates = manualElement("div", "manual-financial-stock-results");
|
|
let selectedManualStock = null;
|
|
manual.stockCandidates.forEach(function (row) {
|
|
const isSelected = manual.selectedStockResultId === row.resultId;
|
|
const button = manualElement(
|
|
"button",
|
|
isSelected ? "selected" : "",
|
|
row.name + " · " + row.market);
|
|
button.type = "button";
|
|
button.id = "manual-financial-stock-result-" + row.resultId;
|
|
button.dataset.manualStockResultId = row.resultId;
|
|
button.setAttribute(
|
|
"aria-selected",
|
|
isSelected ? "true" : "false");
|
|
if (isSelected) selectedManualStock = button;
|
|
candidates.appendChild(button);
|
|
});
|
|
// A single click on the legacy GraphE candidate ListBox only moved its
|
|
// focus/highlight. Keep arrow/page navigation equally non-destructive;
|
|
// double-click or Enter remains the explicit stock-selection command.
|
|
configureRovingList(
|
|
candidates,
|
|
Array.from(candidates.querySelectorAll("button[data-manual-stock-result-id]")),
|
|
selectedManualStock,
|
|
{ activation: "focus", selectionFollowsFocus: false });
|
|
editor.appendChild(candidates);
|
|
const verification = manualElement(
|
|
"div",
|
|
"manual-financial-verification",
|
|
manual.verifiedStock
|
|
? "확인됨: " + manual.verifiedStock.name + " · " + manual.verifiedStock.market
|
|
: "정확한 종목 마스터를 확인하세요.");
|
|
editor.appendChild(verification);
|
|
const referenceFigure = manualFinancialReferenceFigure(manual.screen, manual.label);
|
|
if (referenceFigure) editor.appendChild(referenceFigure);
|
|
renderManualEditorFields(editor, manualDraft);
|
|
bindManualRawStorageInputs(editor, manualDraft);
|
|
if (manual.selectedRawRecord && manual.isPlayoutReady !== true) {
|
|
editor.appendChild(manualElement(
|
|
"div",
|
|
"manual-financial-warning",
|
|
"기존 GraphE 원문 값으로 불러왔습니다. 편집·삭제할 수 있고, 송출 전에는 장면 데이터 검증을 다시 수행합니다."));
|
|
}
|
|
|
|
const actions = manualElement("div", "manual-financial-actions");
|
|
const save = manualElement("button", "manual-primary", "저장");
|
|
save.type = "button";
|
|
save.dataset.manualSave = "true";
|
|
save.disabled = !manual.canSave;
|
|
const remove = manualElement("button", "", "선택 삭제");
|
|
remove.type = "button";
|
|
remove.dataset.manualDelete = "true";
|
|
remove.disabled = !manual.canDelete;
|
|
const removeAll = manualElement("button", "", "전체 삭제");
|
|
removeAll.type = "button";
|
|
removeAll.dataset.manualDeleteAll = "true";
|
|
removeAll.disabled = manual.writesQuarantined === true;
|
|
const add = manualElement("button", "manual-primary", "편성표에 추가");
|
|
add.type = "button";
|
|
add.dataset.manualActionId = manual.action.actionId;
|
|
add.disabled = !manual.canMaterializePlaylist;
|
|
actions.append(save, remove, removeAll, add);
|
|
editor.appendChild(actions);
|
|
if (manual.lastMessage) {
|
|
editor.appendChild(manualElement(
|
|
"div",
|
|
manual.writesQuarantined || manual.listRejectedItemCount > 0 ||
|
|
manual.listIsTruncated === true
|
|
? "manual-financial-warning"
|
|
: "manual-financial-message",
|
|
manual.lastMessage));
|
|
}
|
|
|
|
body.append(list, editor);
|
|
manualWorkspace.replaceChildren(toolbar, body);
|
|
manualClose.disabled = false;
|
|
manualExit.disabled = manualClose.disabled;
|
|
setTransientControlsBusy(manualDialog, state.isBusy === true);
|
|
manualFinancialRenderStateKey = renderStateKey;
|
|
if (state.isBusy !== true &&
|
|
restoreSearchDraftFocus(manualWorkspace, manualFinancialSearchFocus)) {
|
|
manualFinancialSearchFocus = null;
|
|
}
|
|
}
|
|
|
|
function isCanonicalNamedPlaylistTitle(value) {
|
|
return value.length > 0 && value.length <= 128 && value === value.trim() &&
|
|
!/[\u0000-\u001f\u007f-\u009f\ud800-\udfff\ufffd]/.test(value);
|
|
}
|
|
|
|
function renderManualLists(state) {
|
|
const manual = state.manualLists;
|
|
const fixedBatch = state.fixedSectionBatch;
|
|
manualListButtons.forEach(function (button) {
|
|
button.disabled = state.isBusy === true || fixedBatch != null;
|
|
});
|
|
if (!manual || manual.isOpen !== true) {
|
|
clearManualViResultPendingSelection(false);
|
|
setTransientControlsBusy(manualListDialog, false);
|
|
manualListModal.hidden = true;
|
|
manualListWorkspace.replaceChildren();
|
|
forgetSearchDraft("manual-vi-search");
|
|
manualListSearchFocus = null;
|
|
manualListRenderStateKey = "";
|
|
return;
|
|
}
|
|
|
|
if (manual.screen === "vi") {
|
|
const capturedSearchFocus = captureSearchDraftFocus(manualListWorkspace);
|
|
if (capturedSearchFocus) manualListSearchFocus = capturedSearchFocus;
|
|
} else {
|
|
clearManualViResultPendingSelection(false);
|
|
forgetSearchDraft("manual-vi-search");
|
|
manualListSearchFocus = null;
|
|
}
|
|
const renderStateKey = JSON.stringify({
|
|
manual: manual,
|
|
fixedBatch: fixedBatch
|
|
});
|
|
if (manualViResultPendingSelection) {
|
|
if (manualViResultPendingSelection.sent && state.isBusy !== true) {
|
|
const accepted = manual.selectedSearchResultId ===
|
|
manualViResultPendingSelection.key;
|
|
clearManualViResultPendingSelection(!accepted);
|
|
} else if (!manualViResultPendingSelection.sent && manualListRenderStateKey &&
|
|
renderStateKey !== manualListRenderStateKey) {
|
|
clearManualViResultPendingSelection(false);
|
|
} else {
|
|
applyPendingRowSelection(manualViResultPendingSelection, false);
|
|
}
|
|
}
|
|
if (!manualListModal.hidden && renderStateKey === manualListRenderStateKey) {
|
|
setTransientControlsBusy(manualListDialog, state.isBusy === true);
|
|
if (state.isBusy !== true && manual.screen === "vi" &&
|
|
restoreSearchDraftFocus(manualListWorkspace, manualListSearchFocus)) {
|
|
manualListSearchFocus = null;
|
|
}
|
|
return;
|
|
}
|
|
|
|
setTransientControlsBusy(manualListDialog, false);
|
|
if (manualListModal.hidden) rememberModalOpener(manualListDialog);
|
|
manualListModal.hidden = false;
|
|
const busy = state.isBusy === true;
|
|
if (manual.screen !== "vi") {
|
|
clearManualViResultPendingSelection(false);
|
|
}
|
|
const audienceLabels = {
|
|
individual: "개인",
|
|
foreign: "외국인",
|
|
institution: "기관"
|
|
};
|
|
const baseTitle = manual.screen === "vi"
|
|
? "VI 발동 수동 목록"
|
|
: (audienceLabels[manual.audience] || "수동") + " 순매도 상위";
|
|
manualListTitle.textContent = fixedBatch
|
|
? baseTitle + " · " + fixedBatch.sectionName + " " +
|
|
String(fixedBatch.manualStepNumber) + "/" + String(fixedBatch.manualStepCount)
|
|
: baseTitle;
|
|
|
|
const fragment = document.createDocumentFragment();
|
|
if (fixedBatch) {
|
|
const progress = manualElement(
|
|
"div",
|
|
"manual-list-status",
|
|
"섹션 전체 " + String(fixedBatch.totalActionCount) + "개는 아직 편성표에 추가되지 않았습니다. " +
|
|
"현재 항목을 확인하면 C#이 다음 수동 항목으로 진행하며, 닫으면 배치를 취소합니다.");
|
|
progress.setAttribute("role", "status");
|
|
fragment.appendChild(progress);
|
|
}
|
|
if (manual.writesQuarantined || manual.isAvailable !== true) {
|
|
const warning = manualElement(
|
|
"div",
|
|
"manual-list-status error",
|
|
manual.statusMessage || manual.availabilityMessage ||
|
|
"수동 목록 저장소를 사용할 수 없습니다.");
|
|
warning.setAttribute("role", "alert");
|
|
fragment.appendChild(warning);
|
|
}
|
|
|
|
if (manual.screen === "net-sell") {
|
|
const tabs = manualElement("div", "manual-list-tabs");
|
|
Object.keys(audienceLabels).forEach(function (audience) {
|
|
const button = manualElement(
|
|
"button",
|
|
audience === manual.audience ? "active" : "",
|
|
audienceLabels[audience]);
|
|
button.type = "button";
|
|
button.disabled = fixedBatch != null;
|
|
button.addEventListener("click", function () {
|
|
send("open-manual-list", { screen: audience });
|
|
});
|
|
tabs.appendChild(button);
|
|
});
|
|
fragment.appendChild(tabs);
|
|
|
|
const wrap = manualElement("div", "manual-list-table-wrap");
|
|
const table = manualElement("table", "manual-list-table");
|
|
const head = document.createElement("thead");
|
|
const headRow = document.createElement("tr");
|
|
["#", "좌측 종목", "좌측 금액", "우측 종목", "우측 금액"].forEach(function (label) {
|
|
headRow.appendChild(manualElement("th", "", label));
|
|
});
|
|
head.appendChild(headRow);
|
|
table.appendChild(head);
|
|
const body = document.createElement("tbody");
|
|
const fields = ["leftName", "leftAmount", "rightName", "rightAmount"];
|
|
manual.netRows.forEach(function (row, index) {
|
|
const tr = document.createElement("tr");
|
|
tr.appendChild(manualElement("th", "", String(index + 1)));
|
|
fields.forEach(function (field) {
|
|
const td = document.createElement("td");
|
|
const input = document.createElement("input");
|
|
input.type = "text";
|
|
input.maxLength = 256;
|
|
input.value = row[field] || "";
|
|
input.disabled = manual.isAvailable !== true || manual.writesQuarantined;
|
|
input.addEventListener("change", function () {
|
|
setTransientControlsBusy(manualListDialog, true);
|
|
const sent = send("set-manual-net-sell-cell", {
|
|
rowId: row.rowId,
|
|
field: field,
|
|
value: input.value
|
|
});
|
|
if (!sent) setTransientControlsBusy(manualListDialog, false);
|
|
});
|
|
td.appendChild(input);
|
|
tr.appendChild(td);
|
|
});
|
|
body.appendChild(tr);
|
|
});
|
|
table.appendChild(body);
|
|
wrap.appendChild(table);
|
|
fragment.appendChild(wrap);
|
|
} else {
|
|
const search = manualElement("div", "manual-list-search");
|
|
const input = document.createElement("input");
|
|
input.type = "search";
|
|
input.id = "manual-vi-search";
|
|
input.maxLength = 100;
|
|
input.placeholder = "종목명 검색";
|
|
syncSearchDraft(input, manual.searchQuery, "manual-list:vi");
|
|
const searchButton = manualElement("button", "", "검색");
|
|
searchButton.type = "button";
|
|
searchButton.disabled = manual.isAvailable !== true;
|
|
function submitSearch() {
|
|
send("search-manual-vi", { query: input.value });
|
|
}
|
|
searchButton.addEventListener("click", submitSearch);
|
|
input.addEventListener("keydown", function (event) {
|
|
if (event.key === "Enter" && !isImeComposing(event)) {
|
|
event.preventDefault();
|
|
submitSearch();
|
|
}
|
|
});
|
|
search.append(input, searchButton);
|
|
fragment.appendChild(search);
|
|
|
|
const results = manualElement("div", "manual-list-search-results");
|
|
results.setAttribute("aria-label", "VI 종목 검색 결과");
|
|
let selectedViResult = null;
|
|
manual.searchResults.forEach(function (row) {
|
|
const isSelected = manual.selectedSearchResultId === row.resultId;
|
|
const button = manualElement(
|
|
"button",
|
|
isSelected ? "selected" : "",
|
|
row.displayName + " · " + row.marketText);
|
|
button.type = "button";
|
|
button.id = "manual-vi-result-" + row.resultId;
|
|
button.dataset.manualViResultId = row.resultId;
|
|
button.disabled = false;
|
|
button.setAttribute("aria-selected", isSelected ? "true" : "false");
|
|
if (isSelected) selectedViResult = button;
|
|
button.addEventListener("click", function () {
|
|
clearDelayedClick(manualViResultClickTimer);
|
|
const pending = beginManualViResultPendingSelection(button, row.resultId);
|
|
manualViResultClickTimer = deferLegacySingleClick(function () {
|
|
manualViResultClickTimer = null;
|
|
if (!pending || manualViResultPendingSelection !== pending) return;
|
|
if (send("select-manual-vi-result", { resultId: row.resultId })) {
|
|
pending.sent = true;
|
|
} else {
|
|
clearManualViResultPendingSelection(true);
|
|
}
|
|
});
|
|
});
|
|
button.addEventListener("dblclick", function (event) {
|
|
event.preventDefault();
|
|
clearDelayedClick(manualViResultClickTimer);
|
|
manualViResultClickTimer = null;
|
|
const pending = manualViResultPendingSelection &&
|
|
manualViResultPendingSelection.key === row.resultId
|
|
? manualViResultPendingSelection
|
|
: beginManualViResultPendingSelection(button, row.resultId);
|
|
if (send("add-manual-vi-result", { resultId: row.resultId })) {
|
|
if (pending) pending.sent = true;
|
|
} else {
|
|
clearManualViResultPendingSelection(true);
|
|
}
|
|
});
|
|
results.appendChild(button);
|
|
});
|
|
configureRovingList(
|
|
results,
|
|
Array.from(results.querySelectorAll("button[data-manual-vi-result-id]")),
|
|
selectedViResult);
|
|
fragment.appendChild(results);
|
|
|
|
if (manual.searchIsTruncated === true) {
|
|
const truncationWarning = manualElement(
|
|
"div",
|
|
"manual-list-status warning",
|
|
"검색 결과 일부만 표시 중입니다. 검색어를 더 구체적으로 입력해 주세요.");
|
|
truncationWarning.setAttribute("role", "status");
|
|
fragment.appendChild(truncationWarning);
|
|
}
|
|
|
|
const summary = manualElement(
|
|
"div",
|
|
"manual-list-status",
|
|
String(manual.viItems.length) + "/100종목 · " +
|
|
String(manual.viPageCount) + "페이지");
|
|
fragment.appendChild(summary);
|
|
const wrap = manualElement("div", "manual-list-table-wrap");
|
|
const table = manualElement("table", "manual-list-table");
|
|
const body = document.createElement("tbody");
|
|
manual.viItems.forEach(function (row, index) {
|
|
const tr = document.createElement("tr");
|
|
tr.append(
|
|
manualElement("td", "", String(row.index)),
|
|
manualElement("td", "", row.name));
|
|
const controls = manualElement("td", "manual-list-row-actions");
|
|
[["↑", "up"], ["↓", "down"]].forEach(function (move) {
|
|
const button = manualElement("button", "", move[0]);
|
|
button.type = "button";
|
|
button.disabled = move[1] === "up"
|
|
? index === 0
|
|
: index === manual.viItems.length - 1;
|
|
button.addEventListener("click", function () {
|
|
send("move-manual-vi-item", { itemId: row.itemId, direction: move[1] });
|
|
});
|
|
controls.appendChild(button);
|
|
});
|
|
const remove = manualElement("button", "", "삭제");
|
|
remove.type = "button";
|
|
remove.disabled = false;
|
|
remove.addEventListener("click", function () {
|
|
send("delete-manual-vi-item", { itemId: row.itemId });
|
|
});
|
|
controls.appendChild(remove);
|
|
tr.appendChild(controls);
|
|
body.appendChild(tr);
|
|
});
|
|
table.appendChild(body);
|
|
wrap.appendChild(table);
|
|
fragment.appendChild(wrap);
|
|
}
|
|
|
|
if (manual.statusMessage) {
|
|
fragment.appendChild(manualElement(
|
|
"div",
|
|
"manual-list-status" +
|
|
(manual.statusKind === "error" || manual.writesQuarantined ? " error" : ""),
|
|
manual.statusMessage));
|
|
}
|
|
const actions = manualElement("div", "manual-list-actions-row");
|
|
const importButton = manualElement("button", "", "원본 1회 가져오기");
|
|
importButton.type = "button";
|
|
importButton.disabled = manual.isAvailable !== true || manual.writesQuarantined;
|
|
importButton.addEventListener("click", function () {
|
|
if (window.confirm("원본 파일을 현재 빈 저장소로 한 번만 가져옵니다. 기존 파일은 덮어쓰지 않습니다.")) {
|
|
send("import-manual-lists", {});
|
|
}
|
|
});
|
|
const refresh = manualElement("button", "", "재조회");
|
|
refresh.type = "button";
|
|
refresh.disabled = manual.isAvailable !== true;
|
|
refresh.addEventListener("click", function () { send("refresh-manual-list", {}); });
|
|
if (manual.screen === "vi") {
|
|
const clear = manualElement("button", "", "전체 삭제");
|
|
clear.type = "button";
|
|
clear.addEventListener("click", function () {
|
|
send("delete-all-manual-vi-items", {});
|
|
});
|
|
actions.appendChild(clear);
|
|
}
|
|
const confirm = manualElement("button", "primary", "확인");
|
|
confirm.type = "button";
|
|
if (fixedBatch) {
|
|
confirm.textContent = fixedBatch.manualStepNumber < fixedBatch.manualStepCount
|
|
? "확인 후 다음"
|
|
: "확인 후 섹션 추가";
|
|
}
|
|
confirm.disabled = manual.canSave !== true;
|
|
confirm.addEventListener("click", function () {
|
|
send("confirm-manual-list", {});
|
|
});
|
|
actions.append(importButton, refresh, confirm);
|
|
fragment.appendChild(actions);
|
|
manualListWorkspace.replaceChildren(fragment);
|
|
manualListClose.disabled = false;
|
|
manualListCancel.disabled = manualListClose.disabled;
|
|
setTransientControlsBusy(manualListDialog, busy);
|
|
manualListRenderStateKey = renderStateKey;
|
|
if (!busy && manual.screen === "vi" &&
|
|
restoreSearchDraftFocus(manualListWorkspace, manualListSearchFocus)) {
|
|
manualListSearchFocus = null;
|
|
}
|
|
}
|
|
|
|
function openNamedPlaylist(mode) {
|
|
if (operatorMutationLocked ||
|
|
(mode === "load" && playlistStructureMutationLocked)) return false;
|
|
namedPlaylistSelection.cancel();
|
|
namedPlaylistMode = mode;
|
|
namedPlaylistTitle.textContent = mode === "save"
|
|
? "DB 재생목록 저장" : "DB 재생목록 불러오기";
|
|
namedPlaylistConfirmButton.textContent = mode === "save" ? "현재 목록 저장" : "불러오기";
|
|
namedPlaylistNewTitle.value = "";
|
|
if (namedPlaylistModal.hidden) rememberModalOpener(namedPlaylistDialog);
|
|
namedPlaylistModal.hidden = false;
|
|
if (namedPlaylistState) {
|
|
renderNamedPlaylist({ namedPlaylist: namedPlaylistState, isBusy: uiBusy });
|
|
}
|
|
syncModalFocus();
|
|
beginNamedPlaylistBusyCycle("refresh-named-playlists", {});
|
|
return true;
|
|
}
|
|
|
|
function closeNamedPlaylist() {
|
|
if (isNamedPlaylistModalLocked() || namedPlaylistSelection.isPending()) return false;
|
|
namedPlaylistMode = null;
|
|
namedPlaylistModal.hidden = true;
|
|
syncModalFocus();
|
|
return true;
|
|
}
|
|
|
|
function isNamedPlaylistModalLocked() {
|
|
return uiBusy || pendingNamedPlaylistCommand !== null ||
|
|
namedPlaylistConfirmation !== null ||
|
|
!!(namedPlaylistState && namedPlaylistState.isWriteInProgress === true);
|
|
}
|
|
|
|
function isNamedPlaylistActionLocked() {
|
|
return isNamedPlaylistModalLocked() || operatorMutationLocked ||
|
|
namedPlaylistSelection.isPending();
|
|
}
|
|
|
|
function isNamedPlaylistDefinitionLocked() {
|
|
return operatorMutationLocked || pendingNamedPlaylistCommand !== null ||
|
|
namedPlaylistConfirmation !== null ||
|
|
!!(namedPlaylistState && namedPlaylistState.isWriteInProgress === true) ||
|
|
(uiBusy && !namedPlaylistSelection.isPending());
|
|
}
|
|
|
|
function markNamedPlaylistVisualSelection(definitionId) {
|
|
namedPlaylistDefinitions
|
|
.querySelectorAll("button[data-named-playlist-definition-id]")
|
|
.forEach(function (button) {
|
|
const selected = button.dataset.namedPlaylistDefinitionId === definitionId;
|
|
button.setAttribute("aria-selected", selected ? "true" : "false");
|
|
button.classList.toggle("selected", selected);
|
|
});
|
|
}
|
|
|
|
function lockNamedPlaylistSelectionActions() {
|
|
namedPlaylistClose.disabled = true;
|
|
namedPlaylistCancelButton.disabled = true;
|
|
namedPlaylistNewTitle.disabled = true;
|
|
namedPlaylistCreateButton.disabled = true;
|
|
namedPlaylistDeleteButton.disabled = true;
|
|
namedPlaylistConfirmButton.disabled = true;
|
|
}
|
|
|
|
function beginNamedPlaylistSelection(definitionId) {
|
|
if (namedPlaylistSelection.isPending()) {
|
|
const pending = namedPlaylistSelection.begin(
|
|
definitionId,
|
|
namedPlaylistState && namedPlaylistState.selectedDefinitionId);
|
|
if (pending.accepted) markNamedPlaylistVisualSelection(definitionId);
|
|
return pending.accepted;
|
|
}
|
|
if (isNamedPlaylistModalLocked() || operatorMutationLocked) return false;
|
|
|
|
const requestId = "named-ui-" + String(nextNamedPlaylistRequestId++);
|
|
const started = namedPlaylistSelection.begin(
|
|
definitionId,
|
|
namedPlaylistState && namedPlaylistState.selectedDefinitionId,
|
|
requestId,
|
|
lastCommandSequence + 1);
|
|
if (!started.accepted) return false;
|
|
markNamedPlaylistVisualSelection(definitionId);
|
|
if (!started.shouldSend) return true;
|
|
|
|
lockNamedPlaylistSelectionActions();
|
|
if (!send("select-named-playlist", {
|
|
definitionId: definitionId,
|
|
requestId: started.requestId
|
|
})) {
|
|
namedPlaylistSelection.cancel();
|
|
restoreNamedPlaylistAfterConfirmation();
|
|
return false;
|
|
}
|
|
return true;
|
|
}
|
|
|
|
function runNamedPlaylistDoubleClick(definitionId, mode) {
|
|
if (mode === "save") {
|
|
return openNamedPlaylistConfirmation({
|
|
kind: "save",
|
|
definitionId: definitionId,
|
|
message: "저장하겠습니까?",
|
|
showSavedAlert: false,
|
|
closeOnNo: true
|
|
});
|
|
}
|
|
return beginNamedPlaylistCommand("load-named-playlist-by-id", definitionId, false);
|
|
}
|
|
|
|
function lockNamedPlaylistControls() {
|
|
namedPlaylistModal.querySelectorAll("button, input").forEach(function (control) {
|
|
control.disabled = true;
|
|
});
|
|
}
|
|
|
|
function beginNamedPlaylistBusyCycle(type, payload) {
|
|
if (isNamedPlaylistActionLocked()) return false;
|
|
const requestId = "named-ui-" + String(nextNamedPlaylistRequestId++);
|
|
pendingNamedPlaylistCommand = {
|
|
command: type,
|
|
targetId: requestId,
|
|
minimumSequence: lastCommandSequence + 1,
|
|
closeOnSuccess: false,
|
|
showSavedAlert: false
|
|
};
|
|
const correlatedPayload = Object.assign({}, payload || {}, { requestId: requestId });
|
|
if (!send(type, correlatedPayload)) {
|
|
pendingNamedPlaylistCommand = null;
|
|
return false;
|
|
}
|
|
lockNamedPlaylistControls();
|
|
return true;
|
|
}
|
|
|
|
function beginNamedPlaylistCommand(command, definitionId, showSavedAlert) {
|
|
if (isNamedPlaylistActionLocked() || !definitionId) return false;
|
|
const payload = { definitionId: definitionId };
|
|
if (command === "save-current-named-playlist-to") {
|
|
payload.showSavedAlert = showSavedAlert === true;
|
|
}
|
|
pendingNamedPlaylistCommand = {
|
|
command: command,
|
|
targetId: definitionId,
|
|
definitionId: definitionId,
|
|
minimumSequence: lastCommandSequence + 1,
|
|
closeOnSuccess: true
|
|
};
|
|
if (!send(command, payload)) {
|
|
pendingNamedPlaylistCommand = null;
|
|
return false;
|
|
}
|
|
lockNamedPlaylistControls();
|
|
return true;
|
|
}
|
|
|
|
function isMatchingNamedPlaylistReceipt(busy, pending, commandResult) {
|
|
const exact = !!pending && !!commandResult &&
|
|
Number.isSafeInteger(commandResult.sequence) &&
|
|
commandResult.sequence >= pending.minimumSequence &&
|
|
commandResult.command === pending.command &&
|
|
commandResult.targetId === pending.targetId;
|
|
return exact && (commandResult.succeeded === false ||
|
|
(busy !== true && commandResult.succeeded === true));
|
|
}
|
|
|
|
function openNamedPlaylistConfirmation(options) {
|
|
if (!options || isNamedPlaylistActionLocked()) return false;
|
|
namedPlaylistConfirmation = options;
|
|
namedPlaylistConfirmationMessage.textContent = options.message;
|
|
if (namedPlaylistConfirmationModal.hidden) {
|
|
rememberModalOpener(namedPlaylistConfirmationDialog);
|
|
}
|
|
namedPlaylistConfirmationModal.hidden = false;
|
|
lockNamedPlaylistControls();
|
|
// The confirmation can open immediately after a correlated DB refresh or
|
|
// selection receipt. Re-establish its own controls here so a transient
|
|
// busy render cannot leave the affirmative action stale-disabled.
|
|
namedPlaylistConfirmationYes.disabled = false;
|
|
namedPlaylistConfirmationNo.disabled = false;
|
|
syncModalFocus();
|
|
return true;
|
|
}
|
|
|
|
function restoreNamedPlaylistAfterConfirmation() {
|
|
if (!namedPlaylistState || namedPlaylistModal.hidden) return;
|
|
renderNamedPlaylist({
|
|
namedPlaylist: namedPlaylistState,
|
|
isBusy: uiBusy,
|
|
commandResult: null,
|
|
statusKind: null
|
|
});
|
|
}
|
|
|
|
function resolveNamedPlaylistConfirmation(confirmed) {
|
|
const confirmation = namedPlaylistConfirmation;
|
|
if (!confirmation) return false;
|
|
namedPlaylistConfirmation = null;
|
|
namedPlaylistConfirmationModal.hidden = true;
|
|
syncModalFocus();
|
|
|
|
if (!confirmed) {
|
|
if (confirmation.closeOnNo === true) closeNamedPlaylist();
|
|
else restoreNamedPlaylistAfterConfirmation();
|
|
return true;
|
|
}
|
|
|
|
const started = confirmation.kind === "delete"
|
|
? beginNamedPlaylistBusyCycle("delete-selected-named-playlist", {})
|
|
: beginNamedPlaylistCommand(
|
|
"save-current-named-playlist-to",
|
|
confirmation.definitionId,
|
|
confirmation.showSavedAlert === true);
|
|
if (!started) restoreNamedPlaylistAfterConfirmation();
|
|
return started;
|
|
}
|
|
|
|
function renderNamedPlaylist(state) {
|
|
const named = state.namedPlaylist;
|
|
namedPlaylistState = named || null;
|
|
const busy = state.isBusy === true;
|
|
const commandResult = state.commandResult;
|
|
const selectionResult = namedPlaylistSelection.reconcile(
|
|
commandResult,
|
|
named && named.selectedDefinitionId);
|
|
const deferredSelectionAction = selectionResult.deferredAction;
|
|
if (commandResult && Number.isSafeInteger(commandResult.sequence)) {
|
|
lastCommandSequence = Math.max(lastCommandSequence, commandResult.sequence);
|
|
}
|
|
if (isMatchingNamedPlaylistReceipt(
|
|
busy,
|
|
pendingNamedPlaylistCommand,
|
|
commandResult
|
|
)) {
|
|
const completed = pendingNamedPlaylistCommand;
|
|
const succeeded = commandResult.succeeded === true;
|
|
pendingNamedPlaylistCommand = null;
|
|
if (succeeded && completed.closeOnSuccess) {
|
|
closeNamedPlaylist();
|
|
}
|
|
}
|
|
dbLoadButton.disabled = playlistStructureMutationLocked || busy || !named;
|
|
dbSaveButton.disabled = operatorMutationLocked || busy || !named ||
|
|
named.canMutate !== true;
|
|
if (!named || namedPlaylistModal.hidden) return;
|
|
|
|
const modalLocked = isNamedPlaylistActionLocked();
|
|
const definitionLocked = isNamedPlaylistDefinitionLocked();
|
|
const existingDefinitions = new Map();
|
|
namedPlaylistDefinitions
|
|
.querySelectorAll("button[data-named-playlist-definition-id]")
|
|
.forEach(function (button) {
|
|
existingDefinitions.set(button.dataset.namedPlaylistDefinitionId, button);
|
|
});
|
|
const fragment = document.createDocumentFragment();
|
|
let selectedDefinition = null;
|
|
named.definitions.forEach(function (definition) {
|
|
const button = existingDefinitions.get(definition.definitionId) ||
|
|
document.createElement("button");
|
|
button.type = "button";
|
|
button.dataset.namedPlaylistDefinitionId = definition.definitionId;
|
|
button.setAttribute("role", "option");
|
|
button.setAttribute("aria-selected", definition.isSelected ? "true" : "false");
|
|
button.className = definition.isSelected ? "selected" : "";
|
|
button.disabled = definitionLocked;
|
|
button.textContent = definition.title;
|
|
if (definition.isSelected) selectedDefinition = button;
|
|
fragment.appendChild(button);
|
|
});
|
|
namedPlaylistDefinitions.replaceChildren(fragment);
|
|
configureRovingList(
|
|
namedPlaylistDefinitions,
|
|
Array.from(namedPlaylistDefinitions.querySelectorAll(
|
|
"button[data-named-playlist-definition-id]")),
|
|
selectedDefinition);
|
|
|
|
const selectedDescription = named.selectedTitle
|
|
? "선택: " + named.selectedTitle + " · " + String(named.rowCount) + "행"
|
|
: "DB 재생목록을 선택하세요.";
|
|
const quarantine = named.isWriteQuarantined === true
|
|
? " 결과 불명확 상태로 이번 실행의 추가 쓰기가 차단되었습니다." : "";
|
|
const truncated = named.isListTruncated === true
|
|
? " 목록 일부만 표시 중입니다." : "";
|
|
namedPlaylistStatus.textContent = (named.statusMessage || selectedDescription) +
|
|
quarantine + truncated;
|
|
namedPlaylistStatus.classList.toggle("error", named.isWriteQuarantined === true ||
|
|
named.statusKind === "error");
|
|
|
|
const closeLocked = isNamedPlaylistModalLocked() ||
|
|
namedPlaylistSelection.isPending();
|
|
namedPlaylistClose.disabled = closeLocked;
|
|
namedPlaylistCancelButton.disabled = closeLocked;
|
|
namedPlaylistNewTitle.disabled = modalLocked;
|
|
namedPlaylistCreateButton.disabled = modalLocked || named.canCreate !== true ||
|
|
!isCanonicalNamedPlaylistTitle(namedPlaylistNewTitle.value);
|
|
namedPlaylistDeleteButton.disabled = modalLocked || named.canDelete !== true;
|
|
namedPlaylistConfirmButton.disabled = modalLocked ||
|
|
(namedPlaylistMode === "save" ? named.canSave !== true : named.canLoad !== true);
|
|
// A PROGRAM auto-refresh can begin between pointer-down and pointer-up.
|
|
// Keep the already-open confirmation clickable through unrelated busy
|
|
// state; the native ordered gate serializes the request and performs the
|
|
// authoritative mutation-safety check before any database write.
|
|
namedPlaylistConfirmationYes.disabled = pendingNamedPlaylistCommand !== null ||
|
|
!!(namedPlaylistState && namedPlaylistState.isWriteInProgress === true);
|
|
if (deferredSelectionAction) {
|
|
runNamedPlaylistDoubleClick(
|
|
deferredSelectionAction.definitionId,
|
|
deferredSelectionAction.mode);
|
|
}
|
|
}
|
|
|
|
function clearOperatorCatalogDragVisuals() {
|
|
operatorCatalogDraftRows.querySelectorAll(".dragging, .drag-before, .drag-after")
|
|
.forEach(function (row) {
|
|
row.classList.remove("dragging", "drag-before", "drag-after");
|
|
});
|
|
}
|
|
|
|
function onOperatorCatalogPointerDown(event) {
|
|
if (event.button !== 0) return;
|
|
const rowId = event.currentTarget.dataset.operatorCatalogRowId;
|
|
operatorCatalogDragBlockedRowId = event.target.closest("button, input")
|
|
? rowId
|
|
: null;
|
|
}
|
|
|
|
function onOperatorCatalogPointerEnd(event) {
|
|
if (operatorCatalogDragBlockedRowId ===
|
|
event.currentTarget.dataset.operatorCatalogRowId) {
|
|
operatorCatalogDragBlockedRowId = null;
|
|
}
|
|
}
|
|
|
|
function onOperatorCatalogDragStart(event) {
|
|
const row = event.currentTarget;
|
|
const sourceRowId = row.dataset.operatorCatalogRowId;
|
|
if (operatorCatalogMutationLocked || !sourceRowId || !event.dataTransfer ||
|
|
operatorCatalogDragBlockedRowId === sourceRowId ||
|
|
event.target.closest("button, input")) {
|
|
operatorCatalogDragBlockedRowId = null;
|
|
event.preventDefault();
|
|
return;
|
|
}
|
|
|
|
operatorCatalogDragBlockedRowId = null;
|
|
draggedOperatorCatalogRowId = sourceRowId;
|
|
event.dataTransfer.effectAllowed = "move";
|
|
event.dataTransfer.setData(operatorCatalogDragMime, sourceRowId);
|
|
row.classList.add("dragging");
|
|
}
|
|
|
|
function onOperatorCatalogDragOver(event) {
|
|
const target = event.currentTarget;
|
|
if (operatorCatalogMutationLocked || !draggedOperatorCatalogRowId ||
|
|
target.dataset.operatorCatalogRowId === draggedOperatorCatalogRowId) return;
|
|
|
|
event.preventDefault();
|
|
if (event.dataTransfer) event.dataTransfer.dropEffect = "move";
|
|
const position = dragDropPosition(event, target);
|
|
target.classList.toggle("drag-before", position === "before");
|
|
target.classList.toggle("drag-after", position === "after");
|
|
}
|
|
|
|
function onOperatorCatalogDragLeave(event) {
|
|
event.currentTarget.classList.remove("drag-before", "drag-after");
|
|
}
|
|
|
|
function onOperatorCatalogDrop(event) {
|
|
const target = event.currentTarget;
|
|
const sourceRowId = draggedOperatorCatalogRowId;
|
|
const targetRowId = target.dataset.operatorCatalogRowId;
|
|
if (operatorCatalogMutationLocked || !sourceRowId || !targetRowId ||
|
|
sourceRowId === targetRowId || !event.dataTransfer ||
|
|
event.dataTransfer.getData(operatorCatalogDragMime) !== sourceRowId) {
|
|
draggedOperatorCatalogRowId = null;
|
|
clearOperatorCatalogDragVisuals();
|
|
return;
|
|
}
|
|
|
|
event.preventDefault();
|
|
const position = dragDropPosition(event, target);
|
|
draggedOperatorCatalogRowId = null;
|
|
clearOperatorCatalogDragVisuals();
|
|
send("reorder-operator-catalog-draft-row", {
|
|
sourceRowId: sourceRowId,
|
|
targetRowId: targetRowId,
|
|
position: position
|
|
});
|
|
}
|
|
|
|
function onOperatorCatalogDragEnd() {
|
|
draggedOperatorCatalogRowId = null;
|
|
operatorCatalogDragBlockedRowId = null;
|
|
clearOperatorCatalogDragVisuals();
|
|
}
|
|
|
|
function reconcileOperatorCatalogStockResults(rows) {
|
|
const existing = new Map();
|
|
Array.from(operatorCatalogStockResults.children).forEach(function (button) {
|
|
existing.set(button.dataset.operatorCatalogStockResultId, button);
|
|
});
|
|
|
|
(rows || []).forEach(function (row, position) {
|
|
let button = existing.get(row.resultId);
|
|
if (!button) {
|
|
button = document.createElement("button");
|
|
button.type = "button";
|
|
button.dataset.operatorCatalogStockResultId = row.resultId;
|
|
button.title = "더블클릭하면 구성 종목에 추가합니다.";
|
|
button.setAttribute("role", "option");
|
|
const name = document.createElement("span");
|
|
name.className = "operator-catalog-stock-result-name";
|
|
const market = document.createElement("small");
|
|
market.className = "operator-catalog-stock-result-market";
|
|
button.append(name, market);
|
|
}
|
|
|
|
const buttonAtPosition = operatorCatalogStockResults.children.item(position);
|
|
if (buttonAtPosition !== button) {
|
|
operatorCatalogStockResults.insertBefore(button, buttonAtPosition);
|
|
}
|
|
existing.delete(row.resultId);
|
|
|
|
button.className = row.isSelected ? "selected" : "";
|
|
button.disabled = row.isCompatible !== true;
|
|
button.setAttribute("aria-selected", row.isSelected ? "true" : "false");
|
|
button.querySelector(".operator-catalog-stock-result-name").textContent = row.displayName;
|
|
button.querySelector(".operator-catalog-stock-result-market").textContent = row.market;
|
|
});
|
|
|
|
existing.forEach(function (button) { button.remove(); });
|
|
const stockRows = Array.from(operatorCatalogStockResults.querySelectorAll(
|
|
"button[data-operator-catalog-stock-result-id]"));
|
|
configureRovingList(
|
|
operatorCatalogStockResults,
|
|
stockRows,
|
|
stockRows.find(function (button) {
|
|
return button.getAttribute("aria-selected") === "true";
|
|
}) || null);
|
|
}
|
|
|
|
function renderOperatorCatalog(state) {
|
|
const catalog = state.operatorCatalog;
|
|
const busy = state.isBusy === true;
|
|
operatorCatalogMutationLocked = isOperatorMutationLocked(state);
|
|
operatorCatalogState = catalog || null;
|
|
if (!catalog || catalog.isOpen !== true) {
|
|
setTransientControlsBusy(operatorCatalogDialog, false);
|
|
draggedOperatorCatalogRowId = null;
|
|
operatorCatalogDragBlockedRowId = null;
|
|
clearOperatorCatalogDragVisuals();
|
|
operatorCatalogModal.hidden = true;
|
|
operatorCatalogDraftKey = "";
|
|
operatorCatalogNameDraft = "";
|
|
forgetSearchDraft(
|
|
"operator-catalog-query",
|
|
"operator-catalog-stock-query");
|
|
operatorCatalogSearchFocus = null;
|
|
operatorCatalogNameStatus.textContent = "";
|
|
operatorCatalogNameStatus.className = "";
|
|
operatorCatalogRenderStateKey = "";
|
|
return;
|
|
}
|
|
|
|
const capturedSearchFocus = captureSearchDraftFocus(operatorCatalogDialog);
|
|
if (capturedSearchFocus) operatorCatalogSearchFocus = capturedSearchFocus;
|
|
if (operatorCatalogMutationLocked) {
|
|
draggedOperatorCatalogRowId = null;
|
|
operatorCatalogDragBlockedRowId = null;
|
|
clearOperatorCatalogDragVisuals();
|
|
}
|
|
|
|
const renderStateKey = JSON.stringify(catalog);
|
|
if (!operatorCatalogModal.hidden && renderStateKey === operatorCatalogRenderStateKey) {
|
|
setTransientControlsBusy(operatorCatalogDialog, busy);
|
|
operatorCatalogDraftRows.querySelectorAll("[data-operator-catalog-row-id]")
|
|
.forEach(function (row) {
|
|
row.draggable = !operatorCatalogMutationLocked;
|
|
row.setAttribute(
|
|
"aria-disabled",
|
|
operatorCatalogMutationLocked ? "true" : "false");
|
|
});
|
|
if (!busy &&
|
|
restoreSearchDraftFocus(operatorCatalogDialog, operatorCatalogSearchFocus)) {
|
|
operatorCatalogSearchFocus = null;
|
|
}
|
|
return;
|
|
}
|
|
|
|
setTransientControlsBusy(operatorCatalogDialog, false);
|
|
if (operatorCatalogModal.hidden) rememberModalOpener(operatorCatalogDialog);
|
|
operatorCatalogModal.hidden = false;
|
|
const isTheme = catalog.entity === "theme";
|
|
const editing = catalog.mode === "create" || catalog.mode === "edit";
|
|
operatorCatalogTitle.textContent = isTheme
|
|
? "테마추가"
|
|
: catalog.mode === "create" ? "전문가 추가" : "전문가 추천 편집";
|
|
operatorCatalogThemeTab.classList.toggle("selected", isTheme);
|
|
operatorCatalogExpertTab.classList.toggle("selected", !isTheme);
|
|
operatorCatalogThemeTab.disabled = editing;
|
|
operatorCatalogExpertTab.disabled = editing;
|
|
operatorCatalogToolbar.hidden = editing;
|
|
operatorCatalogListPanel.hidden = editing;
|
|
operatorCatalogBody.classList.toggle("editor-only", editing);
|
|
operatorCatalogClose.disabled = false;
|
|
operatorCatalogSearch.disabled = false;
|
|
operatorCatalogSession.disabled = !isTheme;
|
|
operatorCatalogSession.hidden = !isTheme;
|
|
operatorCatalogNewMarket.disabled = !isTheme;
|
|
operatorCatalogNewMarket.hidden = !isTheme;
|
|
operatorCatalogNew.disabled = catalog.canBeginCreate !== true;
|
|
operatorCatalogNew.textContent = isTheme ? "새 ThemeA" : "새 EList";
|
|
syncSearchDraft(
|
|
operatorCatalogQuery,
|
|
catalog.query,
|
|
"operator-catalog:" + catalog.entity);
|
|
operatorCatalogSession.value = catalog.nxtSession === "afterMarket"
|
|
? "afterMarket" : "preMarket";
|
|
operatorCatalogNewMarket.value = catalog.newThemeMarket === "nxt" ? "nxt" : "krx";
|
|
|
|
const resultFragment = document.createDocumentFragment();
|
|
(catalog.results || []).forEach(function (row) {
|
|
const button = document.createElement("button");
|
|
button.type = "button";
|
|
button.dataset.operatorCatalogResultId = row.resultId;
|
|
button.className = row.isSelected ? "selected" : "";
|
|
button.disabled = false;
|
|
button.setAttribute("role", "option");
|
|
button.setAttribute("aria-selected", row.isSelected ? "true" : "false");
|
|
const code = document.createElement("strong");
|
|
code.textContent = row.codeLabel;
|
|
const name = document.createElement("span");
|
|
name.textContent = row.displayName;
|
|
const scope = document.createElement("small");
|
|
scope.textContent = row.scope;
|
|
button.append(code, name, scope);
|
|
resultFragment.appendChild(button);
|
|
});
|
|
operatorCatalogResults.replaceChildren(resultFragment);
|
|
const catalogRows = Array.from(operatorCatalogResults.querySelectorAll(
|
|
"button[data-operator-catalog-result-id]"));
|
|
configureRovingList(
|
|
operatorCatalogResults,
|
|
catalogRows,
|
|
catalogRows.find(function (button) {
|
|
return button.getAttribute("aria-selected") === "true";
|
|
}) || null);
|
|
|
|
operatorCatalogEditor.hidden = !editing;
|
|
const canChangeCreateThemeMarket = isTheme && catalog.mode === "create";
|
|
operatorCatalogEditorMarketField.hidden = !canChangeCreateThemeMarket;
|
|
operatorCatalogEditorMarket.disabled = !canChangeCreateThemeMarket;
|
|
operatorCatalogEditorMarket.value = catalog.newThemeMarket === "nxt" ? "nxt" : "krx";
|
|
const draftKey = catalog.entity + "|" + catalog.mode + "|" +
|
|
(catalog.selectedResultId || "new") + "|" + (catalog.codeLabel || "");
|
|
if (draftKey !== operatorCatalogDraftKey) {
|
|
operatorCatalogDraftKey = draftKey;
|
|
operatorCatalogNameDraft = catalog.editorName || "";
|
|
}
|
|
if (document.activeElement !== operatorCatalogName) {
|
|
operatorCatalogName.value = operatorCatalogNameDraft;
|
|
}
|
|
operatorCatalogCode.textContent = catalog.codeLabel
|
|
? "코드 " + catalog.codeLabel : "";
|
|
operatorCatalogNameLabel.textContent = isTheme ? "테마명" : "전문가명";
|
|
operatorCatalogName.placeholder = isTheme ? "ThemeA 이름" : "전문가 이름";
|
|
operatorCatalogName.disabled = !editing ||
|
|
(!isTheme && catalog.mode === "edit");
|
|
const currentThemeName = operatorCatalogNameDraft.trim();
|
|
const checkedCurrentThemeName = isTheme && currentThemeName.length > 0 &&
|
|
catalog.checkedThemeName === currentThemeName;
|
|
const themeNameAvailability = checkedCurrentThemeName
|
|
? catalog.themeNameAvailability
|
|
: "notChecked";
|
|
operatorCatalogNameCheck.hidden = !isTheme;
|
|
operatorCatalogNameCheck.disabled = !isTheme || !editing ||
|
|
catalog.canCheckThemeName !== true || currentThemeName.length === 0;
|
|
operatorCatalogNameStatus.hidden = !isTheme;
|
|
operatorCatalogNameStatus.className = themeNameAvailability === "available" ||
|
|
themeNameAvailability === "duplicate" || themeNameAvailability === "indeterminate"
|
|
? themeNameAvailability
|
|
: "";
|
|
operatorCatalogNameStatus.textContent = themeNameAvailability === "available"
|
|
? "사용 가능"
|
|
: themeNameAvailability === "duplicate"
|
|
? "이미 사용 중"
|
|
: themeNameAvailability === "indeterminate"
|
|
? "확인 불가"
|
|
: "";
|
|
syncSearchDraft(
|
|
operatorCatalogStockQuery,
|
|
catalog.stockQuery,
|
|
"operator-catalog-stock:" + draftKey);
|
|
operatorCatalogStockQuery.disabled = !editing;
|
|
operatorCatalogStockSearch.disabled = !editing;
|
|
const showCatalogRows = isTheme || catalog.mode === "edit";
|
|
operatorCatalogStockSearchLine.hidden = !showCatalogRows;
|
|
operatorCatalogStockResults.hidden = !showCatalogRows;
|
|
operatorCatalogAddLine.hidden = !showCatalogRows;
|
|
operatorCatalogDraftHeader.hidden = !showCatalogRows;
|
|
operatorCatalogDraftRows.hidden = !showCatalogRows;
|
|
// ThemeA and UC6 both add the selected stock immediately. UC6 then lets
|
|
// the operator fill the buy amount in column 3 of the newly added row.
|
|
operatorCatalogAmountLabel.hidden = true;
|
|
operatorCatalogAmount.hidden = true;
|
|
operatorCatalogAmount.disabled = true;
|
|
operatorCatalogAddStock.disabled = catalog.canAddStock !== true;
|
|
|
|
reconcileOperatorCatalogStockResults(catalog.stockResults);
|
|
|
|
const focusedDraftRow = document.activeElement &&
|
|
document.activeElement.closest("[data-operator-catalog-row-id]");
|
|
const restoreDraftFocus = focusedDraftRow &&
|
|
operatorCatalogDraftRows.contains(focusedDraftRow);
|
|
const draftFragment = document.createDocumentFragment();
|
|
(catalog.draftRows || []).forEach(function (row, index) {
|
|
const line = document.createElement("div");
|
|
const isActive = row.rowId === catalog.activeDraftRowId;
|
|
line.className = "operator-catalog-draft-row" + (isActive ? " selected" : "");
|
|
line.dataset.operatorCatalogRowId = row.rowId;
|
|
line.tabIndex = isActive || (!catalog.activeDraftRowId && index === 0) ? 0 : -1;
|
|
line.setAttribute("role", "row");
|
|
line.setAttribute("aria-selected", isActive ? "true" : "false");
|
|
line.draggable = !operatorCatalogMutationLocked;
|
|
line.setAttribute(
|
|
"aria-disabled",
|
|
operatorCatalogMutationLocked ? "true" : "false");
|
|
line.addEventListener("pointerdown", onOperatorCatalogPointerDown);
|
|
line.addEventListener("pointerup", onOperatorCatalogPointerEnd);
|
|
line.addEventListener("pointercancel", onOperatorCatalogPointerEnd);
|
|
line.addEventListener("dragstart", onOperatorCatalogDragStart);
|
|
line.addEventListener("dragover", onOperatorCatalogDragOver);
|
|
line.addEventListener("dragleave", onOperatorCatalogDragLeave);
|
|
line.addEventListener("drop", onOperatorCatalogDrop);
|
|
line.addEventListener("dragend", onOperatorCatalogDragEnd);
|
|
let selectionSent = false;
|
|
function selectDraftRow() {
|
|
if (!selectionSent && row.rowId !== catalog.activeDraftRowId) {
|
|
selectionSent = true;
|
|
send("select-operator-catalog-draft-row", { rowId: row.rowId });
|
|
}
|
|
}
|
|
line.addEventListener("focus", selectDraftRow);
|
|
line.addEventListener("click", function (event) {
|
|
if (!event.target.closest("button, input")) {
|
|
line.focus({ preventScroll: true });
|
|
selectDraftRow();
|
|
}
|
|
});
|
|
const order = document.createElement("span");
|
|
order.textContent = String(row.position + 1);
|
|
const name = document.createElement("strong");
|
|
name.textContent = row.displayName;
|
|
const detail = document.createElement(isTheme ? "small" : "input");
|
|
if (isTheme) {
|
|
detail.textContent = row.market;
|
|
} else {
|
|
detail.type = "number";
|
|
detail.min = "1";
|
|
detail.step = "1";
|
|
detail.inputMode = "numeric";
|
|
detail.value = row.buyAmount == null ? "" : String(row.buyAmount);
|
|
detail.dataset.operatorCatalogBuyAmountRowId = row.rowId;
|
|
detail.setAttribute("aria-label", row.displayName + " 매수가");
|
|
detail.disabled = false;
|
|
}
|
|
const up = document.createElement("button");
|
|
up.type = "button";
|
|
up.textContent = "Up";
|
|
up.dataset.operatorCatalogMoveRowId = row.rowId;
|
|
up.dataset.operatorCatalogMoveDirection = "up";
|
|
up.disabled = index === 0;
|
|
const down = document.createElement("button");
|
|
down.type = "button";
|
|
down.textContent = "Down";
|
|
down.dataset.operatorCatalogMoveRowId = row.rowId;
|
|
down.dataset.operatorCatalogMoveDirection = "down";
|
|
down.disabled = index + 1 === catalog.draftRows.length;
|
|
const remove = document.createElement("button");
|
|
remove.type = "button";
|
|
remove.textContent = "Delete";
|
|
remove.dataset.operatorCatalogRemoveRowId = row.rowId;
|
|
remove.disabled = false;
|
|
line.append(order, name, detail, up, down, remove);
|
|
draftFragment.appendChild(line);
|
|
});
|
|
operatorCatalogDraftRows.replaceChildren(draftFragment);
|
|
if (restoreDraftFocus && catalog.activeDraftRowId) {
|
|
const activeRow = Array.from(
|
|
operatorCatalogDraftRows.querySelectorAll("[data-operator-catalog-row-id]"))
|
|
.find(function (row) {
|
|
return row.dataset.operatorCatalogRowId === catalog.activeDraftRowId;
|
|
});
|
|
if (activeRow) activeRow.focus({ preventScroll: true });
|
|
}
|
|
|
|
operatorCatalogSave.disabled = catalog.canSave !== true;
|
|
operatorCatalogDeleteAll.hidden = !isTheme || !editing;
|
|
operatorCatalogDeleteAll.disabled = !isTheme || !editing ||
|
|
(catalog.draftRows || []).length === 0;
|
|
operatorCatalogCancel.disabled = !editing;
|
|
const messages = [];
|
|
if (catalog.statusMessage) messages.push(catalog.statusMessage);
|
|
if (catalog.resultsAreTruncated) messages.push("목록 일부만 표시 중입니다.");
|
|
if (catalog.stockResultsAreTruncated) messages.push("종목 검색 결과 일부만 표시 중입니다.");
|
|
if (catalog.writesQuarantined) {
|
|
messages.push("결과 불명확 상태로 현재 프로세스의 추가 DB 쓰기가 차단되었습니다.");
|
|
}
|
|
operatorCatalogStatus.textContent = messages.join(" ");
|
|
operatorCatalogStatus.classList.toggle(
|
|
"error",
|
|
catalog.writesQuarantined === true || catalog.statusKind === "error");
|
|
setTransientControlsBusy(operatorCatalogDialog, busy);
|
|
operatorCatalogRenderStateKey = renderStateKey;
|
|
if (!busy &&
|
|
restoreSearchDraftFocus(operatorCatalogDialog, operatorCatalogSearchFocus)) {
|
|
operatorCatalogSearchFocus = null;
|
|
}
|
|
}
|
|
|
|
function renderDialog(state) {
|
|
if (state.dialog && state.dialog.message) {
|
|
legacyDialogIsConfirmation = state.dialog.isConfirmation === true;
|
|
dialogCaption.textContent = state.dialog.caption || "MmoneyCoder";
|
|
dialogMessage.textContent = state.dialog.message;
|
|
dialogOk.textContent = legacyDialogIsConfirmation ? "예" : "확인";
|
|
// A one-button result alert is safe to acknowledge while an unrelated
|
|
// refresh is finishing. Disabling it between pointer-down and pointer-up
|
|
// swallowed real operator clicks; native dispatch now queues one dismissal.
|
|
dialogOk.disabled = legacyDialogIsConfirmation && state.isBusy === true;
|
|
dialogNo.hidden = !legacyDialogIsConfirmation;
|
|
dialogNo.disabled = state.isBusy === true;
|
|
if (dialog.hidden) rememberModalOpener(legacyAlertDialog);
|
|
dialog.hidden = false;
|
|
} else {
|
|
legacyDialogIsConfirmation = false;
|
|
dialogOk.disabled = false;
|
|
dialogNo.hidden = true;
|
|
dialogNo.disabled = false;
|
|
dialog.hidden = true;
|
|
}
|
|
}
|
|
|
|
function updateCutDragSize(state) {
|
|
const metrics = state && state.interactionMetrics;
|
|
if (!metrics || metrics.coordinateSpace !== "host-dip" ||
|
|
!Number.isInteger(metrics.cutDragWidthDips) ||
|
|
!Number.isInteger(metrics.cutDragHeightDips) ||
|
|
metrics.cutDragWidthDips <= 0 || metrics.cutDragHeightDips <= 0 ||
|
|
typeof metrics.hostRasterizationScale !== "number") return;
|
|
const nextDragSize = window.LegacyCutDrag.toCssDragSize({
|
|
width: metrics.cutDragWidthDips,
|
|
height: metrics.cutDragHeightDips
|
|
}, metrics.hostRasterizationScale, window.devicePixelRatio);
|
|
cutDragSize = nextDragSize;
|
|
if (cutDragGesture && !cutDragGesture.started) {
|
|
// The cut-pointer-down reply is also a native state boundary. If a
|
|
// Windows preference change raced the previous rendered state, update
|
|
// the still-pending gesture before its next pointermove decision.
|
|
cutDragGesture.rectangle = window.LegacyCutDrag.createDragRectangle(
|
|
cutDragGesture.down,
|
|
nextDragSize);
|
|
}
|
|
if (playlistDragGesture && !playlistDragGesture.started) {
|
|
playlistDragGesture.rectangle = window.LegacyCutDrag.createDragRectangle(
|
|
playlistDragGesture.down,
|
|
nextDragSize);
|
|
}
|
|
}
|
|
|
|
function operatorSettingsText(value, fallback) {
|
|
if (typeof value === "string" && value.trim()) return value.trim();
|
|
if (value && typeof value === "object") {
|
|
const candidate = value.displayName || value.label || value.status || value.message;
|
|
if (typeof candidate === "string" && candidate.trim()) return candidate.trim();
|
|
}
|
|
return fallback;
|
|
}
|
|
|
|
function operatorDiagnosticTone(value, label) {
|
|
if (value && typeof value === "object") {
|
|
if (value.isConnected === true || value.isHealthy === true) return "good";
|
|
if (value.isConnected === false || value.isHealthy === false) return "bad";
|
|
}
|
|
const normalized = String(label || "").toLowerCase();
|
|
if (/연결됨|정상|사용 가능|ready|connected|healthy/.test(normalized)) return "good";
|
|
if (/확인 중|재연결|대기|dry run|감지됨|unknown|waiting/.test(normalized)) {
|
|
return "warning";
|
|
}
|
|
if (/끊김|미연결|오류|실패|불명확|disconnected|fault|error|failed/.test(normalized)) {
|
|
return "bad";
|
|
}
|
|
return "neutral";
|
|
}
|
|
|
|
function setOperatorDiagnostic(element, value, fallback) {
|
|
const label = operatorSettingsText(value, fallback);
|
|
if (element.textContent !== label) element.textContent = label;
|
|
const tone = operatorDiagnosticTone(value, label);
|
|
if (tone === "neutral") element.removeAttribute("data-state");
|
|
else element.dataset.state = tone;
|
|
}
|
|
|
|
function operatorPlayoutModeLabel(playout) {
|
|
if (!playout) return "확인 중";
|
|
if (playout.mode === "live") return "LIVE";
|
|
if (playout.mode === "dryRun") return "DRY RUN";
|
|
if (playout.mode === "disabled") return "송출 비활성";
|
|
return operatorSettingsText(playout.mode, "확인 중");
|
|
}
|
|
|
|
function operatorPlayoutConnectionLabel(playout) {
|
|
if (!playout) return "확인 중";
|
|
if (playout.outcomeUnknown === true) return "결과 불명확";
|
|
if (playout.mode === "disabled") return "송출 비활성";
|
|
if (playout.mode === "dryRun") return "DRY RUN 준비됨";
|
|
if (playout.isConnected === true) return "Tornado2 연결됨";
|
|
if (playout.isProcessRunning === true) return "Tornado2 감지됨";
|
|
return "미연결";
|
|
}
|
|
|
|
function renderOperatorFolder(kind, folder, isBusy) {
|
|
const controls = operatorFolderControls[kind];
|
|
const current = folder && typeof folder === "object" ? folder : {};
|
|
const defaultNames = {
|
|
design: "앱 기본값",
|
|
resource: "앱 기본값",
|
|
background: "자동"
|
|
};
|
|
const displayName = current.isCustom === true
|
|
? operatorSettingsText(current.displayName, defaultNames[kind])
|
|
: defaultNames[kind];
|
|
if (controls.name.textContent !== displayName) controls.name.textContent = displayName;
|
|
controls.name.title = displayName;
|
|
|
|
const valid = current.isValid === true;
|
|
const invalid = current.isValid === false;
|
|
const statusLabel = operatorSettingsText(
|
|
current.status,
|
|
valid ? "사용 가능" : (invalid ? "확인 필요" : "확인 중"));
|
|
if (controls.status.textContent !== statusLabel) controls.status.textContent = statusLabel;
|
|
controls.status.classList.toggle("valid", valid);
|
|
controls.status.classList.toggle("invalid", invalid);
|
|
controls.status.classList.toggle("neutral", !valid && !invalid);
|
|
controls.source.textContent = current.isCustom === true ? "사용자 지정" : "앱 기본값";
|
|
controls.select.disabled = isBusy;
|
|
controls.reset.disabled = isBusy || current.isCustom !== true;
|
|
}
|
|
|
|
function normalizeOperatorAppearanceValue(key, value) {
|
|
const definition = operatorAppearanceControls[key];
|
|
return typeof value === "string" && definition.values.includes(value)
|
|
? value
|
|
: definition.fallback;
|
|
}
|
|
|
|
function operatorAppearanceFromSettings(settings) {
|
|
return {
|
|
colorTheme: normalizeOperatorAppearanceValue(
|
|
"colorTheme",
|
|
settings && settings.colorTheme),
|
|
viewMode: normalizeOperatorAppearanceValue("viewMode", settings && settings.viewMode),
|
|
startWorkspace: normalizeOperatorAppearanceValue(
|
|
"startWorkspace",
|
|
settings && settings.startWorkspace)
|
|
};
|
|
}
|
|
|
|
function operatorAppearanceFromControls() {
|
|
return {
|
|
colorTheme: normalizeOperatorAppearanceValue(
|
|
"colorTheme",
|
|
operatorAppearanceControls.colorTheme.element.value),
|
|
viewMode: normalizeOperatorAppearanceValue(
|
|
"viewMode",
|
|
operatorAppearanceControls.viewMode.element.value),
|
|
startWorkspace: normalizeOperatorAppearanceValue(
|
|
"startWorkspace",
|
|
operatorAppearanceControls.startWorkspace.element.value)
|
|
};
|
|
}
|
|
|
|
function syncOperatorAppearanceControls(appearance) {
|
|
Object.keys(operatorAppearanceControls).forEach(function (key) {
|
|
const control = operatorAppearanceControls[key].element;
|
|
const nextValue = appearance[key];
|
|
if (control.value !== nextValue) control.value = nextValue;
|
|
});
|
|
}
|
|
|
|
function applyOperatorAppearance(appearance) {
|
|
[document.documentElement, document.body].forEach(function (element) {
|
|
element.dataset.colorTheme = appearance.colorTheme;
|
|
element.dataset.viewMode = appearance.viewMode;
|
|
element.dataset.startWorkspace = appearance.startWorkspace;
|
|
});
|
|
}
|
|
|
|
function renderOperatorSettings(state) {
|
|
const settings = state && state.operatorSettings;
|
|
const isBusy = !settings || state.isBusy === true;
|
|
const wasBusy = operatorSettingsWasBusy;
|
|
let revisionChanged = false;
|
|
renderOperatorFolder("design", settings && settings.design, isBusy);
|
|
renderOperatorFolder("resource", settings && settings.resource, isBusy);
|
|
renderOperatorFolder("background", settings && settings.background, isBusy);
|
|
|
|
operatorNavigationExpanded.disabled = isBusy;
|
|
Object.keys(operatorAppearanceControls).forEach(function (key) {
|
|
operatorAppearanceControls[key].element.disabled = isBusy;
|
|
});
|
|
if (settings) {
|
|
const revision = settings.revision === undefined ? null : settings.revision;
|
|
const appearance = operatorAppearanceFromSettings(settings);
|
|
revisionChanged = !operatorSettingsRevisionInitialized ||
|
|
revision !== operatorSettingsRenderRevision;
|
|
if (revisionChanged) {
|
|
operatorAppearanceSnapshot = Object.freeze(appearance);
|
|
syncOperatorAppearanceControls(appearance);
|
|
applyOperatorAppearance(appearance);
|
|
const expanded = settings.navigationExpanded !== false;
|
|
operatorNavigationExpanded.checked = expanded;
|
|
if (window.LegacyWorkspaceNavigation &&
|
|
window.LegacyWorkspaceNavigation.expanded() !== expanded) {
|
|
window.LegacyWorkspaceNavigation.setExpanded(expanded);
|
|
}
|
|
operatorSettingsRenderRevision = revision;
|
|
operatorSettingsRevisionInitialized = true;
|
|
}
|
|
if (window.LegacyWorkspaceNavigation &&
|
|
typeof window.LegacyWorkspaceNavigation.applyStartPreference === "function") {
|
|
window.LegacyWorkspaceNavigation.applyStartPreference(appearance.startWorkspace);
|
|
}
|
|
}
|
|
|
|
const message = operatorSettingsText(settings && settings.message, "");
|
|
operatorSettingsMessage.hidden = !message;
|
|
if (operatorSettingsMessage.textContent !== message) {
|
|
operatorSettingsMessage.textContent = message;
|
|
}
|
|
const messageKind = settings && typeof settings.messageKind === "string"
|
|
? settings.messageKind.toLowerCase()
|
|
: "";
|
|
operatorSettingsMessage.className = "settings-message" +
|
|
(["information", "success", "warning", "error"].includes(messageKind)
|
|
? " " + messageKind
|
|
: "");
|
|
operatorSettingsRestart.hidden = !(settings && settings.restartRequired === true);
|
|
|
|
setOperatorDiagnostic(
|
|
operatorSettingsAppVersion,
|
|
settings && settings.appVersion,
|
|
"확인 중");
|
|
const playout = state && state.playout;
|
|
setOperatorDiagnostic(operatorSettingsPlayoutMode, operatorPlayoutModeLabel(playout), "확인 중");
|
|
setOperatorDiagnostic(
|
|
operatorSettingsPlayoutConnection,
|
|
operatorPlayoutConnectionLabel(playout),
|
|
"확인 중");
|
|
setOperatorDiagnostic(
|
|
operatorSettingsOracleState,
|
|
settings && settings.oracleState,
|
|
"확인 중");
|
|
setOperatorDiagnostic(
|
|
operatorSettingsMariaState,
|
|
settings && settings.mariaState,
|
|
"확인 중");
|
|
const pollingSeconds = Number(settings && settings.databasePollingSeconds);
|
|
operatorSettingsDbMonitor.textContent = Number.isFinite(pollingSeconds) && pollingSeconds > 0
|
|
? String(pollingSeconds) + "초마다"
|
|
: "10초마다";
|
|
|
|
operatorSettingsWasBusy = isBusy;
|
|
if (pendingOperatorSettingsFocusId && !isBusy && (wasBusy || revisionChanged)) {
|
|
const focusId = pendingOperatorSettingsFocusId;
|
|
const fallbackFocusId = pendingOperatorSettingsFallbackFocusId;
|
|
pendingOperatorSettingsFocusId = null;
|
|
pendingOperatorSettingsFallbackFocusId = null;
|
|
window.requestAnimationFrame(function () {
|
|
const primary = document.getElementById(focusId);
|
|
const fallback = fallbackFocusId
|
|
? document.getElementById(fallbackFocusId)
|
|
: null;
|
|
const target = primary && !primary.disabled ? primary : fallback;
|
|
const active = document.activeElement;
|
|
if (target && !target.disabled && !target.closest("[inert]") &&
|
|
(active === document.body || active === null)) {
|
|
target.focus({ preventScroll: true });
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
function render(state) {
|
|
const isBusy = state.isBusy === true;
|
|
const treeTabId = beginTreeRender(state);
|
|
uiBusy = isBusy;
|
|
operatorMutationLocked = isOperatorMutationLocked(state);
|
|
document.body.classList.toggle("busy", isBusy);
|
|
document.body.setAttribute("aria-busy", isBusy ? "true" : "false");
|
|
searchInput.readOnly = isBusy;
|
|
searchButton.setAttribute("aria-disabled", isBusy ? "true" : "false");
|
|
syncSearchDraft(searchInput, state.searchText);
|
|
updateDoubleClickTime(state);
|
|
updateCutDragSize(state);
|
|
renderStockResults(state);
|
|
renderStockSearchMeta(state);
|
|
renderCuts(state);
|
|
renderTabs(state);
|
|
movingAverage5.checked = state.movingAverages ? state.movingAverages.ma5 : true;
|
|
movingAverage20.checked = state.movingAverages ? state.movingAverages.ma20 : true;
|
|
movingAverage5.disabled = isBusy;
|
|
movingAverage20.disabled = isBusy;
|
|
catalogExpandAll.disabled = treeInteractionLocked;
|
|
renderFixedCatalog(state);
|
|
renderIndustry(state);
|
|
renderOverseas(state);
|
|
renderComparison(state);
|
|
renderTheme(state);
|
|
renderExpert(state);
|
|
renderTradingHalt(state);
|
|
finishTreeRender(treeTabId);
|
|
renderManualFinancial(state);
|
|
renderManualLists(state);
|
|
renderOperatorCatalog(state);
|
|
renderOperatorSettings(state);
|
|
renderPlaylist(state);
|
|
renderNamedPlaylist(state);
|
|
renderDialog(state);
|
|
syncModalFocus();
|
|
status.textContent = isBusy ? "처리 중" : (state.statusMessage || "");
|
|
}
|
|
|
|
Object.keys(operatorFolderControls).forEach(function (kind) {
|
|
const controls = operatorFolderControls[kind];
|
|
controls.select.addEventListener("click", function () {
|
|
pendingOperatorSettingsFocusId = controls.select.id;
|
|
pendingOperatorSettingsFallbackFocusId = null;
|
|
if (!send("choose-operator-folder", { kind: kind })) {
|
|
pendingOperatorSettingsFocusId = null;
|
|
pendingOperatorSettingsFallbackFocusId = null;
|
|
}
|
|
});
|
|
controls.reset.addEventListener("click", function () {
|
|
pendingOperatorSettingsFocusId = controls.reset.id;
|
|
pendingOperatorSettingsFallbackFocusId = controls.select.id;
|
|
if (!send("reset-operator-folder", { kind: kind })) {
|
|
pendingOperatorSettingsFocusId = null;
|
|
pendingOperatorSettingsFallbackFocusId = null;
|
|
}
|
|
});
|
|
});
|
|
|
|
operatorNavigationExpanded.addEventListener("change", function () {
|
|
const expanded = operatorNavigationExpanded.checked === true;
|
|
pendingOperatorSettingsFocusId = operatorNavigationExpanded.id;
|
|
pendingOperatorSettingsFallbackFocusId = null;
|
|
if (!send("set-operator-navigation-expanded", { expanded: expanded })) {
|
|
pendingOperatorSettingsFocusId = null;
|
|
pendingOperatorSettingsFallbackFocusId = null;
|
|
operatorNavigationExpanded.checked = !expanded;
|
|
return;
|
|
}
|
|
if (window.LegacyWorkspaceNavigation &&
|
|
window.LegacyWorkspaceNavigation.expanded() !== expanded) {
|
|
window.LegacyWorkspaceNavigation.setExpanded(expanded);
|
|
}
|
|
});
|
|
|
|
Object.keys(operatorAppearanceControls).forEach(function (key) {
|
|
const control = operatorAppearanceControls[key].element;
|
|
control.addEventListener("change", function () {
|
|
const appearance = operatorAppearanceFromControls();
|
|
pendingOperatorSettingsFocusId = control.id;
|
|
pendingOperatorSettingsFallbackFocusId = null;
|
|
applyOperatorAppearance(appearance);
|
|
if (!send("set-operator-appearance", {
|
|
colorTheme: appearance.colorTheme,
|
|
viewMode: appearance.viewMode,
|
|
startWorkspace: appearance.startWorkspace
|
|
})) {
|
|
pendingOperatorSettingsFocusId = null;
|
|
pendingOperatorSettingsFallbackFocusId = null;
|
|
syncOperatorAppearanceControls(operatorAppearanceSnapshot);
|
|
applyOperatorAppearance(operatorAppearanceSnapshot);
|
|
}
|
|
});
|
|
});
|
|
|
|
document.addEventListener("input", function (event) {
|
|
rememberSearchDraft(event.target);
|
|
});
|
|
|
|
searchButton.addEventListener("click", function () {
|
|
send("search-stocks", { text: searchInput.value, trigger: "button" });
|
|
});
|
|
|
|
searchInput.addEventListener("keypress", function (event) {
|
|
if (event.key === "Enter" && !isImeComposing(event)) {
|
|
event.preventDefault();
|
|
send("search-stocks", { text: searchInput.value, trigger: "enter" });
|
|
}
|
|
});
|
|
|
|
dbSaveButton.addEventListener("click", function () {
|
|
openNamedPlaylist("save");
|
|
});
|
|
dbLoadButton.addEventListener("click", function () {
|
|
openNamedPlaylist("load");
|
|
});
|
|
namedPlaylistClose.addEventListener("click", closeNamedPlaylist);
|
|
namedPlaylistCancelButton.addEventListener("click", closeNamedPlaylist);
|
|
namedPlaylistDefinitions.addEventListener("dblclick", function (event) {
|
|
const definition = event.target.closest("button[data-named-playlist-definition-id]");
|
|
if (!definition || definition.disabled) return;
|
|
event.preventDefault();
|
|
const definitionId = definition.dataset.namedPlaylistDefinitionId;
|
|
if (namedPlaylistSelection.isPending()) {
|
|
namedPlaylistSelection.defer(definitionId, {
|
|
definitionId: definitionId,
|
|
mode: namedPlaylistMode
|
|
});
|
|
return;
|
|
}
|
|
runNamedPlaylistDoubleClick(definitionId, namedPlaylistMode);
|
|
});
|
|
namedPlaylistDefinitions.addEventListener("click", function (event) {
|
|
const definition = event.target.closest("button[data-named-playlist-definition-id]");
|
|
if (definition && !definition.disabled) {
|
|
beginNamedPlaylistSelection(definition.dataset.namedPlaylistDefinitionId);
|
|
}
|
|
});
|
|
namedPlaylistNewTitle.addEventListener("input", function () {
|
|
namedPlaylistCreateButton.disabled = isNamedPlaylistActionLocked() ||
|
|
!namedPlaylistState ||
|
|
namedPlaylistState.canCreate !== true ||
|
|
!isCanonicalNamedPlaylistTitle(namedPlaylistNewTitle.value);
|
|
});
|
|
namedPlaylistNewTitle.addEventListener("keydown", function (event) {
|
|
if (event.key === "Enter" && !isImeComposing(event) &&
|
|
!namedPlaylistCreateButton.disabled) {
|
|
event.preventDefault();
|
|
namedPlaylistCreateButton.click();
|
|
}
|
|
});
|
|
namedPlaylistCreateButton.addEventListener("click", function () {
|
|
const title = namedPlaylistNewTitle.value;
|
|
if (isCanonicalNamedPlaylistTitle(title)) {
|
|
beginNamedPlaylistBusyCycle("create-named-playlist", { title: title });
|
|
}
|
|
});
|
|
namedPlaylistDeleteButton.addEventListener("click", function () {
|
|
openNamedPlaylistConfirmation({
|
|
kind: "delete",
|
|
message: "프로그램이 삭제됩니다. 계속 하시겠습니까?",
|
|
closeOnNo: false
|
|
});
|
|
});
|
|
namedPlaylistConfirmButton.addEventListener("click", function () {
|
|
const definitionId = namedPlaylistState && namedPlaylistState.selectedDefinitionId;
|
|
if (!definitionId) return;
|
|
if (namedPlaylistMode === "save") {
|
|
openNamedPlaylistConfirmation({
|
|
kind: "save",
|
|
definitionId: definitionId,
|
|
message: "저장하겠습니까?",
|
|
showSavedAlert: true,
|
|
closeOnNo: true
|
|
});
|
|
} else if (namedPlaylistMode === "load") {
|
|
beginNamedPlaylistCommand(
|
|
"load-named-playlist-by-id",
|
|
definitionId,
|
|
false);
|
|
}
|
|
});
|
|
namedPlaylistConfirmationYes.addEventListener("click", function () {
|
|
if (!namedPlaylistConfirmationYes.disabled) {
|
|
resolveNamedPlaylistConfirmation(true);
|
|
}
|
|
});
|
|
namedPlaylistConfirmationNo.addEventListener("click", function () {
|
|
resolveNamedPlaylistConfirmation(false);
|
|
});
|
|
|
|
manualButtons.forEach(function (button) {
|
|
button.addEventListener("click", function () {
|
|
clearManualResultPendingSelection(true);
|
|
manualDraft = null;
|
|
manualDraftKey = "";
|
|
manualDraftResetPending = false;
|
|
send("open-manual-financial", { screen: button.dataset.manualScreen });
|
|
});
|
|
});
|
|
function closeManualFinancial() {
|
|
clearManualResultPendingSelection(true);
|
|
send("close-manual-financial", {});
|
|
}
|
|
manualClose.addEventListener("click", closeManualFinancial);
|
|
manualExit.addEventListener("click", closeManualFinancial);
|
|
manualListButtons.forEach(function (button) {
|
|
button.addEventListener("click", function () {
|
|
clearManualViResultPendingSelection(true);
|
|
send("open-manual-list", { screen: button.dataset.manualListScreen });
|
|
});
|
|
});
|
|
function closeManualList() {
|
|
clearManualViResultPendingSelection(true);
|
|
send("close-manual-list", {});
|
|
}
|
|
manualListClose.addEventListener("click", closeManualList);
|
|
manualListCancel.addEventListener("click", closeManualList);
|
|
manualWorkspace.addEventListener("input", function (event) {
|
|
if (!manualDraft || manualDraft.rawMode !== true ||
|
|
!event.target || !event.target.dataset ||
|
|
event.target.dataset.manualRawStorageIndex === undefined) {
|
|
return;
|
|
}
|
|
const index = Number(event.target.dataset.manualRawStorageIndex);
|
|
if (!Number.isSafeInteger(index) || index < 0) return;
|
|
if (!Array.isArray(manualDraft.rawDirtyStorageIndices)) {
|
|
manualDraft.rawDirtyStorageIndices = [];
|
|
}
|
|
if (!manualDraft.rawDirtyStorageIndices.includes(index)) {
|
|
manualDraft.rawDirtyStorageIndices.push(index);
|
|
}
|
|
});
|
|
|
|
manualWorkspace.addEventListener("dblclick", function (event) {
|
|
const stock = event.target.closest("button[data-manual-stock-result-id]");
|
|
if (stock && !stock.disabled) {
|
|
event.preventDefault();
|
|
selectManualFinancialStock(stock);
|
|
return;
|
|
}
|
|
const row = event.target.closest("button[data-manual-result-id]");
|
|
if (!row || row.disabled) return;
|
|
event.preventDefault();
|
|
clearDelayedClick(manualResultClickTimer);
|
|
manualResultClickTimer = null;
|
|
const pending = manualResultPendingSelection &&
|
|
manualResultPendingSelection.key === row.dataset.manualResultId
|
|
? manualResultPendingSelection
|
|
: beginManualResultPendingSelection(row);
|
|
if (send("activate-manual-financial-result", {
|
|
resultId: row.dataset.manualResultId
|
|
})) {
|
|
if (pending) pending.sent = true;
|
|
manualDraft = null;
|
|
manualDraftKey = "";
|
|
manualDraftResetPending = false;
|
|
} else {
|
|
clearManualResultPendingSelection(true);
|
|
}
|
|
});
|
|
manualWorkspace.addEventListener("click", function (event) {
|
|
const row = event.target.closest("button[data-manual-result-id]");
|
|
if (row) {
|
|
clearDelayedClick(manualResultClickTimer);
|
|
const resultId = row.dataset.manualResultId;
|
|
const pending = beginManualResultPendingSelection(row);
|
|
manualResultClickTimer = deferLegacySingleClick(function () {
|
|
manualResultClickTimer = null;
|
|
if (!pending || manualResultPendingSelection !== pending) return;
|
|
if (send("load-manual-financial", { resultId: resultId })) {
|
|
pending.sent = true;
|
|
manualDraft = null;
|
|
manualDraftKey = "";
|
|
manualDraftResetPending = false;
|
|
} else {
|
|
clearManualResultPendingSelection(true);
|
|
}
|
|
});
|
|
return;
|
|
}
|
|
const find = event.target.closest("button[data-manual-find-direction]");
|
|
if (find && !find.disabled) {
|
|
const query = manualWorkspace.querySelector("#manual-financial-find-query");
|
|
const generation = Number(find.dataset.manualGeneration);
|
|
if (query && query.value.trim() && Number.isSafeInteger(generation)) {
|
|
send("find-manual-financial", {
|
|
query: query.value,
|
|
direction: find.dataset.manualFindDirection,
|
|
generation: generation
|
|
});
|
|
}
|
|
return;
|
|
}
|
|
const sort = event.target.closest("button[data-manual-name-sort]");
|
|
if (sort && !sort.disabled) {
|
|
const generation = Number(sort.dataset.manualGeneration);
|
|
if (Number.isSafeInteger(generation)) {
|
|
send("toggle-manual-financial-name-sort", { generation: generation });
|
|
}
|
|
return;
|
|
}
|
|
if (event.target.closest("button[data-manual-list-search]")) {
|
|
const query = manualWorkspace.querySelector("#manual-financial-list-query");
|
|
send("search-manual-financial", { query: query ? query.value : "" });
|
|
return;
|
|
}
|
|
if (event.target.closest("button[data-manual-create]")) {
|
|
const screen = manualDraft ? manualDraft.screen : "";
|
|
manualDraft = blankManualRecord(screen);
|
|
manualDraftKey = screen + "|new";
|
|
manualDraftResetPending = true;
|
|
if (!send("begin-manual-financial-create", {})) {
|
|
manualDraftResetPending = false;
|
|
rememberManualDraft();
|
|
}
|
|
return;
|
|
}
|
|
if (event.target.closest("button[data-manual-stock-search]")) {
|
|
rememberManualDraft();
|
|
const stockName = manualWorkspace.querySelector("#manual-financial-stock-name");
|
|
send("search-manual-financial-stocks", {
|
|
stockName: stockName ? stockName.value.trim() : ""
|
|
});
|
|
return;
|
|
}
|
|
const stock = event.target.closest("button[data-manual-stock-result-id]");
|
|
if (stock && !stock.disabled) {
|
|
// GraphE only committed a candidate from its DoubleClick handler. A
|
|
// single click must remain a harmless focus/highlight gesture so it
|
|
// cannot clear an editor draft after the operator resumes typing.
|
|
focusManualFinancialStock(stock);
|
|
return;
|
|
}
|
|
if (event.target.closest("button[data-manual-save]")) {
|
|
if (manualDraft && manualDraft.rawMode === true) {
|
|
const rawRecord = readManualRawRecord();
|
|
if (rawRecord) {
|
|
send("save-manual-financial-raw", { record: rawRecord });
|
|
}
|
|
return;
|
|
}
|
|
const record = readManualRecord();
|
|
if (record) send("save-manual-financial", { record: record });
|
|
return;
|
|
}
|
|
if (event.target.closest("button[data-manual-delete]")) {
|
|
send("delete-manual-financial", {});
|
|
return;
|
|
}
|
|
if (event.target.closest("button[data-manual-delete-all]")) {
|
|
send("delete-all-manual-financial", {});
|
|
return;
|
|
}
|
|
const action = event.target.closest("button[data-manual-action-id]");
|
|
if (action && !action.disabled) {
|
|
send("activate-manual-financial-action", {
|
|
actionId: action.dataset.manualActionId
|
|
});
|
|
}
|
|
});
|
|
manualWorkspace.addEventListener("keydown", function (event) {
|
|
if (event.key !== "Enter" || isImeComposing(event)) return;
|
|
const stock = event.target.closest("button[data-manual-stock-result-id]");
|
|
if (stock && !stock.disabled) {
|
|
event.preventDefault();
|
|
selectManualFinancialStock(stock);
|
|
} else if (event.target.id === "manual-financial-list-query") {
|
|
event.preventDefault();
|
|
send("search-manual-financial", { query: event.target.value });
|
|
} else if (event.target.id === "manual-financial-find-query") {
|
|
event.preventDefault();
|
|
const down = manualWorkspace.querySelector(
|
|
"button[data-manual-find-direction=\"down\"]");
|
|
if (down) down.click();
|
|
} else if (event.target.id === "manual-financial-stock-name") {
|
|
event.preventDefault();
|
|
rememberManualDraft();
|
|
send("search-manual-financial-stocks", {
|
|
stockName: event.target.value.trim()
|
|
});
|
|
}
|
|
});
|
|
|
|
operatorCatalogClose.addEventListener("click", function () {
|
|
send("close-operator-catalog", {});
|
|
});
|
|
operatorCatalogThemeTab.addEventListener("click", function () {
|
|
send("open-operator-catalog", { entity: "theme" });
|
|
});
|
|
operatorCatalogExpertTab.addEventListener("click", function () {
|
|
send("open-operator-catalog", { entity: "expert" });
|
|
});
|
|
function searchOperatorCatalog() {
|
|
send("search-operator-catalog", {
|
|
query: operatorCatalogQuery.value,
|
|
nxtSession: operatorCatalogSession.value === "afterMarket"
|
|
? "afterMarket" : "preMarket"
|
|
});
|
|
}
|
|
operatorCatalogSearch.addEventListener("click", searchOperatorCatalog);
|
|
operatorCatalogQuery.addEventListener("keydown", function (event) {
|
|
if (event.key === "Enter" && !isImeComposing(event)) {
|
|
event.preventDefault();
|
|
searchOperatorCatalog();
|
|
}
|
|
});
|
|
operatorCatalogNew.addEventListener("click", function () {
|
|
if (!operatorCatalogState) return;
|
|
operatorCatalogDraftKey = "";
|
|
operatorCatalogNameDraft = "";
|
|
if (operatorCatalogState.entity === "theme") {
|
|
send("begin-create-theme-catalog", {
|
|
market: operatorCatalogNewMarket.value === "nxt" ? "nxt" : "krx"
|
|
});
|
|
} else {
|
|
send("begin-create-expert-catalog", {});
|
|
}
|
|
});
|
|
operatorCatalogEditorMarket.addEventListener("change", function () {
|
|
if (!operatorCatalogState || operatorCatalogState.entity !== "theme" ||
|
|
operatorCatalogState.mode !== "create" || operatorCatalogEditorMarket.disabled) return;
|
|
|
|
operatorCatalogNameDraft = operatorCatalogName.value;
|
|
send("change-create-theme-market", {
|
|
market: operatorCatalogEditorMarket.value === "nxt" ? "nxt" : "krx",
|
|
editorName: operatorCatalogName.value.trim()
|
|
});
|
|
});
|
|
operatorCatalogResults.addEventListener("click", function (event) {
|
|
const row = event.target.closest("button[data-operator-catalog-result-id]");
|
|
if (!row || row.disabled) return;
|
|
operatorCatalogDraftKey = "";
|
|
send("select-operator-catalog-result", {
|
|
resultId: row.dataset.operatorCatalogResultId
|
|
});
|
|
});
|
|
operatorCatalogName.addEventListener("input", function () {
|
|
operatorCatalogNameDraft = operatorCatalogName.value;
|
|
operatorCatalogNameStatus.textContent = "";
|
|
operatorCatalogNameStatus.className = "";
|
|
operatorCatalogNameCheck.disabled = uiBusy || !operatorCatalogState ||
|
|
operatorCatalogState.entity !== "theme" ||
|
|
(operatorCatalogState.mode !== "create" && operatorCatalogState.mode !== "edit") ||
|
|
operatorCatalogState.canCheckThemeName !== true ||
|
|
operatorCatalogName.value.trim().length === 0;
|
|
});
|
|
operatorCatalogNameCheck.addEventListener("click", function () {
|
|
const name = operatorCatalogName.value.trim();
|
|
// ThemeA's duplicate-check button silently returned for an empty name.
|
|
if (!name) return;
|
|
|
|
operatorCatalogName.setCustomValidity("");
|
|
operatorCatalogNameDraft = name;
|
|
send("check-operator-catalog-theme-name", { name: name });
|
|
});
|
|
function searchOperatorCatalogStocks() {
|
|
const query = operatorCatalogStockQuery.value.trim();
|
|
send("search-operator-catalog-stocks", { query: query });
|
|
}
|
|
operatorCatalogStockSearch.addEventListener("click", searchOperatorCatalogStocks);
|
|
operatorCatalogStockQuery.addEventListener("keydown", function (event) {
|
|
if (event.key === "Enter" && !isImeComposing(event)) {
|
|
event.preventDefault();
|
|
searchOperatorCatalogStocks();
|
|
}
|
|
});
|
|
operatorCatalogStockResults.addEventListener("dblclick", function (event) {
|
|
const row = event.target.closest("button[data-operator-catalog-stock-result-id]");
|
|
if (!row || row.disabled) return;
|
|
event.preventDefault();
|
|
send("activate-operator-catalog-stock", {
|
|
resultId: row.dataset.operatorCatalogStockResultId,
|
|
buyAmount: null
|
|
});
|
|
});
|
|
operatorCatalogStockResults.addEventListener("click", function (event) {
|
|
const row = event.target.closest("button[data-operator-catalog-stock-result-id]");
|
|
if (!row || row.disabled) return;
|
|
// A real double-click raises click(detail=1), click(detail=2), then dblclick.
|
|
// Select immediately on the first click and ignore the synthetic second
|
|
// click. Keyed rendering above keeps this exact button attached while the
|
|
// selection snapshot returns, so slow Windows double-clicks retain a target.
|
|
if ((event.detail || 1) > 1) return;
|
|
send("select-operator-catalog-stock", {
|
|
resultId: row.dataset.operatorCatalogStockResultId
|
|
});
|
|
});
|
|
operatorCatalogAddStock.addEventListener("click", function () {
|
|
send("add-operator-catalog-stock", { buyAmount: null });
|
|
});
|
|
operatorCatalogDraftRows.addEventListener("click", function (event) {
|
|
const move = event.target.closest("button[data-operator-catalog-move-row-id]");
|
|
if (move && !move.disabled) {
|
|
send("move-operator-catalog-draft-row", {
|
|
rowId: move.dataset.operatorCatalogMoveRowId,
|
|
direction: move.dataset.operatorCatalogMoveDirection
|
|
});
|
|
return;
|
|
}
|
|
const remove = event.target.closest("button[data-operator-catalog-remove-row-id]");
|
|
if (remove && !remove.disabled) {
|
|
send("remove-operator-catalog-draft-row", {
|
|
rowId: remove.dataset.operatorCatalogRemoveRowId
|
|
});
|
|
}
|
|
});
|
|
operatorCatalogDraftRows.addEventListener("change", function (event) {
|
|
const input = event.target.closest("input[data-operator-catalog-buy-amount-row-id]");
|
|
if (!input || input.disabled) return;
|
|
const text = input.value.trim();
|
|
if (!text) {
|
|
input.setCustomValidity("");
|
|
send("set-operator-catalog-draft-buy-amount", {
|
|
rowId: input.dataset.operatorCatalogBuyAmountRowId,
|
|
buyAmount: null
|
|
});
|
|
return;
|
|
}
|
|
const amount = Number(text);
|
|
if (!Number.isSafeInteger(amount) || amount <= 0) {
|
|
input.setCustomValidity("매수가는 1 이상의 정수여야 합니다.");
|
|
input.reportValidity();
|
|
return;
|
|
}
|
|
input.setCustomValidity("");
|
|
send("set-operator-catalog-draft-buy-amount", {
|
|
rowId: input.dataset.operatorCatalogBuyAmountRowId,
|
|
buyAmount: amount
|
|
});
|
|
});
|
|
operatorCatalogSave.addEventListener("click", function () {
|
|
const rawName = operatorCatalogName.value;
|
|
const canonicalName = rawName.trim();
|
|
if (!canonicalName) {
|
|
// EList showed an exact one-button message; ThemeA's empty-name path did
|
|
// not own that message and is kept as a no-op here.
|
|
if (operatorCatalogState && operatorCatalogState.entity === "expert") {
|
|
send("save-operator-catalog", { name: "" });
|
|
}
|
|
return;
|
|
}
|
|
const preserveStoredThemeName = operatorCatalogState &&
|
|
operatorCatalogState.entity === "theme" &&
|
|
operatorCatalogState.mode === "edit";
|
|
const name = preserveStoredThemeName ? rawName : canonicalName;
|
|
operatorCatalogName.setCustomValidity("");
|
|
operatorCatalogNameDraft = name;
|
|
send("save-operator-catalog", { name: name });
|
|
});
|
|
operatorCatalogDeleteAll.addEventListener("click", function () {
|
|
if (!operatorCatalogState || operatorCatalogState.entity !== "theme" ||
|
|
(operatorCatalogState.mode !== "create" && operatorCatalogState.mode !== "edit")) {
|
|
return;
|
|
}
|
|
send("clear-operator-catalog-draft-rows", {});
|
|
});
|
|
operatorCatalogCancel.addEventListener("click", function () {
|
|
operatorCatalogDraftKey = "";
|
|
send("close-operator-catalog", {});
|
|
});
|
|
|
|
playlistMoveUp.addEventListener("click", function () {
|
|
send("move-selected-playlist-rows", { direction: "up" });
|
|
});
|
|
playlistMoveDown.addEventListener("click", function () {
|
|
send("move-selected-playlist-rows", { direction: "down" });
|
|
});
|
|
playlistDeleteSelected.addEventListener("click", function () {
|
|
send("delete-selected-playlist-rows", {});
|
|
});
|
|
playlistDeleteAll.addEventListener("click", function () {
|
|
send("delete-all-playlist-rows", {});
|
|
});
|
|
playlistEnableAll.addEventListener("change", function () {
|
|
if (!playlistProgramEnableMutationLocked) {
|
|
send("set-all-playlist-enabled", { enabled: playlistEnableAll.checked });
|
|
}
|
|
});
|
|
marketTabs.addEventListener("click", function (event) {
|
|
const button = event.target.closest("button[data-tab-id]");
|
|
if (button) {
|
|
clearComparisonTargetPendingSelection(true);
|
|
clearThemeResultPendingSelection(true);
|
|
send("select-tab", { tabId: button.dataset.tabId });
|
|
}
|
|
});
|
|
marketTabs.addEventListener("dragstart", function (event) {
|
|
const button = event.target.closest("button[data-tab-id]");
|
|
if (!button || !event.dataTransfer) return;
|
|
clearPendingTabHoverSwap();
|
|
draggedTabId = button.dataset.tabId;
|
|
tabDragLastTargetId = null;
|
|
event.dataTransfer.effectAllowed = "move";
|
|
event.dataTransfer.setData("text/x-mbn-tab", draggedTabId);
|
|
button.classList.add("dragging");
|
|
});
|
|
marketTabs.addEventListener("dragover", onMarketTabDragOver);
|
|
marketTabs.addEventListener("drop", function (event) {
|
|
const target = event.target.closest("button[data-tab-id]");
|
|
if (!target || !event.dataTransfer || !draggedTabId) return;
|
|
event.preventDefault();
|
|
if (event.dataTransfer.getData("text/x-mbn-tab") !== draggedTabId) return;
|
|
draggedTabId = null;
|
|
tabDragLastTargetId = null;
|
|
marketTabs.querySelectorAll("button.dragging")
|
|
.forEach(function (button) { button.classList.remove("dragging"); });
|
|
});
|
|
marketTabs.addEventListener("dragend", function () {
|
|
draggedTabId = null;
|
|
tabDragLastTargetId = null;
|
|
marketTabs.querySelectorAll("button.dragging")
|
|
.forEach(function (button) { button.classList.remove("dragging"); });
|
|
});
|
|
function sendMovingAverages() {
|
|
send("set-moving-averages", {
|
|
ma5: movingAverage5.checked,
|
|
ma20: movingAverage20.checked
|
|
});
|
|
}
|
|
movingAverage5.addEventListener("change", sendMovingAverages);
|
|
movingAverage20.addEventListener("change", sendMovingAverages);
|
|
catalogExpandAll.addEventListener("change", function () {
|
|
if (treeInteractionLocked) {
|
|
const sections = Array.from(categoryTree.querySelectorAll("details"));
|
|
catalogExpandAll.checked = sections.length > 0 && sections.every(function (details) {
|
|
return details.open === true;
|
|
});
|
|
return;
|
|
}
|
|
categoryTree.querySelectorAll("details").forEach(function (details) {
|
|
details.open = catalogExpandAll.checked;
|
|
syncTreeSectionExpanded(details);
|
|
});
|
|
});
|
|
categoryTree.addEventListener("dblclick", function (event) {
|
|
const treeNode = event.target.closest("[data-tree-node-key]");
|
|
if (treeNode) {
|
|
event.preventDefault();
|
|
if (treeInteractionLocked || treeNode.disabled === true ||
|
|
treeNode.getAttribute("aria-disabled") === "true") return;
|
|
selectTreeNode(treeNode, true);
|
|
// The disclosure is a separate expand/collapse command, not a node action.
|
|
if (event.target.closest("[data-tree-disclosure]")) return;
|
|
}
|
|
const themeResult = event.target.closest("button[data-theme-result-id]");
|
|
if (themeResult && !themeResult.disabled) {
|
|
event.preventDefault();
|
|
clearDelayedClick(themeResultClickTimer);
|
|
themeResultClickTimer = null;
|
|
const pending = themeResultPendingSelection &&
|
|
themeResultPendingSelection.key === themeResult.dataset.themeResultId
|
|
? themeResultPendingSelection
|
|
: beginThemeResultPendingSelection(themeResult);
|
|
if (send("activate-theme-result", {
|
|
resultId: themeResult.dataset.themeResultId
|
|
})) {
|
|
if (pending) pending.sent = true;
|
|
} else {
|
|
clearThemeResultPendingSelection(true);
|
|
}
|
|
return;
|
|
}
|
|
const comparisonChoice = event.target.closest("button[data-comparison-choice]");
|
|
if (comparisonChoice && !comparisonChoice.disabled) {
|
|
event.preventDefault();
|
|
clearDelayedClick(comparisonTargetClickTimer);
|
|
comparisonTargetClickTimer = null;
|
|
const selectionId = comparisonChoice.dataset.comparisonSelectionId;
|
|
const pending = comparisonTargetPendingSelection &&
|
|
comparisonTargetPendingSelection.key === selectionId
|
|
? comparisonTargetPendingSelection
|
|
: beginComparisonTargetPendingSelection(comparisonChoice, selectionId);
|
|
if (send(comparisonChoice.dataset.comparisonChoice === "world"
|
|
? "choose-comparison-world" : "choose-comparison-domestic", {
|
|
selectionId: selectionId
|
|
})) {
|
|
if (pending) pending.sent = true;
|
|
} else {
|
|
clearComparisonTargetPendingSelection(true);
|
|
}
|
|
return;
|
|
}
|
|
const comparisonFixed = event.target.closest("button[data-comparison-target-id]");
|
|
if (comparisonFixed && !comparisonFixed.disabled) {
|
|
event.preventDefault();
|
|
clearDelayedClick(comparisonTargetClickTimer);
|
|
comparisonTargetClickTimer = null;
|
|
const targetId = comparisonFixed.dataset.comparisonTargetId;
|
|
const pending = comparisonTargetPendingSelection &&
|
|
comparisonTargetPendingSelection.key === targetId
|
|
? comparisonTargetPendingSelection
|
|
: beginComparisonTargetPendingSelection(comparisonFixed, targetId);
|
|
if (send("choose-comparison-fixed", { targetId: targetId })) {
|
|
if (pending) pending.sent = true;
|
|
} else {
|
|
clearComparisonTargetPendingSelection(true);
|
|
}
|
|
return;
|
|
}
|
|
const comparisonSection = event.target.closest("summary[data-comparison-section-index]");
|
|
if (comparisonSection) {
|
|
event.preventDefault();
|
|
send("activate-comparison-section", {
|
|
sectionIndex: Number(comparisonSection.dataset.comparisonSectionIndex)
|
|
});
|
|
return;
|
|
}
|
|
const industrySection = event.target.closest("summary[data-industry-section-index]");
|
|
if (industrySection) {
|
|
event.preventDefault();
|
|
send("activate-industry-section", {
|
|
sectionIndex: Number(industrySection.dataset.industrySectionIndex)
|
|
});
|
|
return;
|
|
}
|
|
const comparisonAction = event.target.closest("button[data-comparison-action-id]");
|
|
if (comparisonAction && !comparisonAction.disabled) {
|
|
send("activate-comparison-action", {
|
|
actionId: comparisonAction.dataset.comparisonActionId
|
|
});
|
|
return;
|
|
}
|
|
const industryRow = event.target.closest("button[data-industry-index]");
|
|
if (industryRow) {
|
|
activateIndustryRow(industryRow);
|
|
return;
|
|
}
|
|
const industryAction = event.target.closest("button[data-industry-action-id]");
|
|
if (industryAction) {
|
|
send("activate-industry-action", {
|
|
actionId: industryAction.dataset.industryActionId
|
|
});
|
|
return;
|
|
}
|
|
const action = event.target.closest("button[data-action-id]");
|
|
if (action) {
|
|
send("activate-fixed-action", { actionId: action.dataset.actionId });
|
|
return;
|
|
}
|
|
const section = event.target.closest("summary[data-section-index]");
|
|
if (section && section.getAttribute("aria-disabled") !== "true") {
|
|
event.preventDefault();
|
|
// UC1.treeView_DoubleClick walks every direct child when the selected
|
|
// node is a root. Keep the whole batch behind one native intent so C#
|
|
// can materialize every child first and commit in original order.
|
|
send("activate-fixed-section", {
|
|
sectionIndex: Number(section.dataset.sectionIndex)
|
|
});
|
|
return;
|
|
}
|
|
});
|
|
categoryTree.addEventListener("click", function (event) {
|
|
const treeRoot = event.target.closest("summary[data-tree-root]");
|
|
if (treeRoot) {
|
|
// A native TreeView selects on its label and expands only from the glyph.
|
|
// Cancel <summary>'s whole-row default toggle to preserve that split.
|
|
event.preventDefault();
|
|
if (treeInteractionLocked || treeRoot.getAttribute("aria-disabled") === "true") return;
|
|
selectTreeNode(treeRoot, true);
|
|
if (event.target.closest("[data-tree-disclosure]") && (event.detail || 1) < 2) {
|
|
const details = treeRoot.parentElement;
|
|
details.open = !details.open;
|
|
syncTreeSectionExpanded(details);
|
|
}
|
|
return;
|
|
}
|
|
const treeLeaf = event.target.closest(".tree-item[data-tree-node-key]");
|
|
if (treeLeaf) {
|
|
if (treeInteractionLocked || treeLeaf.disabled === true) {
|
|
event.preventDefault();
|
|
return;
|
|
}
|
|
selectTreeNode(treeLeaf, true);
|
|
}
|
|
const uc4Catalog = event.target.closest("button[data-uc4-theme-catalog]");
|
|
if (uc4Catalog && !uc4Catalog.disabled) {
|
|
const action = uc4Catalog.dataset.uc4ThemeCatalog;
|
|
if (action === "create") {
|
|
send("begin-uc4-theme-catalog", {});
|
|
} else if (action === "edit") {
|
|
send("edit-uc4-selected-theme", {});
|
|
} else if (action === "delete") {
|
|
send("delete-uc4-selected-theme", {});
|
|
}
|
|
return;
|
|
}
|
|
const uc6Catalog = event.target.closest("button[data-uc6-expert-catalog]");
|
|
if (uc6Catalog && !uc6Catalog.disabled) {
|
|
const action = uc6Catalog.dataset.uc6ExpertCatalog;
|
|
if (action === "create") {
|
|
send("begin-uc6-expert-catalog", {});
|
|
} else if (action === "edit") {
|
|
send("edit-uc6-selected-expert", {});
|
|
} else if (action === "delete") {
|
|
send("delete-uc6-selected-expert", {});
|
|
}
|
|
return;
|
|
}
|
|
const catalogOpen = event.target.closest("button[data-operator-catalog-open]");
|
|
if (catalogOpen && !catalogOpen.disabled) {
|
|
send("open-operator-catalog", {
|
|
entity: catalogOpen.dataset.operatorCatalogOpen
|
|
});
|
|
return;
|
|
}
|
|
// UC4/UC6/UC7 wire their scene action controls to WinForms Click.
|
|
// Keep these actions out of the dblclick delegate above so one operator
|
|
// click produces exactly one closed native intent.
|
|
const themeAction = event.target.closest("button[data-theme-action-id]");
|
|
if (themeAction && !themeAction.disabled) {
|
|
send("activate-theme-action", { actionId: themeAction.dataset.themeActionId });
|
|
return;
|
|
}
|
|
const expertAction = event.target.closest("button[data-expert-action-id]");
|
|
if (expertAction && !expertAction.disabled) {
|
|
send("activate-expert-action", { actionId: expertAction.dataset.expertActionId });
|
|
return;
|
|
}
|
|
const haltAction = event.target.closest("button[data-halt-action-id]");
|
|
if (haltAction && !haltAction.disabled) {
|
|
send("activate-trading-halt-action", { actionId: haltAction.dataset.haltActionId });
|
|
return;
|
|
}
|
|
const overseasAction = event.target.closest("button[data-overseas-action-id]");
|
|
if (overseasAction && !overseasAction.disabled) {
|
|
send("activate-overseas-action", {
|
|
actionId: overseasAction.dataset.overseasActionId
|
|
});
|
|
return;
|
|
}
|
|
const overseasTarget = event.target.closest("button[data-overseas-target-id]");
|
|
if (overseasTarget && !overseasTarget.disabled) {
|
|
selectOverseasRow(overseasTarget);
|
|
return;
|
|
}
|
|
const overseasResult = event.target.closest("button[data-overseas-selection-id]");
|
|
if (overseasResult && !overseasResult.disabled) {
|
|
selectOverseasRow(overseasResult);
|
|
return;
|
|
}
|
|
const overseasSearch = event.target.closest("button[data-overseas-search]");
|
|
if (overseasSearch) {
|
|
const kind = overseasSearch.dataset.overseasSearch;
|
|
const input = categoryTree.querySelector("#overseas-" + kind + "-search");
|
|
send(kind === "stock" ? "search-overseas-stocks" : "search-overseas-industries", {
|
|
query: input ? input.value : ""
|
|
});
|
|
return;
|
|
}
|
|
const comparisonChoice = event.target.closest("button[data-comparison-choice]");
|
|
if (comparisonChoice) {
|
|
clearDelayedClick(comparisonTargetClickTimer);
|
|
const kind = comparisonChoice.dataset.comparisonChoice;
|
|
const selectionId = comparisonChoice.dataset.comparisonSelectionId;
|
|
const pending = beginComparisonTargetPendingSelection(
|
|
comparisonChoice,
|
|
selectionId);
|
|
comparisonTargetClickTimer = deferLegacySingleClick(function () {
|
|
comparisonTargetClickTimer = null;
|
|
if (!pending || comparisonTargetPendingSelection !== pending) return;
|
|
if (send(kind === "world"
|
|
? "select-comparison-world" : "select-comparison-domestic", {
|
|
selectionId: selectionId
|
|
})) {
|
|
pending.sent = true;
|
|
} else {
|
|
clearComparisonTargetPendingSelection(true);
|
|
}
|
|
});
|
|
return;
|
|
}
|
|
const comparisonFixed = event.target.closest("button[data-comparison-target-id]");
|
|
if (comparisonFixed) {
|
|
clearDelayedClick(comparisonTargetClickTimer);
|
|
const targetId = comparisonFixed.dataset.comparisonTargetId;
|
|
const pending = beginComparisonTargetPendingSelection(comparisonFixed, targetId);
|
|
comparisonTargetClickTimer = deferLegacySingleClick(function () {
|
|
comparisonTargetClickTimer = null;
|
|
if (!pending || comparisonTargetPendingSelection !== pending) return;
|
|
if (send("select-comparison-fixed", { targetId: targetId })) {
|
|
pending.sent = true;
|
|
} else {
|
|
clearComparisonTargetPendingSelection(true);
|
|
}
|
|
});
|
|
return;
|
|
}
|
|
const comparisonPair = event.target.closest("button[data-comparison-pair-id]");
|
|
if (comparisonPair) {
|
|
send("select-comparison-pair", { rowId: comparisonPair.dataset.comparisonPairId });
|
|
return;
|
|
}
|
|
const comparisonSearch = event.target.closest("button[data-comparison-search]");
|
|
if (comparisonSearch) {
|
|
const kind = comparisonSearch.dataset.comparisonSearch;
|
|
const input = categoryTree.querySelector("#comparison-" + kind + "-search");
|
|
const searchIntent = kind === "world"
|
|
? "search-comparison-world" : "search-comparison-domestic";
|
|
send(searchIntent, { query: input ? input.value : "" });
|
|
return;
|
|
}
|
|
if (event.target.closest("button[data-comparison-swap]")) {
|
|
send("swap-comparison-targets", {});
|
|
return;
|
|
}
|
|
if (event.target.closest("button[data-comparison-clear]")) {
|
|
send("clear-comparison-targets", {});
|
|
return;
|
|
}
|
|
if (event.target.closest("button[data-comparison-add]")) {
|
|
send("add-comparison-pair", {});
|
|
return;
|
|
}
|
|
if (event.target.closest("button[data-comparison-import]")) {
|
|
send("import-legacy-comparison-pairs", {});
|
|
return;
|
|
}
|
|
const comparisonMove = event.target.closest("button[data-comparison-move]");
|
|
if (comparisonMove) {
|
|
send("move-comparison-pair", { direction: comparisonMove.dataset.comparisonMove });
|
|
return;
|
|
}
|
|
const comparisonDelete = event.target.closest("button[data-comparison-delete]");
|
|
if (comparisonDelete) {
|
|
const all = comparisonDelete.dataset.comparisonDelete === "all";
|
|
send(all ? "delete-all-comparison-pairs" :
|
|
"delete-selected-comparison-pair", {});
|
|
return;
|
|
}
|
|
const expertResult = event.target.closest("button[data-expert-selection-id]");
|
|
if (expertResult) {
|
|
send("select-expert", { selectionId: expertResult.dataset.expertSelectionId });
|
|
return;
|
|
}
|
|
if (event.target.closest("button[data-expert-search]")) {
|
|
const input = categoryTree.querySelector("#expert-search");
|
|
send("search-experts", { query: input ? input.value : "" });
|
|
return;
|
|
}
|
|
const haltResult = event.target.closest("button[data-halt-selection-id]");
|
|
if (haltResult) {
|
|
send("select-trading-halt", { selectionId: haltResult.dataset.haltSelectionId });
|
|
return;
|
|
}
|
|
if (event.target.closest("button[data-halt-search]")) {
|
|
const input = categoryTree.querySelector("#halt-search");
|
|
send("search-trading-halts", { query: input ? input.value : "" });
|
|
return;
|
|
}
|
|
if (event.target.closest("button[data-halt-sort]")) {
|
|
send("toggle-trading-halt-sort", {});
|
|
return;
|
|
}
|
|
const themeResult = event.target.closest("button[data-theme-result-id]");
|
|
if (themeResult) {
|
|
clearDelayedClick(themeResultClickTimer);
|
|
const resultId = themeResult.dataset.themeResultId;
|
|
const pending = beginThemeResultPendingSelection(themeResult);
|
|
themeResultClickTimer = deferLegacySingleClick(function () {
|
|
themeResultClickTimer = null;
|
|
if (!pending || themeResultPendingSelection !== pending) return;
|
|
if (send("select-theme", { resultId: resultId })) {
|
|
pending.sent = true;
|
|
} else {
|
|
clearThemeResultPendingSelection(true);
|
|
}
|
|
});
|
|
return;
|
|
}
|
|
if (event.target.closest("button[data-theme-search]")) {
|
|
const input = categoryTree.querySelector("#theme-search");
|
|
send("search-themes", { query: input ? input.value : "" });
|
|
return;
|
|
}
|
|
const industryRow = event.target.closest("button[data-industry-index]");
|
|
if (industryRow) {
|
|
selectIndustryRow(industryRow);
|
|
return;
|
|
}
|
|
if (event.target.closest("button[data-industry-swap]")) {
|
|
send("swap-industries", {});
|
|
}
|
|
});
|
|
categoryTree.addEventListener("change", function (event) {
|
|
if (event.target.matches("input[data-industry-slot]")) {
|
|
send("set-industry-comparison-text", {
|
|
slot: event.target.dataset.industrySlot,
|
|
value: event.target.value
|
|
});
|
|
} else if (event.target.matches("input[data-theme-sort]")) {
|
|
send("set-theme-sort", { sortId: event.target.value });
|
|
}
|
|
});
|
|
categoryTree.addEventListener("keydown", function (event) {
|
|
if (isImeComposing(event)) return;
|
|
const overseasList = event.target.closest("[data-overseas-list]");
|
|
if (overseasList && ["ArrowUp", "ArrowDown", "Home", "End"].includes(event.key)) {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
moveOverseasListSelection(overseasList, event.key);
|
|
return;
|
|
}
|
|
const industryList = event.target.closest(".industry-list");
|
|
if (industryList && ["ArrowUp", "ArrowDown", "Home", "End"].includes(event.key)) {
|
|
event.preventDefault();
|
|
const rows = Array.from(
|
|
industryList.querySelectorAll("button[data-industry-index]"));
|
|
if (rows.length === 0) return;
|
|
const selectedIndex = rows.findIndex(function (row) {
|
|
return row.getAttribute("aria-selected") === "true";
|
|
});
|
|
let nextIndex;
|
|
if (event.key === "Home") nextIndex = 0;
|
|
else if (event.key === "End") nextIndex = rows.length - 1;
|
|
else if (selectedIndex < 0) nextIndex = 0;
|
|
else if (event.key === "ArrowUp") nextIndex = Math.max(0, selectedIndex - 1);
|
|
else nextIndex = Math.min(rows.length - 1, selectedIndex + 1);
|
|
const nextRow = rows[nextIndex];
|
|
selectIndustryRow(nextRow);
|
|
nextRow.scrollIntoView({ block: "nearest", inline: "nearest" });
|
|
} else {
|
|
const treeRoot = event.target.closest("summary[data-tree-root]");
|
|
if (treeRoot && ["Enter", " ", "ArrowLeft", "ArrowRight"].includes(event.key)) {
|
|
event.preventDefault();
|
|
if (treeInteractionLocked || treeRoot.getAttribute("aria-disabled") === "true") return;
|
|
selectTreeNode(treeRoot, true);
|
|
const details = treeRoot.parentElement;
|
|
if (event.key === "ArrowLeft") details.open = false;
|
|
else if (event.key === "ArrowRight") details.open = true;
|
|
syncTreeSectionExpanded(details);
|
|
} else if (event.key === "Enter" &&
|
|
(event.target.id === "overseas-industry-search" ||
|
|
event.target.id === "overseas-stock-search")) {
|
|
event.preventDefault();
|
|
const kind = event.target.id === "overseas-stock-search" ? "stock" : "industry";
|
|
send(kind === "stock" ? "search-overseas-stocks" : "search-overseas-industries", {
|
|
query: event.target.value
|
|
});
|
|
} else if (event.key === "Enter" &&
|
|
(event.target.id === "comparison-domestic-search" ||
|
|
event.target.id === "comparison-world-search")) {
|
|
event.preventDefault();
|
|
const kind = event.target.id === "comparison-world-search" ? "world" : "domestic";
|
|
send(kind === "world" ? "search-comparison-world" :
|
|
"search-comparison-domestic", { query: event.target.value });
|
|
} else if (event.key === "Enter" && event.target.id === "theme-search") {
|
|
event.preventDefault();
|
|
send("search-themes", { query: event.target.value });
|
|
} else if (event.key === "Enter" && event.target.id === "expert-search") {
|
|
event.preventDefault();
|
|
send("search-experts", { query: event.target.value });
|
|
} else if (event.key === "Enter" && event.target.id === "halt-search") {
|
|
event.preventDefault();
|
|
send("search-trading-halts", { query: event.target.value });
|
|
}
|
|
}
|
|
});
|
|
window.addEventListener("pointerup", function () {
|
|
deferredPlaylistPlainSelectionRowId = null;
|
|
operatorCatalogDragBlockedRowId = null;
|
|
});
|
|
|
|
function closeActiveChildModalFromAltF4(activeModal) {
|
|
if (!activeModal) return false;
|
|
if (activeModal === namedPlaylistDialog) {
|
|
closeNamedPlaylist();
|
|
} else if (activeModal === manualDialog) {
|
|
if (!manualClose.disabled) manualClose.click();
|
|
} else if (activeModal === manualListDialog) {
|
|
if (!manualListClose.disabled) manualListClose.click();
|
|
} else if (activeModal === operatorCatalogDialog) {
|
|
if (!operatorCatalogClose.disabled) operatorCatalogClose.click();
|
|
} else if (activeModal === legacyAlertDialog && !legacyDialogIsConfirmation) {
|
|
send("dismiss-dialog", {});
|
|
}
|
|
// Native Yes/No MessageBox windows do not expose an Alt+F4 close result.
|
|
// Consume Alt+F4 for those and for the nested PList confirmation as well.
|
|
return true;
|
|
}
|
|
|
|
function activateRovingListRow(row) {
|
|
if (!row || row.disabled === true) return false;
|
|
if (row.dataset.treeNodeKey) {
|
|
if (treeInteractionLocked || row.getAttribute("aria-disabled") === "true") {
|
|
return false;
|
|
}
|
|
selectTreeNode(row, false);
|
|
return true;
|
|
}
|
|
if (row.dataset.themeResultId) {
|
|
const pending = beginThemeResultPendingSelection(row);
|
|
if (pending && send("select-theme", {
|
|
resultId: row.dataset.themeResultId
|
|
})) {
|
|
pending.sent = true;
|
|
return true;
|
|
}
|
|
clearThemeResultPendingSelection(true);
|
|
return false;
|
|
}
|
|
if (row.dataset.namedPlaylistDefinitionId) {
|
|
return beginNamedPlaylistSelection(row.dataset.namedPlaylistDefinitionId);
|
|
}
|
|
if (row.dataset.operatorCatalogResultId) {
|
|
operatorCatalogDraftKey = "";
|
|
return send("select-operator-catalog-result", {
|
|
resultId: row.dataset.operatorCatalogResultId
|
|
});
|
|
}
|
|
if (row.dataset.operatorCatalogStockResultId) {
|
|
return send("select-operator-catalog-stock", {
|
|
resultId: row.dataset.operatorCatalogStockResultId
|
|
});
|
|
}
|
|
if (row.dataset.comparisonSelectionId) {
|
|
clearComparisonTargetPendingSelection(true);
|
|
return send(row.dataset.comparisonChoice === "world"
|
|
? "select-comparison-world" : "select-comparison-domestic", {
|
|
selectionId: row.dataset.comparisonSelectionId
|
|
});
|
|
}
|
|
if (row.dataset.comparisonTargetId) {
|
|
clearComparisonTargetPendingSelection(true);
|
|
return send("select-comparison-fixed", {
|
|
targetId: row.dataset.comparisonTargetId
|
|
});
|
|
}
|
|
if (row.dataset.comparisonPairId) {
|
|
return send("select-comparison-pair", { rowId: row.dataset.comparisonPairId });
|
|
}
|
|
if (row.dataset.expertSelectionId) {
|
|
return send("select-expert", { selectionId: row.dataset.expertSelectionId });
|
|
}
|
|
if (row.dataset.haltSelectionId) {
|
|
return send("select-trading-halt", { selectionId: row.dataset.haltSelectionId });
|
|
}
|
|
if (row.dataset.manualResultId) {
|
|
clearManualResultPendingSelection(true);
|
|
manualDraft = null;
|
|
manualDraftKey = "";
|
|
manualDraftResetPending = false;
|
|
return send("load-manual-financial", { resultId: row.dataset.manualResultId });
|
|
}
|
|
if (row.dataset.manualViResultId) {
|
|
clearManualViResultPendingSelection(true);
|
|
return send("select-manual-vi-result", { resultId: row.dataset.manualViResultId });
|
|
}
|
|
return false;
|
|
}
|
|
|
|
document.addEventListener("focusin", function (event) {
|
|
const row = event.target && typeof event.target.closest === "function"
|
|
? event.target.closest("[data-roving-row]") : null;
|
|
const list = row && row.closest("[data-roving-list]");
|
|
if (row && list) focusRovingListRow(list, row, false);
|
|
});
|
|
|
|
document.addEventListener("keydown", function (event) {
|
|
const activeModal = modalFocusManager.getActiveModal();
|
|
if (event.altKey && event.key === "F4") {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
// MainForm consumed Alt+F4 at the main workspace. Child modal behavior
|
|
// remains explicit, while the main workspace shortcut is a no-op.
|
|
if (activeModal && !event.repeat) closeActiveChildModalFromAltF4(activeModal);
|
|
return;
|
|
}
|
|
const rovingRow = event.target && typeof event.target.closest === "function"
|
|
? event.target.closest("[data-roving-row]") : null;
|
|
const rovingList = rovingRow && rovingRow.closest("[data-roving-list]");
|
|
if (rovingList && isRovingListNavigationKey(event.key) &&
|
|
!isImeComposing(event)) {
|
|
if (moveRovingListSelection(
|
|
rovingList,
|
|
rovingRow,
|
|
event.key,
|
|
activateRovingListRow)) {
|
|
event.preventDefault();
|
|
// MainForm.KeyPreview still applied its playlist boundary side effect
|
|
// behind non-modal ListBoxes. ShowDialog-owned GraphE/VI lists isolate it.
|
|
if (!activeModal && !event.repeat &&
|
|
(event.key === "Home" || event.key === "End")) {
|
|
selectPlaylistBoundary(event.key === "Home" ? "first" : "last");
|
|
}
|
|
}
|
|
return;
|
|
}
|
|
const dragLoopShortcut = event.key === "Escape" || event.key === "F2" ||
|
|
event.key === "F3" || event.key === "F8";
|
|
const pointerDragStarted = (cutDragGesture && cutDragGesture.started) ||
|
|
(playlistDragGesture && playlistDragGesture.started);
|
|
if (pointerDragStarted && dragLoopShortcut) {
|
|
// Native DoDragDrop runs its own modal loop. MainForm shortcuts cannot run
|
|
// until that loop ends. Match that behavior for both pointer-capture drag
|
|
// surfaces; Escape cancels without issuing TAKE OUT.
|
|
event.preventDefault();
|
|
if (event.key === "Escape") {
|
|
if (cutDragGesture) clearCutDragGesture();
|
|
if (playlistDragGesture) {
|
|
deferredPlaylistPlainSelectionRowId = null;
|
|
clearPlaylistDragGesture();
|
|
}
|
|
}
|
|
} else if (event.key === "Delete" && !event.repeat && dialog.hidden &&
|
|
!operatorCatalogModal.hidden && operatorCatalogState &&
|
|
(operatorCatalogState.mode === "create" || operatorCatalogState.mode === "edit")) {
|
|
const draftRow = event.target.closest("[data-operator-catalog-row-id]");
|
|
const textEditor = event.target.closest("input, textarea, [contenteditable='true']");
|
|
if (draftRow && !textEditor && !operatorCatalogMutationLocked &&
|
|
draftRow.dataset.operatorCatalogRowId === operatorCatalogState.activeDraftRowId) {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
send("remove-active-operator-catalog-draft-row", {});
|
|
}
|
|
} else if (event.key === "Escape" && modalFocusManager.getActiveModal()) {
|
|
// The legacy child forms did not assign a CancelButton and none handled
|
|
// Escape. ShowDialog isolated MainForm, so Escape cannot fall through to
|
|
// MainForm's TAKE OUT shortcut. The one-button MessageBox is the exception:
|
|
// its Escape is equivalent to acknowledging OK.
|
|
event.preventDefault();
|
|
if (!event.repeat && modalFocusManager.getActiveModal() === legacyAlertDialog &&
|
|
!legacyDialogIsConfirmation) {
|
|
send("dismiss-dialog", {});
|
|
}
|
|
} else if ((event.key === "ArrowUp" || event.key === "ArrowDown") &&
|
|
dialog.hidden && manualModal.hidden && manualListModal.hidden &&
|
|
namedPlaylistModal.hidden && namedPlaylistConfirmationModal.hidden &&
|
|
operatorCatalogModal.hidden && event.target.closest(".playlist-data-row")) {
|
|
if (movePlaylistKeyboardSelection(
|
|
event.target.closest(".playlist-data-row"), event)) {
|
|
event.preventDefault();
|
|
}
|
|
} else if (event.key === "Delete" && !event.repeat && dialog.hidden && manualModal.hidden &&
|
|
manualListModal.hidden && namedPlaylistModal.hidden &&
|
|
namedPlaylistConfirmationModal.hidden && operatorCatalogModal.hidden) {
|
|
// MainForm.KeyPreview invoked playlist deletion but did not suppress the key,
|
|
// so an editor that owns focus must still perform its normal text deletion.
|
|
if (!playlistDeleteSelectedLocked) send("delete-selected-playlist-rows", {});
|
|
} else if (event.key === " " && !event.repeat && dialog.hidden && manualModal.hidden &&
|
|
manualListModal.hidden && namedPlaylistModal.hidden &&
|
|
namedPlaylistConfirmationModal.hidden && operatorCatalogModal.hidden &&
|
|
event.target.closest(".playlist-data-row")) {
|
|
event.preventDefault();
|
|
if (!playlistProgramEnableMutationLocked) {
|
|
send("toggle-active-playlist-enabled", {});
|
|
}
|
|
} else if ((event.key === "Home" || event.key === "End") &&
|
|
!event.repeat && dialog.hidden && manualModal.hidden && manualListModal.hidden &&
|
|
namedPlaylistModal.hidden && namedPlaylistConfirmationModal.hidden &&
|
|
operatorCatalogModal.hidden) {
|
|
// MainForm handled its playlist/timer side effect and then returned the
|
|
// base key result, so a focused textbox/list control still receives Home/End.
|
|
selectPlaylistBoundary(event.key === "Home" ? "first" : "last");
|
|
}
|
|
});
|
|
dialogOk.addEventListener("click", function () {
|
|
send(legacyDialogIsConfirmation
|
|
? "confirm-native-dialog"
|
|
: "dismiss-dialog", {});
|
|
});
|
|
dialogNo.addEventListener("click", function () {
|
|
if (legacyDialogIsConfirmation) {
|
|
send("cancel-native-dialog", {});
|
|
}
|
|
});
|
|
|
|
if (webview) {
|
|
webview.addEventListener("message", function (event) {
|
|
if (event.data && event.data.type === "state" && event.data.payload) {
|
|
render(event.data.payload);
|
|
}
|
|
});
|
|
send("ready", {});
|
|
} else {
|
|
status.textContent = "WebView2 브리지를 사용할 수 없습니다.";
|
|
}
|
|
}());
|