npm - comic-panels-ui - Versions diffs - 0.0.0-beta.7 → 0.0.0-beta.9 - Mend

comic-panels-ui 0.0.0-beta.7 → 0.0.0-beta.9

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.

Files changed (4) hide show

package/ComicPages.d.ts CHANGED Viewed

@@ -2,9 +2,11 @@ import { JSX } from 'react';
 import { Props as ComicPanelProps } from './ComicPage';
 interface Props {
     pages: Array<ComicPanelProps>;
+    pageNumber?: number;
     vertical?: boolean;
     className?: string;
+    onPageChange?: (pageNumber: number) => void;
     onComicEnd?: () => void;
 }
-export declare function ComicPages({ pages, vertical, className, onComicEnd, }: Props): JSX.Element;
+export declare function ComicPages({ pages, vertical, className, pageNumber, onPageChange, onComicEnd, }: Props): JSX.Element;
 export {};

package/index.js CHANGED Viewed

@@ -31,8 +31,8 @@ function styleInject(css, ref) {
   }
 }
-var css_248z$1 = ".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: 2 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  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__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: 2;\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";
-var styles$1 = {"comicPages":"comic-panels__comicPages","comicPagesVerticalView":"comic-panels__comicPagesVerticalView","comicPagesReferenceContainer":"comic-panels__comicPagesReferenceContainer","comicPagesText":"comic-panels__comicPagesText","comicPagesActions":"comic-panels__comicPagesActions","hideComicAction":"comic-panels__hideComicAction","comicPagesReference":"comic-panels__comicPagesReference","comicPagesTextAnchor":"comic-panels__comicPagesTextAnchor","comicPanelFocusOnScroll":"comic-panels__comicPanelFocusOnScroll","comicPanelFocusOnHover":"comic-panels__comicPanelFocusOnHover","textFocusOnHover":"comic-panels__textFocusOnHover"};
+var css_248z$1 = ".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: 2 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: 2;\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";
+var styles$1 = {"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"};
 styleInject(css_248z$1);
 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";
@@ -83,33 +83,47 @@ function ComicPage({ ratio, rows, panelClassName, className, onPanelClicked, onP
         }) }));
 }
