Removed inline js from breadcrumb_select.html.

[mudit-loya]

Added and improved functionality of inline javascript in breadcrumb_select.js file. Imported this breadcrumb_select.js file in index.js.

Closes #8380 Remove inline js: books/breadcrumb_select.html

Refactor

Technical

Removed inline js from breadcrumb_select.html.
Updated index.js and created a file openlibrary/plugins/openlibrary/js/breadcrumb_select/index.js for using the inline js functionality.

Testing

1. Visit http://localhost/account/books/currently-reading
2. In the select options available try pressing the keys 'ArrowUp', 'ArrowDown' to prevent changes.
3. In the select options available try pressing the keys 'Tab', 'Enter', ' ' to allow changes to take place.

Screenshot

Screencast from 2023-10-24 18-37-44.webm

Stakeholders

@RayBB

[codecov-commenter]

Codecov Report

Merging #8447 (163df60) into master (fbdb3a5) will decrease coverage by 0.07%.
The diff coverage is 0.00%.

@@            Coverage Diff             @@
##           master    #8447      +/-   ##
==========================================
- Coverage   15.90%   15.83%   -0.07%     
==========================================
  Files          85       86       +1     
  Lines        4635     4653      +18     
  Branches      814      818       +4     
==========================================
  Hits          737      737              
- Misses       3381     3395      +14     
- Partials      517      521       +4     

Files	Coverage Δ
openlibrary/plugins/openlibrary/js/index.js	0.00% <0.00%> (ø)
.../plugins/openlibrary/js/breadcrumb_select/index.js	0.00% <0.00%> (ø)

[mudit-loya]

@RayBB any changes?

[RayBB]

@imperial-chief can you please provide instructions for testing and screenshots of it working?

[RayBB]

The testing should be go to a page like "currently reading" and then use dropdown to move to another page.
Also, I think we should add something like this but with document.querySelectorAll('.crumb select');

Overall it looks good though!

[mudit-loya]

Okay i will try doing so.

@imperial-chief can you please provide instructions for testing and screenshots of it working?
What do you mean by 'please provide instructions for testing'

[RayBB]

Someone else who isn't me will test the PR. We should write steps for them to test it so they don't need to figure out what page the code runs on.

[mudit-loya]

@RayBB i tried finding the usage of this,
But i could find exactly where this breadcrumbs are used.
Can you help me find it?

[mudit-loya]

@RayBB let me know for any changes further.

[RayBB]

@imperial-chief the code looks good.
Can you please test that it works and provide screenshots and testing instructions.
The breakcrumbs are found on a page like https://openlibrary.org/account/books/currently-reading
In this dropdown:

[mudit-loya]

@RayBB i tried running the changes but i failed.
Not only that, while debugging i tried to find where was my code breaking and found that index.js wasn't getting executed at all (i added many console.log() statements in complete index.js but i wasn't able to see any of them).
Can you please help me out with this?

[RayBB]

@imperial-chief did you try rebuilding the JS?
This can be done by running: docker compose run --rm home make js

Or docker-compose run --rm home npm run-script watch which will watch for changes to the JS file and recompile after each change.

A bit more info on docker here: https://github.com/internetarchive/openlibrary/blob/master/docker/README.md

If you're still having trouble you can watch some of the onboarding videos at https://github.com/internetarchive/openlibrary/blob/master/CONTRIBUTING.md

[mudit-loya]

@RayBB i uploaded a screenshot and a screencast link of testing.
I also updated the testing instructions in the PR main comment.

[RayBB]

Looks good to me. Now we just need @jimchamp to review and merge :)

[mudit-loya]

Sure!

[jimchamp]

Thanks @imperial-chief! Will merge after I commit my suggested changes.