This page is intended to document brainstorming for the following ticket: .
Goal
Provide an html5 PDF document viewer with page-turning capabilities.
Pre-requisites
- FlexPaper Zine Commercial License: http://flexpaper.devaldi.com/download/
- Copy css, js, and locale data into /dspace/modules/xmlui/src/main/webapp/static/flexpaper
Create a flexpaper viewer landing page
/dspace/modules/xmlui/src/main/webapp/static/flexpaper/template.html
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1,user-scalable=0,maximum-scale=1,width=device-width" />
<style type="text/css" media="screen">
html, body { height:100%; }
body { margin:0; padding:0; overflow:auto; }
#flashContent { display:none; }
</style>
<link rel="stylesheet" type="text/css" href="css/flexpaper.css?r57627" />
<script type="text/javascript" src="js/jquery.min.js?r57627"></script>
<script type="text/javascript" src="js/jquery.extensions.min.js?r57627"></script>
<script type="text/javascript" src="js/flexpaper.js?r57627"></script>
<script type="text/javascript" src="js/flexpaper_handlers.js?r57627"></script>
<script type="text/javascript">
$(document).ready(function(){
var loc = document.location.search;
//Pull the path attribute from the URL
loc = loc.replace(/.*path=/,"");
//Load the dynamic html5 viewer from FlexPaper.
//The full pdf must be downloaded to the browser before the document will be rendered
$('#documentViewer').FlexPaperViewer(
{ config : {
PDFFile : loc,
RenderingOrder : 'html5',
key : '<<License key goes here>>',
}}
);
//define a callback to be run once the document viewer has loaded
$('#documentViewer').bind('onDocumentLoaded',function(e,totalPages){
//this callback is executed before the rendering has completed
//therefore insert a short time delay before hiding the message at the top of the screen
setTimeout(function(){
$("#message").hide();
}, 1000);
});
});
</script>
</head>
<body>
<h4 id="message">The document viewer is being prepared. Please be patient while your document is loaded.</h4>
<div id="documentViewer" class="flexpaper_viewer" style="position:absolute;;width:100%;height:100%;background-color:#222222;;"></div>
</body>
</html>
XMLUI Theme Change
