mirror of
https://github.com/ajurna/cbwebreader.git
synced 2025-12-06 06:17:17 +00:00
New reader based on reveal.js. works well on mobile and desktop and gives a better expierance all around.
This commit is contained in:
ajurna
@@ -20,6 +20,9 @@
|
||||
<link href="{% static "css/base.css" %}" rel="stylesheet">
|
||||
<link href="{% static "font-awesome/css/all.css" %}" rel="stylesheet">
|
||||
|
||||
{# <link href="{% static "reveal.js/css/reveal.css" %}" rel="stylesheet">#}
|
||||
{# <link href="{% static "reveal.js/css/theme/white.css" %}" rel="stylesheet">#}
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
@@ -51,9 +54,9 @@
|
||||
|
||||
|
||||
<!-- /.container -->
|
||||
<footer class="footer">
|
||||
<div class="container centered">
|
||||
<center><a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/"><img alt="Creative Commons Licence" style="border-width:0" src="https://i.creativecommons.org/l/by-sa/4.0/88x31.png" /></a><br /><span xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/InteractiveResource" property="dct:title" rel="dct:type">CBReader</span> by <span xmlns:cc="http://creativecommons.org/ns#" property="cc:attributionName">Ajurna</span> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/">Creative Commons Attribution-ShareAlike 4.0 International License</a>.<br />Based on a work at <a xmlns:dct="http://purl.org/dc/terms/" href="https://github.com/ajurna/cbreader" rel="dct:source">https://github.com/ajurna/cbreader</a>.</center>
|
||||
<footer class="footer mt-auto py-3">
|
||||
<div class="container text-center">
|
||||
<a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/"><img alt="Creative Commons Licence" style="border-width:0" src="https://i.creativecommons.org/l/by-sa/4.0/88x31.png" /></a><br /><span xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/InteractiveResource" property="dct:title" rel="dct:type">CBReader</span> by <span xmlns:cc="http://creativecommons.org/ns#" property="cc:attributionName">Ajurna</span> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/">Creative Commons Attribution-ShareAlike 4.0 International License</a>.<br />Based on a work at <a xmlns:dct="http://purl.org/dc/terms/" href="https://github.com/ajurna/cbreader" rel="dct:source">https://github.com/ajurna/cbreader</a>.
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@@ -63,6 +66,9 @@
|
||||
{% bootstrap_javascript jquery='full' %}
|
||||
<script type="text/javascript" src="https://cdn.datatables.net/v/bs4/dt-1.10.21/b-1.6.2/b-colvis-1.6.2/r-2.2.4/datatables.min.js"></script>
|
||||
<script type="text/javascript" src="{% static "js/js.cookie.js" %}"></script>
|
||||
<script type="text/javascript" src="{% static "reveal.js/js/reveal.js" %}"></script>
|
||||
<script type="text/javascript" src="{% static "js/hammer.min.js" %}"></script>
|
||||
|
||||
{% block script %}
|
||||
{% endblock %}
|
||||
</body>
|
||||
|
||||
@@ -2,47 +2,99 @@
|
||||
{% block title %}{{ title }}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container comic_box justify-content-center">
|
||||
<div class="row justify-content-center">
|
||||
{% if nav.q_next_to_directory %}
|
||||
<a href="/comic/{{ nav.next_path }}/">
|
||||
{% else %}
|
||||
<a href="/comic/read/{{ nav.next_path }}/{{ nav.next_index }}/">
|
||||
{% endif %}
|
||||
<img src="/comic/read/{{ nav.cur_path }}/{{ nav.cur_index }}/img" class="img-fluid">
|
||||
</a>
|
||||
</div>
|
||||
<div class="row justify-content-center mt-1 mb-1">
|
||||
<div class="btn-group" role="group" aria-label="Navigation">
|
||||
{% if nav.q_prev_to_directory %}
|
||||
{% if nav.prev_path %}
|
||||
<a href="/comic/{{ nav.prev_path }}/" class="btn btn-secondary">Prev</a>
|
||||
{% else %}
|
||||
<a href="/comic/" class="btn btn-secondary">Prev</a>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<a href="/comic/read/{{ nav.prev_path }}/{{ nav.prev_index }}/" class="btn btn-secondary">Prev</a>
|
||||
{% endif %}
|
||||
<div class="btn-group" role="group">
|
||||
<button id="page_list" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
{{ orig_file_name }}
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="page_list">
|
||||
{% for file in book.pages %}
|
||||
<a class="dropdown-item" href="/comic/read/{{ nav.cur_path }}/{{ file.index }}/">{{ file.page_file_name }}</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% if nav.q_next_to_directory %}
|
||||
{% if nav.next_path %}
|
||||
<a href="/comic/{{ nav.next_path }}/" class="btn btn-secondary">Next</a>
|
||||
{% else %}
|
||||
<a href="/comic/" class="btn btn-secondary">Next</a>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<a href="/comic/read/{{ nav.next_path }}/{{ nav.next_index }}/" class="btn btn-secondary">Next</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="reveal" id="comic_box">
|
||||
<div class="slides">
|
||||
{% for page in pages %}
|
||||
<section><img data-src="{% url "get_image" nav.cur_path page.index %}" class=" w-100" onclick="Reveal.next()"></section>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
|
||||
{% block script %}
|
||||
<script>
|
||||
Reveal.initialize({
|
||||
controls: false,
|
||||
hash: true,
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
margin: 0,
|
||||
minScale: 1,
|
||||
maxScale: 1,
|
||||
disableLayout: true,
|
||||
keyboard: false,
|
||||
touch: false,
|
||||
transition: 'slide',
|
||||
});
|
||||
Reveal.setState({indexh: {{ status.last_read_page }} });
|
||||
Reveal.addEventListener( 'slidechanged', function( event ) {
|
||||
// event.previousSlide, event.currentSlide, event.indexh, event.indexv
|
||||
document.getElementsByClassName('present')[0].scrollIntoView({behavior: 'smooth'})
|
||||
$.ajax({url: "/comic/set_page/{{nav.cur_path}}/" + event.indexh + "/"})
|
||||
} );
|
||||
$(document).keydown(function(e) {
|
||||
switch(e.which) {
|
||||
case 37: // left
|
||||
if (Reveal.isFirstSlide()){
|
||||
window.location = "{% url "read_comic" nav.prev_path %}"
|
||||
} else {
|
||||
Reveal.prev();
|
||||
}
|
||||
break;
|
||||
|
||||
case 38: // up
|
||||
window.scrollTo({
|
||||
top: window.scrollY-window.innerHeight*.7,
|
||||
left: 0,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
break;
|
||||
|
||||
case 39: // right
|
||||
if (Reveal.isLastSlide()){
|
||||
window.location = "{% url "read_comic" nav.next_path %}"
|
||||
} else {
|
||||
Reveal.next()
|
||||
}
|
||||
break;
|
||||
|
||||
case 40: // down
|
||||
window.scrollTo({
|
||||
top: window.scrollY+window.innerHeight*.7,
|
||||
left: 0,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
break;
|
||||
|
||||
default: return; // exit this handler for other keys
|
||||
}
|
||||
e.preventDefault(); // prevent the default action (scroll / move caret)
|
||||
});
|
||||
|
||||
var hammertime = new Hammer(document.getElementById('comic_box'), {});
|
||||
hammertime.on('swipeleft', function (ev) {
|
||||
if (Reveal.isLastSlide()){
|
||||
window.location = "{% url "read_comic" nav.next_path %}"
|
||||
} else {
|
||||
Reveal.next()
|
||||
}
|
||||
})
|
||||
hammertime.on('swiperight', function (ev) {
|
||||
if (Reveal.isFirstSlide()){
|
||||
window.location = "{% url "read_comic" nav.prev_path %}"
|
||||
} else {
|
||||
Reveal.prev();
|
||||
}
|
||||
})
|
||||
hammertime.on('tap', function (ev) {
|
||||
if (Reveal.isLastSlide()){
|
||||
window.location = "{% url "read_comic" nav.next_path %}"
|
||||
} else {
|
||||
Reveal.next()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user