-
-
Notifications
You must be signed in to change notification settings - Fork 1.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Zoom in and out image #1448 #2809
Conversation
Nice feature! |
Great feature! |
@@ -832,6 +832,82 @@ export default class MarkdownPreview extends React.Component { | |||
) | |||
} | |||
) | |||
|
|||
document.querySelectorAll('iframe').forEach(item => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why do you need to select all iframes like this? The markdown preview only contains 1 iframe, then why did you have to find all iframes and loop through them? Can you explain this to me?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Explanation
The code is my mistake.
Because when I tried to catch image elements into iframe, I used the code as it is without thinking.
Suggestion
I have a suggestion to resolve it.
document.querySelector()
searches for an element from entire HTML.
I considered the possibility of adding new iframes in Boostnote.
So I use a classname of a markdown preview iframe.
It has a pros and cons.
Pros
- Specifying an element is easy because
MarkdownPreview
used only here.
Cons
- If a classname changes from
MarkdownPreview
, a classname usingdocument.querySelector()
will need to change too.
Before
document.querySelectorAll('iframe').forEach(item => {
const rect = item.getBoundingClientRect()
const imgList = item.contentWindow.document.body.querySelectorAll('img')
After
const markdownPreviewIframe = document.querySelector('.MarkdownPreview')
const rect = markdownPreviewIframe.getBoundingClientRect()
const imgList = markdownPreviewIframe.contentWindow.document.body.querySelectorAll('img')
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We can just go for the 2nd method, I don't think there's any reason to change the MarkdownPreview
class name. In case we were going to change it, a simple search & replace for the MarkdownPreview
class wouldn't be hard.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I was worried about changing only in HTML.
I want to modify from before code to after code because I feel relieved by your reply.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes, you can just go with the after code 👍
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
OK, I rewrote to after code.
Please check the code again.
|
||
const zoomImgWidth = img.width * magnification | ||
const zoomImgHeight = img.height * magnification | ||
const zoomImgTop = document.body.clientHeight / 2 - zoomImgHeight / 2 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Little suggestion, you can transform this code into:
const zoomImgTop = (document.body.clientHeight - zoomImgHeight) / 2
This way, we only need to do 2 calculation instead of 3
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I didn't notice it.
I am going to fix it tomorrow.
Thank you for teaching it!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
No problem 👍 This is a great feature!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM 🎉
Description
I added a new feature like the Medium Image Zoom feature.
Issue fixed
#1448
Type of changes
Checklist:
Note
I was able to test all existing tests by Windows subsystem for linux(Ubuntu 18.04).