Show/hide the sizing box without re-running `mdbook` about comprehensive-rust HOT 38 CLOSED

@mani-chand, would you like to work on this? I don't know what your familiarity is with JS and web development.

from comprehensive-rust.

@mani-chand, would you like to work on this? I don't know what your familiarity is with JS and web development.

Hey @djmitche , I haven't seen this comment till now.I will try and see if I can fix it. Don't assign it to me now. Once I fix it I will directly make a PR.

from comprehensive-rust.

@mani-chand, would you like to work on this? I don't know what your familiarity is with JS and web development.

Hey @djmitche , I haven't seen this comment till now.I will try and see if I can fix it. Don't assign it to me now. Once I fix it I will directly make a PR.

I am good react but don't know to work with scripts.

from comprehensive-rust.

Please be careful with editing comments, as it makes it hard to read the issue later!

from comprehensive-rust.

Sounds good. There's no React in use here, just plain old JavaScript. Perhaps someone else can pick this up!

from comprehensive-rust.

Ok thank you. I am sure gonna give a try.

from comprehensive-rust.

Hello @djmitche , Is this what you mean to do. Is it good or not . Any changes required.

from comprehensive-rust.

Not quite! #1464 has some screenshots of a dotted red box that shows the content that will fit on one screen while teaching the class. I'd like to reproduce that, but triggered with a keystroke or button click instead of a change to book.toml.

from comprehensive-rust.

Okay ,I will check with that .

from comprehensive-rust.

I need help how to get red box .

from comprehensive-rust.

I don't know either :)

I'd start by looking at the suggested change to book.toml, which is to uncomment

# [preprocessor.aspect-ratio-helper]
# command = "./aspect-ratio-helper.py"

And looking in that Python file, I see it adding some HTML to each chapter.

As for how to do this without a preprocessor, the JS and CSS for the book are in theme/, and theme/speaker-notes.js is an example of how we have modified that with course-specific functionality (for the speaker notes). You might add another file like that, and add it to the output.html.additional-js field in book.toml.

Maybe a good place to start is adding that file and just always drawing the red box. Once that's done, the next step would be to invent some way of turning the box on and off in the web browser (and defaulting to off).

from comprehensive-rust.

Hello @djmitche , I am not sure that we can hide that red box area because its just a css fixed position. I am not sure how to explain it. But when tried to hide that just red box is hiding. When I have checked book.toml its div is empty. I am not sure how to work with it. I wrote the code at theme/book.js. Remove 2 comments "./aspect-ratio-helper" in book.toml.
Code, I wrote.

var isHide = false;
    var hideShowButton = document.createElement('button');
    hideShowButton.className = (isHide ?"hide":"show");
    hideShowButton.title = (isHide?"Hide":"Show");
    hideShowButton.style.width = "50px"
    hideShowButton.style.display = "block"
    hideShowButton.style.textItem = "left";
    hideShowButton.innerHTML = (isHide?"Show":"Hide");
    hideShowButton.style.height = "25px"
    var preTag = document.getElementsByTagName('details');
    console.log(preTag[0]);
    preTag[0].insertBefore(hideShowButton, preTag[0].firstChild);

    function toggleContent() {
        //console.log("Toggling content",document.getElementsByClassName('playground')[0].children[1].hidden);
        if(document.getElementById('aspect-ratio-helper').hidden){
            document.getElementById('aspect-ratio-helper').hidden = false;
            hideShowButton.innerHTML = "Show";
            isHide=false;
            document.getElementById('aspect-ratio-helper').style.display = "none";
            hideShowButton.className="hide";
        }else{
            document.getElementById('aspect-ratio-helper').hidden = true;
            hideShowButton.innerHTML = "Hide";
            isHide=true;
            document.getElementById('aspect-ratio-helper').style.display = "block";
            hideShowButton.className="show";
        }
    }

    hideShowButton.addEventListener('click',toggleContent)

from comprehensive-rust.

If code needs any changes suggest me. If it is completely wrong. suggest me a way if possible.

from comprehensive-rust.

It looks from the screencast like that's working -- it hides and shows, right?

But, I think it's key that this work without the aspect-ratio-helper.py being enabled.

