aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--css/reveal.css17
-rw-r--r--css/reveal.scss14
-rw-r--r--js/reveal.js99
3 files changed, 87 insertions, 43 deletions
diff --git a/css/reveal.css b/css/reveal.css
index 35a048f..b198486 100644
--- a/css/reveal.css
+++ b/css/reveal.css
@@ -639,9 +639,10 @@ body {
opacity: 1 !important;
visibility: visible !important;
cursor: pointer;
- background: rgba(0, 0, 0, 0.1);
-moz-box-sizing: border-box;
- box-sizing: border-box; }
+ box-sizing: border-box;
+ outline: 10px solid rgba(150, 150, 150, 0.1);
+ outline-offset: 10px; }
.reveal.overview .slides section, .reveal.overview-deactivating .slides section {
-webkit-transition: none !important;
@@ -657,16 +658,14 @@ body {
opacity: 1;
cursor: pointer; }
-.reveal.overview .slides section:hover {
- background: rgba(0, 0, 0, 0.3); }
-
-.reveal.overview .slides section.present {
- background: rgba(0, 0, 0, 0.3); }
+.reveal.overview .slides section:hover, .reveal.overview .slides section.present {
+ outline: 10px solid rgba(150, 150, 150, 0.5); }
.reveal.overview .slides > section.stack {
padding: 0;
top: 0 !important;
background: none;
+ outline: none;
overflow: visible; }
.reveal.overview .backgrounds {
@@ -681,6 +680,10 @@ body {
-webkit-transition: none !important;
transition: none !important; }
+.reveal.overview-animated .slides {
+ -webkit-transition: -webkit-transform 0.4s ease;
+ transition: transform 0.4s ease; }
+
/*********************************************
* PAUSED MODE
*********************************************/
diff --git a/css/reveal.scss b/css/reveal.scss
index a1c14a1..02587fb 100644
--- a/css/reveal.scss
+++ b/css/reveal.scss
@@ -753,8 +753,9 @@ body {
opacity: 1 !important;
visibility: visible !important;
cursor: pointer;
- background: rgba(0,0,0,0.1);
box-sizing: border-box;
+ outline: 10px solid rgba(150,150,150,0.1);
+ outline-offset: 10px;
}
.reveal.overview .slides section,
.reveal.overview-deactivating .slides section {
@@ -771,16 +772,15 @@ body {
opacity: 1;
cursor: pointer;
}
- .reveal.overview .slides section:hover {
- background: rgba(0,0,0,0.3);
- }
+ .reveal.overview .slides section:hover,
.reveal.overview .slides section.present {
- background: rgba(0,0,0,0.3);
+ outline: 10px solid rgba(150,150,150,0.5);
}
.reveal.overview .slides>section.stack {
padding: 0;
top: 0 !important;
background: none;
+ outline: none;
overflow: visible;
}
@@ -796,6 +796,10 @@ body {
transition: none !important;
}
+.reveal.overview-animated .slides {
+ transition: transform 0.4s ease;
+}
+
/*********************************************
* PAUSED MODE
diff --git a/js/reveal.js b/js/reveal.js
index 9634c6b..74fcf5f 100644
--- a/js/reveal.js
+++ b/js/reveal.js
@@ -147,6 +147,9 @@
// Flags if reveal.js is loaded (has dispatched the 'ready' event)
loaded = false,
+ // Flags if the overview mode is currently active
+ overview = false,
+
// The horizontal and vertical index of the currently active slide
indexh,
indexv,
@@ -165,8 +168,9 @@
// The current scale of the presentation (see width/height config)
scale = 1,
- // The current z position of the presentation container
- z = 0,
+ // The transform that is currently applied to the slides container
+ slidesTransform = '',
+ layoutTransform = '',
// Cached references to DOM elements
dom = {},
@@ -1058,6 +1062,12 @@
}
+ function transformSlides() {
+
+ transformElement( dom.slides, layoutTransform ? layoutTransform + ' ' + slidesTransform : slidesTransform );
+
+ }
+
/**
* Injects the given CSS styles into the DOM.
*/
@@ -1446,7 +1456,6 @@
var size = getComputedSlideSize();
var slidePadding = 20; // TODO Dig this out of DOM
- var zTransform = z !== 0 ? 'translateZ(-'+ z +'px)' : '';
// Layout the contents of the slides
layoutSlideContents( config.width, config.height, slidePadding );
@@ -1468,13 +1477,12 @@
dom.slides.style.top = '';
dom.slides.style.bottom = '';
dom.slides.style.right = '';
- transformElement( dom.slides, zTransform );
+ layoutTransform = '';
}
else {
// Prefer zooming in desktop Chrome so that content remains crisp
if( !isMobileDevice && /chrome/i.test( navigator.userAgent ) && typeof dom.slides.style.zoom !== 'undefined' ) {
dom.slides.style.zoom = scale;
- transformElement( dom.slides, zTransform );
}
// Apply scale transform as a fallback
else {
@@ -1482,10 +1490,12 @@
dom.slides.style.top = '50%';
dom.slides.style.bottom = 'auto';
dom.slides.style.right = 'auto';
- transformElement( dom.slides, 'translate(-50%, -50%) scale('+ scale +') ' + zTransform );
+ layoutTransform = 'translate(-50%, -50%) scale('+ scale +')';
}
}
+ transformSlides();
+
// Select all slides, vertical and horizontal
var slides = toArray( dom.wrapper.querySelectorAll( SLIDES_SELECTOR ) );
@@ -1633,21 +1643,24 @@
function activateOverview() {
// Only proceed if enabled in config
- if( config.overview ) {
-
- // Don't auto-slide while in overview mode
- cancelAutoSlide();
-
- var wasActive = dom.wrapper.classList.contains( 'overview' );
+ if( config.overview && !isOverview() ) {
- // Set the depth of the presentation. This determinse how far we
- // zoom out and varies based on display size. It gets applied at
- // the layout step.
- z = window.innerWidth < 400 ? 1000 : 2500;
+ overview = true;
dom.wrapper.classList.add( 'overview' );
dom.wrapper.classList.remove( 'overview-deactivating' );
+ setTimeout( function() {
+ dom.wrapper.classList.add( 'overview-animated' );
+ }, 1 );
+
+ // Don't auto-slide while in overview mode
+ cancelAutoSlide();
+
+ var margin = 70;
+ var slideWidth = config.width + margin,
+ slideHeight = config.height + margin;
+
// Move the backgrounds element into the slide container to
// that the same scaling is applied
dom.slides.appendChild( dom.background );
@@ -1658,9 +1671,9 @@
for( var i = 0, len1 = horizontalSlides.length; i < len1; i++ ) {
var hslide = horizontalSlides[i],
hbackground = horizontalBackgrounds[i],
- hoffset = config.rtl ? -105 : 105;
+ hoffset = config.rtl ? -slideWidth : slideWidth;
- var htransform = 'translate(' + ( ( i - indexh ) * hoffset ) + '%, 0%)';
+ var htransform = 'translateX(' + ( i * hoffset ) + 'px)';
hslide.setAttribute( 'data-index-h', i );
@@ -1679,7 +1692,7 @@
var vslide = verticalSlides[j],
vbackground = verticalBackgrounds[j];
- var vtransform = 'translate(0%, ' + ( ( j - verticalIndex ) * 105 ) + '%)';
+ var vtransform = 'translateY(' + ( j * slideHeight ) + 'px)';
vslide.setAttribute( 'data-index-h', i );
vslide.setAttribute( 'data-index-v', j );
@@ -1702,22 +1715,38 @@
}
updateSlidesVisibility();
+ updateOverview();
layout();
- if( !wasActive ) {
- // Notify observers of the overview showing
- dispatchEvent( 'overviewshown', {
- 'indexh': indexh,
- 'indexv': indexv,
- 'currentSlide': currentSlide
- } );
- }
+ // Notify observers of the overview showing
+ dispatchEvent( 'overviewshown', {
+ 'indexh': indexh,
+ 'indexv': indexv,
+ 'currentSlide': currentSlide
+ } );
}
}
+ function updateOverview() {
+
+ var z = window.innerWidth < 400 ? 1000 : 2500;
+ var margin = 70;
+ var slideWidth = config.width + margin,
+ slideHeight = config.height + margin;
+
+ slidesTransform = [
+ 'translateX('+ ( -indexh * slideWidth ) +'px)',
+ 'translateY('+ ( -indexv * slideHeight ) +'px)',
+ 'translateZ('+ ( -z ) +'px)'
+ ].join( ' ' );
+
+ transformSlides();
+
+ }
+
/**
* Exits the slide overview and enters the currently
* active slide.
@@ -1727,11 +1756,17 @@
// Only proceed if enabled in config
if( config.overview ) {
+ slidesTransform = '';
+
+ overview = false;
+
dom.wrapper.classList.remove( 'overview' );
// Move the background element back out
dom.wrapper.appendChild( dom.background );
+ dom.wrapper.classList.remove( 'overview-animated' );
+
// Temporarily add a class so that transitions can do different things
// depending on whether they are exiting/entering overview, or just
// moving from slide to slide
@@ -1755,6 +1790,8 @@
slide( indexh, indexv );
+ layout();
+
cueAutoSlide();
// Notify observers of the overview hiding
@@ -1793,7 +1830,7 @@
*/
function isOverview() {
- return dom.wrapper.classList.contains( 'overview' );
+ return overview;
}
@@ -1995,7 +2032,7 @@
// If the overview is active, re-activate it to update positions
if( isOverview() ) {
- activateOverview();
+ updateOverview();
}
// Find the current horizontal slide and any possible vertical slides
@@ -2289,11 +2326,11 @@
// The number of steps away from the present slide that will
// be visible
- var viewDistance = isOverview() ? 10 : config.viewDistance;
+ var viewDistance = isOverview() ? 7 : config.viewDistance;
// Limit view distance on weaker devices
if( isMobileDevice ) {
- viewDistance = isOverview() ? 6 : 2;
+ viewDistance = isOverview() ? 7 : 2;
}
// Limit view distance on weaker devices
generated by cgit v1.2.3 (git 2.45.0) at 2024-11-29 11:45:13 +0000