diff options
Diffstat (limited to 'plugin/markdown')
| -rw-r--r-- | plugin/markdown/example.html | 47 | ||||
| -rwxr-xr-x | plugin/markdown/markdown.js | 125 |
2 files changed, 85 insertions, 87 deletions
diff --git a/plugin/markdown/example.html b/plugin/markdown/example.html index 522d8ac..36f6a51 100644 --- a/plugin/markdown/example.html +++ b/plugin/markdown/example.html @@ -7,7 +7,7 @@ <title>reveal.js - Markdown Demo</title> <link rel="stylesheet" href="../../css/reveal.css"> - <link rel="stylesheet" href="../../css/theme/default.css" id="theme"> + <link rel="stylesheet" href="../../css/theme/white.css" id="theme"> <link rel="stylesheet" href="../../lib/css/zenburn.css"> </head> @@ -19,7 +19,7 @@ <div class="slides"> <!-- 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> + <section data-markdown="example.md" data-separator="^\n\n\n" data-separator-vertical="^\n\n"></section> <!-- Slides are separated by three dashes (quick 'n dirty regular expression) --> <section data-markdown data-separator="---"> @@ -36,7 +36,7 @@ </section> <!-- Slides are separated by newline + three dashes + newline, vertical slides identical but two dashes --> - <section data-markdown data-separator="^\n---\n$" data-vertical="^\n--\n$"> + <section data-markdown data-separator="^\n---\n$" data-separator-vertical="^\n--\n$"> <script type="text/template"> ## Demo 2 Slide 1.1 @@ -68,20 +68,35 @@ </script> </section> + <!-- Slide attributes --> + <section data-markdown> + <script type="text/template"> + <!-- .slide: data-background="#000000" --> + ## Slide attributes + </script> + </section> + + <!-- Element attributes --> + <section data-markdown> + <script type="text/template"> + ## Element attributes + - Item 1 <!-- .element: class="fragment" data-fragment-index="2" --> + - Item 2 <!-- .element: class="fragment" data-fragment-index="1" --> + </script> + </section> + <!-- Code --> - <section> - <section data-markdown> - <script type="text/template"> - ```php - public function foo() - { - $foo = array( - 'bar' => 'bar' - ) - } - ``` - </script> - </section> + <section data-markdown> + <script type="text/template"> + ```php + public function foo() + { + $foo = array( + 'bar' => 'bar' + ) + } + ``` + </script> </section> </div> diff --git a/plugin/markdown/markdown.js b/plugin/markdown/markdown.js index 9564208..4847c7a 100755 --- a/plugin/markdown/markdown.js +++ b/plugin/markdown/markdown.js @@ -28,8 +28,8 @@ var DEFAULT_SLIDE_SEPARATOR = '^\n---\n$', DEFAULT_NOTES_SEPARATOR = 'note:', - DEFAULT_ELEMENT_ATTRIBUTES_SEPARATOR = '{\\\.\s*?([^}]+?)}', - DEFAULT_SLIDE_ATTRIBUTES_SEPARATOR = '^.*?<!--\\\sslide-attributes:\\\s(.*?)-->'; + DEFAULT_ELEMENT_ATTRIBUTES_SEPARATOR = '\\\.element\\\s*?(.+?)$', + DEFAULT_SLIDE_ATTRIBUTES_SEPARATOR = '\\\.slide:\\\s*?(\\\S.+?)$'; /** @@ -50,7 +50,7 @@ text = text.replace( new RegExp('\\n?\\t{' + leadingTabs + '}','g'), '\n' ); } else if( leadingWs > 1 ) { - text = text.replace( new RegExp('\\n? {' + leadingWs + '}','g'), '\n' ); + text = text.replace( new RegExp('\\n? {' + leadingWs + '}', 'g'), '\n' ); } return text; @@ -73,7 +73,7 @@ value = attributes[i].value; // disregard attributes that are used for markdown loading/parsing - if( /data\-(markdown|separator|vertical|notes|attributes)/gi.test( name ) ) continue; + if( /data\-(markdown|separator|vertical|notes)/gi.test( name ) ) continue; if( value ) { result.push( name + '=' + value ); @@ -97,7 +97,6 @@ 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; @@ -129,17 +128,14 @@ options = getSlidifyOptions( options ); var separatorRegex = new RegExp( options.separator + ( options.verticalSeparator ? '|' + options.verticalSeparator : '' ), 'mg' ), - horizontalSeparatorRegex = new RegExp( options.separator ), - slideAttributesSeparatorRegex = new RegExp( options.slideAttributesSeparator, 'm' ); + horizontalSeparatorRegex = new RegExp( options.separator ); var matches, lastIndex = 0, isHorizontal, wasHorizontal = true, content, - sectionStack = [], - matchAttributes, - slideAttributes = ""; + sectionStack = []; // iterate until all blocks between separators are stacked up while( matches = separatorRegex.exec( markdown ) ) { @@ -178,35 +174,19 @@ for( var i = 0, len = sectionStack.length; i < len; i++ ) { // vertical if( sectionStack[i] instanceof Array ) { - // 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 + '>'; + markdownSections += '<section '+ options.attributes +'>'; sectionStack[i].forEach( function( child ) { - 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 data-markdown>' + createMarkdownSlide( child, options ) + '</section>'; } ); markdownSections += '</section>'; } else { - 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>'; + markdownSections += '<section '+ options.attributes +' data-markdown>' + createMarkdownSlide( sectionStack[i], options ) + '</section>'; } } + return markdownSections; } @@ -239,13 +219,14 @@ xhr.onreadystatechange = function() { if( xhr.readyState === 4 ) { - if ( xhr.status >= 200 && xhr.status < 300 ) { + // file protocol yields status code 0 (useful for local debug, mobile applications etc.) + if ( ( xhr.status >= 200 && xhr.status < 300 ) || xhr.status === 0 ) { + section.outerHTML = slidify( xhr.responseText, { separator: section.getAttribute( 'data-separator' ), - verticalSeparator: section.getAttribute( 'data-vertical' ), - notesSeparator: section.getAttribute( 'data-notes' ), - attributes: getForwardedAttributes( section ), - slideAttributesSeparator: section.getAttribute( 'data-attributes' ), + verticalSeparator: section.getAttribute( 'data-separator-vertical' ), + notesSeparator: section.getAttribute( 'data-separator-notes' ), + attributes: getForwardedAttributes( section ) }); } @@ -271,30 +252,18 @@ } } - else if( section.getAttribute( 'data-separator' ) || section.getAttribute( 'data-vertical' ) || section.getAttribute( 'data-notes' ) ) { + else if( section.getAttribute( 'data-separator' ) || section.getAttribute( 'data-separator-vertical' ) || section.getAttribute( 'data-separator-notes' ) ) { section.outerHTML = slidify( getMarkdownFromSlide( section ), { separator: section.getAttribute( 'data-separator' ), - verticalSeparator: section.getAttribute( 'data-vertical' ), - notesSeparator: section.getAttribute( 'data-notes' ), - attributes: getForwardedAttributes( section ), - slideAttributesSeparator: section.getAttribute( 'data-attributes' ), + verticalSeparator: section.getAttribute( 'data-separator-vertical' ), + notesSeparator: section.getAttribute( 'data-separator-notes' ), + attributes: getForwardedAttributes( section ) }); } 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 ); + section.innerHTML = createMarkdownSlide( getMarkdownFromSlide( section ) ); } } @@ -319,40 +288,51 @@ 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] ); } + return true; } - + return false; } /** * Add attributes to the parent element of a text node, * or the element of an attribute node. */ - function addAttributes( element, separator ) { + function addAttributes( section, element, previousElement, separatorElementAttributes, separatorSectionAttributes ) { - if( element.childNodes.length > 0 ) { + if ( element != null && element.childNodes != undefined && element.childNodes.length > 0 ) { + previousParentElement = element; for( var i = 0; i < element.childNodes.length; i++ ) { - addAttributes( element.childNodes[i], separator ); + childElement = element.childNodes[i]; + if ( i > 0 ) { + j = i - 1; + while ( j >= 0 ) { + aPreviousChildElement = element.childNodes[j]; + if ( typeof aPreviousChildElement.setAttribute == 'function' && aPreviousChildElement.tagName != "BR" ) { + previousParentElement = aPreviousChildElement; + break; + } + j = j - 1; + } + } + parentSection = section; + if( childElement.nodeName == "section" ) { + parentSection = childElement ; + previousParentElement = childElement ; + } + if ( typeof childElement.setAttribute == 'function' || childElement.nodeType == Node.COMMENT_NODE ) { + addAttributes( parentSection, childElement, previousParentElement, separatorElementAttributes, separatorSectionAttributes ); + } } } - 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 ); + if ( element.nodeType == Node.COMMENT_NODE ) { + if ( addAttributeInElement( element, previousElement, separatorElementAttributes ) == false ) { + addAttributeInElement( element, section, separatorSectionAttributes ); } } - } /** @@ -376,9 +356,12 @@ var markdown = getMarkdownFromSlide( section ); section.innerHTML = marked( markdown ); - addAttributes( section, section.getAttribute( 'data-element-attributes' ) || + addAttributes( section, section, null, section.getAttribute( 'data-element-attributes' ) || section.parentNode.getAttribute( 'data-element-attributes' ) || - DEFAULT_ELEMENT_ATTRIBUTES_SEPARATOR ); + DEFAULT_ELEMENT_ATTRIBUTES_SEPARATOR, + section.getAttribute( 'data-attributes' ) || + section.parentNode.getAttribute( 'data-attributes' ) || + DEFAULT_SLIDE_ATTRIBUTES_SEPARATOR); // If there were notes, we need to re-add them after // having overwritten the section's HTML |