src/hg/js/hgTracks.js 1.48
1.48 2009/12/09 03:31:09 tdreszer
Checkin for FLAT_TRACKS for dragReorder. Also several other features worked out or cleaned up
Index: src/hg/js/hgTracks.js
===================================================================
RCS file: /projects/compbio/cvsroot/kent/src/hg/js/hgTracks.js,v
retrieving revision 1.47
retrieving revision 1.48
diff -b -B -U 4 -r1.47 -r1.48
--- src/hg/js/hgTracks.js 23 Nov 2009 07:56:56 -0000 1.47
+++ src/hg/js/hgTracks.js 9 Dec 2009 03:31:09 -0000 1.48
@@ -329,21 +329,10 @@
});
return false;
}
-function imgTblSetOrder(table)
-{
-// Sets the 'order' value for the image table after a drag reorder
- $("input[name$='_imgOrd']").each(function (i) {
- var tr = $(this).parents('tr');
- if($(this).val() != $(tr).attr('rowIndex')) {
- //alert('Reordered '+$(this).val() + " to "+$(tr).attr('rowIndex'));
- $(this).val($(tr).attr('rowIndex'));
- }
- });
-}
-
/////////////////////////////////////////////////////
+// Chrom Drag/Zoom/Expand code
jQuery.fn.chromDrag = function(){
this.each(function(){
// Plan:
// mouseDown: determine where in map: convert to img location: pxDown
@@ -365,9 +354,9 @@
findDimensions();
if(chr.top == -1)
- alert("chromIdeo(): failed to register "+this.id);
+ warn("chromIdeo(): failed to register "+this.id);
else {
hiliteSetup();
$('.cytoBand').mousedown( function(e)
@@ -414,9 +403,9 @@
updateImgOffsets();
var bands;
var pxUp = e.clientX - img.scrolledLeft;
var pxY = e.clientY - img.scrolledTop;
- //alert("chromIdeo("+chr.name+") selected range (pix):"+pxDown+"-"+pxUp+" chrom range (pix):"+chr.left+"-"+chr.right+" chrom range (bp):"+chr.name+":"+chr.beg+"-"+chr.end);
+ //warn("chromIdeo("+chr.name+") selected range (pix):"+pxDown+"-"+pxUp+" chrom range (pix):"+chr.left+"-"+chr.right+" chrom range (bp):"+chr.name+":"+chr.beg+"-"+chr.end);
if(isWithin(0,pxY,img.height)) { // within vertical range or else cancel
var selRange = { beg: -1, end: -1, width: -1 };
var dontAsk = true;
@@ -447,9 +436,9 @@
mouseHasMoved = false; // Drag so small: treat as simple click
else
dontAsk = false;
}
- //else alert("chromIdeo("+chr.name+") NOT WITHIN HORIZONTAL RANGE\n selected range (pix):"+pxDown+"-"+pxUp+" chrom range (pix):"+chr.left+"-"+chr.right);
+ //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);
@@ -474,9 +463,9 @@
return true; // Make sure the setTimeout below is not called.
}
}
}
- //else alert("chromIdeo("+chr.name+") NOT WITHIN VERTICAL RANGE\n selected range (pix):"+pxDown+"-"+pxUp+" chrom range (pix):"+chr.left+"-"+chr.right+"\n cytoTop-Bottom:"+chr.top +"-"+chr.bottom);
+ //else warn("chromIdeo("+chr.name+") NOT WITHIN VERTICAL RANGE\n selected range (pix):"+pxDown+"-"+pxUp+" chrom range (pix):"+chr.left+"-"+chr.right+"\n cytoTop-Bottom:"+chr.top +"-"+chr.bottom);
hiliteCancel();
setTimeout('blockUseMap=false;',50);
}
mouseIsDown = false;
@@ -657,8 +646,102 @@
}
});
}
/////////////////////////////////////////////////////
+// Drag Reorder Code
+function imgTblSetOrder(table)
+{
+// Sets the 'order' value for the image table after a drag reorder
+ $("input[name$='_imgOrd']").each(function (i) {
+ var tr = $(this).parents('tr');
+ if($(this).val() != $(tr).attr('rowIndex')) {
+ //warn('Reordered '+$(this).val() + " to "+$(tr).attr('rowIndex'));
+ $(this).val($(tr).attr('rowIndex'));
+ }
+ });
+}
+
+function imgTblZipButtons(table)
+{
+// Goes through the image and binds composite track buttons when adjacent
+ var rows = $(table).find('tr');
+ var lastClass="";
+ var lastBtn;
+ var lastMatchesLast=false;
+ var lastBlue=true;
+ var altColors=false;
+ var count=0;
+ var countN=0;
+ for(var ix=0;ix<rows.length;ix++) { // Need to have buttons in order
+ var btn = $( rows[ix] ).find("p.btn");
+ var classList = $( btn ).attr("class").split(" ");
+ var curMatchesLast=(classList[0] == lastClass);
+ if(lastBtn != undefined) {
+ $( lastBtn ).removeClass('btnN btnU btnL btnD');
+ if(curMatchesLast && lastMatchLast) {
+ $( lastBtn ).addClass('btnL');
+ } else if(lastMatchLast) {
+ $( lastBtn ).addClass('btnU');
+ } else if(curMatchesLast) {
+ $( lastBtn ).addClass('btnD');
+ } else {
+ $( lastBtn ).addClass('btnN');
+ countN++;
+ }
+ count++;
+ if(altColors) {
+ lastBlue = (lastMatchLast == lastBlue); // lastMatch and lastBlue or not lastMatch and notLastBlue
+ if(lastBlue) // Too smart by 1/3rd
+ $( lastBtn ).addClass( 'btnBlue' );
+ else
+ $( lastBtn ).removeClass( 'btnBlue' );
+ }
+ }
+ lastMatchLast = curMatchesLast;
+ lastClass = classList[0];
+ lastBtn = btn;
+ }
+ if(lastBtn != undefined) {
+ $( lastBtn ).removeClass('btnN btnU btnL btnD');
+ if(lastMatchLast) {
+ $( btn).addClass('btnU');
+ } else {
+ $( lastBtn ).addClass('btnN');
+ countN++;
+ }
+ if(altColors) {
+ lastBlue = (lastMatchLast == lastBlue); // lastMatch and lastBlue or not lastMatch and notLastBlue
+ if(lastBlue) // Too smart by 1/3rd
+ $( lastBtn ).addClass( 'btnBlue' );
+ else
+ $( lastBtn ).removeClass( 'btnBlue' );
+ }
+ count++;
+ }
+ //warn("Zipped "+count+" buttons "+countN+" are independent.");
+}
+
+function imgTblButtonMouseOver()
+{
+// Highlights a composite set of buttons, regarless of whether tracks are adjacent
+ var classList = $( this ).attr("class").split(" ");
+ var btns = $( "p." + classList[0] )
+ $( btns ).removeClass('btnGrey');
+ $( btns ).addClass('btnBlue');
+}
+
+function imgTblButtonMouseOut()
+{
+// Ends compositre highlighting by mouse over
+ var classList = $( this ).attr("class").split(" ");
+ var btns = $( "p." + classList[0] )
+ $( btns ).removeClass('btnBlue');
+ $( btns ).addClass('btnGrey');
+}
+
+
+/////////////////////////////////////////////////////
+// Drag Scroll code
jQuery.fn.panImages = function(imgOffset,imgBoxLeftOffset){
this.each(function(){
var pic;
@@ -731,8 +814,10 @@
} else
newX = prevX + relativeX;
$(".panImg").css( {'left': newX.toString() + "px" });
+ $('.tdData').css( {'backgroundPosition': newX.toString() + "px" } );
+ //$('#imgTbl').css( {backgroundPosition: newX.toString() +"px " + newY.toString() + "px"} )
// Now is the time to get left-right, then march through data images to trim horizontal
panUpdatePosition(newX);
}
}
@@ -836,14 +921,18 @@
if( side.length > 0) {
$(side).parent().height( span.bottom - span.top + titlePx);
$(side).css( {'top': top.toString() + "px" });
}
- var btn = $("#img_btn_"+imgId[2]);
+ var btn = $("#p_btn_"+imgId[2]);
+ if( btn.length > 0) {
+ $(btn).height( span.bottom - span.top + titlePx);
+ } else {
+ btn = $("#img_btn_"+imgId[2]);
if( btn.length > 0) {
$(btn).parent().height( span.bottom - span.top + titlePx);
$(btn).css( {'top': top.toString() + "px" });
}
-
+ }
}
}
});
}
@@ -872,41 +961,65 @@
thisForm=$("FORM");
if($(thisForm).length > 1)
thisForm=$(thisForm)[0];
if(thisForm != undefined && $(thisForm).length == 1) {
- //alert("posting form:"+$(thisForm).attr('name'));
+ //warn("posting form:"+$(thisForm).attr('name'));
return postTheForm($(thisForm).attr('name'),this.href);
}
return true;
});
}
+ if($('#pdfLink').length == 1) {
+ $('#pdfLink').click(function(i) {
+ var thisForm=$('#TrackForm');
+ if(thisForm != undefined && $(thisForm).length == 1) {
+ //alert("posting form:"+$(thisForm).attr('name'));
+ updateOrMakeNamedVariable($(thisForm),'hgt.psOutput','on');
+ return postTheForm($(thisForm).attr('name'),this.href);
+ }
+ return true;
+ });
+ }
if($('#imgTbl').length == 1) {
imageV2 = true;
+ var btns = $("p.btn");
+ if(btns.length > 0) {
+ imgTblZipButtons($('#imgTbl'));
+ $(btns).mouseover( imgTblButtonMouseOver );
+ $(btns).mouseout( imgTblButtonMouseOut );
+ $(btns).show();
+ }
// Make imgTbl allow draw reorder of imgTrack rows
- if($(".tableWithDragAndDrop").length > 0) {
- $(".tableWithDragAndDrop").tableDnD({
+ var imgTable = $(".tableWithDragAndDrop");
+ if($(imgTable).length > 0) {
+ $(imgTable).tableDnD({
onDragClass: "trDrag",
dragHandle: "dragHandle",
onDragStart: function(table, row) {
$(document).bind('mousemove',blockTheMap);
},
- onDrop: function(table, row) {
- if(imgTblSetOrder) { imgTblSetOrder(table); }
+ onDrop: function(table, row, dragStartIndex) {
+ if($(row).attr('rowIndex') != dragStartIndex) {
+ if(imgTblSetOrder) {
+ imgTblSetOrder(table);
+ }
+ imgTblZipButtons( table );
+ }
$(document).unbind('mousemove',blockTheMap);
setTimeout('blockUseMap=false;',50); // Necessary incase the selectEnd was over a map item. select takes precedence.
}
});
}
if(imgBoxPortal) {
- //alert("imgBox("+imgBoxChromStart+"-"+imgBoxChromEnd+","+imgBoxWidth+") bases/pix:"+imgBoxBasesPerPixel+"\nportal("+imgBoxPortalStart+"-"+imgBoxPortalEnd+","+imgBoxPortalWidth+") offset:"+imgBoxPortalOffsetX);
+ //warn("imgBox("+imgBoxChromStart+"-"+imgBoxChromEnd+","+imgBoxWidth+") bases/pix:"+imgBoxBasesPerPixel+"\nportal("+imgBoxPortalStart+"-"+imgBoxPortalEnd+","+imgBoxPortalWidth+") offset:"+imgBoxPortalOffsetX);
// Turn on drag scrolling.
$("div.scroller").panImages(imgBoxPortalOffsetX,imgBoxLeftLabel);
}
// Temporary warning while new imageV2 code is being worked through
if($('#map').children("AREA").length > 0) {
- alert('Using imageV2, but old map is not empty!');
+ warn('Using imageV2, but old map is not empty!');
}
}
if($('img#chrom').length == 1) {
if($('.cytoBand').length > 1) {
@@ -918,11 +1031,11 @@
////////// Attempts to get back button to work with us
//window.onload = function () {
// // Requires "Signed Scripts" and "UniversalBrowserRead" http://www.mozilla.org/projects/security/components/signed-scripts.html
// if(window.history.next != undefined && window.history.next.length > 10) {
-// alert("Not at the end of time.");
+// warn("Not at the end of time.");
// } else
-// alert("At the end of time.");
+// warn("At the end of time.");
//}
function rulerModeToggle (ele)
{
@@ -941,13 +1054,13 @@
// XXXX still trying to figure this out.
var pos = $(e.target).position();
if(e.target.tagName == "IMG") {
// msie
- // alert("img: x: " + x + ", y:" + y);
- // alert("pageX: " + e.pageX + "; offsetLeft: " + pos.left);
+ // warn("img: x: " + x + ", y:" + y);
+ // warn("pageX: " + e.pageX + "; offsetLeft: " + pos.left);
x = e.pageX - pos.left;
y = e.pageY - pos.top;
- // alert("x: " + x + "; y: " + y);
+ // warn("x: " + x + "; y: " + y);
} else {
x = e.pageX - trackImg.attr("offsetLeft");
y = e.pageY - trackImg.attr("offsetTop");
}
@@ -1240,9 +1353,9 @@
// XXXX? blockUseMap = true;
},
hideCallback: function() {
// this doesn't work
- alert("hideCallback");
+ warn("hideCallback");
}
});
return;
}