comic-panels-ui 0.0.0-beta.12 → 0.0.0-beta.13
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 +1 -0
- package/index.js +31 -32
- 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 {
|
|
1
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
+
import clsx from 'clsx';
|
|
2
3
|
import { useRef, useState, useCallback, useEffect } from 'react';
|
|
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,14 +31,10 @@ function styleInject(css, ref) {
|
|
|
31
31
|
}
|
|
32
32
|
}
|
|
33
33
|
|
|
34
|
-
var css_248z$1 = ".comic-
|
|
35
|
-
var styles$1 = {"
|
|
34
|
+
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";
|
|
35
|
+
var styles$1 = {"comicPage":"comic-panels__comicPage","comicPanel":"comic-panels__comicPanel","comicPanelRow":"comic-panels__comicPanelRow"};
|
|
36
36
|
styleInject(css_248z$1);
|
|
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);
|
|
41
|
-
|
|
42
38
|
/*
|
|
43
39
|
It might honestly be better to POC this first before drawing up an interface.
|
|
44
40
|
We want the panels to be flexible. Ergo, it might be better to define the shapes by ratios
|
|
@@ -71,19 +67,22 @@ interface DynamicProps {
|
|
|
71
67
|
}>;
|
|
72
68
|
}
|
|
73
69
|
*/
|
|
74
|
-
function ComicPage({ ratio, rows, panelClassName, className, onPanelClicked, onPanelHovered, }) {
|
|
75
|
-
return (
|
|
70
|
+
function ComicPage({ ratio, rows, panelClassName, className, onPanelClicked, onPanelHovered, children, }) {
|
|
71
|
+
return (jsxs("div", { className: clsx(styles$1.comicPage, className), style: {
|
|
76
72
|
aspectRatio: `${ratio.width} / ${ratio.height}`,
|
|
77
|
-
}, children: rows.map(({ size, columns }, rI) => {
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
73
|
+
}, children: [rows.map(({ size, columns }, rI) => {
|
|
74
|
+
return (jsx("div", { className: styles$1.comicPanelRow, style: {
|
|
75
|
+
flex: (size ?? 1).toString(),
|
|
76
|
+
}, children: columns.map(({ size }, cI) => {
|
|
77
|
+
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));
|
|
78
|
+
}) }, rI));
|
|
79
|
+
}), children] }));
|
|
84
80
|
}
|
|
85
81
|
|
|
86
|
-
|
|
82
|
+
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";
|
|
83
|
+
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"};
|
|
84
|
+
styleInject(css_248z);
|
|
85
|
+
|
|
87
86
|
function ComicPages({ pages, vertical, className, pageNumber, scrollThreshold = 10, onPageChange, onComicEnd, renderContent = (content) => content, }) {
|
|
88
87
|
const comicPagesRef = useRef(null);
|
|
89
88
|
const comicTextRef = useRef(null);
|
|
@@ -143,7 +142,7 @@ function ComicPages({ pages, vertical, className, pageNumber, scrollThreshold =
|
|
|
143
142
|
const comicTextContainer = comicTextRef.current;
|
|
144
143
|
function onScroll() {
|
|
145
144
|
const { bottom: containerBottom, y: containerY } = comicTextContainer.getBoundingClientRect();
|
|
146
|
-
const anchor = comicTextContainer.querySelector(`.${styles
|
|
145
|
+
const anchor = comicTextContainer.querySelector(`.${styles.comicPagesTextAnchor}`);
|
|
147
146
|
const { bottom: anchorBottom } = anchor.getBoundingClientRect();
|
|
148
147
|
if (Math.floor(anchorBottom) <
|
|
149
148
|
Math.floor(containerBottom) + scrollThreshold) {
|
|
@@ -190,15 +189,15 @@ function ComicPages({ pages, vertical, className, pageNumber, scrollThreshold =
|
|
|
190
189
|
return jsx("p", { children: "Something went wrong. You're on a non-existing page." });
|
|
191
190
|
}
|
|
192
191
|
else {
|
|
193
|
-
return (jsxs("div", { className: clsx(styles
|
|
194
|
-
[styles
|
|
195
|
-
}), ref: comicPagesRef, tabIndex: 0, children: [jsxs("div", { className: styles
|
|
192
|
+
return (jsxs("div", { className: clsx(styles.comicPages, className, {
|
|
193
|
+
[styles.comicPagesVerticalView]: vertical,
|
|
194
|
+
}), ref: comicPagesRef, tabIndex: 0, children: [jsxs("div", { className: styles.comicPagesReferenceContainer, children: [jsx(ComicPage, { className: styles.comicPagesReference, panelClassName: ([rI, cI]) => {
|
|
196
195
|
let panelClassName = '';
|
|
197
196
|
if (scrolledToPanel[0] === rI && scrolledToPanel[1] === cI) {
|
|
198
|
-
panelClassName = clsx(panelClassName, styles
|
|
197
|
+
panelClassName = clsx(panelClassName, styles.comicPanelFocusOnScroll);
|
|
199
198
|
}
|
|
200
199
|
if (hoveredPanel?.[0] === rI && hoveredPanel[1] === cI) {
|
|
201
|
-
panelClassName = clsx(panelClassName, styles
|
|
200
|
+
panelClassName = clsx(panelClassName, styles.comicPanelFocusOnHover);
|
|
202
201
|
}
|
|
203
202
|
return panelClassName;
|
|
204
203
|
}, onPanelClicked: ([rI, cI]) => {
|
|
@@ -207,27 +206,27 @@ function ComicPages({ pages, vertical, className, pageNumber, scrollThreshold =
|
|
|
207
206
|
.scrollIntoView({
|
|
208
207
|
behavior: 'smooth',
|
|
209
208
|
});
|
|
210
|
-
}, onPanelHovered: setHoveredPanel, ...currentPage }), jsxs("div", { className: styles
|
|
211
|
-
[styles
|
|
209
|
+
}, onPanelHovered: setHoveredPanel, ...currentPage }), jsxs("div", { className: styles.comicPagesActions, children: [jsx("button", { className: clsx({
|
|
210
|
+
[styles.hideComicAction]: currentIndex === 0,
|
|
212
211
|
}), 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
|
|
212
|
+
[styles.hideComicAction]: lastPage,
|
|
213
|
+
}), 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
214
|
const value = Number(event.currentTarget.value) - 1;
|
|
216
215
|
if (value >= 0 && value < pages.length) {
|
|
217
216
|
setCurrentIndex(value);
|
|
218
217
|
onPageChange?.(value);
|
|
219
218
|
}
|
|
220
|
-
} })] })] }), jsxs("div", { className: styles
|
|
219
|
+
} })] })] }), jsxs("div", { className: styles.comicPagesText, ref: comicTextRef, tabIndex: 0, children: [currentPage.rows.flatMap(({ columns }, rI) => {
|
|
221
220
|
return columns.map(({ content }, cI) => {
|
|
222
221
|
return (jsx("p", { className: clsx({
|
|
223
|
-
[styles
|
|
222
|
+
[styles.textFocusOnHover]: rI === hoveredPanel?.[0] && cI === hoveredPanel[1],
|
|
224
223
|
}), "data-x": rI, "data-y": cI, onMouseOver: () => setHoveredPanel([rI, cI]), onMouseOut: () => setHoveredPanel(null), children: renderContent(content) }, `${rI}-${cI}`));
|
|
225
224
|
});
|
|
226
|
-
}), jsx("div", { className: styles
|
|
225
|
+
}), jsx("div", { className: styles.comicPagesTextAnchor, children: lastPage
|
|
227
226
|
? 'You are on the last page.'
|
|
228
227
|
: 'Scroll to the bottom to go to the next page' })] })] }));
|
|
229
228
|
}
|
|
230
229
|
}
|
|
231
230
|
|
|
232
|
-
export { ComicPages };
|
|
231
|
+
export { ComicPage, ComicPages };
|
|
233
232
|
//# 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/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 './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]}
|