search

impress / impress.js

It's a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com.
http://impress.js.org
MIT License
37.62k stars 6.67k forks source link

Add .slideView or .preView class if loaded in console #827

Closed fnogatz closed 1 year ago

fnogatz commented 1 year ago

The impress console is a really useful tool for presenters. As of now, it is however not possible to change the slide's style only for the slideView (current slide) or only for the preView (next slide). We can't use CSS here as it is not aware of the fact if the page is loaded in an iframe.

The impressConsole.js already dynamically adds the class impress-console to the body of both iframes. This PR additionally adds the slideView and preView class, respectively. As a result, we can for instance hide the progress, progressbar and toolbar only in the preView using the following CSS snippet:

.impress-console.preView .impress-progress,
.impress-console.preView .impress-progressbar,
.impress-console.preView #impress-toolbar {
  display: none;
}

A real-world example that uses the proposed change can be found in the slides' console of my PhD defense (source code).

henrikingo commented 1 year ago

Thanks again Falco! In fact, this has bothered myself too I think.

Would you like to add your example CSS to css/impress-common.css. That way users will see it - and let's face it, copy it - from there.

fnogatz commented 1 year ago

Thank you for the feedback, @henrikingo! I added the CSS as suggested in css/impress-common.css, together with some little explanation.