Skip to content

Phase 2 (6/6): fix district search tooltip bug; skip touch-tap here deliberately #462

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
JeffreyBLewis wants to merge 1 commit into
base: touch-tooltips-person
Choose a base branch
from
Open

Phase 2 (6/6): fix district search tooltip bug; skip touch-tap here deliberately #462

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
65 changes: 37 additions & 28 deletions static/js/district.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,10 @@ let cachedCoords = [];
let initialLoad = 0;
let markerPos;

function hideDistrictRowTooltip() {
$("#tooltipIdeology").css("visibility", "hidden");
}

// From stackoverflow response, who borrowed it from Shopify--simple ordinal
// suffix.
function getGetOrdinal(n) {
Expand Down Expand Up @@ -370,35 +374,40 @@ function buildResult(v, lastResult, tbody, myResults) {
${v["bioname"]}</a>`)
.appendTo(tr);

// Use a closure to pin tooltips onto each row.
((v) => {
tr.on("mouseover", () => {
console.log($(this).children(".ideology").offset().left);
$("#tooltipIdeology").html("");
const ideologyTooltip = `<strong>DW-NOMINATE</strong>: \
${v["nominate"]["dim1"]}<br/><small>Scores from \
-1 (Very Liberal) to 1 (Very Conservative)</small>`;
if (v["nominate"] != undefined) {
$("#tooltipIdeology").html(ideologyTooltip);
} else {
$("#tooltipIdeology")
.html("<strong>No Ideology Score</strong>");
}

$("#tooltipIdeology").removeClass().addClass("d3-tip");
$("#tooltipIdeology")
.css("left",
($(this).children(".ideology").offset().left -
$("#tooltipIdeology").width() - 25) + "px");
// Pin a tooltip to this row. (Previously used $(this) inside an
// arrow function, which doesn't rebind `this` -- it referred to
// whatever `this` was outside, not the row, so .offset() threw and
// the tooltip never actually appeared. Use `tr` directly instead,
// which is already the correct row for this closure.)
function showDistrictRowTooltip() {
$("#tooltipIdeology").html("");
const ideologyTooltip = `<strong>DW-NOMINATE</strong>: \
${v["nominate"]["dim1"]}<br/><small>Scores from \
-1 (Very Liberal) to 1 (Very Conservative)</small>`;
if (v["nominate"] != undefined) {
$("#tooltipIdeology").html(ideologyTooltip);
} else {
$("#tooltipIdeology")
.css("top", $(this).offset().top + "px");
$("#tooltipIdeology")
.css("visibility", "visible");
});
tr.on("mouseout", () => {
$("#tooltipIdeology").css("visibility", "hidden");
});
})(v);
.html("<strong>No Ideology Score</strong>");
}

$("#tooltipIdeology").removeClass().addClass("d3-tip");
$("#tooltipIdeology")
.css("left",
(tr.children(".ideology").offset().left -
$("#tooltipIdeology").width() - 25) + "px");
$("#tooltipIdeology")
.css("top", tr.offset().top + "px");
$("#tooltipIdeology")
.css("visibility", "visible");
}
// Touch has no hover, but doesn't need a tap-to-show alternative here
// the way the other tooltip sites do: this row is a full navigation
// link (see the click handler above), so a tap already takes a touch
// user to this member's own page -- with the same ideology score in
// fuller context -- before a tooltip could matter.
tr.on("mouseover", showDistrictRowTooltip);
tr.on("mouseout", hideDistrictRowTooltip);

tr.appendTo(tbody);

Expand Down