Modularize Library view/controller.

index.js

@@ -1,3 +1,9 @@
 "use strict";
 
-module.exports = require("./src/library");
+var Library = require("./src/library");
+Library.Controller = require("./src/library_controller");
+Library.View = require("./src/library_controller");
+Library.Collection = {};
+Library.Collection.View = require("./src/collection_view");
+
+module.exports = Library;

library.css

@@ -0,0 +1,75 @@
+.library {
+  overflow: auto;
+}
+
+.library .navigation {
+  padding: 20px;
+
+  font-size: 14px;
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  bottom: 0px;
+  width: 300px;
+}
+
+.library .navigation input {
+  font-family: 'Open Sans';
+  width: 100%;
+  display: block;
+  margin-bottom: 20px;
+}
+
+/* The import button */
+.library .navigation a.import-document {
+  font-family: 'Avenir LT W01 85 Heavy', 'Montserrat', 'Source Sans Pro';
+  font-size: 16px;
+}
+
+.library .navigation .label {
+  margin-top: 30px;
+  padding-bottom: 20px;
+  font-family: 'Avenir LT W01 85 Heavy', 'Montserrat', 'Source Sans Pro';
+  font-size: 16px;
+}
+
+.library .navigation .explanation {
+  padding-bottom: 20px;
+}
+
+.library .collection {
+   background: white;
+   position: absolute;
+   left: 300px;
+   top: 0px;
+   bottom: 0px;
+   width: 800px;
+}
+
+
+/* Collection */
+
+.collection {
+
+}
+
+.collection a.document {
+  display: block;
+  background: white;
+  width: 400px;
+  height: 160px;
+  padding: 30px 30px;
+  border-right: 1px solid #eee;
+  border-bottom: 1px solid #eee;
+  float: left;
+}
+
+.collection a.document .title {
+  color: #1B6685;
+  font-family: 'Avenir LT W01 85 Heavy', 'Montserrat', 'Source Sans Pro';
+  font-size: 16px;
+}
+
+.collection a.document:hover .title {
+  color: rgba(11, 157, 217, 1);
+}

src/collection_view.js

@@ -0,0 +1,52 @@
+"use strict";
+
+var _ = require("underscore");
+var util = require('substance-util');
+var html = util.html;
+var View = require("substance-application").View;
+var $$ = require("substance-application").$$;
+
+// Substance.Collection.View
+// ==========================================================================
+//
+// The Substance Collection display
+
+var CollectionView = function(library) {
+  View.call(this);
+
+  this.$el.addClass('collection');
+  this.library = library;
+};
+
+CollectionView.Prototype = function() {
+
+  // Rendering
+  // --------
+  //
+  // .collection
+  //   .title
+
+  this.render = function() {
+    // Render the collection
+    var records = this.library.collection.records;
+
+    _.each(records, function(record) {
+      this.el.appendChild($$('a.document', {
+        href: "#"+record.id,
+        children: [
+          $$('.title', { text: record.title })
+        ]
+      }));
+    }, this);
+    return this;
+  };
+
+  this.dispose = function() {
+    this.stopListening();
+  };
+};
+
+CollectionView.Prototype.prototype = View.prototype;
+CollectionView.prototype = new CollectionView.Prototype();
+
+module.exports = CollectionView;

src/library.js

@@ -46,11 +46,6 @@ var Library = function(options) {
   // Call parent constructor
   // --------
 
-  // options.schema = SCHEMA;
-
-  console.log(options);
-
-  // debugger;
   Data.Graph.call(this, SCHEMA, options);
 
   // Seed the doc
@@ -126,4 +121,4 @@ Object.defineProperties(Library.prototype, {
   // }
 });
 
-module.exports = Library;
+module.exports = Library;

src/library_controller.js

@@ -0,0 +1,72 @@
+"use strict";
+
+var _ = require("underscore");
+var Controller = require("substance-application").Controller;
+var LibraryView = require("./library_view");
+var util = require("substance-util");
+
+
+// Substance.Library.Controller
+// -----------------
+//
+
+var LibraryController = function(library) {
+  this.library = library; 
+
+  this.collection = this.library.getCollection("docs");
+
+  Controller.call(this);
+
+  // Create library view
+  this.view = new LibraryView(this);
+};
+
+
+LibraryController.Prototype = function() {
+
+  this.createView = function() {
+    var view = new LibraryView(this);
+    return view;
+  };
+
+  // Transitions
+  // ==================================
+
+
+  // Provides an array of (context, controller) tuples that describe the
+  // current state of responsibilities
+  // --------
+  // 
+  // E.g., when a document is opened:
+  //    ["application", "document"]
+  // with controllers taking responisbility:
+  //    [this, this.document]
+  //
+  // The child controller (e.g., document) should itself be allowed to have sub-controllers.
+  // For sake of prototyping this is implemented manually right now.
+  // TODO: discuss naming
+
+  this.getActiveControllers = function() {
+    var result = [ ["sandbox", this] ];
+
+    var state = this.state;
+
+    if (state === "editor") {
+      result = result.concat(this.editor.getActiveControllers());
+    } else if (state === "test_center") {
+      result.push(["test_center", this.testRunner]);
+    }
+    return result;
+  };
+};
+
+
+// Exports
+// --------
+
+LibraryController.Prototype.prototype = Controller.prototype;
+LibraryController.prototype = new LibraryController.Prototype();
+_.extend(LibraryController.prototype, util.Events);
+
+
+module.exports = LibraryController;

src/library_view.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var _ = require("underscore");
+var util = require('substance-util');
+var html = util.html;
+var View = require("substance-application").View;
+var CollectionView = require("./collection_view");
+
+
+// Substance.Library.View
+// ==========================================================================
+//
+// The Substance Document Editor
+
+var LibraryView = function(library) {
+  View.call(this);
+
+  this.$el.addClass('library');
+  this.library = library;
+
+  this.collectionView = new CollectionView(library);
+};
+
+LibraryView.Prototype = function() {
+
+  // Rendering
+  // --------
+  //
+
+  this.render = function() {
+    this.$el.html(html.tpl('library', this.library));
+
+    // // Render current collection
+    this.$('.collection').replaceWith(this.collectionView.render().el);
+    return this;
+  };
+
+  this.dispose = function() {
+    this.stopListening();
+  };
+};
+
+LibraryView.Prototype.prototype = View.prototype;
+LibraryView.prototype = new LibraryView.Prototype();
+
+module.exports = LibraryView;