Backups/Mango
1
0
Fork 0
mirror of https://github.com/hkalexling/Mango.git synced 2026-01-25 00:00:36 -05:00
Code Issues Projects Releases Wiki Activity

- finish the reader

Browse Source 
- implement the infinite scroll using scrollmagic
This commit is contained in:
Alex Ling
2020-02-15 16:19:14 +00:00
parent a0710e274b
commit d36aed3595
3 changed files with 126 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/mango.cr
View File

@@ -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

50
src/views/reader.ecr
View File

@@ -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| -%>
<img class="uk-align-center" data-src="<%= url %>" data-width data-height uk-img>
<%- end -%>
<%- if next_url -%>
<a class="next-url" href="<%= next_url %>"></a>
<%- end -%>
<%- urls.each_with_index do |url, i| -%>
<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 -%>
<%- if next_url -%>
<a class="next-url" href="<%= next_url %>"></a>
<%- 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>
$(function() {
$('.uk-container').infiniteScroll({
path: '.next-url',
append: '.uk-container',
history: 'replace'
});
});
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<script src="/js/reader.js"></script>
</body>
</html>