Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
server
team-presentation
Commits
617c17be
Commit
617c17be
authored
May 16, 2017
by
Hakim El Hattab
Browse files
add controlsHint option, animates vertical arrow first time we encounter a vertical slide
parent
58dc6b7c
Changes
3
Hide whitespace changes
Inline
Side-by-side
css/reveal.css
View file @
617c17be
...
@@ -188,6 +188,49 @@ body {
...
@@ -188,6 +188,49 @@ body {
/*********************************************
/*********************************************
* CONTROLS
* CONTROLS
*********************************************/
*********************************************/
@-webkit-keyframes
bounce-right
{
0
%,
10
%,
25
%,
40
%,
50
%
{
-webkit-transform
:
translateX
(
0
);
transform
:
translateX
(
0
);
}
20
%
{
-webkit-transform
:
translateX
(
10px
);
transform
:
translateX
(
10px
);
}
30
%
{
-webkit-transform
:
translateX
(
-5px
);
transform
:
translateX
(
-5px
);
}
}
@keyframes
bounce-right
{
0
%,
10
%,
25
%,
40
%,
50
%
{
-webkit-transform
:
translateX
(
0
);
transform
:
translateX
(
0
);
}
20
%
{
-webkit-transform
:
translateX
(
10px
);
transform
:
translateX
(
10px
);
}
30
%
{
-webkit-transform
:
translateX
(
-5px
);
transform
:
translateX
(
-5px
);
}
}
@-webkit-keyframes
bounce-down
{
0
%,
10
%,
25
%,
40
%,
50
%
{
-webkit-transform
:
translateY
(
0
);
transform
:
translateY
(
0
);
}
20
%
{
-webkit-transform
:
translateY
(
10px
);
transform
:
translateY
(
10px
);
}
30
%
{
-webkit-transform
:
translateY
(
-5px
);
transform
:
translateY
(
-5px
);
}
}
@keyframes
bounce-down
{
0
%,
10
%,
25
%,
40
%,
50
%
{
-webkit-transform
:
translateY
(
0
);
transform
:
translateY
(
0
);
}
20
%
{
-webkit-transform
:
translateY
(
10px
);
transform
:
translateY
(
10px
);
}
30
%
{
-webkit-transform
:
translateY
(
-5px
);
transform
:
translateY
(
-5px
);
}
}
.reveal
.controls
{
.reveal
.controls
{
display
:
none
;
display
:
none
;
position
:
absolute
;
position
:
absolute
;
...
@@ -201,8 +244,6 @@ body {
...
@@ -201,8 +244,6 @@ body {
.reveal
.controls
button
{
.reveal
.controls
button
{
position
:
absolute
;
position
:
absolute
;
padding
:
0
;
padding
:
0
;
width
:
46px
;
height
:
46px
;
background-color
:
transparent
;
background-color
:
transparent
;
border
:
0
;
border
:
0
;
outline
:
0
;
outline
:
0
;
...
@@ -217,8 +258,8 @@ body {
...
@@ -217,8 +258,8 @@ body {
opacity
:
0
;
opacity
:
0
;
-webkit-appearance
:
none
;
-webkit-appearance
:
none
;
-webkit-tap-highlight-color
:
transparent
;
}
-webkit-tap-highlight-color
:
transparent
;
}
.reveal
.controls
button
:before
,
.reveal
.controls
.pagination-arrow
:before
,
.reveal
.controls
button
:after
{
.reveal
.controls
.pagination-arrow
:after
{
content
:
''
;
content
:
''
;
position
:
absolute
;
position
:
absolute
;
top
:
0
;
top
:
0
;
...
@@ -231,44 +272,58 @@ body {
...
@@ -231,44 +272,58 @@ body {
-webkit-transform-origin
:
3px
50%
;
-webkit-transform-origin
:
3px
50%
;
transform-origin
:
3px
50%
;
transform-origin
:
3px
50%
;
will-change
:
transform
;
}
will-change
:
transform
;
}
.reveal
.controls
button
:before
{
.reveal
.controls
.pagination-arrow
{
-webkit-transform
:
translateX
(
7px
)
translateY
(
20px
)
rotate
(
44deg
);
position
:
relative
;
transform
:
translateX
(
7px
)
translateY
(
20px
)
rotate
(
44deg
);
}
width
:
46px
;
.reveal
.controls
button
:after
{
height
:
46px
;
}
-webkit-transform
:
translateX
(
7px
)
translateY
(
20px
)
rotate
(
-44deg
);
.reveal
.controls
.pagination-arrow
:before
{
transform
:
translateX
(
7px
)
translateY
(
20px
)
rotate
(
-44deg
);
}
-webkit-transform
:
translateX
(
7px
)
translateY
(
20px
)
rotate
(
44deg
);
.reveal
.controls
button
:hover:before
{
transform
:
translateX
(
7px
)
translateY
(
20px
)
rotate
(
44deg
);
}
-webkit-transform
:
translateX
(
7px
)
translateY
(
20px
)
rotate
(
40deg
);
.reveal
.controls
.pagination-arrow
:after
{
transform
:
translateX
(
7px
)
translateY
(
20px
)
rotate
(
40deg
);
}
-webkit-transform
:
translateX
(
7px
)
translateY
(
20px
)
rotate
(
-44deg
);
.reveal
.controls
button
:hover:after
{
transform
:
translateX
(
7px
)
translateY
(
20px
)
rotate
(
-44deg
);
}
-webkit-transform
:
translateX
(
7px
)
translateY
(
20px
)
rotate
(
-40deg
);
.reveal
.controls
.pagination-arrow
:hover:before
{
transform
:
translateX
(
7px
)
translateY
(
20px
)
rotate
(
-40deg
);
}
-webkit-transform
:
translateX
(
7px
)
translateY
(
20px
)
rotate
(
40deg
);
.reveal
.controls
button
:active:before
{
transform
:
translateX
(
7px
)
translateY
(
20px
)
rotate
(
40deg
);
}
-webkit-transform
:
translateX
(
7px
)
translateY
(
20px
)
rotate
(
36deg
);
.reveal
.controls
.pagination-arrow
:hover:after
{
transform
:
translateX
(
7px
)
translateY
(
20px
)
rotate
(
36deg
);
}
-webkit-transform
:
translateX
(
7px
)
translateY
(
20px
)
rotate
(
-40deg
);
.reveal
.controls
button
:active:after
{
transform
:
translateX
(
7px
)
translateY
(
20px
)
rotate
(
-40deg
);
}
-webkit-transform
:
translateX
(
7px
)
translateY
(
20px
)
rotate
(
-36deg
);
.reveal
.controls
.pagination-arrow
:active:before
{
transform
:
translateX
(
7px
)
translateY
(
20px
)
rotate
(
-36deg
);
}
-webkit-transform
:
translateX
(
7px
)
translateY
(
20px
)
rotate
(
36deg
);
transform
:
translateX
(
7px
)
translateY
(
20px
)
rotate
(
36deg
);
}
.reveal
.controls
.pagination-arrow
:active:after
{
-webkit-transform
:
translateX
(
7px
)
translateY
(
20px
)
rotate
(
-36deg
);
transform
:
translateX
(
7px
)
translateY
(
20px
)
rotate
(
-36deg
);
}
.reveal
.controls
.navigate-left
{
.reveal
.controls
.navigate-left
{
right
:
82px
;
right
:
82px
;
bottom
:
18px
;
bottom
:
18px
;
}
-webkit-transform
:
translateY
(
-50%
);
.reveal
.controls
.navigate-left
.pagination-arrow
{
transform
:
translateY
(
-50%
);
}
-webkit-transform
:
translateY
(
-50%
);
transform
:
translateY
(
-50%
);
}
.reveal
.controls
.navigate-right
{
.reveal
.controls
.navigate-right
{
right
:
0
;
right
:
0
;
bottom
:
18px
;
bottom
:
18px
;
}
-webkit-transform
:
translateY
(
-50%
)
rotate
(
180deg
);
.reveal
.controls
.navigate-right
.pagination-arrow
{
transform
:
translateY
(
-50%
)
rotate
(
180deg
);
}
-webkit-transform
:
translateY
(
-50%
)
rotate
(
180deg
);
transform
:
translateY
(
-50%
)
rotate
(
180deg
);
}
.reveal
.controls
.navigate-right.bounce
{
-webkit-animation
:
bounce-right
2s
50
both
ease-out
;
animation
:
bounce-right
2s
50
both
ease-out
;
}
.reveal
.controls
.navigate-up
{
.reveal
.controls
.navigate-up
{
right
:
18px
;
right
:
18px
;
bottom
:
82px
;
bottom
:
82px
;
}
-webkit-transform
:
translateX
(
-50%
)
rotate
(
90deg
);
.reveal
.controls
.navigate-up
.pagination-arrow
{
transform
:
translateX
(
-50%
)
rotate
(
90deg
);
}
-webkit-transform
:
translateX
(
-50%
)
rotate
(
90deg
);
transform
:
translateX
(
-50%
)
rotate
(
90deg
);
}
.reveal
.controls
.navigate-down
{
.reveal
.controls
.navigate-down
{
right
:
18px
;
right
:
18px
;
bottom
:
0
;
bottom
:
0
;
}
-webkit-transform
:
translateX
(
-50%
)
rotate
(
-90deg
);
.reveal
.controls
.navigate-down
.pagination-arrow
{
transform
:
translateX
(
-50%
)
rotate
(
-90deg
);
}
-webkit-transform
:
translateX
(
-50%
)
rotate
(
-90deg
);
transform
:
translateX
(
-50%
)
rotate
(
-90deg
);
}
.reveal
.controls
.navigate-down.bounce
{
-webkit-animation
:
bounce-down
2s
50
both
ease-out
;
animation
:
bounce-down
2s
50
both
ease-out
;
}
.reveal
.controls
[
data-controls-back-arrows
=
"faded"
]
.navigate-left.enabled
,
.reveal
.controls
[
data-controls-back-arrows
=
"faded"
]
.navigate-left.enabled
,
.reveal
.controls
[
data-controls-back-arrows
=
"faded"
]
.navigate-up.enabled
{
.reveal
.controls
[
data-controls-back-arrows
=
"faded"
]
.navigate-up.enabled
{
opacity
:
0.3
;
}
opacity
:
0.3
;
}
...
@@ -321,12 +376,12 @@ body {
...
@@ -321,12 +376,12 @@ body {
.reveal
:not
(
.has-horizontal-slides
)
.controls
.navigate-down
{
.reveal
:not
(
.has-horizontal-slides
)
.controls
.navigate-down
{
right
:
0
;
}
right
:
0
;
}
.reveal.has-dark-background
.controls
button
:after
,
.reveal.has-dark-background
.controls
.pagination-arrow
:after
,
.reveal.has-dark-background
.controls
button
:before
{
.reveal.has-dark-background
.controls
.pagination-arrow
:before
{
background-color
:
#fff
;
}
background-color
:
#fff
;
}
.reveal.has-light-background
.controls
button
:after
,
.reveal.has-light-background
.controls
.pagination-arrow
:after
,
.reveal.has-light-background
.controls
button
:before
{
.reveal.has-light-background
.controls
.pagination-arrow
:before
{
background-color
:
#000
;
}
background-color
:
#000
;
}
/*********************************************
/*********************************************
...
...
css/reveal.scss
View file @
617c17be
...
@@ -235,6 +235,18 @@ body {
...
@@ -235,6 +235,18 @@ body {
* CONTROLS
* CONTROLS
*********************************************/
*********************************************/
@keyframes
bounce-right
{
0
%
,
10
%
,
25
%
,
40
%
,
50
%
{
transform
:
translateX
(
0
);}
20
%
{
transform
:
translateX
(
10px
);}
30
%
{
transform
:
translateX
(
-5px
);}
}
@keyframes
bounce-down
{
0
%
,
10
%
,
25
%
,
40
%
,
50
%
{
transform
:
translateY
(
0
);}
20
%
{
transform
:
translateY
(
10px
);}
30
%
{
transform
:
translateY
(
-5px
);}
}
.reveal
.controls
{
.reveal
.controls
{
$size
:
46px
;
$size
:
46px
;
$length
:
floor
(
$size
*
0
.7
);
$length
:
floor
(
$size
*
0
.7
);
...
@@ -268,8 +280,6 @@ body {
...
@@ -268,8 +280,6 @@ body {
button
{
button
{
position
:
absolute
;
position
:
absolute
;
padding
:
0
;
padding
:
0
;
width
:
$size
;
height
:
$size
;
background-color
:
transparent
;
background-color
:
transparent
;
border
:
0
;
border
:
0
;
outline
:
0
;
outline
:
0
;
...
@@ -287,8 +297,8 @@ body {
...
@@ -287,8 +297,8 @@ body {
-webkit-tap-highlight-color
:
rgba
(
0
,
0
,
0
,
0
);
-webkit-tap-highlight-color
:
rgba
(
0
,
0
,
0
,
0
);
}
}
button
:before
,
.pagination-arrow
:before
,
button
:after
{
.pagination-arrow
:after
{
content
:
''
;
content
:
''
;
position
:
absolute
;
position
:
absolute
;
top
:
0
;
top
:
0
;
...
@@ -303,7 +313,11 @@ body {
...
@@ -303,7 +313,11 @@ body {
will-change
:
transform
;
will-change
:
transform
;
}
}
button
{
.pagination-arrow
{
position
:
relative
;
width
:
$size
;
height
:
$size
;
@include
arrowTransform
(
$angle
);
@include
arrowTransform
(
$angle
);
&
:hover
{
&
:hover
{
...
@@ -318,25 +332,45 @@ body {
...
@@ -318,25 +332,45 @@ body {
.navigate-left
{
.navigate-left
{
right
:
$size
+
$innerSpacing
*
2
;
right
:
$size
+
$innerSpacing
*
2
;
bottom
:
$innerSpacing
;
bottom
:
$innerSpacing
;
transform
:
translateY
(
-50%
);
.pagination-arrow
{
transform
:
translateY
(
-50%
);
}
}
}
.navigate-right
{
.navigate-right
{
right
:
0
;
right
:
0
;
bottom
:
$innerSpacing
;
bottom
:
$innerSpacing
;
transform
:
translateY
(
-50%
)
rotate
(
180deg
);
.pagination-arrow
{
transform
:
translateY
(
-50%
)
rotate
(
180deg
);
}
&
.bounce
{
animation
:
bounce-right
2s
50
both
ease-out
;
}
}
}
.navigate-up
{
.navigate-up
{
right
:
$innerSpacing
;
right
:
$innerSpacing
;
bottom
:
$size
+
$innerSpacing
*
2
;
bottom
:
$size
+
$innerSpacing
*
2
;
transform
:
translateX
(
-50%
)
rotate
(
90deg
);
.pagination-arrow
{
transform
:
translateX
(
-50%
)
rotate
(
90deg
);
}
}
}
.navigate-down
{
.navigate-down
{
right
:
$innerSpacing
;
right
:
$innerSpacing
;
bottom
:
0
;
bottom
:
0
;
transform
:
translateX
(
-50%
)
rotate
(
-90deg
);
.pagination-arrow
{
transform
:
translateX
(
-50%
)
rotate
(
-90deg
);
}
&
.bounce
{
animation
:
bounce-down
2s
50
both
ease-out
;
}
}
}
// Back arrow style: "faded":
// Back arrow style: "faded":
...
@@ -432,13 +466,13 @@ body {
...
@@ -432,13 +466,13 @@ body {
right
:
0
;
right
:
0
;
}
}
.reveal.has-dark-background
.controls
button
:after
,
.reveal.has-dark-background
.controls
.pagination-arrow
:after
,
.reveal.has-dark-background
.controls
button
:before
{
.reveal.has-dark-background
.controls
.pagination-arrow
:before
{
background-color
:
#fff
;
background-color
:
#fff
;
}
}
.reveal.has-light-background
.controls
button
:after
,
.reveal.has-light-background
.controls
.pagination-arrow
:after
,
.reveal.has-light-background
.controls
button
:before
{
.reveal.has-light-background
.controls
.pagination-arrow
:before
{
background-color
:
#000
;
background-color
:
#000
;
}
}
...
...
js/reveal.js
View file @
617c17be
...
@@ -52,11 +52,15 @@
...
@@ -52,11 +52,15 @@
// Display controls in the bottom right corner
// Display controls in the bottom right corner
controls
:
true
,
controls
:
true
,
// Hint at where the user can navigate, for example by animating
// the down arrow when we first encounter a vertical slide
controlsHints
:
true
,
// Determines where controls appear, "edges" or "bottom-right"
// Determines where controls appear, "edges" or "bottom-right"
controlsLayout
:
'
bottom-right
'
,
controlsLayout
:
'
bottom-right
'
,
//
Specifies the displa
y rule
s
for backwards navigation arrows;
//
Visibilit
y rule for backwards navigation arrows;
"faded", "hidden"
//
"faded", "hidden"
or "visible"
// or "visible"
controlsBackArrows
:
'
faded
'
,
controlsBackArrows
:
'
faded
'
,
// Display a presentation progress bar
// Display a presentation progress bar
...
@@ -214,6 +218,10 @@
...
@@ -214,6 +218,10 @@
previousBackground
,
previousBackground
,
// Remember which directions that the user has navigated towards
hasNavigatedRight
=
false
,
hasNavigatedDown
=
false
,
// Slides may hold a data-state attribute which we pick up and apply
// Slides may hold a data-state attribute which we pick up and apply
// as a class to the body. This list contains the combined state of
// as a class to the body. This list contains the combined state of
// all current slides.
// all current slides.
...
@@ -524,10 +532,10 @@
...
@@ -524,10 +532,10 @@
// Arrow controls
// Arrow controls
dom
.
controls
=
createSingletonNode
(
dom
.
wrapper
,
'
aside
'
,
'
controls
'
,
dom
.
controls
=
createSingletonNode
(
dom
.
wrapper
,
'
aside
'
,
'
controls
'
,
'
<button class="navigate-left" aria-label="previous slide"></button>
'
+
'
<button class="navigate-left" aria-label="previous slide"><
div class="pagination-arrow"></div><
/button>
'
+
'
<button class="navigate-right" aria-label="next slide"></button>
'
+
'
<button class="navigate-right" aria-label="next slide"><
div class="pagination-arrow"></div><
/button>
'
+
'
<button class="navigate-up" aria-label="above slide"></button>
'
+
'
<button class="navigate-up" aria-label="above slide"><
div class="pagination-arrow"></div><
/button>
'
+
'
<button class="navigate-down" aria-label="below slide"></button>
'
);
'
<button class="navigate-down" aria-label="below slide"><
div class="pagination-arrow"></div><
/button>
'
);
// Slide number
// Slide number
dom
.
slideNumber
=
createSingletonNode
(
dom
.
wrapper
,
'
div
'
,
'
slide-number
'
,
''
);
dom
.
slideNumber
=
createSingletonNode
(
dom
.
wrapper
,
'
div
'
,
'
slide-number
'
,
''
);
...
@@ -550,6 +558,10 @@
...
@@ -550,6 +558,10 @@
dom
.
controlsPrev
=
toArray
(
document
.
querySelectorAll
(
'
.navigate-prev
'
)
);
dom
.
controlsPrev
=
toArray
(
document
.
querySelectorAll
(
'
.navigate-prev
'
)
);
dom
.
controlsNext
=
toArray
(
document
.
querySelectorAll
(
'
.navigate-next
'
)
);
dom
.
controlsNext
=
toArray
(
document
.
querySelectorAll
(
'
.navigate-next
'
)
);
// The right and down arrows in the standard reveal.js controls
dom
.
controlsRightArrow
=
dom
.
controls
.
querySelector
(
'
.navigate-right
'
);
dom
.
controlsDownArrow
=
dom
.
controls
.
querySelector
(
'
.navigate-down
'
);
dom
.
statusDiv
=
createStatusDiv
();
dom
.
statusDiv
=
createStatusDiv
();
}
}
...
@@ -2905,6 +2917,26 @@
...
@@ -2905,6 +2917,26 @@
}
}
if
(
config
.
controlsHints
)
{
// Highlight control arrows with an animation to ensure
// that the viewer knows how to navigate
if
(
!
hasNavigatedDown
&&
routes
.
down
)
{
dom
.
controlsDownArrow
.
classList
.
add
(
'
highlight
'
);
}
else
{
dom
.
controlsDownArrow
.
classList
.
remove
(
'
highlight
'
);
if
(
!
hasNavigatedRight
&&
routes
.
right
&&
indexh
===
0
)
{
dom
.
controlsRightArrow
.
classList
.
add
(
'
highlight
'
);
}
else
{
dom
.
controlsRightArrow
.
classList
.
remove
(
'
highlight
'
);
}
}
}
}
}
/**
/**
...
@@ -4157,6 +4189,8 @@
...
@@ -4157,6 +4189,8 @@
function
navigateRight
()
{
function
navigateRight
()
{
hasNavigatedRight
=
true
;
// Reverse for RTL
// Reverse for RTL
if
(
config
.
rtl
)
{
if
(
config
.
rtl
)
{
if
(
(
isOverview
()
||
previousFragment
()
===
false
)
&&
availableRoutes
().
right
)
{
if
(
(
isOverview
()
||
previousFragment
()
===
false
)
&&
availableRoutes
().
right
)
{
...
@@ -4181,6 +4215,8 @@
...
@@ -4181,6 +4215,8 @@
function
navigateDown
()
{
function
navigateDown
()
{
hasNavigatedDown
=
true
;
// Prioritize revealing fragments
// Prioritize revealing fragments
if
(
(
isOverview
()
||
nextFragment
()
===
false
)
&&
availableRoutes
().
down
)
{
if
(
(
isOverview
()
||
nextFragment
()
===
false
)
&&
availableRoutes
().
down
)
{
slide
(
indexh
,
indexv
+
1
);
slide
(
indexh
,
indexv
+
1
);
...
@@ -4227,6 +4263,9 @@
...
@@ -4227,6 +4263,9 @@
*/
*/
function
navigateNext
()
{
function
navigateNext
()
{
hasNavigatedRight
=
true
;
hasNavigatedDown
=
true
;
// Prioritize revealing fragments
// Prioritize revealing fragments
if
(
nextFragment
()
===
false
)
{
if
(
nextFragment
()
===
false
)
{
if
(
availableRoutes
().
down
)
{
if
(
availableRoutes
().
down
)
{
...
...
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment