From 11293d7c9415862007dbc1e3936b0fcbf4626da1 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Mon, 26 Jan 2015 20:38:21 +0100 Subject: refactoring and optimization of overview mode --- css/reveal.css | 17 ++++++++++------- css/reveal.scss | 14 +++++++++----- 2 files changed, 19 insertions(+), 12 deletions(-) (limited to 'css') 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 -- cgit v1.2.3 From e29c706533c227682cfde1ac0b187e90738b9bbc Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Tue, 27 Jan 2015 09:21:49 +0100 Subject: further overview refactoring --- css/reveal.css | 10 ++--- css/reveal.scss | 7 ++-- js/reveal.js | 121 +++++++++++++++++++++++++++++++------------------------- 3 files changed, 77 insertions(+), 61 deletions(-) (limited to 'css') diff --git a/css/reveal.css b/css/reveal.css index b198486..69b7cf9 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -645,8 +645,8 @@ body { outline-offset: 10px; } .reveal.overview .slides section, .reveal.overview-deactivating .slides section { - -webkit-transition: none !important; - transition: none !important; } + -webkit-transition: none; + transition: none; } .reveal.overview .slides section .fragment { opacity: 1; } @@ -677,10 +677,10 @@ body { visibility: visible; } .reveal.overview .backgrounds .slide-background, .reveal.overview-deactivating .backgrounds .slide-background { - -webkit-transition: none !important; - transition: none !important; } + -webkit-transition: none; + transition: none; } -.reveal.overview-animated .slides { +.reveal.overview-animated .slides, .reveal.overview-animated .slides section { -webkit-transition: -webkit-transform 0.4s ease; transition: transform 0.4s ease; } diff --git a/css/reveal.scss b/css/reveal.scss index 02587fb..b3f3bdc 100644 --- a/css/reveal.scss +++ b/css/reveal.scss @@ -759,7 +759,7 @@ body { } .reveal.overview .slides section, .reveal.overview-deactivating .slides section { - transition: none !important; + transition: none; } .reveal.overview .slides section .fragment { opacity: 1; @@ -793,10 +793,11 @@ body { } .reveal.overview .backgrounds .slide-background, .reveal.overview-deactivating .backgrounds .slide-background { - transition: none !important; + transition: none; } -.reveal.overview-animated .slides { +.reveal.overview-animated .slides, +.reveal.overview-animated .slides section { transition: transform 0.4s ease; } diff --git a/js/reveal.js b/js/reveal.js index 74fcf5f..ddbe800 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -1636,9 +1636,6 @@ /** * Displays the overview of slides (quick nav) by * scaling down and arranging all slide elements. - * - * Experimental feature, might be dropped if perf - * can't be improved. */ function activateOverview() { @@ -1657,64 +1654,32 @@ // 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 ); - var horizontalSlides = dom.wrapper.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ), - horizontalBackgrounds = dom.background.childNodes; - - for( var i = 0, len1 = horizontalSlides.length; i < len1; i++ ) { - var hslide = horizontalSlides[i], - hbackground = horizontalBackgrounds[i], - hoffset = config.rtl ? -slideWidth : slideWidth; + // Bind events so that clicking on a slide navigates to it + toArray( dom.wrapper.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ) ).forEach( function( hslide, h ) { - var htransform = 'translateX(' + ( i * hoffset ) + 'px)'; - - hslide.setAttribute( 'data-index-h', i ); - - // Apply CSS transform - transformElement( hslide, htransform ); - transformElement( hbackground, htransform ); + hslide.setAttribute( 'data-index-h', h ); if( hslide.classList.contains( 'stack' ) ) { + toArray( hslide.querySelectorAll( 'section' ) ).forEach( function( vslide, v ) { - var verticalSlides = hslide.querySelectorAll( 'section' ), - verticalBackgrounds = hbackground.querySelectorAll( '.slide-background' ); - - for( var j = 0, len2 = verticalSlides.length; j < len2; j++ ) { - var verticalIndex = i === indexh ? indexv : getPreviousVerticalIndex( hslide ); - - var vslide = verticalSlides[j], - vbackground = verticalBackgrounds[j]; - - var vtransform = 'translateY(' + ( j * slideHeight ) + 'px)'; - - vslide.setAttribute( 'data-index-h', i ); - vslide.setAttribute( 'data-index-v', j ); - - // Apply CSS transform - transformElement( vslide, vtransform ); - transformElement( vbackground, vtransform ); - - // Navigate to this slide on click + vslide.setAttribute( 'data-index-h', h ); + vslide.setAttribute( 'data-index-v', v ); vslide.addEventListener( 'click', onOverviewSlideClicked, true ); - } + } ); } else { - - // Navigate to this slide on click hslide.addEventListener( 'click', onOverviewSlideClicked, true ); - } - } + + } ); updateSlidesVisibility(); + layoutOverview(); updateOverview(); layout(); @@ -1730,17 +1695,64 @@ } + /** + * Moves the slides into a grid for display in the + * overview mode. + */ + function layoutOverview() { + + var margin = 70; + var slideWidth = config.width + margin, + slideHeight = config.height + margin; + + // Reverse in RTL mode + if( config.rtl ) { + slideWidth = -slideWidth; + } + + // Layout slides + toArray( dom.wrapper.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ) ).forEach( function( hslide, h ) { + transformElement( hslide, 'translateX(' + ( h * slideWidth ) + 'px)' ); + + if( hslide.classList.contains( 'stack' ) ) { + + toArray( hslide.querySelectorAll( 'section' ) ).forEach( function( vslide, v ) { + transformElement( vslide, 'translateY(' + ( v * slideHeight ) + 'px)' ); + } ); + + } + } ); + + // Layout slide backgrounds + toArray( dom.background.childNodes ).forEach( function( hbackground, h ) { + transformElement( hbackground, 'translateX(' + ( h * slideWidth ) + 'px)' ); + + toArray( hbackground.querySelectorAll( '.slide-background' ) ).forEach( function( vbackground, v ) { + transformElement( vbackground, 'translateY(' + ( v * slideHeight ) + 'px)' ); + } ); + } ); + + } + + /** + * Moves the overview viewport to the current slides. + * Called each time the current slide changes. + */ function updateOverview() { - var z = window.innerWidth < 400 ? 1000 : 2500; var margin = 70; var slideWidth = config.width + margin, slideHeight = config.height + margin; + // Reverse in RTL mode + if( config.rtl ) { + slideWidth = -slideWidth; + } + slidesTransform = [ 'translateX('+ ( -indexh * slideWidth ) +'px)', 'translateY('+ ( -indexv * slideHeight ) +'px)', - 'translateZ('+ ( -z ) +'px)' + 'translateZ('+ ( window.innerWidth < 400 ? -1000 : -2500 ) +'px)' ].join( ' ' ); transformSlides(); @@ -1761,10 +1773,6 @@ 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 @@ -1776,6 +1784,9 @@ dom.wrapper.classList.remove( 'overview-deactivating' ); }, 1 ); + // Move the background element back out + dom.wrapper.appendChild( dom.background ); + // Clean up changes made to slides toArray( dom.wrapper.querySelectorAll( SLIDES_SELECTOR ) ).forEach( function( slide ) { transformElement( slide, '' ); @@ -2145,6 +2156,10 @@ formatEmbeddedContent(); + if( isOverview() ) { + layoutOverview(); + } + } /** @@ -2326,11 +2341,11 @@ // The number of steps away from the present slide that will // be visible - var viewDistance = isOverview() ? 7 : config.viewDistance; + var viewDistance = isOverview() ? 10 : config.viewDistance; // Limit view distance on weaker devices if( isMobileDevice ) { - viewDistance = isOverview() ? 7 : 2; + viewDistance = isOverview() ? 6 : 2; } // Limit view distance on weaker devices -- cgit v1.2.3 From c8569e2d9ff675b806e5d5bf94ba1a07d121e74b Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Tue, 27 Jan 2015 19:27:55 +0100 Subject: cross browser adjustments for overview mode --- css/reveal.css | 112 ++++++++++++++++++++++------------------------- css/reveal.scss | 133 +++++++++++++++++++++++++++++--------------------------- js/reveal.js | 22 ++++++---- 3 files changed, 136 insertions(+), 131 deletions(-) (limited to 'css') diff --git a/css/reveal.css b/css/reveal.css index 69b7cf9..2e18ade 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -624,66 +624,6 @@ body { -webkit-transition: none; transition: none; } -/********************************************* - * OVERVIEW - *********************************************/ -.reveal.overview { - -webkit-perspective-origin: 50% 50%; - perspective-origin: 50% 50%; - -webkit-perspective: 700px; - perspective: 700px; } - -.reveal.overview .slides section { - height: 700px; - overflow: hidden; - opacity: 1 !important; - visibility: visible !important; - cursor: pointer; - -moz-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; - transition: none; } - -.reveal.overview .slides section .fragment { - opacity: 1; } - -.reveal.overview .slides section:after, .reveal.overview .slides section:before { - display: none !important; } - -.reveal.overview .slides section > section { - opacity: 1; - cursor: pointer; } - -.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 { - -webkit-perspective: inherit; - perspective: inherit; } - -.reveal.overview .backgrounds .slide-background { - opacity: 1; - visibility: visible; } - -.reveal.overview .backgrounds .slide-background, .reveal.overview-deactivating .backgrounds .slide-background { - -webkit-transition: none; - transition: none; } - -.reveal.overview-animated .slides, .reveal.overview-animated .slides section { - -webkit-transition: -webkit-transform 0.4s ease; - transition: transform 0.4s ease; } - /********************************************* * PAUSED MODE *********************************************/ @@ -904,6 +844,58 @@ body { -webkit-transition-duration: 1200ms; transition-duration: 1200ms; } +/********************************************* + * OVERVIEW + *********************************************/ +.reveal.overview { + -webkit-perspective-origin: 50% 50%; + perspective-origin: 50% 50%; + -webkit-perspective: 700px; + perspective: 700px; } + .reveal.overview .slides section { + height: 700px; + opacity: 1 !important; + overflow: hidden; + visibility: visible !important; + cursor: pointer; + -moz-box-sizing: border-box; + box-sizing: border-box; } + .reveal.overview .slides section:hover, .reveal.overview .slides section.present { + outline: 10px solid rgba(150, 150, 150, 0.4); + outline-offset: 10px; } + .reveal.overview .slides section .fragment { + opacity: 1; + -webkit-transition: none; + transition: none; } + .reveal.overview .slides section:after, .reveal.overview .slides section:before { + display: none !important; } + .reveal.overview .slides > section.stack { + padding: 0; + top: 0 !important; + background: none; + outline: none; + overflow: visible; } + .reveal.overview .backgrounds { + -webkit-perspective: inherit; + perspective: inherit; } + .reveal.overview .backgrounds .slide-background { + opacity: 1; + visibility: visible; + outline: 10px solid rgba(150, 150, 150, 0.1); + outline-offset: 10px; } + +.reveal.overview .slides section, .reveal.overview-deactivating .slides section { + -webkit-transition: none; + transition: none; } + +.reveal.overview .backgrounds .slide-background, .reveal.overview-deactivating .backgrounds .slide-background { + -webkit-transition: none; + transition: none; } + +.reveal.overview-animated .slides, .reveal.overview-animated .slides section, .reveal.overview-animated .backgrounds .slide-background { + -webkit-transition: -webkit-transform 0.4s ease; + transition: transform 0.4s ease; } + /********************************************* * RTL SUPPORT *********************************************/ diff --git a/css/reveal.scss b/css/reveal.scss index b3f3bdc..70fe2c1 100644 --- a/css/reveal.scss +++ b/css/reveal.scss @@ -739,69 +739,6 @@ body { } -/********************************************* - * OVERVIEW - *********************************************/ - -.reveal.overview { - perspective-origin: 50% 50%; - perspective: 700px; -} -.reveal.overview .slides section { - height: 700px; - overflow: hidden; - opacity: 1 !important; - visibility: visible !important; - cursor: pointer; - 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 { - transition: none; -} -.reveal.overview .slides section .fragment { - opacity: 1; -} -.reveal.overview .slides section:after, -.reveal.overview .slides section:before { - display: none !important; -} -.reveal.overview .slides section>section { - opacity: 1; - cursor: pointer; -} - .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 { - perspective: inherit; -} -.reveal.overview .backgrounds .slide-background { - opacity: 1; - visibility: visible; -} -.reveal.overview .backgrounds .slide-background, -.reveal.overview-deactivating .backgrounds .slide-background { - transition: none; -} - -.reveal.overview-animated .slides, -.reveal.overview-animated .slides section { - transition: transform 0.4s ease; -} - - /********************************************* * PAUSED MODE *********************************************/ @@ -1042,6 +979,76 @@ body { } +/********************************************* + * OVERVIEW + *********************************************/ + +.reveal.overview { + perspective-origin: 50% 50%; + perspective: 700px; + + .slides section { + height: 700px; + opacity: 1 !important; + overflow: hidden; + visibility: visible !important; + cursor: pointer; + box-sizing: border-box; + } + .slides section:hover, + .slides section.present { + outline: 10px solid rgba(150,150,150,0.4); + outline-offset: 10px; + } + .slides section .fragment { + opacity: 1; + transition: none; + } + .slides section:after, + .slides section:before { + display: none !important; + } + .slides>section.stack { + padding: 0; + top: 0 !important; + background: none; + outline: none; + overflow: visible; + } + + .backgrounds { + perspective: inherit; + } + + .backgrounds .slide-background { + opacity: 1; + visibility: visible; + + // This can't be applied to the slide itself in Safari + outline: 10px solid rgba(150,150,150,0.1); + outline-offset: 10px; + } +} + +// Disable transitions transitions while we're activating +// or deactivating the overview mode. +.reveal.overview .slides section, +.reveal.overview-deactivating .slides section { + transition: none; +} + +.reveal.overview .backgrounds .slide-background, +.reveal.overview-deactivating .backgrounds .slide-background { + transition: none; +} + +.reveal.overview-animated .slides, +.reveal.overview-animated .slides section, +.reveal.overview-animated .backgrounds .slide-background { + transition: transform 0.4s ease; +} + + /********************************************* * RTL SUPPORT *********************************************/ diff --git a/js/reveal.js b/js/reveal.js index ddbe800..37c6831 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -300,7 +300,11 @@ features.touch = !!( 'ontouchstart' in window ); - isMobileDevice = navigator.userAgent.match( /(iphone|ipod|ipad|android)/gi ); + // Transitions in the overview are disabled in desktop and + // mobile Safari since they lag terribly + features.overviewTransitions = !/Version\/[\d\.]+.*Safari/.test( navigator.userAgent ); + + isMobileDevice = /(iphone|ipod|ipad|android)/gi.test( navigator.userAgent ); } @@ -1647,9 +1651,11 @@ dom.wrapper.classList.add( 'overview' ); dom.wrapper.classList.remove( 'overview-deactivating' ); - setTimeout( function() { - dom.wrapper.classList.add( 'overview-animated' ); - }, 1 ); + if( features.overviewTransitions ) { + setTimeout( function() { + dom.wrapper.classList.add( 'overview-animated' ); + }, 1 ); + } // Don't auto-slide while in overview mode cancelAutoSlide(); @@ -1712,12 +1718,12 @@ // Layout slides toArray( dom.wrapper.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ) ).forEach( function( hslide, h ) { - transformElement( hslide, 'translateX(' + ( h * slideWidth ) + 'px)' ); + transformElement( hslide, 'translate3d(' + ( h * slideWidth ) + 'px, 0, 0)' ); if( hslide.classList.contains( 'stack' ) ) { toArray( hslide.querySelectorAll( 'section' ) ).forEach( function( vslide, v ) { - transformElement( vslide, 'translateY(' + ( v * slideHeight ) + 'px)' ); + transformElement( vslide, 'translate3d(0, ' + ( v * slideHeight ) + 'px, 0)' ); } ); } @@ -1725,10 +1731,10 @@ // Layout slide backgrounds toArray( dom.background.childNodes ).forEach( function( hbackground, h ) { - transformElement( hbackground, 'translateX(' + ( h * slideWidth ) + 'px)' ); + transformElement( hbackground, 'translate3d(' + ( h * slideWidth ) + 'px, 0, 0)' ); toArray( hbackground.querySelectorAll( '.slide-background' ) ).forEach( function( vbackground, v ) { - transformElement( vbackground, 'translateY(' + ( v * slideHeight ) + 'px)' ); + transformElement( vbackground, 'translate3d(0, ' + ( v * slideHeight ) + 'px, 0)' ); } ); } ); -- cgit v1.2.3