feat: enable to set custom height

inseri-swiss · Oct 17, 2023 · b463dc1 · b463dc1
1 parent d466f0f
commit b463dc1
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 2 deletions.
diff --git a/src/blocks/iiifViewer/block.json b/src/blocks/iiifViewer/block.json
@@ -29,6 +29,14 @@
 		"showInformationPanel": {
 			"type": "boolean",
 			"default": true
+		},
+		"dynamicHeight": {
+			"type": "boolean",
+			"default": true
+		},
+		"height": {
+			"type": "integer",
+			"default": 200
 		}
 	},
 	"supports": {

diff --git a/src/blocks/iiifViewer/edit.tsx b/src/blocks/iiifViewer/edit.tsx
@@ -18,11 +18,14 @@ const urlSchema = {
 		URL: { type: 'string', format: 'uri', pattern: '^https?://' },
 	},
 }
+const MIN_HEIGHT = 200
 
 function EditComponent(props: BlockEditProps<Attributes>) {
 	const { isSelected } = props
 
-	const { inputKey, blockName, isWizardMode, actions, showTitle, showInformationPanel, showBadge } = useGlobalState((state: GlobalState) => state)
+	const { inputKey, blockName, isWizardMode, actions, showTitle, showInformationPanel, showBadge, dynamicHeight, height } = useGlobalState(
+		(state: GlobalState) => state
+	)
 	const isValueSet = !!inputKey
 	const { updateState } = actions
 
@@ -82,6 +85,32 @@ function EditComponent(props: BlockEditProps<Attributes>) {
 							onChange={() => updateState({ showBadge: !showBadge })}
 						/>
 					</PanelRow>
+					<PanelRow>
+						<ToggleControl
+							label={__('Dynamic Height', 'inseri-core')}
+							help={dynamicHeight ? __('Height is dynamic.', 'inseri-core') : __('Height is fixed.', 'inseri-core')}
+							checked={dynamicHeight}
+							onChange={() => updateState({ dynamicHeight: !dynamicHeight })}
+						/>
+					</PanelRow>
+					{!dynamicHeight && (
+						<PanelRow>
+							<div style={{ width: '100%' }}>
+								<TextControl
+									label={__('height', 'inseri-core')}
+									type="number"
+									min={MIN_HEIGHT}
+									value={height}
+									onChange={(value) => {
+										const newVal = parseInt(value)
+										if (newVal >= MIN_HEIGHT) {
+											updateState({ height: newVal })
+										}
+									}}
+								/>
+							</div>
+						</PanelRow>
+					)}
 				</PanelBody>
 			</InspectorControls>
 			{isWizardMode ? (

diff --git a/src/blocks/iiifViewer/index.tsx b/src/blocks/iiifViewer/index.tsx
@@ -15,6 +15,8 @@ export interface Attributes {
 	showTitle: boolean
 	showBadge: boolean
 	showInformationPanel: boolean
+	dynamicHeight: boolean
+	height: number
 }
 
 registerBlockType<Attributes>(name, {

diff --git a/src/blocks/iiifViewer/view.tsx b/src/blocks/iiifViewer/view.tsx
@@ -9,7 +9,7 @@ import { useState } from '@wordpress/element'
 import { useAsync } from 'react-use'
 
 export default function View() {
-	const { inputKey, showTitle, showInformationPanel, showBadge } = useGlobalState((state: GlobalState) => state)
+	const { inputKey, showTitle, showInformationPanel, showBadge, dynamicHeight, height } = useGlobalState((state: GlobalState) => state)
 	const { updateState } = useGlobalState((state: GlobalState) => state.actions)
 	const [loadsManifest, setLoadsManifest] = useState(true)
 
@@ -44,6 +44,7 @@ export default function View() {
 				background: '#F8F9FA',
 				color: '#868E96',
 				padding: '8px',
+				height,
 			}}
 		>
 			<IconCircleOff size={40} />
@@ -57,6 +58,7 @@ export default function View() {
 			options={{
 				showTitle,
 				showIIIFBadge: showBadge,
+				canvasHeight: dynamicHeight ? undefined : height,
 				informationPanel: {
 					open: false,
 					renderToggle: showInformationPanel,