OPAC QR Code

Add this to your OPACUserCSS system preference:

a.show_qrcode {
 padding-left:35px;
 background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALAgMAAADUwp+1AAAACVBMVEUzban//8z///8fhy3sAAAAK0lEQVR42mNgUGBg0BJawKAkpACmGQQYGKaGRgBpEJ+BQUmgA0gDFSkxAAB3qQUjA3ioDgAAAABJRU5ErkJggg==) no-repeat scroll 11px center transparent
}
#qrcode {
 padding:1em;
}

Add this to the OPACUserJS system preference:

jQuery.cachedScript = function( url, options ) {
    // https://api.jquery.com/jQuery.getScript/
    // Allow user to set any option except for dataType, cache, and url
    options = $.extend( options || {}, {
        dataType: "script",
        cache: true,
        url: url
    });
    // Use $.ajax() since it is more flexible than $.getScript
    // Return the jqXHR object so we can chain callbacks
    return jQuery.ajax( options );
};

$(document).ready(function(){
    if( $("#opac-detail").length > 0 ){ // Run this JS only on the bibliographic detail page
        $.cachedScript( "https://cdn.jsdelivr.net/npm/kjua@0.6.0/dist/kjua.min.js" ).done(function( script, textStatus ) {
            // If the QR Code-generating JS library loads successfully, add the code to the page
            $("#action").append("<li><a class=\"show_qrcode\" href=\"#\">Send to device</a><div id=\"qrcode\" class=\"hidden\"></div></li>");
            var qrcode = kjua({
                ecLevel: "H",
                render: "canvas",
                rounded: 100,
                size: 150,
                text: location.href,
            });
            if (qrcode) {
                document.getElementById("qrcode").appendChild( qrcode );
            }
        });
        // Add the click handler for the new "Send to device" menu item
        $("body").on("click", ".show_qrcode", function(){
            var qrcodeImg = $("#qrcode");
            if( qrcodeImg.hasClass("hidden") ){
                qrcodeImg.removeClass("hidden");
            } else {
                qrcodeImg.addClass("hidden");
            }
        });

    }
});


No comments:

Post a Comment