shower / shower

Shower HTML presentation engine

Shower Presentation Template

Shower ['ʃəuə] noun. A person or thing that shows.

1. Built on HTML, CSS and vanilla JavaScript.
2. Works in all modern browsers.
3. Themes are separated from engine.
4. Fully keyboard accessible.
5. Printable to PDF.

See it in action. Includes Ribbon and Material themes, and core with plugins.

Follow @shower_me for support and updates, file an issue if you have any.

Quick Start

1. Download and unzip shower.zip template archive.
2. Open index.html in any text editor and start creating your presentation.

Quick Start via CLI

You’ll need Node.js installed on your computer.

1. Install Shower CLI utility: npm install -g @shower/cli.
2. Create your presentation: shower create.

Read more on shower/cli page.

Quick Start with Hosting

You’ll need Node.js installed on your computer.

1. Copy this repository to your account via GitHub.
   1. Open import page.
   2. Use https://github.com/shower/shower for the repository URL
   3. Use your presentation name.
   4. Clone the resulted repository to your computer.
2. Install dependencies npm install and start a local server npm start.
3. Start editing your slides with live-reload.

Once you’re done you can build a clean copy of your slides:

npm run bundle

You’ll find your presentation in bundled folder. You can also run npm run archive to get the same files in presentation.zip.

Publish your presentation online by running:

npm run publish

You’ll have your slides published to https://USER.github.io/REPO/.

Deploy to Netlify

By clicking the button below you can fork this repo and deploy it to Netlify.

By doing this you would get a GitHub repo linked with Netlify in a way any change to the repo would trigger a Shower rebuild and deploy to Netlify servers, which allows for an easy way to create and share Shower presentation without the need to install anything locally.

Browser Support

Latest stable versions of Chrome, Edge, Firefox, and Safari are supported.

Contributing

You’re always welcome to contribute. Fork project, make changes and send it as pull request. But it’s better to file an issue with your idea first. Read contributing rules for more details.

Main contributors in historical order: pepelsbey, jahson, miripiruni, kizu, artpolikarpov, tonyganch, zloylos, zloylos, shvaikalesh.

---

Licensed under MIT License.

shower's Issues

Add support for theming

Right now the CSS for slides' design is not separated from all other styles, so overriding all these styles is somewhat a problem.

I think, you should separate all the presentational styles (colors, backgrounds, rounded corners, etc.) from all other styles, so anyone could easily create themes for Shower.

First slide is blank in IE9

When you go to the first slide in IE9, it shows a blank page (with the progress bar at the bottom) instead of displaying the Cover page.

Shout animation problem in Webkit

.slide.shout ARTICLE H2 {
    -webkit-transform:scale(0.1) translate(0, 2em);
    -webkit-transition:all 0.8s ease-out;
    }
.slide.shout:target ARTICLE H2 {
    -webkit-transform:scale(1) translate(0, 0);
    }

Zero .active elements inside .inner causes JS error

If there's no elements with .active inside inner navigation block

<ol class="inner">
    <li>Очередь заведено создаете</li>
    <li>Те про, джоэл должен написано вы всю</li>
    <li>Получаете отказаться программистов</li>
    <li>Ещё то этой вреде внешних.</li>
</ol>

then:

TypeError: 'undefined' is not an object
(evaluating 'activeNodes[activeNodes.length - 1].nextElementSibling')

Create slideshow mode

<section class="slide" data-duration="2m 30s">

means “display this slide for a 2 minutes and 30 seconds and go to the next slide”

Support mobile devices

Example code:

var body = document.body,
    tracking = false,
    oldX, newX;

function touchStart(e) {
    e.preventDefault();
    tracking = true;
    oldX = e.changedTouches[0].pageX;
}

function touchMove(e) {
    if (!tracking) return;
    newX = e.changedTouches[0].pageX;
    if (oldX - newX > 100) {
        tracking = false;
        // next
    }
    if (oldX - newX < -100) {
        tracking = false;
        // prev
    }
}

body.addEventListener('touchstart', touchStart, false);
body.addEventListener('touchmove', touchMove, false);

See also: https://github.com/alexyoung/turing.js/blob/master/turing.touch.js

Add syntax highlighing to code samples

It would be nice for the code samples to be automatically syntax highlighted. Perhaps using http://shjs.sourceforge.net/

Fullscreen API support

http://hacks.mozilla.org/2012/01/using-the-fullscreen-api-in-web-browsers/

Position of text in full screen images slide

It would be good to have the possibility to choose the position of the text when the page has full screen image. It could be quarter of the page, defined zone. Right now I positioned with margins. Another possibility would be a local reference systems in percentage.

Russian localization of index.htm

Maybe in this way:

index.en.htm
index.ru.htm
…etc.

List of available themes?

It would be nice to have a list of available themes and presentations made with shower.

Maybe in readme or in wiki?

Special type of links should be converted to iframes

All links with “frame” class

<a href="http://example.com/" class="frame">Link</a>

should be converted to

<iframe src="http://example.com/" frameborder="0" scrolling="no"></iframe>

…in presentation mode only.

Shout text is half-hidden if loaded directly in fullscreen

e.g.

Whereas this is how it looks if you access it via the slide navigator:

Inner navigation

There's should be a way to navigate between list items inside current slide. Kind of:

<ul class="inner-navigation">
    <li id="slide-item-1">Item</li>
    <li id="slide-item-2">Item</li>
    <li id="slide-item-3">Item</li>
</ul>
.inner-navigation LI { opacity: 0.5 }
.inner-navigation LI:target { opacity: 1 }

Need control to run slideshow from any slide

Subj. For example, add this action to link in addition to https://github.com/pepelsbey/shower/issues/24

Allow to get PT fonts from Google CDN

If user online do request:

<link href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow" rel="stylesheet" type="text/css">

if user offline load fonts from shower library

PS See: http://www.google.com/webfonts#UsePlace:use

Enable Media Queries to adjust <body> font-size

@media projection and (min-device-height:480px ) { BODY { font-size:20px } }
@media projection and (min-device-height:600px ) { BODY { font-size:25px } }
@media projection and (min-device-height:768px ) { BODY { font-size:32px } }

…etc.

Replace em/strong with mark.class for code highlighting

It would be much better in semantic point of view.
Something like:

<em> — <mark class="less-important">
<strong> — <mark class="more-important">

With better class names, of course.

ref to 'ttf' instead of 'woff'

https://github.com/pepelsbey/shower/blob/new/themes/ribbon/styles/fonts.css#L21

The URL references .Italic.ttf, but the format is 'woff'

Implement support for slide transitions

Something like that: http://jsfiddle.net/pepelsbey/W7DsB/

Basic principle here is: all previous slides to the current have additional class name passed

I think it wouldn't be a problem in current architecture.

Add methods and play button for non-fullscreen presentation mode

This function should be optional
function fullScreen() {
return (
window.screenX == 0 &&
window.screenY == 0 &&
screen.width == window.outerWidth &&
screen.height == window.outerHeight
) ? true : false;
}

History bug (Shower 2)

When going back from #blah to # (from slide in presentation mode back to slide picker) using history (browser's “back” button) at least in Safari there is a black slide without anything except the empty slider on it. The expected behavior is to go back to slide picker instead.

Go to slide №

I want to be able to go to slide number n, by entering the number.

It seems to me a beautiful traveling INPUT, which appears on Ctrl + G (type "go to...") and stuck (fixed) close to the top of the page.

Add link to #hash of slide to header

There is no way to get a hash of a slide when not in slideshow mode.

The header of each slide is a good place for link to it.

Replace Consolas with open-licensed font

Some day, some font… I have no ideas.

Spoilers (Shower 2)

With the new slide picker there can be the following problem: in first run you can accidentally spoil some slides that viewers didn't see for that moment.

Maybe for the first run hide all the thumbnails with some kind of veil and show it when the slides were showed in presentation mode? This could also help to show some previous slide without spoilering some of the next when switching back to slide picker from presentation view.

Print version?

It'd be super cool if you'd manage to make a print stylesheet that would make print version look almost like the actual presentation.

With that you could easily convert Shower presentation to pdf just by printing it to pdf on mac.

Lack of hash in fullscreen causes black screen

For example — there's should be first slide.

Полноэкранный\неполноэкранный режим в ff 3.6.10

В неполноэкранном режиме страница отображается не очень приятно, т.е. не как в опере. Складываются ощущения что стили не применились.

There are two files with DOS-style CRLF

license.txt
pictures/semantics.svg

Add Support for Nested Lists

Looks like there currently is no way to create nested lists as part of the slide content.

Empty black slide after pressing Enter

Something is wrong here:

• Go to http://pepelsbey.github.com/shower/en.htm
• Press Enter
• Pres Esc

On the step 2 you'll see empty slide, on the step 3 url will be changed to the last slide ID but without blue outline on the actual last slide.

I guess it should be:

• on the step 2 nothing should happen because no silide is selected (outlined and presented in url by hash ID)
• which automatically resolves problem with step 3

Please add an explicit license

Please add an explicit license to the project so that I know if I can use this or not… Without a license file every person wanting to use Shower would theoretically require explicit permission from you.

I'd suggest the MIT License, if you don't have a preference for some other license.

Links in th-mode does'nt work

For example: i read http://pepelsbey.net/pres/dynamic-graphics/#SVGSuperIcon in th-mode and see «Super Icon» link. Cmd+click and... i see this slide in full screen mode, not new tab.

Test screenX and screenY on dual displays configuration

Suddenly, screenX on second display might not be equal to zero:
function fullScreen() {
return window.screenX == 0 &&
window.screenY == 0 &&
screen.width == window.outerWidth &&
screen.height == window.outerHeight;
}

Slide picker on 13″ screen (Shower 2)

On 13″ screen of Snow Leopard (with an old scrollbar) there is only one slide per line, however there is almost enough space for one extra slide.

An article for this presentation.

The full content being in one page is quite cool. And it could be directly a full long article talking about the content. A person would have then the choice to read the article or to look at it in slideshow mode hiding most of the content.

<div class="articlecontent"></div>

.articlecontent { display:none;} in slideshow mode.

DRY: Write it once and use it in different contexts. People after the conference being able to access the full content of it.

Horizontal scrollbar in Webkit after full mode

Steps to reproduce:

• Go to full screen mode
• Exit full screen mode

Possibly caused by margin-left:200% for hiding slides in full screen mode.

Broken current slide focus in the list view in Opera

Caused by transform, could be solved only by removing transform, but still not reproducible in clean conditions.

Normal behavior of the anchor focus is kind of limited by viewport height, that might be important.

Auto font-size adjust or splitting by parts

When there is a lot of content on a slide there is no way to see it right now.

We can detect by js if the content don't fit in a slide and then there can be at least two solutions:

1. Adjust font-size of content so you could always see the whole slide.
2. Create sub-slides automagically, so there would be some sigh that the slide is not fully showed like ellipsis and when you press «next slide» it would scroll/show the next part of it.

safari 5.1 fullscreen

в cафари 5.1 полноэкранным режимом можно управлять через javascript и css
пример, который пробовал - https://gist.github.com/1088696
в os x SL скрывает все элементы полностью, включая адресную строку и вкладки

Unstyled content in non-fullscreen mode

All elements should be styled in “styles/screen.css”

pepelsbey.github.com/shower is not available

Sorry, this GitHub:Page does not exist.

Keep existing querystring parameters

Shower shouldn't replace all querystring parameters with ?full when entering single slide mode. It should rather add &full to the querystring.

Create thumbs mode

There's <body class="list"> mode with 512x320 thumbnails. It's good for reading and browsing through the slides. But it would be great to have “thumbnails” mode only for browsing when you need to pick the right slide quickly. So it's the question of additional class name to the body (because it's just a minor change)

