Convert ondragenter example to a live sample #8667

AnilSeervi · 2021-09-05T15:37:42Z

Add missing opening <head> tag
Rearrange closing </head> tag
Add quotes to value of lang attr

github-actions · 2021-09-05T15:39:08Z

Preview URLs

https://pr8667.content.dev.mdn.mozit.cloud/en-US/docs/Web/API/GlobalEventHandlers/ondragenter

Flaws

None! 🎉

External URLs

URL: /en-US/docs/Web/API/GlobalEventHandlers/ondragenter
Title: GlobalEventHandlers.ondragenter
on GitHub

No new external URLs

(this comment was updated 2021-09-10 15:35:23.266600)

wbamberg · 2021-09-05T17:19:32Z

Thanks for this PR!

Would you like to try converting it into a live sample?

It would involve:

splitting up that HTML code block into three parts: HTML, CSS, JavaScript, and placing each part under an H3 heading under the existing "Example" H2. The HTML part only needs to include the content of the <body>.
Adding a fourth H3, "Result" and under that adding a line like: {{EmbedLiveSample("Example", "100", "300""}} (you might want to experiment with the third parameter, which sets the iframe height).

I think this would make the page much more useful!

For the next level improvement, rather than using console.log() for output, the example might write the output into a part of the iframe (like a <div> underneath the drop zone, say) - then readers would be able to see the output without needing the devtools open.

AnilSeervi · 2021-09-05T17:22:44Z

Thanks for this PR!

Would you like to try converting it into a live sample? This would make the page much more useful IMO.

It would involve:

splitting up that HTML code block into three parts: HTML, CSS, JavaScript, and placing each part under an H3 heading under the existing "Example" H2. The HTML part only needs to include the content of the <body>.

Adding a fourth H3, "Result" and under that adding a line like: {{EmbedLiveSample("Example", "100", "300""}} (you might want to experiment with the third parameter, which sets the iframe height).

I think this would make the page much more useful!

For the next level improvement, rather than using console.log() for output, the example might write the output into a part of the iframe (like a <div> underneath the drop zone, say) - then readers would be able to see the output without needing the devtools open.

Will try converting it to the liveSample.

wbamberg · 2021-09-05T17:26:55Z

Oh, I forgot. Here's an example of a page that contains a live sample: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/progress_event#live_example . This one doesn't include CSS, and personally I would use "JavaScript" as the heading text rather than "JS", but otherwise it's a reasonable one to copy :).

wbamberg · 2021-09-05T17:49:55Z

Also, predictably, all the related events use similar examples:

https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/ondrag
https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/ondragend
https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/ondragleave
https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/ondragover
https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/ondragstart
https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/ondrop

These should all be live samples. But if this is too big a task for you now, let me know and I'll file a bug. Or file one yourself if you prefer :).

AnilSeervi · 2021-09-05T17:53:39Z

Thank you. I'll attempt converting the example to livesample for this page first and then have the same replaced in other pages you've mentioned accordingly.

AnilSeervi · 2021-09-05T17:58:35Z

Also, predictably, all the related events use similar examples:

https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/ondrag
https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/ondragend
https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/ondragleave
https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/ondragover
https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/ondragstart
https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/ondrop

These should all be live samples. But if this is too big a task for you now, let me know and I'll file a bug. Or file one yourself if you prefer :).

You may file the bug and assign it to me. I'll work on it.

wbamberg · 2021-09-05T17:59:24Z

Thank you. I'll attempt converting the example to livesample for this page first and then have the same replaced in other pages you've mentioned accordingly.

That sounds like a great plan :).

AnilSeervi · 2021-09-06T15:25:27Z

@wbamberg, does this look good?

wbamberg

Thanks @AnilSeervi , this is so much better!

I had some code style suggestions, please ask if any of them don't make sense to you :).

files/en-us/web/api/globaleventhandlers/ondragenter/index.html

wbamberg · 2021-09-10T02:30:42Z

@AnilSeervi , please let me know if you think you will get to this in the next couple of days. I'm sorry to nag, but I'm planning to convert all the Web/API docs into Markdown early next week, and would like to close as many PRs as possible beforehand. If you won't have time no worries - I could finish it myself.

AnilSeervi · 2021-09-10T13:26:25Z

@AnilSeervi , please let me know if you think you will get to this in the next couple of days. I'm sorry to nag, but I'm planning to convert all the Web/API docs into Markdown early next week, and would like to close as many PRs as possible beforehand. If you won't have time no worries - I could finish it myself.

Sorry, I got busy. I'll make the changes right now.

AnilSeervi · 2021-09-10T14:12:09Z

I'm yet to add a reload/restart button to revert the drag. I was thinking, is there a way to just reload/refresh the iframe so that the example will be in its initial state again?

Edit: Didn't quite notice that you already suggested it here #8667 (comment)

files/en-us/web/api/globaleventhandlers/ondragenter/index.html

wbamberg

@AnilSeervi thanks for all your work on this! It's a big improvement to the page.

AnilSeervi · 2021-09-10T15:38:35Z

No problem.
What about the other pages that use the same but slightly altered examples. Should they also be changed to live samples before conversion to markdown?.

wbamberg · 2021-09-10T15:46:09Z

They don't need to be fixed before the conversion, no. We can do it afterwards.

What we really want is to minimise the number of PRs against Web/API that are open at the time we convert (hopefully this Tuesday: #8741), as they will have to be redone.

AnilSeervi · 2021-09-10T16:03:56Z

They don't need to be fixed before the conversion, no. We can do it afterwards.

What we really want is to minimise the number of PRs against Web/API that are open at the time we convert (hopefully this Tuesday: #8741), as they will have to be redone.

Sure. Will work on it after they are converted.

I should have changed the PR title before it was merged.

add missing <head> tag and rearrange closing tag

02c48cc

AnilSeervi requested a review from a team as a code owner September 5, 2021 15:37

AnilSeervi requested review from sideshowbarker and removed request for a team September 5, 2021 15:37

add quotes

d195a01

wbamberg mentioned this pull request Sep 5, 2021

ondrag* examples should be live samples #8669

Closed

AnilSeervi added 6 commits September 6, 2021 19:35

Initial attempt converting to live sample

d8ebc93

Changes for live sample

f1f793d

check onload event not registering

9e3343e

try events

0b3bd08

change live sample height

c5fbfd3

revert variable name

306d075

wbamberg requested changes Sep 6, 2021

View reviewed changes

This was referenced Sep 7, 2021

Add missing ondragleave attribute. #8629

Closed

[Markdown] Convert Web/API to Markdown #8741

Closed

review changes

a8ffcb4

add reload button

2d6525f

wbamberg reviewed Sep 10, 2021

View reviewed changes

files/en-us/web/api/globaleventhandlers/ondragenter/index.html Outdated Show resolved Hide resolved

Update files/en-us/web/api/globaleventhandlers/ondragenter/index.html

13322fa

wbamberg reviewed Sep 10, 2021

View reviewed changes

files/en-us/web/api/globaleventhandlers/ondragenter/index.html Outdated Show resolved Hide resolved

Update files/en-us/web/api/globaleventhandlers/ondragenter/index.html

360ed48

wbamberg approved these changes Sep 10, 2021

View reviewed changes

wbamberg merged commit 38ce7ee into mdn:main Sep 10, 2021

wbamberg changed the title ~~add missing <head> tag and rearrange closing tag~~ Convert ondragenter example to a live sample Sep 10, 2021

AnilSeervi deleted the patch-1 branch September 12, 2021 09:09

AnilSeervi mentioned this pull request Sep 20, 2021

Convert Example to Live Sample and remove typewriter simulation demo #9111

Merged

AnilSeervi mentioned this pull request Dec 21, 2021

Content suggestion: Convert drag and drop event examples to live examples #11364

Closed

5 tasks

github-actions bot locked as resolved and limited conversation to collaborators Sep 12, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Convert ondragenter example to a live sample #8667

Convert ondragenter example to a live sample #8667

AnilSeervi commented Sep 5, 2021 •

edited

Loading

github-actions bot commented Sep 5, 2021 •

edited

Loading

wbamberg commented Sep 5, 2021 •

edited

Loading

AnilSeervi commented Sep 5, 2021

wbamberg commented Sep 5, 2021

wbamberg commented Sep 5, 2021

AnilSeervi commented Sep 5, 2021

AnilSeervi commented Sep 5, 2021

wbamberg commented Sep 5, 2021

AnilSeervi commented Sep 6, 2021

wbamberg left a comment

wbamberg commented Sep 10, 2021

AnilSeervi commented Sep 10, 2021

AnilSeervi commented Sep 10, 2021 •

edited

Loading

wbamberg left a comment

AnilSeervi commented Sep 10, 2021 •

edited

Loading

wbamberg commented Sep 10, 2021

AnilSeervi commented Sep 10, 2021

Convert ondragenter example to a live sample #8667

Convert ondragenter example to a live sample #8667

Conversation

AnilSeervi commented Sep 5, 2021 • edited Loading

github-actions bot commented Sep 5, 2021 • edited Loading

Preview URLs

Flaws

External URLs

wbamberg commented Sep 5, 2021 • edited Loading

AnilSeervi commented Sep 5, 2021

wbamberg commented Sep 5, 2021

wbamberg commented Sep 5, 2021

AnilSeervi commented Sep 5, 2021

AnilSeervi commented Sep 5, 2021

wbamberg commented Sep 5, 2021

AnilSeervi commented Sep 6, 2021

wbamberg left a comment

Choose a reason for hiding this comment

wbamberg commented Sep 10, 2021

AnilSeervi commented Sep 10, 2021

AnilSeervi commented Sep 10, 2021 • edited Loading

wbamberg left a comment

Choose a reason for hiding this comment

AnilSeervi commented Sep 10, 2021 • edited Loading

wbamberg commented Sep 10, 2021

AnilSeervi commented Sep 10, 2021

AnilSeervi commented Sep 5, 2021 •

edited

Loading

github-actions bot commented Sep 5, 2021 •

edited

Loading

wbamberg commented Sep 5, 2021 •

edited

Loading

AnilSeervi commented Sep 10, 2021 •

edited

Loading

AnilSeervi commented Sep 10, 2021 •

edited

Loading