diff options
Diffstat (limited to 'plugin')
| -rw-r--r-- | plugin/notes/notes.html | 222 |
1 files changed, 207 insertions, 15 deletions
diff --git a/plugin/notes/notes.html b/plugin/notes/notes.html index 53d50c3..145490a 100644 --- a/plugin/notes/notes.html +++ b/plugin/notes/notes.html @@ -8,6 +8,7 @@ <style> body { font-family: Helvetica; + font-size: 18px; } #current-slide, @@ -30,16 +31,27 @@ position: absolute; top: 10px; left: 10px; - font-weight: bold; - font-size: 14px; z-index: 2; - color: rgba( 255, 255, 255, 0.9 ); + } + + .overlay-element { + height: 34px; + line-height: 34px; + padding: 0 10px; + text-shadow: none; + background: rgba( 220, 220, 220, 0.8 ); + color: #222; + font-size: 14px; + } + + .overlay-element.interactive:hover { + background: rgba( 220, 220, 220, 1 ); } #current-slide { position: absolute; - width: 50%; - height: 50%; + width: 60%; + height: 100%; top: 0; left: 0; padding-right: 0; @@ -47,18 +59,19 @@ #upcoming-slide { position: absolute; - width: 50%; - height: 50%; + width: 40%; + height: 40%; right: 0; top: 0; } + /* Speaker controls */ #speaker-controls { position: absolute; - top: 50%; - left: 0; - width: 100%; - height: 50%; + top: 40%; + right: 0; + width: 40%; + height: 60%; overflow: auto; font-size: 18px; } @@ -124,24 +137,124 @@ font-size: 1.2em; } + /* Layout selector */ + #speaker-layout { + position: absolute; + top: 10px; + right: 10px; + color: #222; + z-index: 10; + } + #speaker-layout select { + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + border: 0; + box-shadow: 0; + cursor: pointer; + opacity: 0; + + font-size: 1em; + background-color: transparent; + + -moz-appearance: none; + -webkit-appearance: none; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + } + + #speaker-layout select:focus { + outline: none; + box-shadow: none; + } + .clear { clear: both; } + /* Speaker layout: Wide */ + body[data-speaker-layout="wide"] #current-slide, + body[data-speaker-layout="wide"] #upcoming-slide { + width: 50%; + height: 45%; + padding: 6px; + } + + body[data-speaker-layout="wide"] #current-slide { + top: 0; + left: 0; + } + + body[data-speaker-layout="wide"] #upcoming-slide { + top: 0; + left: 50%; + } + + body[data-speaker-layout="wide"] #speaker-controls { + top: 45%; + left: 0; + width: 100%; + height: 50%; + font-size: 1.25em; + } + + /* Speaker layout: Tall */ + body[data-speaker-layout="tall"] #current-slide, + body[data-speaker-layout="tall"] #upcoming-slide { + width: 45%; + height: 50%; + padding: 6px; + } + + body[data-speaker-layout="tall"] #current-slide { + top: 0; + left: 0; + } + + body[data-speaker-layout="tall"] #upcoming-slide { + top: 50%; + left: 0; + } + + body[data-speaker-layout="tall"] #speaker-controls { + padding-top: 40px; + top: 0; + left: 45%; + width: 55%; + height: 100%; + font-size: 1.25em; + } + + /* Speaker layout: Notes only */ + body[data-speaker-layout="notes-only"] #current-slide, + body[data-speaker-layout="notes-only"] #upcoming-slide { + display: none; + } + + body[data-speaker-layout="notes-only"] #speaker-controls { + padding-top: 40px; + top: 0; + left: 0; + width: 100%; + height: 100%; + font-size: 1.25em; + } + @media screen and (max-width: 1080px) { - #speaker-controls { + body[data-speaker-layout="default"] #speaker-controls { font-size: 16px; } } @media screen and (max-width: 900px) { - #speaker-controls { + body[data-speaker-layout="default"] #speaker-controls { font-size: 14px; } } @media screen and (max-width: 800px) { - #speaker-controls { + body[data-speaker-layout="default"] #speaker-controls { font-size: 12px; } } @@ -152,7 +265,7 @@ <body> <div id="current-slide"></div> - <div id="upcoming-slide"><span class="label">UPCOMING:</span></div> + <div id="upcoming-slide"><span class="overlay-element label">Upcoming</span></div> <div id="speaker-controls"> <div class="speaker-controls-time"> <h4 class="label">Time <span class="reset-button">Click to Reset</span></h4> @@ -170,6 +283,10 @@ <div class="value"></div> </div> </div> + <div id="speaker-layout" class="overlay-element interactive"> + <span class="speaker-layout-label"></span> + <select class="speaker-layout-dropdown"></select> + </div> <script src="../../plugin/markdown/marked.js"></script> <script> @@ -181,8 +298,19 @@ currentState, currentSlide, upcomingSlide, + layoutLabel, + layoutDropdown, connected = false; + var SPEAKER_LAYOUTS = { + 'default': 'Default', + 'wide': 'Wide', + 'tall': 'Tall', + 'notes-only': 'Notes only' + }; + + setupLayout(); + window.addEventListener( 'message', function( event ) { var data = JSON.parse( event.data ); @@ -368,6 +496,70 @@ } + /** + * Sets up the speaker view layout and layout selector. + */ + function setupLayout() { + + layoutDropdown = document.querySelector( '.speaker-layout-dropdown' ); + layoutLabel = document.querySelector( '.speaker-layout-label' ); + + // Render the list of available layouts + for( var id in SPEAKER_LAYOUTS ) { + var option = document.createElement( 'option' ); + option.setAttribute( 'value', id ); + option.textContent = SPEAKER_LAYOUTS[ id ]; + layoutDropdown.appendChild( option ); + } + + // Monitor the dropdown for changes + layoutDropdown.addEventListener( 'change', function( event ) { + + setLayout( layoutDropdown.value ); + + }, false ); + + // Restore any currently persisted layout + setLayout( getLayout() ); + + } + + /** + * Sets a new speaker view layout. The layout is persisted + * in local storage. + */ + function setLayout( value ) { + + var title = SPEAKER_LAYOUTS[ value ]; + + layoutLabel.innerHTML = 'Layout' + ( title ? ( ': ' + title ) : '' ); + layoutDropdown.value = value; + + document.body.setAttribute( 'data-speaker-layout', value ); + + // Persist locally + if( window.localStorage ) { + window.localStorage.setItem( 'reveal-speaker-layout', value ); + } + + } + + function getLayout() { + + if( window.localStorage ) { + var layout = window.localStorage.getItem( 'reveal-speaker-layout' ); + if( layout ) { + return layout; + } + } + + // Default to the first record in the layouts hash + for( var id in SPEAKER_LAYOUTS ) { + return id; + } + + } + function zeroPadInteger( num ) { var str = '00' + parseInt( num ); |