internetarchive / internetarchive/bookreader
Some demos not working
- Dominant language
- JavaScript
- Stars
- 1.2k
- Forks
- 491
- Avg merge
- 2d 15h
- Merged PRs (30d)
- 3
Description
**Description**
I'm experiencing the same bug described here: https://stackoverflow.com/questions/71876803/how-to-get-the-demo-of-the-internet-archive-bookreader-working-in-2022
The problem seems related to `css` `var`: `--br-height` not being defined, so that:
```css
.BookReader {
height: var(--br-height);
...
}
```
in [BookReaderDemo.css#L32-L36](https://github.com/internetarchive/bookreader/blob/master/BookReaderDemo/BookReaderDemo.css#L32-L36) sets the `height` to `0` for the elements of class `BookReader` in the following, not-working, demos:
- [demo-advanced.html](https://github.com/internetarchive/bookreader/blob/master/BookReaderDemo/demo-advanced.html)
- [demo-iif](https://github.com/internetarchive/bookreader/blob/master/BookReaderDemo/demo-iiif.html)
- [demo-multiple.html](https://github.com/internetarchive/bookreader/blob/master/BookReaderDemo/demo-multiple.html)
- [demo-preview-pages.html](https://github.com/internetarchive/bookreader/blob/master/BookReaderDemo/demo-preview-pages.html)
- [demo-simple.html](https://github.com/internetarchive/bookreader/blob/master/BookReaderDemo/demo-simple.html)
- [immersion-1up.html](https://github.com/internetarchive/bookreader/blob/master/BookReaderDemo/immersion-1up.html)
- [viewmode-cycle.html](http://127.0.0.1:8000/BookReaderDemo/viewmode-cycle.html)
The problem doesn't affect full-screen-like demos such as [demo-fullscreen-mobile.html](https://github.com/internetarchive/bookreader/blob/master/BookReaderDemo/demo-fullscreen-mobile.html) where the `height` for `.BookReader` is defined inline in the `head` (https://github.com/internetarchive/bookreader/blob/master/BookReaderDemo/demo-fullscreen-mobile.html#L24-L27).
And the problem doesn't affect internet-archive-like demos such as [demo-internetarchive.html](https://github.com/internetarchive/bookreader/blob/master/BookReaderDemo/demo-internetarchive.html) where the `div` with `id` `BookReader` is inside a `` `tag` (https://github.com/internetarchive/bookreader/blob/master/BookReaderDemo/demo-internetarchive.html#L45-L61) whose `--br-height` `var` is defined in [BookReaderDemo.css#L26-L30](https://github.com/internetarchive/bookreader/blob/master/BookReaderDemo/BookReaderDemo.css#L26-L30).
**Proposal**
The problem could be solved by adding an inline `css` rule in the `head` of not working demos, similary to what is done for full-screen demos :
```css
.BookReader{--br-height: calc(100vh - 100px)}
```
Or perhaps by adding a similar rule directly in `BookReaderDemo.css`
[edited: typo]
Contributor guide
Assessment
This issue has not been assessed yet.