aboutsummaryrefslogtreecommitdiff
path: root/plugin
diff options
context:
space:
mode:
authorHakim El Hattab <hakim.elhattab@gmail.com>2016-09-21 13:54:42 +0200
committerHakim El Hattab <hakim.elhattab@gmail.com>2016-09-21 13:54:42 +0200
commitda5709919b78d1d75a712c6ba6f4520bee3a0be6 (patch)
treebf81c5a77e0932a3391bcac9ccaf1e35edbb3f09 /plugin
parent79728e25cd6c98193d8e6247e73a2a65a62ce04e (diff)
downloadperl-software-in-gnu-guix-da5709919b78d1d75a712c6ba6f4520bee3a0be6.tar
perl-software-in-gnu-guix-da5709919b78d1d75a712c6ba6f4520bee3a0be6.tar.gz
layout selector for speaker view; includes four options
Diffstat (limited to 'plugin')
-rw-r--r--plugin/notes/notes.html222
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 );