mirror of
https://github.com/hkalexling/Mango.git
synced 2025-08-02 10:55:30 -04:00
- finish the reader
- implement the infinite scroll using scrollmagic
This commit is contained in:
Alex Ling
parent
a0710e274b
commit
d36aed3595
76
public/js/reader.js
Normal file
76
public/js/reader.js
Normal file
@ -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);
|
||||
}
|
||||
24
src/mango.cr
24
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
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user