seepur/resources/scripts/applications/home/views/edit_book.vue

581 lines
21 KiB
Vue

<template>
<div class="container is-fullwidth is-fullheight-container">
<transition name="fade">
<div class="book-uploading-overlay" v-if="uploading">
<div class="section book-uploading-overlay-content has-text-centered">
<h1 class="title">Uploading...</h1>
<h1 class="subtitle">Be pacient, This can take a while</h1>
<progress class="progress is-small is-primary" max="100">15%</progress>
</div>
</div>
</transition>
<div class="columns is-flex is-fullheight-container">
<div class="column is-3">
<!-- Properties -->
<div class="card m-b-md">
<div class="card-content">
<h1 class="subtitle">
<i class="fa fa-book"></i> Properties
</h1>
<div class="book-properties">
<div class="field">
<label class="label">Book Title:</label>
<input class="input" type="text" placeholder="My Book" v-model="book.title" />
</div>
<div class="field">
<label class="label">Book Author:</label>
<input class="input" type="text" placeholder="Savta Cochi" v-model="book.author" />
</div>
<div class="field">
<label class="label">Language Direction:</label>
<label>
<input
class="checkbox"
type="checkbox"
v-model="book.ltr"
aria-label="Book direction"
/>
{{book.ltr ? "Left To Right" : "Right To Left"}}
<i
:class="`fa fa-fw fa-arrow-${book.ltr?'right':'left'}`"
></i>
</label>
</div>
<div class="field">
<label class="label">Total page count: #{{pages.length}}</label>
</div>
</div>
</div>
<footer class="card-footer">
<a class="card-footer-item is-success" @click="onUploadClicked()">
<i class="fa fa-fw fa-upload"></i> Upload Book
</a>
</footer>
</div>
<!-- Pages -->
<div class="card">
<aside class="menu card-content">
<p class="menu-label">Pages</p>
<ul class="menu-list">
<li v-for="page in pages" :key="page.id">
<a
:class="{'is-active' : currentPage === page.id}"
@click="onPageClicked(page.id)"
>{{page.text}}</a>
</li>
</ul>
</aside>
<footer class="card-footer">
<a class="card-footer-item" @click="onAddPageClicked()">
<i class="fa fa-fw fa-plus"></i> Add Page
</a>
</footer>
</div>
</div>
<div class="column is-9">
<div class="card is-fullheight-container bg-flower">
<div class="card-content is-fullheight-container">
<div class="tabs-container has-text-centered m-b-lg">
<div class="tabs is-centered">
<ul>
<li :class="editMode ? 'is-active' : ''" @click="editMode=true">
<a>
<span class="icon is-small">
<i class="fa fa-pencil" aria-hidden="true"></i>
</span>
<span>Edit</span>
</a>
</li>
<li :class="!editMode ? 'is-active' : ''" @click="editMode=false">
<a>
<span class="icon is-small">
<i class="fa fa-eye" aria-hidden="true"></i>
</span>
<span>Preview</span>
</a>
</li>
</ul>
</div>
</div>
<div class="content is-fullheight-container">
<!-- Book Edit -->
<transition name="fade">
<div class="edit" v-if="editMode">
<div class="has-text-centered" v-if="currentPage < -1">
<h1 class="subtitle m-t-xl m-b-xl">This is exciting...</h1>
<a class="button is-large is-rounded" @click="onAddPageClicked()">
<i class="fa fa-fw fa-plus"></i> Add Cover
</a>
</div>
<div class="page-editor" v-else>
<div class="columns">
<!-- Croppa -->
<div class="column is-flex">
<div v-if="pages[currentPage].loaded">
<h1 class="subtitle">{{pages[currentPage].text}}</h1>
<croppa
v-model="pages[currentPage].croppa"
:prevent-white-space="true"
:show-remove-button="false"
:initial-image="pages[currentPage].image"
:width="croppaWidth"
:height="croppaHeight"
:disable-drag-to-move="false"
:disable-scroll-to-zoom="true"
:zoom-speed="1"
@loading-end="onCroppaImageLoaded()"
></croppa>
</div>
</div>
<!-- Controllers -->
<div
class="edit-page-controllers column is-3 is-flex-column is-justify-centered has-text-centered"
>
<div class="change-image">
<button class="button" @click="pages[currentPage].croppa.chooseFile()">
<i class="fa fa-fw fa-refresh"></i> Change Image
</button>
</div>
<div class="field" v-if="currentPage===0 && pages.length===1">
<label class="label">Page width</label>
<input
type="range"
min="200"
max="600"
v-model="bookWidth"
:disabled="!pages[currentPage].imageLoaded"
/>
<div class="is-flex is-justify-between">
<button
type="button"
class="button is-rounded is-outlined is-small"
:disabled="!pages[currentPage].imageLoaded"
@click="bookWidth-=2"
>
<i class="fa fa-fw fa-minus"></i>
</button>
<button
type="button"
class="button is-rounded is-outlined is-small"
:disabled="!pages[currentPage].imageLoaded"
@click="bookWidth+=2"
>
<i class="fa fa-fw fa-plus"></i>
</button>
</div>
</div>
<div class="field" v-if="currentPage===0 && pages.length===1">
<label class="label">Page height</label>
<input
type="range"
min="200"
max="600"
v-model="bookHeight"
:disabled="!pages[currentPage].imageLoaded"
/>
<div class="is-flex is-justify-between">
<button
type="button"
class="button is-rounded is-outlined is-small"
:disabled="!pages[currentPage].imageLoaded"
@click="bookHeight-=2"
>
<i class="fa fa-fw fa-minus"></i>
</button>
<button
type="button"
class="button is-rounded is-outlined is-small"
:disabled="!pages[currentPage].imageLoaded"
@click="bookHeight+=2"
>
<i class="fa fa-fw fa-plus"></i>
</button>
</div>
</div>
<div class="field"></div>
<div class="field">
<label class="label">Zoom Image</label>
<input
type="range"
min="0"
max="1000"
v-model="pageZoom"
:disabled="!pages[currentPage].imageLoaded"
/>
<div class="is-flex is-justify-between">
<button
type="button"
class="button is-rounded is-outlined is-small"
:disabled="!pages[currentPage].imageLoaded"
@click="pageZoom-=2"
>
<i class="fa fa-fw fa-minus"></i>
</button>
<button
type="button"
class="button is-rounded is-outlined is-small"
:disabled="!pages[currentPage].imageLoaded"
@click="pageZoom+=2"
>
<i class="fa fa-fw fa-plus"></i>
</button>
</div>
</div>
<div class="rotations is-flex is-justify-between m-b-lg">
<button
class="button"
@click="onRotateClicked(false)"
:disabled="!pages[currentPage].imageLoaded"
>
<i class="fa fa-fw fa-rotate-left"></i>
</button>
<button
class="button"
@click="onRotateClicked(true)"
:disabled="!pages[currentPage].imageLoaded"
>
<i class="fa fa-fw fa-rotate-right"></i>
</button>
</div>
<div class="remove-image" v-if="currentPage === pages.length-1">
<button class="button is-danger" @click="deleteLastPage()">
<i class="fa fa-fw fa-trash"></i> Delete Page
</button>
</div>
<!-- TODO: Fix this shit - maybe fork the project? -->
<!-- <div class="field">
<label class="label">Rotate Image</label>
<input
type="range"
min="-180"
max="180"
v-model="pageRotation"
:disabled="!pages[currentPage].croppa.hasImage"
/>
</div>-->
</div>
</div>
</div>
</div>
</transition>
<!-- Book Preview -->
<transition name="fade">
<div
:class="`is-fullheight-container ${flipbookRef ? '' : 'is-transparent'}`"
v-if="!editMode"
>
<div class="book-view m-sm m-r-md">
<div
class="go-left m-r-sm"
style="display: inline-block; align-items: center; position: absolute; left:0px; top:0px"
>
<button
class="button book-flip-buttons"
:disabled="!canFlipLeft"
@click="onLeftClicked()"
>
<i class="fa fa-fw fa-arrow-left"></i>
</button>
</div>
<flipbook
class="flipbook"
:pages="previewPages"
:forwardDirection="book.ltr ? 'right': 'left'"
:zooms="null"
:enabled="true"
ref="flipbook"
v-slot="flipbook"
@on-mounted="bookMounted()"
>
<div class="page-progress has-text-centered m-b-none">
<p>Page {{ flipbook.page }} of {{ flipbook.numPages }}</p>
</div>
</flipbook>
<div
class="go-right m-l-sm"
style="display: inline-block; align-items: center; position: absolute; right:0px; top:0px"
>
<button
class="button book-flip-buttons"
:disabled="!canFlipRight"
@click="onRightClicked()"
>
<i class="fa fa-fw fa-arrow-right"></i>
</button>
</div>
</div>
</div>
</transition>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script lang="ts">
import { mapGetters, mapActions } from "vuex";
import Flipbook from "../components/flipbook/flipbook.cjs.js";
import Croppa from "vue-croppa";
import Services from "../../services";
export default {
name: "EditBook",
props: ["editBook"],
components: {
Flipbook,
Croppa: Croppa.component
},
watch: {
editMode: function(newVal) {
if (!newVal) {
this.currentPage = -7;
//Update previewPages
this.previewPages = [null, ...this.pages.map(page => page.image)];
} else {
if (this.currentPage < 0 && this.pages.length) this.currentPage = 0;
this.flipbookRef = false;
}
},
currentPage: async function(currentPage, lastPage) {
/// Save progress on latest page
console.log(lastPage, currentPage);
if (this.pages[lastPage] && lastPage >= 0) {
const imageBlob = await this.pages[lastPage].croppa.promisedBlob(
"image/jpg",
0.8
);
if (imageBlob) {
let url = URL.createObjectURL(imageBlob);
this.pages[lastPage].base64 = this.pages[
lastPage
].croppa.generateDataUrl("image/jpg", 0.8);
this.pages[lastPage].image = url;
}
}
if (currentPage >= 0) {
// Load new page croppa
this.pages[currentPage].loaded = false;
this.$nextTick(function() {
console.log("tick");
this.pages[currentPage].loaded = true;
console.log(this.pages);
});
}
this.pageRotation = 0;
this.pageZoom = 500;
return true;
},
pageRotation: function(newAngle) {
console.log(newAngle);
const page = this.pages[this.currentPage];
const canvas: HTMLCanvasElement = page.croppa.getCanvas();
const ctx: CanvasRenderingContext2D = page.croppa.getContext();
ctx.rotate((newAngle * Math.PI) / 180);
ctx.drawImage(canvas, 0, 0);
ctx.setTransform(1, 0, 0, 1, 0, 0);
this.$nextTick(function() {
// page.croppa.moveDownwards(1);
});
// page.croppa.rotate(newAngle / 90);
},
pageZoom: function(newVal, oldVal) {
const page = this.pages[this.currentPage];
console.log(newVal, oldVal);
const delta = Math.abs(newVal - oldVal);
if (newVal < oldVal) {
//zoomOut
for (let i = delta; i > 0; i--) page.croppa.zoomOut();
} else {
//zoomIn
for (let i = delta; i > 0; i--) page.croppa.zoomIn();
}
}
},
created() {
if (this.editBook) this.book = this.editBook;
else
this.book = {
name: "",
ltr: true,
pages: 0,
user_id: this.user.id
};
},
methods: {
...mapActions(["notify", "getUser"]),
///
deleteLastPage() {
this.pages.pop();
if (!this.pages.length) this.currentPage = -7;
else this.currentPage = this.pages.length - 1;
},
onRotateClicked(clockwise: boolean) {
const page = this.pages[this.currentPage];
page.croppa.rotate(clockwise ? 1 : -1);
},
onPageClicked(pageIndex) {
this.currentPage = pageIndex;
this.editMode = true;
},
onCroppaImageLoaded() {
this.pages[this.currentPage].imageLoaded = true;
},
async onUploadClicked() {
//TODO: Better validations
if (!this.book.title || !this.book.title.length) {
this.notify({
message: "Book needs a title!",
level: "warning"
});
return;
}
if (!this.book.author || !this.book.author.length) {
this.notify({
message: "Book sure has an author!",
level: "warning"
});
return;
}
if (this.pages.length < 4) {
this.notify({
message: "A book need to have at least 4 pages",
level: "warning"
});
return;
}
this.uploading = true;
const resp = await Services.ApiService.uploadBook({
title: this.book.title,
author: this.book.author,
ltr: this.book.ltr,
pages: this.pages.map(
p => p.base64 || p.croppa.generateDataUrl("image/jpg", 0.7)
)
});
if (resp.code === 0) {
this.notify({
message: `Woop Woop!! ${this.book.title} has been added!`,
level: "success"
});
this.getUser();
this.$router.replace({ path: `/` });
} else {
this.notify({
message: `Something went wrong!`,
level: "danger"
});
}
this.uploading = false;
},
async onAddPageClicked() {
const lastPage = this.pages.length - 1;
if (lastPage < 0) {
this.pages.push({
text: "Cover",
id: 0,
loaded: false,
croppa: {},
image: null,
imageLoaded: false,
base64: null
});
this.currentPage = 0;
//return;
} else {
console.log("In else");
const nextPage = lastPage + 1;
const imageBlob = await this.pages[lastPage].croppa.promisedBlob(
"image/jpg",
0.8
);
if (!imageBlob) {
this.notify({
message: "Your last page is still empty",
level: "warning"
});
this.currentPage = lastPage;
return;
}
let url = URL.createObjectURL(imageBlob);
this.pages.base64 = this.pages[lastPage].croppa.generateDataUrl(
"image/jpg",
0.8
);
this.pages[lastPage].image = url;
this.pages.push({
text: `Page ${nextPage}`,
id: nextPage,
loaded: false,
croppa: {},
image: null,
imageLoaded: false,
base64: null
});
this.currentPage = nextPage;
}
},
bookMounted() {
if (this.$refs.flipbook) {
console.log("Found!");
this.flipbookRef = true;
// this.$refs.flipbook.onResize();
// console.log("resized");
} else {
console.log("Still Null!!");
}
},
onLeftClicked() {
console.time("Flip Left");
this.$refs.flipbook.flipLeft();
console.timeEnd("Flip Left");
return true;
},
onRightClicked() {
this.$refs.flipbook.flipRight();
return true;
}
},
computed: {
...mapGetters(["user"]),
//
bookPages() {
return this.pages.slice(1);
},
canFlipLeft() {
return this.flipbookRef && this.$refs.flipbook.canFlipLeft;
},
canFlipRight() {
return this.flipbookRef && this.$refs.flipbook.canFlipRight;
},
croppaWidth() {
return Number(this.bookWidth);
},
croppaHeight() {
return Number(this.bookHeight);
}
},
data() {
return {
book: {
title: "",
author: "",
rtl: true
},
pages: [],
bookWidth: 400,
bookHeight: 600,
previewPages: [],
editMode: true,
currentPage: -7,
flipbookRef: false,
pageRotation: 0,
pageZoom: 500,
uploading: false,
errors: {}
};
}
};
</script>