Commit 8185ec1d authored by Keith Jolley's avatar Keith Jolley
Browse files

Use slimbox2 jQuery plugin for display of charts.

parent 87b146ba
......@@ -425,7 +425,9 @@ violation by some reasonable means, this is the first time you have
received notice of violation of this License (for any work) from that
copyright holder, and you cure the violation prior to 30 days after
your receipt of the notice.
Slimbox v2.04 - The ultimate lightweight Lightbox clone for jQuery
(c) 2007-2010 Christophe Beyls <http://www.digitalia.be>
MIT-style license.
Termination of your rights under this section does not terminate the
licenses of parties who have received copies or rights from you under
this License. If your rights have been terminated and not permanently
......
......@@ -14,7 +14,8 @@ This product includes XML Parser code released as part of mlstdb, written by
Man-Suen Chan and released under the GPL.
This product uses the jQuery Javascript library and associated plugins. These
have been released under the GNU General Public License version 2 (GPL).
have been released under the GNU General Public License version 2 (GPL) or MIT
license.
This product includes perl-md5-login Perl/CGI + JavaScript user authorization
(https://sourceforge.net/projects/perl-md5-login/). This has been released
......
......@@ -774,4 +774,88 @@ td.tree {
}
.widetable.collapsed { display: inline }
.widetable.expanded { display: block }
\ No newline at end of file
.widetable.expanded { display: block }
/* SLIMBOX */
#lbOverlay {
position: fixed;
z-index: 9999;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #000;
cursor: pointer;
}
#lbCenter, #lbBottomContainer {
position: absolute;
z-index: 9999;
overflow: hidden;
background-color: #fff;
}
.lbLoading {
background: #fff url(/images/slimbox/loading.gif) no-repeat center;
}
#lbImage {
position: absolute;
left: 0;
top: 0;
border: 10px solid #fff;
background-repeat: no-repeat;
}
#lbPrevLink, #lbNextLink {
display: block;
position: absolute;
top: 0;
width: 50%;
outline: none;
}
#lbPrevLink {
left: 0;
}
#lbPrevLink:hover {
background: transparent url(/images/slimbox/prevlabel.gif) no-repeat 0 15%;
}
#lbNextLink {
right: 0;
}
#lbNextLink:hover {
background: transparent url(/images/slimbox/nextlabel.gif) no-repeat 100% 15%;
}
#lbBottom {
font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
font-size: 10px;
color: #666;
line-height: 1.4em;
text-align: left;
border: 10px solid #fff;
border-top-style: none;
}
#lbCloseLink {
display: block;
float: right;
width: 66px;
height: 22px;
background: transparent url(/images/slimbox/closelabel.gif) no-repeat center;
margin: 5px 0;
outline: none;
}
#lbCaption, #lbNumber {
margin-right: 71px;
}
#lbCaption {
font-weight: bold;
}
$(function () {
$('div.content a').tooltip({
$('div.content a:not(.lightbox)').tooltip({
track: true,
delay: 0,
showURL: false,
......
/*
Slimbox v2.04 - The ultimate lightweight Lightbox clone for jQuery
(c) 2007-2010 Christophe Beyls <http://www.digitalia.be>
MIT-style license.
*/
(function(w){var E=w(window),u,f,F=-1,n,x,D,v,y,L,r,m=!window.XMLHttpRequest,s=[],l=document.documentElement,k={},t=new Image(),J=new Image(),H,a,g,p,I,d,G,c,A,K;w(function(){w("body").append(w([H=w('<div id="lbOverlay" />')[0],a=w('<div id="lbCenter" />')[0],G=w('<div id="lbBottomContainer" />')[0]]).css("display","none"));g=w('<div id="lbImage" />').appendTo(a).append(p=w('<div style="position: relative;" />').append([I=w('<a id="lbPrevLink" href="#" />').click(B)[0],d=w('<a id="lbNextLink" href="#" />').click(e)[0]])[0])[0];c=w('<div id="lbBottom" />').appendTo(G).append([w('<a id="lbCloseLink" href="#" />').add(H).click(C)[0],A=w('<div id="lbCaption" />')[0],K=w('<div id="lbNumber" />')[0],w('<div style="clear: both;" />')[0]])[0]});w.slimbox=function(O,N,M){u=w.extend({loop:false,overlayOpacity:0.8,overlayFadeDuration:200,resizeDuration:200,resizeEasing:"swing",initialWidth:250,initialHeight:250,imageFadeDuration:400,captionAnimationDuration:100,counterText:"Image {x} of {y}",closeKeys:[27,88,67],previousKeys:[37,80],nextKeys:[39,78]},M);if(typeof O=="string"){O=[[O,N]];N=0}y=E.scrollTop()+(E.height()/2);L=u.initialWidth;r=u.initialHeight;w(a).css({top:Math.max(0,y-(r/2)),width:L,height:r,marginLeft:-L/2}).show();v=m||(H.currentStyle&&(H.currentStyle.position!="fixed"));if(v){H.style.position="absolute"}w(H).css("opacity",u.overlayOpacity).fadeIn(u.overlayFadeDuration);z();j(1);f=O;u.loop=u.loop&&(f.length>1);return b(N)};w.fn.slimbox=function(M,P,O){P=P||function(Q){return[Q.href,Q.title]};O=O||function(){return true};var N=this;return N.unbind("click").click(function(){var S=this,U=0,T,Q=0,R;T=w.grep(N,function(W,V){return O.call(S,W,V)});for(R=T.length;Q<R;++Q){if(T[Q]==S){U=Q}T[Q]=P(T[Q],Q)}return w.slimbox(T,U,M)})};function z(){var N=E.scrollLeft(),M=E.width();w([a,G]).css("left",N+(M/2));if(v){w(H).css({left:N,top:E.scrollTop(),width:M,height:E.height()})}}function j(M){if(M){w("object").add(m?"select":"embed").each(function(O,P){s[O]=[P,P.style.visibility];P.style.visibility="hidden"})}else{w.each(s,function(O,P){P[0].style.visibility=P[1]});s=[]}var N=M?"bind":"unbind";E[N]("scroll resize",z);w(document)[N]("keydown",o)}function o(O){var N=O.keyCode,M=w.inArray;return(M(N,u.closeKeys)>=0)?C():(M(N,u.nextKeys)>=0)?e():(M(N,u.previousKeys)>=0)?B():false}function B(){return b(x)}function e(){return b(D)}function b(M){if(M>=0){F=M;n=f[F][0];x=(F||(u.loop?f.length:0))-1;D=((F+1)%f.length)||(u.loop?0:-1);q();a.className="lbLoading";k=new Image();k.onload=i;k.src=n}return false}function i(){a.className="";w(g).css({backgroundImage:"url("+n+")",visibility:"hidden",display:""});w(p).width(k.width);w([p,I,d]).height(k.height);w(A).html(f[F][1]||"");w(K).html((((f.length>1)&&u.counterText)||"").replace(/{x}/,F+1).replace(/{y}/,f.length));if(x>=0){t.src=f[x][0]}if(D>=0){J.src=f[D][0]}L=g.offsetWidth;r=g.offsetHeight;var M=Math.max(0,y-(r/2));if(a.offsetHeight!=r){w(a).animate({height:r,top:M},u.resizeDuration,u.resizeEasing)}if(a.offsetWidth!=L){w(a).animate({width:L,marginLeft:-L/2},u.resizeDuration,u.resizeEasing)}w(a).queue(function(){w(G).css({width:L,top:M+r,marginLeft:-L/2,visibility:"hidden",display:""});w(g).css({display:"none",visibility:"",opacity:""}).fadeIn(u.imageFadeDuration,h)})}function h(){if(x>=0){w(I).show()}if(D>=0){w(d).show()}w(c).css("marginTop",-c.offsetHeight).animate({marginTop:0},u.captionAnimationDuration);G.style.visibility=""}function q(){k.onload=null;k.src=t.src=J.src=n;w([a,g,c]).stop(true);w([I,d,g,G]).hide()}function C(){if(F>=0){q();F=x=D=-1;w(a).hide();w(H).stop().fadeOut(u.overlayFadeDuration,j)}return false}})(jQuery);
// AUTOLOAD CODE BLOCK (MAY BE CHANGED OR REMOVED)
if (!/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)) {
jQuery(function($) {
$("a[rel^='lightbox']").slimbox({/* Put custom options here */}, null, function(el) {
return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
});
});
}
\ No newline at end of file
......@@ -26,7 +26,7 @@ my $logger = get_logger('BIGSdb.Page');
sub initiate {
my ($self) = @_;
$self->{$_} = 1 foreach qw(jQuery noCache);
$self->{$_} = 1 foreach qw(jQuery jQuery.slimbox noCache);
my $id = $self->{'cgi'}->param('id');
return if !defined $id;
my ( $job, undef, undef ) = $self->{'jobManager'}->get_job($id);
......@@ -137,10 +137,12 @@ HTML
$link_text =~ s/^\d{2}_//; #Descriptions can start with 2 digit number for ordering
my $text = "<li><a href=\"/tmp/$output->{$_}\">$link_text</a>";
$text .= " - $comments" if $comments;
$text .=
"<br /><a href=\"/tmp/$output->{$_}\"><img src=\"/tmp/$output->{$_}\" alt=\"\" style=\"max-height:200px;border:1px dashed black\" /></a>"
if $output->{$_} =~ /\.png$/;
$text .= " (click to enlarge)" if $output->{$_} =~ /\.png$/;
if ($output->{$_} =~ /\.png$/){
my $title = $link_text . ($comments ? " - $comments" : '');
$text .= "<br /><a href=\"/tmp/$output->{$_}\" rel=\"lightbox-1\" class=\"lightbox\" title=\"$title\">"
. "<img src=\"/tmp/$output->{$_}\" alt=\"\" style=\"max-width:200px;border:1px dashed black\" /></a>"
. " (click to enlarge)";
}
$text .= "</li>\n";
push @buffer, $text;
}
......
......@@ -196,6 +196,9 @@ sub print_page_content {
if ( $self->{'jQuery.coolfieldset'} ) {
push @javascript, ( { 'language' => 'Javascript', 'src' => "/javascript/jquery.coolfieldset.js" } );
}
if ($self->{'jQuery.slimbox'}){
push @javascript, ( { 'language' => 'Javascript', 'src' => "/javascript/jquery.slimbox2.js" } );
}
push @javascript, { 'language' => 'Javascript', 'code' => $page_js } if $page_js;
}
......@@ -256,7 +259,7 @@ sub get_stylesheet {
my ($self) = @_;
my $stylesheet;
my $system = $self->{'system'};
my $filename = 'bigsdb.css?v=20120512';
my $filename = 'bigsdb.css?v=20120803';
if ( !$system->{'db'} ) {
$stylesheet = "/$filename";
} elsif ( -e "$ENV{'DOCUMENT_ROOT'}$system->{'webroot'}/$system->{'db'}/$filename" ) {
......
......@@ -35,7 +35,7 @@ sub initiate {
if ( $q->param('format') eq 'text' ) {
$self->{'type'} = 'text';
} else {
$self->{$_} = 1 foreach qw(jQuery jQuery.tablesort jQuery.jstree);
$self->{$_} = 1 foreach qw(jQuery jQuery.tablesort jQuery.jstree jQuery.slimbox);
}
$self->{'noCache'} = 1 if ( $self->{'system'}->{'sets'} // '' ) eq 'yes';
return;
......
......@@ -39,7 +39,7 @@ sub get_attributes {
buttontext => 'Sequence bin',
menutext => 'Sequence bin',
module => 'SeqbinBreakdown',
version => '1.0.4',
version => '1.0.5',
dbtype => 'isolates',
section => 'breakdown,postquery',
input => 'query',
......@@ -126,7 +126,7 @@ sub run {
<tbody>
HTML
;
say $fh "Isolate id\t$labelfield\tContigs\tTotal length\tMin\tMax\tMean\tStdDev\t" . "N50\tN90\tN95\t%Allele designated\t%Loci tagged";
say $fh "Isolate id\t$labelfield\tContigs\tTotal length\tMin\tMax\tMean\tStdDev\tN50\tN90\tN95\t%Allele designated\t%Loci tagged";
my $td = 1;
local $| = 1;
my ($data);
......@@ -219,9 +219,8 @@ sub _print_charts {
push @values, $histogram->{$i};
}
my %prefs = ( offset_label => 1, 'x-title' => $title{$_}, 'y-title' => 'Frequency' );
BIGSdb::Charts::barchart( \@labels, \@values, "$self->{'config'}->{'tmp_dir'}/$prefix\_large_histogram_$_.png",
BIGSdb::Charts::barchart( \@labels, \@values, "$self->{'config'}->{'tmp_dir'}/$prefix\_histogram_$_.png",
'large', \%prefs, { no_transparent => 1 } );
BIGSdb::Charts::barchart( \@labels, \@values, "$self->{'config'}->{'tmp_dir'}/$prefix\_histogram_$_.png", 'large', \%prefs );
say "<div style=\"float:left;padding-right:1em\">";
say "<h2>$title{$_}</h2>";
say "Overall mean: "
......@@ -229,9 +228,8 @@ sub _print_charts {
. "; &sigma;: "
. BIGSdb::Utils::decimal_place( $stats->{'std'}, 1 )
. "<br />";
say "<a href=\"/tmp/$prefix\_large_histogram_$_.png\" target=\"_blank\"><img src=\"/tmp/$prefix\_histogram_$_.png\" "
. "alt=\"$_ histogram\" style=\"width:300px; border:0\" /></a>";
say "<a href=\"/tmp/$prefix\_histogram_$_.png\" rel=\"lightbox-1\" class=\"lightbox\" title=\"$title{$_}\">"
. "<img src=\"/tmp/$prefix\_histogram_$_.png\" alt=\"$_ histogram\" style=\"width:200px; border:1px dashed black\" /></a>";
if ( $_ eq 'lengths' ) {
my $filename = BIGSdb::Utils::get_random() . '.txt';
my $full_path = "$self->{'config'}->{'tmp_dir'}/$filename";
......
......@@ -37,7 +37,7 @@ sub get_attributes {
buttontext => 'Two Field',
menutext => 'Two field',
module => 'TwoFieldBreakdown',
version => '1.0.3',
version => '1.0.4',
dbtype => 'isolates',
section => 'breakdown,postquery',
url => 'http://pubmlst.org/software/database/bigsdb/userguide/isolates/two_field_breakdown.shtml',
......@@ -411,6 +411,10 @@ sub _breakdown {
prefix => $temp1,
field1 => $field1,
field2 => $field2,
html_field1 => $html_field1,
html_field2 => $html_field2,
text_field1 => $text_field1,
text_field2 => $text_field2,
data => \%datahash,
field1_total => \%field1total,
field2_values => \@field2values
......@@ -427,8 +431,11 @@ sub _print_charts {
my $field2_values = $args->{'field2_values'};
my $field1 = $args->{'field1'};
my $field2 = $args->{'field2'};
my $text_field1 = $args->{'text_field1'};
my $text_field2 = $args->{'text_field2'};
if ( $self->{'config'}->{'chartdirector'} && keys %$data < 31 && @$field2_values < 31 ) {
print "<div class=\"box\" id=\"chart\">";
print "<div class=\"box\" id=\"chart\"><h2>Charts</h2>";
print "<p>Click to enlarge.</p>";
my $guid = $self->get_guid;
my %prefs;
foreach (qw (threeD transparent)) {
......@@ -440,12 +447,10 @@ sub _print_charts {
$prefs{$_} = 0;
};
}
print "<div class=\"scrollable\" style=\"background:white; border: 1px solid black\">\n";
for ( my $i = 0 ; $i < 2 ; $i++ ) {
my $chart = XYChart->new( 1000, 500 );
$chart->setPlotArea( 100, 40, 580, 300 );
$chart->setBackground(0x00FFFFFF);
$chart->setTransparentColor(0x00FFFFFF);
$chart->addLegend( 700, 10 );
$chart->xAxis()->setLabels($field2_values)->setFontAngle(60);
my $layer;
......@@ -497,7 +502,10 @@ sub _print_charts {
$filename = $1; #untaint
}
$chart->makeChart("$self->{'config'}->{'tmp_dir'}\/$filename");
print "<img src=\"/tmp/$filename\" alt=\"$field1 vs $field2\" />";
print "<fieldset><legend>Values</legend>";
print "<a href=\"/tmp/$filename\" rel=\"lightbox-1\" class=\"lightbox\" title=\"$text_field1 vs $text_field2\">"
. "<img src=\"/tmp/$filename\" alt=\"$text_field1 vs $text_field2\" style=\"width:200px; border: 1px dashed black\" /></a>";
print "</fieldset>";
} else {
$chart->addTitle( "Percentages", "arial.ttf", 14 );
my $filename = "$prefix\_$field1\_$field2\_pc.png";
......@@ -505,10 +513,15 @@ sub _print_charts {
$filename = $1; #untaint
}
$chart->makeChart("$self->{'config'}->{'tmp_dir'}\/$filename");
print "<img src=\"/tmp/$filename\" alt=\"$field1 vs $field2 percentage chart\" />";
print "<fieldset><legend>Percentages</legend>";
print
"<a href=\"/tmp/$filename\" rel=\"lightbox-1\" class=\"lightbox\" title=\"$text_field1 vs $text_field2 percentage chart\">"
. "<img src=\"/tmp/$filename\" alt=\"$text_field1 vs $text_field2 percentage chart\" style=\"width:200px; "
. "border: 1px dashed black\" /></a>";
print "</fieldset>";
}
}
print "</div></div>\n";
print "</div>\n";
}
return;
}
......
......@@ -29,7 +29,7 @@ use POSIX qw(ceil);
sub initiate {
my ($self) = @_;
$self->{$_} = 1 foreach qw (tooltips jQuery);
$self->{$_} = 1 foreach qw (tooltips jQuery jQuery.slimbox jQuery.jstree);
return;
}
......@@ -118,13 +118,11 @@ HTML
my %prefs = ( 'offset_label' => 1, 'x-title' => 'Contig size (bp)', 'y-title' => 'Frequency' );
BIGSdb::Charts::barchart( \@labels, \@values, "$self->{'config'}->{'tmp_dir'}/$temp\_large_histogram.png",
'large', \%prefs, { no_transparent => 1 } );
BIGSdb::Charts::barchart( \@labels, \@values, "$self->{'config'}->{'tmp_dir'}/$temp\_histogram.png", 'large', \%prefs );
print "<img src=\"/tmp/$temp\_histogram.png\" alt=\"histogram\" style=\"width:200px;border:0\" /><br />\n";
say "<a href=\"/tmp/$temp\_large_histogram.png\" rel=\"lightbox\" class=\"lightbox\" title=\"Contig size distribution\">"
. "<img src=\"/tmp/$temp\_large_histogram.png\" alt=\"Contig size distribution\" style=\"width:200px;border:1px "
. "dashed black\" /></a><br />Click to enlarge";
}
say "<ul>";
say "<li><a href=\"/tmp/$temp\_large_histogram.png\">Enlarge chart</a></li>" if $self->{'config'}->{'chartdirector'};
say "<li><a href=\"/tmp/$temp.txt\">Download lengths</a></li>";
say "</ul>\n</div>";
say "<ul><li><a href=\"/tmp/$temp.txt\">Download lengths</a></li></ul></div>";
}
say "<div style=\"clear:both\"></div>";
say "</div><div class=\"box\" id=\"resultstable\">";
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment