Skip to content

Commit

Permalink
change zoom help button, add option to change tooltip color, remove l…
Browse files Browse the repository at this point in the history 
…etter in position info
  • Loading branch information
@MatSchaeff
MatSchaeff committed Oct 5, 2016
1 parent 65a4b26 commit 0e0ac2f
Show file tree
Hide file tree
Showing 6 changed files with 69 additions and 38 deletions.
21 changes: 16 additions & 5 deletions css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,28 +86,39 @@ a:focus {
}

.header-help{
color: #C50063;
/* color: #C50063;*/
/*
color: #108D9F;
border-color:#0F8292;
*/
}
.header-help .state{
min-width:26px;
display:inline-block;
}

.header-help:hover{
color: #98004C;
/* color: #98004C;*/
/* color: #0F8292;*/
cursor: pointer;
text-decoration: none;
}

.header-help:focus{
color: #98004C;
/* color: #0F8292;*/
}

.popover-title{
text-align: center;
background-color: rgba(197, 0, 99, 0.1);
/* background-color: rgba(197, 0, 99, 0.1);*/
}

.label-as-badge {
/*
border-radius: 1em;
font-size:0.7em;
background-color: #C50063;
*/
/* background-color: #C50063;*/
}

path{
Expand Down
6 changes: 3 additions & 3 deletions dist/feature-viewer.bundle.js
View file

Large diffs are not rendered by default.

21 changes: 16 additions & 5 deletions dist/feature-viewer.min.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions dist/feature-viewer.min.js
View file

Large diffs are not rendered by default.

6 changes: 3 additions & 3 deletions dist/feature-viewer.nextprot.js
View file

Large diffs are not rendered by default.

49 changes: 29 additions & 20 deletions src/feature-viewer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,6 +108,7 @@ var FeatureViewer = (function () {
var tooltipDiv;
var selectedRect;
var bodyNode = d3.select(div).node();
var tooltipColor = options.tooltipColor ? options.tooltipColor : "orangered";

function tooltip(selection) {

Expand Down Expand Up @@ -144,24 +145,24 @@ var FeatureViewer = (function () {
'box-shadow': '0 1px 2px 0 #656565'
});
if (object.type === "path") {
var first_line = '<p style="margin:2px;color:white">start : <span style="color:orangered">' + pD[0].x + '</span></p>';
var second_line = '<p style="margin:2px;color:white">end : <span style="color:orangered">' + pD[1].x + '</span></p>';
var first_line = '<p style="margin:2px;color:white">start : <span style="color:' + tooltipColor +'">' + pD[0].x + '</span></p>';
var second_line = '<p style="margin:2px;color:white">end : <span style="color:' + tooltipColor +'">' + pD[1].x + '</span></p>';
} else if (object.type === "line") {
var elemHover = updateLineTooltip(absoluteMousePos[0],pD);
if (elemHover.description) {
var first_line = '<p style="margin:2px;color:orangered">' + elemHover.x + ' : <span style="color:#ccc"> ' + elemHover.y + '</span></p>';
var first_line = '<p style="margin:2px;color:' + tooltipColor +'">' + elemHover.x + ' : <span style="color:#ccc"> ' + elemHover.y + '</span></p>';
var second_line = '<p style="margin:2px;color:white;font-size:9px">' + elemHover.description + '</p>';
}
else {
var first_line = '<p style="margin:2px;color:white">position : <span style="color:orangered" id="tLineX">' + elemHover.x + '</span></p>';
var second_line = '<p style="margin:2px;color:white">count : <span style="color:orangered" id="tLineC">' + elemHover.y + '</span></p>';
var first_line = '<p style="margin:2px;color:white">position : <span style="color:' + tooltipColor +'" id="tLineX">' + elemHover.x + '</span></p>';
var second_line = '<p style="margin:2px;color:white">count : <span style="color:' + tooltipColor +'" id="tLineC">' + elemHover.y + '</span></p>';
}
} else if (object.type === "unique" || pD.x === pD.y) {
var first_line = '<p style="margin:2px;color:orangered">' + pD.x + '</p>';
var first_line = '<p style="margin:2px;color:' + tooltipColor +'">' + pD.x + '</p>';
if (pD.description) var second_line = '<p style="margin:2px;color:white;font-size:9px">' + pD.description + '</p>';
else var second_line = '';
} else {
var first_line = '<p style="margin:2px;color:orangered">' + pD.x + ' - ' + pD.y + '</p>';
var first_line = '<p style="margin:2px;color:' + tooltipColor +'">' + pD.x + ' - ' + pD.y + '</p>';
if (pD.description) var second_line = '<p style="margin:2px;color:white;font-size:9px">' + pD.description + '</p>';
else var second_line = '';
}
Expand All @@ -179,12 +180,12 @@ var FeatureViewer = (function () {
var absoluteMousePos = d3.mouse(bodyNode);
var elemHover = updateLineTooltip(absoluteMousePos[0],pD);
if (elemHover.description) {
var first_line = '<p style="margin:2px;color:orangered">' + elemHover.x + ' : <span style="color:#ccc"> ' + elemHover.y + '</span></p>';
var first_line = '<p style="margin:2px;color:' + tooltipColor +'">' + elemHover.x + ' : <span style="color:#ccc"> ' + elemHover.y + '</span></p>';
var second_line = '<p style="margin:2px;color:white;font-size:9px">' + elemHover.description + '</p>';
}
else {
var first_line = '<p style="margin:2px;color:white">position : <span style="color:orangered" id="tLineX">' + elemHover.x + '</span></p>';
var second_line = '<p style="margin:2px;color:white">count : <span style="color:orangered" id="tLineC">' + elemHover.y + '</span></p>';
var first_line = '<p style="margin:2px;color:white">position : <span style="color:' + tooltipColor +'" id="tLineX">' + elemHover.x + '</span></p>';
var second_line = '<p style="margin:2px;color:white">count : <span style="color:' + tooltipColor +'" id="tLineC">' + elemHover.y + '</span></p>';
}
tooltipDiv.html(first_line + second_line);
// $('#tLineX').text(elemHover.x);
Expand Down Expand Up @@ -1600,8 +1601,7 @@ var FeatureViewer = (function () {
// .style("margin", "15px 35px 0px 0px")
.style("margin", "0px")
.style("margin-right", "5px")
.style("line-height","13px")
.style("vertical-align","text-top")
// .style("line-height","32px")
.style("padding", "0px");
var buttonHelp = headerHelp
.append("a")
Expand All @@ -1611,24 +1611,31 @@ var FeatureViewer = (function () {
.attr("data-placement", "left")
.attr("title", "Help")
.attr("data-content", helpContent)
.style("font-size", "1.2em");
.style("font-size", "14px");
// .style("margin-bottom", "2px");
buttonHelp
.append("span")
.attr("class", "label label-as-badge")
.attr("class", "label label-as-badge label-info")
.style("font-weight","500")
// .style("border-radius","3px")
.style("border-radius","15px")
.style("border-radius","3px")
// .style("background-color","#f8f8f8")
.style("background-color","#108D9F")
// .style("background-color","#108D9F")
// .style("border","1px solid #ddd")
.style("border","1px solid #0C6B78")
// .style("border","1px solid #0C6B78")
// .style("color","#777")
.style("box-shadow","inset 0px 0px 4px rgba(0,0,0,0.10)")
.style("color","#fff")
.style("padding","1px 6px")
.text("?");
// .style("padding","2px 6px")
.html("<span class='state'>Show</span> help");
$(function () {
$('[data-toggle="popover"]').popover({html: true});
$(div + ' .header-help').on('hide.bs.popover', function () {
$(this).find(".state").text("Show");
});
$(div + ' .header-help').on('show.bs.popover', function () {
$(this).find(".state").text("Hide");
});
})
}
}
Expand Down Expand Up @@ -1683,7 +1690,9 @@ var FeatureViewer = (function () {
svgContainer.on('mousemove', function () {
var absoluteMousePos = SVGOptions.brushActive ? d3.mouse(d3.select(".background").node()) : d3.mouse(svgContainer.node());;
var pos = Math.round(scalingPosition(absoluteMousePos[0]));
pos += sequence[pos-1] || "";
if (!options.positionWithoutLetter) {
pos += sequence[pos-1] || "";
}
$(div + " #zoomPosition").text(pos);
});

Expand Down

0 comments on commit 0e0ac2f

Please sign in to comment.