src/hg/js/hgTracks.js 1.32
1.32 2009/08/13 06:47:10 larrym
move getHgsid code to utils.js
Index: src/hg/js/hgTracks.js
===================================================================
RCS file: /projects/compbio/cvsroot/kent/src/hg/js/hgTracks.js,v
retrieving revision 1.31
retrieving revision 1.32
diff -b -B -U 4 -r1.31 -r1.32
--- src/hg/js/hgTracks.js 17 Jul 2009 18:19:22 -0000 1.31
+++ src/hg/js/hgTracks.js 13 Aug 2009 06:47:10 -0000 1.32
@@ -5,13 +5,18 @@
var originalPosition;
var originalSize;
var clickClipHeight;
var startDragZoom = null;
-//var mapHtml;
+var mapHtml;
+var mapItems;
var newWinWidth;
+var img;
+var imgTitle;
var imageV2 = false;
var imgBoxPortal = false;
var blockUseMap = false;
+var autoHideSetting = true;
+var selectedMapItem; // index of currently choosen map item (via context menu).
function commify (str) {
if(typeof(str) == "number")
str = str + "";
@@ -149,9 +154,9 @@
// ignore releases outside of the image rectangle (allowing a 10 pixel slop)
var slop = 10;
var now = new Date();
var doIt = false;
- if((selection.event.pageX >= (imgOfs.left - slop)) && (selection.event.pageX < (imgOfs.left + imgWidth + slop))
+ if(autoHideSetting && (selection.event.pageX >= (imgOfs.left - slop)) && (selection.event.pageX < (imgOfs.left + imgWidth + slop))
&& (selection.event.pageY >= (imgOfs.top - slop)) && (selection.event.pageY < (imgOfs.top + imgHeight + slop))) {
// 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;
@@ -169,9 +174,9 @@
// }
}
// mapHtml = null;
startDragZoom = null;
- setTimeout('blockUseMap=false;',50); // Necessary incase the selectEnd was over a map item. select takes precedence.
+ setTimeout('blockUseMap=false; loadContextMenu(img);',50); // Necessary incase the selectEnd was over a map item. select takes precedence.
return true;
}
$(window).load(function () {
@@ -181,9 +186,22 @@
// disable if ruler is not visible.
if((dragSelectionEle != null) && (dragSelectionEle.value == '1') && (rulerEle != null)) {
var imgHeight = 0;
var imgWidth = 0;
- var img = $('#img_data_ruler');
+ img = $('#img_data_ruler');
+ mapItems = new Array();
+ var i = 0;
+ $('#map').children().each(function() {
+ mapItems[i++] = {
+ coords : this.coords,
+ href : this.href,
+ title : this.title,
+ id : this.id
+ };
+ });
+ mapHtml = $('#map').html();
+ $('#map').empty();
+
if(img==undefined || img.length == 0) { // Revert to old imageV1
img = $('#trackMap');
imgHeight = jQuery(img).height();
imgWidth = jQuery(img).width();
@@ -191,15 +209,28 @@
imageV2 = true;
imgHeight = $('#imgTbl').height();
imgWidth = $('#td_data_ruler').width();
}
+ img.mousemove(
+ function (e) {
+ mapEvent(e);
+ }
+ );
+ img.mousedown(
+ function (e) {
+ mapMouseDown(e);
+ }
+ );
+ imgTitle = img.attr("title");
+ loadContextMenu(img);
+ // http://www.trendskitchens.co.nz/jquery/contextmenu/
clickClipHeight = parseInt(rulerEle.value);
newWinWidth = parseInt(document.getElementById("hgt.newWinWidth").value);
img.imgAreaSelect({ selectionColor: 'blue', outerColor: '',
minHeight: imgHeight, maxHeight: imgHeight,
onSelectStart: selectStart, onSelectChange: selectChange, onSelectEnd: selectEnd,
- autoHide: true, movable: false,
+ autoHide: autoHideSetting, movable: false,
clickClipHeight: clickClipHeight});
}
});
@@ -375,9 +406,9 @@
$(document).ready(function()
{
// Convert map AREA gets to post the form, ensuring that cart variables are kept up to date
if($("FORM").length > 0) {
- $('a,area').not("[href*='#']").filter("[target='']").click(function(i) {
+ $('a,area').not("[href*='#']").filter("[target='foo']").click(function(i) {
if(blockUseMap==true) {
return false;
}
var thisForm=$(this).parents('form');
@@ -421,4 +452,206 @@
alert('Using imageV2, but old map is not empty!');
}
}
});
+
+function rulerModeToggle (ele)
+{
+ autoHideSetting = !ele.checked;
+ var obj = jQuery(img).data('imgAreaSelect');
+ obj.setOptions({autoHide : autoHideSetting});
+}
+
+function findMapItem(e)
+{
+ var x = e.pageX - e.target.offsetLeft;
+ var y = e.pageY - e.target.offsetTop;
+ var retval = -1;
+ for(var i=0;i<mapItems.length;i++)
+ {
+ var coords = mapItems[i].coords.split(",");
+ if(x >= coords[0] && x <= coords[2] && y >= coords[1] && y <= coords[3]) {
+ retval = i;
+ }
+ }
+ return retval;
+}
+
+function mapEvent(e)
+{
+ var now = new Date();
+ var i = findMapItem(e);
+ if(i >= 0)
+ {
+ e.target.title = mapItems[i].title;
+ } else {
+ // XXXX this doesn't work.
+ // $('#myMenu').html("<ul id='myMenu' class='contextMenu'><li class='edit'><a href='#img'>Get Image</a></li></ul>");
+ e.target.title = imgTitle;
+ }
+ lastSet = now;
+}
+
+function mapMouseDown(e)
+{
+ // XXXX The rightclick logic works (but I don't know why).
+ var rightclick = e.which ? (e.which == 3) : (e.button == 2);
+ if(rightclick)
+ {
+ return false;
+ } else {
+ var i = findMapItem(e);
+ if(i >= 0)
+ {
+ window.location = mapItems[i].href;
+ }
+ return true;
+ }
+}
+
+function contextMenuHit(ele, cmd)
+{
+ $("select[name=" + mapItems[selectedMapItem].id + "]").each(function(t) {
+ $(this).val(cmd);
+ });
+ document.TrackForm.submit();
+}
+
+function loadContextMenu(img)
+{
+ img.contextMenu("myMenu", {
+ menuStyle: {
+ width: '100%'
+ },
+ bindings: {
+ 'hide': function(t) {
+ contextMenuHit(t, 'hide');
+ },
+ 'dense': function(t) {
+ contextMenuHit(t, 'dense');
+ },
+ 'pack': function(t) {
+ contextMenuHit(t, 'pack');
+ },
+ 'squish': function(t) {
+ contextMenuHit(t, 'squish');
+ },
+ 'full': function(t) {
+ contextMenuHit(t, 'full');
+ },
+ 'dragZoomMode': function(t) {
+ autoHideSetting = true;
+ var obj = jQuery(img).data('imgAreaSelect');
+ obj.setOptions({autoHide : true, movable: false});
+ },
+ 'hilightMode': function(t) {
+ autoHideSetting = false;
+ var obj = jQuery(img).data('imgAreaSelect');
+ obj.setOptions({autoHide : false, movable: true});
+ },
+ 'getImg': function(t) {
+ window.open(img.attr('src'));
+ },
+ 'selectWholeGene': function(t) {
+ // bring whole gene into view
+ var href = mapItems[selectedMapItem].href;
+ var chrom, chromStart, chromEnd;
+ var a = /hgg_chrom=(\w+)&/(href);
+ chrom = a[1];
+ a = /hgg_start=(\d+)&/(href);
+ chromStart = a[1];
+ a = /hgg_end=(\d+)&/(href);
+ chromEnd = a[1];
+ setPosition(chrom + ":" + chromStart + "-" + chromEnd, null);
+ document.TrackHeaderForm.submit();
+ },
+ 'hgTrackUi': function(t) {
+ // data: ?
+ $.ajax({
+ type: "GET",
+ url: "../cgi-bin/hgTrackUi?ajax=1&g=" + mapItems[selectedMapItem].id + "&hgsid=" + getHgsid(),
+ dataType: "html",
+ trueSuccess: handleTrackUi,
+ success: catchErrorOrDispatch,
+ cache: true
+ });
+ }
+ },
+ onContextMenu: function(e) {
+ var i = findMapItem(e);
+ var html = "<div id='myMenu' class='contextMenu'><ul>";
+ if(i >= 0)
+ {
+ selectedMapItem = i;
+ var href = mapItems[i].href;
+ var isGene = /hgGene/(href);
+
+ var select = $("select[name=" + mapItems[selectedMapItem].id + "]");
+ var cur = select.val();
+ if(cur) {
+ select.children().each(function(index, o) {
+ var title = $(this).val();
+ html += "<li id='" + title + "'>" + title;
+ if(title == cur) {
+ html += " <img src='../images/Green_check.png' height='20' width='20' />";
+ }
+ html += "</li>";
+ });
+ if(isGene) {
+ html += "<li id='selectWholeGene'>Show whole gene</li>";
+ } else {
+ html += "<li id='hgTrackUi'>" + mapItems[i].title + "</li>";
+ }
+ } else {
+ return false;
+ }
+ } else {
+ html += "<li id='dragZoomMode'>drag-and-zoom mode";
+ if(autoHideSetting) {
+ html += " <img src='../images/Green_check.png' height='20' width='20' />";
+ }
+ html += "</li>";
+ html += "<li id='hilightMode'>hilight mode";
+ if(!autoHideSetting) {
+ html += " <img src='../images/Green_check.png' height='20' width='20' />";
+ }
+ html += "</li>";
+ html += "<li id='getImg'>Download image</li>";
+ }
+ html += "</ul></div>";
+ $('#myMenu').html(html);
+ return true;
+ }
+ });
+}
+
+function catchErrorOrDispatch(obj,status)
+{
+ if(obj.err)
+ {
+ $("#warningText").text(obj.err);
+ $("#warning").show();
+ }
+ else
+ this.trueSuccess(obj,status);
+}
+
+function handleTrackUi(response, status)
+{
+ // $('#hgTrackUiDialog').html("<p>Hello world</p><INPUT TYPE=HIDDEN NAME='boolshad.knownGene.label.kgId' VALUE='0'>TEST");
+ $('#hgTrackUiDialog').html(response);
+ $('#hgTrackUiDialog').dialog({
+ bgiframe: true,
+ height: 450,
+ width: 600,
+ modal: true,
+ closeOnEscape: true,
+ autoOpen: false,
+ title: "Track Settings",
+ close: function(){
+ // clear out html after close to prevent problems caused by duplicate html elements
+ $('#hgTrackUiDialog').html("");
+ }
+ });
+
+ $('#hgTrackUiDialog').dialog('open');
+}