Skip to content
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

Convert jQuery .on event listeners to their native JS equivalents #1035

Merged
merged 7 commits into from
Aug 8, 2023

Conversation

Rishabhg71
Copy link
Collaborator

@Rishabhg71 Rishabhg71 commented Jul 25, 2023

closes #918

@Rishabhg71 Rishabhg71 marked this pull request as draft July 25, 2023 17:37
www/js/app.js Outdated Show resolved Hide resolved
@Rishabhg71 Rishabhg71 marked this pull request as ready for review July 25, 2023 18:59
Copy link
Member

@Jaifroid Jaifroid left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you very much for this PR! It's looking good, but there are some minor details to deal with as in individual comments below. I didn't test. When you ask for review again, please describe how you've tested and on which browsers.

www/js/app.js Outdated Show resolved Hide resolved
www/js/app.js Outdated Show resolved Hide resolved
www/js/app.js Outdated Show resolved Hide resolved
www/js/app.js Outdated Show resolved Hide resolved
www/js/app.js Outdated Show resolved Hide resolved
www/js/app.js Show resolved Hide resolved
www/js/app.js Outdated Show resolved Hide resolved
www/js/app.js Outdated Show resolved Hide resolved
www/js/app.js Outdated Show resolved Hide resolved
@Jaifroid Jaifroid added cleanup remove-jquery Issues or PRs involving removal of jQuery labels Jul 26, 2023
@Jaifroid Jaifroid added this to the v4.0 milestone Jul 26, 2023
@Rishabhg71
Copy link
Collaborator Author

I have completed testing on these browsers

  • Web testing
    • Manual Chrome (service and jquery)
    • Manual IE11 (jquery)
    • Manual Edge (service and jquery)
  • As Extension
    • Manual Chrome (service and jquery)
    • Manual Firefox (service and jquery)

www/js/app.js Outdated Show resolved Hide resolved
www/js/app.js Outdated Show resolved Hide resolved
www/js/app.js Outdated Show resolved Hide resolved
www/js/app.js Outdated Show resolved Hide resolved
Copy link
Member

@Jaifroid Jaifroid left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's looking good! Some very minor small changes in comments, and please also update the branch with main to apply the latest changes. These include some end-to-end tests that it would be useful to run against this PR.

@Jaifroid
Copy link
Member

Jaifroid commented Aug 7, 2023

You should see and "Update branch" button below that can merge the latest changes from main into this branch automatically.

Rishabhg71 and others added 2 commits August 7, 2023 18:37
- `event.preventDefault()` added for more buttons
- moved `prefixElement` up in the code
- semicolons added
@Rishabhg71
Copy link
Collaborator Author

Rishabhg71 commented Aug 7, 2023

I have made all the changes requested by you before we close this PR I want to ask one question in general about contributing to open source. A lot of the time I get confused about whether to make a change in the codebase or not
eg. do I change every document.getElementById("prefix") to prefixElement after line 280
In these kinds of cases where I think its okay/good to make a certain change but change a lot of existing code (or maybe any case like adding a new dependency, etc)
how should I go for it also what kind of strategy is best/easy for a maintainer

  • making the changes then asking for a review
  • asking for opinions than making changes
  • doing it in a different branch or something

Your guidance will help me improve my further contributions! Thank you! 😊🚀"

@Jaifroid
Copy link
Member

Jaifroid commented Aug 7, 2023

Thank you, @RG7279805. I think in this case, the changes suggested were about minimizing the code and being more efficient, and they are directly relevant to the PR. The general rule of thumb is not to change things that are not relevant to the PR unless they are minor/small improvements in the code you are working on. But you are free to do the implementation that you consider to be the best and most concise/efficient, and the reviewer will of course tell you if you have made an irrelevant or unwanted change. If in doubt, you can of course make the suggestion in a comment and seek guidance. Of your options, I would say go for the first if you feel confident that it is relevant to the PR and is an improvement. Go for the second if you are in doubt. I don't think you should do the third option, because opening a new branch is not a good idea when you're working on a PR. You can always revert a commit to your existing branch/PR if necessary. It's much easier for a reviewer to follow a single branch/PR rather than having to jump to a new one and have to start reviewing all over again.

I see the e2e tests (which include a test on IE11) are working well with your PR. I'll proceed to do some manual tests to double-check your tests. Thank you for testing. I'll get back to you asap, as it is probably ready to merge soon.

Copy link
Member

@Jaifroid Jaifroid left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@RG7279805 Unfortunately, there is a problem: the code for switching between jQuery and Service Worker mode is not working. In Internet Explorer, it should give a warning that SW mode is unavailable. In Chrome/Edge, switching to jQuery mode does nothing (you can see that the API panel at the bottom does not change as it should do

It seems that the change event is not properly registered for the controls. Could you take a look and debug?

@Jaifroid
Copy link
Member

Jaifroid commented Aug 7, 2023

This is the message you should see when attempting to switch to SW mode in IE11 or IE Mode (Edge). I've just checked, and it's working fine on main, so it is definitely an issue with the jQuery conversion on this branch. NB It's not just IE11 that is affected, switching is also not working in modern browsers.

image

@Jaifroid
Copy link
Member

Jaifroid commented Aug 7, 2023

Also, remember that after making changes, you need to rebuild the dist directory before testing on IE11, using npm run build-src, or else you can use npm run preview which will rebuild and open up a server.

@Rishabhg71
Copy link
Collaborator Author

Rishabhg71 commented Aug 8, 2023

I am sorry for this mistake when I clicked on the radio SW radio was selected so i thought its working (should have tested the original behaviour) nonetheless I have applied the fix 😥

I have completed testing on these browsers

  • Web testing
    • Manual Chrome (service and jquery)
    • Manual IE11 (jquery)
    • Manual Edge (service and jquery)
    • Manual Firefox (service and jquery)
  • As Extension
    • Manual Chrome (service and jquery)
    • Manual Firefox (service and jquery)

@Jaifroid
Copy link
Member

Jaifroid commented Aug 8, 2023

OK, thanks @RG7279805. If you could update the branch again, I have incorporated a specific e2e test for the jQuery and ServiceWorker modes. It's not an in-depth test of functionality, but it could pick up this kind of issue. I would be interested to see how the test performs on your branch. In the meantime, I'll continue my manual testing.

Copy link
Member

@Jaifroid Jaifroid left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great, thanks! I've completed manual tests, and all is working fine, even on an old Firefox OS with Firefox 45. And the automated tests with the SW / JQuery test are all passing fine. So this is ready for merge.

@Jaifroid
Copy link
Member

Jaifroid commented Aug 8, 2023

Let me know if you're happy for this to be merged now.

@Rishabhg71
Copy link
Collaborator Author

Sure @Jaifroid, And Thanks again for being my mentor

@Jaifroid Jaifroid merged commit a7a36a6 into kiwix:main Aug 8, 2023
6 checks passed
@Jaifroid
Copy link
Member

Jaifroid commented Aug 8, 2023

You're welcome, and thank you for the very useful PR.

@Jaifroid Jaifroid modified the milestones: v4.0, v3.10 Sep 3, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
cleanup remove-jquery Issues or PRs involving removal of jQuery
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Convert jQuery .on event listeners to their native JS equivalents
2 participants