From 2dd4e08a3cf307e52a961edbd4f51c3eaf9ebd9d Mon Sep 17 00:00:00 2001 From: Tom Bishop Date: Wed, 10 Jul 2024 13:14:26 -0400 Subject: [PATCH] CLDR-17759 Highlight cell when vote for a candidate item (#3859) --- tools/cldr-apps/js/src/esm/cldrDom.mjs | 11 +++++ tools/cldr-apps/js/src/esm/cldrInfo.mjs | 9 +--- tools/cldr-apps/js/src/esm/cldrTable.mjs | 55 +++++++++++++++--------- tools/cldr-apps/js/src/esm/cldrVote.mjs | 15 +------ 4 files changed, 48 insertions(+), 42 deletions(-) diff --git a/tools/cldr-apps/js/src/esm/cldrDom.mjs b/tools/cldr-apps/js/src/esm/cldrDom.mjs index a9ccd829628..19bd312c6dd 100644 --- a/tools/cldr-apps/js/src/esm/cldrDom.mjs +++ b/tools/cldr-apps/js/src/esm/cldrDom.mjs @@ -227,6 +227,16 @@ function appendIcon(toElement, className, title) { return e; } +function parentOfType(tag, obj) { + if (!obj) { + return null; + } + if (obj.nodeName === tag) { + return obj; + } + return parentOfType(tag, obj.parentElement); +} + export { addClass, appendIcon, @@ -235,6 +245,7 @@ export { createChunk, createLinkToFn, listenFor, + parentOfType, removeAllChildNodes, removeClass, setDisplayed, diff --git a/tools/cldr-apps/js/src/esm/cldrInfo.mjs b/tools/cldr-apps/js/src/esm/cldrInfo.mjs index d9a39f1887e..9d86206e034 100644 --- a/tools/cldr-apps/js/src/esm/cldrInfo.mjs +++ b/tools/cldr-apps/js/src/esm/cldrInfo.mjs @@ -203,7 +203,7 @@ function panelShouldBeShown() { * @param {String} str the string to show at the top * @param {Node} tr the of the row * @param {Object} hideIfLast mysterious parameter, a.k.a. theObj - * @param {Function} fn the draw function, a.k.a. showFn, sometimes constructed by cldrInfo.showItemInfoFn, + * @param {Function} fn the draw function, a.k.a. showFn, sometimes constructed by cldrTable.showItemInfoFn, * sometimes ourShowFn in cldrVote.showProposedItem */ function show(str, tr, hideIfLast, fn) { @@ -212,12 +212,7 @@ function show(str, tr, hideIfLast, fn) { unShow(); unShow = null; } - // Ideally, updateCurrentId and setLastShown should be called from cldrTable, not cldrInfo, - // however it's not clear whether they need to be called after openPanel and unShow - if (tr?.sethash) { - cldrLoad.updateCurrentId(tr.sethash); - } - cldrTable.setLastShown(hideIfLast); + cldrTable.updateSelectedRowAndCell(tr, hideIfLast); addDeferredHelp(tr?.theRow); // if !tr.theRow, erase (as when click Next/Previous) addPlaceholderHelp(tr?.theRow); // ditto addInfoMessage(str); diff --git a/tools/cldr-apps/js/src/esm/cldrTable.mjs b/tools/cldr-apps/js/src/esm/cldrTable.mjs index 104fea7f26b..a118bbaa47e 100644 --- a/tools/cldr-apps/js/src/esm/cldrTable.mjs +++ b/tools/cldr-apps/js/src/esm/cldrTable.mjs @@ -39,6 +39,11 @@ const NO_WINNING_VALUE = "no-winning-value"; */ const EMPTY_ELEMENT_VALUE = "❮EMPTY❯"; +/** + * Remember the element (HTMLTableCellElement or HTMLDivElement) that was most recently + * shown as "selected" (displayed with a thick border). When a new element gets selected, + * this is used for removing the border from the old one + */ let lastShown = null; /** @@ -1013,7 +1018,7 @@ function addVitem(td, tr, theRow, item, newButton) { const div = document.createElement("div"); const isWinner = td == tr.proposedcell; const testKind = cldrVote.getTestKind(item.tests); - cldrVote.setDivClass(div, testKind); + setDivClass(div, testKind); item.div = div; // back link const choiceField = document.createElement("div"); @@ -1089,6 +1094,21 @@ function addVitem(td, tr, theRow, item, newButton) { } } +function setDivClassSelected(div, testKind) { + setDivClass(div, testKind); + setLastShown(div); // add thick border and remove it from previous selected element +} + +function setDivClass(div, testKind) { + if (testKind == "Warning") { + div.className = "d-item-warn"; + } else if (testKind == "Error") { + div.className = "d-item-err"; + } else { + div.className = "d-item"; + } +} + /** * Return a function that will set theRow.selectedItem, which will result in * showing info for the given candidate item in the Info Panel. @@ -1369,31 +1389,32 @@ function listen(str, tr, theObj, fn) { cldrDom.listenFor(theObj, "click", function (e) { if (cldrInfo.panelShouldBeShown()) { cldrInfo.show(str, tr, theObj /* hideIfLast */, fn); - } else if (tr?.sethash) { - // These methods, updateCurrentId and setLastShown may be called from cldrInfo.show, if - // panelShouldBeShown() returned true. If the Info Panel is hidden then they still - // need to be called. Since they don't involve the Info Panel, the implementation - // should be changed to make them independent of the Info Panel and they should be - // called from a different module, not cldrInfo. - cldrLoad.updateCurrentId(tr.sethash); - setLastShown(theObj); + } else { + updateSelectedRowAndCell(tr, theObj); } cldrEvent.stopPropagation(e); return false; }); } +function updateSelectedRowAndCell(tr, obj) { + if (tr?.sethash) { + cldrLoad.updateCurrentId(tr.sethash); + } + setLastShown(obj); +} + function setLastShown(obj) { if (lastShown && obj != lastShown) { cldrDom.removeClass(lastShown, "pu-select"); - const partr = parentOfType("TR", lastShown); + const partr = cldrDom.parentOfType("TR", lastShown); if (partr) { cldrDom.removeClass(partr, "selectShow"); } } if (obj) { cldrDom.addClass(obj, "pu-select"); - const partr = parentOfType("TR", obj); + const partr = cldrDom.parentOfType("TR", obj); if (partr) { cldrDom.addClass(partr, "selectShow"); } @@ -1405,16 +1426,6 @@ function resetLastShown() { lastShown = null; } -function parentOfType(tag, obj) { - if (!obj) { - return null; - } - if (obj.nodeName === tag) { - return obj; - } - return parentOfType(tag, obj.parentElement); -} - export { NO_WINNING_VALUE, EMPTY_ELEMENT_VALUE, @@ -1429,8 +1440,10 @@ export { makeRowId, refreshSingleRow, resetLastShown, + setDivClassSelected, setLastShown, updateRow, + updateSelectedRowAndCell, /* * The following are meant to be accessible for unit testing only: */ diff --git a/tools/cldr-apps/js/src/esm/cldrVote.mjs b/tools/cldr-apps/js/src/esm/cldrVote.mjs index 1615a860348..684509ecfe8 100644 --- a/tools/cldr-apps/js/src/esm/cldrVote.mjs +++ b/tools/cldr-apps/js/src/esm/cldrVote.mjs @@ -378,7 +378,7 @@ function showProposedItem(inTd, tr, theRow, value, tests, json) { cldrNotify.error("Not submitted", description); return; } else { - setDivClass(ourDiv, testKind); + cldrTable.setDivClassSelected(ourDiv, testKind); } if (testKind || !ourItem) { @@ -430,18 +430,6 @@ function showProposedItem(inTd, tr, theRow, value, tests, json) { return false; } -function setDivClass(div, testKind) { - if (!testKind) { - div.className = "d-item"; - } else if (testKind == "Warning") { - div.className = "d-item-warn"; - } else if (testKind == "Error") { - div.className = "d-item-err"; - } else { - div.className = "d-item"; - } -} - /** * Determine whether a JSONified array of CheckCLDR.CheckStatus is overall a warning or an error. * @@ -607,7 +595,6 @@ export { getTestKind, handleWiredClick, isBusy, - setDivClass, setVoteLevelChanged, wireUpButton, wrapRadio,