diff --git a/index.js b/index.js index 0edad33..7deb528 100644 --- a/index.js +++ b/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; diff --git a/library.css b/library.css new file mode 100644 index 0000000..bdcf2df --- /dev/null +++ b/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); +} \ No newline at end of file diff --git a/src/collection_view.js b/src/collection_view.js new file mode 100644 index 0000000..c2b6e35 --- /dev/null +++ b/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; diff --git a/src/library.js b/src/library.js index 798ef92..9e4bf10 100644 --- a/src/library.js +++ b/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; \ No newline at end of file +module.exports = Library; diff --git a/src/library_controller.js b/src/library_controller.js new file mode 100644 index 0000000..70d11b4 --- /dev/null +++ b/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; diff --git a/src/library_view.js b/src/library_view.js new file mode 100644 index 0000000..429e77e --- /dev/null +++ b/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;