nail_polish 0.1.1 → 0.2.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: e3ba67ec01b5c63e131ad9ef42ab33f1bd34f6ce
-  data.tar.gz: f3e8829feb282e2baf0e71a0d6ca50291b8619f1
+  metadata.gz: eb99e0ed36d22ea73bd7d1adefe6a7761b352ce1
+  data.tar.gz: 15306c6b03975c3562fc6f3158298e44938f52c8
 SHA512:
-  metadata.gz: a95ed0112c6e6ddf26a19c6beef730d187cdc6be5b68cfce253a71d9f4792a8570aa7f0d9b2a214449c415c29ab3264b42c07e7a78919a880ddb651e0d7bb5af
-  data.tar.gz: f975b6189559c5b01c0fc262b4b4225719a03a4a365211fd0399a4e42c481b9211e43c457657c723011bf8d911255e54f039d6a1e3fcdd73c0ceaada4e0627c7
+  metadata.gz: fef3dd7d58bcd1d924f02b1ecb6ae2055d34ccd2dea0d4dea1c7e237a8aee288f3ad6bd03435d56409197f1199af983482ec24086205c43f6481d1281be63305
+  data.tar.gz: 1d58bcd96212a35041f8f19551b789060c72016b5c003b83ea0e2a463883c0447268d4b0d69313b44ec927b1e4c64c42b8c51cbc95dfd37be0e4778c3023daf5

data/README.rdoc

@@ -1,8 +1,6 @@
-= NailPolish: SocialChorus/SocialChorus OO FrontEnd
+= NailPolish: SocialChorus/SocialChorus OO Frontend
 
-NailPolish is a front-end framework used by the SocialCoder's a SocialChorus.
-
-SocialCoders use a modified version of OOCSS, and have an set of Backbone
+NailPolish is a frontend framework used by the SocialCoders at SocialChorus. With NailPolish, SocialCoders provide a modified version of OOCSS and a set of Backbone
 conventions.
 
 == TODO

data/app/assets/javascripts/nail_polish.js

@@ -9,13 +9,18 @@
 //= require nail_polish/overrides/global_publisher_adder
 //= require nail_polish/overrides/for_backbone
 //
+//= require ./nail_polish/model
+//= require ./nail_polish/validator
+//= require_tree ./nail_polish/templates
 //= require nail_polish/events
 //= require nail_polish/events/redirector
 //= require nail_polish/events/flasher
 //= require nail_polish/view
 //= require nail_polish/view/parent_finder
 //= require nail_polish/presenter
+//= require nail_polish/presenter_with_errors
 //= require_tree ./nail_polish/presenters
+//= require_tree ./nail_polish/models
+//= require_tree ./nail_polish/views
 //= require nail_polish/router
 //= require nail_polish/app
-

data/app/assets/javascripts/nail_polish/app.js

@@ -1,36 +1,48 @@
-//specs to come
-NailPolish.App = function() {};
+NailPolish.App = function(parent, opts) {
+  this.initialize(parent, opts);
+};
+
 NailPolish.App.extend = Backbone.Model.extend;
 
