Bug 20168: Update of the OPAC bootstrap template to bootstrap v4
[srvgit] / koha-tmpl / opac-tmpl / bootstrap / en / modules / opac-overdrive-search.tt
1 [% USE raw %]
2 [% USE Asset %]
3 [% USE Koha %]
4 [% INCLUDE 'doc-head-open.inc' %]
5 <title>[% IF ( LibraryNameTitle ) %][% LibraryNameTitle | html %][% ELSE %]Koha online[% END %] catalog &rsaquo; OverDrive search for '[% q | html %]'</title>
6 [% INCLUDE 'doc-head-close.inc' %]
7 [% BLOCK cssinclude %]
8 [% END %]
9 </head>
10 [% INCLUDE 'bodytag.inc' bodyid='overdrive-results-page' bodyclass='scrollto' %]
11 [% INCLUDE 'masthead.inc' %]
12
13     <div class="main">
14         <nav aria-label="breadcrumb">
15             <ul class="breadcrumb">
16                 <li class="breadcrumb-item">
17                     <a href="/cgi-bin/koha/opac-main.pl">Home</a>
18                 </li>
19                 <li class="breadcrumb-item active" aria-current="page">
20                     <a href="#">OverDrive search for '[% q | html %]'</a>
21                 </li>
22             </ul>
23         </nav>
24
25         <div class="container-fluid">
26             <div class="row">
27                 <div class="col-lg-2">
28                     [% IF ( OpacNav || OpacNavBottom ) %]
29                         [% INCLUDE 'navigation.inc' %]
30                     [% END %]
31                 </div>
32                 <div class="col-lg-10 order-first order-md-first order-lg-2">
33                     <div id="overdrive-results-content" class="maincontent searchresults">
34                         <h1>OverDrive search for '[% q | html %]'</h1>
35                             <div id="breadcrumbs">
36                                 <p></p>
37                             </div>
38
39                             <div id="top-pages">
40                                 <nav class="pagination pagination-sm noprint" aria-label="Search results pagination">
41                                 </nav>
42                             </div>
43
44                             <table id="overdrive-results-list" class="table table-striped">
45                                 <tbody>
46                                 </tbody>
47                             </table>
48
49                             <div id="bottom-pages">
50                                 <nav class="pagination pagination-sm noprint" aria-label="Search results pagination">
51                                 </nav>
52                             </div>
53
54                     </div> <!-- / #overdrive-results-content -->
55                 </div> <!-- / .span10 -->
56             </div> <!-- / .row -->
57         </div> <!-- / .container-fluid -->
58     </div> <!-- / .main -->
59
60 [% IF ( Koha.Preference('OverDriveCirculation') ) %]
61     [% INCLUDE 'overdrive-checkout.inc' %]
62     [% IF ( Koha.Preference('OverDrivePasswordRequired') ) %]
63         [% INCLUDE 'overdrive-login.inc' %]
64     [% END %]
65 [% END %]
66
67 [% INCLUDE 'opac-bottom.inc' %]
68 [% BLOCK jsinclude %]
69     [% Asset.js("js/overdrive.js") | $raw %]
70     <script>
71         var OD_password_required = [% IF Koha.Preference('OverDrivePasswordRequired') %]1[% ELSE %]0[% END %];
72         var querystring = "[% q |replace( "'", "\'" ) |replace( '\n', '\\n' ) |replace( '\r', '\\r' ) | html %]";
73         var results_per_page = [% OPACnumSearchResults | html %];
74
75         function fetch_availability( prod, $tr ) {
76             var $availability_summary = $( '<span class="results_summary availability"></span>' );
77             $tr.find( '.mediatype' ).after( $availability_summary );
78             $availability_summary.html( '<span class="label">' + _("Availability:") + ' </span> ' + _("Loading...") );
79
80             KOHA.OverDrive.Get(
81                 prod.links.availability.href,
82                 {},
83                 function ( data ) {
84                     if ( data.error ) return;
85
86                     $availability_summary.html( '<span class="label">' + _("Availability:") + ' </span> ' + '<span class="available"><b>' + _("Items available:") + ' </b>' +  data.copiesAvailable + " " + _("out of") + ' ' + data.copiesOwned + '</span>' );
87
88                     if ( data.numberOfHolds ) {
89                         $availability_summary.find( '.available' ).append( ', ' + _("waiting holds:") + ' <strong>' + data.numberOfHolds + '</strong>' );
90                     }
91
92                     $tr.find( '.info' ).each(function() {
93                         KOHA.OverDriveCirculation.add_actions(this, data.id, data.copiesAvailable);
94                     });
95                 }
96             );
97         }
98
99         function search( offset ) {
100             $( '#overdrive-status' ).html( _("Searching OverDrive...") + ' <img class="throbber" src="[% interface | html %]/lib/jquery/plugins/themes/classic/throbber.gif" /></span>' );
101
102             KOHA.OverDrive.Search( "[% Koha.Preference('OverDriveLibraryID') | html %]", querystring, results_per_page, offset, function( data ) {
103                 if ( data.error ) {
104                     $( '#overdrive-status' ).html( '<strong class="unavailable">' + _("Error searching OverDrive collection.") + '</strong>' );
105                     return;
106                 }
107
108                 if ( !data.totalItems ) {
109                     $( '#overdrive-status' ).html( '<strong>' + _("No results found in the library's OverDrive collection.") + '</strong>' );
110                     return;
111                 }
112
113                 $( '#overdrive-results-list tbody' ).empty();
114
115                 $( '#overdrive-status' ).html( '<strong>' + _("Found") + ' ' + data.totalItems + ' ' + _("results in the library's OverDrive collection.") + '</strong>' );
116
117                 for ( var i = 0; data.products[i]; i++ ) {
118                     var prod = data.products[i];
119                     var results = [];
120
121                     results.push( '<tr>' );
122
123                     results.push( '<td class="info"><a class="title" href="', prod.contentDetails[0].href, '">' );
124                     results.push( prod.title );
125                     if ( prod.subtitle ) results.push( ', ', prod.subtitle );
126                     results.push( '</a>' );
127                     if ( prod.primaryCreator ) results.push( '<p>' + _("by") + ' ', prod.primaryCreator.name, '</p>' );
128                     results.push( '<span class="results_summary mediatype"><span class="label">' + _("Type:") + ' </span>', prod.mediaType, '</span>' );
129
130                     if ( prod.starRating ) {
131                         var rating_value = Math.round( prod.starRating );
132                         results.push( '<div class="results_summary ratings">' );
133                         results.push( '<div class="br-wrapper br-theme-fontawesome-stars">');
134                         results.push( '<div class="br-widget br-readonly">');
135                         for ( var rating = 1; rating <= 5; rating++ ) {
136
137                             results.push( '<a href="#"' );
138                             if( rating == rating_value ){
139                                 results.push( ' class="br-selected br-current"></a>' );
140                             } else if( rating_value > rating ){
141                                 results.push( ' class="br-selected"></a>' );
142                             } else {
143                                 results.push( '></a>');
144                             }
145                         }
146                         results.push( '</div>' );
147                         results.push( '</div>' );
148                         results.push( '</div>' );
149                     }
150
151                     results.push( '</td>' );
152
153                     results.push( '<td>' );
154                     if ( prod.images.thumbnail ) {
155                         results.push( '<a href="', prod.contentDetails[0].href, '">' );
156                         results.push( '<img class="thumbnail" src="', prod.images.thumbnail.href, '" />' );
157                         results.push( '</a>' );
158                     }
159                     results.push( '</td>' );
160
161                     results.push( '</tr>' );
162                     var $tr = $( results.join( '' ));
163                     $( '#overdrive-results-list tbody' ).append( $tr );
164
165                     fetch_availability( prod, $tr );
166                 }
167
168                 $( '#overdrive-results-list tr:odd' ).addClass( 'highlight' );
169
170                 var pages = [];
171                 var cur_page = offset / results_per_page;
172                 var max_page = Math.floor( data.totalItems / results_per_page );
173
174                 if ( cur_page != 0 ) {
175                     pages.push( '<li class="page-item"><a class="page-link od-nav" href="#" data-offset="' + (offset - results_per_page) + '">&laquo; ' + _("Previous") + '</a></li>' );
176                 }
177
178                 for ( var page = Math.max( 0, cur_page - 9 ); page <= Math.min( max_page, cur_page + 9 ); page++ ) {
179                     if ( page == cur_page ) {
180                         pages.push( ' <li class="page-item disabled"><a class="page-link" href="#">' + ( page + 1 ) + '</a></li>' );
181                     } else {
182                         pages.push( ' <li class="page-item"><a class="page-link od-nav" href="#" data-offset="' + ( page * results_per_page ) + '">' + ( page + 1 ) + '</a></li>' );
183                     }
184                 }
185
186                 if ( cur_page < max_page ) {
187                     pages.push( ' <li class="page-item"><a class="page-link od-nav" href="#" data-offset="' + (offset + results_per_page) + '">' + _("Next") + ' &raquo;</a></li>' );
188                 }
189
190                 if ( pages.length > 1 ) $( '#top-pages, #bottom-pages' ).find( '.pagination' ).html( '<ul class="pagination">' + pages.join( '' ) + '</ul>');
191
192             } );
193         }
194
195         $( document ).ready( function() {
196             $( '#breadcrumbs p' )
197                 .append( ' ' )
198                 .append( '<span id="overdrive-status"></span>' );
199
200             $( document ).on( 'click', 'a.od-nav', function() {
201                 search( $( this ).data( 'offset' ) );
202                 return false;
203             });
204
205             [% IF ( overdrive_error ) %]
206                 KOHA.OverDriveCirculation.display_error("#breadcrumbs", "[% overdrive_error.dquote | html %]");
207             [% END %]
208             [% IF ( loggedinusername and Koha.Preference('OverDriveCirculation') ) %]
209                 KOHA.OverDriveCirculation.with_account_details("#breadcrumbs", function() {
210                     search( 0 );
211                 });
212             [% ELSE %]
213                 search( 0 );
214             [% END %]
215         });
216     </script>
217 [% END %]