Skip to content

Commit c776c4c

Browse files
bperelbperel
committed
dumili: wip
1 parent 54edfee commit c776c4c

File tree

9 files changed

+516
-437
lines changed

9 files changed

+516
-437
lines changed

‎apps/dumili/package.json

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,6 @@
2929
"bootstrap-vue-next": "^0.25.12",
3030
"dayjs": "^1.11.13",
3131
"js-cookie": "^3.0.5",
32-
"page-flip": "^2.0.7",
3332
"pinia": "^2.2.5",
3433
"vue": "^3.5.12",
3534
"vue-draggable-resizable": "^3.0.0",
@@ -47,7 +46,6 @@
4746
"@eslint/js": "^9.14.0",
4847
"@intlify/unplugin-vue-i18n": "^5.2.0",
4948
"@types/js-cookie": "^3.0.6",
50-
"@types/page-flip": "^2.0.3",
5149
"@vitejs/plugin-vue": "^5.1.4",
5250
"concurrently": "^9.0.1",
5351
"eslint": "^9.14.0",

‎apps/dumili/src/components/Book.vue renamed to ‎apps/dumili/src/components/DumiliBook.vue

Lines changed: 3 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
<b-container v-if="false" class="book-container d-flex w-50 h-100 m-0">
1818
<div id="book" class="flip-book">
1919
<div
20-
v-for="(page, index) in indexation.pages"
20+
v-for="(page, index) in indexation!.pages"
2121
:key="`page-${index}`"
2222
class="page"
2323
:class="{ single: isSinglePage }"
@@ -32,7 +32,7 @@
3232
>
3333
<div
3434
v-if="hoveredEntry"
35-
:class="`position-absolute start-0 w-100 h-100 striped kind-${acceptedStoryKinds[hoveredEntry.id]?.kind}`"
35+
:class="`position-absolute start-0 w-100 h-100 striped kind-${acceptedStoryKinds?.[hoveredEntry!.id]?.kind}`"
3636
></div>
3737
<template v-if="displayRatioCropped && naturalToDisplayRatio">
3838
<div
@@ -129,11 +129,6 @@
129129
</div>
130130
</div>
131131
</b-container>
132-
<table-of-contents
133-
v-model="currentPage"
134-
:indexation="indexation"
135-
:shown-pages="shownPages"
136-
/>
137132
</div>
138133
</template>
139134
</template>
@@ -179,18 +174,6 @@ const displayedWidthNoBackground = computed(() =>
179174
: null,
180175
);
181176
182-
const shownPages = computed(() =>
183-
book.value
184-
? [
185-
...new Set([
186-
book.value.getCurrentPageIndex(),
187-
(book.value as unknown as { pages: { currentSpreadIndex: number } })!
188-
.pages.currentSpreadIndex * 2,
189-
]),
190-
]
191-
: [],
192-
);
193-
194177
const displayRatioCropped = computed(
195178
() =>
196179
displayedHeight.value &&
@@ -243,7 +226,7 @@ nextTick(() => {
243226
watch(
244227
() => coverWidth.value && coverHeight.value,
245228
(hasCoverDimensions) => {
246-
if (hasCoverDimensions && false) {
229+
if (hasCoverDimensions) {
247230
const bookContainer = document.querySelector(".book-container")!;
248231
book.value = new PageFlip(
249232
document.getElementById("book") as HTMLElement,

‎apps/dumili/src/components/IssueSelect.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@
3737
emit('change', {
3838
publicationcode: currentPublicationcode!,
3939
issuenumber: currentIssuenumber,
40-
issuecode: `${currentPublicationcode}/${currentIssuenumber}`,
40+
issuecode: `${currentPublicationcode} ${currentIssuenumber}`,
4141
})
4242
"
4343
>OK</b-button

‎apps/dumili/src/components/TableOfContents.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<b-card
33
no-body
4-
class="table-of-contents d-flex w-50 h-100 m-0 overflow-auto"
4+
class="table-of-contents d-flex w-100 h-100 m-0 overflow-auto"
55
body-class="flex-grow-1 w-100 h-100"
66
@mouseleave="hoveredEntry = null"
77
>

‎apps/dumili/src/pages/indexation/[id].vue

Lines changed: 80 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,69 @@
11
<template>
2-
<b-container
3-
v-if="indexationId && hasData"
4-
fluid
5-
style="max-height: calc(100% - 35px); flex-grow: 1"
6-
class="d-flex flex-column"
7-
>
8-
<template v-if="tabNames[activeTab] === 'Page gallery'"
9-
><Gallery :images="images" />
10-
<upload-widget
11-
v-if="showUploadWidget"
12-
:folder-name="indexationId"
13-
@done="
14-
showUploadWidget = !showUploadWidget;
15-
loadIndexation(indexationId);
16-
"
17-
@abort="showUploadWidget = !showUploadWidget"
18-
/>
19-
<b-button
20-
v-show="!showUploadWidget"
21-
@click="showUploadWidget = !showUploadWidget"
22-
>
23-
{{ $t("Upload page files") }}
24-
</b-button>
25-
</template>
26-
<Book v-else-if="tabNames[activeTab] === 'Book'" />
27-
<TextEditor v-else-if="tabNames[activeTab] === 'Text editor'"
28-
/></b-container>
29-
<b-container>
30-
<b-container
31-
v-if="activeTab !== undefined"
32-
class="start-0 bottom-0 mw-100 pt-2 h-5"
33-
style="height: 35px"
34-
><b-tabs v-model:model-value="activeTab" align="center"
35-
><b-tab
36-
v-for="tabName of tabNames"
37-
:key="tabName"
38-
:title="$t(tabName)" /></b-tabs></b-container
39-
></b-container>
2+
<b-row v-if="indexationId && hasData" class="d-flex h-100">
3+
<b-col :cols="6">
4+
<template v-if="tabNames[activeTab] === 'Page gallery'"
5+
><Gallery :images="images" />
6+
<upload-widget
7+
v-if="showUploadWidget"
8+
:folder-name="indexationId"
9+
@done="
10+
showUploadWidget = !showUploadWidget;
11+
loadIndexation(indexationId);
12+
"
13+
@abort="showUploadWidget = !showUploadWidget"
14+
/>
15+
<b-button
16+
v-show="!showUploadWidget"
17+
@click="showUploadWidget = !showUploadWidget"
18+
>
19+
{{ $t("Upload page files") }}
20+
</b-button>
21+
</template>
22+
<Book
23+
v-else-if="tabNames[activeTab] === 'Book' && coverRatio"
24+
ref="bookComponent"
25+
v-model:book="book"
26+
v-model:current-page="bookCurrentPage"
27+
:cover-height="coverHeight"
28+
:cover-ratio="coverRatio"
29+
:urls="indexation!.pages.map(({ url }) => url)"
30+
:with-table-of-contents="false" />
31+
<TextEditor v-else-if="tabNames[activeTab] === 'Text editor'" />
32+
<b-container
33+
v-if="activeTab !== undefined"
34+
class="start-0 bottom-0 mw-100 pt-2 h-5"
35+
style="height: 35px"
36+
><b-tabs v-model:model-value="activeTab" align="center"
37+
><b-tab
38+
v-for="tabName of tabNames"
39+
:key="tabName"
40+
:title="$t(tabName)" /></b-tabs></b-container
41+
></b-col>
42+
43+
<b-col :cols="6">
44+
<table-of-contents
45+
v-model="bookCurrentPage"
46+
:indexation="indexation"
47+
:shown-pages="shownPages"
48+
/></b-col>
49+
</b-row>
4050
</template>
4151

4252
<script setup lang="ts">
53+
import { components as webComponents, type PageFlip } from "~web";
4354
import { suggestions } from "~/stores/suggestions";
4455
import { tabs } from "~/stores/tabs";
4556
57+
const { Book } = webComponents;
58+
59+
const book = ref<PageFlip | undefined>(undefined);
60+
const bookCurrentPage = ref(0);
61+
const coverWidth = ref(1000);
62+
const coverRatio = ref<number | undefined>(undefined);
63+
const coverHeight = computed(
64+
() => coverRatio.value && coverWidth.value * coverRatio.value,
65+
);
66+
4667
const showUploadWidget = ref(false);
4768
const route = useRoute();
4869
@@ -62,6 +83,18 @@ const { indexation } = storeToRefs(suggestions());
6283
6384
const hasData = ref(false);
6485
86+
const shownPages = computed(() =>
87+
book.value
88+
? [
89+
...new Set([
90+
book.value.getCurrentPageIndex(),
91+
(book.value as unknown as { pages: { currentSpreadIndex: number } })!
92+
.pages.currentSpreadIndex * 2,
93+
]),
94+
]
95+
: [],
96+
);
97+
6598
const images = computed(() =>
6699
indexation.value?.pages.map(({ url }) => ({
67100
url,
@@ -96,6 +129,15 @@ watch(
96129
)
97130
.flat(),
98131
);
132+
const firstPageDimensions: { output: { height: number; width: number } } =
133+
await (
134+
await fetch(
135+
"https://res.cloudinary.com/dl7hskxab/image/upload/pg_1/fl_getinfo/v1729876637/dumili/brunoperel/20241025T171702824/Picsou_magazine_529_11zon_krzady.png",
136+
)
137+
).json();
138+
debugger;
139+
coverRatio.value =
140+
firstPageDimensions.output.height / firstPageDimensions.output.width;
99141
hasData.value = true;
100142
},
101143
{ immediate: true },

‎apps/web/index.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import Book from "./src/components/Book.vue";
12
import Bookcase from "./src/components/Bookcase.vue";
23
import InducksStory from "./src/components/InducksStory.vue";
34
import IssueQuotation from "./src/components/IssueQuotation.vue";
@@ -12,6 +13,7 @@ import { coa } from "./src/stores/coa";
1213
import { collection } from "./src/stores/collection";
1314
import { stats } from "./src/stores/stats";
1415
import { users } from "./src/stores/users";
16+
import type { PageFlip } from "page-flip";
1517
export const stores = {
1618
coa,
1719
collection,
@@ -23,6 +25,7 @@ export const stores = {
2325
export const components = {
2426
InducksStory,
2527
MedalImage,
28+
Book,
2629
Bookcase,
2730
StarRating,
2831
Conditions,
@@ -35,4 +38,6 @@ export const composables = {
3538
useDmSocket,
3639
};
3740

41+
export { PageFlip };
42+
3843
export { default as i18n } from "./src/i18n";

0 commit comments

Comments
 (0)