-function ComicPages({ pages, vertical, className, onComicEnd, }) {
+// SEO? Ex. full content? Probably a carousel?
+function ComicPages({ pages, vertical, className, pageNumber, onPageChange, onComicEnd, }) {
     const comicPagesRef = useRef(null);
     const comicTextRef = useRef(null);
-    const [currentIndex, setCurrentIndex] = useState(0);
+    const [currentIndex, setCurrentIndex] = useState(() => {
+        if (typeof pageNumber === 'number' &&
+            pageNumber > 0 &&
+            pageNumber <= pages.length) {
+            return pageNumber - 1;
+        }
+        else {
+            return 0;
+        }
+    });
     const [scrolledToPanel, setScrolledToPanel] = useState([0, 0]);
     const [hoveredPanel, setHoveredPanel] = useState(null);
     const currentPage = pages[currentIndex];
     const lastPage = currentIndex === pages.length - 1;
     const goToPreviousPage = useCallback((comicTextContainer) => {
         if (currentIndex > 0) {
-            setCurrentIndex(currentIndex - 1);
+            const newPage = currentIndex - 1;
+            setCurrentIndex(newPage);
+            onPageChange?.(newPage);
             comicTextContainer.scroll({
                 top: 0,
             });
         }
-    }, [currentIndex, setCurrentIndex, pages]);
+    }, [currentIndex, setCurrentIndex, pages, onPageChange]);
     const goToNextPage = useCallback((comicTextContainer) => {
         if (lastPage) {
             onComicEnd?.();
         }
         else {
-            setCurrentIndex(currentIndex + 1);
+            const newPage = currentIndex + 1;
+            setCurrentIndex(newPage);
+            onPageChange?.(newPage);
             comicTextContainer.scroll({
                 top: 0,
             });
         }
-    }, [currentIndex, setCurrentIndex, pages, lastPage, onComicEnd]);
+    }, [currentIndex, setCurrentIndex, pages, lastPage, onComicEnd, onPageChange]);
     useEffect(() => {
         if (comicTextRef.current) {
             const comicTextContainer = comicTextRef.current;
@@ -182,7 +196,13 @@ function ComicPages({ pages, vertical, className, onComicEnd, }) {
                                         [styles$1.hideComicAction]: currentIndex === 0,
                                     }), onClick: () => goToPreviousPage(comicTextRef.current), children: jsx(MdArrowLeft, {}) }), jsxs("div", { children: ["Page ", currentIndex + 1, " of ", pages.length] }), jsx("button", { className: clsx({
                                         [styles$1.hideComicAction]: lastPage,
-                                    }), onClick: () => goToNextPage(comicTextRef.current), children: jsx(MdArrowRight, {}) })] })] }), jsxs("div", { className: styles$1.comicPagesText, ref: comicTextRef, tabIndex: 0, children: [currentPage.rows.flatMap(({ columns }, rI) => {
+                                    }), onClick: () => goToNextPage(comicTextRef.current), children: jsx(MdArrowRight, {}) })] }), jsxs("div", { className: styles$1.comicPagesInput, children: ["Go to", ' ', jsx("input", { type: "number", className: styles$1.comicPageGoTo, onChange: (event) => {
+                                        const value = Number(event.currentTarget.value) - 1;
+                                        if (value >= 0 && value < pages.length) {
+                                            setCurrentIndex(value);
+                                            onPageChange?.(value);
+                                        }
+                                    } })] })] }), jsxs("div", { className: styles$1.comicPagesText, ref: comicTextRef, tabIndex: 0, children: [currentPage.rows.flatMap(({ columns }, rI) => {
                             return columns.map(({ content }, cI) => {
                                 return (jsx("p", { className: clsx({
                                         [styles$1.textFocusOnHover]: rI === hoveredPanel?.[0] && cI === hoveredPanel[1],

package/index.js.map CHANGED Viewed

	@@ -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 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 vertical?: boolean;\n className?: string;\n onComicEnd?: () => void;\n}\n\nexport function ComicPages({\n pages,\n vertical,\n className,\n onComicEnd,\n}: Props): JSX.Element {\n const comicPagesRef = useRef<HTMLDivElement>(null);\n const comicTextRef = useRef<HTMLDivElement>(null);\n\n const [currentIndex, setCurrentIndex] = useState(0);\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 setCurrentIndex(currentIndex - 1);\n comicTextContainer.scroll({\n top: 0,\n });\n }\n },\n [currentIndex, setCurrentIndex, pages],\n );\n\n const goToNextPage = useCallback(\n (comicTextContainer: HTMLElement) => {\n if (lastPage) {\n onComicEnd?.();\n } else {\n setCurrentIndex(currentIndex + 1);\n comicTextContainer.scroll({\n top: 0,\n });\n }\n },\n [currentIndex, setCurrentIndex, pages, lastPage, onComicEnd],\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 (Math.floor(anchorBottom) === Math.floor(containerBottom)) {\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]);\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>\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 {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 } 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 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 onPageChange?: (pageNumber: number) => void;\n onComicEnd?: () => void;\n}\n\n// SEO? Ex. full content? Probably a carousel?\nexport function ComicPages({\n pages,\n vertical,\n className,\n pageNumber,\n onPageChange,\n onComicEnd,\n}: Props): JSX.Element {\n const comicPagesRef = useRef<HTMLDivElement>(null);\n const comicTextRef = useRef<HTMLDivElement>(null);\n\n const [currentIndex, setCurrentIndex] = useState(() => {\n if (\n typeof pageNumber === 'number' &&\n pageNumber > 0 &&\n pageNumber <= pages.length\n ) {\n return pageNumber - 1;\n } else {\n return 0;\n }\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 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 (Math.floor(anchorBottom) === Math.floor(containerBottom)) {\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]);\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 {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]}

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "comic-panels-ui",
   "type": "module",
-  "version": "0.0.0-beta.7",
+  "version": "0.0.0-beta.9",
   "exports": {
     ".": {
       "import": "./index.js",