Skip to content

Commit

Permalink
Merge branch 'attributes' of https://github.com/VonC/reveal.js into dev
Browse files Browse the repository at this point in the history
  • Loading branch information
@hakimel
hakimel committed Dec 2, 2013
2 parents 31438c8 + fdb03b4 commit 65bd155
Show file tree
Hide file tree
Showing 6 changed files with 207 additions and 165 deletions.
10 changes: 5 additions & 5 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,25 +60,25 @@ You can write your content as a separate file and have reveal.js load it at runt

#### Element Attributes

Special syntax is available for adding attributes to Markdown elements. This is useful for fragments, amongst other things.
Special syntax (in html comment) is available for adding attributes to Markdown elements. This is useful for fragments, amongst other things.

```html
<section data-markdown>
<script type="text/template">
- Item 1 {.class="fragment" data-fragment-index="2"}
- Item 2 {.class="fragment" data-fragment-index="1"}
- Item 1 <!-- .element: class="fragment" data-fragment-index="2" -->
- Item 2 <!-- .element: class="fragment" data-fragment-index="1" -->
</script>
</section>
```

#### Slide Attributes

Special syntax is available for adding attributes to the slide `<section>` elements generated by your Markdown.
Special syntax (in html comment) is available for adding attributes to the slide `<section>` elements generated by your Markdown.

```html
<section data-markdown>
<script type="text/template">
<!-- slide-attributes: data-background="#ff0000" -->
<!-- slide: data-background="#ff0000" -->
Mardown content
</script>
</section>
Expand Down
110 changes: 46 additions & 64 deletions plugin/markdown/markdown.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.+?)$';


/**
Expand Down Expand Up @@ -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 );
Expand All @@ -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;

Expand Down Expand Up @@ -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 ) ) {
Expand Down Expand Up @@ -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;

}
Expand Down Expand Up @@ -240,12 +220,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 ),
slideAttributesSeparator: section.getAttribute( 'data-attributes' ),
attributes: getForwardedAttributes( section )
});

}
Expand Down Expand Up @@ -277,24 +257,12 @@
separator: section.getAttribute( 'data-separator' ),
verticalSeparator: section.getAttribute( 'data-vertical' ),
notesSeparator: section.getAttribute( 'data-notes' ),
attributes: getForwardedAttributes( section ),
slideAttributesSeparator: section.getAttribute( 'data-attributes' ),
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 ) );
}
}

Expand All @@ -319,40 +287,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 );
}
}

}

/**
Expand All @@ -376,9 +355,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
Expand Down
64 changes: 32 additions & 32 deletions test/test-markdown-attributes.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
<body style="overflow: auto;">

<div id="qunit"></div>
<div id="qunit-fixture"></div>
<div id="qunit-fixture"></div>

<div class="reveal" style="display: none;">

Expand All @@ -25,7 +25,7 @@
<section data-markdown data-separator="^\n\n\n"
data-vertical="^\n\n"
data-notes="^Note:"
data-attributes="^\s*?--\s(.*?)$"
data-attributes="--\s(.*?)$"
data-charset="utf-8">
<script type="text/template">
# Test attributes in Markdown
Expand All @@ -34,11 +34,11 @@


## Slide 2
-- id="slide2" data-transition="zoom" data-background="#A0C66B"
<!-- -- id="slide2" data-transition="zoom" data-background="#A0C66B" -->


## Slide 2.1
-- data-background="#ff0000" data-transition="fade"
<!-- -- data-background="#ff0000" data-transition="fade" -->


## Slide 2.2
Expand All @@ -47,7 +47,7 @@


## Slide 3
-- data-transition="zoom" data-background="#C6916B"
<!-- -- data-transition="zoom" data-background="#C6916B" -->



Expand All @@ -66,11 +66,11 @@


## Slide 2 Def
<!-- slide-attributes: id="slide2def" data-transition="concave" data-background="#A7C66B" -->
<!-- .slide: id="slide2def" data-transition="concave" data-background="#A7C66B" -->


## Slide 2.1 Def
<!-- slide-attributes: data-background="#f70000" data-transition="page" -->
<!-- .slide: data-background="#f70000" data-transition="page" -->


## Slide 2.2 Def
Expand All @@ -79,38 +79,38 @@


## Slide 3 Def
<!-- slide-attributes: data-transition="concave" data-background="#C7916B" -->
<!-- .slide: data-transition="concave" data-background="#C7916B" -->



## Slide 4
</script>
</section>

<section data-markdown>
<script type="text/template">
<!-- slide-attributes: data-background="#ff0000" -->
## Hello world
</script>
</section>

<section data-markdown>
<script type="text/template">
## Hello world
<!-- slide-attributes: data-background="#ff0000" -->
</script>
</section>

<section data-markdown>
<script type="text/template">
## Hello world

Test
<!-- slide-attributes: data-background="#ff0000" -->

More Test
</script>
</section>
<section data-markdown>
<script type="text/template">
<!-- .slide: data-background="#ff0000" -->
## Hello world
</script>
</section>

<section data-markdown>
<script type="text/template">
## Hello world
<!-- .slide: data-background="#ff0000" -->
</script>
</section>

<section data-markdown>
<script type="text/template">
## Hello world

Test
<!-- .slide: data-background="#ff0000" -->

More Test
</script>
</section>

</div>

Expand Down
Loading

0 comments on commit 65bd155

Please sign in to comment.