Re: [Koha-devel] Koha-devel Digest, Vol 90, Issue 4

2 May 2013

      Hi Nicholas:

Slick display! 

Perhaps someone else has already raised the idea, but might you consider
filing a bug in Bugzilla where you can provide the perl, template, css, and
images? That'll make it easier to share with others :).

http://bugs.koha-community.org/bugzilla3/

David Cook
Systems Librarian
Prosentient Systems P/L
ABN 31 078 409 168
72/330 Wattle St, 
Ultimo NSW 2007
tel: 02 92120899
fax: 02 92120885
dcook@prosentient.com.au

-----Original Message-----
From: koha-devel-bounces@lists.koha-community.org
[mailto:koha-devel-bounces@lists.koha-community.org] On Behalf Of
koha-devel-request@lists.koha-community.org
Sent: Thursday, 2 May 2013 3:06 PM
To: koha-devel@lists.koha-community.org
Subject: Koha-devel Digest, Vol 90, Issue 4

Send Koha-devel mailing list submissions to
	koha-devel@lists.koha-community.org

To subscribe or unsubscribe via the World Wide Web, visit
	http://lists.koha-community.org/cgi-bin/mailman/listinfo/koha-devel
or, via email, send a message with subject or body 'help' to
	koha-devel-request@lists.koha-community.org

You can reach the person managing the list at
	koha-devel-owner@lists.koha-community.org

When replying, please edit your Subject line so it is more specific than
"Re: Contents of Koha-devel digest..."

Today's Topics:

   1. Re: New books display for koha
      (Nicholas van Rheede van Oudtshoorn)

----------------------------------------------------------------------

Message: 1
Date: Thu, 2 May 2013 13:05:51 +0800
From: Nicholas van Rheede van Oudtshoorn <vanoudt@gmail.com>
To: koha-devel@lists.koha-community.org
Subject: Re: [Koha-devel] New books display for koha
Message-ID:
	<CAJ1eDORER-nZutQWPp05BYFg3caAkHq+8QjaDW91QG34v797Kg@mail.gmail.com>
Content-Type: text/plain; charset="iso-8859-1"

I should also mention that it can be seen running live at
http://library.pbc.wa.edu.au/

:-)
Nick

On Thu, May 2, 2013 at 12:58 PM, Nicholas van Rheede van Oudtshoorn <
vanoudt@gmail.com> wrote:
...
Oh, and of course one needs some css to make things look pretty! :-)
/* Book Cover Display */
div#newbooks {
        background-color: rgba(69, 34, 17, 0.8);
        background-image: -webkit-repeating-linear-gradient(left , 
rgba(0, 0, 0, 0.1), transparent 30px), 
-webkit-repeating-linear-gradient(left,
rgba(0, 0, 0, 0.1), transparent 50px), 
-webkit-repeating-linear-gradient(right, rgba(0, 0, 0, 0.1), 
transparent 70px), url(/noise.png) !important;
        background-image: -moz-repeating-linear-gradient(left, rgba(0, 
0, 0, 0.1), transparent 30px), -moz-repeating-linear-gradient(left, 
rgba(0, 0, 0, 0.1), transparent 50px), 
-moz-repeating-linear-gradient(right, rgba(0, 0, 0, 0.1), transparent
70px), url(/noise.png) !important;
        background-image: -ms-repeating-linear-gradient(left, rgba(0, 
0, 0, 0.1), transparent 30px), -ms-repeating-linear-gradient(left, 
rgba(0, 0, 0, 0.1), transparent 50px), 
-ms-repeating-linear-gradient(right, rgba(0, 0, 0, 0.1), transparent
70px), url(/noise.png) !important;
        background-image: -o-repeating-linear-gradient(left, rgba(0, 
0, 0, 0.1), transparent 30px), -o-repeating-linear-gradient(left, 
rgba(0, 0, 0, 0.1), transparent 50px), 
-o-repeating-linear-gradient(right, rgba(0, 0, 0, 0.1), transparent 70px),
url(/noise.png) !important;
        background-image: repeating-linear-gradient(left, rgba(0, 0, 
0, 0.1), transparent 30px), repeating-linear-gradient(left, rgba(0, 0, 
0, 0.1), transparent 50px), repeating-linear-gradient(right, rgba(0, 
0, 0, 0.1), transparent 70px), url(/noise.png) !important; w }
div.bookshelf {
        background-image: url(/bookshelf.png);
        background-size: 100% 190px;
        vertical-align: bottom;
        padding-top: 5px;
        border: 10px solid #452211;
        border-bottom: none;
        background-color: transparent;
        text-align: center;
}
.bookshelf .bookCover {
    display: inline-block;
    margin-bottom: 40px;
    margin-right: 10px;
}
.thumbnail {
        box-shadow: 2px 2px 2px 0 rgba(0,0,0,.7);
        max-height: 150px;
        border-radius: 2px 6px 6px 2px;
        border: 1px solid rgba(0, 0, 0, .7);
        min-height: 150px;
}
td .thumbnail {
        min-height: 114px;
        max-height: 114px;
}
.bookCover .thumbnail, .bookCover .fakeCover {
        border-radius: 2px 6px 6px 2px;
        box-shadow: 2px 2px 2px 0 rgba(0,0,0,.7);
        max-height: 150px;
        height: 150px;
}
.biblio > .bookCover .thumbnail, .biblio > .bookCover .fakeCover  {
        -webkit-transform:skewy(-4deg);
        -moz-transform:skewy(-4deg);
        -ms-transform: skewy(-4deg);
        -o-transform: skewy(-4deg);
        transform: skewy(-4deg);
}
.biblio > .bookCover:hover .thumbnail, .biblio > .bookCover:hover 
.fakeCover {
        box-shadow: 0 0 4px 2px rgba(255,255,255,.7);
        -webkit-transform:skewy(0deg) scale(1.33);
        -moz-transform:skewy(0deg) scale(1.33);
        -ms-transform:skewy(0deg) scale(1.33);
        -o-transform:skewy(0deg) scale(1.33);
        transform:skewy(0deg) scalue(1.33); } span.shelfhint {
        opacity: 0;
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: auto;
        color: white;
        z-index: 30;
        background-color: black;
        border-top-left-radius: 2px;
        border-top-right-radius: 6px;
        font-size: x-small;
        -webkit-transition: all .5s ease-in-out 0s;
        -moz-transition: all .5s ease-in-out 0s;
        -o-transition: all .5s ease-in-out 0s;
        -ms-transition: all .5s ease-in-out 0s;
        transition: all .5s ease-in-out 0s; }
