mason/image/display_image.mas

   1
   2
   3 <%doc>
   4
   5 =head1 NAME
   6
   7 /image/display_image.mas - a mason component to display an image, initially written for the image detail page
   8
   9 =head1 DESCRIPTION
  10
  11 parameters:
  12
  13 =over 5
  14
  15 =item $image
  16
  17 a CXGN::Image object for the image to be displayed.
  18
  19 =item $person_id
  20
  21 the user who is currently logged in.
  22
  23 =item $size
  24
  25 The size of the image to display initially
  26
  27 =back
  28
  29 =head1 AUTHOR
  30
  31 Lukas Mueller <lam87@cornell.edu>
  32
  33 =cut
  34
  35 </%doc>
  36
  37
  38
  39 <%args>
  40 $image => undef
  41 $person_id => undef
  42 $size => 'medium'
  43 $display_order => undef
  44 </%args>
  45
  46 <& /util/import_javascript.mas, classes => [ 'CXGN.Image', 'jquery', 'jqueryui' ] &>
  47
  48
  49
  50 <%perl>
  51
  52 #use JSON;
  53 use SGN::Image;
  54 use CXGN::Phenome::Individual;
  55
  56 my $thumbnail_img = $image->get_img_src_tag("thumbnail");
  57 my $small_img = $image->get_img_src_tag("small");
  58 my $medium_img = $image->get_img_src_tag("medium");
  59 my $large_img = $image->get_img_src_tag("large");
  60 my $original_img = $image->get_img_src_tag("original");
  61
  62 my $object_id = $image->get_image_id();
  63
  64 if ($size!~/thumbnail|small|medium|large|original/i ) { $size="medium"; }
  65
  66 my $active = 0;
  67 if ($size eq "small") { $active = 1;}
  68 if ($size eq "medium") { $active = 2;}
  69 if ($size eq "large") { $active = 3; }
  70 if ($size eq "original") { $active = 4; }
  71
  72 </%perl>
  73
  74
  75 <style>
  76 .ui-tabs .ui-tabs-nav
  77 {
  78 background: white;
  79 }
  80 .ui-tabs {
  81   border: none;
  82 }
  83
  84 </style>
  85
  86 <div id="image_tabs">
  87 <ul>
  88     <li><a href="#tabs-1">thumbnail</a></li>
  89     <li><a href="#tabs-2">small</a></li>
  90     <li><a href="#tabs-3">medium</a></li>
  91     <li><a href="#tabs-4">large</a></li>
  92     <li><a href="#tabs-5">original</a></li>
  93   </ul>
  94   <div id="tabs-1">
  95     <p><center><% $thumbnail_img %></center></p>
  96   </div>
  97   <div id="tabs-2">
  98     <p><center><% $small_img %></center></p>
  99   </div>
 100   <div id="tabs-3">
 101     <p><center><% $medium_img %></center></p>
 102   </div>
 103   <div id="tabs-4">
 104     <p><center><% $large_img %></center></p>
 105   </div>
 106   <div id="tabs-5">
 107     <p><center><% $original_img %></center></p>
 108   </div>
 109 </div>
 110
 111
 112
 113
 114 <br /><br />
 115 <center><table><tr><td class="boxbgcolor5"><b>Note:</b> The above image may be subject to copyright. Please contact the submitter about permissions to use the image.</td></tr></table></center><br />
 116
 117
 118 % my $tag_count = scalar($image->get_tags());
 119
 120 <&| /page/info_section.mas, title=>"Associated tags" &>
 121 <br><b>Associated tags</b> [<a href="/tag/index.pl?image_id=<% $object_id %>&amp;action=new">add/remove</a>]: <% $tag_count %>
 122
 123
 124 % foreach my $tag ($image->get_tags()) {
 125 %    print $tag->get_name()."  ";
 126 % }
 127
 128 </&>
 129
 130
 131 <&| /page/info_section.mas, title=>"Associated objects" &>
 132
 133 % print $image->get_associated_object_links();
 134
 135 </&>
 136
 137 <&| /page/info_section.mas, title=>"Display properties",  collapsible => 1, collapsed => 1 &>
 138
 139   <div id="display_properties_div">
 140
 141
 142   </div>
 143
 144
 145 </&>
 146
 147
 148
 149 <script>
 150
 151   jQuery(window).ready( function() {
 152     jQuery('#image_tabs').tabs({ active: <% $active %> });
 153
 154     // fetch display order data
 155     jQuery.ajax( {
 156        url: '/ajax/image/<% $object_id %>',
 157        error: function(r,x,error) { alert('An error occurred retrieving the image display order data.'+r.status+' '+error); },
 158        success: function(r)  {
 159           if (r.error) { alert('Error: '+r.error); return; }
 160           var html = "";
 161           for (var i=0; i<r.display_order.length; i++) {
 162             html += r.display_order[i]['name']+'&nbsp;<b>'+r.display_order[i]['display_order']+'</b>&nbsp;<a href="/image/display_order?image_id='+r.display_order[i].image_id+'&amp;type='+r.display_order[i].type+'&amp;id='+r.display_order[i].id+'&amp;display_order='+r.display_order[i].display_order+'">change</button></a><br />';
 163
 164           }
 165           jQuery('#display_properties_div').html(html);
 166
 167        }
 168     });
 169
 170   });
 171
 172 </script>