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