a.biblio:hover > span.shelfhint {
        opacity: .6;
        -webkit-transition: all .5s ease-in-out 0s;
        -moz-transition: all .5s ease-in-out 0s;
        -o-transition: all .5s ease-in-out 0s;
        -ms-transition: all .5s ease-in-out 0s;
        transition: all .5s ease-in-out 0s; }
.biblio:before {
    background-color: rgba(0,0,0,.6);
    width: 40px;
    height: 105px;
    bottom: 60px;
    left: -15px;
    box-shadow: 0 0 20px 10px rgba(0,0,0,.6);
    display: block;
    position: absolute;
    content: "";
    -webkit-transform: skewx(15deg);
    -moz-transform: skewx(15deg);
    -ms-transform: skewx(15deg);
    -o-transform: skewx(15deg);
    transform: skewx(15deg);
    z-index: 0;
}
a.biblio {
        text-decoration: none;
        display: inline-block;
        margin: 0 8px;
        height: 190px;
        vertical-align: bottom;
        position: relative;
        margin-left: 15px;
}
#bookcover div.fakeCover {
        margin: 1em .5em .5em;
}
div.fakeCover {
        background-color: #54300c;
        background-image: url(/leather.png), 
-webkit-linear-gradient(left, transparent, rgba(0, 0, 0, 0.1) 1px, 
rgba(0, 0, 0, 0.5) 4px, transparent 8px);
        background-image: url(/leather.png), 
-moz-linear-gradient(left, transparent, rgba(0, 0, 0, 0.1) 1px, 
rgba(0, 0, 0, 0.5) 4px, transparent 8px);
        background-image: url(/leather.png),    -ms-linear-gradient(left,
transparent, rgba(0, 0, 0, 0.1) 1px, rgba(0, 0, 0, 0.5) 4px, 
transparent 8px);
        background-image: url(/leather.png),     -o-linear-gradient(left,
transparent, rgba(0, 0, 0, 0.1) 1px, rgba(0, 0, 0, 0.5) 4px, 
transparent 8px);
        background-image: url(/leather.png),        linear-gradient(left,
transparent, rgba(0, 0, 0, 0.1) 1px, rgba(0, 0, 0, 0.5) 4px, 
transparent 8px);
        border: 2px solid rgba(0, 0, 0, 0.5);
        border-radius: 2px 6px 6px 2px;
        width: 110px;
        height: 150px;
        position: relative;
        text-decoration: none;
        color: #999;
        -webkit-transition: all 0.5s ease-in-out 0s;
        -moz-transition: all 0.5s ease-in-out 0s;
        -ms-transition: all 0.5s ease-in-out 0s;
        -o-transition: all 0.5s ease-in-out 0s;
        transition: all 0.5s ease-in-out 0s; }
