From 5b18c1f308523527566cefc85414170e922bc4a2 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Sat, 19 Apr 2014 10:54:14 +0200 Subject: notes plugin now operates entirely through window.postMessage, adding support for file protocol --- plugin/notes/notes.html | 176 ++++++++++++++++++++++++++++++------------------ 1 file changed, 109 insertions(+), 67 deletions(-) (limited to 'plugin/notes/notes.html') diff --git a/plugin/notes/notes.html b/plugin/notes/notes.html index 847499d..3e9e8b7 100644 --- a/plugin/notes/notes.html +++ b/plugin/notes/notes.html @@ -82,6 +82,7 @@ left: 3px; font-weight: bold; font-size: 14px; + z-index: 2; color: rgba( 255, 255, 255, 0.9 ); } @@ -138,22 +139,8 @@ - - -
- -
- -
- - UPCOMING: -
+
+
UPCOMING:
@@ -171,37 +158,112 @@ -- cgit v1.2.3 From 3795ef1599cae8debe161c13a530ad565a767291 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Sun, 20 Apr 2014 10:26:00 +0200 Subject: update style of notes plugin to match Slides --- plugin/notes/notes.html | 283 ++++++++++++++++++++++++++---------------------- 1 file changed, 152 insertions(+), 131 deletions(-) (limited to 'plugin/notes/notes.html') diff --git a/plugin/notes/notes.html b/plugin/notes/notes.html index 3e9e8b7..15c7ae9 100644 --- a/plugin/notes/notes.html +++ b/plugin/notes/notes.html @@ -10,128 +10,129 @@ font-family: Helvetica; } - #notes { - font-size: 24px; - width: 640px; - margin-top: 5px; - clear: left; + #current-slide, + #next-slide, + #speaker-controls { + padding: 6px; + box-sizing: border-box; + -moz-box-sizing: border-box; } - #wrap-current-slide { - width: 640px; - height: 512px; - float: left; - overflow: hidden; + #current-slide iframe, + #next-slide iframe { + width: 100%; + height: 100%; + border: 1px solid #ddd; } - #current-slide { - width: 1280px; - height: 1024px; - border: none; - - -webkit-transform-origin: 0 0; - -moz-transform-origin: 0 0; - -ms-transform-origin: 0 0; - -o-transform-origin: 0 0; - 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); + #current-slide .label, + #next-slide .label { + position: absolute; + top: 10px; + left: 10px; + font-weight: bold; + font-size: 14px; + z-index: 2; + color: rgba( 255, 255, 255, 0.9 ); } - #wrap-next-slide { - width: 448px; - height: 358px; - float: left; - margin: 0 0 0 10px; - overflow: hidden; + #current-slide { + position: absolute; + width: 65%; + height: 100%; + top: 0; + left: 0; + padding-right: 0; } #next-slide { - width: 1280px; - height: 1024px; - border: none; - - -webkit-transform-origin: 0 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); + position: absolute; + width: 35%; + height: 40%; + right: 0; + top: 0; } - .slides span { + #speaker-controls { position: absolute; - top: 3px; - left: 3px; - font-weight: bold; - font-size: 14px; - z-index: 2; - color: rgba( 255, 255, 255, 0.9 ); - } + top: 40%; + right: 0; + width: 35%; + height: 60%; - .error { - font-weight: bold; - color: red; - font-size: 1.5em; - text-align: center; - margin-top: 10%; + font-size: 18px; } - .error code { - font-family: monospace; - } + .speaker-controls-time.hidden, + .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 { - width: 448px; - margin: 30px 0 0 10px; - float: left; - text-align: center; - opacity: 0; - - -webkit-transition: opacity 0.4s; - -moz-transition: opacity 0.4s; - -o-transition: opacity 0.4s; - transition: opacity 0.4s; + .speaker-controls-time .clock { + float: right; + text-align: right; + } + + .speaker-controls-time span.mute { + color: #bbb; + } + + .speaker-controls-notes { + padding: 10px 16px; + } + + .speaker-controls-notes .value { + margin-top: 5px; + line-height: 1.4; + font-size: 1.2em; + } + + .clear { + clear: both; } - .elapsed, - .clock { - color: #333; - font-size: 2em; - text-align: center; - display: inline-block; - padding: 0.5em; - background-color: #eee; - border-radius: 10px; + @media screen and (max-width: 1080px) { + #speaker-controls { + font-size: 16px; + } } - .elapsed h2, - .clock h2 { - font-size: 0.8em; - line-height: 100%; - margin: 0; - color: #aaa; + @media screen and (max-width: 900px) { + #speaker-controls { + font-size: 14px; + } } - .elapsed .mute { - color: #ddd; + @media screen and (max-width: 800px) { + #speaker-controls { + font-size: 12px; + } } @@ -139,28 +140,33 @@ -
-
UPCOMING:
- -
-
-