-_.extend(NailPolish.App.prototype, {
+_.extend(NailPolish.App.prototype, _.extend(_.clone(NailPolish.SubviewManager), {
   initialize: function(parent, opts) {
-    this.parent = parent;
+    this.$el = parent; // will act like a view when the parent finder encounters it
+    // TODO: switch naming to el/$el everywhere???
     this.opts = opts;
     this.init(parent, opts);
   },
 
   start: function () {
-    this.repository = this.bootstrap();
-    this.route();
+    this.repository = this.buildRepository();
     this.render();
+    this.route();
   },
 
   route: function() {
-    this.router = new (this.routerClass())();
+    this.router = new (this.routerClass(this.$el))();
     this.router.repository = this.repository;
     Backbone.history.start();
   },
 
   render: function() {
-    _.each(this.subViews(), function(view) {
-      view.parent = view.parent || this.parent;
-      view.render();
-    }.bind(this));
+    this.renderEach(this.subviews());
+    this.afterRender();
   },
 
-  bootstrapData: function() {
-    var data = data || JSON.parse($('#bootstrap-json').text());
-    return data;
+  afterRender: function(){
+
+  },
+
+  buildRepository: function() {
+    return this.bootstrap();
+  },
+
+  bootstrapData: function(selector) {
+    try {
+      return JSON.parse($(selector).html());
+    } catch(e) {
+      return {};
+    }
   },
 
   //Stuff for YOU to configure
@@ -39,12 +51,14 @@ _.extend(NailPolish.App.prototype, {
     //your init stuff here
   },
 
+  bootstrapDataSelector: "#bootstrap-json",
+
   bootstrap: function() {
     //override this if you want specific models in your repo
-    return this.bootstrapData();
+    return this.bootstrapData(this.bootstrapDataSelector);
   },
 
-  subViews: function() {
+  subviews: function() {
    //fill me in
 
    //return [
@@ -52,7 +66,7 @@ _.extend(NailPolish.App.prototype, {
    //]
   },
 
-  routerClass: function () {
+  routerClass: function() {
     //set this, yo
   }
-});
+}));

data/app/assets/javascripts/nail_polish/events.js

@@ -26,3 +26,5 @@ NailPolish.Events = {
     this.publisher.off(event, callback, context);
   }
 };
+
+NailPolish.Events['click'] = NailPolish.Events.isTouch() ? NailPolish.Events.startEvent+' ' : 'click ';

data/app/assets/javascripts/nail_polish/model.js

@@ -0,0 +1,49 @@
+/*
+  Base model class for NailPolish apps.
+  It is fully backwards-compatible with Backbone.Model.
+
+  It automatically populates `validationError` with server errors, if
+  there were any, i.e. given 422 JSON response from server:
+
+      {
+        errors: {
+          "username": ["is already in use"]
+        }
+      }
+
+  it populates model's `validationError` with:
+
+      {
+        "username": ["is already in use"]
+      }
+
+  This would also trigger an 'invalid' event on the model.
+*/
+NailPolish.Model = Backbone.Model.extend({
+  constructor: function() {
+    var result = Backbone.Model.apply(this, arguments);
+    this._initializeInternalEvents();
+    return result;
+  },
+
+  _initializeInternalEvents: function() {
+    this.listenTo(this, 'error', this._populateServerErrors);
+  },
+
+  _populateServerErrors: function(model, response, options) {
+    var errors = this._errors(response);
+    if (errors) {
+      model.validationError = errors;
+      model.trigger('invalid', model, errors, _.extend(options, { validationError: errors }));
+    }
+  },
+
+  _errors: function (response) {
+    var errors;
+    try {
+      return JSON.parse(response.responseText).errors;
+    } catch(e) {
+      return;
+    }
+  }
+});

data/app/assets/javascripts/nail_polish/models/dropdown.js

@@ -0,0 +1,9 @@
+NailPolish.Models.Dropdown = Backbone.Model.extend({
+  initialize: function(){
+    this.set({"options": this.options }, {silent: true})
+  },
+
+  selected: function(){
+    return this.get('selected_key') || _.keys(this.get('options'))[0];
+  }
+});

data/app/assets/javascripts/nail_polish/models/menu.js

@@ -0,0 +1 @@
+NailPolish.Models.Menu = Backbone.Model.extend({});

data/app/assets/javascripts/nail_polish/nail_polish.js

@@ -23,3 +23,5 @@ var NailPolish = {
 };
 
 NailPolish.Widget = {};
+NailPolish.Models = {};
+NailPolish.Views = {};

data/app/assets/javascripts/nail_polish/presenter.js

@@ -4,17 +4,17 @@ NailPolish.Presenter = function(presented) {
   this.init();
 };
 
-NailPolish.Presenter.prototype.initialize = function () {
+NailPolish.Presenter.prototype.initialize = function() {
   //Put your stuff here
 };
 
-NailPolish.Presenter.prototype.init = function () {
+NailPolish.Presenter.prototype.init = function() {
   //Put your stuff here
 };
 
 NailPolish.Presenter.extend = Backbone.Model.extend;
 
-NailPolish.Presenter.prototype.presentedToJSON = function () {
+NailPolish.Presenter.prototype.presentedToJSON = function() {
   var json;
   if (this.presented && this.presented.toJSON) {
     json = this.presented.toJSON();
@@ -22,22 +22,49 @@ NailPolish.Presenter.prototype.presentedToJSON = function () {
   return json || this.presented;
 };
 
-NailPolish.Presenter.prototype.inclusions = function () {
+NailPolish.Presenter.prototype.inclusions = function() {
   var inclusions = {};
-  _.each(this.include || [], function (prop) {
+  _.each(this.include || [], function(prop) {
      inclusions[prop] = this.inclusionFor(prop);
   }.bind(this));
   return inclusions;
 };
 
-NailPolish.Presenter.prototype.inclusionFor = function (attr) {
+NailPolish.Presenter.prototype.inclusionFor = function(attr) {
   var prop = this[attr];
   return _.isFunction(prop) ? prop.bind(this)() : prop;
 };
 
+/*
+  Returns a template-friendly json representation of `presented`.
+
+  Example:
+
+    var model = new Backbone.Model({ username: "socialcoder" });
+
+    var MyPresenter = NailPolish.Presenter.extend({
+      include: ["status", "likes"],
+
+      status: "better than ever",
+
+      likes: function() {
+        return ["clean code", "nice documentation"];
+      }
+    });
+
+    var presenter = new MyPresenter(model);
+
+    presenter.toJSON();
+
+    // {
+    //   "likes": ["clean code", "nice documentation"],
+    //   "status": "better than ever",
+    //   "username": "socialcoder",
+    //   "username_error": "is too awesome"
+    // }
+*/
 NailPolish.Presenter.prototype.toJSON = function() {
   var base = this.presentedToJSON();
   var inclusions = this.inclusions();
   return _.extend(base, inclusions);
 };
-

data/app/assets/javascripts/nail_polish/presenter_with_errors.js

@@ -0,0 +1,61 @@
+// Will become default after transition has finished
+NailPolish.PresenterWithErrors = NailPolish.Presenter.extend({});
+
+NailPolish.PresenterWithErrors.prototype.errors = function() {
+  if (!_.isObject(this.presented.validationError)) {
+    return {};
+  }
+
+  return _.reduce(this.presented.validationError, function(memo, attrErrors, attrName) {
+    memo[attrName + "_errors"] = attrErrors;
+    memo[attrName + "_error"] = attrErrors[0];
+    return memo;
+  }, {});
+};
+
+/*
+  Returns a template-friendly json representation of `presented`.
+
+  Example:
+
+    var MyModel = Backbone.Model.extend({
+      validate: function(attributes) {
+        var validate = new NailPolish.Validator();
+        validate.
+          attribute("username").
+          addRule("is too awesome", validate.is.notMatching(/^kaboom$/)).
+          addRule("is too long", validate.is.tooLong(5));
+        return validate.validate(attributes);
+      }
+    });
+
+    var model = new MyModel({ username: "socialcoder" });
+
+    var MyPresenter = NailPolish.Presenter.extend({
+      include: ["status", "likes"],
+
+      status: "better than ever",
+
+      likes: function() {
+        return ["clean code", "nice documentation"];
+      }
+    });
+
+    var presenter = new MyPresenter(model);
+    model.isValid();
+
+    presenter.toJSON();
+
+    // {
+    //   "likes": ["clean code", "nice documentation"],
+    //   "status": "better than ever",
+    //   "username": "socialcoder",
+    //   "username_error": "is too awesome",
+    //   "username_errors": ["is too awesome", "is too long"]
+    // }
+*/
+NailPolish.PresenterWithErrors.prototype.toJSON = function() {
+  var base = NailPolish.Presenter.prototype.toJSON.apply(this);
+  var errors = this.errors();
+  return _.extend(base, errors);
+};

data/app/assets/javascripts/nail_polish/presenters/dropdown.js

@@ -1,22 +1,17 @@
 NailPolish.Presenter.Dropdown = NailPolish.Presenter.extend({
-  include: ["selected_value", "selectable_items", "selected_key"],
+  include: ["selected_value", "selectable_items"],
 
-  selected_value: function(){
-    selected_option = this.presented.options[this.presented.selected]
-    return selected_option || _.values(this.presented.options)[0];
+  init: function() {
+    this.options = this.presented.get('options');
   },
 
-  selected_key: function() {
-    return this.presented.selected || _.keys(this.presented.options)[0];
+  selected_value: function(){
+    return this.options[this.presented.selected()];
   },
 
   selectable_items: function(){
-    returnValue = [];
-
-    _.each(this.presented.options, function(value, key){
-      returnValue.unshift({key: key, value: value});
+    return _.map(this.options, function(value, key){
+      return {key: key, value: value};
     });
-
-    return returnValue;
   }
 });

data/app/assets/javascripts/nail_polish/presenters/menu.js

@@ -0,0 +1,7 @@
+NailPolish.Presenter.Menu = NailPolish.Presenter.extend({
+  include: ['items'],
+
+  items: function() {
+    return [];
+  }
+});

data/app/assets/javascripts/nail_polish/router.js

@@ -1,6 +1,6 @@
-NailPolish.Router = Backbone.Router.extend({
-  initialize: function ($layout) {
-    this.$layout = $layout;
+NailPolish.Router = Backbone.Router.extend(_.extend(_.clone(NailPolish.SubviewManager), {
+  initialize: function ($el) {
+    this.$el = $el;
     this.history = [];
     this.on('route:start', this.storeHistory, this);
 
@@ -33,21 +33,31 @@ NailPolish.Router = Backbone.Router.extend({
     return this;
   },
 
+  fullPath: function() {
+    var history = Backbone.history
+    var path = history.location.pathname
+    if (history.getFragment().length) {
+      path = path + '#' + history.getFragment();
+    }
+    return path;
+  },
+
   page: function (views) {
-    NailPolish.Events.publish('page:new');  
-    this.$layout.empty();
+    NailPolish.Events.publish('page:new');
+    this.remove();
+    this.$el.empty();
     this.render(views);
   },
 
-  render: function (args) {
-    _.each(args, function (view) {
-      view.parent = view.parent || this.$layout;
-      view.repository = view.repository || this.repository;
-      view.render();
-    }.bind(this));
+  render: function (subviews) {
+    this.renderEach(subviews);
     this.afterRender();
   },
 
+  defaultParent: function() {
+    return this.$el;
+  },
+
   afterRender: function(){
     //put your after render stuff here
   },
@@ -55,7 +65,7 @@ NailPolish.Router = Backbone.Router.extend({
   // this is usually used for NailPolish.Events to publish a redirect event!
   redirect: function (path) {
     window.location = path;
-  }, 
+  },
 
   go: function(fragment) {
     this.navigate(fragment, {trigger: true});
@@ -75,4 +85,4 @@ NailPolish.Router = Backbone.Router.extend({
   storeHistory: function () {
     this.history.push(Backbone.history.fragment);
   }
-});
+}));