You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
188 lines
5.7 KiB
188 lines
5.7 KiB
<html>
|
|
<head>
|
|
<title>Stashr - Reading - {{ comic_name }}</title>
|
|
|
|
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/bootstrap.css') }}">
|
|
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/stashr-read.css') }}">
|
|
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/all.css') }}">
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
|
|
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
|
|
<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
|
|
|
|
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">
|
|
|
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, minimal-ui" />
|
|
|
|
</head>
|
|
|
|
<body class="stashr-reader">
|
|
|
|
<div id="app">
|
|
<swiper v-bind:slides='slides' v-swiper='$options.swiperOptions'></swiper>
|
|
<modal></modal>
|
|
</div>
|
|
|
|
<div class="stashr-button_container p-2">
|
|
<button type="button" class="btn btn-link" data-bs-toggle="modal" data-bs-target="#modalRead">
|
|
<i class="text-white fas fa-bars fa-2x"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<script>
|
|
|
|
Vue.directive('swiper', {
|
|
inserted (el, binding, vnode) {
|
|
console.log(binding.value)
|
|
const myswiper = new Swiper(el, binding.value)
|
|
},
|
|
componentUpdates() {
|
|
console.log('updated?')
|
|
}
|
|
})
|
|
|
|
Vue.component('modal', {
|
|
props: [],
|
|
template: `
|
|
<div class="modal" id="modalRead" tabindex="-1" role="dialog" aria-labelledby="modalRead" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="exampleModalLongTitle">Comic Settings</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
Goto Page <input type="text" id="gotoPage" size="1" name="gotoPage" :value="this.$parent.active_page" />/[[ this.$parent.total_pages ]] <button type="button" class="btn btn-secondary" data-dismiss="modal" v-on:click="goto_slide">GO</button>
|
|
{{ emit_tep("read_issue_page_modal_extension", issue_id=issue_id) }}
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-dismiss="modal" v-on:click='mark_read'>Mark Read</button>
|
|
<button type="button" class="btn btn-secondary" data-dismiss="modal" v-on:click='go_back'>Go Back</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`,
|
|
methods: {
|
|
mark_read() {
|
|
console.log('mark read')
|
|
app.mark_read()
|
|
},
|
|
go_back() {
|
|
window.history.back();
|
|
},
|
|
goto_slide() {
|
|
app.goto_slide(document.getElementById("gotoPage").value)
|
|
},
|
|
},
|
|
delimiters: ["[[","]]"]
|
|
})
|
|
|
|
Vue.component('slide', {
|
|
props: ['slide'],
|
|
template: `
|
|
<div class="swiper-slide">
|
|
<div class="swiper-zoom-container">
|
|
<img :data-src="'{{ url_for('api.api_get_single_issue', issue_id=issue_id) }}/' + slide.path" class="swiper-lazy">
|
|
<div class="swiper-lazy-preloader"></div>
|
|
</div>
|
|
</div>
|
|
`,
|
|
mounted() {
|
|
var mySwiper = document.querySelector('.swiper-container').swiper
|
|
mySwiper.update();
|
|
mySwiper.lazy.load(0);
|
|
},
|
|
delimiters: ["[[","]]"]
|
|
})
|
|
|
|
Vue.component('swiper', {
|
|
props: ['slides'],
|
|
template: `
|
|
<div class="swiper-container">
|
|
<div class="swiper-wrapper">
|
|
<slide
|
|
v-for="(slide, index) in slides"
|
|
v-bind:slide="slide"
|
|
v-bind:key="slide.id"
|
|
></slide>
|
|
</div>
|
|
<div class="swiper-pagination"></div>
|
|
</div>
|
|
`,
|
|
delimiters: ["[[","]]"]
|
|
})
|
|
|
|
var app = new Vue({
|
|
el: '#app',
|
|
data: {
|
|
slides: [],
|
|
active_page: 1,
|
|
total_pages: 0
|
|
},
|
|
created() {
|
|
axios.get('{{ url_for('api.api_get_single_issue', issue_id=issue_id) }}')
|
|
.then(res => {
|
|
this.slides = res.data.results;
|
|
this.total_pages = res.data.results.length;
|
|
})
|
|
.catch(err => console.log(err))
|
|
},
|
|
swiperOptions: {
|
|
slidesPerView: 1,
|
|
keyboard: {
|
|
enabled: true,
|
|
},
|
|
mousewheel: true,
|
|
touches: {
|
|
simulateTouch: false,
|
|
},
|
|
lazy: {
|
|
lazy: true,
|
|
loadPrevNext: true,
|
|
loadPrevNextAmount: 2,
|
|
},
|
|
zoom: true,
|
|
pagination: {
|
|
el: '.swiper-pagination',
|
|
type: 'progressbar',
|
|
},
|
|
on: {
|
|
slideChange: function() {
|
|
app.update_slide(this.activeIndex)
|
|
}
|
|
},
|
|
},
|
|
methods: {
|
|
update_slide(index) {
|
|
this.active_page = index + 1
|
|
},
|
|
goto_slide(page) {
|
|
var mySwiper = document.querySelector('.swiper-container').swiper
|
|
mySwiper.slideTo(page-1)
|
|
},
|
|
mark_read() {
|
|
axios.put('{{ url_for('api.api_put_single_issue', issue_id=issue_id) }}', {
|
|
data: {
|
|
read_status: 1
|
|
}
|
|
})
|
|
.then(res=> {
|
|
window.history.back();
|
|
}
|
|
)
|
|
.catch(err => console.log(err))
|
|
}
|
|
},
|
|
delimiters: ["[[","]]"]
|
|
})
|
|
|
|
</script>
|
|
|
|
<script src="{{ url_for('static', filename='js/bootstrap.bundle.js') }}"></script>
|
|
|
|
</body>
|
|
|
|
</html> |