diff --git a/reader/templates/reader/book_read/bookreader_save.js b/reader/templates/reader/book_read/bookreader_save.js index 0a8ca998ad228b180923d9c3ec3c42635d03da6a..cfa283ea1ae4f3c00cd21291d6699539fa9bf382 100644 --- a/reader/templates/reader/book_read/bookreader_save.js +++ b/reader/templates/reader/book_read/bookreader_save.js @@ -2,13 +2,16 @@ let last_save_time = new Date(); let saveTimeout = null; function realSaveProgress(location, percentage) { + // Save the progress to the server let data = { csrfmiddlewaretoken: "{{ csrf_token }}", last_progress_cfi: location, last_progress_device: "Web Viewer", percentage_read: percentage }; + console.log("Pushing saved progress: " + JSON.stringify(data)); + $.ajax( "{% url 'update_progress' book_id=book.id %}", { @@ -16,21 +19,27 @@ function realSaveProgress(location, percentage) { data: data } ); + $("#lastsaved").html("Progress saved."); } function saveProgress(location, percentage) { + // Track the last time we saved let current_time = new Date(); if (current_time - last_save_time > 5000) { if (saveTimeout !== null) { + // Clear the timeout if it's set clearTimeout(saveTimeout); } saveTimeout = null; + + // Save the progress realSaveProgress(location, percentage); last_save_time = current_time; } else { // Don't save 'cause we don't want to lag out the server if the user is scrolling $("#lastsaved").html("Unsaved progress - <a href=\"#\" onclick=\"realSaveProgress('" + location + "', " + percentage + "); return false;\">Click here to save now</a>"); + // Set a timeout to autosave in 5 seconds in case we've stopped scrolling if(saveTimeout === null) { saveTimeout = setTimeout(function() { diff --git a/reader/templates/reader/book_read/pdf_viewer.html b/reader/templates/reader/book_read/pdf_viewer.html index 48425cabf40c7aadcf2243bdb67ceedbf689f5c9..b4bce5745ef806215318b9992c43a4a97a78d80b 100644 --- a/reader/templates/reader/book_read/pdf_viewer.html +++ b/reader/templates/reader/book_read/pdf_viewer.html @@ -55,7 +55,9 @@ See https://github.com/adobe-type-tools/cmap-resources <td class="ta-left"> <span class="ta-text">Now reading: {{ book.title }}</span> </td> - <td></td> + <td> + <span class="ta-text" id="lastsaved"></span> + </td> <td class="ta-right"> <span class="ta-text"><a href="{% url 'view_book' book.id %}" class="btn btn-primary">Back to book</a></span> </td> @@ -639,35 +641,32 @@ See https://github.com/adobe-type-tools/cmap-resources </div> <!-- outerContainer --> <div id="printContainer"></div> <script> - PDFViewerApplicationOptions.set("disablehistory", true); document.addEventListener("webviewerloaded", () => { + PDFViewerApplicationOptions.set("disablehistory", true); PDFViewerApplication.initializedPromise.then(() => { - {% if pagenumber %} - PDFViewerApplication.pdfViewer.currentPageNumber = {{ pagenumber }}; - {% endif %} + + {% include "reader/book_read/bookreader_save.js" %} + + let ecount = 0; + PDFViewerApplication.eventBus.on("documentloaded", (e) => { console.log("The document has now been loaded"); + {% if pagenumber %} + PDFViewerApplication.pdfViewer.currentPageNumber = {{ pagenumber }}; + {% endif %} }); PDFViewerApplication.eventBus.on("pagechanging", (e) => { console.log('pagechanging, from ' + e.previous + ' to ' + e.pageNumber); + {% if pagenumber %} - if (e.pageNumber === {{ pagenumber }}) { + if (e.pageNumber === {{ pagenumber }} && ecount === 0) { + ecount++; return; } {% endif %} - $.ajax( - "{% url 'update_progress' book_id=book.id %}", - { - method: "POST", - data: { - csrfmiddlewaretoken: "{{ csrf_token }}", - last_progress_cfi: e.pageNumber, - last_progress_device: "Web Viewer", - percentage_read: e.pageNumber / PDFViewerApplication.pagesCount - } - } - ); + + saveProgress(e.pageNumber, e.pageNumber / PDFViewerApplication.pagesCount) }); PDFViewerApplication.eventBus.on("scalechanging", (e) => {