Completely rewrite the whole damn thing in react

app.js

@@ -5,24 +5,50 @@ app.config(function($stateProvider, $urlRouterProvider){
         url: '/',
         templateUrl: 'home'
     });
+
     $stateProvider.state('script', {
-        url: '/{scriptId:.+}',
+        url: '/:scriptId',
         views: {
             'nav': {
                 templateUrl: 'nav.html',
                 controller: 'Script',
             },
             '': {
-                templateUrl: 'script.html',
+                template: '<script data="script"></script>',
                 controller: 'Script',
             }
         },
         resolve: {
-            script: function($stateParams){
-                return new Firebase("https://screenwrite.firebaseio.com/"+$stateParams.scriptId);
+            script: function($stateParams, $rootScope, $firebase){
+                var fb = new Firebase("https://screenwrite.firebaseio.com/"+$stateParams.scriptId);
+
+                script = $firebase(fb).$asObject();
+                return script.$bindTo($rootScope, 'script');
+            }
+        },
+        onEnter: function($rootScope) {
+            if (!$rootScope.script)
+                $rootScope.script = {};
+            if (!$rootScope.script.lines)
+                $rootScope.script.lines = [{type:'scene' }];
+        },
+        onExit: function(script) {
+            script(); // unbind firebase
+        }
+    });
+
+    $stateProvider.state('script.view', {
+        url: '/view',
+        views: {
+            'nav@script': {
+                templateUrl: 'readonly-nav.html',
+            },
+            '@script': {
+                templateUrl: 'readonly.html',
             }
         }
     });
+
 });
 app.run(function($rootScope, $state, types, $timeout, $window){
     $rootScope.edit = function(line){
@@ -58,19 +84,14 @@ app.run(function($rootScope, $state, types, $timeout, $window){
         $state.go('script', { scriptId: guid() });
     };
 
+    $rootScope.$on('$stateChangeError', function(){
+        console.log('Error:', arguments);
+    });
+
 });
 app.constant('types', ['scene', 'action', 'character', 'dialogue', 'parenthetical', 'transition', 'shot', 'text']);
-app.controller('Script', function($scope, types, script, $localStorage, $stateParams, $firebase, cursorPos){
-    script = $firebase(script).$asObject();
-    script.$bindTo($scope, 'script').then(function(unbind){
-        if (!$scope.script)
-            $scope.script = {};
-        if (!$scope.script.lines)
-            $scope.script.lines = [{type:'scene' }];
-        $localStorage[$stateParams.scriptId] = $scope.script;
-        document.title = 'Screenwriter: ' + $scope.script.title;
-        return unbind;
-    });
+app.controller('Script', function($scope, types, $localStorage, $stateParams, $firebase, cursorPos){
+    document.title = 'Screenwriter: ' + $scope.script.title;
 
     $scope.$watch('script.title', function(newVal, oldVal){
         document.title = 'Screenwriter: ' + newVal;
@@ -305,3 +326,14 @@ app.filter('unique', function(){
         });
     };
 });
+
+app.directive('script', function($timeout){
+    return {
+        restrict: 'E',
+        link: function($scope, $element, $attrs) {
+            $timeout(function(){
+                React.renderComponent(Script({ script: $scope.$eval($attrs.data) }), $element[0]);
+            }, true);
+        }
+    };
+});

bower.json

@@ -25,6 +25,10 @@
     "firebase": "~1",
     "ngstorage": "~0",
     "underscore": "~1",
-    "angular": "~1"
+    "angular": "~1",
+    "react": "~0.12.2",
+    "reactfire": "~0.4.0",
+    "react-router": "~0.11.6",
+    "react-bootstrap": "~0.13.0"
   }
 }

bower_components/react-bootstrap/.bower.json

@@ -0,0 +1,31 @@
+{
+  "name": "react-bootstrap",
+  "version": "0.13.0",
+  "homepage": "http://react-bootstrap.github.io/",
+  "author": "Stephen J. Collings <stevoland@gmail.com>",
+  "license": "MIT",
+  "main": [
+    "react-bootstrap.js"
+  ],
+  "keywords": [
+    "react",
+    "react-component",
+    "boostrap"
+  ],
+  "ignore": [
+    "**/.*"
+  ],
+  "dependencies": {
+    "react": ">= 0.12.0"
+  },
+  "_release": "0.13.0",
+  "_resolution": {
+    "type": "version",
+    "tag": "v0.13.0",
+    "commit": "56230617a6ee68f02fcab7de6d2f69167c70541b"
+  },
+  "_source": "git://github.com/react-bootstrap/react-bootstrap-bower.git",
+  "_target": "~0.13.0",
+  "_originalSource": "react-bootstrap",
+  "_direct": true
+}

bower_components/react-bootstrap/Accordion.js

@@ -0,0 +1,15 @@
+define(function (require, exports, module) {var React = require('react');
+var PanelGroup = require('./PanelGroup');
+
+var Accordion = React.createClass({displayName: 'Accordion',
+  render: function () {
+    return (
+      React.createElement(PanelGroup, React.__spread({},  this.props, {accordion: true}), 
+        this.props.children
+      )
+    );
+  }
+});
+
+module.exports = Accordion;
+});

bower_components/react-bootstrap/Affix.js

@@ -0,0 +1,24 @@
+define(function (require, exports, module) {var React = require('react');
+var joinClasses = require('./utils/joinClasses');
+var AffixMixin = require('./AffixMixin');
+var domUtils = require('./utils/domUtils');
+
+var Affix = React.createClass({displayName: 'Affix',
+  statics: {
+    domUtils: domUtils
+  },
+
+  mixins: [AffixMixin],
+
+  render: function () {
+    var holderStyle = {top: this.state.affixPositionTop};
+    return (
+      React.createElement("div", React.__spread({},  this.props, {className: joinClasses(this.props.className, this.state.affixClass), style: holderStyle}), 
+        this.props.children
+      )
+    );
+  }
+});
+
+module.exports = Affix;
+});

bower_components/react-bootstrap/AffixMixin.js

@@ -0,0 +1,132 @@
+define(function (require, exports, module) {/* global window, document */
+
+var React = require('react');
+var domUtils = require('./utils/domUtils');
+var EventListener = require('./utils/EventListener');
+
+var AffixMixin = {
+  propTypes: {
+    offset: React.PropTypes.number,
+    offsetTop: React.PropTypes.number,
+    offsetBottom: React.PropTypes.number
+  },
+
+  getInitialState: function () {
+    return {
+      affixClass: 'affix-top'
+    };
+  },
+
+  getPinnedOffset: function (DOMNode) {
+    if (this.pinnedOffset) {
+      return this.pinnedOffset;
+    }
+
+    DOMNode.className = DOMNode.className.replace(/affix-top|affix-bottom|affix/, '');
+    DOMNode.className += DOMNode.className.length ? ' affix' : 'affix';
+
+    this.pinnedOffset = domUtils.getOffset(DOMNode).top - window.pageYOffset;
+
+    return this.pinnedOffset;
+  },
+
+  checkPosition: function () {
+    var DOMNode, scrollHeight, scrollTop, position, offsetTop, offsetBottom,
+        affix, affixType, affixPositionTop;
+
+    // TODO: or not visible
+    if (!this.isMounted()) {
+      return;
+    }
+
+    DOMNode = this.getDOMNode();
+    scrollHeight = document.documentElement.offsetHeight;
+    scrollTop = window.pageYOffset;
+    position = domUtils.getOffset(DOMNode);
+    offsetTop;
+    offsetBottom;
+
+    if (this.affixed === 'top') {
+      position.top += scrollTop;
+    }
+
+    offsetTop = this.props.offsetTop != null ?
+      this.props.offsetTop : this.props.offset;
+    offsetBottom = this.props.offsetBottom != null ?
+      this.props.offsetBottom : this.props.offset;
+
+    if (offsetTop == null && offsetBottom == null) {
+      return;
+    }
+    if (offsetTop == null) {
+      offsetTop = 0;
+    }
+    if (offsetBottom == null) {
+      offsetBottom = 0;
+    }
+
+    if (this.unpin != null && (scrollTop + this.unpin <= position.top)) {
+      affix = false;
+    } else if (offsetBottom != null && (position.top + DOMNode.offsetHeight >= scrollHeight - offsetBottom)) {
+      affix = 'bottom';
+    } else if (offsetTop != null && (scrollTop <= offsetTop)) {
+      affix = 'top';
+    } else {
+      affix = false;
+    }
+
+    if (this.affixed === affix) {
+      return;
+    }
+
+    if (this.unpin != null) {
+      DOMNode.style.top = '';
+    }
+
+    affixType = 'affix' + (affix ? '-' + affix : '');
+
+    this.affixed = affix;
+    this.unpin = affix === 'bottom' ?
+      this.getPinnedOffset(DOMNode) : null;
+
+    if (affix === 'bottom') {
+      DOMNode.className = DOMNode.className.replace(/affix-top|affix-bottom|affix/, 'affix-bottom');
+      affixPositionTop = scrollHeight - offsetBottom - DOMNode.offsetHeight - domUtils.getOffset(DOMNode).top;
+    }
+
+    this.setState({
+      affixClass: affixType,
+      affixPositionTop: affixPositionTop
+    });
+  },
+
+  checkPositionWithEventLoop: function () {
+    setTimeout(this.checkPosition, 0);
+  },
+
+  componentDidMount: function () {
+    this._onWindowScrollListener =
+      EventListener.listen(window, 'scroll', this.checkPosition);
+    this._onDocumentClickListener =
+      EventListener.listen(document, 'click', this.checkPositionWithEventLoop);
+  },
+
+  componentWillUnmount: function () {
+    if (this._onWindowScrollListener) {
+      this._onWindowScrollListener.remove();
+    }
+
+    if (this._onDocumentClickListener) {
+      this._onDocumentClickListener.remove();
+    }
+  },
+
+  componentDidUpdate: function (prevProps, prevState) {
+    if (prevState.affixClass === this.state.affixClass) {
+      this.checkPositionWithEventLoop();
+    }
+  }
+};
+
+module.exports = AffixMixin;
+});

bower_components/react-bootstrap/Alert.js

@@ -0,0 +1,60 @@
+define(function (require, exports, module) {var React = require('react');
+var joinClasses = require('./utils/joinClasses');
+var classSet = require('./utils/classSet');
+var BootstrapMixin = require('./BootstrapMixin');
+
+
+var Alert = React.createClass({displayName: 'Alert',
+  mixins: [BootstrapMixin],
+
+  propTypes: {
+    onDismiss: React.PropTypes.func,
+    dismissAfter: React.PropTypes.number
+  },
+
+  getDefaultProps: function () {
+    return {
+      bsClass: 'alert',
+      bsStyle: 'info'
+    };
+  },
+
+  renderDismissButton: function () {
+    return (
+      React.createElement("button", {
+        type: "button", 
+        className: "close", 
+        onClick: this.props.onDismiss, 
+        'aria-hidden': "true"}, 
+        "×"
+      )
+    );
+  },
+
+  render: function () {
+    var classes = this.getBsClassSet();
+    var isDismissable = !!this.props.onDismiss;
+
+    classes['alert-dismissable'] = isDismissable;
+
+    return (
+      React.createElement("div", React.__spread({},  this.props, {className: joinClasses(this.props.className, classSet(classes))}), 
+        isDismissable ? this.renderDismissButton() : null, 
+        this.props.children
+      )
+    );
+  },
+
+  componentDidMount: function() {
+    if (this.props.dismissAfter && this.props.onDismiss) {
+      this.dismissTimer = setTimeout(this.props.onDismiss, this.props.dismissAfter);
+    }
+  },
+
+  componentWillUnmount: function() {
+    clearTimeout(this.dismissTimer);
+  }
+});
+
+module.exports = Alert;
+});