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 4cb15eb5..ef3e406c 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 2e72aca9..c4c2991b 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 5e408832..c8d38f26 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 28ed7d3b..30d7463d 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 ece6124f..3d406af2 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 6d0771ab..cf4f042c 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 18a48639..43bb4f49 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 6a80b623..a818ec29 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 82570f34..426b8cfa 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.
-
+
@@ -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.
-
+
"blackout"
-
+
@@ -340,7 +340,7 @@ function linkify( selector ) {
-
+