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