github/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2025-02-02 23:52:02 +00:00
Code Issues Projects Releases Packages Wiki Activity

Change pdf embedding size when clicked (#275)

Browse source 
* Add activation callback to one-click-embedding
* use activation callback to change size of pdf

Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>
This commit is contained in:
mrdrogdrog 2020-06-25 21:49:15 +02:00 committed by GitHub
parent 66602d98f4
commit 0a48fd0aa5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 10 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/components/editor/markdown-renderer/replace-components/one-click-frame/one-click-embedding.tsx
View file

@ -10,14 +10,18 @@ interface OneClickFrameProps {
tooltip?: string
containerClassName?: string
previewContainerClassName?: string
onActivate?: () => void
}
export const OneClickEmbedding: React.FC<OneClickFrameProps> = ({ previewContainerClassName, containerClassName, onImageFetch, loadingImageUrl, children, tooltip, hoverIcon }) => {
export const OneClickEmbedding: React.FC<OneClickFrameProps> = ({ previewContainerClassName, containerClassName, onImageFetch, loadingImageUrl, children, tooltip, hoverIcon, onActivate }) => {
const [showFrame, setShowFrame] = useState(false)
const [previewImageLink, setPreviewImageLink] = useState<string>(loadingImageUrl)
const showChildren = () => {
setShowFrame(true)
if (onActivate) {
onActivate()
}
}
useEffect(() => {

8
src/components/editor/markdown-renderer/replace-components/pdf/pdf-frame.tsx
View file

@ -1,4 +1,4 @@
import React from 'react'
import React, { useState } from 'react'
import { ExternalLink } from '../../../../common/links/external-link'
import { OneClickEmbedding } from '../one-click-frame/one-click-embedding'
import './pdf-frame.scss'
@ -8,10 +8,12 @@ export interface PdfFrameProps {
}
export const PdfFrame: React.FC<PdfFrameProps> = ({ url }) => {
const [activated, setActivated] = useState(false)
return (
<OneClickEmbedding containerClassName={'embed-responsive embed-responsive-4by3'}
<OneClickEmbedding containerClassName={`embed-responsive embed-responsive-${activated ? '4by3' : '16by9'}`}
previewContainerClassName={'embed-responsive-item bg-danger'} hoverIcon={'file-pdf-o'}
loadingImageUrl={''}>
loadingImageUrl={''} onActivate={() => setActivated(true)}>
<object type={'application/pdf'} data={url} className={'pdf-frame'}>
<ExternalLink text={url} href={url}/>
</object>