Fix element attributes, except for multi-line.
authorVonC <vonc@laposte.net>
Wed, 27 Nov 2013 21:48:01 +0000 (22:48 +0100)
committerVonC <vonc@laposte.net>
Sat, 30 Nov 2013 22:12:39 +0000 (23:12 +0100)
plugin/markdown/markdown.js
test/test-markdown-attributes.html
test/test-markdown-element-attributes.html

index d606a4b0684651df45923fe9969ffe17accf0716..34458f225c7bbab6eb95169cd724e85c0a10f432 100755 (executable)
@@ -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 );
                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] );
                        }
         */
        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;
                                        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 );
+                               }
                        }
                }
 
                        }
                }
                // 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 );
+               //      }
+               //}
 
        }
 
index 8f77dac5491d88607c16b261c587916a70ad95d5..6818cd5d6205536949f97686707feb7a94c6a5eb 100644 (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
 
 
                                                ## 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" -->
 
 
 
index e9f403898baade44408bbdb8bed3961ce5764803..6fe7f9a286f5d93aa41e5f7712c2c432003dc440 100644 (file)
                                <!-- 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"} -->
 
 
                                                ---
                                                ## Slide 2
 
 
-                                               Paragraph 1.2
-                                               multi-line {_class="fragment highlight-red"}
+                                               Paragraph 1.2  
+                                               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>