koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/imageviewer.tt

   1 [% USE raw %]
   2 [% USE Asset %]
   3 [% SET footerjs = 1 %]
   4 [% INCLUDE 'doc-head-open.inc' %]
   5 <title>Koha &rsaquo; Catalog &rsaquo; [% INCLUDE 'biblio-title-head.inc' %] &rsaquo; Images</title>
   6 [% INCLUDE 'doc-head-close.inc' %]
   7 <style>
   8 #largeCover {
   9     background: transparent url("[% interface | html %]/[% theme | html %]/img/spinner-small.gif") center center no-repeat;
  10 }
  11 #largeCoverImg {
  12     border : 1px solid #CCCCCC;
  13     display : block;
  14     margin : auto;
  15     padding : 1em;
  16 }
  17
  18 .thumbnails img.selected {
  19     cursor : default;
  20     opacity:0.4;
  21 }
  22 </style>
  23 </head>
  24
  25 <body id="catalog_imageviewer" class="catalog">
  26
  27 [% INCLUDE 'header.inc' %]
  28 [% INCLUDE 'cat-search.inc' %]
  29
  30 <div id="breadcrumbs"><a href="/cgi-bin/koha/mainpage.pl">Home</a> &rsaquo; <a href="/cgi-bin/koha/catalogue/search.pl">Catalog</a>  &rsaquo; [% INCLUDE 'biblio-title.inc' link = 1 %] &rsaquo; Images</div>
  31
  32 <div class="main container-fluid">
  33     <div class="row">
  34         <div class="col-sm-10 col-sm-push-2">
  35             <main>
  36
  37 [% INCLUDE 'cat-toolbar.inc' %]
  38
  39 <h3>Images for <em>[% INCLUDE 'biblio-title.inc' %]</em></h3>
  40 <h4>[% biblio.author | html %]</h4>
  41
  42 [% IF ( LocalCoverImages == 1 ) %]
  43     [% IF ( images.size > 0 ) %]
  44         <div class="row">
  45             <div class="col-md-8">
  46                 <div id="largeCover">
  47                     <img id="largeCoverImg" alt="" src="/cgi-bin/koha/catalogue/image.pl?imagenumber=[% imagenumber | html %]" />
  48                 </div>
  49                 [% IF ( CAN_user_tools_upload_local_cover_images ) %]
  50                     <hr />
  51                     <p>Upload an image file: <a class="btn btn-default btn-xs" href="/cgi-bin/koha/tools/upload-cover-image.pl?biblionumber=[% biblionumber | uri %]&amp;filetype=image"><i class="fa fa-upload" aria-hidden="true"></i> Upload</a>
  52                     </p>
  53                 [% END %]
  54             </div>
  55
  56             <div class="col-md-4">
  57                 <ul class="thumbnails">
  58                     [% FOREACH img IN images %]
  59                         [% IF img %]
  60                             <li id="imagenumber-[% img | html %]" class="thumbnail">
  61                                 <a class="show_cover" data-coverimg="[% img | html %]" href="/cgi-bin/koha/catalogue/imageviewer.pl?biblionumber=[% biblionumber | html %]&amp;imagenumber=[% img | html %]">
  62                                     [% IF ( imagenumber == img ) %]
  63                                         <img class="selected" id="thumbnail_[% img | html %]" src="/cgi-bin/koha/catalogue/image.pl?imagenumber=[% img | html %]&amp;thumbnail=1" alt="Thumbnail" />
  64                                     [% ELSE %]
  65                                         <img id="thumbnail_[% img | html %]" src="/cgi-bin/koha/catalogue/image.pl?imagenumber=[% img | html %]&amp;thumbnail=1" alt="Thumbnail" />
  66                                     [% END %]
  67                                 </a>
  68                                 [% IF CAN_user_tools_upload_local_cover_images %]
  69                                     <a href="#" class="remove" data-coverimg="[% img | html %]"><i class="fa fa-trash"></i> Delete image</a>
  70                                 [% END %]
  71                             </li>
  72                         [% END # /IF img %]
  73                     [% END # /FOREACH img %]
  74                 </ul> <!-- /ul.thumbnails -->
  75             </div> <!-- /.col-md-4 -->
  76         </div> <!-- /.row -->
  77     [% ELSE %]
  78         <div class="dialog message">There are no images for this record.</div>
  79         [% IF ( CAN_user_tools_upload_local_cover_images ) %]
  80             <hr />
  81             <p>Upload an image file: <a class="btn btn-default btn-xs" href="/cgi-bin/koha/tools/upload-cover-image.pl?biblionumber=[% biblionumber | uri %]&amp;filetype=image"><i class="fa fa-upload" aria-hidden="true"></i> Upload</a>
  82             </p>
  83         [% END %]
  84     [% END %]
  85 [% ELSE %]
  86     <div class="dialog message">Local images have not been enabled by your system administrator.</div>
  87 [% END %]
  88
  89             </main>
  90         </div> <!-- /.col-sm-10.col-sm-push-2 -->
  91
  92         <div class="col-sm-2 col-sm-pull-10">
  93             <aside>
  94                 [% INCLUDE 'biblio-view-menu.inc' %]
  95             </aside>
  96         </div> <!-- /.col-sm-2.col-sm-pull-10 -->
  97      </div> <!-- /.row -->
  98
  99 [% MACRO jsinclude BLOCK %]
 100     [% INCLUDE 'catalog-strings.inc' %]
 101     [% Asset.js("js/catalog.js") | $raw %]
 102     <script>
 103         var interface = "[% interface | html %]";
 104         var theme = "[% theme | html %]";
 105         $(document).ready(function(){
 106             showCover([% imagenumber | html %]);
 107             $(".show_cover").on("click",function(e){
 108                 e.preventDefault();
 109                 if( $(this).find("img").hasClass("selected") ){
 110                     return false;
 111                 } else {
 112                     $("#largeCoverImg").attr( "src", interface + "/" + theme + "/img/spinner-small.gif");
 113                     var imagenumber = $(this).data("coverimg");
 114                     showCover( imagenumber );
 115                 }
 116             });
 117
 118             $('.thumbnails .remove').on("click", function(e) {
 119                 e.preventDefault();
 120                 var result = confirm(_("Are you sure you want to delete this cover image?"));
 121                 var imagenumber = $(this).data("coverimg");
 122                 if ( result == true ) {
 123                     removeLocalImage(imagenumber);
 124                 }
 125             });
 126
 127         });
 128
 129         function removeLocalImage(imagenumber) {
 130             var thumbnail = $("#imagenumber-" + imagenumber );
 131             var copy = thumbnail.html();
 132             thumbnail.find("img").css("opacity", ".2");
 133             thumbnail.find("a.remove").html("<img style='display:inline-block' src='" + interface + "/" + theme + "/img/spinner-small.gif' alt='' />");
 134
 135             $.ajax({
 136                 url: "/cgi-bin/koha/svc/cover_images?action=delete&imagenumber=" + imagenumber,
 137                 success: function(data) {
 138                     $(data).each( function() {
 139                         if ( this.deleted == 1 ) {
 140                             location.href="/cgi-bin/koha/catalogue/imageviewer.pl?biblionumber=" + biblionumber;
 141                         } else {
 142                             thumbnail.html( copy );
 143                             alert(_("An error occurred on deleting this image"));
 144                         }
 145                     });
 146                 },
 147                 error: function(data) {
 148                     thumbnail.html( copy );
 149                     alert(_("An error occurred on deleting this image"));
 150                 }
 151             });
 152         }
 153
 154         function showCover(img) {
 155             $('.thumbnail img').removeClass("selected");
 156             $('#largeCoverImg').attr("src","").attr('src', '/cgi-bin/koha/catalogue/image.pl?imagenumber=' + img);
 157             $('#thumbnail_' + img).addClass("selected");
 158         }
 159     </script>
 160 [% END %]
 161
 162 [% INCLUDE 'intranet-bottom.inc' %]