Personal/cops
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Complete working example

Browse source 
--HG--
extra : rebase_source : d0f38d1aa980ddec8e60dbe8ddd7689509257886
This commit is contained in:
Sébastien Lucas 2013-05-15 12:11:47 +02:00
parent c8a87a37d4
commit 3a61b70445
1 changed files with 22 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
epubreader.php
View file

@ -18,39 +18,32 @@ $book->initSpineComponent ();
<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no" /> <meta name="viewport" content="width=device-width, height=device-height, user-scalable=no" />
<title>COPS's Epub Reader</title> <title>COPS's Epub Reader</title>
<script type="text/javascript" src="<?php echo getUrlWithVersion("js/jquery-1.9.1.min.js") ?>"></script> <script type="text/javascript" src="<?php echo getUrlWithVersion("js/jquery-1.9.1.min.js") ?>"></script>
<script type="text/javascript" src="<?php echo getUrlWithVersion("resources/monocle/scripts/monocore.js") ?>"></script> <script type="text/javascript" src="<?php echo getUrlWithVersion("resources/monocle320/scripts/monocore.js") ?>"></script>
<link rel="stylesheet" type="text/css" href="<?php echo getUrlWithVersion("resources/monocle/styles/monocore.css") ?>" media="screen" /> <link rel="stylesheet" type="text/css" href="<?php echo getUrlWithVersion("resources/monocle320/styles/monocore.css") ?>" media="screen" />
<style type="text/css">
#reader { width: 500px; height: 800px; border: 1px solid #000; }
</style>
<script type="text/javascript"> <script type="text/javascript">
Monocle.DEBUG = true;
var bookData = { var bookData = {
getComponents: function () { getComponents: function () {
<?php echo "return [" . implode (", ", array_map (function ($comp) { return "'" . $comp . "'"; }, $book->components ())) . "];"; ?> <?php echo "return [" . implode (", ", array_map (function ($comp) { return "'" . $comp . "'"; }, $book->components ())) . "];"; ?>
}, },
getContents: function () { getContents: function () {
<?php echo "return [" . implode (", ", array_map (function ($content) { return "{title: '" . $content["title"] . "', src: '". $content["src"] . "']"; }, $book->contents ())) . "];"; ?> <?php echo "return [" . implode (", ", array_map (function ($content) { return "{title: '" . $content["title"] . "', src: '". $content["src"] . "'}"; }, $book->contents ())) . "];"; ?>
return [
{
title: "Chapter 1",
src: "component1.xhtml"
}, },
{ getComponent: function (componentId, callback) {
title: "Chapter 2", $.ajax({
src: "component3.xhtml#chapter-2" url: "epubfs.php?comp=" + componentId,
type: 'get'
, dataType: 'text'
, error: function () {alert ("error");}
, success: function (data, textStatus, jqXHR ) {
//alert (textStatus);
//alert (data);
callback (data);
} }
] });
},
getComponent: function (componentId) {
return {
'component1.xhtml':
'<h1>Chapter 1</h1><p>Hello world</p>',
'component2.xhtml':
'<p>Chapter 1 continued.</p>',
'component3.xhtml':
'<p>Chapter 1 continued again.</p>' +
'<h1 id="chapter-2">Chapter 2</h1>' +
'<p>Hello from the second chapter.</p>',
'component4.xhtml':
'<p>THE END.</p>'
}[componentId];
}, },
getMetaData: function(key) { getMetaData: function(key) {
return { return {
@ -63,5 +56,8 @@ $book->initSpineComponent ();
</script> </script>
</head> </head>
<body> <body>
<div id="reader">
</div>
<script type="text/javascript">Monocle.Reader('reader', bookData, {});</script>
</body> </body>
</html> </html>