Monocle reader next and previous button

[rodolfo tuble]

I found this code at the github site:

Forward: reader.moveTo({ direction: 1 })

Backward: reader.moveTo({ direction: -1 })




But i am not sure how to apply it

I made a function that calls either one of those 2 but sadly it returns an undefined error, i'm guessing the reader is undefined but how do i define it or what do I have

to change for it to work?

Thank you

[rodolfo tuble]

I created this function for next and previous button, in other words there are 2 buttons in my html page and when i click next or previous the pages in the monocle will also move accordingly,

i read that i have to use a custom page flipper for this but they have not provided an example of how to create one.

this is what i've tried and fails:

function fileSelected(event,str) {

var thefile = document.getElementById('file');

var tval = thefile.value;

    var ext = tval.split('.').pop();

    var files = event.target.files;

var fname = tval.split(/(\\|\/)/g).pop();

   if (ext == "epub" || ext == "EPUB"){

function createReader(bookData) {

Monocle.Reader("reader", bookData);

}

new Epub(files[0], createReader);

   }else if(ext == "htm" || ext == "htm" || ext == "html" || ext == "HTML"){

var bookData = {

getComponents: function () {

return [

fname

];

},

getContents: function () {

return [

{title: "test", src: fname}

]

},

getComponent: function (componentId) {

return {url:componentId};

},

getMetaData: function(key) {

return {

title: "Test documents",

creator: "Aron Woost"

}[key];

}

}

window.reader = Monocle.Reader('reader', bookData);

   }else{

return false;

   }

   

   

}

function next(){

Monocle.Reader('reader', {}, {}, function (reader) {

 reader.moveTo({ direction: 1 });

});

}

when clicking next will give an undefined error in my console.

any idea as how to implement a custom page flipper?

https://github.com/joseph/Monocle/wiki/Page-flippers

I am not that savvy in JS. sorry :(

[Robert Schroll]

On Thu, Jun 12, 2014 at 8:36 AM, rodolfo tuble <rtc...@gmail.com>
wrote:

> I created this function for next and previous button, in other words
> there are 2 buttons in my html page and when i click next or previous
> the pages in the monocle will also move accordingly,
> i read that i have to use a custom page flipper for this but they
> have not provided an example of how to create one.

You're describing two different things here. Flippers govern how
Monocle transitions from one page to another. They are not things that
cause a page turn. I'm assuming you want to cause the page turn, not
implement a flipper; if that's wrong, please clarify your question.

> function next(){
> Monocle.Reader('reader', {}, {}, function (reader) {
> reader.moveTo({ direction: 1 });
> });
> }
>
> when clicking next will give an undefined error in my console.

Calling 'Monocle.Reader()' creates a new reader, which is not what you
want to do. Instead, you want to call moveTo() on the existing reader.
In the second code path above (html files), you assign the reader to
window.reader, so all you have to do is call 'window.reader.moveTo()'.
In the first code path (epub files), you'll also need to assign the
reader to window.reader for this to work.

Robert

[rodolfo tuble]

Yes i want to turn pages using buttons, can you provide an example based on my code as it will be much easier for me to understand. sorry for the trouble and thank you :)

[Cameron Moss]

first you need to create the reader...

var reader = Monocle.Reader(

      'reader',
      ...

then include the following to say move left or right on left or right arrow keypress (37,39)

Monocle.Events.listen(window.top.document, 'keyup', handleKeyEvent);

    

function handleKeyEvent(evt) {

      var eventCharCode = evt.charCode || evt.keyCode;

      var dir = null;

      if (eventCharCode == 37) {

        dir = -1;

      } else if (eventCharCode == 39) {

        dir = 1;

      }

      if (dir) {

        reader.moveTo({

          direction: dir

        });

        evt.preventDefault();

      }

}