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,