element of
+ // the track graphic
mouseInTrackImage: function (evt)
{
- ++mouseOver.mouseInTrackCount;
-
-// var msg = ". . . mouseInTrackImage: evt.currentTarget.id: " + evt.currentTarget.id + ", mouseMoveCount: " + mouseOver.mouseMoveCount + ", mouseDelayCount: " + mouseOver.mouseDelayCount + ", mouseInTrackCount: " + mouseOver.mouseInTrackCount;
-// $('#debugMsg').html(msg);
-
// the center label also events here, can't use that
// plus there is a one pixel line under the center label that has no
// id name at all, so verify we are getting the event from the correct
// element.
if (! evt.currentTarget.id.includes("td_data_")) { return; }
var trackName = evt.currentTarget.id.replace("td_data_", "");
if (trackName.length < 1) { return; } // verify valid trackName
// find location of this | slice in the image, this is the track
// image in the graphic, including left margin and center label
// This location follows the window scrolling, could go negative
-// var tdName = "td_data_" + trackName;
var tdId = document.getElementById(evt.currentTarget.id);
var tdRect = tdId.getBoundingClientRect();
var tdLeft = Math.floor(tdRect.left);
var tdTop = Math.floor(tdRect.top);
var tdHeight = Math.floor(tdRect.height);
// find the location of the image itself, this could be the single complete
// graphic image of all the tracks, or possibly the single image of the
// track itself. This location also follows the window scrolling and can
// even go negative when the web browser scrolls a window that is larger
// than the width of the web browser.
var imageName = "img_data_" + trackName;
var imageId = document.getElementById(imageName);
var imageRect = imageId.getBoundingClientRect();
var imageLeft = Math.floor(imageRect.left);
var imageTop = Math.floor(imageRect.top);
-// var imageHeight = Math.floor(imageRect.height);
var evtX = evt.pageX; // location of mouse on the web browser screen
var evtY = evt.pageY;
var offLeft = Math.max(0, Math.floor(evtX - tdLeft));
var windowUp = false; // see if window is supposed to become visible
var foundIdx = -1;
if (mouseOver.spans[trackName]) {
foundIdx = mouseOver.findRange(offLeft, mouseOver.spans[trackName]);
}
-// var msg = ". . . tdRect: " + tdLeft + "," + tdTop + ", imgRect: " + imageLeft + "," + imageTop + ", evtXY: " + evtX + "," + evtY + ", offLeft: " + offLeft + ", foundIdx: " + foundIdx;
-// $('#debugMsg').html(msg);
- // might want to indicate 'no data' when not found
+ // TBD: will want to indicate 'no data' when not found
if (foundIdx > -1) {
// value to display
var mouseOverValue = " " + mouseOver.spans[trackName][foundIdx].v + " ";
$('#mouseOverText').html(mouseOverValue);
var msgWidth = Math.ceil($('#mouseOverText').width());
var msgHeight = Math.ceil($('#mouseOverText').height());
var posLeft = evtX - msgWidth + "px";
var posTop = tdTop + "px";
-// var msg = ". . . posLeft,Top: " + posLeft + "," + posTop + ", evXY: " + evtX + "," + evtY + ", imageTop: " + imageTop;
-// $('#debugMsg').html(msg);
$('#mouseOverText').css('left',posLeft);
$('#mouseOverText').css('top',posTop);
$('#mouseOverVerticalLine').css('left',evtX + "px");
$('#mouseOverVerticalLine').css('top',posTop);
-// msg = ". . . mouseOverText: " + mouseOverValue + " at: " + posLeft + "," + posTop;
-// $('#debugMsg').html(msg);
- // Setting the height of this line to the full image height eliminates
- // the mouse event area
$('#mouseOverVerticalLine').css('height',tdHeight + "px");
-// $('#mouseOverVerticalLine').height(imageHeight + "px");
windowUp = true; // yes, window is to become visible
}
if (windowUp) { // the window should become visible
mouseOver.popUpVisible();
} else { // the window should disappear
mouseOver.popUpDisappear();
} // window visible/not visible
}, // mouseInTrackImage function (evt)
// timeout calls here upon completion
delayCompleted: function()
{
- ++mouseOver.mouseDelayCount;
mouseOver.delayDone = true;
// mouse could just be sitting there with no events, if there
// have been events during the timer, the evt has been recorded
// so the popUp appears where the mouse is while it moved during the
// time delay since mostRecentMouseEvt is up to date to now
// If mouse has moved out of element during timeout, the
// delayInProgress will be false and nothing happens.
if (mouseOver.delayInProgress) {
mouseOver.mouseInTrackImage(mouseOver.mostRecentMouseEvt);
}
},
// all mouse move events come here even during timeout
mouseMoveDelay: function (evt)
{
- ++mouseOver.mouseMoveCount;
-
mouseOver.mostRecentMouseEvt = evt; // record evt for delayCompleted
-// var msg = ". . . mouseMoveDelay evt.currentTarget.id: " + evt.currentTarget.id + ", mouseMoveCount: " + mouseOver.mouseMoveCount + ", mouseDelayCount: " + mouseOver.mouseDelayCount + ", mouseInTrackCount: " + mouseOver.mouseInTrackCount;
-// $('#debugMsg').html(msg);
-
if (mouseOver.delayInProgress) {
if (mouseOver.delayDone) {
mouseOver.mouseInTrackImage(evt); // OK to trigger event now
return;
} else {
return; // wait for delay to be done
}
}
mouseOver.delayDone = false;
mouseOver.delayInProgress = true;
if (mouseOver.popUpTimer) {
clearTimeout(mouseOver.popUpTimer);
mouseOver.popUpTimer = null;
}
mouseOver.popUpTimer = setTimeout(mouseOver.delayCompleted, mouseOver.popUpDelay);
@@ -4698,52 +4658,45 @@
// =======================================================================
receiveData: function (arr)
{
mouseOver.visible = false;
for (var trackName in arr) {
mouseOver.spans[trackName] = []; // start array
// add a 'mousemove' and 'mouseout' event listener to each track
// display object
var tdData = "td_data_" + trackName;
var tdDataId = document.getElementById(tdData);
if (! tdDataId) { return; } // not sure why objects are not always found
// from jQuery doc:
// As the .mousemove() method is just a shorthand
// for .on( "mousemove", handler ), detaching is possible
// using .off( "mousemove" ).
- // there should be a more simple jQuery function to bind these events
-// $(tdData).bind('mousemove', mouseOver.mouseMoveDelay); does not work
$( tdDataId ).mousemove(mouseOver.mouseMoveDelay);
$( tdDataId ).mouseout(mouseOver.popUpDisappear);
-// $( tdDataId ).bind('mousemove', mouseOver.mouseMoveDelay);
-// $( tdDataId ).bind('mouseout', mouseOver.popUpDisappear);
-// tdDataId.addEventListener('mousemove', mouseOver.mouseMoveDelay, true);
-// tdDataId.addEventListener('mouseout', mouseOver.popUpDisappear, true);
var itemCount = 0; // just for monitoring purposes
// save incoming x1,x2,v data into the mouseOver.spans[trackName][] array
for (var span in arr[trackName]) {
mouseOver.spans[trackName].push(arr[trackName][span]);
++itemCount;
}
mouseOver.tracks[trackName] = itemCount; // merely for debugging watch
}
}, // receiveData: function (arr)
failedRequest: function(trackName)
{ // failed request to get json data, remove it from the track list
if (mouseOver.tracks[trackName]) {
-// alert("failed request trackName: '"+ trackName + "'");
delete mouseOver.tracks[trackName];
}
},
// =========================================================================
// fetchMapData() sends JSON request, callback to receiveData() upon return
// =========================================================================
fetchMapData: function (url, trackName)
{
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (4 === this.readyState && 200 === this.status) {
var mapData = JSON.parse(this.responseText);
mouseOver.receiveData(mapData);
} else {
@@ -4755,53 +4708,30 @@
xmlhttp.open("GET", url, true);
xmlhttp.send(); // sends request and exits this function
// the onreadystatechange callback above will trigger
// when the data has safely arrived
},
getData: function ()
{
// check for the hidden div elements for mouseOverData
var trackList = document.getElementsByClassName("mouseOverData");
for (var i = 0; i < trackList.length; i++) {
var jsonData = trackList[i].getAttribute('jsonData');
var trackName = trackList[i].getAttribute('name');
mouseOver.fetchMapData(jsonData, trackName);
}
-
- // verify hgTracks and hgTracks.trackDb exist before running wild
-/* obsolete method of finding tracks by track type, not all wiggle
- tracks are identified as type 'wig' or 'bigWig', for example
- a bam track displayed as a density graph isn't such a type.
- if (typeof(hgTracks) !== "undefined") {
- if (typeof (hgTracks.trackDb) !== "undefined") {
- for (var trackName in hgTracks.trackDb) {
- var rec = hgTracks.trackDb[trackName];
- if (rec.visibility !== 2) { continue; }
- var isWiggle = false;
- if (rec.type.includes("wig")) { isWiggle = true; }
- if (rec.type.includes("bigWig")) { isWiggle = true; }
- if (! isWiggle) { continue; }
- var imgData = "img_data_" + trackName;
- var imgElement = document.getElementById(imgData);
- if (imgElement) {
- mouseOver.fetchMapData(mouseOver.jsonFileName(imgElement, trackName), trackName);
- }
- }
- }
- }
-*/
},
// any scrolling turns the popUp message off
scroll: function()
{
if (mouseOver.visible) { mouseOver.popUpDisappear(); }
},
addListener: function () {
mouseOver.visible = false;
window.addEventListener('scroll', mouseOver.scroll, false);
window.addEventListener('load', mouseOver.getData, false);
}
}; // var mouseOver
|