Fountain.js

by franklovecchio

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://mattdaly.github.com/Fountain.js/assets/js/fountain.min.js"></script>
<div id="fountain-js"> 
<section id="workspace">
      <header>
        <div class="container">
          <ul id="inspector">
            <li></li>
          </ul>

          <p id="script-title"></p>

          <ul id="toolbar">
            <li class="resize"><a data-tooltip="Resize Script">Resize Script</a></li>
            <li class="dim"><a data-tooltip="Toggle Header">Toggle Header</a></li>
            <li class="dock"><a data-tooltip="Return To Dock">Return To Dock</a></li>
          </ul>
        </div>
      </header>

      <div id="script">
INT. HOUSE - DAY

MARY
I can't believe how easy it is to write in Fountain.

TOM
(typing)
Look! I just made a parenthetical!
       </div>
    </section>
</div>

CSS

body 
{
    background-color: #f7f7f7;
    color: #333333;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    margin: 0;
}

a { color: #ED303C; text-decoration: none; }
a:hover { text-decoration: underline; }

.container
{
    margin: 0 auto;
    position: relative;
    width: 850px;
}

header 
{
    background-color: #454545;
    color: #F0F0D8;
    font-size: 13px;
    height: 40px;
    line-height: 40px;
    width: 100%;
}

header::-moz-selection, header::selection { background: #454545; color: #fff; }

/* dock */
#dock 
{
    margin: 0;
}

#dock header
{
    margin-bottom: 25px;
}

#dock header h1 
{
    background: url('../images/fountain-24.png') 0 9px no-repeat;
    color: #fff;
    font-size: 16px;
    margin: 0;
    padding-left: 34px;
}

#dock blockquote { background: #fff; margin: 0; padding: 10px; }
#dock p.more-information { font-size: 12px; margin: 5px 0 25px 0; padding: 0; text-align: right; }
#dock #file-api { background: #fff; border: 3px dashed #454545; display: none; margin-top: 75px; text-align: center; }
#dock #file-api.over { border-color: #ED303C; cursor: pointer; }
#dock #file-api p { font-weight: bold; margin: 125px auto; }
#dock p.error { background: #fff url('../images/warning.png') 10px 10px no-repeat; font-weight: bold; margin-top: 75px; padding: 15px 15px 15px 50px; }

/* workspace */
#workspace
{
    color: #333333;
    display: none;
    float: left;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    position: relative;
    width: 100%;
}

#workspace header.dimmed 
{
    background-color: transparent;
}

#workspace header.dimmed p
{
    color: #333333;
    font-weight: bold;
}


#workspace header ul, 
#workspace header li, 
#workspace header p
{
    display: inline;
    float: left;
    margin: 0;
    padding: 0;  
}

#workspace header p
{
    color: #fff;
    font-size: 15px;
    height: 20px;
    line-height: 20px;
    margin-top: 10px;
    text-align: center;
    width:...

JavaScript

;
(function ($, window, document, undefined) {
  // element removal callback
  var removeThis = function () {
    $(this)
      .remove();
  };
  $.fn.fountain = function (args) {
    if (typeof args === 'object' || !args) {
      return this.each(function () {
        var $app = $(this),
          $dock = $(document.getElementById('dock')),
          $workspace = $(document.getElementById('workspace'));
        var dragOver = function (e) {
          $(this)
            .addClass('over');
          e.stopPropagation();
          e.preventDefault();
        };
        var dragLeave = function (e) {
          $(this)
            .removeClass('over');
          e.stopPropagation();
          e.preventDefault();
        };
        var loadScript = function (e) {
          e.preventDefault();
          e.stopPropagation();
          e = e.originalEvent;
          $(this)
            .removeClass('over');
          var file = e.dataTransfer.files[0],
            reader = new FileReader();
          if (file) {
            reader.onload = function (evt) {
              $app.trigger('fountain-js:loaded', [evt.target.result]);
            }
            reader.readAsText(file);
          }
        };
        if (!$app || !$dock || !$workspace) {
          console.log('Fountain.js - Environment not set up correctly.');
          return;
        }
        // dock
        $(document.getElementById('file-api'))
          .fadeIn()
          .on('dragleave', dragLeave)
          .on('dragover', dragOver)
          .on('drop', loadScript);
        // workspace                
        var settings = $.extend({}, $.fn.fountain.defaults, args),
          $header = $workspace.find('header'),
          $container = $header.find('.container'),
          $title = $(document.getElementById('script-title')),
          $navigation = $(document.getElementById('navigation')),
          $toolbar = $(document.getElementById('toolbar')),
          $toolbar =...