From 6a87bc6684ff616159f9e4a6c7455c1eeab597c7 Mon Sep 17 00:00:00 2001 From: "Bhajneet S.K" Date: Tue, 13 Aug 2024 01:05:16 -0400 Subject: [PATCH] feat: add skeleton for line inspector --- src/components/app/inspector/inspector.css | 181 +++++++++++++++ src/components/app/inspector/inspector.tsx | 55 +++++ src/components/line/line.tsx | 255 +++++++++++---------- src/routes/layout-app.tsx | 6 + 4 files changed, 373 insertions(+), 124 deletions(-) create mode 100644 src/components/app/inspector/inspector.css create mode 100644 src/components/app/inspector/inspector.tsx diff --git a/src/components/app/inspector/inspector.css b/src/components/app/inspector/inspector.css new file mode 100644 index 0000000..4510880 --- /dev/null +++ b/src/components/app/inspector/inspector.css @@ -0,0 +1,181 @@ +@keyframes modal-appear { + 0% { + opacity: 0; + } + 100% { + opacity: var(--alpha-80); + } +} + +@keyframes fade-in-and-up { + 0% { + opacity: 0.4; + transform: translateY(24px); + } + 100% { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes fade-in-and-left { + 0% { + opacity: 0.4; + transform: translateX(24px); + } + 100% { + opacity: 1; + transform: translateX(0); + } +} + +@keyframes text-fades-in { + 0% { + color: var(--fg-muted); + } + 100% { + color: var(--fg); + } +} + +.modal-bg { + z-index: 2; + overscroll-behavior: contain; + width: 100vw; + height: 100vh; + background-color: var(--bg); + position: fixed; + max-width: none; + animation: modal-appear 0.125s ease; + animation-fill-mode: forwards; +} + +.modal { + position: fixed; + background-color: var(--bg-base); + z-index: 3; + color: var(--fg-muted); + font-size: 16px; + max-width: 100vw; +} + +.modal__header { + display: flex; + padding: 16px 24px; + align-items: center; + flex-direction: row; + justify-content: space-between; + border-bottom: 0.5px solid var(--toner); +} + +.modal__title { + margin: 0; +} + +.modal__article { + overscroll-behavior: contain; + overflow-y: scroll; +} + +.modal__article::-webkit-scrollbar { + display: none; +} + +.modal__article > * { + margin-bottom: 20px; +} + +.modal__article > *:last-child { + margin-bottom: 0; +} + +.modal__article > h2 { + line-height: 1.1; +} + +.modal__close { + width: 24px; + height: 24px; + border-radius: 24px; + line-height: 1; + background-color: var(--toner); + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + user-select: none; + border: 0.5px solid var(--toner); + transition: + background-color 0.25s ease, + color 0.25s ease; +} + +:global(body[dir='rtl'] .modal__close) { + right: auto; + left: 2.25em; +} + +.modal__close:hover { + background-color: var(--toner); + outline: 2.25px solid var(--ui); + outline-offset: 2.25px; +} + +@media (pointer: fine) { + .modal { + width: 400px; + top: 6em; + border-radius: 1em; + height: calc(100vh - 8.5em); + margin: 0 auto; + animation: + fade-in-and-left 0.125s ease, + text-fades-in 0.125s ease; + animation-fill-mode: forwards; + } + .modal__article { + max-height: calc(100vh - 8.5em - 4.25em - 0.5px); + } +} + +@media (pointer: coarse) { + .modal { + animation: + fade-in-and-up 0.125s ease, + text-fades-in 0.125s ease; + animation-fill-mode: forwards; + } + .modal__article { + max-height: 60vh; + } + .modal__close { + width: 35px; + height: 35px; + border-radius: 35px; + } + .modal__article > * { + margin-bottom: 24px; + } + @media (max-device-width: 480px) { + .modal { + width: 100%; + left: 0; + bottom: 0; + border-radius: 1em 1em 0 0; + padding-bottom: 24px; + } + } + @media (min-device-width: 481px) { + .modal { + width: 352px; + right: 24px; + top: 5em; + border-radius: 1em; + } + } + @media (min-device-width: 850px) { + .modal__article { + max-height: calc(100vh - 6.5em - 4.25em); + } + } +} diff --git a/src/components/app/inspector/inspector.tsx b/src/components/app/inspector/inspector.tsx new file mode 100644 index 0000000..0966bf2 --- /dev/null +++ b/src/components/app/inspector/inspector.tsx @@ -0,0 +1,55 @@ +import { + component$, + Resource, + useContext, + useResource$, + useStylesScoped$, +} from '@builder.io/qwik'; +import X from '~/components/icons/ui/x'; +import { UiContext } from '~/routes/layout-app'; +import styles from './inspector.css?inline'; + +interface InspectorProps { + id: string; +} + +export default component$(({ id }) => { + useStylesScoped$(styles); + const uiStore = useContext(UiContext); + const resource = useResource$(async () => { + console.log(`https://shabados.com/api/l/${id}`); + // const res = await fetch(`https://shabados.com/api/l/${id}`, { + const res = await fetch(`https://shabados.com/api/f/sggs`, { + mode: 'no-cors', + }); + const data = await res.json(); + console.log(data); + return data.id as string; + }); + + return ( + <> +
(uiStore.inspector = false)} /> +
+
+

{id}

+ (uiStore.inspector = false)} + > + + +
+
+

Hanji...

} + onRejected={(error) => <>Error: {error.message}} + onResolved={(asdf) =>

{asdf}

} + /> +
+
+ + ); +}); diff --git a/src/components/line/line.tsx b/src/components/line/line.tsx index fc41518..20c5df1 100644 --- a/src/components/line/line.tsx +++ b/src/components/line/line.tsx @@ -1,145 +1,152 @@ import { component$, useContext, useStylesScoped$ } from '@builder.io/qwik'; +import { ControlsContext, UiContext } from '~/routes/layout-app'; import styles from './line.css?inline'; -import { ControlsContext } from '~/routes/layout-app'; -export default component$(({ src, pronunciation, translation }: any) => { - useStylesScoped$(styles); - const controlsStore = useContext(ControlsContext); - const titlesFuzzy = [ - 'ੴ', - '॥ ਜਪੁ ॥', - 'ਪਾਤਿਸਾਹੀ ੧੦', - '॥ ਤ੍ਵ ਪ੍ਰਸਾਦਿ ॥', - '॥ ਤ੍ਵ ਪ੍ਰਸਾਦਿ ਕਥਤੇ ॥', - 'ਭੁਜੰਗ ਪ੍ਰਯਾਤ ਛੰਦ ॥', - '॥ ਚਾਚਰੀ ਛੰਦ ॥', - '॥ ਸਵੱਯੇ ॥', - '॥ ਚੌਪਈ ॥', - 'ਮਹਲਾ ੧', - 'ਮਹਲਾ ੨', - 'ਮਹਲਾ ੩', - 'ਮਹਲਾ ੪', - 'ਮਹਲਾ ੫', - 'ਮਹਲਾ ੬', - 'ਮਹਲਾ ੭', - 'ਮਹਲਾ ੮', - 'ਮਹਲਾ ੯', - 'ਮਃ ੧', - 'ਮਃ ੨', - 'ਮਃ ੩', - 'ਮਃ ੪', - 'ਮਃ ੫', - 'ਮਃ ੬', - 'ਮਃ ੭', - 'ਮਃ ੮', - 'ਮਃ ੯', - 'ਦੇਵਗੰਧਾਰੀ ੧', - 'ਦੇਵਗੰਧਾਰੀ ੨', - 'ਦੇਵਗੰਧਾਰੀ ੩', - 'ਦੇਵਗੰਧਾਰੀ ੪', - 'ਦੇਵਗੰਧਾਰੀ ੫', - 'ਦੇਵਗੰਧਾਰੀ ੬', - 'ਦੇਵਗੰਧਾਰੀ ੭', - 'ਦੇਵਗੰਧਾਰੀ ੮', - 'ਦੇਵਗੰਧਾਰੀ ੯', - ]; - const titlesExact = [ - 'ਜਾਪੁ ॥', - 'ਸਲੋਕੁ ॥', - 'ਚਾਚਰੀ ਛੰਦ ॥', - 'ਏਕ ਅਛਰੀ ਛੰਦ ॥', - 'ਸ੍ਵੈਯਾ ॥', - 'ਦੋਹਰਾ ॥', - 'ਸ੍ਰੀ ਭਗਉਤੀ ਜੀ ਸਹਾਇ ॥', - 'ਵਾਰ ਸ੍ਰੀ ਭਗਉਤੀ ਜੀ ਕੀ ॥', - 'ਰਹਰਾਸਿ ਸਾਹਿਬ', - 'ਪਉੜੀ।', - 'ਪਉੜੀ ।', - 'ਪਉੜੀ॥', - 'ਪਉੜੀ ॥', - 'ਆਸਾ ॥', - // add screensaver / slideshow values here - 'ਵਾਹਿਗੁਰੂ', - 'ਵਾਹਿਗੁਰੂ ਜੀ ਕਾ ਖ਼ਾਲਸਾ; ਵਾਹਿਗੁਰੂ ਜੀ ਕੀ ਫ਼ਤਿਹ', - 'ਬੋਲੇ ਸੋ ਨਿਹਾਲ; ਸਤਿ ਸ੍ਰੀ ਅਕਾਲ', - ]; - const isTitle = - titlesFuzzy.some((ele) => src.indexOf(ele) >= 0) || - titlesExact.some((ele) => ele == src); - const isEndOfPauri = - /॥[੧੨੩੪੫੬੭੮੯੦]+॥/.test(src) || src.indexOf('ਬੋਲੋ ਜੀ ਵਾਹਿਗੁਰੂ ।') >= 0; - return ( -
-

- {src.split(' ').map((word: string, index: number) => { - const betweenWords = index == 0 ? '' : ' '; - if (word.endsWith(';')) { - return ( - <> - {betweenWords} - {word.slice(0, -1)} - - ); - } else if (word.endsWith(',')) { - return ( - <> - {betweenWords} - {word.slice(0, -1)} - - ); - } else if (word.endsWith('.')) { - return ( - <> - {betweenWords} - {word.slice(0, -1)} - - ); - } - return ( - <> - {betweenWords} - {word} - - ); - })} -

- {controlsStore.pronunciationField && pronunciation ? ( -

- {pronunciation.split(' ').map((word: string) => { +export default component$( + ({ id = '', src, pronunciation, translation }: any) => { + useStylesScoped$(styles); + const controlsStore = useContext(ControlsContext); + const uiStore = useContext(UiContext); + const titlesFuzzy = [ + 'ੴ', + '॥ ਜਪੁ ॥', + 'ਪਾਤਿਸਾਹੀ ੧੦', + '॥ ਤ੍ਵ ਪ੍ਰਸਾਦਿ ॥', + '॥ ਤ੍ਵ ਪ੍ਰਸਾਦਿ ਕਥਤੇ ॥', + 'ਭੁਜੰਗ ਪ੍ਰਯਾਤ ਛੰਦ ॥', + '॥ ਚਾਚਰੀ ਛੰਦ ॥', + '॥ ਸਵੱਯੇ ॥', + '॥ ਚੌਪਈ ॥', + 'ਮਹਲਾ ੧', + 'ਮਹਲਾ ੨', + 'ਮਹਲਾ ੩', + 'ਮਹਲਾ ੪', + 'ਮਹਲਾ ੫', + 'ਮਹਲਾ ੬', + 'ਮਹਲਾ ੭', + 'ਮਹਲਾ ੮', + 'ਮਹਲਾ ੯', + 'ਮਃ ੧', + 'ਮਃ ੨', + 'ਮਃ ੩', + 'ਮਃ ੪', + 'ਮਃ ੫', + 'ਮਃ ੬', + 'ਮਃ ੭', + 'ਮਃ ੮', + 'ਮਃ ੯', + 'ਦੇਵਗੰਧਾਰੀ ੧', + 'ਦੇਵਗੰਧਾਰੀ ੨', + 'ਦੇਵਗੰਧਾਰੀ ੩', + 'ਦੇਵਗੰਧਾਰੀ ੪', + 'ਦੇਵਗੰਧਾਰੀ ੫', + 'ਦੇਵਗੰਧਾਰੀ ੬', + 'ਦੇਵਗੰਧਾਰੀ ੭', + 'ਦੇਵਗੰਧਾਰੀ ੮', + 'ਦੇਵਗੰਧਾਰੀ ੯', + ]; + const titlesExact = [ + 'ਜਾਪੁ ॥', + 'ਸਲੋਕੁ ॥', + 'ਚਾਚਰੀ ਛੰਦ ॥', + 'ਏਕ ਅਛਰੀ ਛੰਦ ॥', + 'ਸ੍ਵੈਯਾ ॥', + 'ਦੋਹਰਾ ॥', + 'ਸ੍ਰੀ ਭਗਉਤੀ ਜੀ ਸਹਾਇ ॥', + 'ਵਾਰ ਸ੍ਰੀ ਭਗਉਤੀ ਜੀ ਕੀ ॥', + 'ਰਹਰਾਸਿ ਸਾਹਿਬ', + 'ਪਉੜੀ।', + 'ਪਉੜੀ ।', + 'ਪਉੜੀ॥', + 'ਪਉੜੀ ॥', + 'ਆਸਾ ॥', + // add screensaver / slideshow values here + 'ਵਾਹਿਗੁਰੂ', + 'ਵਾਹਿਗੁਰੂ ਜੀ ਕਾ ਖ਼ਾਲਸਾ; ਵਾਹਿਗੁਰੂ ਜੀ ਕੀ ਫ਼ਤਿਹ', + 'ਬੋਲੇ ਸੋ ਨਿਹਾਲ; ਸਤਿ ਸ੍ਰੀ ਅਕਾਲ', + ]; + const isTitle = + titlesFuzzy.some((ele) => src.indexOf(ele) >= 0) || + titlesExact.some((ele) => ele == src); + const isEndOfPauri = + /॥[੧੨੩੪੫੬੭੮੯੦]+॥/.test(src) || src.indexOf('ਬੋਲੋ ਜੀ ਵਾਹਿਗੁਰੂ ।') >= 0; + return ( +

{ + uiStore.inspectorId = id; + uiStore.inspector = true; + }} + > +

+ {src.split(' ').map((word: string, index: number) => { + const betweenWords = index == 0 ? '' : ' '; if (word.endsWith(';')) { return ( <> - {word.slice(0, -1)}{' '} + {betweenWords} + {word.slice(0, -1)} ); } else if (word.endsWith(',')) { return ( <> - {word.slice(0, -1)}{' '} + {betweenWords} + {word.slice(0, -1)} ); } else if (word.endsWith('.')) { return ( <> - {word.slice(0, -1)}{' '} + {betweenWords} + {word.slice(0, -1)} ); } - return <>{word} ; + return ( + <> + {betweenWords} + {word} + + ); })}

- ) : ( - '' - )} - {controlsStore.translationField && translation ? ( -

{translation}

- ) : ( - '' - )} -
- ); -}); + {controlsStore.pronunciationField && pronunciation ? ( +

+ {pronunciation.split(' ').map((word: string) => { + if (word.endsWith(';')) { + return ( + <> + {word.slice(0, -1)}{' '} + + ); + } else if (word.endsWith(',')) { + return ( + <> + {word.slice(0, -1)}{' '} + + ); + } else if (word.endsWith('.')) { + return ( + <> + {word.slice(0, -1)}{' '} + + ); + } + return <>{word} ; + })} +

+ ) : ( + '' + )} + {controlsStore.translationField && translation ? ( +

{translation}

+ ) : ( + '' + )} +
+ ); + }, +); diff --git a/src/routes/layout-app.tsx b/src/routes/layout-app.tsx index 48c9bb6..c7de4a3 100644 --- a/src/routes/layout-app.tsx +++ b/src/routes/layout-app.tsx @@ -16,6 +16,7 @@ import styles from './app.css?inline'; import Slideshow from '~/components/app/slideshow/slideshow'; import Controls from '~/components/app/controls/controls'; import Journey from '~/components/app/journey/journey'; +// import Inspector from '~/components/app/inspector/inspector'; export const onGet: RequestHandler = async ({ cacheControl }) => { cacheControl({ @@ -48,6 +49,8 @@ export type Ui = { fullscreen: boolean; slideshow: boolean; journey: boolean; + inspector: boolean; + inspectorId: string; }; export const UiContext = createContextId('com.shabados.app.ui-context'); @@ -95,6 +98,8 @@ export default component$(() => { fullscreen: false, slideshow: false, journey: false, + inspector: false, + inspectorId: '', }); useContextProvider(UiContext, uiStore); @@ -240,6 +245,7 @@ export default component$(() => { <> {uiStore.controls && } {uiStore.journey && } + {/* {uiStore.inspector && } */}
{!!uiStore.slideshow && }