public/Boostnote
1
0
Fork 0
mirror of https://github.com/BoostIo/Boostnote synced 2025-12-13 17:56:25 +00:00
Code Issues Releases Wiki Activity

Specified MarkdownPreview class

Browse Source
This commit is contained in:
roottool
2019-01-27 22:26:31 +09:00
parent 1683d63f33
commit 5e87ec2627
1 changed files with 66 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

133
browser/components/MarkdownPreview.js
View File

@@ -833,81 +833,80 @@ export default class MarkdownPreview extends React.Component {
} }
) )
document.querySelectorAll('iframe').forEach(item => { const markdownPreviewIframe = document.querySelector('.MarkdownPreview')
const rect = item.getBoundingClientRect() const rect = markdownPreviewIframe.getBoundingClientRect()
const imgList = item.contentWindow.document.body.querySelectorAll('img') const imgList = markdownPreviewIframe.contentWindow.document.body.querySelectorAll('img')
for (const img of imgList) { for (const img of imgList) {
img.onclick = () => { img.onclick = () => {
const widthMagnification = document.body.clientWidth / img.width const widthMagnification = document.body.clientWidth / img.width
const heightMagnification = document.body.clientHeight / img.height const heightMagnification = document.body.clientHeight / img.height
const baseOnWidth = widthMagnification < heightMagnification const baseOnWidth = widthMagnification < heightMagnification
const magnification = baseOnWidth ? widthMagnification : heightMagnification const magnification = baseOnWidth ? widthMagnification : heightMagnification
const zoomImgWidth = img.width * magnification const zoomImgWidth = img.width * magnification
const zoomImgHeight = img.height * magnification const zoomImgHeight = img.height * magnification
const zoomImgTop = (document.body.clientHeight - zoomImgHeight) / 2 const zoomImgTop = (document.body.clientHeight - zoomImgHeight) / 2
const zoomImgLeft = (document.body.clientWidth - zoomImgWidth) / 2 const zoomImgLeft = (document.body.clientWidth - zoomImgWidth) / 2
const originalImgTop = img.y + rect.top const originalImgTop = img.y + rect.top
const originalImgLeft = img.x + rect.left const originalImgLeft = img.x + rect.left
const originalImgRect = { const originalImgRect = {
top: `${originalImgTop}px`, top: `${originalImgTop}px`,
left: `${originalImgLeft}px`, left: `${originalImgLeft}px`,
width: `${img.width}px`, width: `${img.width}px`,
height: `${img.height}px` height: `${img.height}px`
} }
const zoomInImgRect = { const zoomInImgRect = {
top: `${baseOnWidth ? zoomImgTop : 0}px`, top: `${baseOnWidth ? zoomImgTop : 0}px`,
left: `${baseOnWidth ? 0 : zoomImgLeft}px`, left: `${baseOnWidth ? 0 : zoomImgLeft}px`,
width: `${zoomImgWidth}px`, width: `${zoomImgWidth}px`,
height: `${zoomImgHeight}px` height: `${zoomImgHeight}px`
} }
const animationSpeed = 300 const animationSpeed = 300
const zoomImg = document.createElement('img') const zoomImg = document.createElement('img')
zoomImg.src = img.src zoomImg.src = img.src
zoomImg.style = `
position: absolute;
top: ${baseOnWidth ? zoomImgTop : 0}px;
left: ${baseOnWidth ? 0 : zoomImgLeft}px;
width: ${zoomImgWidth};
height: ${zoomImgHeight}px;
`
zoomImg.animate([
originalImgRect,
zoomInImgRect
], animationSpeed)
const overlay = document.createElement('div')
overlay.style = `
background-color: rgba(0,0,0,0.5);
cursor: zoom-out;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: ${document.body.clientHeight}px;
z-index: 100;
`
overlay.onclick = () => {
zoomImg.style = ` zoomImg.style = `
position: absolute; position: absolute;
top: ${baseOnWidth ? zoomImgTop : 0}px; top: ${originalImgTop}px;
left: ${baseOnWidth ? 0 : zoomImgLeft}px; left: ${originalImgLeft}px;
width: ${zoomImgWidth}; width: ${img.width}px;
height: ${zoomImgHeight}px; height: ${img.height}px;
` `
zoomImg.animate([ const zoomOutImgAnimation = zoomImg.animate([
originalImgRect, zoomInImgRect,
zoomInImgRect originalImgRect
], animationSpeed) ], animationSpeed)
zoomOutImgAnimation.onfinish = () => overlay.remove()
const overlay = document.createElement('div')
overlay.style = `
background-color: rgba(0,0,0,0.5);
cursor: zoom-out;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: ${document.body.clientHeight}px;
z-index: 100;
`
overlay.onclick = () => {
zoomImg.style = `
position: absolute;
top: ${originalImgTop}px;
left: ${originalImgLeft}px;
width: ${img.width}px;
height: ${img.height}px;
`
const zoomOutImgAnimation = zoomImg.animate([
zoomInImgRect,
originalImgRect
], animationSpeed)
zoomOutImgAnimation.onfinish = () => overlay.remove()
}
overlay.appendChild(zoomImg)
document.body.appendChild(overlay)
} }
overlay.appendChild(zoomImg)
document.body.appendChild(overlay)
} }
}) }
} }
focus () { focus () {