<body class="list thumbs">

and small changes in Ribbon theme:

.list.thumbs .slide > DIV {
    width:256px;
    height:160px;
    }
.list.thumbs .slide SECTION {
    transform:scale(0.25);
    }

There will be also reading-browsing mode switcher. But I wonder: how should we keep this mode while entering ?full mode? For example, we can pass ?list and ?thumb parameters into URL just like with ?full.

Discuss?

Having a background for text in some circumstances

Sometimes the text will not be fully readable with an image in the background. Having a background with opacity would help to make the text readable and/or a shadow to the text that will help to create more contrasts.

Extra padding at the bottom of the list view in Firefox

Caused by transform, could be solved by .slide { overflow:hidden } but this is not acceptable due to generated page numbers positioned outside of slide.

Embedded Iframes are stealing key navigation focus

Possible solution:

var f = window.frames, fl = f.length;
for( var i=0; i<fl; i++ ) {
    f[i].onfocus = function() {
        f.top.focus();
    }
}

create a slide tag using html shim technique

I see lot of <div class="slide"> maybe you could create the tag using the same technique that html5shim uses?

it would be much cleaner

http://code.google.com/p/html5shim/

Create script-based progress-bar

…to help listeners to understand timing of presentation.

Maybe something like FF4 tabs progress bar, somewhere at the top.