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.
66 lines
1.9 KiB
66 lines
1.9 KiB
// E-book Reader component
|
|
var EbookReader = {
|
|
template: `
|
|
<div>
|
|
<div id="left" class="reader-left" v-on:click="previousPage()"></div>
|
|
<div id="area" class="reader-area"></div>
|
|
<div id="right" class="reader-right" v-on:click="nextPage()"></div>
|
|
</div>`,
|
|
data: function() {
|
|
return {
|
|
rendition: null
|
|
};
|
|
},
|
|
methods: {
|
|
computeScreenSize: function() {
|
|
var canvas = document.getElementById("canvas") || document.getElementById("body");
|
|
var canvas_height = canvas.offsetHeight;
|
|
var canvas_width = canvas.offsetWidth-100;
|
|
return { width: canvas_width, height: canvas_height };
|
|
},
|
|
|
|
render: function(book, location) {
|
|
if (this.rendition) {
|
|
this.rendition.clear();
|
|
this.rendition.destroy();
|
|
}
|
|
var options = this.computeScreenSize();
|
|
document.getElementById("left").style.height = options.height + "px";
|
|
document.getElementById("right").style.height = options.height + "px";
|
|
this.rendition = book.renderTo("area", options);
|
|
this.rendition.display(location);
|
|
},
|
|
|
|
nextPage: function() {
|
|
if (this.rendition != null) {
|
|
var vm = this;
|
|
var location = vm.getLocation();
|
|
vm.rendition.next().then(function() {},
|
|
function() {vm.rendition.display(location)}
|
|
);
|
|
document.getElementById("right").classList.add("reader-right-sel");
|
|
setTimeout(function() {
|
|
document.getElementById("right").classList.remove("reader-right-sel");
|
|
}, 100);
|
|
}
|
|
},
|
|
|
|
previousPage: function() {
|
|
if (this.rendition != null) {
|
|
var vm = this;
|
|
var location = vm.getLocation();
|
|
vm.rendition.prev().then(function() {},
|
|
function() {vm.rendition.display(location)}
|
|
);;
|
|
document.getElementById("left").classList.add("reader-left-sel");
|
|
setTimeout(function() {
|
|
document.getElementById("left").classList.remove("reader-left-sel");
|
|
}, 100);
|
|
}
|
|
},
|
|
|
|
getLocation: function() {
|
|
return this.rendition.currentLocation().start.cfi;
|
|
}
|
|
}
|
|
};
|