diff options
Diffstat (limited to 'plugin')
| -rw-r--r-- | plugin/markdown/example.html | 22 | ||||
| -rwxr-xr-x | plugin/markdown/markdown.js | 114 |
2 files changed, 121 insertions, 15 deletions
diff --git a/plugin/markdown/example.html b/plugin/markdown/example.html index 0b07aa5..522d8ac 100644 --- a/plugin/markdown/example.html +++ b/plugin/markdown/example.html @@ -8,6 +8,8 @@ <link rel="stylesheet" href="../../css/reveal.css"> <link rel="stylesheet" href="../../css/theme/default.css" id="theme"> + + <link rel="stylesheet" href="../../lib/css/zenburn.css"> </head> <body> @@ -66,6 +68,22 @@ </script> </section> + <!-- Code --> + <section> + <section data-markdown> + <script type="text/template"> + ```php + public function foo() + { + $foo = array( + 'bar' => 'bar' + ) + } + ``` + </script> + </section> + </section> + </div> </div> @@ -80,14 +98,12 @@ history: true, center: true, - theme: Reveal.getQueryHash().theme, - transition: Reveal.getQueryHash().transition || 'default', - // Optional libraries used to extend on reveal.js 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: '../highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } }, { src: '../notes/notes.js' } ] }); diff --git a/plugin/markdown/markdown.js b/plugin/markdown/markdown.js index 61d6987..9564208 100755 --- a/plugin/markdown/markdown.js +++ b/plugin/markdown/markdown.js @@ -27,7 +27,9 @@ } var DEFAULT_SLIDE_SEPARATOR = '^\n---\n$', - DEFAULT_NOTES_SEPARATOR = 'note:'; + DEFAULT_NOTES_SEPARATOR = 'note:', + DEFAULT_ELEMENT_ATTRIBUTES_SEPARATOR = '{\\\.\s*?([^}]+?)}', + DEFAULT_SLIDE_ATTRIBUTES_SEPARATOR = '^.*?<!--\\\sslide-attributes:\\\s(.*?)-->'; /** @@ -71,7 +73,7 @@ value = attributes[i].value; // disregard attributes that are used for markdown loading/parsing - if( /data\-(markdown|separator|vertical|notes)/gi.test( name ) ) continue; + if( /data\-(markdown|separator|vertical|notes|attributes)/gi.test( name ) ) continue; if( value ) { result.push( name + '=' + value ); @@ -95,6 +97,7 @@ options.separator = options.separator || DEFAULT_SLIDE_SEPARATOR; options.notesSeparator = options.notesSeparator || DEFAULT_NOTES_SEPARATOR; options.attributes = options.attributes || ''; + options.slideAttributesSeparator = options.slideAttributesSeparator || DEFAULT_SLIDE_ATTRIBUTES_SEPARATOR; return options; @@ -126,14 +129,17 @@ options = getSlidifyOptions( options ); var separatorRegex = new RegExp( options.separator + ( options.verticalSeparator ? '|' + options.verticalSeparator : '' ), 'mg' ), - horizontalSeparatorRegex = new RegExp( options.separator ); + horizontalSeparatorRegex = new RegExp( options.separator ), + slideAttributesSeparatorRegex = new RegExp( options.slideAttributesSeparator, 'm' ); var matches, lastIndex = 0, isHorizontal, wasHorizontal = true, content, - sectionStack = []; + sectionStack = [], + matchAttributes, + slideAttributes = ""; // iterate until all blocks between separators are stacked up while( matches = separatorRegex.exec( markdown ) ) { @@ -172,19 +178,35 @@ for( var i = 0, len = sectionStack.length; i < len; i++ ) { // vertical if( sectionStack[i] instanceof Array ) { - markdownSections += '<section '+ options.attributes +'>'; + // The 'data-xxx' attributes of the first child must be set on the wrapping parent section to be effective + // Mainly for data-transition (otherwise, it is ignored for the first vertical slide) + firstChild = sectionStack[i][0]; + matchAttributes = slideAttributesSeparatorRegex.exec( firstChild ); + slideAttributes = matchAttributes ? matchAttributes[1] : ""; + dataAttributes = ""; + if( slideAttributes != "" ) { + // http://stackoverflow.com/questions/18025762/javascript-regex-replace-all-word-characters-except-word-characters-between-ch + // Keep only data-attributes for the parent slide section. + dataAttributes = slideAttributes.replace( /(data-\S+=\"[^\"]+?\")|\w|[\"=]/g, function(a, b) { return b || ''; }); + } + markdownSections += '<section '+ options.attributes + ' ' + dataAttributes + '>'; sectionStack[i].forEach( function( child ) { - markdownSections += '<section data-markdown>' + createMarkdownSlide( child, options ) + '</section>'; + matchAttributes = slideAttributesSeparatorRegex.exec( child ); + slideAttributes = matchAttributes ? matchAttributes[1] : ""; + child = matchAttributes ? child.replace( slideAttributesSeparatorRegex,"" ) : child + markdownSections += '<section ' + slideAttributes + ' data-markdown>' + createMarkdownSlide( child, options ) + '</section>'; } ); markdownSections += '</section>'; } else { - markdownSections += '<section '+ options.attributes +' data-markdown>' + createMarkdownSlide( sectionStack[i], options ) + '</section>'; + matchAttributes = slideAttributesSeparatorRegex.exec( sectionStack[i] ); + slideAttributes = matchAttributes ? matchAttributes[1] : ""; + content = matchAttributes ? sectionStack[i].replace( slideAttributesSeparatorRegex,"" ) : sectionStack[i] + markdownSections += '<section '+ options.attributes + ' ' + slideAttributes +' data-markdown>' + createMarkdownSlide( content, options ) + '</section>'; } } - return markdownSections; } @@ -218,12 +240,12 @@ xhr.onreadystatechange = function() { if( xhr.readyState === 4 ) { if ( xhr.status >= 200 && xhr.status < 300 ) { - section.outerHTML = slidify( xhr.responseText, { separator: section.getAttribute( 'data-separator' ), verticalSeparator: section.getAttribute( 'data-vertical' ), notesSeparator: section.getAttribute( 'data-notes' ), - attributes: getForwardedAttributes( section ) + attributes: getForwardedAttributes( section ), + slideAttributesSeparator: section.getAttribute( 'data-attributes' ), }); } @@ -255,14 +277,79 @@ separator: section.getAttribute( 'data-separator' ), verticalSeparator: section.getAttribute( 'data-vertical' ), notesSeparator: section.getAttribute( 'data-notes' ), - attributes: getForwardedAttributes( section ) + attributes: getForwardedAttributes( section ), + slideAttributesSeparator: section.getAttribute( 'data-attributes' ), }); } else { + var content = getMarkdownFromSlide( section ); + var slideAttributesSeparatorRegex = new RegExp( section.getAttribute( 'data-attributes' ) || DEFAULT_SLIDE_ATTRIBUTES_SEPARATOR, 'm' ); + var matchAttributes = slideAttributesSeparatorRegex.exec( content ); + if ( matchAttributes ) { + var slideAttributes = matchAttributes[1]; + content = content.replace( slideAttributesSeparatorRegex,"" ); + var slideAttributesRegex = new RegExp( "([^\"= ]+?)=\"([^\"=]+?)\"", 'mg' ); + while( matchesAttributes = slideAttributesRegex.exec( slideAttributes ) ) { + section.setAttribute( matchesAttributes[1], matchesAttributes[2] ); + } + } + section.innerHTML = createMarkdownSlide( content ); + } + } + + } + + /** + * Check if a node value has the attributes pattern. + * If yes, extract it and add that value as one or several attributes + * the the terget element. + * + * You need Cache Killer on Chrome to see the effect on any FOM transformation + * directly on refresh (F5) + * http://stackoverflow.com/questions/5690269/disabling-chrome-cache-for-website-development/7000899#answer-11786277 + */ + function addAttributeInElement( node, elementTarget, separator ) { + + var mardownClassesInElementsRegex = new RegExp( separator, 'mg' ); + var mardownClassRegex = new RegExp( "([^\"= ]+?)=\"([^\"=]+?)\"", 'mg' ); + var nodeValue = node.nodeValue; + if( matches = mardownClassesInElementsRegex.exec( nodeValue ) ) { - section.innerHTML = createMarkdownSlide( getMarkdownFromSlide( section ) ); + var classes = matches[1]; + nodeValue = nodeValue.substring( 0, matches.index ) + nodeValue.substring( mardownClassesInElementsRegex.lastIndex ); + node.nodeValue = nodeValue; + while( matchesClass = mardownClassRegex.exec( classes ) ) { + elementTarget.setAttribute( matchesClass[1], matchesClass[2] ); + } + } + + } + + /** + * Add attributes to the parent element of a text node, + * or the element of an attribute node. + */ + function addAttributes( element, separator ) { + + if( element.childNodes.length > 0 ) { + for( var i = 0; i < element.childNodes.length; i++ ) { + addAttributes( element.childNodes[i], separator ); + } + } + + var nodeValue; + var elementTarget; + + // From http://stackoverflow.com/questions/9178174/find-all-text-nodes + if( element.nodeType == Node.TEXT_NODE && /\S/.test(element.nodeValue) ) { + addAttributeInElement( element, element.parentNode, separator ); + } + if( element.nodeType == Node.ELEMENT_NODE && element.attributes.length > 0 ) { + for( var j = 0; j < element.attributes.length; j++ ){ + var attr = element.attributes[j]; + addAttributeInElement( attr, element, separator ); } } @@ -289,6 +376,9 @@ var markdown = getMarkdownFromSlide( section ); section.innerHTML = marked( markdown ); + addAttributes( section, section.getAttribute( 'data-element-attributes' ) || + section.parentNode.getAttribute( 'data-element-attributes' ) || + DEFAULT_ELEMENT_ATTRIBUTES_SEPARATOR ); // If there were notes, we need to re-add them after // having overwritten the section's HTML |