- finish the reader

- implement the infinite scroll using scrollmagic

public/js/reader.js

@@ -0,0 +1,76 @@
+$(function() {
+	function bind() {
+		var controller = new ScrollMagic.Controller();
+
+		// replace history on scroll
+		$('img').each(function(idx){
+			var scene = new ScrollMagic.Scene({
+				triggerElement: $(this).get(),
+				triggerHook: 'onEnter',
+				reverse: true
+			})
+				.addTo(controller)
+				.on('enter', function(event){
+					current = $(event.target.triggerElement()).attr('id');
+					replaceHistory(current);
+				})
+				.on('leave', function(event){
+					var prev = $(event.target.triggerElement()).prev();
+					current = $(prev).attr('id');
+					replaceHistory(current);
+				});
+		});
+
+		// poor man's infinite scroll
+		var scene = new ScrollMagic.Scene({
+			triggerElement: $('.next-url').get(),
+			triggerHook: 'onEnter',
+			offset: -500
+		})
+			.addTo(controller)
+			.on('enter', function(){
+				var nextURL = $('.next-url').attr('href');
+				$('.next-url').remove();
+				if (!nextURL) {
+					console.log('No .next-url found. Reached end of page');
+					var lastURL = $('img').last().attr('id');
+					// load the reader URL for the last page to update reading progrss to 100%
+					$.get(lastURL);
+					return;
+				}
+				$('#hidden').load(nextURL + ' .uk-container', function(res, status, xhr){
+					if (status === 'error') console.log(xhr.statusText);
+					if (status === 'success') {
+						console.log(nextURL + ' loaded');
+						// new page loaded to #hidden, we now append it
+						$('.uk-section > .uk-container').append($('#hidden .uk-container').children());
+						$('#hidden').empty();
+						bind();
+					}
+				});
+			});
+	}
+
+	bind();
+});
+$('#page-select').change(function(){
+	jumpTo(parseInt($('#page-select').val()));
+});
+function showControl(idx) {
+	$('#page-select').val(idx + 1);
+	UIkit.modal($('#modal-sections')).show();
+}
+function jumpTo(page) {
+	var ary = window.location.pathname.split('/');
+	ary[ary.length - 1] = page - 1;
+	ary.shift(); // remove leading `/`
+	ary.unshift(window.location.origin);
+	window.location.replace(ary.join('/'));
+}
+function replaceHistory(url) {
+	history.replaceState(null, "", url);
+	console.log('reading ' + url);
+}
+function exit(url) {
+	window.location.replace(url);
+}

src/mango.cr

@@ -8,7 +8,7 @@ config = Config.load
 library = Library.new config.library_path
 storage = Storage.new config.db_path
 
-imgs_each_page = 5
+IMGS_PER_PAGE = 5
 
 macro layout(name)
 	render "src/views/#{{{name}}}.ecr", "src/views/layout.ecr"
@@ -163,11 +163,11 @@ get "/reader/:title/:entry" do |env|
 
 		# load progress
 		username = get_username env
-		page = title.load_progress username, entry.title
+		page = (title.load_progress username, entry.title) - 1
-		# we go back `imgs_each_page` pages. the infinite scroll library
+		# we go back 2 * `IMGS_PER_PAGE` pages. the infinite scroll library
 		# perloads a few pages in advance, and the user might not have actually
 		# read them
-		page = [page - imgs_each_page, 0].max
+		page = [page - 2 * IMGS_PER_PAGE, 0].max
 
 		env.redirect "/reader/#{title.title}/#{entry.title}/#{page}"
 	rescue
@@ -184,13 +184,21 @@ get "/reader/:title/:entry/:page" do |env|
 
 		# save progress
 		username = get_username env
-		title.save_progress username, entry.title, page
+		title.save_progress username, entry.title, page + 1
 
-		urls = (page...[entry.pages, page + imgs_each_page].min)
+		pages = (page...[entry.pages, page + IMGS_PER_PAGE].min)
-			.map { |idx| "/api/page/#{title.title}/#{entry.title}/#{idx}" }
+		urls = pages.map { |idx|
-		next_page = page + imgs_each_page
+			"/api/page/#{title.title}/#{entry.title}/#{idx}" }
+		reader_urls = pages.map { |idx|
+			"/reader/#{title.title}/#{entry.title}/#{idx}" }
+		next_page = page + IMGS_PER_PAGE
 		next_url = next_page >= entry.pages ? nil :
 			"/reader/#{title.title}/#{entry.title}/#{next_page}"
+		exit_url = "/book/#{title.title}"
+
+		pp "requesting #{page}"
+		pp "serving #{urls}"
+		pp "next url #{next_url}"
 
 		render "src/views/reader.ecr"
 	rescue

src/views/reader.ecr

@@ -13,26 +13,44 @@
   <body>
     <div class="uk-section uk-section-default uk-section-small" style="background-color:black;">
       <div class="uk-container uk-container-small">
-        <%- urls.each do |url| -%>
+          <%- urls.each_with_index do |url, i| -%>
-        <img class="uk-align-center" data-src="<%= url %>" data-width data-height uk-img>
+          <img class="uk-align-center" data-src="<%= url %>" data-width data-height uk-img id="<%= reader_urls[i] %>" onclick="showControl(<%= pages.to_a[i] %>);">
-        <%- end -%>
+          <%- end -%>
-        <%- if next_url -%>
+          <%- if next_url -%>
-        <a class="next-url" href="<%= next_url %>"></a>
+          <a class="next-url" href="<%= next_url %>"></a>
-        <%- end -%>
+          <%- end -%>
+      </div>
+    </div>
+
+    <div id="hidden" hidden></div>
+
+    <div id="modal-sections" class="uk-flex-top" uk-modal>
+      <div class="uk-modal-dialog uk-margin-auto-vertical">
+        <button class="uk-modal-close-default" type="button" uk-close></button>
+        <div class="uk-modal-header">
+          <h3 class="uk-modal-title">Options</h3>
+        </div>
+        <div class="uk-modal-body">
+          <div class="uk-margin">
+            <label class="uk-form-label" for="form-stacked-select">Jump to page</label>
+            <div class="uk-form-controls">
+              <select id="page-select" class="uk-select">
+                <%- (1..entry.pages).each do |p| -%>
+                <option value="<%= p %>"><%= p %></option>
+                <%- end -%>
+              </select>
+            </div>
+          </div>
+        </div>
+        <div class="uk-modal-footer uk-text-right">
+          <button class="uk-button uk-button-danger" type="button" onclick="exit('<%= exit_url %>')">Exit Reader</button>
+        </div>
       </div>
     </div>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/uikit@3.3.1/dist/js/uikit.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/uikit@3.3.1/dist/js/uikit-icons.min.js"></script>
-    <script src="https://unpkg.com/infinite-scroll@3/dist/infinite-scroll.pkgd.min.js"></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
-    <script>
+    <script src="/js/reader.js"></script>
-      $(function() {
-        $('.uk-container').infiniteScroll({
-          path: '.next-url',
-          append: '.uk-container',
-          history: 'replace'
-        });
-      });
-    </script>
   </body>
 </html>