phyks/reveal-js-base-theme
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix element attributes, except for multi-line.

Browse Source
This commit is contained in:
VonC 2013-11-27 22:48:01 +01:00
parent 3330c2a764
commit 8ad633e4f3
3 changed files with 60 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
plugin/markdown/markdown.js
View File

@ -29,7 +29,7 @@
var DEFAULT_SLIDE_SEPARATOR = '^\n---\n$',
DEFAULT_NOTES_SEPARATOR = 'note:',
DEFAULT_ELEMENT_ATTRIBUTES_SEPARATOR = '{\\\.\s*?([^}]+?)}',
DEFAULT_SLIDE_ATTRIBUTES_SEPARATOR = '^.*?<!--\\\sslide-attributes:\\\s(.*?)-->';
DEFAULT_SLIDE_ATTRIBUTES_SEPARATOR = 'slide-attributes:\\\s(.*?)$';
/**
@ -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 );
@ -282,12 +282,13 @@
var mardownClassesInElementsRegex = new RegExp( separator, 'mg' );
var mardownClassRegex = new RegExp( "([^\"= ]+?)=\"([^\"=]+?)\"", 'mg' );
var nodeValue = node.nodeValue;
console.log("=== node.nodeValue='" + nodeValue + "' vs. separator '" + separator + "'");
if( matches = mardownClassesInElementsRegex.exec( nodeValue ) ) {
var classes = matches[1];
nodeValue = nodeValue.substring( 0, matches.index ) + nodeValue.substring( mardownClassesInElementsRegex.lastIndex );
node.nodeValue = nodeValue;
console.log("=========== classes='" + classes + "'");
while( matchesClass = mardownClassRegex.exec( classes ) ) {
elementTarget.setAttribute( matchesClass[1], matchesClass[2] );
}
@ -302,15 +303,15 @@
*/
function addAttributes( section, element, previousElement, separatorElementAttributes, separatorSectionAttributes ) {
console.log("element='" + element.innerHTML + "', nodeType='" + element.nodeType + "'");
console.log("*** element='" + element.innerHTML + "', nodeType='" + element.nodeType + "'");
console.log("previousElement="+previousElement)
console.log("section=****"+section.outerHTML+"****");
if( element != null && element.childNodes != undefined && 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++ ) {
childElement = element.childNodes[i];
console.log(" Child element='" + childElement.innerHTML + "'");
if ( i > 0 ) {
console.log(" Child element='" + childElement.innerHTML + "', type " + childElement.nodeType);
if ( i > 0 && typeof element.childNodes[i-1].setAttribute == 'function' ) {
previousParentElement = element.childNodes[i-1];
}
parentSection = section;
@ -318,7 +319,10 @@
parentSection = childElement ;
previousParentElement = childElement ;
}
addAttributes( parentSection, childElement, previousParentElement, separatorElementAttributes, separatorSectionAttributes );
if ( typeof childElement.setAttribute == 'function' || childElement.nodeType == Node.COMMENT_NODE ) {
console.log(" CALL addAttributes")
addAttributes( parentSection, childElement, previousParentElement, separatorElementAttributes, separatorSectionAttributes );
}
}
}
@ -328,15 +332,15 @@
}
}
// From http://stackoverflow.com/questions/9178174/find-all-text-nodes
if( element.nodeType == Node.TEXT_NODE && /\S/.test(element.nodeValue) ) {
addAttributeInElement( element, element.parentNode, separatorElementAttributes );
}
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, separatorElementAttributes );
}
}
//if( element.nodeType == Node.TEXT_NODE && /\S/.test(element.nodeValue) ) {
// addAttributeInElement( element, element.parentNode, separatorElementAttributes );
//}
//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, separatorElementAttributes );
// }
//}
}

8
test/test-markdown-attributes.html
View File

@ -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
@ -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
@ -47,7 +47,7 @@
## Slide 3
-- data-transition="zoom" data-background="#C6916B"
<!-- -- data-transition="zoom" data-background="#C6916B" -->

51
test/test-markdown-element-attributes.html
View File

@ -24,19 +24,26 @@
<!-- 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$" data-element-attributes="{_\s*?([^}]+?)}">>
<script type="text/template">
## Slide 1.1 {_class="fragment fade-out" data-fragment-index="1"}
## Slide 1.1
<!-- {_class="fragment fade-out" data-fragment-index="1"} -->
--
## Slide 1.2 {_class="fragment shrink"}
## Slide 1.2
<!-- {_class="fragment shrink"} -->
Paragraph 1 {_class="fragment grow"}
Paragraph 1
<!-- {_class="fragment grow"} -->
Paragraph 2 {_class="fragment grow"}
Paragraph 2
<!-- {_class="fragment grow"} -->
- list item 1 {_class="fragment roll-in"}
- list item 2 {_class="fragment roll-in"}
- list item 3 {_class="fragment roll-in"}
- list item 1
<!-- {_class="fragment roll-in"} -->
- list item 2
<!-- {_class="fragment roll-in"} -->
- list item 3
<!-- {_class="fragment roll-in"} -->
---
@ -45,23 +52,33 @@
Paragraph 1.2
multi-line {_class="fragment highlight-red"}
multi-line
<!-- {_class="fragment highlight-red"} -->
Paragraph 2.2 {_class="fragment highlight-red"}
Paragraph 2.2
<!-- {_class="fragment highlight-red"} -->
Paragraph 2.3 {_class="fragment highlight-red"}
Paragraph 2.3
<!-- {_class="fragment highlight-red"} -->
Paragraph 2.4 {_class="fragment highlight-red"}
Paragraph 2.4
<!-- {_class="fragment highlight-red"} -->
- list item 1 {_class="fragment highlight-green"}
- list item 2 {_class="fragment highlight-green"}
- list item 3 {_class="fragment highlight-green"}
- list item 4 {_class="fragment highlight-green"}
- list item 5 {_class="fragment highlight-green"}
- list item 1
<!-- {_class="fragment highlight-green"} -->
- list item 2
<!-- {_class="fragment highlight-green"} -->
- list item 3
<!-- {_class="fragment highlight-green"} -->
- list item 4
<!-- {_class="fragment highlight-green"} -->
- list item 5
<!-- {_class="fragment highlight-green"} -->
Test
![Example Picture{_class="reveal stretch"}](assets/image2.png)
![Example Picture](examples/assets/image2.png)
<!-- {_class="reveal stretch"} -->
</script>
</section>