Loading the data of this panel...
- }
-
return (
-
+
)
}
diff --git a/src/components/panel/PanelTopBar.tsx b/src/components/panel/PanelTopBar.tsx
new file mode 100644
index 00000000..1abfdf60
--- /dev/null
+++ b/src/components/panel/PanelTopBar.tsx
@@ -0,0 +1,36 @@
+import { FC } from 'react'
+
+import TextViewsToggle from '@/components/panel/TextViewsToggle'
+import CustomHTML from '@/components/CustomHTML'
+import { tree } from '@/utils/icons'
+import {
+ Popover,
+ PopoverContent,
+ PopoverTrigger,
+} from '@/components/ui/popover'
+
+const PanelTopBar: FC = () => {
+ return (
+
+
+
+
+
+
+
+ Enter a collection/manifest Url
+
+ Or choose:
+
+
+
+
+
+
+ )
+}
+
+export default PanelTopBar
diff --git a/src/components/panel/TextViewsToggle.tsx b/src/components/panel/TextViewsToggle.tsx
new file mode 100644
index 00000000..b9270482
--- /dev/null
+++ b/src/components/panel/TextViewsToggle.tsx
@@ -0,0 +1,59 @@
+import { FC, MouseEvent } from 'react'
+import { textViewOne, textView, splitView, imageView } from '@/utils/icons'
+import CustomHTML from '@/components/CustomHTML'
+
+import { contentStore } from '@/store/ContentStore'
+import { usePanel } from '@/contexts/PanelContext'
+
+interface IconKeys {
+ viewOne: string
+ text: string
+ split: string
+ image: string
+}
+
+const TextViewsToggle: FC = () => {
+ const { panelId } = usePanel()
+
+ const viewIndex = contentStore((state) => state.panels[panelId].viewIndex)
+ const updateViewIndex = contentStore((state) => state.updateViewIndex)
+
+ function handleTextViewClick(
+ e: MouseEvent
,
+ newIndex: number
+ ) {
+ e.preventDefault()
+ updateViewIndex(panelId, newIndex)
+ }
+
+ const textViewsIcons = {
+ viewOne: textViewOne,
+ text: textView,
+ split: splitView,
+ image: imageView,
+ }
+
+ const buttons = Object.keys(textViewsIcons).map((title, i) => (
+
+ ))
+
+ return (
+
+ {buttons}
+
+ )
+}
+
+export default TextViewsToggle
diff --git a/src/components/panel/views/ImageView.tsx b/src/components/panel/views/ImageView.tsx
new file mode 100644
index 00000000..8b4d63bf
--- /dev/null
+++ b/src/components/panel/views/ImageView.tsx
@@ -0,0 +1,14 @@
+import { FC } from 'react'
+import OpenSeaDragonViewer from '@/components/OpenSeaDragonViewer'
+
+const ImageView: FC = () => {
+ return (
+
+ )
+}
+
+export default ImageView
diff --git a/src/components/panel/views/PanelCentralContent.tsx b/src/components/panel/views/PanelCentralContent.tsx
new file mode 100644
index 00000000..e7ecd7bb
--- /dev/null
+++ b/src/components/panel/views/PanelCentralContent.tsx
@@ -0,0 +1,64 @@
+import { FC, useEffect, useState } from 'react'
+
+import { contentStore } from '@/store/ContentStore'
+import { usePanel } from '@/contexts/PanelContext'
+
+import TextViewOne from '@/components/panel/views/TextViewOne'
+import TextView from '@/components/panel/views/TextView'
+import SplitView from '@/components/panel/views/SplitView'
+import ImageView from '@/components/panel/views/ImageView'
+
+import ErrorComponent from '@/components/ErrorComponent'
+
+import { request } from '@/utils/http'
+
+const PanelCentralContent: FC = () => {
+ const { panelId } = usePanel()
+
+ const viewIndex = contentStore((state) => state.panels[panelId].viewIndex)
+ const activeContentTypeIndex = contentStore(
+ (state) => state.panels[panelId].contentIndex
+ )
+ const [text, setText] = useState('')
+ const content = contentStore((state) => state.panels[panelId].item.content)
+
+ const [error, setError] = useState(false)
+
+ useEffect(() => {
+ async function updateText(contentUrl: string) {
+ const response = await request(contentUrl)
+
+ if (!response.success) {
+ setError(response.message)
+ return
+ }
+
+ setText(response.data)
+ }
+
+ const contentUrl = content[activeContentTypeIndex].url ?? null
+
+ if (!contentUrl) {
+ setError('Error: No content URL found.')
+ return
+ }
+
+ updateText(contentUrl)
+ }, [activeContentTypeIndex])
+
+ if (error) {
+ return
+ }
+
+ if (viewIndex === 0) {
+ return
+ } else if (viewIndex === 1) {
+ return
+ } else if (viewIndex === 2) {
+ return
+ } else if (viewIndex === 3) {
+ return
+ }
+}
+
+export default PanelCentralContent
diff --git a/src/components/panel/views/SplitView.tsx b/src/components/panel/views/SplitView.tsx
new file mode 100644
index 00000000..cbe1ce67
--- /dev/null
+++ b/src/components/panel/views/SplitView.tsx
@@ -0,0 +1,23 @@
+import { FC } from 'react'
+import OpenSeaDragonViewer from '@/components/OpenSeaDragonViewer'
+
+import CustomHTML from '@/components/CustomHTML'
+
+interface SplitViewProps {
+ textHtml: string
+}
+
+const SplitView: FC = ({ textHtml }) => {
+ const widthText = '50' // in percentage
+
+ return (
+
+ )
+}
+
+export default SplitView
diff --git a/src/components/panel/views/TextView.tsx b/src/components/panel/views/TextView.tsx
new file mode 100644
index 00000000..8cba4fa1
--- /dev/null
+++ b/src/components/panel/views/TextView.tsx
@@ -0,0 +1,17 @@
+import { FC } from 'react'
+
+import CustomHTML from '@/components/CustomHTML'
+
+interface TextViewOneProps {
+ textHtml: string
+}
+
+const TextViewOne: FC = ({ textHtml }) => {
+ return (
+
+
+
+ )
+}
+
+export default TextViewOne
diff --git a/src/components/panel/views/TextViewOne.tsx b/src/components/panel/views/TextViewOne.tsx
new file mode 100644
index 00000000..2ac9fe75
--- /dev/null
+++ b/src/components/panel/views/TextViewOne.tsx
@@ -0,0 +1,17 @@
+import { FC } from 'react'
+
+import CustomHTML from '@/components/CustomHTML'
+
+interface TextViewOneProps {
+ textHtml: string
+}
+
+const TextViewOne: FC = ({ textHtml }) => {
+ return (
+
+
+
+ )
+}
+
+export default TextViewOne
diff --git a/src/components/ui/popover.tsx b/src/components/ui/popover.tsx
new file mode 100644
index 00000000..8bfac19e
--- /dev/null
+++ b/src/components/ui/popover.tsx
@@ -0,0 +1,27 @@
+import * as React from 'react'
+import * as PopoverPrimitive from '@radix-ui/react-popover'
+
+import { cn } from '@/lib/utils'
+
+const Popover = PopoverPrimitive.Root
+
+const PopoverTrigger = PopoverPrimitive.Trigger
+
+const PopoverContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
+
+))
+PopoverContent.displayName = PopoverPrimitive.Content.displayName
+
+export { Popover, PopoverTrigger, PopoverContent }
diff --git a/src/contexts/ConfigContext.tsx b/src/contexts/ConfigContext.tsx
index 1c70af14..ab41dcda 100644
--- a/src/contexts/ConfigContext.tsx
+++ b/src/contexts/ConfigContext.tsx
@@ -2,23 +2,23 @@ import { ReactNode, createContext, useContext, useState, FC } from 'react'
const ConfigContext = createContext({})
interface ConfigProvider {
- config?: Config,
- setConfig?: (newConfig: Config) => void,
- openedPanels?: PanelConfig[],
- setOpenedPanels?: (panels: PanelConfig[]) => void
+ config: Config
+ setConfig?: (newConfig: Config) => void
}
-interface ConfigProviderProps{
- children?: ReactNode,
+interface ConfigProviderProps {
+ children?: ReactNode
customConfig: Config
}
-const ConfigProvider: FC = ({ children, customConfig }) => {
- const [config, setConfig] = useState (customConfig)
- const [openedPanels, setOpenedPanels] = useState(customConfig.panels)
+const ConfigProvider: FC = ({
+ children,
+ customConfig,
+}) => {
+ const [config, setConfig] = useState(customConfig)
return (
-
+
{children}
)
diff --git a/src/contexts/PanelContext.tsx b/src/contexts/PanelContext.tsx
new file mode 100644
index 00000000..407123e2
--- /dev/null
+++ b/src/contexts/PanelContext.tsx
@@ -0,0 +1,27 @@
+import { ReactNode, createContext, useContext, useState, FC } from 'react'
+const PanelContext = createContext({ panelId: 'missing' })
+
+interface PanelProvider {
+ panelId: string
+}
+
+interface PanelProviderProps {
+ children?: ReactNode
+ id: string
+}
+
+const PanelProvider: FC = ({ children, id }) => {
+ const [panelId] = useState(id)
+
+ return (
+
+ {children}
+
+ )
+}
+
+function usePanel(): PanelProvider {
+ return useContext(PanelContext)
+}
+
+export { PanelProvider, usePanel }
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
new file mode 100644
index 00000000..dad19100
--- /dev/null
+++ b/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+ return twMerge(clsx(inputs))
+}
\ No newline at end of file
diff --git a/src/main.tsx b/src/main.tsx
index 322793b8..49bfb7bb 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -12,8 +12,9 @@ declare global {
}
window.Tido = function Tido(config = {} as Config) {
- createRoot(document.getElementById('app')!).render()
+ createRoot(document.getElementById('app')!).render(
+
+ )
}
-
export default window.Tido
diff --git a/src/store/ContentStore.tsx b/src/store/ContentStore.tsx
new file mode 100644
index 00000000..ca2739bc
--- /dev/null
+++ b/src/store/ContentStore.tsx
@@ -0,0 +1,54 @@
+import { create } from 'zustand'
+
+interface PanelStates {
+ [id: string]: PanelState
+}
+
+interface ContentStoreTypes {
+ panels: PanelStates // or panels: each panel has one opened item
+ addPanelContent: (id: string, newPanel: PanelState) => void
+ updatePanels: (panelId: string, updatedItem: PanelState) => void
+ updateContentToggleIndex: (
+ panelIndex: string,
+ newContentIndex: number
+ ) => void
+ updateViewIndex: (panelId: string, newViewIndex: number) => void
+ getPanel: (panelId: string) => PanelState | null
+}
+
+export const contentStore = create((set, get) => ({
+ panels: {},
+
+ addPanelContent: (id: string, newPanel: PanelState) => {
+ const newPanels = { ...get().panels }
+ newPanels[id] = newPanel
+ set({ panels: newPanels })
+ },
+
+ updateContentToggleIndex: (panelId: string, newContentIndex: number) => {
+ const panel = get().getPanel(panelId)
+ if (!panel) return // TODO: add error handling
+
+ panel.contentIndex = newContentIndex
+ get().updatePanels(panelId, panel)
+ },
+
+ updateViewIndex: (panelId: string, newViewIndex: number) => {
+ const panel = get().getPanel(panelId)
+ if (!panel) return // TODO: add error handling
+
+ panel.viewIndex = newViewIndex
+ get().updatePanels(panelId, panel)
+ },
+
+ updatePanels: (panelId: string, updatedPanel: PanelState) => {
+ const newPanels = { ...get().panels }
+ newPanels[panelId] = updatedPanel
+ set({ panels: newPanels })
+ },
+
+ getPanel: (panelId: string) => {
+ if (!(panelId in get().panels)) return null
+ return get().panels[panelId]
+ },
+}))
diff --git a/src/types.d.ts b/src/types.d.ts
index 7d20c979..46fc45bf 100644
--- a/src/types.d.ts
+++ b/src/types.d.ts
@@ -1,249 +1,269 @@
declare global {
+ interface ActiveAnnotation {
+ [key: string]: Annotation
+ }
- interface ActiveAnnotation {
- [key: string]: Annotation
- }
-
- interface Actor {
- '@context': string,
- role: string[],
- name: string,
- id?: string,
- idref?: Idref[]
-
- }
+ interface Actor {
+ '@context': string
+ role: string[]
+ name: string
+ id?: string
+ idref?: Idref[]
+ }
interface AnnotationPage {
- items: Annotation[],
+ items: Annotation[]
refs: Witness[]
}
interface Witness {
- idno: string,
+ idno: string
manifest: string
}
- interface Annotation {
- body: AnnotationContent[],
- target: AnnotationTarget[],
- type: string,
- id: string
- }
- interface AnnotationContent {
- type: 'TextualBody',
- value: string,
- format: AnnotationContentFormat,
- 'x-content-type': AnnotationContentType
- }
-
- type AnnotationContentFormat = 'text/plain' | 'text/html'
- type AnnotationContentType = 'Person' | 'Place'
-
- interface AnnotationTarget {
- selector: CssSelector | RangeSelector,
- format: string,
- language: string,
- source: string
- }
-
- interface AnnotationType {
- name: string,
- icon?: string,
- annotationType?: string,
- displayWhen?: string
- }
-
-
- interface Collection {
- '@context': string,
- textapi: string,
- id: string,
- title: Title[]
- collector: Actor[],
- description?: string,
- sequence: Sequence[],
- total?: number,
- annotationCollection?: string,
- modules?: Module[]
- }
-
- interface Colors {
- forceMode: string,
- primary: string,
- secondary: string,
- accent: string
- }
-
- interface Config{
- globalTree: boolean,
- panels: PanelConfig[]
- }
-
-
- interface Content {
- '@context': string,
- url: string,
- type: string,
- integrity?: DataIntegrity
- }
-
-
- type CssSelector = {
- type: 'CssSelector',
- value: string
- }
-
- interface DataIntegrity {
- type: string,
- value: string
- }
-
- interface Entrypoint {
- url: string,
- type: string
- }
-
-
- interface Header {
- show: boolean,
- navigation: boolean,
- panelsToggle: boolean,
- languageSwitch: boolean
- }
-
- interface Idref {
- '@context': string,
- base?: string,
- type: string,
- id: string
- }
-
- interface Image {
- '@context': string,
- id: string,
- manifest?: string,
- license: License
- }
-
-
- interface Item {
- '@context': string,
- textapi: string,
- id: string,
- title?: Title[],
- type: ItemType,
- n?: string,
- lang: ItemLangCode[],
- langAlt?: string[],
- content: Content[],
- description?: string,
- image?: Image,
- annotationCollection?: string,
- modules?: Module[]
- }
-
- type ItemType = 'section' | 'page' | 'full'
- type ItemLangCode = 'eng' | 'fra' | 'deu' | 'ara' | 'arb' | 'arz' | 'apc' | 'acm' | 'zho' | 'cmn' | 'yue' | 'nan' | 'tha' | 'sou' | 'nod' | 'khb' | 'lao/tts' | 'pht'
-
- interface Labels {
- item: string,
- manifest?: string
- }
- interface License {
- id: string,
- notes?: string
- }
-
- interface Manifest {
- '@context': string,
- textapi: string,
- id: string,
- label: string,
- sequence: Sequence[],
- total?: number,
- actor?: Actor[],
- repository?: Repository[],
- image?: Image,
- metadata?: Metadata[],
- support?: Support[],
- license: License[],
- description?: string,
- annotationCollection?: string,
- modules?: Module[]
-
- }
-
- interface Metadata {
- key: string,
- value?: string,
- metadata?: Metadata[]
- }
-
-
- interface Module {
- editionManuscripts?: boolean,
- editionPrints?: boolean
- }
-
- interface MessageBoxColors {
- info: string,
- warning: string
- }
- interface PanelConfig {
- entrypoint: Entrypoint
- }
-
-
- type RangeSelector = {
- type: 'RangeSelector',
- startSelector: CssSelector,
- endSelector: CssSelector
- }
- interface Repository {
- '@context': string,
- label?: string,
- url: string,
- baseUrl: string,
- id: string
- }
-
- interface Sequence {
- '@context': string
- id: string,
- type: SequenceType,
- label?: string
- }
-
- interface Support {
- '@context': string,
- type: SupportType,
- mime: string,
- url: string,
- integrity?: DataIntegrity
- }
-
- type SequenceType = 'collection' | 'manifest' | 'item'
- type SupportType = 'font' | 'css'
-
- interface Title {
- '@context': string,
- title: string
- type: TitleType
- }
- type TitleType = 'main' | 'sub';
+ interface Annotation {
+ body: AnnotationContent[]
+ target: AnnotationTarget[]
+ type: string
+ id: string
+ }
+ interface AnnotationContent {
+ type: 'TextualBody'
+ value: string
+ format: AnnotationContentFormat
+ 'x-content-type': AnnotationContentType
+ }
+
+ type AnnotationContentFormat = 'text/plain' | 'text/html'
+ type AnnotationContentType = 'Person' | 'Place'
+
+ interface AnnotationTarget {
+ selector: CssSelector | RangeSelector
+ format: string
+ language: string
+ source: string
+ }
+
+ interface AnnotationType {
+ name: string
+ icon?: string
+ annotationType?: string
+ displayWhen?: string
+ }
+
+ interface Collection {
+ '@context': string
+ textapi: string
+ id: string
+ title: Title[]
+ collector: Actor[]
+ description?: string
+ sequence: Sequence[]
+ total?: number
+ annotationCollection?: string
+ modules?: Module[]
+ }
+
+ interface Colors {
+ forceMode: string
+ primary: string
+ secondary: string
+ accent: string
+ }
+
+ interface Config {
+ globalTree: boolean
+ panels: PanelConfig[]
+ colors: Colors
+ }
+
+ interface Content {
+ '@context': string
+ url: string
+ type: string
+ integrity?: DataIntegrity
+ }
+
+ type CssSelector = {
+ type: 'CssSelector'
+ value: string
+ }
+
+ interface DataIntegrity {
+ type: string
+ value: string
+ }
+
+ interface Entrypoint {
+ url: string
+ type: string
+ }
+
+ interface Header {
+ show: boolean
+ navigation: boolean
+ panelsToggle: boolean
+ languageSwitch: boolean
+ }
+
+ interface Idref {
+ '@context': string
+ base?: string
+ type: string
+ id: string
+ }
+
+ interface Image {
+ '@context': string
+ id: string
+ manifest?: string
+ license: License
+ }
+
+ interface Item {
+ '@context': string
+ textapi: string
+ id: string
+ title?: Title[]
+ type: ItemType
+ n?: string
+ lang: ItemLangCode[]
+ langAlt?: string[]
+ content: Content[]
+ description?: string
+ image?: Image
+ annotationCollection?: string
+ modules?: Module[]
+ }
+
+ interface PanelState {
+ item: Item
+ texts?: string[]
+ contentTypes?: string[]
+ contentIndex: number
+ viewIndex: number
+ imageUrl?: string
+ primaryColor: string
+ }
+
+ type ItemType = 'section' | 'page' | 'full'
+ type ItemLangCode =
+ | 'eng'
+ | 'fra'
+ | 'deu'
+ | 'ara'
+ | 'arb'
+ | 'arz'
+ | 'apc'
+ | 'acm'
+ | 'zho'
+ | 'cmn'
+ | 'yue'
+ | 'nan'
+ | 'tha'
+ | 'sou'
+ | 'nod'
+ | 'khb'
+ | 'lao/tts'
+ | 'pht'
+
+ interface Labels {
+ item: string
+ manifest?: string
+ }
+ interface License {
+ id: string
+ notes?: string
+ }
+
+ interface Manifest {
+ '@context': string
+ textapi: string
+ id: string
+ label: string
+ sequence: Sequence[]
+ total?: number
+ actor?: Actor[]
+ repository?: Repository[]
+ image?: Image
+ metadata?: Metadata[]
+ support?: Support[]
+ license: License[]
+ description?: string
+ annotationCollection?: string
+ modules?: Module[]
+ }
+
+ interface Metadata {
+ key: string
+ value?: string
+ metadata?: Metadata[]
+ }
+
+ interface Module {
+ editionManuscripts?: boolean
+ editionPrints?: boolean
+ }
+
+ interface MessageBoxColors {
+ info: string
+ warning: string
+ }
+ interface PanelConfig {
+ entrypoint: Entrypoint
+ colors: Colors
+ }
+
+ type RangeSelector = {
+ type: 'RangeSelector'
+ startSelector: CssSelector
+ endSelector: CssSelector
+ }
+ interface Repository {
+ '@context': string
+ label?: string
+ url: string
+ baseUrl: string
+ id: string
+ }
+
+ interface Sequence {
+ '@context': string
+ id: string
+ type: SequenceType
+ label?: string
+ }
+
+ interface Support {
+ '@context': string
+ type: SupportType
+ mime: string
+ url: string
+ integrity?: DataIntegrity
+ }
+
+ type SequenceType = 'collection' | 'manifest' | 'item'
+ type SupportType = 'font' | 'css'
+
+ interface Title {
+ '@context': string
+ title: string
+ type: TitleType
+ }
+ type TitleType = 'main' | 'sub'
type SuccessResponse = {
- success: true;
- data: T;
- };
+ success: true
+ data: T
+ }
type ErrorResponse = {
- success: false;
- message: string;
- code: number;
- };
+ success: false
+ message: string
+ code: number
+ }
- type HttpResponse = SuccessResponse | ErrorResponse;
+ type HttpResponse = SuccessResponse | ErrorResponse
}
export {}
diff --git a/src/utils/icons.tsx b/src/utils/icons.tsx
new file mode 100644
index 00000000..c8e5f933
--- /dev/null
+++ b/src/utils/icons.tsx
@@ -0,0 +1,9 @@
+export const textViewOne = ''
+export const textView = ''
+export const splitView = ''
+export const imageView = ''
+export const zoomIn = ''
+export const zoomOut = ''
+export const fullscreen = ''
+export const exitFullscreen = ''
+export const tree = ''
\ No newline at end of file
diff --git a/src/utils/panel.tsx b/src/utils/panel.tsx
index 556c267f..d2e5a84e 100644
--- a/src/utils/panel.tsx
+++ b/src/utils/panel.tsx
@@ -28,4 +28,21 @@ export function isItemContentValid(itemData: Item): boolean {
if (!('content' in itemData)) return false
if (itemData.content.length === 0) return false
return true
+}
+
+export function getContentType(value: string): string {
+ let type = value.split('type=')[1]
+ type = type.charAt(0).toUpperCase() + type.slice(1) // convert the first letter to upper case
+ return type ?? 'missing'
+ // when no string stays after type=, then the value is missing
+}
+
+
+export function getContentTypes(content: Content[]): string[] {
+ const types: string[] = content.map((item) => {
+ if ('type' in item) return getContentType(item.type)
+ return 'missing'
+ })
+
+ return types
}
\ No newline at end of file
diff --git a/tests/cypress/plugins/index.js b/tests/cypress/plugins/index.js
index 59b2bab6..5dff95bf 100644
--- a/tests/cypress/plugins/index.js
+++ b/tests/cypress/plugins/index.js
@@ -15,7 +15,7 @@
/**
* @type {Cypress.PluginConfig}
*/
-// eslint-disable-next-line no-unused-vars
+
module.exports = (on, config) => {
// `on` is used to hook into various events Cypress emits
// `config` is the resolved Cypress config