feat: show option and handle failed resource load

inseri-swiss · Oct 17, 2023 · 7de9cab · 7de9cab
1 parent 922d4e4
commit 7de9cab
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 7 deletions.
diff --git a/src/blocks/iiifViewer/block.json b/src/blocks/iiifViewer/block.json
@@ -17,6 +17,18 @@
 		"inputKey": {
 			"type": "string",
 			"default": ""
+		},
+		"showTitle": {
+			"type": "boolean",
+			"default": true
+		},
+		"showBadge": {
+			"type": "boolean",
+			"default": true
+		},
+		"showInformationPanel": {
+			"type": "boolean",
+			"default": true
 		}
 	},
 	"supports": {

diff --git a/src/blocks/iiifViewer/edit.tsx b/src/blocks/iiifViewer/edit.tsx
@@ -2,7 +2,7 @@ import { InseriRoot, useDiscover } from '@inseri/lighthouse'
 import { IconZoomInArea } from '@tabler/icons-react'
 import { BlockControls, InspectorControls } from '@wordpress/block-editor'
 import type { BlockEditProps } from '@wordpress/blocks'
-import { PanelBody, PanelRow, TextControl, ToolbarButton, ToolbarGroup } from '@wordpress/components'
+import { PanelBody, PanelRow, TextControl, ToggleControl, ToolbarButton, ToolbarGroup } from '@wordpress/components'
 import { useEffect } from '@wordpress/element'
 import { __ } from '@wordpress/i18n'
 import { edit } from '@wordpress/icons'
@@ -22,7 +22,7 @@ const urlSchema = {
 function EditComponent(props: BlockEditProps<Attributes>) {
 	const { isSelected } = props
 
-	const { inputKey, blockName, isWizardMode, actions } = useGlobalState((state: GlobalState) => state)
+	const { inputKey, blockName, isWizardMode, actions, showTitle, showInformationPanel, showBadge } = useGlobalState((state: GlobalState) => state)
 	const isValueSet = !!inputKey
 	const { updateState } = actions
 
@@ -35,6 +35,8 @@ function EditComponent(props: BlockEditProps<Attributes>) {
 		}
 	}, [isSelected])
 
+	const infoPanelHelp = showInformationPanel ? __('The information panel is shown.', 'inseri-core') : __('The information panel is hidden.', 'inseri-core')
+
 	return (
 		<>
 			<BlockControls controls={[]}>
@@ -56,6 +58,30 @@ function EditComponent(props: BlockEditProps<Attributes>) {
 					<PanelRow>
 						<TextControl label="Block Name" value={blockName} onChange={(value) => updateState({ blockName: value })} />
 					</PanelRow>
+					<PanelRow>
+						<ToggleControl
+							label={__('Show Content Title', 'inseri-core')}
+							help={showTitle ? __('The title is displayed.', 'inseri-core') : __('The title is hidden.', 'inseri-core')}
+							checked={showTitle}
+							onChange={() => updateState({ showTitle: !showTitle })}
+						/>
+					</PanelRow>
+					<PanelRow>
+						<ToggleControl
+							label={__('Show Information Panel', 'inseri-core')}
+							help={infoPanelHelp}
+							checked={showInformationPanel}
+							onChange={() => updateState({ showInformationPanel: !showInformationPanel })}
+						/>
+					</PanelRow>
+					<PanelRow>
+						<ToggleControl
+							label={__('Show IIIF Badge', 'inseri-core')}
+							help={showBadge ? __('IIIF Badge Title is displayed.', 'inseri-core') : __('IIIF Badge is hidden.', 'inseri-core')}
+							checked={showBadge}
+							onChange={() => updateState({ showBadge: !showBadge })}
+						/>
+					</PanelRow>
 				</PanelBody>
 			</InspectorControls>
 			{isWizardMode ? (

diff --git a/src/blocks/iiifViewer/index.tsx b/src/blocks/iiifViewer/index.tsx
@@ -12,6 +12,9 @@ export interface Attributes {
 	blockId: string
 	blockName: string
 	inputKey: string
+	showTitle: boolean
+	showBadge: boolean
+	showInformationPanel: boolean
 }
 
 registerBlockType<Attributes>(name, {

diff --git a/src/blocks/iiifViewer/view.tsx b/src/blocks/iiifViewer/view.tsx
@@ -1,14 +1,17 @@
-import { useWatch, Nucleus } from '@inseri/lighthouse'
+import { Nucleus, useWatch } from '@inseri/lighthouse'
 import { IconCircleOff } from '@tabler/icons-react'
 import { __ } from '@wordpress/i18n'
 import { Group, Text, useGlobalState } from '../../components'
 import { GlobalState } from './state'
 //@ts-ignore
 import Viewer from '@samvera/clover-iiif/viewer' // eslint-disable-line import/no-unresolved
+import { useState } from '@wordpress/element'
+import { useAsync } from 'react-use'
 
 export default function View() {
-	const { inputKey } = useGlobalState((state: GlobalState) => state)
+	const { inputKey, showTitle, showInformationPanel, showBadge } = useGlobalState((state: GlobalState) => state)
 	const { updateState } = useGlobalState((state: GlobalState) => state.actions)
+	const [loadsManifest, setLoadsManifest] = useState(true)
 
 	const { isEmpty, altText, value } = useWatch(inputKey, {
 		onBlockRemoved: () => updateState({ inputKey: '', isWizardMode: true }),
@@ -22,7 +25,18 @@ export default function View() {
 		},
 	})
 
-	return isEmpty ? (
+	useAsync(async () => {
+		try {
+			const response = await fetch(value)
+			setLoadsManifest(response.ok)
+		} catch {
+			setLoadsManifest(false)
+		}
+	}, [value])
+
+	const preparedAltText = !loadsManifest ? __('Failed to load IIIF manifest', 'inseri-core') : altText
+
+	return isEmpty || !loadsManifest ? (
 		<Group
 			align="center"
 			position="center"
@@ -34,10 +48,20 @@ export default function View() {
 		>
 			<IconCircleOff size={40} />
 			<Text size="xl" align="center">
-				{altText}
+				{preparedAltText}
 			</Text>
 		</Group>
 	) : (
-		<Viewer iiifContent={value} />
+		<Viewer
+			iiifContent={value}
+			options={{
+				showTitle,
+				showIIIFBadge: showBadge,
+				informationPanel: {
+					open: false,
+					renderToggle: showInformationPanel,
+				},
+			}}
+		/>
 	)
 }