ced6299cd30cba4ed8cde8b4765bbf08147613f9 kate Fri Oct 21 11:24:22 2016 -0700 Mouseover tissue table now highlights organs in bodymap. refs #17369 diff --git src/hg/js/hgGtexTrackSettings.js src/hg/js/hgGtexTrackSettings.js index 8a9e27a..91e871a 100644 --- src/hg/js/hgGtexTrackSettings.js +++ src/hg/js/hgGtexTrackSettings.js @@ -118,102 +118,80 @@ function onClickClearTissue(tis) { // mark selected in tissue table $(tis).removeClass('tissueSelected'); var el = _svgDoc.getElementById(tis + "_Text_Hi"); if (el !== null) { el.classList.remove('tissueSelected'); el.style.fill = "#737373"; var count = el.childElementCount; for (var i = 0; i < count; i++) { el.children[i].style.fill = "#737373"; } } } - function onMapHoverTissue(ev) { + function toggleHighlightTissue(tis) { var i; var isOn = false; - var svgId = ev.target.id; - var tis = tissueFromSvgId(svgId); var el = _htmlDoc.getElementById(tis); if (el !== null) { el.classList.toggle('tissueHovered'); if (el.classList.contains('tissueHovered')) { isOn = true; } } // below can likely replace 3 lines after //this.classList.toggle('tissueSelected'); el = _svgDoc.getElementById(tis + '_Text_Hi'); - if (el === null) + if (el === null) { return; + } el.classList.toggle('tissueHovered'); var line = $("#" + tis + "_Lead_Hi", _svgRoot); var pic = $("#" + tis + "_Pic_Hi", _svgRoot); var white = $("#" + tis + "_Aura_Hi", _svgRoot); var count = el.childElementCount; if (isOn) { el.style.fill = 'blue'; for (i = 0; i < count; i++) { el.children[i].style.fill = "blue"; } $(line).show(); $(pic).show(); $(white).show(); } else { var color = el.classList.contains('tissueSelected') ? 'black' : '#737373'; el.style.fill = color; for (i = 0; i < count; i++) { el.children[i].style.fill = color; } $(white).hide(); $(pic).hide(); $(line).hide(); } } - function onHoverTissue() { - // HTML - $(this).toggleClass('tissueHovered'); - var isOn = $(this).hasClass('tissueHovered'); - - // SVG - var el = _svgDoc.getElementById(this.id + '_Text_Hi'); - if (el !== null) { - el.classList.toggle('tissueHovered'); - if (this.id === "arteryAorta") { - var line = $("#LL_arteryAorta", _svgRoot); - var white = $("#WHITE_arteryAorta", _svgRoot); - if (isOn) { - $(line).show(); - $(white).show(); - } else { - $(white).hide(); - $(line).hide(); - } -/* - el = _svgDoc.getElementById("LL_arteryAorta"); - if (el !== null) { - el.classList.toggle('mapTissueHovered'); - } - el = _svgDoc.getElementById("WHITE_arteryAorta"); - if (el !== null) { - el.classList.toggle('mapTissueHovered'); -*/ - } + function onMapHoverTissue(ev) { + var svgId = ev.target.id; + var tis = tissueFromSvgId(svgId); + toggleHighlightTissue(tis); } + + function onHoverTissue() { + var tis = this.id; + toggleHighlightTissue(tis); } //function animateTissue(tis, i, ignore) { function animateTissue(tis) { //console.log(tis); // add handlers to tissue table $('#' + tis).click(tis, onClickToggleTissue); $('#' + tis).hover(onHoverTissue, onHoverTissue); var el = _svgDoc.getElementById(tis + "_Text_Hi"); if (el !== null) { el.addEventListener("click", onMapClickToggleTissue); el.addEventListener("mouseenter", onMapHoverTissue); el.addEventListener("mouseleave", onMapHoverTissue); // mouseover, mouseout ?