From f566b567be5ab80da1889313a3a46532b4e773b8 Mon Sep 17 00:00:00 2001 From: roottool Date: Wed, 16 Jan 2019 01:52:44 +0900 Subject: [PATCH 1/7] add zoom-in and zoom-out action of images #1448 --- browser/components/MarkdownPreview.js | 74 +++++++++++++++++++++++++++ browser/components/markdown.styl | 1 + 2 files changed, 75 insertions(+) diff --git a/browser/components/MarkdownPreview.js b/browser/components/MarkdownPreview.js index 4c638dc94..3a2be4ec2 100755 --- a/browser/components/MarkdownPreview.js +++ b/browser/components/MarkdownPreview.js @@ -832,6 +832,80 @@ export default class MarkdownPreview extends React.Component { ) } ) + + document.querySelectorAll('iframe').forEach(item => { + const rect = item.getBoundingClientRect() + const imgList = item.contentWindow.document.body.querySelectorAll('img') + for (const img of imgList) { + img.onclick = function () { + const zoomImg = document.createElement('img') + const magnification = document.body.clientWidth / img.width + const top = document.body.clientHeight / 2 - img.height * magnification / 2 + // TODO: DRY and const animationSpeed + zoomImg.src = img.src + zoomImg.style = ` + position: absolute; + top: ${top}px; + left: 0; + width: 100%; + height: ${img.height * magnification}px; + ` + zoomImg.animate([ + { + top: `${img.y + rect.top}px`, + left: `${img.x + rect.left}px`, + 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') + 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 = function () { + zoomImg.style = ` + position: absolute; + top: ${img.y + rect.top}px; + left: ${img.x + rect.left}px; + width: ${img.width}px; + height: ${img.height}px; + ` + const zoomOutImgAnimation = zoomImg.animate([ + { + top: `${top}px`, + left: 0, + 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() + } + + overlay.appendChild(zoomImg) + document.body.appendChild(overlay) + } + } + }) } focus () { diff --git a/browser/components/markdown.styl b/browser/components/markdown.styl index da767a9f4..89c260329 100644 --- a/browser/components/markdown.styl +++ b/browser/components/markdown.styl @@ -163,6 +163,7 @@ p white-space pre-line word-wrap break-word img + cursor zoom-in max-width 100% strong, b font-weight bold From 72df418953336c0c6edd79f2fe12e2a8a50db051 Mon Sep 17 00:00:00 2001 From: roottool Date: Wed, 16 Jan 2019 18:10:28 +0900 Subject: [PATCH 2/7] DRY my code #1448 --- browser/components/MarkdownPreview.js | 53 ++++++++++++--------------- 1 file changed, 23 insertions(+), 30 deletions(-) diff --git a/browser/components/MarkdownPreview.js b/browser/components/MarkdownPreview.js index 3a2be4ec2..c3b31665f 100755 --- a/browser/components/MarkdownPreview.js +++ b/browser/components/MarkdownPreview.js @@ -837,11 +837,24 @@ export default class MarkdownPreview extends React.Component { const rect = item.getBoundingClientRect() const imgList = item.contentWindow.document.body.querySelectorAll('img') for (const img of imgList) { - img.onclick = function () { - const zoomImg = document.createElement('img') + img.onclick = () => { const magnification = document.body.clientWidth / img.width 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.style = ` position: absolute; @@ -851,19 +864,9 @@ export default class MarkdownPreview extends React.Component { height: ${img.height * magnification}px; ` zoomImg.animate([ - { - top: `${img.y + rect.top}px`, - left: `${img.x + rect.left}px`, - width: `${img.width}px`, - height: `${img.height}px` - }, - { - top: `${top}px`, - left: 0, - width: `100%`, - height: `${img.height * magnification}px` - } - ], 300) + originalImgRect, + zoomInImgRect + ], animationSpeed) const overlay = document.createElement('div') overlay.style = ` @@ -876,7 +879,7 @@ export default class MarkdownPreview extends React.Component { height: ${document.body.clientHeight}px; z-index: 100; ` - overlay.onclick = function () { + overlay.onclick = () => { zoomImg.style = ` position: absolute; top: ${img.y + rect.top}px; @@ -885,19 +888,9 @@ export default class MarkdownPreview extends React.Component { height: ${img.height}px; ` const zoomOutImgAnimation = zoomImg.animate([ - { - top: `${top}px`, - left: 0, - 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) + zoomInImgRect, + originalImgRect + ], animationSpeed) zoomOutImgAnimation.onfinish = () => overlay.remove() } From ea5970ab1cc62c596bd254fa820b005e5700570b Mon Sep 17 00:00:00 2001 From: roottool Date: Wed, 16 Jan 2019 22:47:42 +0900 Subject: [PATCH 3/7] change a magnification by image size #1448 --- browser/components/MarkdownPreview.js | 39 ++++++++++++++++----------- 1 file changed, 24 insertions(+), 15 deletions(-) diff --git a/browser/components/MarkdownPreview.js b/browser/components/MarkdownPreview.js index c3b31665f..7a74c4f69 100755 --- a/browser/components/MarkdownPreview.js +++ b/browser/components/MarkdownPreview.js @@ -838,30 +838,39 @@ export default class MarkdownPreview extends React.Component { const imgList = item.contentWindow.document.body.querySelectorAll('img') for (const img of imgList) { img.onclick = () => { - const magnification = document.body.clientWidth / img.width - const top = document.body.clientHeight / 2 - img.height * magnification / 2 - const animationSpeed = 300 + const widthMagnification = document.body.clientWidth / img.width + const heightMagnification = document.body.clientHeight / img.height + const baseOnWidth = widthMagnification < heightMagnification + const magnification = baseOnWidth ? widthMagnification : heightMagnification + + const zoomImgWidth = img.width * magnification + const zoomImgHeight = img.height * magnification + const zoomInImgTop = document.body.clientHeight / 2 - zoomImgHeight / 2 + const zoomInImgLeft = document.body.clientWidth / 2 - zoomImgWidth / 2 + const originalImgTop = img.y + rect.top + const originalImgLeft = img.x + rect.left const originalImgRect = { - top: `${img.y + rect.top}px`, - left: `${img.x + rect.left}px`, + top: `${originalImgTop}px`, + left: `${originalImgLeft}px`, width: `${img.width}px`, height: `${img.height}px` } const zoomInImgRect = { - top: `${top}px`, - left: 0, - width: `100%`, - height: `${img.height * magnification}px` + top: `${baseOnWidth ? zoomInImgTop : 0}px`, + left: `${baseOnWidth ? 0 : zoomInImgLeft}px`, + width: `${zoomImgWidth}px`, + height: `${zoomImgHeight}px` } + const animationSpeed = 300 const zoomImg = document.createElement('img') zoomImg.src = img.src zoomImg.style = ` position: absolute; - top: ${top}px; - left: 0; - width: 100%; - height: ${img.height * magnification}px; + top: ${baseOnWidth ? zoomInImgTop : 0}px; + left: ${baseOnWidth ? 0 : zoomInImgLeft}px; + width: ${zoomImgWidth}; + height: ${zoomImgHeight}px; ` zoomImg.animate([ originalImgRect, @@ -882,8 +891,8 @@ export default class MarkdownPreview extends React.Component { overlay.onclick = () => { zoomImg.style = ` position: absolute; - top: ${img.y + rect.top}px; - left: ${img.x + rect.left}px; + top: ${originalImgTop}px; + left: ${originalImgLeft}px; width: ${img.width}px; height: ${img.height}px; ` From 294bf742cdd2b9dfbd589e991cd7687490047d41 Mon Sep 17 00:00:00 2001 From: roottool Date: Wed, 16 Jan 2019 23:14:21 +0900 Subject: [PATCH 4/7] change variable name #1448 --- browser/components/MarkdownPreview.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/browser/components/MarkdownPreview.js b/browser/components/MarkdownPreview.js index 7a74c4f69..abaebad39 100755 --- a/browser/components/MarkdownPreview.js +++ b/browser/components/MarkdownPreview.js @@ -845,8 +845,8 @@ export default class MarkdownPreview extends React.Component { const zoomImgWidth = img.width * magnification const zoomImgHeight = img.height * magnification - const zoomInImgTop = document.body.clientHeight / 2 - zoomImgHeight / 2 - const zoomInImgLeft = document.body.clientWidth / 2 - zoomImgWidth / 2 + const zoomImgTop = document.body.clientHeight / 2 - zoomImgHeight / 2 + const zoomImgLeft = document.body.clientWidth / 2 - zoomImgWidth / 2 const originalImgTop = img.y + rect.top const originalImgLeft = img.x + rect.left const originalImgRect = { @@ -856,8 +856,8 @@ export default class MarkdownPreview extends React.Component { height: `${img.height}px` } const zoomInImgRect = { - top: `${baseOnWidth ? zoomInImgTop : 0}px`, - left: `${baseOnWidth ? 0 : zoomInImgLeft}px`, + top: `${baseOnWidth ? zoomImgTop : 0}px`, + left: `${baseOnWidth ? 0 : zoomImgLeft}px`, width: `${zoomImgWidth}px`, height: `${zoomImgHeight}px` } @@ -867,8 +867,8 @@ export default class MarkdownPreview extends React.Component { zoomImg.src = img.src zoomImg.style = ` position: absolute; - top: ${baseOnWidth ? zoomInImgTop : 0}px; - left: ${baseOnWidth ? 0 : zoomInImgLeft}px; + top: ${baseOnWidth ? zoomImgTop : 0}px; + left: ${baseOnWidth ? 0 : zoomImgLeft}px; width: ${zoomImgWidth}; height: ${zoomImgHeight}px; ` From 33fb03066edc3dcc2af2754eac6c0471ceac4a88 Mon Sep 17 00:00:00 2001 From: roottool Date: Fri, 25 Jan 2019 20:06:43 +0900 Subject: [PATCH 5/7] Reduced the count of calculation --- browser/components/MarkdownPreview.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/browser/components/MarkdownPreview.js b/browser/components/MarkdownPreview.js index abaebad39..8ee90e37a 100755 --- a/browser/components/MarkdownPreview.js +++ b/browser/components/MarkdownPreview.js @@ -845,8 +845,8 @@ export default class MarkdownPreview extends React.Component { const zoomImgWidth = img.width * magnification const zoomImgHeight = img.height * magnification - const zoomImgTop = document.body.clientHeight / 2 - zoomImgHeight / 2 - const zoomImgLeft = document.body.clientWidth / 2 - zoomImgWidth / 2 + const zoomImgTop = (document.body.clientHeight - zoomImgHeight) / 2 + const zoomImgLeft = (document.body.clientWidth - zoomImgWidth) / 2 const originalImgTop = img.y + rect.top const originalImgLeft = img.x + rect.left const originalImgRect = { From 1683d63f33337f87386e9c28f3b439eefff84bc4 Mon Sep 17 00:00:00 2001 From: roottool Date: Sat, 26 Jan 2019 01:03:37 +0900 Subject: [PATCH 6/7] Modified indent --- browser/components/MarkdownPreview.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/browser/components/MarkdownPreview.js b/browser/components/MarkdownPreview.js index 8ee90e37a..e93312ef8 100755 --- a/browser/components/MarkdownPreview.js +++ b/browser/components/MarkdownPreview.js @@ -845,8 +845,8 @@ export default class MarkdownPreview extends React.Component { const zoomImgWidth = img.width * magnification const zoomImgHeight = img.height * magnification - const zoomImgTop = (document.body.clientHeight - zoomImgHeight) / 2 - const zoomImgLeft = (document.body.clientWidth - zoomImgWidth) / 2 + const zoomImgTop = (document.body.clientHeight - zoomImgHeight) / 2 + const zoomImgLeft = (document.body.clientWidth - zoomImgWidth) / 2 const originalImgTop = img.y + rect.top const originalImgLeft = img.x + rect.left const originalImgRect = { From 5e87ec262790c7fb3ef90915bfa0b00fe195ac93 Mon Sep 17 00:00:00 2001 From: roottool Date: Sun, 27 Jan 2019 22:26:31 +0900 Subject: [PATCH 7/7] Specified MarkdownPreview class --- browser/components/MarkdownPreview.js | 137 +++++++++++++------------- 1 file changed, 68 insertions(+), 69 deletions(-) diff --git a/browser/components/MarkdownPreview.js b/browser/components/MarkdownPreview.js index e93312ef8..a6819ce92 100755 --- a/browser/components/MarkdownPreview.js +++ b/browser/components/MarkdownPreview.js @@ -833,81 +833,80 @@ export default class MarkdownPreview extends React.Component { } ) - document.querySelectorAll('iframe').forEach(item => { - const rect = item.getBoundingClientRect() - const imgList = item.contentWindow.document.body.querySelectorAll('img') - for (const img of imgList) { - img.onclick = () => { - const widthMagnification = document.body.clientWidth / img.width - const heightMagnification = document.body.clientHeight / img.height - const baseOnWidth = widthMagnification < heightMagnification - const magnification = baseOnWidth ? widthMagnification : heightMagnification - - const zoomImgWidth = img.width * magnification - const zoomImgHeight = img.height * magnification - const zoomImgTop = (document.body.clientHeight - zoomImgHeight) / 2 - const zoomImgLeft = (document.body.clientWidth - zoomImgWidth) / 2 - const originalImgTop = img.y + rect.top - const originalImgLeft = img.x + rect.left - const originalImgRect = { - top: `${originalImgTop}px`, - left: `${originalImgLeft}px`, - width: `${img.width}px`, - height: `${img.height}px` - } - const zoomInImgRect = { - top: `${baseOnWidth ? zoomImgTop : 0}px`, - left: `${baseOnWidth ? 0 : zoomImgLeft}px`, - width: `${zoomImgWidth}px`, - height: `${zoomImgHeight}px` - } - const animationSpeed = 300 - - const zoomImg = document.createElement('img') - zoomImg.src = img.src + const markdownPreviewIframe = document.querySelector('.MarkdownPreview') + const rect = markdownPreviewIframe.getBoundingClientRect() + const imgList = markdownPreviewIframe.contentWindow.document.body.querySelectorAll('img') + for (const img of imgList) { + img.onclick = () => { + const widthMagnification = document.body.clientWidth / img.width + const heightMagnification = document.body.clientHeight / img.height + const baseOnWidth = widthMagnification < heightMagnification + const magnification = baseOnWidth ? widthMagnification : heightMagnification + + const zoomImgWidth = img.width * magnification + const zoomImgHeight = img.height * magnification + const zoomImgTop = (document.body.clientHeight - zoomImgHeight) / 2 + const zoomImgLeft = (document.body.clientWidth - zoomImgWidth) / 2 + const originalImgTop = img.y + rect.top + const originalImgLeft = img.x + rect.left + const originalImgRect = { + top: `${originalImgTop}px`, + left: `${originalImgLeft}px`, + width: `${img.width}px`, + height: `${img.height}px` + } + const zoomInImgRect = { + top: `${baseOnWidth ? zoomImgTop : 0}px`, + left: `${baseOnWidth ? 0 : zoomImgLeft}px`, + width: `${zoomImgWidth}px`, + height: `${zoomImgHeight}px` + } + const animationSpeed = 300 + + const zoomImg = document.createElement('img') + 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 = ` position: absolute; - top: ${baseOnWidth ? zoomImgTop : 0}px; - left: ${baseOnWidth ? 0 : zoomImgLeft}px; - width: ${zoomImgWidth}; - height: ${zoomImgHeight}px; + top: ${originalImgTop}px; + left: ${originalImgLeft}px; + width: ${img.width}px; + height: ${img.height}px; ` - zoomImg.animate([ - originalImgRect, - zoomInImgRect + const zoomOutImgAnimation = zoomImg.animate([ + zoomInImgRect, + originalImgRect ], 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 = ` - 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) + zoomOutImgAnimation.onfinish = () => overlay.remove() } + + overlay.appendChild(zoomImg) + document.body.appendChild(overlay) } - }) + } } focus () {