8a3891b32fa630eddb3808ab704836d5c9e1ffe8 larrym Sun Jul 10 20:58:40 2011 -0700 move javascript globals from hiddens to an object diff --git src/hg/js/hgTracks.js src/hg/js/hgTracks.js index 0eb6a12..3f4f162 100644 --- src/hg/js/hgTracks.js +++ src/hg/js/hgTracks.js @@ -1,27 +1,23 @@ // Javascript for use in hgTracks CGI var debug = false; var originalPosition; var originalSize; var originalCursor; var originalMouseOffset = {x:0, y:0}; -var clickClipHeight; -var revCmplDisp; -var insideX; var startDragZoom = null; -var newWinWidth; var imageV2 = false; var imgBoxPortal = false; var blockUseMap = false; var mapItems; var trackImg; // jQuery element for the track image var trackImgTbl; // jQuery element used for image table under imageV2 var imgAreaSelect; // jQuery element used for imgAreaSelect var originalImgTitle; var autoHideSetting = true; // Current state of imgAreaSelect autoHide setting var selectedMenuItem; // currently choosen context menu item (via context menu). var browser; // browser ("msie", "safari" etc.) var mapIsUpdateable = true; var currentMapItem; var floatingMenuItem; var visibilityStrsOrder = new Array("hide", "dense", "full", "pack", "squish"); // map browser numeric visibility codes to strings @@ -113,122 +109,112 @@ if(size) { $('#size').text(size); } } function checkPosition(img, selection) { // return true if user's selection is still w/n the img (including some slop). var imgWidth = jQuery(img).width(); var imgHeight = jQuery(img).height(); var imgOfs = jQuery(img).offset(); var slop = 10; // We ignore clicks in the gray tab and track title column (we really should suppress all drag activity there, // but I don't know how to do that with imgAreaSelect). - var leftX = revCmplDisp ? imgOfs.left - slop : imgOfs.left + insideX - slop; - var rightX = revCmplDisp ? imgOfs.left + imgWidth - insideX + slop : imgOfs.left + imgWidth + slop; + var leftX = hgTracks.revCmplDisp ? imgOfs.left - slop : imgOfs.left + hgTracks.insideX - slop; + var rightX = hgTracks.revCmplDisp ? imgOfs.left + imgWidth - hgTracks.insideX + slop : imgOfs.left + imgWidth + slop; return (selection.event.pageX >= leftX) && (selection.event.pageX < rightX) && (selection.event.pageY >= (imgOfs.top - slop)) && (selection.event.pageY < (imgOfs.top + imgHeight + slop)); } function pixelsToBases(img, selStart, selEnd, winStart, winEnd) // Convert image coordinates to chromosome coordinates { -var insideX = parseInt(document.getElementById("hgt.insideX").value); -var imgWidth = jQuery(img).width() - insideX; -var width = winEnd - winStart; +var imgWidth = jQuery(img).width() - hgTracks.insideX; +var width = hgTracks.winEnd - hgTracks.winStart; var mult = width / imgWidth; // mult is bp/pixel multiplier var startDelta; // startDelta is how many bp's to the right/left -if(revCmplDisp) { +if(hgTracks.revCmplDisp) { var x1 = Math.min(imgWidth, selStart); startDelta = Math.floor(mult * (imgWidth - x1)); } else { - var x1 = Math.max(insideX, selStart); - startDelta = Math.floor(mult * (x1 - insideX)); + var x1 = Math.max(hgTracks.insideX, selStart); + startDelta = Math.floor(mult * (x1 - hgTracks.insideX)); } var endDelta; -if(revCmplDisp) { +if(hgTracks.revCmplDisp) { endDelta = startDelta; var x2 = Math.min(imgWidth, selEnd); startDelta = Math.floor(mult * (imgWidth - x2)); } else { - var x2 = Math.max(insideX, selEnd); - endDelta = Math.floor(mult * (x2 - insideX)); + var x2 = Math.max(hgTracks.insideX, selEnd); + endDelta = Math.floor(mult * (x2 - hgTracks.insideX)); } -var newStart = winStart + startDelta; -var newEnd = winStart + 1 + endDelta; +var newStart = hgTracks.winStart + startDelta; +var newEnd = hgTracks.winStart + 1 + endDelta; if(newEnd > winEnd) { newEnd = winEnd; } return {chromStart : newStart, chromEnd : newEnd}; } function selectionPixelsToBases(img, selection) // Convert selection x1/x2 coordinates to chromStart/chromEnd. { -var winStart = parseInt(document.getElementById("hgt.winStart").value); -var winEnd = parseInt(document.getElementById("hgt.winEnd").value); -return pixelsToBases(img, selection.x1, selection.x2, winStart, winEnd); +return pixelsToBases(img, selection.x1, selection.x2, hgTracks.winStart, hgTracks.winEnd); } function updatePosition(img, selection, singleClick) { -var chromName = document.getElementById("hgt.chromName").value; -var winStart = parseInt(document.getElementById("hgt.winStart").value); -var winEnd = parseInt(document.getElementById("hgt.winEnd").value); -var pos = pixelsToBases(img, selection.x1, selection.x2, winStart, winEnd); -if(typeof imgBoxPortalStart != "undefined" && imgBoxPortalStart) { - winStart = imgBoxPortalStart; - winEnd = imgBoxPortalEnd; -} + var pos = pixelsToBases(img, selection.x1, selection.x2, hgTracks.winStart, hgTracks.winEnd); // singleClick is true when the mouse hasn't moved (or has only moved a small amount). if(singleClick) { var center = (pos.chromStart + pos.chromEnd)/2; - pos.chromStart = Math.floor(center - newWinWidth/2); - pos.chromEnd = pos.chromStart + newWinWidth; + pos.chromStart = Math.floor(center - hgTracks.newWinWidth/2); + pos.chromEnd = pos.chromStart + hgTracks.newWinWidth; } -setPositionByCoordinates(chromName, pos.chromStart+1, pos.chromEnd); + setPositionByCoordinates(hgTracks.chromName, pos.chromStart+1, pos.chromEnd); return true; } function selectChange(img, selection) { initVars(); if(selection.x1 != selection.x2) { // TODO: Larry could you examine this? if(checkPosition(img, selection)) { updatePosition(img, selection, false); jQuery('body').css('cursor', originalCursor); } else { jQuery('body').css('cursor', 'not-allowed'); } } return true; } function selectEnd(img, selection) { var now = new Date(); var doIt = false; if(originalCursor != null) jQuery('body').css('cursor', originalCursor); // ignore releases outside of the image rectangle (allowing a 10 pixel slop) if(autoHideSetting && checkPosition(img, selection)) { // ignore single clicks that aren't in the top of the image (this happens b/c the clickClipHeight test in selectStart // doesn't occur when the user single clicks). - doIt = startDragZoom != null || selection.y1 <= clickClipHeight; + doIt = startDragZoom != null || selection.y1 <= hgTracks.clickClipHeight; } if(doIt) { // startDragZoom is null if mouse has never been moved if(updatePosition(img, selection, (selection.x2 == selection.x1) || startDragZoom == null || (now.getTime() - startDragZoom) < 100)) { jQuery('body').css('cursor', 'wait'); document.TrackHeaderForm.submit(); } } else { setPosition(originalPosition, originalSize); originalPosition = originalSize = null; // if(mapHtml) { // $('#map').append(mapHtml); // } } // mapHtml = null; @@ -282,71 +268,62 @@ function (e) { mapEvent(e); } ); trackImg.mousedown( function (e) { mapMouseDown(e); } ); } } }); function loadImgAreaSelect(firstTime) { - var rulerEle = document.getElementById("hgt.rulerClickHeight"); - var dragSelectionEle = document.getElementById("hgt.dragSelection"); - // disable if ruler is not visible. - if((dragSelectionEle != null) && (dragSelectionEle.value == '1') && (rulerEle != null)) { + if(typeof(hgTracks) != "undefined" && hgTracks.dragSelection && hgTracks.rulerClickHeight > 0) { var imgHeight = 0; trackImg = $('#img_data_ruler'); if(trackImg == undefined || trackImg.length == 0) { // Revert to old imageV1 trackImg = $('#trackMap'); imgHeight = jQuery(trackImg).height(); } else { imageV2 = true; trackImgTbl = $('#imgTbl'); imgHeight = trackImg.height(); // XXXX Tim, I think we should get height from trackImgTbl, b/c it automatically adjusts as we add/delete items. imgHeight = trackImgTbl.height(); } - clickClipHeight = parseInt(rulerEle.value); - newWinWidth = parseInt(document.getElementById("hgt.newWinWidth").value); - revCmplDisp = parseInt(document.getElementById("hgt.revCmplDisp").value) == 0 ? false : true; - insideX = parseInt(document.getElementById("hgt.insideX").value); - imgAreaSelect = jQuery((trackImgTbl || trackImg).imgAreaSelect({ selectionColor: 'blue', outerColor: '', minHeight: imgHeight, maxHeight: imgHeight, onSelectStart: selectStart, onSelectChange: selectChange, onSelectEnd: selectEnd, autoHide: autoHideSetting, movable: false, - clickClipHeight: clickClipHeight})); + clickClipHeight: hgTracks.rulerClickHeight})); } } function makeItemsEnd(img, selection) { var image = $(img); var imageId = image.attr('id'); var trackName = imageId.substring('img_data_'.length); -var chrom = document.getElementById("hgt.chromName").value; var pos = selectionPixelsToBases(image, selection); var command = document.getElementById('hgt_doJsCommand'); -command.value = "makeItems " + trackName + " " + chrom + " " + pos.chromStart + " " + pos.chromEnd; +command.value = "makeItems " + trackName + " " + hgTracks.chromName + " " + pos.chromStart + " " + pos.chromEnd; document.TrackHeaderForm.submit(); return true; } function setUpMakeItemsDrag(trackName) { // Set up so that they can drag out to define a new item on a makeItems track. var img = $("#img_data_" + trackName); if(img != undefined && img.length != 0) { var trackImgTbl = $('#imgTbl'); var imgHeight = trackImgTbl.height(); jQuery(img.imgAreaSelect( { selectionColor: 'green', outerColor: '', minHeight: imgHeight, maxHeight: imgHeight, onSelectEnd: makeItemsEnd, autoHide: true, movable: false})); } @@ -473,33 +450,31 @@ if( isWithin(chr.left,pxUp,chr.right+1) ) { selRange.beg = convertToBases(pxDown); selRange.end = convertToBases(pxUp); if(Math.abs(selRange.end - selRange.beg) < 20) mouseHasMoved = false; // Drag so small: treat as simple click else dontAsk = false; } //else warn("chromIdeo("+chr.name+") NOT WITHIN HORIZONTAL RANGE\n selected range (pix):"+pxDown+"-"+pxUp+" chrom range (pix):"+chr.left+"-"+chr.right); } if(mouseHasMoved == false) { // Not else because small drag turns this off hiliteShow(pxUp,pxUp); - var curBeg = parseInt($("#hgt\\.winStart").val()); // Note the escaped '.' - var curEnd = parseInt($("#hgt\\.winEnd").val()); - var curWidth = curEnd - curBeg; + var curWidth = hgTracks.winEnd - hgTracks.winStart; selRange.beg = convertToBases(pxUp) - Math.round(curWidth/2); // Notice that beg is based upon up position selRange.end = selRange.beg + curWidth; } if(selRange.end > -1) { // prompt, then submit for new position selRange = rangeNormalizeToChrom(selRange,chr); if(mouseHasMoved == false) { // Update highlight by converting bp back to pix pxDown = convertFromBases(selRange.beg) pxUp = convertFromBases(selRange.end) hiliteShow(pxDown,pxUp); } //if((selRange.end - selRange.beg) < 50000) // dontAsk = true; if(dontAsk || confirm("Jump to new position:\n\n"+chr.name+":"+commify(selRange.beg)+"-"+commify(selRange.end)+" size:"+commify(selRange.width)) ) { setPositionByCoordinates(chr.name, selRange.beg, selRange.end) @@ -1073,31 +1048,31 @@ // Updates the 'position/search" display with change due to panning var portalWidthBases = imgBoxPortalEnd - imgBoxPortalStart; var portalScrolledX = (imgBoxPortalOffsetX+imgBoxLeftLabel) + newOffsetX; var newPortalStart = imgBoxPortalStart - Math.round(portalScrolledX*imgBoxBasesPerPixel); // As offset goes down, bases seen goes up! if( newPortalStart < imgBoxChromStart && bounded) // Stay within bounds newPortalStart = imgBoxChromStart; var newPortalEnd = newPortalStart + portalWidthBases; if( newPortalEnd > imgBoxChromEnd && bounded) { newPortalEnd = imgBoxChromEnd; newPortalStart = newPortalEnd - portalWidthBases; } if(newPortalStart > 0) { // XXXX ? imgBoxPortalStart = newPortalStart; // XXXX ? imgBoxPortalEnd = newPortalEnd; - var newPos = document.getElementById("hgt.chromName").value + ":" + commify(newPortalStart) + "-" + commify(newPortalEnd); + var newPos = hgTracks.chromName + ":" + commify(newPortalStart) + "-" + commify(newPortalEnd); setPosition(newPos, (newPortalEnd - newPortalStart + 1)); } return true; } function mapTopAndBottom(mapName,left,right) { // Find the top and bottom px given left and right boundaries var span = { top: -10, bottom: -10 }; var items = $("map[name='"+mapName+"']").children(); if($(items).length>0) { $(items).each(function(t) { var loc = this.coords.split(","); var aleft = parseInt(loc[0]); var aright = parseInt(loc[2]); if(aleft < right && aright >= left) { @@ -1593,31 +1568,31 @@ function contextMenuHitFinish(menuItemClicked, menuObject, cmd, args) { // dispatcher for context menu hits var id = selectedMenuItem.id; if(menuObject.shown) { // showWarning("Spinning: menu is still shown"); setTimeout(function() { contextMenuHitFinish(menuItemClicked, menuObject, cmd); }, 10); return; } if(cmd == 'selectWholeGene' || cmd == 'getDna') { // bring whole gene into view or redirect to DNA screen. var href = selectedMenuItem.href; var chromStart, chromEnd; var a = /hgg_chrom=(\w+)&/.exec(href); // Many links leave out the chrom (b/c it's in the server side cart as "c") - var chrom = document.getElementById("hgt.chromName").value; + var chrom = hgTracks.chromName; if(a) { if(a && a[1]) chrom = a[1]; a = /hgg_start=(\d+)/.exec(href); if(a && a[1]) // XXXX does chromStart have to be incremented by 1? chromStart = a[1]; a = /hgg_end=(\d+)/.exec(href); if(a && a[1]) chromEnd = a[1]; } else { // a = /hgc.*\W+c=(\w+)/.exec(href); a = /hgc.*\W+c=(\w+)/.exec(href); if(a && a[1]) chrom = a[1]; @@ -2503,35 +2478,36 @@ } } else { if(imageV2) { // We update row's one at a time (updating the whole imgTable at one time doesn't work in IE). for (id in trackDbJson) { if(!updateTrackImgForId(response, id)) { showWarning("Couldn't parse out new image for id: " + id); //alert("Couldn't parse out new image for id: " + id+"BR"+response); // Very helpful } } // parse out and reset position info. a = /<INPUT [^>]*NAME=["']position['"] VALUE=['"]([^'"]+)/.exec(response); if(a != null && a[1] != null) { var o = parsePosition(a[1]); setPosition(a[1], commify(o.end - o.start + 1)); - $("#hgt\\.winStart").val(o.start - 1); - $("#hgt\\.winEnd").val(o.end); + hgTracks.winStart = o.start - 1; + hgTracks.winEnd = o.end; } else { showWarning("Couldn't parse out new position info"); } + abort("This is broken (needs to be fixed to pull new variable values out of the response)"); a = /<input [^>]*id=["']hgt\.newWinWidth['"][^>]*value=['"]([^'"]+)/.exec(response); if(a != null && a[1] != null) { $("#hgt\\.newWinWidth").val(a[1]); } afterImgTblReload(); } else { a= /<IMG([^>]+SRC[^>]+id='trackMap[^>]*)>/.exec(response); // Deal with a is null if(a[1]) { var b = /WIDTH\s*=\s*['"]?(\d+)['"]?/.exec(a[1]); var width = b[1]; b = /HEIGHT\s*=\s*['"]?(\d+)['"]?/.exec(a[1]); var height = b[1]; b = /SRC\s*=\s*"([^")]+)"/.exec(a[1]); var src = b[1];