diff --git a/package.json b/package.json index ec7e8df3..a35942ec 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "jdh", - "version": "5.0.0", + "version": "5.0.1", "private": true, "dependencies": { "@auth0/auth0-react": "^1.1.0", diff --git a/src/components/ArticleV3/Article.js b/src/components/ArticleV3/Article.js index db5ef15c..cc536ebf 100644 --- a/src/components/ArticleV3/Article.js +++ b/src/components/ArticleV3/Article.js @@ -62,6 +62,11 @@ const Article = ({ console.info('[Article] onCellClickHandler', dataHref) setSelectedDataHref(dataHref) } + + if (e.target.hasAttribute('data-idx')) { + e.preventDefault(); + setSelectedCellIdx(e.target.getAttribute('data-idx')); + } } return ( diff --git a/src/components/ArticleV3/ArticleCell.js b/src/components/ArticleV3/ArticleCell.js index 0847d804..92824156 100644 --- a/src/components/ArticleV3/ArticleCell.js +++ b/src/components/ArticleV3/ArticleCell.js @@ -53,7 +53,7 @@ const ArticleCell = ({ const isolationMode = outputs.some( (d) => typeof d.metadata === 'object' && d.metadata['text/html']?.isolated, ) - const renderUsingThebe = true //tags.includes('data'); + const renderUsingThebe = type === CellTypeCode && !figure?.isSound; //tags.includes('data'); // const ref = useCallback( // (node) => { @@ -137,15 +137,37 @@ const ArticleCell = ({ {type === CellTypeMarkdown && content && ( - + + {figure ? ( + + + + + ) : ( + + + )} )} diff --git a/src/components/ArticleV3/ArticleCellFigure.js b/src/components/ArticleV3/ArticleCellFigure.js index 9598a999..ec40fcf8 100644 --- a/src/components/ArticleV3/ArticleCellFigure.js +++ b/src/components/ArticleV3/ArticleCellFigure.js @@ -54,7 +54,7 @@ const ArticleCellFigure = ({ const aspectRatio = getFigureRatio(tags); const figureHeight = useFigureHeight(tags, !aspectRatio, figure.isCover); const containerWidth = useContainerWidth(pictureRef); - const shouldUseFixedHeight = figureHeight && (!figure.isCover || !aspectRatio) && (figureHeight * aspectRatio) <= containerWidth; + const shouldUseFixedHeight = figureHeight && (!figure.isCover || !aspectRatio) && (figureHeight / aspectRatio) <= containerWidth; const { height: windowHeight } = useWindowSize(); diff --git a/src/components/ArticleV3/ArticleScrollTo.js b/src/components/ArticleV3/ArticleScrollTo.js index 480d4b2b..606a4ee4 100644 --- a/src/components/ArticleV3/ArticleScrollTo.js +++ b/src/components/ArticleV3/ArticleScrollTo.js @@ -19,7 +19,7 @@ const ArticleScrollTo = () => { } } useEffect(() => { - if(selectedCellIdxFromStore !== -1 && selectedCellIdx !== -1 && selectedCellIdxFromStore !== selectedCellIdx) { + if(selectedCellIdxFromStore !== -1 && selectedCellIdxFromStore !== selectedCellIdx) { moveTo(selectedCellIdxFromStore) setQuery({ [DisplayLayerCellIdxQueryParam]: selectedCellIdxFromStore }) } diff --git a/src/models/ArticleFigure.js b/src/models/ArticleFigure.js index d35b1084..156034a1 100644 --- a/src/models/ArticleFigure.js +++ b/src/models/ArticleFigure.js @@ -1,4 +1,4 @@ -import { CoverRefPrefix, FigureRefPrefix } from '../constants' +import { CoverRefPrefix, FigureRefPrefix, SoundRefPrefix } from '../constants' export default class ArticleFigure { constructor({ @@ -17,6 +17,7 @@ export default class ArticleFigure { this.ref = ref this.isTable = isTable this.isCover = refPrefix === CoverRefPrefix + this.isSound = refPrefix === SoundRefPrefix; this.tNLabel = this.isCover ? 'cover' : `numbers.${refPrefix.substring(0, refPrefix.length - 1)}`