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 %]
  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>
  52                         [% IF itemnumber %]
  53                             Upload an image file for this item:
  54                             <a class="btn btn-default btn-xs" href="/cgi-bin/koha/tools/upload-cover-image.pl?itemnumber=[% itemnumber | uri %]&amp;filetype=image">
  55                         [% ELSE %]
  56                             Upload an image file for this bibliographic record:
  57                             <a class="btn btn-default btn-xs" href="/cgi-bin/koha/tools/upload-cover-image.pl?biblionumber=[% biblionumber | uri %]&amp;filetype=image">
  58                         [% END %]
  59                         <i class="fa fa-upload" aria-hidden="true"></i> Upload</a>
  60                     </p>
  61                 [% END %]
  62             </div>
  63
  64             <div class="col-md-4">
  65                 <ul class="thumbnails">
  66                     [% FOREACH image IN images %]
  67                             <li id="imagenumber-[% image.imagenumber | html %]" data-itemnumber="[% image.itemnumber | html %]" data-biblionumber="[% image.biblionumber | html %]" class="thumbnail">
  68                             <a class="show_cover" data-coverimg="[% image.imagenumber | html %]" href="/cgi-bin/koha/catalogue/imageviewer.pl?biblionumber=[% biblionumber | html %]&amp;imagenumber=[% image.imagenumber | html %]">
  69                                 [% IF loop.first %]
  70                                     <img class="selected" id="thumbnail_[% image.imagenumber | html %]" src="/cgi-bin/koha/catalogue/image.pl?imagenumber=[% image.imagenumber | html %]&amp;thumbnail=1" alt="Thumbnail" />
  71                                 [% ELSE %]
  72                                     <img id="thumbnail_[% image.imagenumber | html %]" src="/cgi-bin/koha/catalogue/image.pl?imagenumber=[% image.imagenumber | html %]&amp;thumbnail=1" alt="Thumbnail" />
  73                                 [% END %]
  74                             </a>
  75                             [% IF CAN_user_tools_upload_local_cover_images %]
  76                                 <a href="#" class="remove" data-coverimg="[% image.imagenumber | html %]"><i class="fa fa-trash"></i> Delete image</a>
  77                             [% END %]
  78                         </li>
  79                     [% END # /FOREACH img %]
  80                 </ul> <!-- /ul.thumbnails -->
  81             </div> <!-- /.col-md-4 -->
  82         </div> <!-- /.row -->
  83     [% ELSE %]
  84         [% IF itemnumber %]
  85             <div class="dialog message">There are no images for this item.</div>
  86         [% ELSE %]
  87             <div class="dialog message">There are no images for this record.</div>
  88         [% END %]
  89         [% IF ( CAN_user_tools_upload_local_cover_images ) %]
  90             <hr />
  91             <p>
  92                 Upload an image file:
  93                 [% IF itemnumber %]
  94                     <a class="btn btn-default btn-xs" href="/cgi-bin/koha/tools/upload-cover-image.pl?itemnumber=[% itemnumber | uri %]&amp;filetype=image">
  95                 [% ELSE %]
  96                     <a class="btn btn-default btn-xs" href="/cgi-bin/koha/tools/upload-cover-image.pl?biblionumber=[% biblionumber | uri %]&amp;filetype=image">
  97                 [% END %]
  98                 <i class="fa fa-upload" aria-hidden="true"></i> Upload</a>
  99             </p>
 100         [% END %]
 101     [% END %]
 102 [% ELSE %]
 103     <div class="dialog message">Local images have not been enabled by your system administrator.</div>
 104 [% END %]
 105
 106             </main>
 107         </div> <!-- /.col-sm-10.col-sm-push-2 -->
 108
 109         <div class="col-sm-2 col-sm-pull-10">
 110             <aside>
 111                 [% INCLUDE 'biblio-view-menu.inc' %]
 112             </aside>
 113         </div> <!-- /.col-sm-2.col-sm-pull-10 -->
 114      </div> <!-- /.row -->
 115
 116 [% MACRO jsinclude BLOCK %]
 117     [% INCLUDE 'catalog-strings.inc' %]
 118     [% Asset.js("js/catalog.js") | $raw %]
 119     <script>
 120         var interface = "[% interface | html %]";
 121         var theme = "[% theme | html %]";
 122         $(document).ready(function(){
 123             showCover([% imagenumber | html %]);
 124             $(".show_cover").on("click",function(e){
 125                 e.preventDefault();
 126                 if( $(this).find("img").hasClass("selected") ){
 127                     return false;
 128                 } else {
 129                     $("#largeCoverImg").attr( "src", interface + "/" + theme + "/img/spinner-small.gif");
 130                     var imagenumber = $(this).data("coverimg");
 131                     showCover( imagenumber );
 132                 }
 133             });
 134
 135             $('.thumbnails .remove').on("click", function(e) {
 136                 e.preventDefault();
 137                 var result = confirm(_("Are you sure you want to delete this cover image?"));
 138                 var imagenumber = $(this).data("coverimg");
 139                 if ( result == true ) {
 140                     removeLocalImage(imagenumber);
 141                 }
 142             });
 143
 144         });
 145
 146         function removeLocalImage(imagenumber) {
 147             var thumbnail = $("#imagenumber-" + imagenumber );
 148             var itemnumber = $(thumbnail).data("itemnumber");
 149             var biblionumber = $(thumbnail).data("biblionumber");
 150             var copy = thumbnail.html();
 151             thumbnail.find("img").css("opacity", ".2");
 152             thumbnail.find("a.remove").html("<img style='display:inline-block' src='" + interface + "/" + theme + "/img/spinner-small.gif' alt='' />");
 153
 154             $.ajax({
 155                 url: "/cgi-bin/koha/svc/cover_images?action=delete&imagenumber=" + imagenumber,
 156                 success: function(data) {
 157                     $(data).each( function() {
 158                         if ( this.deleted == 1 ) {
 159                             if( itemnumber ) {
 160                                 location.href="/cgi-bin/koha/catalogue/imageviewer.pl?itemnumber=" + itemnumber;
 161                             } else {
 162                                 location.href="/cgi-bin/koha/catalogue/imageviewer.pl?biblionumber=" + biblionumber;
 163                             }
 164                         } else {
 165                             thumbnail.html( copy );
 166                             alert(_("An error occurred on deleting this image"));
 167                         }
 168                     });
 169                 },
 170                 error: function(data) {
 171                     thumbnail.html( copy );
 172                     alert(_("An error occurred on deleting this image"));
 173                 }
 174             });
 175         }
 176
 177         function showCover(img) {
 178             $('.thumbnail img').removeClass("selected");
 179             $('#largeCoverImg').attr("src","").attr('src', '/cgi-bin/koha/catalogue/image.pl?imagenumber=' + img);
 180             $('#thumbnail_' + img).addClass("selected");
 181         }
 182     </script>
 183 [% END %]
 184
 185 [% INCLUDE 'intranet-bottom.inc' %]