fix bug #105: Scroll position save / sync

2 files changed, 44 insertions, 0 deletions

diff --git a/tpl/js/restoreScroll.js b/tpl/js/restoreScroll.js
new file mode 100644
index 00000000..331c9e19
--- /dev/null
+++ b/tpl/js/restoreScroll.js
@@ -0,0 +1,25 @@
+function supportsLocalStorage() {
+    try {
+        return 'localStorage' in window && window['localStorage'] !== null;
+    } catch (e) {
+        return false;
+    }
+}
+
+function savePercent(id, percent) {
+    if (!supportsLocalStorage()) { return false; }
+    localStorage["poche.article." + id + ".percent"] = percent;
+    return true;
+}
+
+function retrievePercent(id) {
+    if (!supportsLocalStorage()) { return false; }
+
+    var bheight = $(document).height();
+    var percent = localStorage["poche.article." + id + ".percent"];
+    var scroll = bheight * percent;
+
+    $('html,body').animate({scrollTop: scroll}, 'fast');
+
+    return true;
+}
\ No newline at end of file
diff --git a/tpl/view.twig b/tpl/view.twig
index 2b6d91d5..f9405f45 100644
--- a/tpl/view.twig
+++ b/tpl/view.twig
@@ -37,4 +37,23 @@
                 <p>{% trans "this article appears wrong?" %} <a href="https://github.com/inthepoche/poche/issues/new">{% trans "create an issue" %}</a> {% trans "or" %} <a href="mailto:support@inthepoche.com?subject=Wrong%20display%20in%20poche&amp;body={{ entry.url|url_encode }}">{% trans "contact us by mail" %}</a></p>
             </div>
         </div>
+        <script src="./tpl/js/restoreScroll.js"></script>
+        <script type="text/javascript">
+        $(document).ready(function() {
+
+            $(window).scroll(function(e){
+                var scrollTop = $(window).scrollTop();
+                var docHeight = $(document).height();
+                var scrollPercent = (scrollTop) / (docHeight);
+                var scrollPercentRounded = Math.round(scrollPercent*100)/100;
+                savePercent({{ entry.id|e }}, scrollPercentRounded);
+            });
+
+            retrievePercent({{ entry.id|e }});
+
+            $(window).resize(function(){
+                retrievePercent({{ entry.id|e }});
+            });
+        });
+        </script>
 {% endblock %}
\ No newline at end of file