Time

- 0:00:00 AM +
+
UPCOMING:
+
+
+

Time

+
+ 0:00 AM +
+
+ 00:00:00 +
+
-
-

Elapsed

- 00:00:00 + +
-
- -- cgit v1.2.3 From 37ebe0732c411bee812852e80294bd36d75cd76c Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Tue, 22 Apr 2014 15:05:06 +0200 Subject: skip transitions in notes window for better main window performance --- plugin/notes/notes.html | 14 +++----------- 1 file changed, 3 insertions(+), 11 deletions(-) (limited to 'plugin/notes/notes.html') diff --git a/plugin/notes/notes.html b/plugin/notes/notes.html index 9e9dfb5..e488075 100644 --- a/plugin/notes/notes.html +++ b/plugin/notes/notes.html @@ -252,25 +252,17 @@ */ function setupIframes( data ) { - var currentParams = [ + var params = [ 'receiver', 'progress=false', 'history=false', - 'postMessageEvents=true' - ].join( '&' ); - - var upcomingParams = [ - 'receiver', - 'progress=false', - 'history=false', - 'controls=false', 'transition=none', 'backgroundTransition=none' ].join( '&' ); var hash = '#/' + data.state.indexh + '/' + data.state.indexv; - var currentURL = data.url + '?' + currentParams + hash; - var upcomingURL = data.url + '?' + upcomingParams + hash; + var currentURL = data.url + '?' + params + '&postMessageEvents=true' + hash; + var upcomingURL = data.url + '?' + params + '&controls=false' + hash; currentSlide = document.createElement( 'iframe' ); currentSlide.setAttribute( 'width', 1280 ); -- cgit v1.2.3 From 1e5ca748a49b35ec698fc73d0420bb63534b9ae7 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Sat, 26 Apr 2014 11:35:55 +0200 Subject: enable reveal.js keyboard shortcuts anywhere in notes window --- js/reveal.js | 5 +++++ plugin/notes/notes.html | 14 ++++++++++++++ 2 files changed, 19 insertions(+) (limited to 'plugin/notes/notes.html') diff --git a/js/reveal.js b/js/reveal.js index 7a032d0..d81a19d 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -3702,6 +3702,11 @@ var Reveal = (function(){ if( 'addEventListener' in window ) { ( dom.wrapper || document.querySelector( '.reveal' ) ).removeEventListener( type, listener, useCapture ); } + }, + + // Programatically triggers a keyboard event + triggerKey: function( keyCode ) { + onDocumentKeyDown( { keyCode: keyCode } ); } }; diff --git a/plugin/notes/notes.html b/plugin/notes/notes.html index e488075..30e1669 100644 --- a/plugin/notes/notes.html +++ b/plugin/notes/notes.html @@ -208,6 +208,7 @@ connected = true; setupIframes( data ); + setupKeyboard(); setupNotes(); setupTimer(); } @@ -247,6 +248,19 @@ // Limit to max one state update per X ms handleStateMessage = debounce( handleStateMessage, 200 ); + /** + * Forward keyboard events to the current slide window. + * This enables keyboard events to work even if focus + * isn't set on the current slide iframe. + */ + function setupKeyboard() { + + document.addEventListener( 'keydown', function( event ) { + currentSlide.contentWindow.postMessage( JSON.stringify({ method: 'triggerKey', args: [ event.keyCode ] }), '*' ); + } ); + + } + /** * Creates the preview iframes. */ -- cgit v1.2.3 From fa6187072e70ed8c8f08df6a4a6bd4d68db8074e Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Sun, 4 May 2014 08:13:03 +0200 Subject: clicking on notes timer now resets it #779 --- plugin/notes/notes.html | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) (limited to 'plugin/notes/notes.html') diff --git a/plugin/notes/notes.html b/plugin/notes/notes.html index 30e1669..43385bf 100644 --- a/plugin/notes/notes.html +++ b/plugin/notes/notes.html @@ -82,6 +82,17 @@ margin-bottom: 10px; padding: 10px 16px; padding-bottom: 20px; + cursor: pointer; + } + + .speaker-controls-time .reset-button { + opacity: 0; + float: right; + color: #666; + text-decoration: none; + } + .speaker-controls-time:hover .reset-button { + opacity: 1; } .speaker-controls-time .timer, @@ -144,7 +155,7 @@
UPCOMING:
-

Time

+

Time Click to Reset

0:00 AM
@@ -340,6 +351,12 @@ // Then update every second setInterval( _updateTimer, 1000 ); + timeEl.addEventListener( 'click', function() { + start = new Date(); + _updateTimer(); + return false; + } ); + } function zeroPadInteger( num ) { -- cgit v1.2.3 From f28b380fac76583c1572c82abc229b49f54dc2fc Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Sun, 28 Sep 2014 17:13:49 +0200 Subject: prevent auto-sliding in notes frames #1004 --- plugin/notes/notes.html | 1 + 1 file changed, 1 insertion(+) (limited to 'plugin/notes/notes.html') diff --git a/plugin/notes/notes.html b/plugin/notes/notes.html index 43385bf..1429004 100644 --- a/plugin/notes/notes.html +++ b/plugin/notes/notes.html @@ -282,6 +282,7 @@ 'progress=false', 'history=false', 'transition=none', + 'autoSlide=0', 'backgroundTransition=none' ].join( '&' ); -- cgit v1.2.3 From cef19486b89ed7d101acfc1992af2e49e88c371d Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Thu, 16 Oct 2014 13:09:54 +0200 Subject: better handling of overflowing speaker notes #1017 --- plugin/notes/notes.html | 1 + 1 file changed, 1 insertion(+) (limited to 'plugin/notes/notes.html') diff --git a/plugin/notes/notes.html b/plugin/notes/notes.html index 1429004..0cc8cf6 100644 --- a/plugin/notes/notes.html +++ b/plugin/notes/notes.html @@ -59,6 +59,7 @@ right: 0; width: 35%; height: 60%; + overflow: auto; font-size: 18px; } -- cgit v1.2.3 From 9bcd1484bc583ffe015c5296e6a42c17f578ae49 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Fri, 25 Sep 2015 09:41:05 +0200 Subject: notes defined in data-notes attributes retain preformatted whitespace --- plugin/notes/notes.html | 1 + plugin/notes/notes.js | 2 ++ 2 files changed, 3 insertions(+) (limited to 'plugin/notes/notes.html') diff --git a/plugin/notes/notes.html b/plugin/notes/notes.html index 0cc8cf6..75f1b9b 100644 --- a/plugin/notes/notes.html +++ b/plugin/notes/notes.html @@ -239,6 +239,7 @@ // No need for updating the notes in case of fragment changes if ( data.notes ) { notes.classList.remove( 'hidden' ); + notesValue.style.whiteSpace = data.whitespace; if( data.markdown ) { notesValue.innerHTML = marked( data.notes ); } diff --git a/plugin/notes/notes.js b/plugin/notes/notes.js index e42329d..a0e8021 100644 --- a/plugin/notes/notes.js +++ b/plugin/notes/notes.js @@ -55,12 +55,14 @@ var RevealNotes = (function() { type: 'state', notes: '', markdown: false, + whitespace: 'normal', state: Reveal.getState() }; // Look for notes defined in a slide attribute if( slideElement.hasAttribute( 'data-notes' ) ) { messageData.notes = slideElement.getAttribute( 'data-notes' ); + messageData.whitespace = 'pre-wrap'; } // Look for notes defined in an aside element -- cgit v1.2.3 From 6d0b52026a773559407a452b94f8ab60d80aac1e Mon Sep 17 00:00:00 2001 From: Benjamin Tan Date: Sun, 6 Mar 2016 18:28:08 +0800 Subject: Fix query parameter issue in notes plugin. Closes #1392.--- plugin/notes/notes.html | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) (limited to 'plugin/notes/notes.html') diff --git a/plugin/notes/notes.html b/plugin/notes/notes.html index 75f1b9b..d0d88dc 100644 --- a/plugin/notes/notes.html +++ b/plugin/notes/notes.html @@ -288,9 +288,10 @@ 'backgroundTransition=none' ].join( '&' ); + var urlSeparator = /?/.test(data.url) ? '&' : '?'; var hash = '#/' + data.state.indexh + '/' + data.state.indexv; - var currentURL = data.url + '?' + params + '&postMessageEvents=true' + hash; - var upcomingURL = data.url + '?' + params + '&controls=false' + hash; + var currentURL = data.url + urlSeparator + params + '&postMessageEvents=true' + hash; + var upcomingURL = data.url + urlSeparator + params + '&controls=false' + hash; currentSlide = document.createElement( 'iframe' ); currentSlide.setAttribute( 'width', 1280 ); -- cgit v1.2.3 From 922677ac66d6a40eba23e5f9ac3fc10d9145b203 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Wed, 9 Mar 2016 09:37:10 +0100 Subject: fix notes regex #1522 #1392 --- plugin/notes/notes.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'plugin/notes/notes.html') diff --git a/plugin/notes/notes.html b/plugin/notes/notes.html index d0d88dc..8523e98 100644 --- a/plugin/notes/notes.html +++ b/plugin/notes/notes.html @@ -288,7 +288,7 @@ 'backgroundTransition=none' ].join( '&' ); - var urlSeparator = /?/.test(data.url) ? '&' : '?'; + var urlSeparator = /\?/.test(data.url) ? '&' : '?'; var hash = '#/' + data.state.indexh + '/' + data.state.indexv; var currentURL = data.url + urlSeparator + params + '&postMessageEvents=true' + hash; var upcomingURL = data.url + urlSeparator + params + '&controls=false' + hash; -- cgit v1.2.3 From 8e3a7f03d189391f88f56b8ac7c96db709d7cba7 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Wed, 9 Mar 2016 09:57:58 +0100 Subject: notes plugin no longer syncs overview mode #1446 --- plugin/notes/notes.html | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) (limited to 'plugin/notes/notes.html') diff --git a/plugin/notes/notes.html b/plugin/notes/notes.html index 8523e98..c80e77f 100644 --- a/plugin/notes/notes.html +++ b/plugin/notes/notes.html @@ -188,6 +188,10 @@ var data = JSON.parse( event.data ); + // The overview mode is only useful to the reveal.js instance + // where navigation occurs so we don't sync it + if( data.state ) delete data.state.overview; + // Messages sent by the notes plugin inside of the main window if( data && data.namespace === 'reveal-notes' ) { if( data.type === 'connect' ) { @@ -203,8 +207,10 @@ // Send a message back to notify that the handshake is complete window.opener.postMessage( JSON.stringify({ namespace: 'reveal-notes', type: 'connected'} ), '*' ); } - else if( /slidechanged|fragmentshown|fragmenthidden|overviewshown|overviewhidden|paused|resumed/.test( data.eventName ) && currentState !== JSON.stringify( data.state ) ) { + else if( /slidechanged|fragmentshown|fragmenthidden|paused|resumed/.test( data.eventName ) && currentState !== JSON.stringify( data.state ) ) { + window.opener.postMessage( JSON.stringify({ method: 'setState', args: [ data.state ]} ), '*' ); + } } -- cgit v1.2.3 From ad86772f206d7abd119a8ca7b89a31e237e93584 Mon Sep 17 00:00:00 2001 From: Timothep Date: Wed, 9 Mar 2016 11:47:23 +0100 Subject: Horizontal 2-1 View for the speaker notes instead of a vertical 1-2 --- plugin/notes/notes.html | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) (limited to 'plugin/notes/notes.html') diff --git a/plugin/notes/notes.html b/plugin/notes/notes.html index c80e77f..53d50c3 100644 --- a/plugin/notes/notes.html +++ b/plugin/notes/notes.html @@ -38,8 +38,8 @@ #current-slide { position: absolute; - width: 65%; - height: 100%; + width: 50%; + height: 50%; top: 0; left: 0; padding-right: 0; @@ -47,20 +47,19 @@ #upcoming-slide { position: absolute; - width: 35%; - height: 40%; + width: 50%; + height: 50%; right: 0; top: 0; } #speaker-controls { position: absolute; - top: 40%; - right: 0; - width: 35%; - height: 60%; + top: 50%; + left: 0; + width: 100%; + height: 50%; overflow: auto; - font-size: 18px; } -- cgit v1.2.3