Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

EPUB Reader using Monocle Issue : #252

Open
kasireddynv opened this issue Jun 20, 2014 · 6 comments
Open

EPUB Reader using Monocle Issue : #252

kasireddynv opened this issue Jun 20, 2014 · 6 comments

Comments

@kasireddynv
Copy link

I am tries to implement monocle example as shown below :

Code :

content1.html

<!DOCTYPE html>
<html>
  <head>
    <title>Lorem Ipsum</title>
  </head>
  <body>
    <h3>I</h3>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer neque neque, varius volutpat cursus vel, tristique vel mi. Etiam tincidunt metus sed libero fringilla venenatis. Suspendisse interdum, neque sit amet fringilla consectetur, nunc nulla accumsan est, vitae porta ligula eros non felis. Donec volutpat viverra metus, eu tincidunt lectus dapibus ac.
    </p>
    <p>
    Sed porttitor tristique libero, at feugiat ligula feugiat ut. Morbi cursus ornare blandit. Suspendisse sit amet sapien metus, sagittis condimentum elit. Sed mollis turpis sed turpis viverra venenatis. Ut viverra dignissim orci, sed egestas nisi lobortis quis. Nulla mi lacus, dictum quis interdum fringilla vitae, pretium sit amet sem. Phasellus vitae ante in mauris varius imperdiet volutpat sed felis. Donec mollis felis vitae magna luctus ut gravida augue luctus. Maecenas suscipit purus id odio euismod porttitor at volutpat purus.
    </p>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer neque neque, varius volutpat cursus vel, tristique vel mi. Etiam tincidunt metus sed libero fringilla venenatis. Suspendisse interdum, neque sit amet fringilla consectetur, nunc nulla accumsan est, vitae porta ligula eros non felis. Donec volutpat viverra metus, eu tincidunt lectus dapibus ac.
    </p>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget magna tortor, eget ullamcorper orci. Morbi vel odio et enim vestibulum varius. Praesent consequat porttitor augue, et vehicula mi venenatis eu. Curabitur dignissim dictum nulla in dignissim. Etiam et mauris nulla, at gravida augue. Donec quis nulla urna. Donec et diam eu arcu mollis blandit at a libero. Fusce iaculis, neque vitae hendrerit faucibus, odio orci euismod nisi, ut mattis lacus est ac dolor. Proin dictum pellentesque augue, ac lobortis tellus dignissim eget. Suspendisse nec nisl sapien, sit amet imperdiet lorem. Praesent vel lectus et risus mollis aliquet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce nec imperdiet elit. Ut rhoncus purus id leo lobortis faucibus. Maecenas at nulla nibh, vitae vulputate magna. Ut id eleifend tortor. Ut mollis tortor at nisl blandit elementum iaculis metus placerat. <i>Cras sed risus erat. Cras tincidunt massa et tellus rutrum consequat.</i> Pellentesque imperdiet augue sit amet turpis porta quis volutpat tortor mattis. Nunc non arcu quis nisl faucibus tempor. Nullam fringilla nisl et dolor convallis et imperdiet nunc ornare. In dictum fringilla enim, sed ultricies dolor ultrices et. Vestibulum consectetur eleifend viverra. Phasellus tempor tristique erat pharetra viverra. Aliquam varius nulla id risus egestas quis interdum nisi dapibus. Phasellus porttitor, lectus a bibendum feugiat, mi tellus pulvinar augue, a tempor orci urna vitae sapien. Suspendisse ante elit, dictum ut sodales nec, dictum ac sem. Curabitur et porttitor tellus. Morbi dapibus elementum placerat. Sed dui nisl, condimentum non faucibus sed, commodo in sem. Suspendisse non ipsum turpis, et suscipit massa. <i>Proin varius ante quis urna sollicitudin sollicitudin.</i> Vestibulum lectus elit, sagittis sit amet tincidunt eu, rutrum sed urna. Praesent pellentesque mi quis est interdum in congue erat congue. Ut nec felis sed orci sagittis dapibus. Proin orci lorem, viverra non porttitor nec, euismod elementum nunc. Mauris non scelerisque velit. Suspendisse potenti. Cras iaculis dictum elit ut ullamcorper. Integer sed urna pharetra odio semper vulputate eu in elit. Phasellus mollis lectus non nisl rutrum molestie. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget magna tortor, eget ullamcorper orci. Morbi vel odio et enim vestibulum varius. Praesent consequat porttitor augue, et vehicula mi venenatis eu. Curabitur dignissim dictum nulla in dignissim. Etiam et mauris nulla, at gravida augue. Donec quis nulla urna. Donec et diam eu arcu mollis blandit at a libero. Fusce iaculis, neque vitae hendrerit faucibus, odio orci euismod nisi, ut mattis lacus est ac dolor.
    </p>
  </body>
