1 //QuanLib: eBook Library
2 //(C) 2017 by Christian Jaekl (cejaekl@yahoo.com)
7 mousePos: { // Last known position of the mouse cursor
14 map: {}, // map from book.Id to index into cache[]
18 milliSecs: 500, // time to wait before displaying tooltip
23 threshold: 10, // number of pixels that mouse can move before tip is dismissed
28 document.onmousemove = onMouseMove;
30 function adjustPos(setting) {
31 var value = parseInt(setting)
33 if (g_state.first === value) {
38 var maxFirst = Math.max(0, g_state.count - g_state.pageSize);
42 } else if (value > maxFirst) {
43 g_state.first = maxFirst;
45 g_state.first = value;
48 g_state.last = g_state.first + g_state.pageSize - 1;
49 if (g_state.last >= g_state.count) {
50 g_state.last = g_state.count - 1;
53 document.getElementById('slider').value = setting;
58 function bookHtml(book) {
59 var result = '<div class="book">'
62 + '<td><a href="/book/' + book.Id + '">';
63 if (0 == book.CoverId) {
64 result += '(No cover available)'
66 result += '<img class="cover-thumb" src="/download/' + book.CoverId + '"/>'
69 + '<td onclick="displayDetails(' + book.Id + ');" '
70 + ' onmouseover="startTooltipTimer(' + book.Id + ');">'
71 + '<p><b>' + book.Title + '</b></p>'
73 + '<i>' + book.AuthorReading + '</i>';
74 if (typeof(book.SeriesName) !== 'undefined' && book.SeriesName.length > 0) {
75 result += '<br/><i>' + book.SeriesName + ' ' + book.Volume + '</i>';
85 //ce(s): "clear if empty()"
86 //return s, unless it's undefined, in which case return an empty ("clear") string
88 if (typeof s !== 'undefined') {
94 function constructSearchUrl() {
95 var url = window.location.protocol + '//' + window.location.host + '/search/';
98 var terms = ['aut', 'tit', 'ser'];
101 var term = terms[idx];
102 var elem = document.getElementById(term);
104 console.log('Error: could not find form element for search term "' + term + '".');
108 var value = elem.value;
109 if (value.length > 0) {
117 url += term + '=' + encodeURIComponent('%' + value + '%');
124 // Set the book ID for the details pane, and then show it
125 function displayDetails(bookId) {
126 g_state.tooltip.bookId = bookId;
130 function hideDetails() {
131 g_state.tooltip.mousePos.x = undefined;
132 g_state.tooltip.mousePos.y = undefined;
134 var elem = document.getElementById('details');
136 elem.style.display = 'none';
139 function onMouseMove(event) {
140 if (typeof event === 'undefined') {
147 if ( x === g_state.mousePos.x
148 && y === g_state.mousePos.y)
150 // No change from previous known position.
151 // Nothing to see (or do) here, move along.
155 // Remember current mouse (x,y) position
156 g_state.mousePos.x = x;
157 g_state.mousePos.y = y;
159 // Is there an active tooltip?
160 if (typeof g_state.tooltip.mousePos.x === 'undefined') {
161 // No active tooltip, so nothing further to do
165 var deltaX = Math.abs(x - g_state.tooltip.mousePos.x);
166 var deltaY = Math.abs(y - g_state.tooltip.mousePos.y);
168 if ( deltaX > g_state.tooltip.threshold
169 || deltaY > g_state.tooltip.threshold )
176 if (g_state.last < (g_state.count - 1)) {
177 adjustPos(g_state.first + g_state.pageSize);
182 if (g_state.first > 0) {
183 adjustPos(g_state.first - g_state.pageSize);
187 function onSlide(value) {
191 function onSearch() {
192 var url = constructSearchUrl();
194 fetch(url, {method:'GET', cache:'default'})
195 .then(response => response.json())
196 .then((jsonValue) => {
197 // console.log('JSON response: ', jsonValue);
198 g_state.ids = jsonValue
199 g_state.count = g_state.ids.length;
202 var elem = document.getElementById('slider');
203 elem.max = g_state.count;
208 var msg = 'Error fetching JSON from URL: ' + url + ': ' + err + ':' + err.stack;
214 function refreshData() {
216 var url = '/info/?ids=';
218 for (i = g_state.first; i <= g_state.last; ++i) {
219 if (i > g_state.first) {
222 var id = g_state.ids[i];
224 g_state.map[id] = i - g_state.first;
227 fetch(url, {method:'GET', cache:'default'})
228 .then(response => response.json())
229 .then((jsonValue) => {
230 console.log('JSON response for info: ', jsonValue);
231 g_state.cache = jsonValue;
235 var msg = 'Error fetching book details via URL: ' + url + ': ' + err;
236 console.log(msg, err.stack);
241 function refreshLayout() {
244 var limit = g_state.last - g_state.first;
245 for (i = 0; i <= limit; ++i) {
246 var book = g_state.cache[i];
247 html += bookHtml(book);
250 document.getElementById('books').innerHTML = html;
251 document.getElementById('first').innerHTML = (g_state.first + 1);
252 document.getElementById('last').innerHTML = (g_state.last + 1);
253 document.getElementById('count').innerHTML = g_state.count;
256 function report(message) {
257 document.getElementById('books').innerHTML = message;
260 function showDetails() {
261 var id = g_state.tooltip.bookId;
262 var elem = document.getElementById('details');
263 var index = g_state.map[id];
264 var book = g_state.cache[index];
265 var html = '<div><p><b>' + book.Title + '</b></p>'
266 + '<p><i>' + ce(book.AuthorReading) + '<br/>' + ce(book.Series) + ' ' + ce(book.Volume) + '</i></p></div><div>'
267 + ce(book.Description)
270 // Remember the current mouse (x,y).
271 // If we move the mouse too far from this point, that will trigger hiding the tooltip.
272 g_state.tooltip.mousePos.x = g_state.mousePos.x;
273 g_state.tooltip.mousePos.y = g_state.mousePos.y;
275 elem.innerHTML = html;
277 elem.style.display = 'block'; // show, and calculate size, so that we can query it below
279 var x = g_state.mousePos.x;
280 var y = g_state.mousePos.y;
282 var bcr = elem.getBoundingClientRect();
284 var width = bcr.width;
285 var height = bcr.height;
287 x = Math.max(x - (width / 2), 0);
288 y = Math.max(y - (height / 2), 0);
290 elem.style.left = x + 'px';
291 elem.style.top = y + 'px';
294 function startTooltipTimer(bookId) {
295 if (typeof g_state.tooltip.timer !== 'undefined') {
296 clearTimeout(g_state.tooltip.timer);
298 g_state.tooltip.bookId = bookId;
299 g_state.tooltip.timer = setTimeout(showDetails, g_state.tooltip.milliSecs);
302 function stopTooltipTimer() {
303 if (typeof g_state.tooltip.timer === 'undefined') {
307 clearTimeout(g_state.tooltip.timer);
308 g_state.tooltip.timer = undefined;