Commit f22e5f85 authored by Hakim El Hattab's avatar Hakim El Hattab
Browse files

new paused mode feature (closes #144), controls and progress DOM elements are...

new paused mode feature (closes #144), controls and progress DOM elements are no longer required in HTML
parent 84b69b6b
......@@ -410,6 +410,7 @@ body {
margin-top: -320px;
padding: 20px 0px;
overflow: visible;
z-index: 1;
text-align: center;
......@@ -921,6 +922,33 @@ body {
}
/*********************************************
* PAUSED MODE
*********************************************/
.reveal .pause-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
visibility: hidden;
opacity: 0;
z-index: 100;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.reveal.paused .pause-overlay {
visibility: visible;
opacity: 1;
}
/*********************************************
* FALLBACK
*********************************************/
......@@ -945,10 +973,10 @@ body {
/*********************************************
* DEFAULT STATES
* BACKGROUND STATES
*********************************************/
.state-background {
.reveal .state-background {
position: absolute;
width: 100%;
height: 100%;
......@@ -960,13 +988,13 @@ body {
-o-transition: background 800ms ease;
transition: background 800ms ease;
}
.alert .state-background {
.alert .reveal .state-background {
background: rgba( 200, 50, 30, 0.6 );
}
.soothe .state-background {
.soothe .reveal .state-background {
background: rgba( 50, 200, 90, 0.4 );
}
.blackout .state-background {
.blackout .reveal .state-background {
background: rgba( 0, 0, 0, 0.6 );
}
......
......@@ -34,9 +34,6 @@
<div class="reveal">
<!-- Used to fade in a background when a specific slide state is reached -->
<div class="state-background"></div>
<!-- Any section element inside of this container is displayed as a slide -->
<div class="slides">
<section>
......@@ -278,6 +275,14 @@ function linkify( selector ) {
</script>
</section>
<section>
<h2>Take a Moment</h2>
<p>
Press b or period on your keyboard to enter the 'paused' mode. This mode is helpful when you want to take disctracting slides off the screen
during a presentaion.
</p>
</section>
<section>
<h2>Stellar Links</h2>
<ul>
......@@ -310,17 +315,6 @@ function linkify( selector ) {
<h3>BY Hakim El Hattab / hakim.se</h3>
</section>
</div>
<!-- The navigational controls UI -->
<aside class="controls">
<a class="left" href="#">&#x25C4;</a>
<a class="right" href="#">&#x25BA;</a>
<a class="up" href="#">&#x25B2;</a>
<a class="down" href="#">&#x25BC;</a>
</aside>
<!-- Presentation progress bar -->
<div class="progress"><span></span></div>
</div>
......@@ -346,7 +340,7 @@ function linkify( selector ) {
{ src: 'lib/js/showdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'lib/js/data-markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: '/socket.io/socket.io.js', async: true, condition: function() { return window.location.host === 'localhost:1947'; } },
{ src: 'plugin/speakernotes/client.js', async: true, condition: function() { return window.location.host === 'localhost:1947'; } },
{ src: 'plugin/speakernotes/client.js', async: true, condition: function() { return window.location.host === 'localhost:1947'; } }
]
});
......
/*!
* reveal.js 2.1 r28
* reveal.js 2.1 r29
* http://lab.hakim.se/reveal-js
* MIT licensed
*
......@@ -116,9 +116,61 @@ var Reveal = (function(){
// Copy options over to our config object
extend( config, options );
// Cache references to DOM elements
// Make sure we've got all the DOM elements we need
setupDOM();
// Hide the address bar in mobile browsers
hideAddressBar();
// Loads the dependencies and continues to #start() once done
load();
}
/**
* Finds and stores references to DOM elements which are
* required by the presentation. If a required element is
* not found, it is created.
*/
function setupDOM() {
// Cache references to key DOM elements
dom.theme = document.querySelector( '#theme' );
dom.wrapper = document.querySelector( '.reveal' );
// Progress bar
if( !dom.wrapper.querySelector( '.progress' ) && config.progress ) {
var progressElement = document.createElement( 'div' );
progressElement.classList.add( 'progress' );
progressElement.innerHTML = '<span></span>';
dom.wrapper.appendChild( progressElement );
}
// Arrow controls
if( !dom.wrapper.querySelector( '.controls' ) && config.controls ) {
var controlsElement = document.createElement( 'aside' );
controlsElement.classList.add( 'controls' );
controlsElement.innerHTML = '<a class="left" href="#">&#x25C4;</a>' +
'<a class="right" href="#">&#x25BA;</a>' +
'<a class="up" href="#">&#x25B2;</a>' +
'<a class="down" href="#">&#x25BC;</a>';
dom.wrapper.appendChild( controlsElement );
}
// Presentation background element
if( !dom.wrapper.querySelector( '.state-background' ) ) {
var backgroundElement = document.createElement( 'div' );
backgroundElement.classList.add( 'state-background' );
dom.wrapper.appendChild( backgroundElement );
}
// Overlay graphic which is displayed during the paused mode
if( !dom.wrapper.querySelector( '.pause-overlay' ) ) {
var pausedElement = document.createElement( 'div' );
pausedElement.classList.add( 'pause-overlay' );
dom.wrapper.appendChild( pausedElement );
}
// Cache references to elements
dom.progress = document.querySelector( '.reveal .progress' );
dom.progressbar = document.querySelector( '.reveal .progress span' );
......@@ -129,11 +181,12 @@ var Reveal = (function(){
dom.controlsUp = document.querySelector( '.reveal .controls .up' );
dom.controlsDown = document.querySelector( '.reveal .controls .down' );
}
}
// Loads the dependencies and continues to #start() once done
load();
// Set up hiding of the browser address bar
/**
* Hides the address bar if we're on a mobile device.
*/
function hideAddressBar() {
if( navigator.userAgent.match( /(iphone|ipod|android)/i ) ) {
// Give the page some scrollable overflow
document.documentElement.style.overflow = 'scroll';
......@@ -143,7 +196,6 @@ var Reveal = (function(){
window.addEventListener( 'load', removeAddressBar, false );
window.addEventListener( 'orientationchange', removeAddressBar, false );
}
}
/**
......@@ -378,9 +430,11 @@ var Reveal = (function(){
// end
case 35: navigateTo( Number.MAX_VALUE ); break;
// space
case 32: overviewIsActive() ? deactivateOverview() : navigateNext(); break;
case 32: isOverviewActive() ? deactivateOverview() : navigateNext(); break;
// return
case 13: overviewIsActive() ? deactivateOverview() : triggered = false; break;
case 13: isOverviewActive() ? deactivateOverview() : triggered = false; break;
// b, period
case 66: case 190: togglePause(); break;
default:
triggered = false;
}
......@@ -532,7 +586,7 @@ var Reveal = (function(){
function onOverviewSlideClicked( event ) {
// TODO There's a bug here where the event listeners are not
// removed after deactivating the overview.
if( overviewIsActive() ) {
if( isOverviewActive() ) {
event.preventDefault();
deactivateOverview();
......@@ -652,16 +706,66 @@ var Reveal = (function(){
}
}
/**
* Toggles the slide overview mode on and off.
*
* @param {Boolean} override Optional flag which overrides the
* toggle logic and forcibly sets the desired state. True means
* overview is open, false means it's closed.
*/
function toggleOverview( override ) {
if( typeof override === 'boolean' ) {
override ? activateOverview() : deactivateOverview();
}
else {
isOverviewActive() ? deactivateOverview() : activateOverview();
}
}
/**
* Checks if the overview is currently active.
*
* @return {Boolean} true if the overview is active,
* false otherwise
*/
function overviewIsActive() {
function isOverviewActive() {
return dom.wrapper.classList.contains( 'overview' );
}
/**
* Enters the paused mode which fades everything on screen to
* black.
*/
function pause() {
dom.wrapper.classList.add( 'paused' );
}
/**
* Exits from the paused mode.
*/
function resume() {
dom.wrapper.classList.remove( 'paused' );
}
/**
* Toggles the paused mode on and off.
*/
function togglePause() {
if( isPaused() ) {
resume();
}
else {
pause();
}
}
/**
* Checks if we are currently in the paused mode.
*/
function isPaused() {
return dom.wrapper.classList.contains( 'paused' );
}
/**
* Updates one dimension of slides by showing the slide
* with the specified index.
......@@ -701,7 +805,7 @@ var Reveal = (function(){
// Optimization; hide all slides that are three or more steps
// away from the present slide
if( overviewIsActive() === false ) {
if( isOverviewActive() === false ) {
// The distance loops so that it measures 1 between the first
// and last slides
var distance = Math.abs( ( index - i ) % ( slidesLength - 3 ) ) || 0;
......@@ -801,7 +905,7 @@ var Reveal = (function(){
}
// If the overview is active, re-activate it to update positions
if( overviewIsActive() ) {
if( isOverviewActive() ) {
activateOverview();
}
......@@ -1024,28 +1128,28 @@ var Reveal = (function(){
function navigateLeft() {
// Prioritize hiding fragments
if( overviewIsActive() || previousFragment() === false ) {
if( isOverviewActive() || previousFragment() === false ) {
slide( indexh - 1, 0 );
}
}
function navigateRight() {
// Prioritize revealing fragments
if( overviewIsActive() || nextFragment() === false ) {
if( isOverviewActive() || nextFragment() === false ) {
slide( indexh + 1, 0 );
}
}
function navigateUp() {
// Prioritize hiding fragments
if( overviewIsActive() || previousFragment() === false ) {
if( isOverviewActive() || previousFragment() === false ) {
slide( indexh, indexv - 1 );
}
}
function navigateDown() {
// Prioritize revealing fragments
if( overviewIsActive() || nextFragment() === false ) {
if( isOverviewActive() || nextFragment() === false ) {
slide( indexh, indexv + 1 );
}
}
......@@ -1088,22 +1192,6 @@ var Reveal = (function(){
// another timeout
cueAutoSlide();
}
/**
* Toggles the slide overview mode on and off.
*
* @param {Boolean} override Optional flag which overrides the
* toggle logic and forcibly sets the desired state. True means
* overview is open, false means it's closed.
*/
function toggleOverview( override ) {
if( typeof override === 'boolean' ) {
override ? activateOverview() : deactivateOverview();
}
else {
overviewIsActive() ? deactivateOverview() : activateOverview();
}
}
// Expose some methods publicly
return {
......
This diff is collapsed.
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment