Experimenting with the Google Books API. Users can enter a keyword for search - on page load, the default keyword is "math" - and see a populated drop down of up to 20 items. Selecting a new book from the drop down refreshes the reader in the center of the page with an embedded Google Book frame.
This would, ideally, be layered on top of a server-side fallback that would provide a direct link to the book in the event the user is running NoScript.
A Pen by Becky O'Brien on CodePen.
| <div class="controller"> | |
| <i class="fa fa-minus" title="Click to collapse options"></i> | |
| <i class="fa fa-plus hide" title="Click to expand options"></i> | |
| <input type="text" placeholder="Enter a keyword and press enter" value="" id="keyword" /> | |
| <select name="book" id="book"></select> | |
| </div> | |
| <div id="viewerCanvas" class="book"></div> | |
| <div id="credits"> | |
| <i class="fa fa-minus hide" title="Click to collapse credits"></i> | |
| <i class="fa fa-plus" title="Click to expand credits"></i> | |
| <ul id="rollcall" class="hide"> | |
| <li> | |
| <a href="http://www.colourlovers.com/pattern/4143305/" target="_blank" title="Letters to Milena | ColourLovers"> | |
| background colors & image | |
| </a> | |
| </li> | |
| <li> | |
| <a href="http://commons.wikimedia.org/wiki/File:VisualEditor_-_Icon_-_Open-book-2.svg" target="_blank" title="Open Book Icon | Pointillist | Wikimedia"> | |
| book icon | |
| </a> | |
| </li> | |
| <li> | |
| <a href="https://developers.google.com/books/" target="_blank" title="Google Books API Family | Google Developers"> | |
| google books api | |
| </a> | |
| </li> | |
| <li> | |
| <a href="http://jquery.com" target="_blank" title="jQuery"> | |
| jquery | |
| </a> | |
| </li> | |
| </ul> | |
| </div> |
| /* load the google books api */ | |
| google.load("books", "0"); | |
| jQuery(document).ready(function($) { | |
| /* on page load, fetch books about a default keyword (we picked math) */ | |
| fetchBooks("math"); | |
| /* if the volume can't be loaded, throw an error. */ | |
| function alertNotFound() { | |
| alert("Could not load the specified volume"); | |
| } | |
| /* make some CSS changes to the preview window */ | |
| function removePreviewFooter() { | |
| /* removes the footer to the preview */ | |
| $('#viewerCanvas > div > div:nth-child(2)').css('display','none'); | |
| /* calculate the window height, and place the search options 5% from the bottom */ | |
| var offset = ($(window).height() * .95) + "px"; | |
| $('#viewerCanvas > div > div > div:nth-child(2)').css('top', offset); | |
| } | |
| /* when someone selects a new book from the dropdown, load it */ | |
| $('#book').change(function(viewer) { | |
| /* get the ID of the book from the dropdown */ | |
| var book = $('#book').val(); | |
| /* if the value is empty, do nothing */ | |
| if(book === '') { | |
| return; | |
| } | |
| /* update the viewer */ | |
| var viewer = new google.books.DefaultViewer(document.getElementById('viewerCanvas')); | |
| viewer.load(book, alertNotFound, removePreviewFooter); | |
| }); | |
| /* when someone enters a new search term and clicks enter, run a new book search */ | |
| $('#keyword').change(function() { | |
| var keyword = $(this).val(); | |
| /* see fetchBooks function */ | |
| fetchBooks(keyword); | |
| }); | |
| /* font awesome icons are used to toggle things. when someone clicks on one, toggle | |
| * all the elements within the parent */ | |
| $('.fa').click(function() { | |
| var parent = $(this).parent(); | |
| $(parent).children().toggle(); | |
| $(parent).toggleClass('closed'); | |
| }); | |
| function fetchBooks(keyword) { | |
| /* the URL for the books REST api */ | |
| /* insert the keyword, wherever it's coming from - default or user entry */ | |
| var booksAPI = "https://www.googleapis.com/books/v1/volumes?q=" + keyword + "&sortBy=newest&filter=full&projection=lite&maxResults=20"; | |
| /* retrieve the json from the api */ | |
| $.getJSON( booksAPI, { | |
| }) | |
| /* when we're done retrieving the json, do something with it */ | |
| .done(function(data) { | |
| /* reset the internals of the select with a heading option */ | |
| /* use an empty string as the value for comparison purposes later */ | |
| $('#book').html("<option value=''>Browse some free books about " + keyword + "</option>"); | |
| /* iterate through the data. keep track with i */ | |
| $.each(data.items, function(i, item) { | |
| var rawTitle = item.volumeInfo.title; | |
| /* if the raw title is greater than 64 characters, | |
| * seperate it at the next word and append "..." | |
| * otherwise, do nothing */ | |
| if(rawTitle.length > 64) { | |
| var title = jQuery.trim(rawTitle).substring(0, 64).split(" ").slice(0, -1).join(" ") + "..."; | |
| } else { | |
| var title = rawTitle; | |
| } | |
| /* append each new book option to the select */ | |
| $('#book').append("<option value='" + item.id + "'>" + title + "</option>"); | |
| /* when it's reached 20 items, stop */ | |
| if ( i === 20 ) { | |
| return false; | |
| } | |
| }); | |
| }); | |
| }; | |
| }); |
| <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
| <script src="https://www.google.com/jsapi"></script> |
| /* colour lovers source: http://www.colourlovers.com/pattern/4143305/ */ | |
| @snowySky: #D4D2DD; | |
| @candyTimeBlue: #B4B5E3; | |
| @purpleElf: #8185A0; | |
| @ivoryTusk: #E8E2CC; | |
| @paperTowel: #FCFDF7; | |
| @floral: "https://www.dropbox.com/s/k7an4n8qov5m79x/floral.png?raw=1"; | |
| @book: "https://www.dropbox.com/s/pq72gp6ams36vnp/open-book.png?raw=1"; | |
| @font: 'Montserrat', sans-serif; | |
| @fontSize: 14px; | |
| .hide { | |
| display: none; | |
| } | |
| html { | |
| height: 100%; | |
| } | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| position: relative; | |
| overflow: hidden; | |
| background: @paperTowel url(@floral) repeat-x; | |
| height: 100%; | |
| .controller { | |
| overflow: hidden; | |
| position: absolute; | |
| padding: 10px; | |
| margin: 0px; | |
| top: .25%; | |
| left: 1%; | |
| border: 1px solid @purpleElf; | |
| z-index: 50000; | |
| background: @snowySky; | |
| width: 95%; | |
| &.closed { | |
| width: auto; | |
| background: @paperTowel; | |
| .fa { | |
| margin-right: 0px; | |
| } | |
| } | |
| .fa { | |
| width: 2%; | |
| margin: 0; | |
| vertical-align: middle; | |
| color: @purpleElf; | |
| } | |
| #keyword { | |
| display: inline-block; | |
| margin: 0; | |
| width: 23%; | |
| font-family: @font; | |
| font-size: @fontSize; | |
| padding: 5px; | |
| } | |
| #book { | |
| width: 70%; | |
| margin: 0; | |
| float: right; | |
| font-family: @font; | |
| font-size: @fontSize; | |
| padding: 5px; | |
| } | |
| } | |
| .more-options { | |
| position: absolute; | |
| padding: 10px; | |
| top: 30%; | |
| left: 1%; | |
| background: @snowySky; | |
| border: 1px solid @purpleElf; | |
| width: 25%; | |
| ul { | |
| padding: 0px; | |
| margin: 0px; | |
| list-style-type: none; | |
| li { | |
| width: 96%; | |
| padding: 0 2%; | |
| margin: 0 0 10px 0; | |
| a { | |
| } | |
| } | |
| } | |
| } | |
| .book { | |
| width: 40%; | |
| height: 100%; | |
| overflow-x: scroll; | |
| display: block; | |
| overflow: hidden; | |
| margin: auto; | |
| background: @paperTowel url(@book) center center; | |
| background-repeat: no-repeat; | |
| border-left: 10px solid @snowySky !important; | |
| border-right: 10px solid @snowySky !important; | |
| text-align: center; | |
| } | |
| #credits { | |
| overflow: hidden; | |
| position: absolute; | |
| padding: 10px; | |
| margin: 0px; | |
| bottom: .5%; | |
| right: 1%; | |
| border: 1px solid @purpleElf; | |
| z-index: 50000; | |
| background: @paperTowel; | |
| .fa { | |
| color: @purpleElf; | |
| } | |
| ul { | |
| list-style-type: none; | |
| margin: 0 25px 0 0px; | |
| padding: 0px; | |
| float: left; | |
| height: 14px; | |
| line-height: 14px; | |
| li { | |
| display: inline; | |
| float: left; | |
| border-left: 1px solid @purpleElf; | |
| padding: 0 5px; | |
| &:first-child { | |
| border-left: 0px; | |
| padding-left: 0px; | |
| } | |
| &:last-child { | |
| padding-right: 10px; | |
| } | |
| a { | |
| font-family: @font; | |
| font-size: 12px; | |
| text-decoration: none; | |
| color: @purpleElf; | |
| &:hover { | |
| color: @candyTimeBlue; | |
| text-decoration: underline; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } |
| <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" /> | |
| <link href="http://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" /> |