markdown refactoring; comments, renamed functions, shorter argument lists
authorHakim El Hattab <hakim.elhattab@gmail.com>
Sat, 24 Aug 2013 14:39:15 +0000 (10:39 -0400)
committerHakim El Hattab <hakim.elhattab@gmail.com>
Sat, 24 Aug 2013 14:39:15 +0000 (10:39 -0400)
plugin/markdown/markdown.js

index a5852c0b59a1bb839e073f487fb4ce6848dc528d..552b32c0e05571531796eb2aa4e1beebc1dc1b06 100755 (executable)
                });
        }
 
-       function stripLeadingWhitespace( section ) {
+       /**
+        * Retrieves the markdown contents of a slide section
+        * element. Normalizes leading tabs/whitespace.
+        */
+       function getMarkdownFromSlide( section ) {
 
                var template = section.querySelector( 'script' );
 
 
                return text;
 
-       };
-
-       function createSlide( data ) {
-
-               var content = data.content || data;
-
-               if( data.notes ) {
-                       content += '<aside class="notes" data-markdown>' + data.notes + '</aside>';
-               }
-
-               return '<script type="text/template">' + content + '</script>';
-
-       };
+       }
 
+       /**
+        * Given a markdown slide section element, this will
+        * return all arguments that aren't related to markdown
+        * parsing. Used to forward any other user-defined arguments
+        * to the output markdown slide.
+        */
        function getForwardedAttributes( section ) {
 
                var attributes = section.attributes;
 
                return result.join( ' ' );
 
-       };
+       }
+
+       /**
+        * Helper function for constructing a markdown slide.
+        */
+       function createMarkdownSlide( data ) {
+
+               var content = data.content || data;
+
+               if( data.notes ) {
+                       content += '<aside class="notes" data-markdown>' + data.notes + '</aside>';
+               }
+
+               return '<script type="text/template">' + content + '</script>';
+
+       }
+
+       /**
+        * Parses a data string into multiple slides based
+        * on the passed in separator arguments.
+        */
+       function slidifyMarkdown( markdown, options ) {
 
-       function slidifyMarkdown( markdown, separator, verticalSeparator, noteSeparator, attributes ) {
+               options = options || {};
+               options.separator = options.separator || '^\n---\n$';
+               options.notesSeparator = options.notesSeparator || 'note:';
+               options.attributes = options.attributes || '';
 
-               separator = separator || '^\n---\n$';
-               noteSeparator = noteSeparator || 'note:';
+               var separatorRegex = new RegExp( options.separator + ( options.verticalSeparator ? '|' + options.verticalSeparator : '' ), 'mg' ),
+                       horizontalSeparatorRegex = new RegExp( options.separator ),
+                       notesSeparatorRegex = new RegExp( options.notesSeparator, 'mgi' );
 
-               var separatorRegex = new RegExp( separator + ( verticalSeparator ? '|' + verticalSeparator : '' ), 'mg' ),
-                       horizontalSeparatorRegex = new RegExp( separator ),
-                       notesSeparatorRegex = new RegExp( noteSeparator, 'mgi' ),
-                       matches,
+               var matches,
                        noteMatch,
                        lastIndex = 0,
                        isHorizontal,
                        content,
                        notes,
                        slide,
-                       sectionStack = [],
-                       markdownSections = '';
+                       sectionStack = [];
 
                // iterate until all blocks between separators are stacked up
                while( matches = separatorRegex.exec( markdown ) ) {
                        if( isHorizontal && wasHorizontal ) {
                                // add to horizontal stack
                                sectionStack.push( slide );
-                       } else {
+                       }
+                       else {
                                // add to vertical stack
                                sectionStack[sectionStack.length-1].push( slide );
                        }
                // add the remaining slide
                ( wasHorizontal ? sectionStack : sectionStack[sectionStack.length-1] ).push( markdown.substring( lastIndex ) );
 
+               var markdownSections = '';
+
                // flatten the hierarchical stack, and insert <section data-markdown> tags
                for( var k = 0, klen = sectionStack.length; k < klen; k++ ) {
                        // vertical
                        if( sectionStack[k].propertyIsEnumerable( length ) && typeof sectionStack[k].splice === 'function' ) {
-                               markdownSections += '<section '+ attributes +'>' +
-                                                                               '<section data-markdown>' +  sectionStack[k].map( createSlide ).join( '</section><section data-markdown>' ) + '</section>' +
+                               markdownSections += '<section '+ options.attributes +'>' +
+                                                                               '<section data-markdown>' +  sectionStack[k].map( createMarkdownSlide ).join( '</section><section data-markdown>' ) + '</section>' +
                                                                        '</section>';
-                       } else {
-                               markdownSections += '<section '+ attributes +' data-markdown>' + createSlide( sectionStack[k] ) + '</section>';
+                       }
+                       else {
+                               markdownSections += '<section '+ options.attributes +' data-markdown>' + createMarkdownSlide( sectionStack[k] ) + '</section>';
                        }
                }
 
                return markdownSections;
-       };
 
-       function queryExternalMarkdown() {
+       }
+
+       function loadExternalMarkdown() {
 
                var sections = document.querySelectorAll( '[data-markdown]'),
                        section;
                                xhr.onreadystatechange = function() {
                                        if( xhr.readyState === 4 ) {
                                                if ( xhr.status >= 200 && xhr.status < 300 ) {
-                                                       section.outerHTML = slidifyMarkdown( xhr.responseText, section.getAttribute( 'data-separator' ), section.getAttribute( 'data-vertical' ), section.getAttribute( 'data-notes' ), getForwardedAttributes( section ) );
+
+                                                       section.outerHTML = slidifyMarkdown( xhr.responseText, {
+                                                               separator: section.getAttribute( 'data-separator' ),
+                                                               verticalSeparator: section.getAttribute( 'data-vertical' ),
+                                                               notesSeparator: section.getAttribute( 'data-notes' ),
+                                                               attributes: getForwardedAttributes( section )
+                                                       });
+
                                                }
                                                else {
-                                                       section.outerHTML = '<section data-state="alert">ERROR: The attempt to fetch ' + url + ' failed with the HTTP status ' + xhr.status +
-                                                               '. Check your browser\'s JavaScript console for more details.' +
-                                                               '<p>Remember that you need to serve the presentation HTML from a HTTP server and the Markdown file must be there too.</p></section>';
+
+                                                       section.outerHTML = '<section data-state="alert">' +
+                                                               'ERROR: The attempt to fetch ' + url + ' failed with HTTP status ' + xhr.status + '.' +
+                                                               'Check your browser\'s JavaScript console for more details.' +
+                                                               '<p>Remember that you need to serve the presentation HTML from a HTTP server.</p>' +
+                                                               '</section>';
+
                                                }
                                        }
                                };
                                        alert( 'Failed to get the Markdown file ' + url + '. Make sure that the presentation and the file are served by a HTTP server and the file can be found there. ' + e );
                                }
 
-                       } else if( section.getAttribute( 'data-separator' ) ) {
+                       }
+                       else if( section.getAttribute( 'data-separator' ) ) {
 
-                               var markdown = stripLeadingWhitespace( section );
-                               section.outerHTML = slidifyMarkdown( markdown, section.getAttribute( 'data-separator' ), section.getAttribute( 'data-vertical' ), section.getAttribute( 'data-notes' ), getForwardedAttributes( section ) );
+                               section.outerHTML = slidifyMarkdown( getMarkdownFromSlide( section ), {
+                                       separator: section.getAttribute( 'data-separator' ),
+                                       verticalSeparator: section.getAttribute( 'data-vertical' ),
+                                       notesSeparator: section.getAttribute( 'data-notes' ),
+                                       attributes: getForwardedAttributes( section )
+                               });
 
                        }
                }
 
-       };
+       }
 
-       function queryMarkdownSlides() {
+       function convertMarkdownToHTML() {
 
                var sections = document.querySelectorAll( '[data-markdown]');
 
-               for( var j = 0, jlen = sections.length; j < jlen; j++ ) {
+               for( var i = 0, len = sections.length; i < len; i++ ) {
 
-                       makeHtml( sections[j] );
+                       var section = sections[i];
 
-               }
+                       var notes = section.querySelector( 'aside.notes' );
+                       var markdown = getMarkdownFromSlide( section );
 
-       };
+                       section.innerHTML = marked( markdown );
 
-       function makeHtml( section ) {
-
-               var notes = section.querySelector( 'aside.notes' );
-
-               var markdown = stripLeadingWhitespace( section );
-
-               section.innerHTML = marked( markdown );
+                       // If there were notes, we need to re-add them after
+                       // having overwritten the section's HTML
+                       if( notes ) {
+                               section.appendChild( notes );
+                       }
 
-               if( notes ) {
-                       section.appendChild( notes );
                }
 
-       };
+       }
 
-       queryExternalMarkdown();
-       queryMarkdownSlides();
+       loadExternalMarkdown();
+       convertMarkdownToHTML();
 
 })();