Show/hide the sizing box without re-running mdbook

[djmitche]

#1464 describes a way to enable a red box in development mode, to determine whether a slide will fit onscreen without scrolling.

Let's define a keystroke or hidden button that will toggle this box, without any special configuration in book.toml. This will make it easier to use this tool while developing or reviewing a PR, without accidentally committing changes to book.toml.

CC @mani-chand who is working on fixing slides for #1464.

[djmitche]

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

[mani-chand]

@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.

[mani-chand]

@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.

[djmitche]

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

[djmitche]

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

[mani-chand]

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

[mani-chand]

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

[djmitche]

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.

[mani-chand]

Okay ,I will check with that .

[mani-chand]

I need help how to get red box .

[djmitche]

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).

[mani-chand]

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)

Pattern.Matching.-.Comprehensive.Rust.-.Google.Chrome.2024-02-21.23-42-34.mp4

[mani-chand]

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

[djmitche]

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.

[mani-chand]

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.

[djmitche]

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 :)

[mani-chand]

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

[mani-chand]

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

[djmitche]

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

[mani-chand]

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.

[mani-chand]

We can uncomment them in developing mode and use it.

[djmitche]

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.

[mani-chand]

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.

[mani-chand]

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.

[mani-chand]

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

[djmitche]

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

[mani-chand]

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

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

[mani-chand]

Hello @djmitche , Check once . Any changes.

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

[mani-chand]

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.

[djmitche]

That looks great!

[mani-chand]

Should I go for PR.

[djmitche]

Yep!

[mani-chand]

Ok.

[mgeisler]

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.

[mani-chand]

Hello @mgeisler , Is this what you mean.

It should be before if if i am not wrong.

[mani-chand]

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.

[djmitche]

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?

[mani-chand]

@djmitche Once check the PR.