mirrors/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2025-05-25 04:24:43 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

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
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 tooltip?: string
containerClassName?: string containerClassName?: string
previewContainerClassName?: 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 [showFrame, setShowFrame] = useState(false)
const [previewImageLink, setPreviewImageLink] = useState<string>(loadingImageUrl) const [previewImageLink, setPreviewImageLink] = useState<string>(loadingImageUrl)
const showChildren = () => { const showChildren = () => {
setShowFrame(true) setShowFrame(true)
if (onActivate) {
onActivate()
}
} }
useEffect(() => { 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 { ExternalLink } from '../../../../common/links/external-link'
import { OneClickEmbedding } from '../one-click-frame/one-click-embedding' import { OneClickEmbedding } from '../one-click-frame/one-click-embedding'
import './pdf-frame.scss' import './pdf-frame.scss'
@ -8,10 +8,12 @@ export interface PdfFrameProps {
} }
export const PdfFrame: React.FC<PdfFrameProps> = ({ url }) => { export const PdfFrame: React.FC<PdfFrameProps> = ({ url }) => {
const [activated, setActivated] = useState(false)
return ( 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'} previewContainerClassName={'embed-responsive-item bg-danger'} hoverIcon={'file-pdf-o'}
loadingImageUrl={''}> loadingImageUrl={''} onActivate={() => setActivated(true)}>
<object type={'application/pdf'} data={url} className={'pdf-frame'}> <object type={'application/pdf'} data={url} className={'pdf-frame'}>
<ExternalLink text={url} href={url}/> <ExternalLink text={url} href={url}/>
</object> </object>