from comprehensive-rust.

It looks from the screencast like that's working -- it hides and shows, right?

But, I think it's key that this work without the aspect-ratio-helper.py being enabled.

yes it's work like screencast red box hide/show on button toogle.

What if we add same styles of aspect-ratio-helper to some other new div in theme/book.js that might work but, If we push the code then it will be a problem for users.

from comprehensive-rust.

Yes, I think putting it in the .js and/or .css files is the right solution. And it will only be a problem if we push it before it's done :)

from comprehensive-rust.

Yes, I think putting it in the .js and/or .css files is the right solution. And it will only be a problem if we push it before it's done :)

Then, We can keep that part of code as comment and use in dev mode.
It's the only solution

from comprehensive-rust.

If you are ok to comment code and push then , I will make it work.

from comprehensive-rust.

I'm not sure what you're suggesting. Why would the code be in a comment?

from comprehensive-rust.

OH MY BAD English😅 , What I am saying is that, If we write the red box styles in theme/book.js it will effect the user but if we comment them than their will be no effect on users.

from comprehensive-rust.

We can uncomment them in developing mode and use it.

from comprehensive-rust.

The reason for this bug is to not have to uncomment anything in order to see the red box, so that wouldn't be a fix to the bug. We need a way to control, in the browser, whether to show or hide the box.

My suggestion is that you break down the project into two parts: first, show the red box all the time; then, set up the way to control whether to show or hide the box.

from comprehensive-rust.

The reason for this bug is to not have to uncomment anything in order to see the red box, so that wouldn't be a fix to the bug. We need a way to control, in the browser, whether to show or hide the box.

My suggestion is that you break down the project into two parts: first, show the red box all the time; then, set up the way to control whether to show or hide the box.

Sounds bit complex, But, Will keep that in mind and work on it.

from comprehensive-rust.

How about adding a button in right side navbar for showing or hiding red box.
button will be set to hide red box on default.

PS ; Not sure that's a good idea what do say. any change or suggestion.

from comprehensive-rust.

may be adding a new theme named as dev. for showing redvbox

from comprehensive-rust.

A new theme is an interesting idea -- want to try that out?

from comprehensive-rust.

A new theme is an interesting idea -- want to try that out?

Yes, I will try it out and let you know.

from comprehensive-rust.

Hello @djmitche , Check once . Any changes.

from comprehensive-rust.

Hello @djmitche , Check once . Any changes.

Strings.-.Comprehensive.Rust.-.Google.Chrome.2024-02-22.23-25-58.mp4

Due size of video, I cannot give you a proper demo . everything will be same except that dev button in theme.

from comprehensive-rust.

That looks great!

from comprehensive-rust.

Should I go for PR.

from comprehensive-rust.

Yep!

from comprehensive-rust.

Ok.

from comprehensive-rust.

Thanks @mani-chand for the work here!

There is one feature I would like to see: I would like us to hide the button with the rectangle when we publish the HTML to https://google.github.io/comprehensive-rust/ — to avoid confusing people who might click it and wonder what the red rectangle is about 😄

Removing the button will also help give back a little horizontal space. Especially on mobile, this is a very precious resource.

I would suggest updating .github/workflows/build.sh with a post-processing step after the call to mdbook build. This step should remove the reference to the new JavaScript code. You will probably want to insert a marker in the HTML (a HTML comment) so that you can find the right spot to remove.

The result would be that mdbook serve allows you to toggle the rectangle, but when we produce a final build for the website, we avoid showing this developer feature.

from comprehensive-rust.

Hello @mgeisler , Is this what you mean.

It should be before if if i am not wrong.

from comprehensive-rust.

Hello @mgeisler , Is this what you mean.

It should be before if if i am not wrong.

I am not sure why it is not reflecting now running it. , I need some help , What will be the line.

from comprehensive-rust.

I think sed is confusing the / delimiting the material to change with the content being replaced. You can use some .* to match the path:

sed -i '/<!-- MARKER_START -->.*<!-- MARKER_END -->/d'

If that doesn't help, can you push what you've got to the PR?

from comprehensive-rust.

@djmitche Once check the PR.

from comprehensive-rust.