Bug 11810: Input fields in OPAC suggestion form are a bit short (Bootstrap)
[koha.git] / koha-tmpl / opac-tmpl / bootstrap / en / modules / opac-overdrive-search.tt
1 [% USE Koha %]
2 [% INCLUDE 'doc-head-open.inc' %]
3 [% IF ( LibraryNameTitle ) %][% LibraryNameTitle %][% ELSE %]Koha online[% END %] catalog › OverDrive search for '[% q | html %]'
4 [% INCLUDE 'doc-head-close.inc' %]
5 [% BLOCK cssinclude %]
6 <link rel="stylesheet" type="text/css" href="[% interface %]/[% theme %]/css/jquery.rating.css" />
7 <style>
8 .actions a.addtocart {
9     display: inline;
10 }
11 </style>
12 [% END %]
13 </head>
14 <body id="overdrive-results-page" class="scrollto">
15 [% INCLUDE 'masthead.inc' %]
16
17     <div class="main">
18         <ul class="breadcrumb">
19             <li><a href="/cgi-bin/koha/opac-main.pl">Home</a> <span class="divider">&rsaquo;</span></li>
20             <li><a href="#">OverDrive search for '[% q | html %]'</a></li>
21         </ul>
22
23         <div class="container-fluid">
24             <div class="row-fluid">
25                 <div class="span2">
26                     [% IF ( OpacNav || OpacNavBottom ) %]
27                         [% INCLUDE 'navigation.inc' %]
28                     [% END %]
29                 </div>
30                 <div class="span10">
31                     <div id="overdrive-results-content" class="maincontent searchresults">
32                         <h1>OverDrive search for '[% q | html %]'</h1>
33                             <div id="breadcrumbs">
34                                 <p></p>
35                             </div>
36
37                             <div id="top-pages">
38                                 <div class="pagination pagination-small">
39                                 </div>
40                             </div>
41
42                             <table id="overdrive-results-list" class="table table-striped">
43                                 <tbody>
44                                 </tbody>
45                             </table>
46
47                             <div id="bottom-pages">
48                                 <div class="pagination pagination-small">
49                                 </div>
50                             </div>
51
52                     </div> <!-- / #overdrive-results-content -->
53                 </div> <!-- / .span10 -->
54             </div> <!-- / .row-fluid -->
55         </div> <!-- / .container-fluid -->
56     </div> <!-- / .main -->
57
58 [% INCLUDE 'opac-bottom.inc' %]
59 [% BLOCK jsinclude %]
60 <script type="text/javascript" src="[% interface %]/[% theme %]/js/overdrive.js"></script>
61 <script type="text/javascript" src="[% interface %]/[% theme %]/lib/jquery/plugins/jquery.rating.js"></script>
62 <script type="text/javascript">
63 var querystring = "[% q |replace( "'", "\'" ) |replace( '\n', '\\n' ) |replace( '\r', '\\r' ) |html %]";
64 var results_per_page = [% OPACnumSearchResults %];
65
66 function fetch_availability( prod, $tr ) {
67     var $availability_summary = $( '<span class="results_summary availability"></span>' );
68     $tr.find( '.mediatype' ).after( $availability_summary );
69     $availability_summary.html( '<span class="label">' + _("Availability:") + ' </span> ' + _("Loading...") );
70
71     KOHA.OverDrive.Get(
72         prod.links.availability.href,
73         {},
74         function ( data ) {
75             if ( data.error ) return;
76
77             $availability_summary.html( '<span class="label">' + _("Availability:") + ' </span> ' + '<span class="available"><b>' + _("Items available:") + ' </b>' +  data.copiesAvailable + " " + _("out of") + ' ' + data.copiesOwned + '</span>' );
78
79             if ( data.numberOfHolds ) {
80                 $availability_summary.find( '.available' ).append( ', ' + _("waiting holds:") + ' <strong>' + data.numberOfHolds + '</strong>' );
81             }
82
83             $tr.find( '.info' ).append( '<div class="actions-menu"><span class="actions"><a href="' + prod.contentDetails[0].href + '" ' + ( data.copiesAvailable ? ( ' class="addtocart">' + _("Check out") ) : ( ' class="hold">' + _("Place hold") ) ) + '</a></span></div>' );
84         }
85     );
86 }
87
88 function search( offset ) {
89     $( '#overdrive-status' ).html( _("Searching OverDrive...") + ' <img class="throbber" src="[% interface %]/lib/jquery/plugins/themes/classic/throbber.gif" /></span>' );
90
91     KOHA.OverDrive.Search( "[% OverDriveLibraryID %]", querystring, results_per_page, offset, function( data ) {
92         if ( data.error ) {
93             $( '#overdrive-status' ).html( '<strong class="unavailable">' + _("Error searching OverDrive collection.") + '</strong>' );
94             return;
95         }
96
97         if ( !data.totalItems ) {
98             $( '#overdrive-status' ).html( '<strong>' + _("No results found in the library's OverDrive collection.") + '</strong>' );
99             return;
100         }
101
102         $( '#overdrive-results-list tbody' ).empty();
103
104         $( '#overdrive-status' ).html( '<strong>' + _("Found") + ' ' + data.totalItems + ' ' + _("results in the library's OverDrive collection.") + '</strong>' );
105
106         for ( var i = 0; data.products[i]; i++ ) {
107             var prod = data.products[i];
108             var results = [];
109
110             results.push( '<tr>' );
111
112             results.push( '<td class="info"><a class="title" href="', prod.contentDetails[0].href, '">' );
113             results.push( prod.title );
114             if ( prod.subtitle ) results.push( ', ', prod.subtitle );
115             results.push( '</a>' );
116             results.push( '<p>' + _("by") + ' ', prod.primaryCreator.name, '</p>' );
117             results.push( '<span class="results_summary mediatype"><span class="label">' + _("Type:") + ' </span>', prod.mediaType, '</span>' );
118
119             if ( prod.starRating ) {
120                 results.push( '<div class="results_summary ratings">' );
121                 for ( var rating = 1; rating <= 5; rating++ ) {
122                     results.push( '<input class="star" type="radio" name="rating-' + i + '" value="' + rating + '"' + ( rating == Math.round( prod.starRating ) ? ' checked="checked"' : '' ) + ' disabled="disabled" />' );
123                 }
124                 results.push( '</div>' );
125             }
126
127             results.push( '</td>' );
128
129             results.push( '<td>' );
130             if ( prod.images.thumbnail ) {
131                 results.push( '<a href="', prod.contentDetails[0].href, '">' );
132                 results.push( '<img class="thumbnail" src="', prod.images.thumbnail.href, '" />' );
133                 results.push( '</a>' );
134             }
135             results.push( '</td>' );
136
137             results.push( '</tr>' );
138             var $tr = $( results.join( '' ));
139             $( '#overdrive-results-list tbody' ).append( $tr );
140
141             fetch_availability( prod, $tr );
142         }
143
144         $( '#overdrive-results-list tr:odd' ).addClass( 'highlight' );
145
146         var pages = [];
147         var cur_page = offset / results_per_page;
148         var max_page = Math.floor( data.totalItems / results_per_page );
149
150         if ( cur_page != 0 ) {
151             pages.push( '<li><a class="od-nav" href="#" data-offset="' + (offset - results_per_page) + '">&laquo; ' + _("Previous") + '</a></li>' );
152         }
153
154         for ( var page = Math.max( 0, cur_page - 9 ); page <= Math.min( max_page, cur_page + 9 ); page++ ) {
155             if ( page == cur_page ) {
156                 pages.push( ' <li class="active"><a href="#">' + ( page + 1 ) + '</a></li>' );
157             } else {
158                 pages.push( ' <li><a class="od-nav" href="#" data-offset="' + ( page * results_per_page ) + '">' + ( page + 1 ) + '</a></li>' );
159             }
160         }
161
162         if ( cur_page < max_page ) {
163             pages.push( ' <li><a class="od-nav" href="#" data-offset="' + (offset + results_per_page) + '">' + _("Next") + ' &raquo;</a></li>' );
164         }
165
166         if ( pages.length > 1 ) $( '#top-pages, #bottom-pages' ).find( '.pagination' ).html( '<ul>' + pages.join( '' ) + '</ul>');
167
168         $( '#overdrive-results-list input.star' ).rating();
169     } );
170 }
171
172 $( document ).ready( function() {
173     $( '#breadcrumbs p' )
174         .append( ' ' )
175         .append( '<span id="overdrive-status"></span>' );
176
177     $( document ).on( 'click', 'a.od-nav', function() {
178         search( $( this ).data( 'offset' ) );
179         return false;
180     });
181
182     search( 0 );
183 } );
184 </script>
185 [% END %]