xobs/lca2019-talk
1
0
Fork 0
Code Issues Pull Requests 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

36
plugin/markdown/markdown.js
View File

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

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

@ -25,7 +25,7 @@
<section data-markdown data-separator="^\n\n\n" <section data-markdown data-separator="^\n\n\n"
data-vertical="^\n\n" data-vertical="^\n\n"
data-notes="^Note:" data-notes="^Note:"
data-attributes="^\s*?--\s(.*?)$" data-attributes="--\s(.*?)$"
data-charset="utf-8"> data-charset="utf-8">
<script type="text/template"> <script type="text/template">
# Test attributes in Markdown # Test attributes in Markdown
@ -34,11 +34,11 @@
## Slide 2 ## Slide 2
-- id="slide2" data-transition="zoom" data-background="#A0C66B" <!-- -- id="slide2" data-transition="zoom" data-background="#A0C66B" -->
## Slide 2.1 ## Slide 2.1
-- data-background="#ff0000" data-transition="fade" <!-- -- data-background="#ff0000" data-transition="fade" -->
## Slide 2.2 ## Slide 2.2
@ -47,7 +47,7 @@
## Slide 3 ## 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 --> <!-- 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*?([^}]+?)}">> <section data-markdown data-separator="^\n---\n$" data-vertical="^\n--\n$" data-element-attributes="{_\s*?([^}]+?)}">>
<script type="text/template"> <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 1
- list item 2 {_class="fragment roll-in"} <!-- {_class="fragment roll-in"} -->
- list item 3 {_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 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 1
- list item 2 {_class="fragment highlight-green"} <!-- {_class="fragment highlight-green"} -->
- list item 3 {_class="fragment highlight-green"} - list item 2
- list item 4 {_class="fragment highlight-green"} <!-- {_class="fragment highlight-green"} -->
- list item 5 {_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 Test
![Example Picture{_class="reveal stretch"}](assets/image2.png) ![Example Picture](examples/assets/image2.png)
<!-- {_class="reveal stretch"} -->
</script> </script>
</section> </section>