comic-panels-ui 0.0.0-beta.12 → 0.0.0-beta.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/AllComicPages.d.ts +13 -0
- package/ComicPage.d.ts +3 -2
- package/index.d.ts +2 -0
- package/index.js +91 -33
- package/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { CSSProperties, JSX, ReactNode } from 'react';
|
|
2
|
+
import { Props as ComicPanelProps } from './ComicPage';
|
|
3
|
+
interface Props {
|
|
4
|
+
pages: Array<ComicPanelProps>;
|
|
5
|
+
classes?: {
|
|
6
|
+
root?: string;
|
|
7
|
+
panel?: string;
|
|
8
|
+
};
|
|
9
|
+
style?: Partial<CSSProperties>;
|
|
10
|
+
renderContent?: (content: string | ReactNode) => ReactNode;
|
|
11
|
+
}
|
|
12
|
+
export declare function AllComicPages({ pages, classes, style, renderContent, }: Props): JSX.Element;
|
|
13
|
+
export {};
|
package/ComicPage.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { JSX } from 'react';
|
|
1
|
+
import { JSX, ReactNode } from 'react';
|
|
2
2
|
import { ComicPanel, SquarePaneledComic } from './models';
|
|
3
3
|
/**
|
|
4
4
|
* This sizing is not ABSOLUTE, it is PROPORTIONAL.
|
|
@@ -12,5 +12,6 @@ export type Props = SquarePaneledComic & {
|
|
|
12
12
|
panelClassName?: (panel: ComicPanel) => string | undefined;
|
|
13
13
|
onPanelClicked?: (panel: ComicPanel) => void;
|
|
14
14
|
onPanelHovered?: (panel: ComicPanel | null) => void;
|
|
15
|
+
children?: ReactNode;
|
|
15
16
|
};
|
|
16
|
-
export declare function ComicPage({ ratio, rows, panelClassName, className, onPanelClicked, onPanelHovered, }: Props): JSX.Element;
|
|
17
|
+
export declare function ComicPage({ ratio, rows, panelClassName, className, onPanelClicked, onPanelHovered, children, }: Props): JSX.Element;
|
package/index.d.ts
CHANGED
package/index.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { useRef, useState,
|
|
1
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { useRef, useState, useEffect, useCallback } from 'react';
|
|
3
|
+
import clsx from 'clsx';
|
|
3
4
|
import throttle from 'lodash-es/throttle';
|
|
4
5
|
import { MdArrowLeft, MdArrowRight } from 'react-icons/md';
|
|
5
|
-
import clsx from 'clsx';
|
|
6
6
|
|
|
7
7
|
function styleInject(css, ref) {
|
|
8
8
|
if ( ref === void 0 ) ref = {};
|
|
@@ -31,13 +31,13 @@ function styleInject(css, ref) {
|
|
|
31
31
|
}
|
|
32
32
|
}
|
|
33
33
|
|
|
34
|
-
var css_248z$
|
|
35
|
-
var styles$
|
|
36
|
-
styleInject(css_248z$
|
|
34
|
+
var css_248z$2 = ".comic-panels__allComicPagesText {\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n padding: 1em 1em 50vh;\n position: relative;\n}\n\n.comic-panels__allComicPagesReference {\n background-color: white;\n border: 1px solid black;\n box-sizing: border-box;\n margin: 0 0 0 auto;\n max-width: 150px;\n padding: 4px;\n padding-bottom: 1em;\n position: sticky;\n right: 1em;\n top: 1em;\n width: 33%;\n}\n\n.comic-panels__allComicPagesReferencePage {\n bottom: 0.5em;\n font-size: 0.5em;\n right: 1em;\n position: absolute;\n}\n\n.comic-panels__comicPanelFocusOnScroll {\n background-color: #c1c1c1;\n}\n";
|
|
35
|
+
var styles$2 = {"allComicPagesText":"comic-panels__allComicPagesText","allComicPagesReference":"comic-panels__allComicPagesReference","allComicPagesReferencePage":"comic-panels__allComicPagesReferencePage","comicPanelFocusOnScroll":"comic-panels__comicPanelFocusOnScroll"};
|
|
36
|
+
styleInject(css_248z$2);
|
|
37
37
|
|
|
38
|
-
var css_248z = ".comic-panels__comicPage {\n display: flex;\n flex-direction: column;\n margin: auto;\n}\n\n.comic-panels__comicPanel {\n border: 1px solid black;\n box-sizing: border-box;\n cursor: pointer;\n margin: 4px;\n}\n\n.comic-panels__comicPanelRow {\n display: flex;\n flex-direction: row;\n width: 100%;\n}\n";
|
|
39
|
-
var styles = {"comicPage":"comic-panels__comicPage","comicPanel":"comic-panels__comicPanel","comicPanelRow":"comic-panels__comicPanelRow"};
|
|
40
|
-
styleInject(css_248z);
|
|
38
|
+
var css_248z$1 = ".comic-panels__comicPage {\n display: flex;\n flex-direction: column;\n margin: auto;\n}\n\n.comic-panels__comicPanel {\n border: 1px solid black;\n box-sizing: border-box;\n cursor: pointer;\n margin: 4px;\n}\n\n.comic-panels__comicPanelRow {\n display: flex;\n flex-direction: row;\n width: 100%;\n}\n";
|
|
39
|
+
var styles$1 = {"comicPage":"comic-panels__comicPage","comicPanel":"comic-panels__comicPanel","comicPanelRow":"comic-panels__comicPanelRow"};
|
|
40
|
+
styleInject(css_248z$1);
|
|
41
41
|
|
|
42
42
|
/*
|
|
43
43
|
It might honestly be better to POC this first before drawing up an interface.
|
|
@@ -71,19 +71,77 @@ interface DynamicProps {
|
|
|
71
71
|
}>;
|
|
72
72
|
}
|
|
73
73
|
*/
|
|
74
|
-
function ComicPage({ ratio, rows, panelClassName, className, onPanelClicked, onPanelHovered, }) {
|
|
75
|
-
return (
|
|
74
|
+
function ComicPage({ ratio, rows, panelClassName, className, onPanelClicked, onPanelHovered, children, }) {
|
|
75
|
+
return (jsxs("div", { className: clsx(styles$1.comicPage, className), style: {
|
|
76
76
|
aspectRatio: `${ratio.width} / ${ratio.height}`,
|
|
77
|
-
}, children: rows.map(({ size, columns }, rI) => {
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
77
|
+
}, children: [rows.map(({ size, columns }, rI) => {
|
|
78
|
+
return (jsx("div", { className: styles$1.comicPanelRow, style: {
|
|
79
|
+
flex: (size ?? 1).toString(),
|
|
80
|
+
}, children: columns.map(({ size }, cI) => {
|
|
81
|
+
return (jsx("div", { style: { flex: (size ?? 1).toString() }, className: clsx(styles$1.comicPanel, panelClassName?.([rI, cI])), onClick: () => onPanelClicked?.([rI, cI]), onMouseOver: () => onPanelHovered?.([rI, cI]), onMouseOut: () => onPanelHovered?.(null) }, cI));
|
|
82
|
+
}) }, rI));
|
|
83
|
+
}), children] }));
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
function AllComicPages({ pages, classes, style, renderContent = (content) => content, }) {
|
|
87
|
+
const comicTextRef = useRef(null);
|
|
88
|
+
const [currentPage, setCurrentPage] = useState(0), [scrolledToPanel, setScrolledToPanel] = useState([0, 0]);
|
|
89
|
+
useEffect(() => {
|
|
90
|
+
if (comicTextRef.current) {
|
|
91
|
+
const comicTextContainer = comicTextRef.current;
|
|
92
|
+
function onScroll() {
|
|
93
|
+
const { y: containerY, height: containerHeight } = comicTextContainer.getBoundingClientRect();
|
|
94
|
+
const containerBottom = containerY + containerHeight / 2;
|
|
95
|
+
for (const child of comicTextContainer.children) {
|
|
96
|
+
if (child.classList.contains(styles$2.allComicPagesReference)) {
|
|
97
|
+
continue;
|
|
98
|
+
}
|
|
99
|
+
const { bottom } = child.getBoundingClientRect();
|
|
100
|
+
if (bottom > containerBottom) {
|
|
101
|
+
const { page, x, y } = child.dataset;
|
|
102
|
+
if (page && x && y) {
|
|
103
|
+
setCurrentPage(Number(page));
|
|
104
|
+
setScrolledToPanel([Number(x), Number(y)]);
|
|
105
|
+
break;
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
const listeningFunction = throttle(onScroll, 100);
|
|
111
|
+
comicTextContainer.addEventListener('scroll', listeningFunction);
|
|
112
|
+
return () => comicTextContainer.removeEventListener('scroll', listeningFunction);
|
|
113
|
+
}
|
|
114
|
+
}, [setScrolledToPanel, setCurrentPage, comicTextRef.current]);
|
|
115
|
+
return (jsxs("div", { className: clsx(styles$2.allComicPagesText, classes?.root), style: style, ref: comicTextRef, children: [jsx(ComicPage, { className: styles$2.allComicPagesReference, panelClassName: ([rI, cI]) => {
|
|
116
|
+
let panelClassName = clsx(classes?.panel);
|
|
117
|
+
if (scrolledToPanel[0] === rI && scrolledToPanel[1] === cI) {
|
|
118
|
+
panelClassName = clsx(panelClassName, styles$2.comicPanelFocusOnScroll);
|
|
119
|
+
}
|
|
120
|
+
return panelClassName;
|
|
121
|
+
}, ...pages[currentPage], children: jsx("span", { className: styles$2.allComicPagesReferencePage, children: currentPage + 1 }) }), pages.flatMap((page, i) => {
|
|
122
|
+
return [
|
|
123
|
+
jsxs("h3", { children: ["Page ", i + 1] }, `page-header-${i}`),
|
|
124
|
+
...page.rows.flatMap((row, r) => {
|
|
125
|
+
return row.columns.map((column, c) => {
|
|
126
|
+
let label = `R${r + 1}`;
|
|
127
|
+
if (row.size) {
|
|
128
|
+
label += `S${row.size}`;
|
|
129
|
+
}
|
|
130
|
+
label += `C${c + 1}`;
|
|
131
|
+
if (column.size) {
|
|
132
|
+
label += `S${column.size}`;
|
|
133
|
+
}
|
|
134
|
+
return (jsxs("div", { "data-page": i, "data-x": r, "data-y": c, children: [jsx("label", { children: label }), jsx("p", { children: renderContent(column.content) })] }, `${i}-${r}-${c}`));
|
|
135
|
+
});
|
|
136
|
+
}),
|
|
137
|
+
];
|
|
138
|
+
})] }));
|
|
84
139
|
}
|
|
85
140
|
|
|
86
|
-
|
|
141
|
+
var css_248z = ".comic-panels__comicPages {\n align-items: center;\n box-sizing: border-box;\n display: flex;\n flex-direction: row;\n height: 100%;\n gap: 1em;\n padding: 1em;\n position: relative;\n width: 100%;\n}\n\n.comic-panels__comicPages.comic-panels__comicPagesVerticalView {\n flex-direction: column-reverse;\n}\n\n.comic-panels__comicPages.comic-panels__comicPagesVerticalView .comic-panels__comicPagesReferenceContainer {\n flex: 1 0;\n}\n\n.comic-panels__comicPages.comic-panels__comicPagesVerticalView .comic-panels__comicPagesText {\n flex: 1 0;\n}\n\n.comic-panels__comicPages::after {\n align-items: center;\n background-color: rgba(255, 255, 255, 0.8);\n border: 1px solid black;\n content: 'Click to use the left and right arrow keys to navigate.';\n display: flex;\n height: 100%;\n justify-content: center;\n left: 50%;\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n width: 100%;\n}\n\n.comic-panels__comicPages:focus-within::after {\n display: none;\n}\n\n.comic-panels__comicPagesActions,\n.comic-panels__comicPagesInput {\n align-items: center;\n display: flex;\n flex-direction: row;\n font-size: 0.8em;\n gap: 1em;\n justify-content: center;\n margin: 1em auto 0;\n}\n\n.comic-panels__comicPageGoTo {\n width: 3em;\n}\n\n.comic-panels__comicPagesActions > button {\n align-items: center;\n display: flex;\n font-size: 1.2em;\n}\n\n.comic-panels__hideComicAction {\n opacity: 0;\n pointer-events: none;\n}\n\n.comic-panels__comicPagesReferenceContainer {\n flex: 1;\n}\n\n.comic-panels__comicPagesReference {\n max-height: 90%;\n min-width: 0;\n}\n\n.comic-panels__comicPagesText {\n box-sizing: border-box;\n display: flex;\n flex: 1;\n flex-direction: column;\n gap: 1em;\n line-height: 1.5em;\n overflow-y: auto;\n scroll-snap-type: y mandatory;\n}\n\n.comic-panels__comicPagesText > p {\n border-left: 1px solid transparent;\n box-sizing: border-box;\n padding: 0.5em;\n}\n\n.comic-panels__comicPagesText > p,\n.comic-panels__comicPagesTextAnchor {\n scroll-snap-align: top;\n scroll-snap-stop: normal;\n}\n\n.comic-panels__comicPagesReferenceContainer,\n.comic-panels__comicPagesText,\n.comic-panels__comicPagesTextAnchor {\n height: 95%;\n}\n\n.comic-panels__comicPagesTextAnchor {\n box-sizing: border-box;\n display: flex;\n flex: none;\n flex-direction: column;\n font-size: 0.8em;\n justify-content: center;\n text-align: center;\n}\n\n.comic-panels__comicPanelFocusOnScroll {\n background-color: #c1c1c1;\n}\n\ndiv.comic-panels__comicPanelFocusOnHover {\n background-image: linear-gradient(\n 45deg,\n #000 25%,\n transparent 25%,\n transparent 50%,\n #000 50%,\n #000 75%,\n transparent 75%,\n #fff\n );\n background-size: 50px 50px;\n}\n\n.comic-panels__comicPagesText > p.comic-panels__textFocusOnHover {\n border-color: black;\n}\n";
|
|
142
|
+
var styles = {"comicPages":"comic-panels__comicPages","comicPagesVerticalView":"comic-panels__comicPagesVerticalView","comicPagesReferenceContainer":"comic-panels__comicPagesReferenceContainer","comicPagesText":"comic-panels__comicPagesText","comicPagesActions":"comic-panels__comicPagesActions","comicPagesInput":"comic-panels__comicPagesInput","comicPageGoTo":"comic-panels__comicPageGoTo","hideComicAction":"comic-panels__hideComicAction","comicPagesReference":"comic-panels__comicPagesReference","comicPagesTextAnchor":"comic-panels__comicPagesTextAnchor","comicPanelFocusOnScroll":"comic-panels__comicPanelFocusOnScroll","comicPanelFocusOnHover":"comic-panels__comicPanelFocusOnHover","textFocusOnHover":"comic-panels__textFocusOnHover"};
|
|
143
|
+
styleInject(css_248z);
|
|
144
|
+
|
|
87
145
|
function ComicPages({ pages, vertical, className, pageNumber, scrollThreshold = 10, onPageChange, onComicEnd, renderContent = (content) => content, }) {
|
|
88
146
|
const comicPagesRef = useRef(null);
|
|
89
147
|
const comicTextRef = useRef(null);
|
|
@@ -143,7 +201,7 @@ function ComicPages({ pages, vertical, className, pageNumber, scrollThreshold =
|
|
|
143
201
|
const comicTextContainer = comicTextRef.current;
|
|
144
202
|
function onScroll() {
|
|
145
203
|
const { bottom: containerBottom, y: containerY } = comicTextContainer.getBoundingClientRect();
|
|
146
|
-
const anchor = comicTextContainer.querySelector(`.${styles
|
|
204
|
+
const anchor = comicTextContainer.querySelector(`.${styles.comicPagesTextAnchor}`);
|
|
147
205
|
const { bottom: anchorBottom } = anchor.getBoundingClientRect();
|
|
148
206
|
if (Math.floor(anchorBottom) <
|
|
149
207
|
Math.floor(containerBottom) + scrollThreshold) {
|
|
@@ -190,15 +248,15 @@ function ComicPages({ pages, vertical, className, pageNumber, scrollThreshold =
|
|
|
190
248
|
return jsx("p", { children: "Something went wrong. You're on a non-existing page." });
|
|
191
249
|
}
|
|
192
250
|
else {
|
|
193
|
-
return (jsxs("div", { className: clsx(styles
|
|
194
|
-
[styles
|
|
195
|
-
}), ref: comicPagesRef, tabIndex: 0, children: [jsxs("div", { className: styles
|
|
251
|
+
return (jsxs("div", { className: clsx(styles.comicPages, className, {
|
|
252
|
+
[styles.comicPagesVerticalView]: vertical,
|
|
253
|
+
}), ref: comicPagesRef, tabIndex: 0, children: [jsxs("div", { className: styles.comicPagesReferenceContainer, children: [jsx(ComicPage, { className: styles.comicPagesReference, panelClassName: ([rI, cI]) => {
|
|
196
254
|
let panelClassName = '';
|
|
197
255
|
if (scrolledToPanel[0] === rI && scrolledToPanel[1] === cI) {
|
|
198
|
-
panelClassName = clsx(panelClassName, styles
|
|
256
|
+
panelClassName = clsx(panelClassName, styles.comicPanelFocusOnScroll);
|
|
199
257
|
}
|
|
200
258
|
if (hoveredPanel?.[0] === rI && hoveredPanel[1] === cI) {
|
|
201
|
-
panelClassName = clsx(panelClassName, styles
|
|
259
|
+
panelClassName = clsx(panelClassName, styles.comicPanelFocusOnHover);
|
|
202
260
|
}
|
|
203
261
|
return panelClassName;
|
|
204
262
|
}, onPanelClicked: ([rI, cI]) => {
|
|
@@ -207,27 +265,27 @@ function ComicPages({ pages, vertical, className, pageNumber, scrollThreshold =
|
|
|
207
265
|
.scrollIntoView({
|
|
208
266
|
behavior: 'smooth',
|
|
209
267
|
});
|
|
210
|
-
}, onPanelHovered: setHoveredPanel, ...currentPage }), jsxs("div", { className: styles
|
|
211
|
-
[styles
|
|
268
|
+
}, onPanelHovered: setHoveredPanel, ...currentPage }), jsxs("div", { className: styles.comicPagesActions, children: [jsx("button", { className: clsx({
|
|
269
|
+
[styles.hideComicAction]: currentIndex === 0,
|
|
212
270
|
}), onClick: () => goToPreviousPage(comicTextRef.current), children: jsx(MdArrowLeft, {}) }), jsxs("div", { children: ["Page ", currentIndex + 1, " of ", pages.length] }), jsx("button", { className: clsx({
|
|
213
|
-
[styles
|
|
214
|
-
}), onClick: () => goToNextPage(comicTextRef.current), children: jsx(MdArrowRight, {}) })] }), jsxs("div", { className: styles
|
|
271
|
+
[styles.hideComicAction]: lastPage,
|
|
272
|
+
}), onClick: () => goToNextPage(comicTextRef.current), children: jsx(MdArrowRight, {}) })] }), jsxs("div", { className: styles.comicPagesInput, children: ["Go to", ' ', jsx("input", { type: "number", className: styles.comicPageGoTo, onChange: (event) => {
|
|
215
273
|
const value = Number(event.currentTarget.value) - 1;
|
|
216
274
|
if (value >= 0 && value < pages.length) {
|
|
217
275
|
setCurrentIndex(value);
|
|
218
276
|
onPageChange?.(value);
|
|
219
277
|
}
|
|
220
|
-
} })] })] }), jsxs("div", { className: styles
|
|
278
|
+
} })] })] }), jsxs("div", { className: styles.comicPagesText, ref: comicTextRef, tabIndex: 0, children: [currentPage.rows.flatMap(({ columns }, rI) => {
|
|
221
279
|
return columns.map(({ content }, cI) => {
|
|
222
280
|
return (jsx("p", { className: clsx({
|
|
223
|
-
[styles
|
|
281
|
+
[styles.textFocusOnHover]: rI === hoveredPanel?.[0] && cI === hoveredPanel[1],
|
|
224
282
|
}), "data-x": rI, "data-y": cI, onMouseOver: () => setHoveredPanel([rI, cI]), onMouseOut: () => setHoveredPanel(null), children: renderContent(content) }, `${rI}-${cI}`));
|
|
225
283
|
});
|
|
226
|
-
}), jsx("div", { className: styles
|
|
284
|
+
}), jsx("div", { className: styles.comicPagesTextAnchor, children: lastPage
|
|
227
285
|
? 'You are on the last page.'
|
|
228
286
|
: 'Scroll to the bottom to go to the next page' })] })] }));
|
|
229
287
|
}
|
|
230
288
|
}
|
|
231
289
|
|
|
232
|
-
export { ComicPages };
|
|
290
|
+
export { AllComicPages, ComicPage, ComicPages };
|
|
233
291
|
//# sourceMappingURL=index.js.map
|
package/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../node_modules/style-inject/dist/style-inject.es.js","../src/ComicPage.tsx","../src/ComicPages.tsx"],"sourcesContent":["function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n","import styles from './ComicPage.module.css';\n\nimport { JSX } from 'react';\nimport clsx from 'clsx';\nimport { ComicPanel, SquarePaneledComic } from './models';\n\n/**\n * This sizing is not ABSOLUTE, it is PROPORTIONAL.\n * For example, if a row is of size \"1\" and another is of size \"2\", row 2 is twice as tall as row 1.\n * If there is another row of size \"3\", then row 3 is three times as tall as row 1, and one-and-a-half as tall as row 2.\n * You have to math it out.\n * This relativity is needed so that the comics change size and fit within the web browser, regardless of device or browser size.\n */\n\nexport type Props = SquarePaneledComic & {\n className?: string;\n panelClassName?: (panel: ComicPanel) => string | undefined;\n onPanelClicked?: (panel: ComicPanel) => void;\n onPanelHovered?: (panel: ComicPanel | null) => void;\n};\n/*\nIt might honestly be better to POC this first before drawing up an interface.\nWe want the panels to be flexible. Ergo, it might be better to define the shapes by ratios\nrather than by any absolute sizing. For example, a rectangle may be defined by 1:2:1:2 - that is, the width is twice the height.\nBut how does this get expressed? Is EVERY side required? Are origins needed?\n\nA way of doing - that addresses the \"sides\" requirement - is to define a Shapes model - ex. Rhombuses, Squares, blah.\nFor Rhombuses, I guess you only need height and the two bases.\n\n\nThe other way is to have TRUE flexibility - rather than define panels specifically, at most the component just draws images\nand the writer figures it out.\nHowever, the downside is that it is impossible to know what is a panel and what is not; knowing what is a panel would help\nwith the interactivity of the thing.\nA way to remedy this is to allow the client to define what are panels.\nBut this is a pain in the ass, as we may need to be aware of three-dimensionality (as in, z-indexes and shit). But this may not be as\nbad as one thinks.\nThis may also help with the saving of comic templates, but we're not there yet...\n\nThis, of course, raises the question of wtf this framework even saves the client's time with, if we allow the client to just define\nwhatever they want.\nWell, questions to answer all in due time I guess...\n\n\n\ninterface DynamicProps {\n shapes: Array<{\n origin: [number, number];\n sides: Array\n }>;\n}\n*/\n\nexport function ComicPage({\n ratio,\n rows,\n panelClassName,\n className,\n onPanelClicked,\n onPanelHovered,\n}: Props): JSX.Element {\n return (\n <div\n className={clsx(styles.comicPage, className)}\n style={{\n aspectRatio: `${ratio.width} / ${ratio.height}`,\n }}\n >\n {rows.map(({ size, columns }, rI) => {\n return (\n <div\n key={rI}\n className={styles.comicPanelRow}\n style={{\n flex: (size ?? 1).toString(),\n }}\n >\n {columns.map(({ size }, cI) => {\n return (\n <div\n key={cI}\n style={{ flex: (size ?? 1).toString() }}\n className={clsx(\n styles.comicPanel,\n panelClassName?.([rI, cI]),\n )}\n onClick={() => onPanelClicked?.([rI, cI])}\n onMouseOver={() => onPanelHovered?.([rI, cI])}\n onMouseOut={() => onPanelHovered?.(null)}\n ></div>\n );\n })}\n </div>\n );\n })}\n </div>\n );\n}\n","import styles from './ComicPages.module.css';\n\nimport {\n JSX,\n KeyboardEvent,\n ReactNode,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport throttle from 'lodash-es/throttle';\nimport { MdArrowLeft, MdArrowRight } from 'react-icons/md';\n\nimport { Props as ComicPanelProps, ComicPage } from './ComicPage';\nimport { ComicPanel } from './models';\nimport clsx from 'clsx';\n\ninterface Props {\n pages: Array<ComicPanelProps>;\n\n pageNumber?: number;\n vertical?: boolean;\n className?: string;\n scrollThreshold?: number;\n onPageChange?: (pageNumber: number) => void;\n onComicEnd?: () => void;\n renderContent?: (content: string | ReactNode) => ReactNode;\n}\n\n// SEO? Ex. full content? Probably a carousel?\nexport function ComicPages({\n pages,\n vertical,\n className,\n pageNumber,\n scrollThreshold = 10,\n onPageChange,\n onComicEnd,\n renderContent = (content) => content,\n}: Props): JSX.Element {\n const comicPagesRef = useRef<HTMLDivElement>(null);\n const comicTextRef = useRef<HTMLDivElement>(null);\n\n const [cachedPageNumber, setCachedPageNumber] = useState(pageNumber);\n\n const getCurrentIndexByPageNumber = useCallback(\n (pageNumber: number | undefined) => {\n if (\n typeof pageNumber === 'number' &&\n pageNumber >= 0 &&\n pageNumber < pages.length\n ) {\n return pageNumber;\n } else {\n return 0;\n }\n },\n [pages],\n );\n\n const [currentIndex, setCurrentIndex] = useState(() =>\n getCurrentIndexByPageNumber(pageNumber),\n );\n const [scrolledToPanel, setScrolledToPanel] = useState<ComicPanel>([0, 0]);\n const [hoveredPanel, setHoveredPanel] = useState<ComicPanel | null>(null);\n\n const currentPage = pages[currentIndex];\n\n const lastPage = currentIndex === pages.length - 1;\n\n const goToPreviousPage = useCallback(\n (comicTextContainer: HTMLElement) => {\n if (currentIndex > 0) {\n const newPage = currentIndex - 1;\n\n setCurrentIndex(newPage);\n onPageChange?.(newPage);\n comicTextContainer.scroll({\n top: 0,\n });\n }\n },\n [currentIndex, setCurrentIndex, pages, onPageChange],\n );\n\n const goToNextPage = useCallback(\n (comicTextContainer: HTMLElement) => {\n if (lastPage) {\n onComicEnd?.();\n } else {\n const newPage = currentIndex + 1;\n\n setCurrentIndex(newPage);\n onPageChange?.(newPage);\n comicTextContainer.scroll({\n top: 0,\n });\n }\n },\n [currentIndex, setCurrentIndex, pages, lastPage, onComicEnd, onPageChange],\n );\n\n // If the passed-down 'pageNumber' changes, honor the client and change the component.\n useEffect(() => {\n if (pageNumber !== cachedPageNumber) {\n setCachedPageNumber(pageNumber);\n setCurrentIndex(getCurrentIndexByPageNumber(pageNumber));\n }\n }, [\n pageNumber,\n cachedPageNumber,\n setCachedPageNumber,\n getCurrentIndexByPageNumber,\n ]);\n\n useEffect(() => {\n if (comicTextRef.current) {\n const comicTextContainer = comicTextRef.current;\n\n function onScroll(): void {\n const { bottom: containerBottom, y: containerY } =\n comicTextContainer.getBoundingClientRect();\n\n const anchor = comicTextContainer.querySelector(\n `.${styles.comicPagesTextAnchor}`,\n )!;\n const { bottom: anchorBottom } = anchor.getBoundingClientRect();\n\n if (\n Math.floor(anchorBottom) <\n Math.floor(containerBottom) + scrollThreshold\n ) {\n goToNextPage(comicTextContainer);\n }\n\n for (const child of comicTextContainer.children) {\n const { bottom } = child.getBoundingClientRect();\n\n if (bottom > containerY) {\n const { x, y } = (child as HTMLElement).dataset;\n setScrolledToPanel([Number(x), Number(y)]);\n break;\n }\n }\n }\n\n const listeningFunction = throttle(onScroll, 300);\n\n comicTextContainer.addEventListener('scroll', listeningFunction);\n\n return () =>\n comicTextContainer.removeEventListener('scroll', listeningFunction);\n }\n }, [setScrolledToPanel, goToNextPage, comicTextRef.current, scrollThreshold]);\n\n useEffect(() => {\n if (comicPagesRef.current && comicTextRef.current) {\n const comicPagesContainer = comicPagesRef.current;\n const comicTextContainer = comicTextRef.current;\n\n function onKeyDown(event: KeyboardEvent<Element>): void {\n switch (event.key) {\n case 'ArrowLeft':\n goToPreviousPage(comicTextContainer);\n break;\n case 'ArrowRight':\n goToNextPage(comicTextContainer);\n break;\n }\n }\n\n comicPagesContainer.addEventListener('keydown', onKeyDown as any);\n\n return () =>\n comicPagesContainer.removeEventListener('keydown', onKeyDown as any);\n }\n }, [\n goToPreviousPage,\n goToNextPage,\n comicPagesRef.current,\n comicTextRef.current,\n ]);\n\n if (!currentPage) {\n return <p>Something went wrong. You're on a non-existing page.</p>;\n } else {\n return (\n <div\n className={clsx(styles.comicPages, className, {\n [styles.comicPagesVerticalView]: vertical,\n })}\n ref={comicPagesRef}\n tabIndex={0}\n >\n <div className={styles.comicPagesReferenceContainer}>\n <ComicPage\n className={styles.comicPagesReference}\n panelClassName={([rI, cI]) => {\n let panelClassName = '';\n\n if (scrolledToPanel[0] === rI && scrolledToPanel[1] === cI) {\n panelClassName = clsx(\n panelClassName,\n styles.comicPanelFocusOnScroll,\n );\n }\n\n if (hoveredPanel?.[0] === rI && hoveredPanel![1] === cI) {\n panelClassName = clsx(\n panelClassName,\n styles.comicPanelFocusOnHover,\n );\n }\n\n return panelClassName;\n }}\n onPanelClicked={([rI, cI]) => {\n document\n .querySelector(`[data-x=\"${rI}\"][data-y=\"${cI}\"]`)!\n .scrollIntoView({\n behavior: 'smooth',\n });\n }}\n onPanelHovered={setHoveredPanel}\n {...currentPage}\n />\n <div className={styles.comicPagesActions}>\n <button\n className={clsx({\n [styles.hideComicAction]: currentIndex === 0,\n })}\n onClick={() => goToPreviousPage(comicTextRef.current!)}\n >\n <MdArrowLeft />\n </button>\n <div>\n Page {currentIndex + 1} of {pages.length}\n </div>\n <button\n className={clsx({\n [styles.hideComicAction]: lastPage,\n })}\n onClick={() => goToNextPage(comicTextRef.current!)}\n >\n <MdArrowRight />\n </button>\n </div>\n <div className={styles.comicPagesInput}>\n Go to{' '}\n <input\n type=\"number\"\n className={styles.comicPageGoTo}\n onChange={(event) => {\n const value = Number(event.currentTarget.value) - 1;\n\n if (value >= 0 && value < pages.length) {\n setCurrentIndex(value);\n onPageChange?.(value);\n }\n }}\n />\n </div>\n </div>\n <div className={styles.comicPagesText} ref={comicTextRef} tabIndex={0}>\n {currentPage.rows.flatMap(({ columns }, rI) => {\n return columns.map(({ content }, cI) => {\n return (\n <p\n key={`${rI}-${cI}`}\n className={clsx({\n [styles.textFocusOnHover]:\n rI === hoveredPanel?.[0] && cI === hoveredPanel![1],\n })}\n data-x={rI}\n data-y={cI}\n onMouseOver={() => setHoveredPanel([rI, cI])}\n onMouseOut={() => setHoveredPanel(null)}\n >\n {renderContent(content)}\n </p>\n );\n });\n })}\n <div className={styles.comicPagesTextAnchor}>\n {lastPage\n ? 'You are on the last page.'\n : 'Scroll to the bottom to go to the next page'}\n </div>\n </div>\n </div>\n );\n }\n}\n"],"names":["_jsx","styles","_jsxs"],"mappings":"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","x_google_ignoreList":[0]}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../node_modules/style-inject/dist/style-inject.es.js","../src/ComicPage.tsx","../src/AllComicPages.tsx","../src/ComicPages.tsx"],"sourcesContent":["function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n","import styles from './ComicPage.module.css';\n\nimport { JSX, ReactNode } from 'react';\nimport clsx from 'clsx';\nimport { ComicPanel, SquarePaneledComic } from './models';\n\n/**\n * This sizing is not ABSOLUTE, it is PROPORTIONAL.\n * For example, if a row is of size \"1\" and another is of size \"2\", row 2 is twice as tall as row 1.\n * If there is another row of size \"3\", then row 3 is three times as tall as row 1, and one-and-a-half as tall as row 2.\n * You have to math it out.\n * This relativity is needed so that the comics change size and fit within the web browser, regardless of device or browser size.\n */\n\nexport type Props = SquarePaneledComic & {\n className?: string;\n panelClassName?: (panel: ComicPanel) => string | undefined;\n onPanelClicked?: (panel: ComicPanel) => void;\n onPanelHovered?: (panel: ComicPanel | null) => void;\n children?: ReactNode;\n};\n/*\nIt might honestly be better to POC this first before drawing up an interface.\nWe want the panels to be flexible. Ergo, it might be better to define the shapes by ratios\nrather than by any absolute sizing. For example, a rectangle may be defined by 1:2:1:2 - that is, the width is twice the height.\nBut how does this get expressed? Is EVERY side required? Are origins needed?\n\nA way of doing - that addresses the \"sides\" requirement - is to define a Shapes model - ex. Rhombuses, Squares, blah.\nFor Rhombuses, I guess you only need height and the two bases.\n\n\nThe other way is to have TRUE flexibility - rather than define panels specifically, at most the component just draws images\nand the writer figures it out.\nHowever, the downside is that it is impossible to know what is a panel and what is not; knowing what is a panel would help\nwith the interactivity of the thing.\nA way to remedy this is to allow the client to define what are panels.\nBut this is a pain in the ass, as we may need to be aware of three-dimensionality (as in, z-indexes and shit). But this may not be as\nbad as one thinks.\nThis may also help with the saving of comic templates, but we're not there yet...\n\nThis, of course, raises the question of wtf this framework even saves the client's time with, if we allow the client to just define\nwhatever they want.\nWell, questions to answer all in due time I guess...\n\n\n\ninterface DynamicProps {\n shapes: Array<{\n origin: [number, number];\n sides: Array\n }>;\n}\n*/\n\nexport function ComicPage({\n ratio,\n rows,\n panelClassName,\n className,\n onPanelClicked,\n onPanelHovered,\n children,\n}: Props): JSX.Element {\n return (\n <div\n className={clsx(styles.comicPage, className)}\n style={{\n aspectRatio: `${ratio.width} / ${ratio.height}`,\n }}\n >\n {rows.map(({ size, columns }, rI) => {\n return (\n <div\n key={rI}\n className={styles.comicPanelRow}\n style={{\n flex: (size ?? 1).toString(),\n }}\n >\n {columns.map(({ size }, cI) => {\n return (\n <div\n key={cI}\n style={{ flex: (size ?? 1).toString() }}\n className={clsx(\n styles.comicPanel,\n panelClassName?.([rI, cI]),\n )}\n onClick={() => onPanelClicked?.([rI, cI])}\n onMouseOver={() => onPanelHovered?.([rI, cI])}\n onMouseOut={() => onPanelHovered?.(null)}\n ></div>\n );\n })}\n </div>\n );\n })}\n {children}\n </div>\n );\n}\n","import styles from './AllComicPages.module.css';\n\nimport {\n CSSProperties,\n JSX,\n ReactNode,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport { Props as ComicPanelProps, ComicPage } from './ComicPage';\nimport clsx from 'clsx';\nimport { ComicPanel } from './models';\nimport throttle from 'lodash-es/throttle';\n\ninterface Props {\n pages: Array<ComicPanelProps>;\n\n classes?: {\n root?: string;\n panel?: string;\n };\n style?: Partial<CSSProperties>;\n renderContent?: (content: string | ReactNode) => ReactNode;\n}\n\nexport function AllComicPages({\n pages,\n classes,\n style,\n renderContent = (content) => content,\n}: Props): JSX.Element {\n const comicTextRef = useRef<HTMLDivElement>(null);\n\n const [currentPage, setCurrentPage] = useState(0),\n [scrolledToPanel, setScrolledToPanel] = useState<ComicPanel>([0, 0]);\n\n useEffect(() => {\n if (comicTextRef.current) {\n const comicTextContainer = comicTextRef.current;\n\n function onScroll(): void {\n const { y: containerY, height: containerHeight } =\n comicTextContainer.getBoundingClientRect();\n\n const containerBottom = containerY + containerHeight / 2;\n\n for (const child of comicTextContainer.children) {\n if (child.classList.contains(styles.allComicPagesReference)) {\n continue;\n }\n\n const { bottom } = child.getBoundingClientRect();\n\n if (bottom > containerBottom) {\n const { page, x, y } = (child as HTMLElement).dataset;\n\n if (page && x && y) {\n setCurrentPage(Number(page));\n setScrolledToPanel([Number(x), Number(y)]);\n break;\n }\n }\n }\n }\n\n const listeningFunction = throttle(onScroll, 100);\n\n comicTextContainer.addEventListener('scroll', listeningFunction);\n\n return () =>\n comicTextContainer.removeEventListener('scroll', listeningFunction);\n }\n }, [setScrolledToPanel, setCurrentPage, comicTextRef.current]);\n\n return (\n <div\n className={clsx(styles.allComicPagesText, classes?.root)}\n style={style}\n ref={comicTextRef}\n >\n <ComicPage\n className={styles.allComicPagesReference}\n panelClassName={([rI, cI]) => {\n let panelClassName = clsx(classes?.panel);\n\n if (scrolledToPanel[0] === rI && scrolledToPanel[1] === cI) {\n panelClassName = clsx(\n panelClassName,\n styles.comicPanelFocusOnScroll,\n );\n }\n return panelClassName;\n }}\n {...pages[currentPage]}\n >\n <span className={styles.allComicPagesReferencePage}>\n {currentPage + 1}\n </span>\n </ComicPage>\n {pages.flatMap((page, i) => {\n return [\n <h3 key={`page-header-${i}`}>Page {i + 1}</h3>,\n ...page.rows.flatMap((row, r) => {\n return row.columns.map((column, c) => {\n let label = `R${r + 1}`;\n\n if (row.size) {\n label += `S${row.size}`;\n }\n\n label += `C${c + 1}`;\n\n if (column.size) {\n label += `S${column.size}`;\n }\n\n return (\n <div key={`${i}-${r}-${c}`} data-page={i} data-x={r} data-y={c}>\n <label>{label}</label>\n <p>{renderContent(column.content)}</p>\n </div>\n );\n });\n }),\n ];\n })}\n </div>\n );\n}\n","import styles from './ComicPages.module.css';\n\nimport {\n JSX,\n KeyboardEvent,\n ReactNode,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport throttle from 'lodash-es/throttle';\nimport { MdArrowLeft, MdArrowRight } from 'react-icons/md';\n\nimport { Props as ComicPanelProps, ComicPage } from './ComicPage';\nimport { ComicPanel } from './models';\nimport clsx from 'clsx';\n\ninterface Props {\n pages: Array<ComicPanelProps>;\n\n pageNumber?: number;\n vertical?: boolean;\n className?: string;\n scrollThreshold?: number;\n onPageChange?: (pageNumber: number) => void;\n onComicEnd?: () => void;\n renderContent?: (content: string | ReactNode) => ReactNode;\n}\n\nexport function ComicPages({\n pages,\n vertical,\n className,\n pageNumber,\n scrollThreshold = 10,\n onPageChange,\n onComicEnd,\n renderContent = (content) => content,\n}: Props): JSX.Element {\n const comicPagesRef = useRef<HTMLDivElement>(null);\n const comicTextRef = useRef<HTMLDivElement>(null);\n\n const [cachedPageNumber, setCachedPageNumber] = useState(pageNumber);\n\n const getCurrentIndexByPageNumber = useCallback(\n (pageNumber: number | undefined) => {\n if (\n typeof pageNumber === 'number' &&\n pageNumber >= 0 &&\n pageNumber < pages.length\n ) {\n return pageNumber;\n } else {\n return 0;\n }\n },\n [pages],\n );\n\n const [currentIndex, setCurrentIndex] = useState(() =>\n getCurrentIndexByPageNumber(pageNumber),\n );\n const [scrolledToPanel, setScrolledToPanel] = useState<ComicPanel>([0, 0]);\n const [hoveredPanel, setHoveredPanel] = useState<ComicPanel | null>(null);\n\n const currentPage = pages[currentIndex];\n\n const lastPage = currentIndex === pages.length - 1;\n\n const goToPreviousPage = useCallback(\n (comicTextContainer: HTMLElement) => {\n if (currentIndex > 0) {\n const newPage = currentIndex - 1;\n\n setCurrentIndex(newPage);\n onPageChange?.(newPage);\n comicTextContainer.scroll({\n top: 0,\n });\n }\n },\n [currentIndex, setCurrentIndex, pages, onPageChange],\n );\n\n const goToNextPage = useCallback(\n (comicTextContainer: HTMLElement) => {\n if (lastPage) {\n onComicEnd?.();\n } else {\n const newPage = currentIndex + 1;\n\n setCurrentIndex(newPage);\n onPageChange?.(newPage);\n comicTextContainer.scroll({\n top: 0,\n });\n }\n },\n [currentIndex, setCurrentIndex, pages, lastPage, onComicEnd, onPageChange],\n );\n\n // If the passed-down 'pageNumber' changes, honor the client and change the component.\n useEffect(() => {\n if (pageNumber !== cachedPageNumber) {\n setCachedPageNumber(pageNumber);\n setCurrentIndex(getCurrentIndexByPageNumber(pageNumber));\n }\n }, [\n pageNumber,\n cachedPageNumber,\n setCachedPageNumber,\n getCurrentIndexByPageNumber,\n ]);\n\n useEffect(() => {\n if (comicTextRef.current) {\n const comicTextContainer = comicTextRef.current;\n\n function onScroll(): void {\n const { bottom: containerBottom, y: containerY } =\n comicTextContainer.getBoundingClientRect();\n\n const anchor = comicTextContainer.querySelector(\n `.${styles.comicPagesTextAnchor}`,\n )!;\n const { bottom: anchorBottom } = anchor.getBoundingClientRect();\n\n if (\n Math.floor(anchorBottom) <\n Math.floor(containerBottom) + scrollThreshold\n ) {\n goToNextPage(comicTextContainer);\n }\n\n for (const child of comicTextContainer.children) {\n const { bottom } = child.getBoundingClientRect();\n\n if (bottom > containerY) {\n const { x, y } = (child as HTMLElement).dataset;\n setScrolledToPanel([Number(x), Number(y)]);\n break;\n }\n }\n }\n\n const listeningFunction = throttle(onScroll, 300);\n\n comicTextContainer.addEventListener('scroll', listeningFunction);\n\n return () =>\n comicTextContainer.removeEventListener('scroll', listeningFunction);\n }\n }, [setScrolledToPanel, goToNextPage, comicTextRef.current, scrollThreshold]);\n\n useEffect(() => {\n if (comicPagesRef.current && comicTextRef.current) {\n const comicPagesContainer = comicPagesRef.current;\n const comicTextContainer = comicTextRef.current;\n\n function onKeyDown(event: KeyboardEvent<Element>): void {\n switch (event.key) {\n case 'ArrowLeft':\n goToPreviousPage(comicTextContainer);\n break;\n case 'ArrowRight':\n goToNextPage(comicTextContainer);\n break;\n }\n }\n\n comicPagesContainer.addEventListener('keydown', onKeyDown as any);\n\n return () =>\n comicPagesContainer.removeEventListener('keydown', onKeyDown as any);\n }\n }, [\n goToPreviousPage,\n goToNextPage,\n comicPagesRef.current,\n comicTextRef.current,\n ]);\n\n if (!currentPage) {\n return <p>Something went wrong. You're on a non-existing page.</p>;\n } else {\n return (\n <div\n className={clsx(styles.comicPages, className, {\n [styles.comicPagesVerticalView]: vertical,\n })}\n ref={comicPagesRef}\n tabIndex={0}\n >\n <div className={styles.comicPagesReferenceContainer}>\n <ComicPage\n className={styles.comicPagesReference}\n panelClassName={([rI, cI]) => {\n let panelClassName = '';\n\n if (scrolledToPanel[0] === rI && scrolledToPanel[1] === cI) {\n panelClassName = clsx(\n panelClassName,\n styles.comicPanelFocusOnScroll,\n );\n }\n\n if (hoveredPanel?.[0] === rI && hoveredPanel![1] === cI) {\n panelClassName = clsx(\n panelClassName,\n styles.comicPanelFocusOnHover,\n );\n }\n\n return panelClassName;\n }}\n onPanelClicked={([rI, cI]) => {\n document\n .querySelector(`[data-x=\"${rI}\"][data-y=\"${cI}\"]`)!\n .scrollIntoView({\n behavior: 'smooth',\n });\n }}\n onPanelHovered={setHoveredPanel}\n {...currentPage}\n />\n <div className={styles.comicPagesActions}>\n <button\n className={clsx({\n [styles.hideComicAction]: currentIndex === 0,\n })}\n onClick={() => goToPreviousPage(comicTextRef.current!)}\n >\n <MdArrowLeft />\n </button>\n <div>\n Page {currentIndex + 1} of {pages.length}\n </div>\n <button\n className={clsx({\n [styles.hideComicAction]: lastPage,\n })}\n onClick={() => goToNextPage(comicTextRef.current!)}\n >\n <MdArrowRight />\n </button>\n </div>\n <div className={styles.comicPagesInput}>\n Go to{' '}\n <input\n type=\"number\"\n className={styles.comicPageGoTo}\n onChange={(event) => {\n const value = Number(event.currentTarget.value) - 1;\n\n if (value >= 0 && value < pages.length) {\n setCurrentIndex(value);\n onPageChange?.(value);\n }\n }}\n />\n </div>\n </div>\n <div className={styles.comicPagesText} ref={comicTextRef} tabIndex={0}>\n {currentPage.rows.flatMap(({ columns }, rI) => {\n return columns.map(({ content }, cI) => {\n return (\n <p\n key={`${rI}-${cI}`}\n className={clsx({\n [styles.textFocusOnHover]:\n rI === hoveredPanel?.[0] && cI === hoveredPanel![1],\n })}\n data-x={rI}\n data-y={cI}\n onMouseOver={() => setHoveredPanel([rI, cI])}\n onMouseOut={() => setHoveredPanel(null)}\n >\n {renderContent(content)}\n </p>\n );\n });\n })}\n <div className={styles.comicPagesTextAnchor}>\n {lastPage\n ? 'You are on the last page.'\n : 'Scroll to the bottom to go to the next page'}\n </div>\n </div>\n </div>\n );\n }\n}\n"],"names":["_jsxs","styles","_jsx"],"mappings":"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","x_google_ignoreList":[0]}
|