[feat] RotateScreen: Rotate pages with a NavBar button

[SwapnilSoni1999]

As mentioned in #610 I've managed to insert button and make it work by adding a function rotatescreen at here

Now I wanted some guidance to accomplish this task. Please give some light to initiate with this feature.

What I've tried I fetched self.refs.$brPageViewEl || self.refs.$brTwoPageView and tried to add CSS property transform: rotate(xdeg) (where x is a number) But issue is, It is resetting the css once I try to zoomIn or zoomOut Also, the visual view is not the one which I desired. It is hiding the upper(Left) page in 2pageview mode and with 1pageview mode, the scrolling is completely opposite.

Please give some guidance to work on this issue. Thanks.

Edit: (26 March): Feature works very fine now. this PR fixes #610

[SwapnilSoni1999]

Works

yes works till adding element, and it rotates the book as well but problem is either a mode is changed or if its zoomed in or out, it again resets. Unable to figure out what's wrong here.

[SwapnilSoni1999]

@cdrini please put some light on this issue :(

[SwapnilSoni1999]

Page rotation works now. However, in 2 page mode, pages are rotated and aligned side by side. Instead, task is to achieve to stack up both pages (eg. left page on top and right page on bottom) But I'm having difficulties with it right now

[iisa]

hi @SwapnilSoni1999 this is really cool! thanks for pushing on this. I was able to use the netlify review app and the pages are turning on button press.

We have just re-furbished our mode1up file, can you rebase against the newer code?

Let's try to find a home for this cool feature.

[SwapnilSoni1999]

hi @SwapnilSoni1999 this is really cool! thanks for pushing on this. I was able to use the netlify review app and the pages are turning on button press.

We have just re-furbished our mode1up file, can you rebase against the newer code?

Let's try to find a home for this cool feature.

Alright I'll update you asap. Thanks alot for responding, highly appreciated. <3

[codecov[bot]]

Codecov Report

Merging #676 (162ded9) into master (a9c7a0c) will decrease coverage by 0.70%. The diff coverage is 42.30%.

:exclamation: Current head 162ded9 differs from pull request most recent head f6319af. Consider uploading reports for the commit f6319af to get more accurate results

@@            Coverage Diff             @@
##           master     #676      +/-   ##
==========================================
- Coverage   67.14%   66.43%   -0.71%     
==========================================
  Files          39       36       -3     
  Lines        3902     3948      +46     
  Branches      732      755      +23     
==========================================
+ Hits         2620     2623       +3     
- Misses       1033     1058      +25     
- Partials      249      267      +18     

Impacted Files	Coverage Δ
src/js/BookReader/Mode1Up.js	71.05% <0.00%> (+0.46%)	:arrow_up:
src/js/BookReader/events.js	100.00% <ø> (ø)
src/js/BookReader/options.js	100.00% <ø> (ø)
src/js/BookReader.js	68.65% <39.13%> (-0.51%)	:arrow_down:
src/js/BookReader/Navbar/Navbar.js	84.90% <100.00%> (+0.14%)	:arrow_up:
src/js/BookReader/ImageCache.js	96.15% <0.00%> (-3.85%)	:arrow_down:
src/js/BookReader/Mode2Up.js	56.12% <0.00%> (-2.16%)	:arrow_down:
src/js/BookReader/BookModel.js	87.94% <0.00%> (-1.60%)	:arrow_down:
src/js/BookReader/ModeThumb.js
... and 3 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more Δ = absolute <relative> (impact), ø = not affected, ? = missing data Powered by Codecov. Last update a9c7a0c...f6319af. Read the comment docs.

[SwapnilSoni1999]

Hello mam @iisa I've refurbished rotation feature with your latest merge. I've also fixed one issue with 2ModeUp, previously it was rotating both pages separately. But now whole book flips. Also, I've made a minor change in 1ModeUp to make rotation work. I've made changes here But I've also checked that even after changing this condition, No issues seems to be found. And it worked rotation on 1PageView

Please let me know if you find any issues. Thanks alot. <3

[SwapnilSoni1999]

@iisa @cdrini please let me know if you find any kind of issue with this feature. Thankyou <3

[vivekkairi]

Great work @SwapnilSoni1999. I was looking for this from a long time. Everything works perfectly. @iisa Check and merge it, please.

[SwapnilSoni1999]

Great work @SwapnilSoni1999. I was looking for this from a long time. Everything works perfectly. @iisa Check and merge it, please.

Thanks alot man <3 highly appreciated.

[SwapnilSoni1999]

@iisa mam can you please check this out. /\

[NishargShah]

Nice work @SwapnilSoni1999. I've been checking for this feature for a week or so. And I've also noticed @iisa and @cdrini might be busy. But this feature is extremely helpful and I hope it gets merged soon. Again, I request mentors to merge this awesome feature.

[SwapnilSoni1999]

Nice work @SwapnilSoni1999. I've been checking for this feature for a week or so. And I've also noticed @iisa and @cdrini might be busy. But this feature is extremely helpful and I hope it gets merged soon. Again, I request mentors to merge this awesome feature.

Thanks alot man. I hope I'll get a reply from mentors soon. <3

[shivamsn97]

Great work @SwapnilSoni1999. Looking forward to the mentor to merge it soon. Everything works nicely. @iisa

[SwapnilSoni1999]

Great work @SwapnilSoni1999. Looking forward to the mentor to merge it soon. Everything works nicely. @iisa

Yeah I've been trying to solve more issues lets hope if i can improve this project. <3

[SwapnilSoni1999]

Sorry for closing. It was a mistake

[iisa]

Hi @SwapnilSoni1999 thanks so much for the initiative to work on this. This is a a good improvement to BookReader's functionality. We have been working on transitioning BookReader out of jQuery and into Web Components using LitElement and have finally merged the good stuff to the main branch. Unfortunately, the horizontal side menu has very restricted real estate and the rotate button would very much better inside of the Visual Adjustments side panel: https://github.com/internetarchive/bookreader/tree/master/src/BookNavigator/visual-adjustments

This is a new paradigm in this codebase as we continue to split views from the logic. There is new information in the README to how we are thinking in this "new world.". I invite you to rebase, re-orient yourself to this new world, and add the rotate button into the visual adjustments menu. ☺️ Would you like to give it a try? The new side panel can be found during local development in the Internet Archive Demo (book defaults to Plato)

[SwapnilSoni1999]

LitElement

I'll absolutely love to contribute @iisa :D I also wanted to ask that if I get stuck somewhere then can I please have some source to contact you and the team. Would be extremely appreciated :) Thankyou.

[iisa]

Sounds great! Please take a look at the visual adjustments provider https://github.com/internetarchive/bookreader/blob/master/src/BookNavigator/visual-adjustments/visual-adjustments-provider.js

Note how the provider listens to custom events dispatched from the visual adjustments component. Let's move currentOrientationDeg from Bookreader's state into the provider's lexical scope. Then pass the value into the new core rotate function that you created. This will keep a nice demarcation of view & logic.

[SwapnilSoni1999]

Sounds great! Please take a look at the visual adjustments provider https://github.com/internetarchive/bookreader/blob/master/src/BookNavigator/visual-adjustments/visual-adjustments-provider.js

Note how the provider listens to custom events dispatched from the visual adjustments component. Let's move currentOrientationDeg from Bookreader's state into the provider's lexical scope. Then pass the value into the new core rotate function that you created. This will keep a nice demarcation of view & logic.

Thankyou so much for your guidance <3 I'll start working on this now