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

DRY my code #1448

Browse Source
This commit is contained in:
roottool
2019-01-16 18:10:28 +09:00
parent f566b567be
commit 72df418953
1 changed files with 23 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
browser/components/MarkdownPreview.js
View File

@@ -837,11 +837,24 @@ export default class MarkdownPreview extends React.Component {
const rect = item.getBoundingClientRect() const rect = item.getBoundingClientRect()
const imgList = item.contentWindow.document.body.querySelectorAll('img') const imgList = item.contentWindow.document.body.querySelectorAll('img')
for (const img of imgList) { for (const img of imgList) {
img.onclick = function () { img.onclick = () => {
const zoomImg = document.createElement('img')
const magnification = document.body.clientWidth / img.width const magnification = document.body.clientWidth / img.width
const top = document.body.clientHeight / 2 - img.height * magnification / 2 const top = document.body.clientHeight / 2 - img.height * magnification / 2
// TODO: DRY and const animationSpeed const animationSpeed = 300
const originalImgRect = {
top: `${img.y + rect.top}px`,
left: `${img.x + rect.left}px`,
width: `${img.width}px`,
height: `${img.height}px`
}
const zoomInImgRect = {
top: `${top}px`,
left: 0,
width: `100%`,
height: `${img.height * magnification}px`
}
const zoomImg = document.createElement('img')
zoomImg.src = img.src zoomImg.src = img.src
zoomImg.style = ` zoomImg.style = `
position: absolute; position: absolute;
@@ -851,19 +864,9 @@ export default class MarkdownPreview extends React.Component {
height: ${img.height * magnification}px; height: ${img.height * magnification}px;
` `
zoomImg.animate([ zoomImg.animate([
{ originalImgRect,
top: `${img.y + rect.top}px`, zoomInImgRect
left: `${img.x + rect.left}px`, ], animationSpeed)
width: `${img.width}px`,
height: `${img.height}px`
},
{
top: `${top}px`,
left: 0,
width: `100%`,
height: `${img.height * magnification}px`
}
], 300)
const overlay = document.createElement('div') const overlay = document.createElement('div')
overlay.style = ` overlay.style = `
@@ -876,7 +879,7 @@ export default class MarkdownPreview extends React.Component {
height: ${document.body.clientHeight}px; height: ${document.body.clientHeight}px;
z-index: 100; z-index: 100;
` `
overlay.onclick = function () { overlay.onclick = () => {
zoomImg.style = ` zoomImg.style = `
position: absolute; position: absolute;
top: ${img.y + rect.top}px; top: ${img.y + rect.top}px;
@@ -885,19 +888,9 @@ export default class MarkdownPreview extends React.Component {
height: ${img.height}px; height: ${img.height}px;
` `
const zoomOutImgAnimation = zoomImg.animate([ const zoomOutImgAnimation = zoomImg.animate([
{ zoomInImgRect,
top: `${top}px`, originalImgRect
left: 0, ], animationSpeed)
width: `100%`,
height: `${img.height * magnification}px`
},
{
top: `${img.y + rect.top}px`,
left: `${img.x + rect.left}px`,
width: `${img.width}px`,
height: `${img.height}px`
}
], 300)
zoomOutImgAnimation.onfinish = () => overlay.remove() zoomOutImgAnimation.onfinish = () => overlay.remove()
} }