APIs for Librarians

Helping you to help yourself in helping your patrons. Or something.

All Texts by Keyword


Description

This asks the archive.org API for a list of all of the texts (books, magazines, etc.) returned from a keyword search (that you specify) and then selects two from that list for display. It will select a new set on each page load.

Something like this can help promote seredipitous discovery in your research guides. It also has the benefit of being something that is fresh and constantly changing without you needing to constantly update it.

Screenshot

All Texts by Keyword screenshot

More details

It would be easy to adjust the number of entries displayed down to one and also possible, but not quite easy, to adjust them as high as you would want.

Overly long item descriptions are being hidden behind a link (“read more”). When clicked that will expand and show the rest of the description. I decided to do this because some of the descriptions were really long and some were quite brief and it the mixture of them looked bad. You can not do this if you choose, or you can modify the number of characters that are permitted to be displayed.

The Code

HTML

1
2
 
  <ul id="IA-books"></ul> 

CSS

1
2
3
4
5
 #IA-books { list-style-type: none; }
.flexy-container{ display: flex; align-items: center; } .flexy-container .left {
padding: 1rem; } @media (max-width: 500px) { .flexy-container{flex-wrap: wrap;}
.IA-book-image img {display: block;margin: 0 auto;} } a {text-decoration: dotted
underline gray;color:#333;}

JavaScript/jQuery

Notes for implementation:
The code itself:
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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
$(document).ready(function () {
    /*
     * jQuery Shorten plugin 1.1.0
     *
     * Copyright (c) 2014 Viral Patel
     * http://viralpatel.net
     *
     * Licensed under the MIT license:
     *   http://www.opensource.org/licenses/mit-license.php
     */

    /*
     ** updated by Jeff Richardson
     ** Updated to use strict,
     ** IE 7 has a "bug" It is returning undefined when trying to reference string characters in this format
     ** content[i]. IE 7 allows content.charAt(i) This works fine in all modern browsers.
     ** I've also added brackets where they weren't added just for readability (mostly for me).
     */

    (function ($) {
        $.fn.shorten = function (settings) {
            "use strict";

            var config = {
                showChars: 250,
                minHideChars: 10,
                ellipsesText: "...",
                moreText: "Read more",
                lessText: "Read less",
                onLess: function () {},
                onMore: function () {},
                errMsg: null,
                force: false
            };

            if (settings) {
                $.extend(config, settings);
            }

            if ($(this).data("jquery.shorten") && !config.force) {
                return false;
            }
            $(this).data("jquery.shorten", true);

            $(document).off("click", ".morelink");

            $(document).on({
                    click: function () {
                        var $this = $(this);
                        if ($this.hasClass("less")) {
                            $this.removeClass("less");
                            $this.html(config.moreText);
                            $this
                                .parent()
                                .prev()
                                .animate({
                                    height: "0" + "%"
                                }, function () {
                                    $this
                                        .parent()
                                        .prev()
                                        .prev()
                                        .show();
                                })
                                .hide("fast", function () {
                                    config.onLess();
                                });
                        } else {
                            $this.addClass("less");
                            $this.html(config.lessText);
                            $this
                                .parent()
                                .prev()
                                .animate({
                                    height: "100" + "%"
                                }, function () {
                                    $this
                                        .parent()
                                        .prev()
                                        .prev()
                                        .hide();
                                })
                                .show("fast", function () {
                                    config.onMore();
                                });
                        }
                        return false;
                    }
                },
                ".morelink"
            );

            return this.each(function () {
                var $this = $(this);

                var content = $this.html();
                var contentlen = $this.text().length;
                if (contentlen > config.showChars + config.minHideChars) {
                    var c = content.substr(0, config.showChars);
                    if (c.indexOf("<") >= 0) {
                        // If there's HTML don't want to cut it
                        var inTag = false; // I'm in a tag?
                        var bag = ""; // Put the characters to be shown here
                        var countChars = 0; // Current bag size
                        var openTags = []; // Stack for opened tags, so I can close them later
                        var tagName = null;

                        for (var i = 0, r = 0; r <= config.showChars; i++) {
                            if (content[i] == "<" && !inTag) {
                                inTag = true;

                                // This could be "tag" or "/tag"
                                tagName = content.substring(i + 1, content.indexOf(">", i));

                                // If its a closing tag
                                if (tagName[0] == "/") {
                                    if (tagName != "/" + openTags[0]) {
                                        config.errMsg =
                                            "ERROR en HTML: the top of the stack should be the tag that closes";
                                    } else {
                                        openTags.shift(); // Pops the last tag from the open tag stack (the tag is closed in the retult HTML!)
                                    }
                                } else {
                                    // There are some nasty tags that don't have a close tag like <br/>
                                    if (tagName.toLowerCase() != "br") {
                                        openTags.unshift(tagName); // Add to start the name of the tag that opens
                                    }
                                }
                            }
                            if (inTag && content[i] == ">") {
                                inTag = false;
                            }

                            if (inTag) {
                                bag += content.charAt(i);
                            } else {
                                // Add tag name chars to the result
                                r++;
                                if (countChars <= config.showChars) {
                                    bag += content.charAt(i); // Fix to ie 7 not allowing you to reference string characters using the []
                                    countChars++;
                                } else {
                                    // Now I have the characters needed
                                    if (openTags.length > 0) {
                                        // I have unclosed tags
                                        //console.log('They were open tags');
                                        //console.log(openTags);
                                        for (j = 0; j < openTags.length; j++) {
                                            //console.log('Cierro tag ' + openTags[j]);
                                            bag += "</" + openTags[j] + ">"; // Close all tags that were opened

                                            // You could shift the tag from the stack to check if you end with an empty stack, that means you have closed all open tags
                                        }
                                        break;
                                    }
                                }
                            }
                        }
                        c = $("<div/>")
                            .html(
                                bag + '<span class="ellip">' + config.ellipsesText + "</span>"
                            )
                            .html();
                    } else {
                        c += config.ellipsesText;
                    }

                    var html =
                        '<div class="shortcontent">' +
                        c +
                        '</div><div class="allcontent">' +
                        content +
                        '</div><span><a href="javascript://nop/" class="morelink">' +
                        config.moreText +
                        "</a></span>";

                    $this.html(html);
                    $this.find(".allcontent").hide(); // Hide all text
                    $(".shortcontent p:last", $this).css("margin-bottom", 0); //Remove bottom margin on last paragraph as it's likely shortened
                }
            });
        };
    })(jQuery);

    //returns a random number from a range
    function getRandomIntInclusive(min, max) {
        min = Math.ceil(min);
        max = Math.floor(max);
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }
    // Shows our spinner
    //$("#preloader").show();



    $.getJSON("https://archive.org/advancedsearch.php?q=%22beat+generation%22++mediatype%3Atexts&fl%5B%5D=creator&fl%5B%5D=description&fl%5B%5D=identifier&fl%5B%5D=publisher&fl%5B%5D=title&sort%5B%5D=&sort%5B%5D=&sort%5B%5D=&rows=500&page=1&output=json&callback=?", function (data) {
        // Removes our spinner once the ajax request is being displayed
       // $("#preloader").hide();



        //Get two random non-identical numbers
        let num1, num2;
        const getTwoRandom = function () {
            num1 = getRandomIntInclusive(0, data.response.docs.length);
            num2 = getRandomIntInclusive(0, data.response.docs.length);

            if (num1 == num2) {
                getTwoRandom();
            }
        };
        getTwoRandom(data);

        //Let's place our books on the page

        $("#IA-books").append(`<li class=flexy-container>
    <div class="left"><div class="IA-book-image"><a href="https://archive.org/details/${data.response.docs[num1].identifier}"><img src="https://archive.org/services/img/${
      data.response.docs[num1].identifier
    }"></a></div></div>

    <div class="right"><div class="IA-book-title"><h4> <a href="https://archive.org/details/${data.response.docs[num1].identifier}"> ${data.response.docs[num1].title}</a></h4>
    <h4>Description:</h4><p class="IA-book-description">${data.response.docs[num1].description}</p>
    </div></div>
    </li>`);

        $("#IA-books").append(`<li class=flexy-container>
    <div class="left"><div class="IA-book-image"><a href="https://archive.org/details/${data.response.docs[num1].identifier}"><img src="https://archive.org/services/img/${
      data.response.docs[num2].identifier
    }"></a></div></div>

    <div class="right"><div class="IA-book-title"><h4> <a href="https://archive.org/details/${data.response.docs[num1].identifier}"> ${data.response.docs[num2].title}</a></h4>
    <h4>Description:</h4><p class="IA-book-description">${data.response.docs[num2].description}</p>
    </div></div>
    </li>`);

 
        $(".IA-book-description").shorten();
    });
});