Add a hack for a simpler Bootstack pages layout inside iframes.

[vincent]

This hack will add classes on the HTML root element, and hide some components when displayed inside an iframe.

This can be useful use Bookstack as a Knowledge Base, and you want to integrate contextual help for your app, with content from Bookstack.

If you think it's too simple to be listed as a hack, feel free to discard.

[ssddanbrown]

Thanks for offering this @vincent.

If you think it's too simple to be listed as a hack, feel free to discard.

I don't think it's too simple, but maybe quite a specific use-case for a JS-based hack like this. That said, I do think it could be handy to others, and could be a good demonstration of using query parameters. This may be better suited to using the visual theme system though which would avoid your listed consideration of JavaScript being a requirement. Can be easily changed.

Only thing I'm not sure about is this:

document.documentElement.classList.toggle('logged-out', localStorage.length === 0);
document.documentElement.classList.toggle('logged-in', localStorage.length > 0);

As far as I can see, your hack is not using these classes, nor can I imagine that they'd work to indicate logged-in/logged-out status since the number of items in localStorage (as checked in the code) does not relate to logged-in/out status in BookStack. Is there some other intent of these lines?

[vincent]

I completely agree with your remarks, and deleted the unused classes.

[ssddanbrown]

Thanks @vincent. Now merged and published at https://www.bookstackapp.com/hacks/iframe-specific-tweaks/.

As I mentioned above, I converted this to a visual theme system hack in the process of review to act as an example of how query parameters, along with custom scripts/styles, could be used direct the PHP/HTML side of things.