From d36aed3595765f2cdcdaaeade54ced310244caf6 Mon Sep 17 00:00:00 2001 From: Alex Ling Date: Sat, 15 Feb 2020 16:19:14 +0000 Subject: [PATCH] - finish the reader - implement the infinite scroll using scrollmagic --- public/js/reader.js | 76 ++++++++++++++++++++++++++++++++++++++++++++ src/mango.cr | 24 +++++++++----- src/views/reader.ecr | 50 +++++++++++++++++++---------- 3 files changed, 126 insertions(+), 24 deletions(-) create mode 100644 public/js/reader.js diff --git a/public/js/reader.js b/public/js/reader.js new file mode 100644 index 0000000..012ba6f --- /dev/null +++ b/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); +} diff --git a/src/mango.cr b/src/mango.cr index b46c344..b3a93e6 100644 --- a/src/mango.cr +++ b/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 - # we go back `imgs_each_page` pages. the infinite scroll library + page = (title.load_progress username, entry.title) - 1 + # 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) - .map { |idx| "/api/page/#{title.title}/#{entry.title}/#{idx}" } - next_page = page + imgs_each_page + pages = (page...[entry.pages, page + IMGS_PER_PAGE].min) + urls = pages.map { |idx| + "/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 diff --git a/src/views/reader.ecr b/src/views/reader.ecr index 2608b0a..1d96c6e 100644 --- a/src/views/reader.ecr +++ b/src/views/reader.ecr @@ -13,26 +13,44 @@
- <%- urls.each do |url| -%> - - <%- end -%> - <%- if next_url -%> - - <%- end -%> + <%- urls.each_with_index do |url, i| -%> + + <%- end -%> + <%- if next_url -%> + + <%- end -%> +
+
+ + + + - - + +