scrippet.js

/*
Scrippets: 
    Blocks of text formatted as a screenplay

Original Ruby script by John August:
    site:   http://johnaugust.com
    script: http://pastie.org/257717
    css:    http://pastie.org/257678

JavaScript version by M@ McCray:
    site:   http://mattmccray.com

Scrippet Format:
    INT. KITCHEN - EVENING

    An average kitchen, in an average home.

    MARY
    Anything you want to tell me?

    FRANK
    (wringing hands)
    I swear, honey, I don't know how mayonnaise got in the piano.

    CUT TO:

    INT. DINING ROOM - MORNING

    We see an upright piano and a small boy, BILLY, carrying a very large container of mayonnaise.

Usage:
    Scrippet.render( text )           -> Parses the scrippet text and returns HTML

Notes:
    You'll need John's orignal CSS for this to display correctly. http://pastie.org/257678
    
    Here's an example of how you could use it with jQuery, assuming your scrippets are in a PRE element with a class of 'scrippet':
    
      $(function() {
        $('PRE.scrippet').each(function(){
          // replaces the PRE with the generated HTML...
          $(this).before( Scrippet.render( $(this).text() ) ).remove();
        });
      });
*/
var Scrippet = (function(){

  function parser(text) {
    var lines = text.split("\n"),
        prevLine = false,
        script = [];
    
    for (var i=0; i < lines.length; i++) {
      var srcLine = lines[i],
          firstChar = srcLine[0],
          line = false;
      if( srcLine == '' ) {
        // Empty line...
      } else if(firstChar == '(') {
        line = { type:'parenthetical', content:srcLine };
      } else if( prevLine && (prevLine.type =='parenthetical' || prevLine.type == 'character')) {
        line = { type:'dialogue', content:srcLine };
      } else if ( srcLine == srcLine.toUpperCase() ){
        if( srcLine.match(/(INT|EXT|EST)/g) ) {
          line = { type:'sceneheader', content:srcLine };
        } else if( srcLine.match(/(CUT|FADE)/g) ) {
          line = { type:'transition', content:srcLine };
        } else {
          line = { type:'character', content:srcLine };
        }
      } else {
        line = { type:'action', content:srcLine };
      }
      if(line) {
        script.push(line);
        prevLine = line;
      }
    };
    return script;
  }
  
  var TEMPLATES = {
    container:     '<div class="scrippet">#{ content }</div>',
    sceneheader:   '<p class="sceneheader">#{ content }</p>',
    action:        '<p class="action">#{ content }</p>',
    character:     '<p class="character">#{ content }</p>',
    dialogue:      '<p class="dialogue">#{ content }</p>',
    parenthetical: '<p class="parenthetical">#{ content }</p>',
    transition:    '<p class="transition">#{ content }</p>'
  }
  
  // Simple, non-evaling, templating support
  function template(source, ctx) {
    if(typeof ctx != 'object') ctx = { content:ctx };
    return TEMPLATES[source].replace(/(#\{(.*?)\})/gim, function(cmdText){
      var cmds = cmdText.match(/#\{[\s]*(.*?)[\s]*?\}/)[1].split('.'),
          obj = ctx;
      for (var i=0; i < cmds.length; i++) { obj = obj[ cmds[i] ]; }
      return obj;
    });
  }
  
  function renderer(lines) {
    var html = '';
    for (var i=0; i < lines.length; i++) {
      html += template(lines[i].type, lines[i]);
    };
    return template('container', html);
  }
  
  return {
    templates: TEMPLATES,
    
    render: function(text) {
      var lines = parser(text);
      return renderer(lines);
    },
    
    renderTo: function(elemId, text) {
      document.getElementById(elemId).innerHTML = Scrippet.render(text);
    }
  }
})();