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