diff options
Diffstat (limited to 'plugin')
| -rw-r--r-- | plugin/leap/leap.js | 3 | ||||
| -rw-r--r-- | plugin/markdown/example.html | 5 | ||||
| -rw-r--r-- | plugin/markdown/example.md | 2 | ||||
| -rwxr-xr-x | plugin/markdown/markdown.js | 379 | ||||
| -rwxr-xr-x | plugin/math/math.js | 64 | ||||
| -rw-r--r-- | plugin/notes/notes.html | 40 | ||||
| -rw-r--r-- | plugin/notes/notes.js | 72 |
7 files changed, 350 insertions, 215 deletions
diff --git a/plugin/leap/leap.js b/plugin/leap/leap.js index 8ba0063..9d5271a 100644 --- a/plugin/leap/leap.js +++ b/plugin/leap/leap.js @@ -48,6 +48,9 @@ var b=right.criteria;if(a!==b){if(a>b||a===void 0)return 1;if(a<b||b===void 0)re pointer.id = 'leap'; + pointer.style.position = 'absolute'; + pointer.style.visibility = 'hidden'; + pointer.style.zIndex = 50; pointer.style.opacity = config.pointerOpacity; pointer.style.backgroundColor = config.pointerColor; diff --git a/plugin/markdown/example.html b/plugin/markdown/example.html index 1253cba..0b07aa5 100644 --- a/plugin/markdown/example.html +++ b/plugin/markdown/example.html @@ -16,7 +16,7 @@ <div class="slides"> - <!-- Use external markdown resource, and separate slides by three newlines; vertical slides by two newlines --> + <!-- Use external markdown resource, separate slides by three newlines; vertical slides by two newlines --> <section data-markdown="example.md" data-separator="^\n\n\n" data-vertical="^\n\n"></section> <!-- Slides are separated by three dashes (quick 'n dirty regular expression) --> @@ -87,7 +87,8 @@ dependencies: [ { src: '../../lib/js/classList.js', condition: function() { return !document.body.classList; } }, { src: 'marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } }, - { src: 'markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } } + { src: 'markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } }, + { src: '../notes/notes.js' } ] }); diff --git a/plugin/markdown/example.md b/plugin/markdown/example.md index e988dd9..6f6f577 100644 --- a/plugin/markdown/example.md +++ b/plugin/markdown/example.md @@ -6,6 +6,8 @@ Content 1.1 +Note: This will only appear in the speaker notes window. + ## External 1.2 diff --git a/plugin/markdown/markdown.js b/plugin/markdown/markdown.js index 473666b..31d22f1 100755 --- a/plugin/markdown/markdown.js +++ b/plugin/markdown/markdown.js @@ -1,190 +1,271 @@ -// From https://gist.github.com/1343518 -// Modified by Hakim to handle Markdown indented with tabs +/** + * The reveal.js markdown plugin. Handles parsing of + * markdown inside of presentations as well as loading + * of external markdown documents. + */ (function(){ - if( typeof marked === 'undefined' ) { - throw 'The reveal.js Markdown plugin requires marked to be loaded'; - } + if( typeof marked === 'undefined' ) { + throw 'The reveal.js Markdown plugin requires marked to be loaded'; + } + + if( typeof hljs !== 'undefined' ) { + marked.setOptions({ + highlight: function( lang, code ) { + return hljs.highlightAuto( lang, code ).value; + } + }); + } + + /** + * Retrieves the markdown contents of a slide section + * element. Normalizes leading tabs/whitespace. + */ + function getMarkdownFromSlide( section ) { + + var template = section.querySelector( 'script' ); + + // strip leading whitespace so it isn't evaluated as code + var text = ( template || section ).textContent; + + var leadingWs = text.match( /^\n?(\s*)/ )[1].length, + leadingTabs = text.match( /^\n?(\t*)/ )[1].length; + + if( leadingTabs > 0 ) { + text = text.replace( new RegExp('\\n?\\t{' + leadingTabs + '}','g'), '\n' ); + } + else if( leadingWs > 1 ) { + text = text.replace( new RegExp('\\n? {' + leadingWs + '}','g'), '\n' ); + } + + return text; + + } + + /** + * Given a markdown slide section element, this will + * return all arguments that aren't related to markdown + * parsing. Used to forward any other user-defined arguments + * to the output markdown slide. + */ + function getForwardedAttributes( section ) { + + var attributes = section.attributes; + var result = []; + + for( var i = 0, len = attributes.length; i < len; i++ ) { + var name = attributes[i].name, + value = attributes[i].value; + + // disregard attributes that are used for markdown loading/parsing + if( /data\-(markdown|separator|vertical|notes)/gi.test( name ) ) continue; + + if( value ) { + result.push( name + '=' + value ); + } + else { + result.push( name ); + } + } + + return result.join( ' ' ); + + } + + /** + * Helper function for constructing a markdown slide. + */ + function createMarkdownSlide( data ) { + + var content = data.content || data; + + if( data.notes ) { + content += '<aside class="notes" data-markdown>' + data.notes + '</aside>'; + } + + return '<script type="text/template">' + content + '</script>'; + + } - var stripLeadingWhitespace = function(section) { + /** + * Parses a data string into multiple slides based + * on the passed in separator arguments. + */ + function slidifyMarkdown( markdown, options ) { + + options = options || {}; + options.separator = options.separator || '^\n---\n$'; + options.notesSeparator = options.notesSeparator || 'note:'; + options.attributes = options.attributes || ''; - var template = section.querySelector( 'script' ); - - // strip leading whitespace so it isn't evaluated as code - var text = ( template || section ).textContent; - - var leadingWs = text.match(/^\n?(\s*)/)[1].length, - leadingTabs = text.match(/^\n?(\t*)/)[1].length; + var separatorRegex = new RegExp( options.separator + ( options.verticalSeparator ? '|' + options.verticalSeparator : '' ), 'mg' ), + horizontalSeparatorRegex = new RegExp( options.separator ), + notesSeparatorRegex = new RegExp( options.notesSeparator, 'mgi' ); + + var matches, + noteMatch, + lastIndex = 0, + isHorizontal, + wasHorizontal = true, + content, + notes, + slide, + sectionStack = []; + + // iterate until all blocks between separators are stacked up + while( matches = separatorRegex.exec( markdown ) ) { + notes = null; + + // determine direction (horizontal by default) + isHorizontal = horizontalSeparatorRegex.test( matches[0] ); + + if( !isHorizontal && wasHorizontal ) { + // create vertical stack + sectionStack.push( [] ); + } + + // pluck slide content from markdown input + content = markdown.substring( lastIndex, matches.index ); + noteMatch = content.split( notesSeparatorRegex ); + + if( noteMatch.length === 2 ) { + content = noteMatch[0]; + notes = noteMatch[1].trim(); + } + + slide = { + content: content, + notes: notes || '' + }; + + if( isHorizontal && wasHorizontal ) { + // add to horizontal stack + sectionStack.push( slide ); + } + else { + // add to vertical stack + sectionStack[sectionStack.length-1].push( slide ); + } - if( leadingTabs > 0 ) { - text = text.replace( new RegExp('\\n?\\t{' + leadingTabs + '}','g'), '\n' ); - } - else if( leadingWs > 1 ) { - text = text.replace( new RegExp('\\n? {' + leadingWs + '}','g'), '\n' ); - } + lastIndex = separatorRegex.lastIndex; + wasHorizontal = isHorizontal; + } - return text; + // add the remaining slide + ( wasHorizontal ? sectionStack : sectionStack[sectionStack.length-1] ).push( markdown.substring( lastIndex ) ); - }; + var markdownSections = ''; - var twrap = function(el) { - return '<script type="text/template">' + el + '</script>'; - }; + // flatten the hierarchical stack, and insert <section data-markdown> tags + for( var i = 0, len = sectionStack.length; i < len; i++ ) { + // vertical + if( sectionStack[i].propertyIsEnumerable( length ) && typeof sectionStack[i].splice === 'function' ) { + markdownSections += '<section '+ options.attributes +'>' + + '<section data-markdown>' + sectionStack[i].map( createMarkdownSlide ).join( '</section><section data-markdown>' ) + '</section>' + + '</section>'; + } + else { + markdownSections += '<section '+ options.attributes +' data-markdown>' + createMarkdownSlide( sectionStack[i] ) + '</section>'; + } + } - var getForwardedAttributes = function(section) { - var attributes = section.attributes; - var result = []; + return markdownSections; - for( var i = 0, len = attributes.length; i < len; i++ ) { - var name = attributes[i].name, - value = attributes[i].value; + } - // disregard attributes that are used for markdown loading/parsing - if( /data\-(markdown|separator|vertical)/gi.test( name ) ) continue; + function loadExternalMarkdown() { - if( value ) { - result.push( name + '=' + value ); - } - else { - result.push( name ); - } - } + var sections = document.querySelectorAll( '[data-markdown]'), + section; - return result.join( ' ' ); - } + for( var i = 0, len = sections.length; i < len; i++ ) { - var slidifyMarkdown = function(markdown, separator, vertical, attributes) { + section = sections[i]; - separator = separator || '^\n---\n$'; + if( section.getAttribute( 'data-markdown' ).length ) { - var reSeparator = new RegExp(separator + (vertical ? '|' + vertical : ''), 'mg'), - reHorSeparator = new RegExp(separator), - matches, - lastIndex = 0, - isHorizontal, - wasHorizontal = true, - content, - sectionStack = [], - markdownSections = ''; + var xhr = new XMLHttpRequest(), + url = section.getAttribute( 'data-markdown' ); - // iterate until all blocks between separators are stacked up - while( matches = reSeparator.exec(markdown) ) { + datacharset = section.getAttribute( 'data-charset' ); - // determine direction (horizontal by default) - isHorizontal = reHorSeparator.test(matches[0]); + // see https://developer.mozilla.org/en-US/docs/Web/API/element.getAttribute#Notes + if( datacharset != null && datacharset != '' ) { + xhr.overrideMimeType( 'text/html; charset=' + datacharset ); + } - if( !isHorizontal && wasHorizontal ) { - // create vertical stack - sectionStack.push([]); - } + xhr.onreadystatechange = function() { + if( xhr.readyState === 4 ) { + if ( xhr.status >= 200 && xhr.status < 300 ) { - // pluck slide content from markdown input - content = markdown.substring(lastIndex, matches.index); + section.outerHTML = slidifyMarkdown( xhr.responseText, { + separator: section.getAttribute( 'data-separator' ), + verticalSeparator: section.getAttribute( 'data-vertical' ), + notesSeparator: section.getAttribute( 'data-notes' ), + attributes: getForwardedAttributes( section ) + }); - if( isHorizontal && wasHorizontal ) { - // add to horizontal stack - sectionStack.push(content); - } else { - // add to vertical stack - sectionStack[sectionStack.length-1].push(content); - } + } + else { - lastIndex = reSeparator.lastIndex; - wasHorizontal = isHorizontal; + section.outerHTML = '<section data-state="alert">' + + 'ERROR: The attempt to fetch ' + url + ' failed with HTTP status ' + xhr.status + '.' + + 'Check your browser\'s JavaScript console for more details.' + + '<p>Remember that you need to serve the presentation HTML from a HTTP server.</p>' + + '</section>'; - } + } + } + }; - // add the remaining slide - (wasHorizontal ? sectionStack : sectionStack[sectionStack.length-1]).push(markdown.substring(lastIndex)); + xhr.open( 'GET', url, false ); - // flatten the hierarchical stack, and insert <section data-markdown> tags - for( var k = 0, klen = sectionStack.length; k < klen; k++ ) { - // horizontal - if( typeof sectionStack[k] === 'string' ) { - markdownSections += '<section '+ attributes +' data-markdown>' + twrap( sectionStack[k] ) + '</section>'; - } - // vertical - else { - markdownSections += '<section '+ attributes +'>' + - '<section data-markdown>' + sectionStack[k].map(twrap).join('</section><section data-markdown>') + '</section>' + - '</section>'; - } - } + try { + xhr.send(); + } + catch ( e ) { + alert( 'Failed to get the Markdown file ' + url + '. Make sure that the presentation and the file are served by a HTTP server and the file can be found there. ' + e ); + } - return markdownSections; - }; + } + else if( section.getAttribute( 'data-separator' ) ) { - var querySlidingMarkdown = function() { + section.outerHTML = slidifyMarkdown( getMarkdownFromSlide( section ), { + separator: section.getAttribute( 'data-separator' ), + verticalSeparator: section.getAttribute( 'data-vertical' ), + notesSeparator: section.getAttribute( 'data-notes' ), + attributes: getForwardedAttributes( section ) + }); - var sections = document.querySelectorAll( '[data-markdown]'), - section; + } + } - for( var j = 0, jlen = sections.length; j < jlen; j++ ) { + } - section = sections[j]; + function convertMarkdownToHTML() { - if( section.getAttribute('data-markdown').length ) { + var sections = document.querySelectorAll( '[data-markdown]'); - var xhr = new XMLHttpRequest(), - url = section.getAttribute('data-markdown'); + for( var i = 0, len = sections.length; i < len; i++ ) { - xhr.onreadystatechange = function () { - if( xhr.readyState === 4 ) { - if (xhr.status >= 200 && xhr.status < 300) { - section.outerHTML = slidifyMarkdown( xhr.responseText, section.getAttribute('data-separator'), section.getAttribute('data-vertical'), getForwardedAttributes(section) ); - } else { - section.outerHTML = '<section data-state="alert">ERROR: The attempt to fetch ' + url + ' failed with the HTTP status ' + xhr.status + - '. Check your browser\'s JavaScript console for more details.' + - '<p>Remember that you need to serve the presentation HTML from a HTTP server and the Markdown file must be there too.</p></section>'; - } - } - }; + var section = sections[i]; - xhr.open('GET', url, false); - try { - xhr.send(); - } catch (e) { - alert('Failed to get the Markdown file ' + url + '. Make sure that the presentation and the file are served by a HTTP server and the file can be found there. ' + e); - } + var notes = section.querySelector( 'aside.notes' ); + var markdown = getMarkdownFromSlide( section ); - } else if( section.getAttribute('data-separator') ) { + section.innerHTML = marked( markdown ); - var markdown = stripLeadingWhitespace(section); - section.outerHTML = slidifyMarkdown( markdown, section.getAttribute('data-separator'), section.getAttribute('data-vertical'), getForwardedAttributes(section) ); + // If there were notes, we need to re-add them after + // having overwritten the section's HTML + if( notes ) { + section.appendChild( notes ); + } - } - } + } - }; + } - var queryMarkdownSlides = function() { - - var sections = document.querySelectorAll( '[data-markdown]'); - - for( var j = 0, jlen = sections.length; j < jlen; j++ ) { - - makeHtml(sections[j]); - - } - - }; - - var makeHtml = function(section) { - - var notes = section.querySelector( 'aside.notes' ); - - var markdown = stripLeadingWhitespace(section); - - section.innerHTML = marked(markdown); - - if( notes ) { - section.appendChild( notes ); - } - - }; - - querySlidingMarkdown(); - - queryMarkdownSlides(); + loadExternalMarkdown(); + convertMarkdownToHTML(); })(); diff --git a/plugin/math/math.js b/plugin/math/math.js new file mode 100755 index 0000000..d55d9d1 --- /dev/null +++ b/plugin/math/math.js @@ -0,0 +1,64 @@ +/** + * A plugin which enables rendering of math equations inside + * of reveal.js slides. Essentially a thin wrapper for MathJax. + * + * @author Hakim El Hattab + */ +var RevealMath = window.RevealMath || (function(){ + + var options = Reveal.getConfig().math || {}; + options.mathjax = options.mathjax || 'http://cdn.mathjax.org/mathjax/latest/MathJax.js'; + options.config = options.config || 'TeX-AMS_HTML-full'; + + loadScript( options.mathjax + '?config=' + options.config, function() { + + MathJax.Hub.Config({ + messageStyle: 'none', + tex2jax: { inlineMath: [['$','$'],['\\(','\\)']] }, + skipStartupTypeset: true + }); + + // Typeset followed by an immediate reveal.js layout since + // the typesetting process could affect slide height + MathJax.Hub.Queue( [ 'Typeset', MathJax.Hub ] ); + MathJax.Hub.Queue( Reveal.layout ); + + // Reprocess equations in slides when they turn visible + Reveal.addEventListener( 'slidechanged', function( event ) { + + MathJax.Hub.Queue( [ 'Typeset', MathJax.Hub, event.currentSlide ] ); + + } ); + + } ); + + function loadScript( url, callback ) { + + var head = document.querySelector( 'head' ); + var script = document.createElement( 'script' ); + script.type = 'text/javascript'; + script.src = url; + + // Wrapper for callback to make sure it only fires once + var finish = function() { + if( typeof callback === 'function' ) { + callback.call(); + callback = null; + } + } + + script.onload = finish; + + // IE + script.onreadystatechange = function() { + if ( this.readyState === 'loaded' ) { + finish(); + } + } + + // Normal browsers + head.appendChild( script ); + + } + +})(); diff --git a/plugin/notes/notes.html b/plugin/notes/notes.html index 8af43fb..0ef285b 100644 --- a/plugin/notes/notes.html +++ b/plugin/notes/notes.html @@ -169,10 +169,12 @@ var notes = document.getElementById( 'notes' ), currentSlide = document.getElementById( 'current-slide' ), - nextSlide = document.getElementById( 'next-slide' ); + nextSlide = document.getElementById( 'next-slide' ), + silenced = false; window.addEventListener( 'message', function( event ) { var data = JSON.parse( event.data ); + // No need for updating the notes in case of fragment changes if ( data.notes !== undefined) { if( data.markdown ) { @@ -183,18 +185,13 @@ } } - // Showing and hiding fragments - if( data.fragment === 'next' ) { - currentSlide.contentWindow.Reveal.nextFragment(); - } - else if( data.fragment === 'prev' ) { - currentSlide.contentWindow.Reveal.prevFragment(); - } - else { - // Update the note slides - currentSlide.contentWindow.Reveal.slide( data.indexh, data.indexv ); - nextSlide.contentWindow.Reveal.slide( data.nextindexh, data.nextindexv ); - } + silenced = true; + + // Update the note slides + currentSlide.contentWindow.Reveal.slide( data.indexh, data.indexv, data.indexf ); + nextSlide.contentWindow.Reveal.slide( data.nextindexh, data.nextindexv ); + + silenced = false; }, false ); @@ -226,12 +223,21 @@ }, 1000 ); - // Navigate the main window when the notes slide changes - currentSlide.contentWindow.Reveal.addEventListener( 'slidechanged', function( event ) { + // Broadcasts the state of the notes window to synchronize + // the main window + function synchronizeMainWindow() { - window.opener.Reveal.slide( event.indexh, event.indexv ); + if( !silenced ) { + var indices = currentSlide.contentWindow.Reveal.getIndices(); + window.opener.Reveal.slide( indices.h, indices.v, indices.f ); + } - } ); + } + + // Navigate the main window when the notes slide changes + currentSlide.contentWindow.Reveal.addEventListener( 'slidechanged', synchronizeMainWindow ); + currentSlide.contentWindow.Reveal.addEventListener( 'fragmentshown', synchronizeMainWindow ); + currentSlide.contentWindow.Reveal.addEventListener( 'fragmenthidden', synchronizeMainWindow ); } else { diff --git a/plugin/notes/notes.js b/plugin/notes/notes.js index 63de05a..9a82c3c 100644 --- a/plugin/notes/notes.js +++ b/plugin/notes/notes.js @@ -10,72 +10,50 @@ var RevealNotes = (function() { var notesPopup = window.open( jsFileLocation + 'notes.html', 'reveal.js - Notes', 'width=1120,height=850' ); // Fires when slide is changed - Reveal.addEventListener( 'slidechanged', function( event ) { - post('slidechanged'); - } ); + Reveal.addEventListener( 'slidechanged', post ); // Fires when a fragment is shown - Reveal.addEventListener( 'fragmentshown', function( event ) { - post('fragmentshown'); - } ); + Reveal.addEventListener( 'fragmentshown', post ); // Fires when a fragment is hidden - Reveal.addEventListener( 'fragmenthidden', function( event ) { - post('fragmenthidden'); - } ); + Reveal.addEventListener( 'fragmenthidden', post ); /** * Posts the current slide data to the notes window - * - * @param {String} eventType Expecting 'slidechanged', 'fragmentshown' - * or 'fragmenthidden' set in the events above to define the needed - * slideDate. */ - function post( eventType ) { + function post() { var slideElement = Reveal.getCurrentSlide(), + slideIndices = Reveal.getIndices(), messageData; - if( eventType === 'slidechanged' ) { - var notes = slideElement.querySelector( 'aside.notes' ), - indexh = Reveal.getIndices().h, - indexv = Reveal.getIndices().v, - nextindexh, - nextindexv; + var notes = slideElement.querySelector( 'aside.notes' ), + nextindexh, + nextindexv; - if( slideElement.nextElementSibling && slideElement.parentNode.nodeName == 'SECTION' ) { - nextindexh = indexh; - nextindexv = indexv + 1; - } else { - nextindexh = indexh + 1; - nextindexv = 0; - } - - messageData = { - notes : notes ? notes.innerHTML : '', - indexh : indexh, - indexv : indexv, - nextindexh : nextindexh, - nextindexv : nextindexv, - markdown : notes ? typeof notes.getAttribute( 'data-markdown' ) === 'string' : false - }; - } - else if( eventType === 'fragmentshown' ) { - messageData = { - fragment : 'next' - }; - } - else if( eventType === 'fragmenthidden' ) { - messageData = { - fragment : 'prev' - }; + if( slideElement.nextElementSibling && slideElement.parentNode.nodeName == 'SECTION' ) { + nextindexh = slideIndices.h; + nextindexv = slideIndices.v + 1; + } else { + nextindexh = slideIndices.h + 1; + nextindexv = 0; } + messageData = { + notes : notes ? notes.innerHTML : '', + indexh : slideIndices.h, + indexv : slideIndices.v, + indexf : slideIndices.f, + nextindexh : nextindexh, + nextindexv : nextindexv, + markdown : notes ? typeof notes.getAttribute( 'data-markdown' ) === 'string' : false + }; + notesPopup.postMessage( JSON.stringify( messageData ), '*' ); } // Navigate to the current slide when the notes are loaded notesPopup.addEventListener( 'load', function( event ) { - post('slidechanged'); + post(); }, false ); } |