From c79376dab2998cdaf906bb281ae4fc220e2a2e3a Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Sat, 10 Nov 2012 11:40:19 -0500 Subject: [PATCH] allow multiple control elements, document usage of global controls (#184, #204) --- README.md | 13 +++ css/reveal.css | 8 +- css/theme/beige.css | 24 ++--- css/theme/default.css | 24 ++--- css/theme/serif.css | 24 ++--- css/theme/simple.css | 24 ++--- css/theme/sky.css | 24 ++--- css/theme/template/theme.scss | 24 ++--- index.html | 14 +-- js/reveal.js | 71 ++++++++++----- js/reveal.min.js | 163 ++++++++++++++++++---------------- 11 files changed, 231 insertions(+), 182 deletions(-) diff --git a/README.md b/README.md index 4cb15eb..ef3e406 100644 --- a/README.md +++ b/README.md @@ -186,6 +186,19 @@ It's easy to link between slides. The first example below targets the index of a Link Link ``` + +You can also add relative navigation links, similar to the built in reveal.js controls, by appending one of the following classes on any element. Note that each element is automatically given an ```enabled``` class when its a valid navigation route based on the current slide. + +```html + + + + + + +``` + + ### Fullscreen mode Just press »F« on your keyboard to show your presentation in fullscreen mode. Press the »ESC« key to exit fullscreen mode. diff --git a/css/reveal.css b/css/reveal.css index 2e72aca..c4c2991 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -346,14 +346,14 @@ body { margin-top: 1px; } -.reveal .controls div.left { +.reveal .controls div.navigate-left { top: 42px; border-right-width: 22px; border-right-color: #eee; } -.reveal .controls div.right { +.reveal .controls div.navigate-right { left: 74px; top: 42px; @@ -361,14 +361,14 @@ body { border-left-color: #eee; } -.reveal .controls div.up { +.reveal .controls div.navigate-up { left: 42px; border-bottom-width: 22px; border-bottom-color: #eee; } -.reveal .controls div.down { +.reveal .controls div.navigate-down { left: 42px; top: 74px; diff --git a/css/theme/beige.css b/css/theme/beige.css index 5e40883..c8d38f2 100644 --- a/css/theme/beige.css +++ b/css/theme/beige.css @@ -110,39 +110,39 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls div.left, -.reveal .controls div.left.enabled { +.reveal .controls div.navigate-left, +.reveal .controls div.navigate-left.enabled { border-right-color: #8b743d; } -.reveal .controls div.right, -.reveal .controls div.right.enabled { +.reveal .controls div.navigate-right, +.reveal .controls div.navigate-right.enabled { border-left-color: #8b743d; } -.reveal .controls div.up, -.reveal .controls div.up.enabled { +.reveal .controls div.navigate-up, +.reveal .controls div.navigate-up.enabled { border-bottom-color: #8b743d; } -.reveal .controls div.down, -.reveal .controls div.down.enabled { +.reveal .controls div.navigate-down, +.reveal .controls div.navigate-down.enabled { border-top-color: #8b743d; } -.reveal .controls div.left.enabled:hover { +.reveal .controls div.navigate-left.enabled:hover { border-right-color: #c0a86e; } -.reveal .controls div.right.enabled:hover { +.reveal .controls div.navigate-right.enabled:hover { border-left-color: #c0a86e; } -.reveal .controls div.up.enabled:hover { +.reveal .controls div.navigate-up.enabled:hover { border-bottom-color: #c0a86e; } -.reveal .controls div.down.enabled:hover { +.reveal .controls div.navigate-down.enabled:hover { border-top-color: #c0a86e; } diff --git a/css/theme/default.css b/css/theme/default.css index 28ed7d3..30d7463 100644 --- a/css/theme/default.css +++ b/css/theme/default.css @@ -110,39 +110,39 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls div.left, -.reveal .controls div.left.enabled { +.reveal .controls div.navigate-left, +.reveal .controls div.navigate-left.enabled { border-right-color: #13daec; } -.reveal .controls div.right, -.reveal .controls div.right.enabled { +.reveal .controls div.navigate-right, +.reveal .controls div.navigate-right.enabled { border-left-color: #13daec; } -.reveal .controls div.up, -.reveal .controls div.up.enabled { +.reveal .controls div.navigate-up, +.reveal .controls div.navigate-up.enabled { border-bottom-color: #13daec; } -.reveal .controls div.down, -.reveal .controls div.down.enabled { +.reveal .controls div.navigate-down, +.reveal .controls div.navigate-down.enabled { border-top-color: #13daec; } -.reveal .controls div.left.enabled:hover { +.reveal .controls div.navigate-left.enabled:hover { border-right-color: #71e9f4; } -.reveal .controls div.right.enabled:hover { +.reveal .controls div.navigate-right.enabled:hover { border-left-color: #71e9f4; } -.reveal .controls div.up.enabled:hover { +.reveal .controls div.navigate-up.enabled:hover { border-bottom-color: #71e9f4; } -.reveal .controls div.down.enabled:hover { +.reveal .controls div.navigate-down.enabled:hover { border-top-color: #71e9f4; } diff --git a/css/theme/serif.css b/css/theme/serif.css index ece6124..3d406af 100644 --- a/css/theme/serif.css +++ b/css/theme/serif.css @@ -97,39 +97,39 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls div.left, -.reveal .controls div.left.enabled { +.reveal .controls div.navigate-left, +.reveal .controls div.navigate-left.enabled { border-right-color: #51483d; } -.reveal .controls div.right, -.reveal .controls div.right.enabled { +.reveal .controls div.navigate-right, +.reveal .controls div.navigate-right.enabled { border-left-color: #51483d; } -.reveal .controls div.up, -.reveal .controls div.up.enabled { +.reveal .controls div.navigate-up, +.reveal .controls div.navigate-up.enabled { border-bottom-color: #51483d; } -.reveal .controls div.down, -.reveal .controls div.down.enabled { +.reveal .controls div.navigate-down, +.reveal .controls div.navigate-down.enabled { border-top-color: #51483d; } -.reveal .controls div.left.enabled:hover { +.reveal .controls div.navigate-left.enabled:hover { border-right-color: #8b7c69; } -.reveal .controls div.right.enabled:hover { +.reveal .controls div.navigate-right.enabled:hover { border-left-color: #8b7c69; } -.reveal .controls div.up.enabled:hover { +.reveal .controls div.navigate-up.enabled:hover { border-bottom-color: #8b7c69; } -.reveal .controls div.down.enabled:hover { +.reveal .controls div.navigate-down.enabled:hover { border-top-color: #8b7c69; } diff --git a/css/theme/simple.css b/css/theme/simple.css index 6d0771a..cf4f042 100644 --- a/css/theme/simple.css +++ b/css/theme/simple.css @@ -99,39 +99,39 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls div.left, -.reveal .controls div.left.enabled { +.reveal .controls div.navigate-left, +.reveal .controls div.navigate-left.enabled { border-right-color: darkblue; } -.reveal .controls div.right, -.reveal .controls div.right.enabled { +.reveal .controls div.navigate-right, +.reveal .controls div.navigate-right.enabled { border-left-color: darkblue; } -.reveal .controls div.up, -.reveal .controls div.up.enabled { +.reveal .controls div.navigate-up, +.reveal .controls div.navigate-up.enabled { border-bottom-color: darkblue; } -.reveal .controls div.down, -.reveal .controls div.down.enabled { +.reveal .controls div.navigate-down, +.reveal .controls div.navigate-down.enabled { border-top-color: darkblue; } -.reveal .controls div.left.enabled:hover { +.reveal .controls div.navigate-left.enabled:hover { border-right-color: #0000f1; } -.reveal .controls div.right.enabled:hover { +.reveal .controls div.navigate-right.enabled:hover { border-left-color: #0000f1; } -.reveal .controls div.up.enabled:hover { +.reveal .controls div.navigate-up.enabled:hover { border-bottom-color: #0000f1; } -.reveal .controls div.down.enabled:hover { +.reveal .controls div.navigate-down.enabled:hover { border-top-color: #0000f1; } diff --git a/css/theme/sky.css b/css/theme/sky.css index 18a4863..43bb4f4 100644 --- a/css/theme/sky.css +++ b/css/theme/sky.css @@ -103,39 +103,39 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls div.left, -.reveal .controls div.left.enabled { +.reveal .controls div.navigate-left, +.reveal .controls div.navigate-left.enabled { border-right-color: #3b759e; } -.reveal .controls div.right, -.reveal .controls div.right.enabled { +.reveal .controls div.navigate-right, +.reveal .controls div.navigate-right.enabled { border-left-color: #3b759e; } -.reveal .controls div.up, -.reveal .controls div.up.enabled { +.reveal .controls div.navigate-up, +.reveal .controls div.navigate-up.enabled { border-bottom-color: #3b759e; } -.reveal .controls div.down, -.reveal .controls div.down.enabled { +.reveal .controls div.navigate-down, +.reveal .controls div.navigate-down.enabled { border-top-color: #3b759e; } -.reveal .controls div.left.enabled:hover { +.reveal .controls div.navigate-left.enabled:hover { border-right-color: #74a7cb; } -.reveal .controls div.right.enabled:hover { +.reveal .controls div.navigate-right.enabled:hover { border-left-color: #74a7cb; } -.reveal .controls div.up.enabled:hover { +.reveal .controls div.navigate-up.enabled:hover { border-bottom-color: #74a7cb; } -.reveal .controls div.down.enabled:hover { +.reveal .controls div.navigate-down.enabled:hover { border-top-color: #74a7cb; } diff --git a/css/theme/template/theme.scss b/css/theme/template/theme.scss index 6a80b62..a818ec2 100644 --- a/css/theme/template/theme.scss +++ b/css/theme/template/theme.scss @@ -106,39 +106,39 @@ body { * NAVIGATION CONTROLS *********************************************/ -.reveal .controls div.left, -.reveal .controls div.left.enabled { +.reveal .controls div.navigate-left, +.reveal .controls div.navigate-left.enabled { border-right-color: $linkColor; } -.reveal .controls div.right, -.reveal .controls div.right.enabled { +.reveal .controls div.navigate-right, +.reveal .controls div.navigate-right.enabled { border-left-color: $linkColor; } -.reveal .controls div.up, -.reveal .controls div.up.enabled { +.reveal .controls div.navigate-up, +.reveal .controls div.navigate-up.enabled { border-bottom-color: $linkColor; } -.reveal .controls div.down, -.reveal .controls div.down.enabled { +.reveal .controls div.navigate-down, +.reveal .controls div.navigate-down.enabled { border-top-color: $linkColor; } -.reveal .controls div.left.enabled:hover { +.reveal .controls div.navigate-left.enabled:hover { border-right-color: $linkColorHover; } -.reveal .controls div.right.enabled:hover { +.reveal .controls div.navigate-right.enabled:hover { border-left-color: $linkColorHover; } -.reveal .controls div.up.enabled:hover { +.reveal .controls div.navigate-up.enabled:hover { border-bottom-color: $linkColorHover; } -.reveal .controls div.down.enabled:hover { +.reveal .controls div.navigate-down.enabled:hover { border-top-color: $linkColorHover; } diff --git a/index.html b/index.html index 82570f3..426b8cf 100644 --- a/index.html +++ b/index.html @@ -61,9 +61,9 @@

Vertical Slides

Slides can be nested inside of other slides, - try pressing down. + try pressing down.

- + Down arrow @@ -181,20 +181,20 @@ will be added as a class to the document element when the slide is open. This lets you apply broader style changes, like switching the background.

- + Down arrow

"blackout"

- + Down arrow

"soothe"

- - Up arrow + + Up arrow
@@ -340,7 +340,7 @@ function linkify( selector ) { - +