gms-library/index.html at master · unsoluble/gms-library · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<html>

<head>
	<link type="text/css" rel="stylesheet" href="jquery.qtip.min.css" />
	<link href='https://fonts.googleapis.com/css?family=Open Sans' rel='stylesheet'>
	<link href='styles.css' rel='stylesheet'>
	<base target="_parent">
</head>

<body>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
	<script type="text/javascript" src="jquery.qtip.min.js"></script>
	<script type="text/javascript" src="config.js"></script>

	<script type="text/javascript">

		function doStuff(sortOrder) {

			$.ajax( {
				url: 'https://www.librarything.com/api_getdata.php?userid=' + LibraryThingUsername + '&key=' + LibraryThingAPIKey + '&resultsets=books,bookdates,booktags&tagList=Regular&max=50&booksort=entry_REV&showTags=1',
				dataType: 'jsonp',
				success: function(result){

					var text = '';
					var numBooks = 18; // number of books to display
					var arrayOfBooks = $.map(result.books, function(el) { return el });

					arrayOfBooks.reverse(); // put the by-latest list in descending order

					function getRandomUnique(count) { // pull a random assortment of books from the returned set

						var tmp = arrayOfBooks.slice(arrayOfBooks);
						var ret = [];

						for (var i = 0; i < count; i++) {
							var index = Math.floor(Math.random() * tmp.length);
							var removed = tmp.splice(index, 1);
							ret.push(removed[0]);
						}
						return ret;
					}

					function sortOrNot(sortOrder) {		// order and display the books in either random or most-recent order,
														// and swap the links
						$('#random').html("<a href=\"javascript:doStuff('random');\" target=\"_self\">show random</a>");
						$('#latest').html("showing most recent");

						if (sortOrder == "random") {
							arrayOfBooks = getRandomUnique(50);
							$('#random').html("showing a random selection");
							$('#latest').html("<a href=\"javascript:doStuff('latest');\" target=\"_self\">show most recent</a>");
						}

						for (var i = 0; i < numBooks; i++) {
							var coverArt = arrayOfBooks[i].cover;
							if (arrayOfBooks[i].cover.indexOf("librarything") >=0 ) {
								coverArt = 'Generic_Cover.jpg'; // Cover art from LibraryThing (and not Amazon) doesn't load correctly, so use a generic image
							}
							var searchTerms = encodeURI(arrayOfBooks[i].title);
							var searchQuery = "https://search.follettsoftware.com/metasearch/ui/" + DestinyDiscoverID + "/search/all?q=" + searchTerms + "&resultsSortBy=MOSTRECENT";
							text += '<div class="book"><a href="' + searchQuery + '"><img class="cover" src="' + coverArt + '" /></a></div>';
							text += '<div class="hidden"><a href="' + searchQuery + '">' + arrayOfBooks[i].title + '</a><br><span class="author">by ' + arrayOfBooks[i].author_fl + '</span></div>';
						}

						$('#books').html(text); // populate the div with the covers
					}

					sortOrNot(sortOrder); // run the sort and display once on page load

					$('.book').each(function() { // tooltip stuff
						$(this).qtip({
							content: {
								text: $(this).next('div')
							},
							position: {
								my: 'top center',
								at: 'center',
								target: $(this),
								viewport: $(window),
								adjust: {
									method: 'shift none',
								}
							},
							hide: {
								event: 'mouseleave',
								fixed: true
							},
							style: {
								classes: 'qtip-light qtip-rounded'
							}
						});
					});
				}
			});
		}

		$(document).ready(doStuff("random")); // load the page, with random sort as default

	</script>
	<div id="selector">
		<span id="random"></span> |
		<span id="latest"></span>
	</div>
	<div id="books"></div>

</body>
</html>