9a3d804d4836f8508ed10a5372e3cc50c4c5ff64 kate Thu Nov 3 20:50:16 2016 -0700 Finish connection to hgTracks; create form and submit button, and get tissues into cart. refs #17369 diff --git src/hg/js/hgGtexTrackSettings.js src/hg/js/hgGtexTrackSettings.js index dbec966..a2194d0 100644 --- src/hg/js/hgGtexTrackSettings.js +++ src/hg/js/hgGtexTrackSettings.js @@ -77,66 +77,75 @@ 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; + onClickSetTissue(tis); + } else { + onClickClearTissue(tis); } // 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 setMapTissueEl(el) { // set label dark 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 onClickSetTissue(tis) { // mark selected in tissue table - $('#' + tis).addClass('tissueSelected'); + var $tis = $('#' + tis); + $tis.addClass('tissueSelected'); + var $checkbox = $('#' + tis + ' > input'); + $checkbox.attr("checked", true); var el = _svgDoc.getElementById(tis + "_Text_Hi"); setMapTissueEl(el); } function onClickClearTissue(tis) { // mark selected in tissue table - $(tis).removeClass('tissueSelected'); + var $tis = $('#' + tis); + $tis.removeClass('tissueSelected'); + var $checkbox = $('#' + tis + ' > input'); + $checkbox.attr("checked", false); 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 toggleHighlightTissue(tis) { var i; var isHovered = false; @@ -264,48 +273,57 @@ // set all on tissue table // NOTE: this shouldn't be needed (needs debugging in onClickSet) $('.tissueLabel').addClass('tissueSelected'); } function onClickClearAll() { tissues.forEach(onClickClearTissue); $('.tissueLabel').removeClass("tissueSelected"); } function onClickMapTissue() { this.style.fill = "black"; //document.getElementById("bodyMapSvg").contentDocument.getElementById('endocervix').style.fill = "black"; } + function submitForm() { + // Submit form from go button (see hgGateway.js) + // Show a spinner -- sometimes it takes a while for hgTracks to start displaying. + $('.jwGoIcon').removeClass('fa-play').addClass('fa-spinner fa-spin'); + $form = $('form'); + $form.submit(); + } + // Initialization function init() { // cart.setCgi('gtexTrackSettings'); $(function() { // after page load, tweak layout and initialize event handlers var bodyMapSvg = document.getElementById("bodyMapSvg"); globalSvg = bodyMapSvg; _htmlDoc = document; _htmlRoot = document.documentElement; // wait for SVG to load bodyMapSvg.addEventListener("load", function() { var svg = bodyMapSvg.contentDocument.documentElement; _svgRoot = svg; _svgDoc = bodyMapSvg.contentDocument; initBodyMap(svg, bodyMapSvg.contentDocument); animateTissues(); }, false); + $('.goButtonContainer').click(submitForm); }); } return { init: init }; }()); // gtexTrackSettings gtexTrackSettings.init();