cd093f718a105986a9433d6d99ebd51b6f296805
angie
Mon Apr 25 15:50:51 2016 -0700
Fix watermark color-switching. refs #15277 (note 149)
Also add commas to position.
diff --git src/hg/js/hgGateway.js src/hg/js/hgGateway.js
index f3e9801..572cd78 100644
--- src/hg/js/hgGateway.js
+++ src/hg/js/hgGateway.js
@@ -605,31 +605,31 @@
}
return { draw: draw,
colors: stripeColors,
hubColor: hubColor
};
}()); // rainbow
///////////////////////////// Module: autocompleteCat /////////////////////////////
var autocompleteCat = (function() {
// Customize jQuery UI autocomplete to show item categories and support html markup in labels.
// Adapted from https://jqueryui.com/autocomplete/#categories and
// http://forum.jquery.com/topic/using-html-in-autocomplete
- // Also adds watermarm to input.
+ // Also adds watermark to input.
$.widget("custom.autocompleteCat",
$.ui.autocomplete,
{
_renderMenu: function(ul, items) {
var that = this;
var currentCategory = "";
// There's no this._super as shown in the doc, so I can't override
// _create as shown in the doc -- just do this every time we render...
this.widget().menu("option", "items", "> :not(.ui-autocomplete-category)");
$.each(items,
function(index, item) {
// Add a heading each time we see a new category:
if (item.category && item.category !== currentCategory) {
ul.append("
" +
item.category + "
" );
@@ -704,30 +704,31 @@
// Provide default values where necessary:
options.onSelect = options.onSelect || console.log;
options.enterSelectsIdentical = options.enterSelectsIdentical || false;
$input.autocompleteCat({
delay: 500,
minLength: 2,
source: autoCompleteSource,
select: autoCompleteSelect,
enterSelectsIdentical: options.enterSelectsIdentical,
enterTerm: options.onEnterTerm
});
if (options.watermark) {
+ $input.css('color', 'black');
$input.Watermark(options.watermark, '#686868');
}
}
return { init: init };
}()); // autocompleteCat
///////////////////////////// Module: hgGateway /////////////////////////////
var hgGateway = (function() {
// Interactive parts of the new gateway page: species autocomplete,
// graphical species-picker, db select, and position autocomplete.
// Constants
@@ -1139,45 +1140,58 @@
stripeTops = rainbow.draw(svg, dbDbTree,
spTree.yTree, spTree.height, spTree.leafTops);
} else {
$('#speciesTreeContainer').html(getBetterBrowserMessage);
}
$('#representedSpeciesTitle').show();
$('#speciesGraphic').show();
if (dbDbTree && document.createElementNS) {
// This needs to be done after things are visible so the slider gets the
// right position.
initRainbowSlider(spTree.height, rainbow.colors, stripeTops);
}
}
}
+ function addCommasToPosition(pos) {
+ // Return seqName:start-end pos with commas inserted in start and end as necessary.
+ var posComma = pos;
+ var fourDigits = /(^.*:.*[0-9])([0-9]{3}\b.*)/;
+ var matches = fourDigits.exec(posComma);
+ while (matches) {
+ posComma = matches[1] + ',' + matches[2];
+ matches = fourDigits.exec(posComma);
+ }
+ return posComma;
+ }
+
function onSelectGene(item) {
// Set the position from an autocomplete result;
// set hgFindMatches and make sure suggestTrack is in pack mode for highlighting the match.
var newPos = item.id;
+ var newPosComma = addCommasToPosition(newPos);
var settings;
- $('#positionDisplay').text(newPos);
+ $('#positionDisplay').text(newPosComma);
if (uiState.suggestTrack) {
settings = { 'hgFind.matches': item.internalId };
settings[uiState.suggestTrack] = 'pack';
cart.send({ cgiVar: settings });
cart.flush();
}
// Overwrite the selected item w/actual position after the autocomplete plugin is done:
function overwriteWithPos() {
- $('#positionInput').val(newPos);
+ $('#positionInput').val(newPosComma);
}
window.setTimeout(overwriteWithPos, 0);
}
function setAssemblyOptions(uiState) {
var assemblySelectLabel = 'Assembly';
if (uiState.dbOptions) {
var html = '', option, i, selected;
for (i = 0; i < uiState.dbOptions.length; i++) {
option = uiState.dbOptions[i];
selected = (option.value === uiState.db) ? 'selected ' : '';
html += '';
}
$('#selectAssembly').html(html);
@@ -1260,31 +1274,31 @@
var weirdDiff = posWidth - $select.outerWidth();
if (weirdDiff) {
$select.outerWidth(posWidth + weirdDiff);
}
updateGoButtonPosition();
}
function updateFindPositionSection(uiState) {
// Update the assembly menu, positionInput and description.
var suggestUrl = null;
if (uiState.suggestTrack) {
suggestUrl = 'hgSuggest?db=' + uiState.db + '&prefix=';
}
setAssemblyOptions(uiState);
if (uiState.position) {
- $('#positionDisplay').text(uiState.position);
+ $('#positionDisplay').text(addCommasToPosition(uiState.position));
}
autocompleteCat.init($('#positionInput'),
{ baseUrl: suggestUrl,
watermark: positionWatermark,
onSelect: onSelectGene,
enterSelectsIdentical: true,
onEnterTerm: goToHgTracks });
setAssemblyDescriptionTitle(uiState.db, uiState.genome);
updateDescription(uiState.description);
if (uiState.db && $('#findPositionContents').css('display') === 'none') {
initFindPositionContents();
}
}
function removeDups(inList, isDup) {
@@ -1406,31 +1420,32 @@
// Handle the server's response to the setTaxId cartJson command.
if (checkJsonData(jsonData, 'handleSetTaxId') && jsonData.taxId === uiState.taxId) {
// Update uiState with new values and update the page:
_.assign(uiState, jsonData);
updateFindPositionSection(uiState);
} else {
console.log('handleSetTaxId ignoring: ' + jsonData.taxId +
' !== ' + uiState.taxId);
}
}
// UI Event Handlers
function clearWatermarkInput($input, watermark) {
// Note: it is not necessary to re-.Watermark if we upgrade the plugin to version >= 3.1
- $input.val('').Watermark(watermark);
+ $input.css('color', 'black');
+ $input.val('').Watermark(watermark ,'#686868');
}
function clearSpeciesInput() {
// Replace anything typed into the species input with the watermark.
clearWatermarkInput($('#speciesSearch'), speciesWatermark);
}
function clearPositionInput() {
// Replace anything typed into the position input with the watermark.
clearWatermarkInput($('#positionInput'), positionWatermark);
}
function setTaxId(taxId, db, doScrollToItem, doClearSpeciesInput) {
// The user has selected a species (and possibly even a particular database) --
// if we're not already using it, change to it.
@@ -1516,31 +1531,31 @@
setAssemblyDescriptionTitle(db, uiState.genome);
cmd = { setDb: { db: db } };
if (uiState.hubUrl) {
cmd.setDb.hubUrl = uiState.hubUrl;
}
cart.send(cmd, handleSetDb);
cart.flush();
uiState.db = db;
clearPositionInput();
}
}
function onClickCopyPosition() {
// Copy the displayed position into the position input:
var posDisplay = $('#positionDisplay').text();
- $('#positionInput').val(posDisplay);
+ $('#positionInput').val(posDisplay).focus();
}
function goToHgTracks() {
// Create and submit a form for hgTracks with hidden inputs for org, db and position.
var position = $('#positionInput').val();
var posDisplay = $('#positionDisplay').text();
var pix = uiState.pix || calculateHgTracksWidth();
var $form;
if (! position || position === '' || position === positionWatermark) {
position = posDisplay;
}
// Show a spinner -- sometimes it takes a while for hgTracks to start displaying.
$('.jwGoIcon').removeClass('fa-play').addClass('fa-spinner fa-spin');
// Make a form and submit it. In order for this to work in IE, the form
// must be appended to the body.