joseph / Monocle

A silky, tactile browser-based ebook JavaScript library.
http://monocle.inventivelabs.com.au
MIT License
743 stars 200 forks source link

How to implement placesaver? #261

Closed ghost closed 8 years ago

ghost commented 8 years ago

Hello. I am trying to implement placesaver on Monocle, but I can not do it work.

The code I use is:

<script type="text/javascript" src="monocore.js"></script>
<script type="text/javascript" src="monoctrl.js"></script> 

<script type="text/javascript">

  // Initialize the reader element.
  Monocle.Events.listen(
    window,
    'load',
    function () {

       window.reader = Monocle.Reader('book', null, {}, configureReader);

      Monocle.Events.listen(
        window,
        'resize',
        function () { window.reader.resized() }
      );

function configureReader(reader) {
var placeSaver = new Monocle.Controls.PlaceSaver(reader);
reader.addControl(placeSaver, 'invisible');
  var lastPlace = placeSaver.savedPlace();
  if (lastPlace) {
    placeSaver.restorePlace();
  }
}

    }

  );
</script>

<div id="book"></div>

A second option I have tried is:

<script type="text/javascript" src="monocore.js"></script>
<script type="text/javascript" src="monoctrl.js"></script> 

<script type="text/javascript">

  // Initialize the reader element.
  Monocle.Events.listen(
    window,
    'load',
    function () {

       window.reader = Monocle.Reader('book');

      Monocle.Events.listen(
        window,
        'resize',
        function () { window.reader.resized() }
      );

  /* PLACE SAVER */
  var placeSaver = new Monocle.Controls.PlaceSaver(reader);
  reader.addControl(placeSaver, 'invisible');
  var lastPlace = placeSaver.savedPlace();
  if (lastPlace) {
    placeSaver.restorePlace();
  }

    }

  );
</script>

<div id="book"></div>

After changing the page and refreshing the browser the first page is always shown.

Thanks in advance.

ghost commented 8 years ago

I have found the solution.

snsxn commented 8 years ago

Can you write the solution you found? It will help other trying to implement a placesaver in monocle

ghost commented 8 years ago

This is the code:

<script type="text/javascript">
  // Initialize the reader element.
  Monocle.Events.listen(
    window,
    'load',
    function () {

      var readerOptions = {
        panels: Monocle.Panels.Magic
      };

 var placeSaver = new Monocle.Controls.PlaceSaver('placesaver');

      Monocle.Reader(
        'book',
        null,
        { panels: Monocle.Panels.Magic, place: placeSaver.savedPlace() },
        function (rdr) {
          window.reader = rdr;
          rdr.addControl(placeSaver, 'invisible');
        }
      );

      Monocle.Events.listen(
        window,
        'resize',
        function () { window.reader.resized() }
      );

    }

  );
 </script>