div.fakeCover > span {
        color: rgba(0,0,0, 0.6);
        background-color: rgba(255,255,255,.1);
        border-radius: 5px;
        border: 1px solid rgba(0,0,0,.05);
        display: block;
        font-family: arial,sans-serif;
        height: auto;
        margin: 8px;
        margin-left: 15px;
        padding: 2px;
        text-align: center;
        width: 81px;
        max-height: 100px;
        position: absolute;
}
div.fakeCover > span.title {
        font-size: x-small;
        top: 0px;
}
div.fakeCover > span.author {
        font-size: xx-small;
        bottom: 0px;
}
span.no-image {
        display: none;
}
On Thu, May 2, 2013 at 12:01 PM, Nicholas van Rheede van Oudtshoorn < 
vanoudt@gmail.com> wrote:
...
Hello all!
A while back (a few years, I think!) I wrote and posted to this 
mailing list a set of php scripts that provided a new books display. 
When we recently upgraded our koha instance (shifting to Plack in the 
process!), I decided to rewrite this new books display in perl.
And I thought I'd put it up here in case anyone was interested in it.
Perl's not my language of choice - so if there are any improvements 
to be made, please let me know.
To use it, simply install the newbooksdisplay.pl in the opac cgi-bin 
directory, and add the following snippet to the OpacMain
systempreferences:
<h2 style="align="center">Newest books in the library</h2> <div 
id="newbooks"></div> <script type="text/javascript"> 
$("#newbooks").load("/cgi-bin/koha/newbooksdisplay.pl", function() {
KOHA.Google.GetCoverFromIsbn();
});
</script>
I've also modified the google-jackets.js to produce a nice artificial 
cover if none is available from google books (currently only if the 
correct
HTML5 data tags are supplied, as in the newbooksdisplay)
if (typeof KOHA == "undefined" || !KOHA) {
    var KOHA = {};
}
/**
 * A namespace for Google related functions.
 */
KOHA.Google = {
/**
     * Search all:
*    <div title="biblionumber" id="isbn"
class="gbs-thumbnail"></div>
     * or
     *    <div title="biblionumber" id="isbn"
class="gbs-thumbnail-preview"></div>
* and run a search with all collected isbns to Google Book Search.
     * The result is asynchronously returned by Google and catched by
     * gbsCallBack().
     */
    GetCoverFromIsbn: function(newWindow) {
var bibkeys = [];
        $("div [id^=gbs-thumbnail]").each(function(i) {
            bibkeys.push($(this).attr("class").split(' ')[0]); // id=isbn
        });
        bibkeys = bibkeys.join(',');
var scriptElement = document.createElement("script");
        this.openInNewWindow=newWindow;
        scriptElement.setAttribute("id", "jsonScript");
        scriptElement.setAttribute("src",
"http://books.google.com/books?bibkeys=" + escape(bibkeys) +
            "&jscmd=viewapi&callback=KOHA.Google.gbsCallBack");
scriptElement.setAttribute("type", "text/javascript");
document.documentElement.firstChild.appendChild(scriptElement);
},
/**
     * Add cover pages <div
* and link to preview if div id is gbs-thumbnail-preview
     */
    gbsCallBack: function(booksInfo) {
         var target = '';
         if (this.openInNewWindow) {
            target = 'target="_blank" ';
}
         for (id in booksInfo) {
             var book = booksInfo[id];
             $("."+book.bib_key).each(function() {
      var gbsre = /^gbs-thumbnail/;
      if ( gbsre.exec($(this).attr("id")) ) {
var a = document.createElement("a");
        	         a.href = book.info_url;
                	 if (typeof(book.thumbnail_url) != "undefined") {
                       var img = document.createElement("img");
img.setAttribute("class","thumbnail");
                	     img.src = book.thumbnail_url+"&zoom=1";
        	             $(this).append(img);
                       var re = /^gbs-thumbnail-preview/;
if ( re.exec($(this).attr("id")) ) {
                	         $(this).append(
                        	     '<div style="margin-bottom:5px; 
margin-top:-5px;font-size:9px">' +
'<a '+target+'href="' +
        	                     book.info_url +
                	             '"><img src="' +
'http://books.google.com/intl/en/googlebooks/images/gbs_preview_stick
er1.gif' +
'"></a></div>'
        	                     );
                       }
        	         } else if ($(this).attr('data-title')) {
      			var fakeCoverDiv =
document.createElement("div");
$(fakeCoverDiv).attr("class",
"fakeCover");
      			$(this).append(fakeCoverDiv);
      			var auSpan =
document.createElement("span");
      			$(auSpan).attr("class", "author");
$(auSpan).html($(this).attr("data-author"));
...
$(fakeCoverDiv).append(auSpan);
                                        var tiSpan =
document.createElement("span");
...
$(tiSpan).attr("class", 
"title");
$(tiSpan).html($(this).attr("data-title"));
...
$(fakeCoverDiv).append(tiSpan);
      	 } else {
                  	     var message =
document.createElement("span");
...
$(message).attr("class","no-image");
        		             $(message).html(NO_GOOGLE_JACKET);
                  	     $(this).append(message);
                   }
      }
});
         }
     }
};