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.
-
+
@@ -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 ) {
-
+