</html>

content2.html

<!DOCTYPE html>
<html>
  <head>
    <title>Lorem Ipsum</title>
  </head>
  <body>
    <h3>II</h3>
    <p>
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
    </p>
    <p>
    Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
    </p>
    <p>
    Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
    </p>
    <p>
    Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
    </p>
    <p>
    Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
    </p>
    <p>
    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.
    </p>
    <p>
    Et harum quidem rerum facilis est et expedita distinctio gremlins.
    </p>
  </body>
</html>

index.html

<!DOCTYPE html>
<head>
<title>Dummy</title>

<!-- MONOCLE CORE -->
<script type="text/javascript" src="js/monocle/src/monocle.js"></script>
<script type="text/javascript" src="js/monocle/src/compat.js"></script>
<script type="text/javascript" src="js/monocle/src/factory.js"></script>
<script type="text/javascript" src="js/monocle/src/events.js"></script>
<script type="text/javascript" src="js/monocle/src/styles.js"></script>
<script type="text/javascript" src="js/monocle/src/reader.js"></script>
<script type="text/javascript" src="js/monocle/src/book.js"></script>
<script type="text/javascript" src="js/monocle/src/component.js"></script>
<script type="text/javascript" src="js/monocle/src/place.js"></script>
<script type="text/javascript" src="js/monocle/src/framer.js"></script>
<script type="text/javascript" src="js/monocle/src/dimensions/columns.js"></script>

<!-- MONOCLE FLIPPERS -->
<script type="text/javascript" src="js/monocle/src/controls/panel.js"></script>
<script type="text/javascript" src="js/monocle/src/panels/twopane.js"></script>
<script type="text/javascript" src="js/monocle/src/dimensions/columns.js"></script>
<script type="text/javascript" src="js/monocle/src/flippers/slider.js"></script>

<link rel="stylesheet" type="text/css" href="js/monocle/src/monocle.css" />

<script type="text/javascript">

    var bookData = {
        getComponents: function () {
            return [
                'content1.html',
                'content2.html'
                ];
        },
        getContents: function () {
            return [
                {title: "Content Title 1", src: 'content1.html'},
                {title: "Content Title 2", src: 'content2.html'}
                ]
        },
        getComponent: function (componentId) {
            return {url:componentId};
        },
        getMetaData: function(key) {
            return {
                title: "Test document",
                creator: "Aron Woost"
                }[key];
        }
    }

    Monocle.Events.listen(
        window,
        'load',
        function () {
            window.reader = Monocle.Reader('reader', bookData);
        }
    );
</script>

</head>
<body>
    <div id="reader" style="width:300px; height:450px;">test</div>
</body>
</html>

The above example getting only test not getting the text of content1.html & content2.html. I didn't get any idea about this.

I hope to think missing js folder in this index.html to load js scripts but where i can download this js folder and download code from :

      https://gist.github.com/aronwoost/1134238

Here also not getting JS folder.

Can you please suggest me what to do for this problem?

Thanks in Advance.
@AbhilashThomas
Copy link

Please go through http://test.monoclejs.com/test/

@kasireddynv
Copy link
Author

Example looking good.
Can you please solve the my problem.I didn't get any idea.The above link also no js folder.

@NirbhayK
Copy link

I think the best way to start is to run monocle in your dev machine.
Here is the link to get you started.
https://github.com/joseph/Monocle/wiki/Getting-Monocle-running

@kasireddynv
Copy link
Author

Yeah,I am using that link to follow but facing problem.and i posted my problem as shown above.So can you please solve my problem.

@AbhilashThomas
Copy link

To begin with, no need to add so many scripts. Just add the monocore and monocontrol js files and the css files in your index.html.

The other two content.html files should be on the same path level of the index.html, i.e. same folder.

You have to create your own JS folder, place the js files and update the paths if required for the script tag in index.html.

You can get the scripts from http://test.monoclejs.com/dist/

If you still get issues, post the your console.logs. You can also set Monocle.DEBUG = true for further information in the console.

@kasireddynv
Copy link
Author

Yeah,Exactly,I had created one js folder but where i can find all those js scripts even not there you are given link as http://test.monoclejs.com/dist/.

with out js scripts not working.So please suggest me what to do?.@AbhilashThomas

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@NirbhayK @kasireddynv @AbhilashThomas