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