ae9a65f97412a6522e2e3ff4c5884895375ca5f2 kate Fri Oct 21 11:14:00 2016 -0700 Fixes to click handling. refs #17369 diff --git src/hg/js/hgGtexTrackSettings.js src/hg/js/hgGtexTrackSettings.js index e459e19..8a9e27a 100644 --- src/hg/js/hgGtexTrackSettings.js +++ src/hg/js/hgGtexTrackSettings.js @@ -30,82 +30,92 @@ // Get tissue name from an SVG id. Convention here is <tis>_* return svgId.split('_')[0]; } function initTissue(tis) { // Set tissue to unhighlighted state $("#" + tis + "_Pic_Hi", _svgRoot).hide(); $("#" + tis + "_Lead_Hi", _svgRoot).hide(); // mark tissue labels in svg var el = _svgDoc.getElementById(tis + "_Text_Hi"); if (el !== null) { el.classList.add('tissueLabel'); } $("#" + tis + "_Aura_Hi", _svgRoot).hide(); + + // force tissue to selected on init (till we have cart hooked up) + //onClickSetTissue(tis); } function highlightTissue(tis) { // } function initBodyMap(svg, doc) { // Set organs to unhighlighted state tissues.forEach(initTissue); } function onClickToggleTissue(tis) { // mark selected in tissue table + tis = this.id; // arg bad $(this).toggleClass('tissueSelected'); // jQuery addClass doesn't work on SVG elements, using classList // May need a shim so this works on IE9 and Opera mini (as if Dec 2014) // https://martinwolf.org/blog/2014/12/adding-and-removing-classes-from-svg-elements-with-jquery var el = _svgDoc.getElementById(this.id + '_Text_Hi'); if (el !== null) { el.classList.toggle('tissueSelected'); + if ($(this).hasClass('tissueSelected')) { + onClickSetTissue(tis); + } else { + onClickClearTissue(tis); + } } } function onMapClickToggleTissue(ev) { var isOn = false; var svgId = ev.target.id; var tis = tissueFromSvgId(svgId); var el = _htmlDoc.getElementById(tis); if (el !== null) { el.classList.toggle('tissueSelected'); } if (el.classList.contains('tissueSelected')) { isOn = true; } // below can likely replace 3 lines after //this.classList.toggle('tissueSelected'); el = _svgDoc.getElementById(svgId); if (el !== null) { el.classList.toggle('tissueSelected'); if (isOn) { el.style.fill = "black"; } else { el.style.fill = "#737373"; } } } + function onClickSetTissue(tis) { // mark selected in tissue table - $(tis).addClass('tissueSelected'); + $('#' + tis).addClass('tissueSelected'); var el = _svgDoc.getElementById(tis + "_Text_Hi"); if (el !== null) { el.classList.add('tissueSelected'); el.style.fill = "black"; var count = el.childElementCount; for (var i = 0; i < count; i++) { el.children[i].style.fill = "black"; } } } function onClickClearTissue(tis) { // mark selected in tissue table $(tis).removeClass('tissueSelected'); var el = _svgDoc.getElementById(tis + "_Text_Hi");