Skip to content
Snippets Groups Projects
Commit 3795ef15 authored by Hakim El Hattab's avatar Hakim El Hattab
Browse files

update style of notes plugin to match Slides

parent 5b18c1f3
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
plugin/notes/notes.html
+ 152
− 131
View file @ 3795ef15
...@@ -10,128 +10,129 @@ ...@@ -10,128 +10,129 @@
font-family: Helvetica; font-family: Helvetica;
} }
#notes { #current-slide,
font-size: 24px; #next-slide,
width: 640px; #speaker-controls {
margin-top: 5px; padding: 6px;
clear: left; box-sizing: border-box;
-moz-box-sizing: border-box;
} }
#wrap-current-slide { #current-slide iframe,
width: 640px; #next-slide iframe {
height: 512px; width: 100%;
float: left; height: 100%;
overflow: hidden; border: 1px solid #ddd;
} }
#current-slide { #current-slide .label,
width: 1280px; #next-slide .label {
height: 1024px; position: absolute;
border: none; top: 10px;
left: 10px;
-webkit-transform-origin: 0 0; font-weight: bold;
-moz-transform-origin: 0 0; font-size: 14px;
-ms-transform-origin: 0 0; z-index: 2;
-o-transform-origin: 0 0; color: rgba( 255, 255, 255, 0.9 );
transform-origin: 0 0;
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
transform: scale(0.5);
} }
#wrap-next-slide { #current-slide {
width: 448px; position: absolute;
height: 358px; width: 65%;
float: left; height: 100%;
margin: 0 0 0 10px; top: 0;
overflow: hidden; left: 0;
padding-right: 0;
} }
#next-slide { #next-slide {
width: 1280px; position: absolute;
height: 1024px; width: 35%;
border: none; height: 40%;
right: 0;
-webkit-transform-origin: 0 0; top: 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scale(0.35);
-moz-transform: scale(0.35);
-ms-transform: scale(0.35);
-o-transform: scale(0.35);
transform: scale(0.35);
}
.slides {
position: relative;
margin-bottom: 10px;
border: 1px solid black;
border-radius: 2px;
background: rgb(28, 30, 32);
} }
.slides span { #speaker-controls {
position: absolute; position: absolute;
top: 3px; top: 40%;
left: 3px; right: 0;
font-weight: bold; width: 35%;
font-size: 14px; height: 60%;
z-index: 2;
color: rgba( 255, 255, 255, 0.9 );
}
.error { font-size: 18px;
font-weight: bold;
color: red;
font-size: 1.5em;
text-align: center;
margin-top: 10%;
} }
.error code { .speaker-controls-time.hidden,
font-family: monospace; .speaker-controls-notes.hidden {
} display: none;
}
.speaker-controls-time .label,
.speaker-controls-notes .label {
text-transform: uppercase;
font-weight: normal;
font-size: 0.66em;
color: #666;
margin: 0;
}
.speaker-controls-time {
border-bottom: 1px solid rgba( 200, 200, 200, 0.5 );
margin-bottom: 10px;
padding: 10px 16px;
padding-bottom: 20px;
}
.speaker-controls-time .timer,
.speaker-controls-time .clock {
width: 50%;
font-size: 1.9em;
}
.speaker-controls-time .timer {
float: left;
}
.time { .speaker-controls-time .clock {
width: 448px; float: right;
margin: 30px 0 0 10px; text-align: right;
float: left; }
text-align: center;
opacity: 0; .speaker-controls-time span.mute {
color: #bbb;
-webkit-transition: opacity 0.4s; }
-moz-transition: opacity 0.4s;
-o-transition: opacity 0.4s; .speaker-controls-notes {
transition: opacity 0.4s; padding: 10px 16px;
}
.speaker-controls-notes .value {
margin-top: 5px;
line-height: 1.4;
font-size: 1.2em;
}
.clear {
clear: both;
} }
.elapsed, @media screen and (max-width: 1080px) {
.clock { #speaker-controls {
color: #333; font-size: 16px;
font-size: 2em; }
text-align: center;
display: inline-block;
padding: 0.5em;
background-color: #eee;
border-radius: 10px;
} }
.elapsed h2, @media screen and (max-width: 900px) {
.clock h2 { #speaker-controls {
font-size: 0.8em; font-size: 14px;
line-height: 100%; }
margin: 0;
color: #aaa;
} }
.elapsed .mute { @media screen and (max-width: 800px) {
color: #ddd; #speaker-controls {
font-size: 12px;
}
} }
</style> </style>
...@@ -139,28 +140,33 @@ ...@@ -139,28 +140,33 @@
<body> <body>
<div id="wrap-current-slide" class="slides"></div> <div id="current-slide"></div>
<div id="wrap-next-slide" class="slides"><span>UPCOMING:</span></div> <div id="next-slide"><span class="label">UPCOMING:</span></div>
<div id="speaker-controls">
<div class="time"> <div class="speaker-controls-time">
<div class="clock"> <h4 class="label">Time</h4>
<h2>Time</h2> <div class="clock">
<span id="clock">0:00:00 AM</span> <span class="clock-value">0:00 AM</span>
</div>
<div class="timer">
<span class="hours-value">00</span><span class="minutes-value">:00</span><span class="seconds-value">:00</span>
</div>
<div class="clear"></div>
</div> </div>
<div class="elapsed">
<h2>Elapsed</h2> <div class="speaker-controls-notes hidden">
<span id="hours">00</span><span id="minutes">:00</span><span id="seconds">:00</span> <h4 class="label">Notes</h4>
<div class="value"></div>
</div> </div>
</div> </div>
<div id="notes"></div>
<script src="../../plugin/markdown/marked.js"></script> <script src="../../plugin/markdown/marked.js"></script>
<script> <script>
(function() { (function() {
var notes, var notes,
notesValue,
currentState, currentState,
currentSlide, currentSlide,
nextSlide, nextSlide,
...@@ -202,6 +208,7 @@ ...@@ -202,6 +208,7 @@
connected = true; connected = true;
setupIframes( data ); setupIframes( data );
setupNotes();
setupTimer(); setupTimer();
} }
...@@ -217,14 +224,18 @@ ...@@ -217,14 +224,18 @@
currentState = JSON.stringify( data.state ); currentState = JSON.stringify( data.state );
// No need for updating the notes in case of fragment changes // No need for updating the notes in case of fragment changes
if ( data.notes !== undefined) { if ( data.notes ) {
notes.classList.remove( 'hidden' );
if( data.markdown ) { if( data.markdown ) {
notes.innerHTML = marked( data.notes ); notesValue.innerHTML = marked( data.notes );
} }
else { else {
notes.innerHTML = data.notes; notesValue.innerHTML = data.notes;
} }
} }
else {
notes.classList.add( 'hidden' );
}
// Update the note slides // Update the note slides
currentSlide.contentWindow.postMessage( JSON.stringify({ method: 'setState', args: [ data.state ] }), '*' ); currentSlide.contentWindow.postMessage( JSON.stringify({ method: 'setState', args: [ data.state ] }), '*' );
...@@ -238,24 +249,30 @@ ...@@ -238,24 +249,30 @@
*/ */
function setupIframes( data ) { function setupIframes( data ) {
notes = document.getElementById( 'notes' );
var url = data.url + '?receiver&progress=false&overview=false&history=false'; var url = data.url + '?receiver&progress=false&overview=false&history=false';
var hash = '#/' + data.state.indexh + '/' + data.state.indexv; var hash = '#/' + data.state.indexh + '/' + data.state.indexv;
currentSlide = document.createElement( 'iframe' ); currentSlide = document.createElement( 'iframe' );
currentSlide.setAttribute( 'id', 'current-slide' );
currentSlide.setAttribute( 'width', 1280 ); currentSlide.setAttribute( 'width', 1280 );
currentSlide.setAttribute( 'height', 1024 ); currentSlide.setAttribute( 'height', 1024 );
currentSlide.setAttribute( 'src', url + '&postMessageEvents=true' + hash ); currentSlide.setAttribute( 'src', url + '&postMessageEvents=true' + hash );
document.querySelector( '#wrap-current-slide' ).appendChild( currentSlide ); document.querySelector( '#current-slide' ).appendChild( currentSlide );
nextSlide = document.createElement( 'iframe' ); nextSlide = document.createElement( 'iframe' );
nextSlide.setAttribute( 'id', 'next-slide' );
nextSlide.setAttribute( 'width', 640 ); nextSlide.setAttribute( 'width', 640 );
nextSlide.setAttribute( 'height', 512 ); nextSlide.setAttribute( 'height', 512 );
nextSlide.setAttribute( 'src', url + '&controls=false' + hash ); nextSlide.setAttribute( 'src', url + '&controls=false' + hash );
document.querySelector( '#wrap-next-slide' ).appendChild( nextSlide ); document.querySelector( '#next-slide' ).appendChild( nextSlide );
}
/**
* Setup the notes UI.
*/
function setupNotes() {
notes = document.querySelector( '.speaker-controls-notes' );
notesValue = document.querySelector( '.speaker-controls-notes .value' );
} }
...@@ -266,15 +283,13 @@ ...@@ -266,15 +283,13 @@
function setupTimer() { function setupTimer() {
var start = new Date(), var start = new Date(),
timeEl = document.querySelector( '.time' ), timeEl = document.querySelector( '.speaker-controls-time' ),
clockEl = document.getElementById( 'clock' ), clockEl = timeEl.querySelector( '.clock-value' ),
hoursEl = document.getElementById( 'hours' ), hoursEl = timeEl.querySelector( '.hours-value' ),
minutesEl = document.getElementById( 'minutes' ), minutesEl = timeEl.querySelector( '.minutes-value' ),
secondsEl = document.getElementById( 'seconds' ); secondsEl = timeEl.querySelector( '.seconds-value' );
setInterval( function() {
timeEl.style.opacity = 1; function _updateTimer() {
var diff, hours, minutes, seconds, var diff, hours, minutes, seconds,
now = new Date(); now = new Date();
...@@ -284,14 +299,20 @@ ...@@ -284,14 +299,20 @@
minutes = Math.floor( ( diff / ( 1000 * 60 ) ) % 60 ); minutes = Math.floor( ( diff / ( 1000 * 60 ) ) % 60 );
seconds = Math.floor( ( diff / 1000 ) % 60 ); seconds = Math.floor( ( diff / 1000 ) % 60 );
clockEl.innerHTML = now.toLocaleTimeString(); clockEl.innerHTML = now.toLocaleTimeString( 'en-US', { hour12: true, hour: '2-digit', minute:'2-digit' } );
hoursEl.innerHTML = zeroPadInteger( hours ); hoursEl.innerHTML = zeroPadInteger( hours );
hoursEl.className = hours > 0 ? '' : 'mute'; hoursEl.className = hours > 0 ? '' : 'mute';
minutesEl.innerHTML = ':' + zeroPadInteger( minutes ); minutesEl.innerHTML = ':' + zeroPadInteger( minutes );
minutesEl.className = minutes > 0 ? '' : 'mute'; minutesEl.className = minutes > 0 ? '' : 'mute';
secondsEl.innerHTML = ':' + zeroPadInteger( seconds ); secondsEl.innerHTML = ':' + zeroPadInteger( seconds );
}, 1000 ); }
// Update once directly
_updateTimer();
// Then update every second
setInterval( _updateTimer, 1000 );
} }
......
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