nail_polish 0.1.1 → 0.2.6

data/app/assets/javascripts/nail_polish/templates/dropdown.mustache

@@ -0,0 +1,14 @@
+<div class="row dropdown-toggle {{name}}-dropdown-toggle">
+  <div class="unit">
+    <div id="{{name}}" class="dropdown-selected-option" data-option='{{selected_key}}'>
+      {{selected_value}}
+    </div>
+  </div>
+  <div class="unit-right caret"></div>
+</div>
+
+<ul class="dropdown-menu {{name}}-dropdown-menu hidden">
+  {{#selectable_items}}
+  <li class="menu-item" data-option={{key}}>{{value}}</li>
+  {{/selectable_items}}
+</ul>

data/app/assets/javascripts/nail_polish/templates/menu.mustache

@@ -0,0 +1,22 @@
+<div class='inner-right menu-item-wrapper'>
+  <div class='menu-name'>
+    <a href='javascript:void(0);' class="small menu-trigger button">
+      <span class="white-down-arrow">{{trigger_link_text}}</span>
+    </a>
+  </div>
+
+  <div class='menu-items hidden'>
+    <div class='menu-caret'></div>
+    {{#items}}
+    <div class='row menu-item'>
+      <div class='inner half'>
+        <a href="{{path}}">
+          <h3 class="icon {{icon_class}}">
+            {{link_text}}
+          </h3>
+        </a>
+      </div>
+    </div>
+    {{/items}}
+  </div>
+</div>

data/app/assets/javascripts/nail_polish/templates/modal.mustache

@@ -0,0 +1,5 @@
+<div id='overlay'>
+  <div class='modal l-modal'>
+    {{>modal_content}}
+  </div>
+</div>

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

@@ -0,0 +1,28 @@
+NailPolish.SubviewManager = {
+  renderEach: function (subviews) {
+    this._subviews = subviews;
+
+    _.each(subviews, function (view) {
+      if(view) {
+        view.parent = view.parent || this.defaultParent();
+        view.repository = view.repository || this.repository;
+        view.render();
+      }
+    }.bind(this));
+  },
+
+  remove: function() {
+    this.removeSelf();
+
+    _.each(this._subviews, function(subview) {
+      if (subview){ 
+        subview.remove();
+      }
+    });
+  },
+
+  removeSelf: function() { /* override me */ },
+  defaultParent: function() { 
+    return this; 
+  }
+};

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

@@ -0,0 +1,147 @@
+/*
+  Provides errors object builder for Backbone.js models.
+  Follows Backbone.js validation conventions.
+*/
+
+NailPolish.Validator = function() {
+  this._attributeRuleSets = {};
+};
+
+/*
+  Starts the validations chain for a particular attribute(s).
+  See documentation for `NailPolish.Validator.RuleSet.prototype.addRule` below.
+*/
+NailPolish.Validator.prototype.attribute = function() {
+  var ruleSet = new NailPolish.Validator.RuleSet();
+
+  _.each(arguments, function(attributeName) {
+    var attributeRuleSet = this._attributeRuleSets[attributeName] ||
+      new NailPolish.Validator.RuleSet();
+    attributeRuleSet.chain(ruleSet);
+    this._attributeRuleSets[attributeName] = attributeRuleSet;
+  }, this);
+
+  return ruleSet;
+};
+
+/*
+  Returns an object containing errors or `undefined` if there were none.
+
+  Example:
+
+    validate.validate()
+
+    // {
+    //   "username" : ["is too short", "must not contain whitespace"],
+    //   "age": ["is not a number"]
+    // }
+*/
+NailPolish.Validator.prototype.validate = function(attributes) {
+  var errors = {};
+
+  _.each(attributes, function(attributeValue, attributeName) {
+    var ruleSet = this._attributeRuleSets[attributeName];
+    if (!ruleSet) return;
+
+    _.each(ruleSet.rules(), function(rule) {
+      if (rule(attributeValue, attributeName)) {
+        errors[attributeName] = errors[attributeName] || [];
+        errors[attributeName].push(rule.message);
+      }
+    }, this);
+  }, this);
+
+  return _.isEmpty(errors) ? undefined : errors;
+};
+
+/*
+  Built-in validations.
+
+  Usage:
+
+    var validate = new NailPolish.Validator();
+    validate.
+      attribute("username").
+      addRule("is too short", validate.is.tooShort(5));
+
+  Extending:
+
+    _.extend(NailPolish.Validator.prototype.is, {
+      whitespaceFree: function() {
+        return function(value) { return undefined !== value && value.match(/\s/); }
+      }
+    });
+
+    ...
+
+    validate.
+      attribute("username").
+      addRule("must not contain whitespace", validate.is.whitespaceFree());
+*/
+(function() {
+  var notEmpty = function(value) {
+    return null != value && "" !== value;
+  };
+
+  NailPolish.Validator.prototype.is = {
+    required: function() {
+      return function(value) { return !notEmpty(value); };
+    },
+
+    tooShort: function(minLength) {
+      return function(value) { return notEmpty(value) && value.length < minLength; };
+    },
+
+    tooLong: function(maxLength) {
+      return function(value) { return notEmpty(value) && value.length > maxLength; };
+    },
+
+    notMatching: function(pattern) {
+      return function(value) { return notEmpty(value) && !String(value).match(pattern); }
+    }
+  };
+})();
+
+NailPolish.Validator.RuleSet = function() {
+  this._rules = [];
+  this._chainedRuleSets = [];
+};
+
+/*
+  Defines validation rule and an error message for a particular attribute(s).
+
+  Attribute is considered to be *invalid* if the validation function returns a truthy value.
+
+  Multiple calls to `addRule` can be chained to add as many validations as needed.
+
+  In case of custom validation functions, it's up to you to make sure that
+  validation functions don't depend on each other and are capable of handling
+  any *possible* input, be it `null`, `undefined`, or an actual value.
+
+  Usage:
+
+    validate.
+      attribute("username", "email").
+      addRule("is already in use", function(attrValue, attrName) {
+        return this.collection.detect(function(user) {
+          return user.get(attrName) == attrValue;
+        });
+      }.bind(this));
+*/
+NailPolish.Validator.RuleSet.prototype.addRule = function(errorMessage, validatingFunc) {
+  validatingFunc.message = errorMessage;
+  this._rules.push(validatingFunc);
+  return this;
+}
+
+/* private */
+NailPolish.Validator.RuleSet.prototype.chain = function(ruleSet) {
+  this._chainedRuleSets.push(ruleSet);
+}
+
+/* private */
+NailPolish.Validator.RuleSet.prototype.rules = function() {
+  return _.reduce(this._chainedRuleSets, function(memo, ruleSet) {
+    return memo.concat(ruleSet.rules());
+  }, this._rules);
+}

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

@@ -1,4 +1,4 @@
-NailPolish.View = Backbone.View.extend({
+NailPolish.View = Backbone.View.extend(_.extend(_.clone(NailPolish.SubviewManager), {
   addListeners: {},
   presenterClass: function () {
     return NailPolish.Presenter;
@@ -8,7 +8,14 @@ NailPolish.View = Backbone.View.extend({
     opts = opts || {};
     this.parent = (this.parent && $(this.parent)) || opts.parent;
     this.repository = opts.repository;
-    this.attachmentMethod = this.attachmentMethod || 'append';
+    this.attachmentMethod = opts.attachmentMethod || this.attachmentMethod || 'append';
+    this.parentSelector = opts.parentSelector || this.parentSelector;
+    this.templateName = opts.templateName || this.templateName;
+    if (opts.presenterClass) {
+      this.presenterClass = function() {
+        return opts.presenterClass;
+      };
+    }
     this.init(opts);
   },
 
@@ -27,11 +34,8 @@ NailPolish.View = Backbone.View.extend({
     return [];
   },
 
-  renderSubviews: function () {
-    _.each(this.subviews(), function (view) {
-      view.parent = view.parent || this;
-      view.render();
-    }.bind(this));
+  renderSubviews: function() {
+    this.renderEach(this.subviews());
   },
 
   attachToParent: function () {
@@ -70,11 +74,16 @@ NailPolish.View = Backbone.View.extend({
   presenter: function () {
     var presented = this.model || this.collection || {};
     var presenter = new (this.presenterClass())(presented);
+    presenter.repository = presenter.repository || this.repository;
     return presenter.toJSON();
   },
 
   partials: function () {
     // override with own partials if necessary
     return {};
+  },
+
+  removeSelf: function() {
+    Backbone.View.prototype.remove.apply(this);
   }
-});
+}));

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

@@ -0,0 +1,44 @@
+NailPolish.Views.Form = NailPolish.View.extend({
+  formAttrs: [], /* implement in subclass */
+
+  init: function(){
+    this.listenTo(this.model, 'invalid', this.addErrors);
+  },
+
+  readAttributes: function() {
+    var attrs = {};
+
+    _.each(this.formAttrs, function(name) {
+      attrs[name] = this.readAttribute(name);
+    }.bind(this));
+
+    _.extend(attrs, this.readAdditionalAttributes());
+
+    if(this.model.id) { _.extend(attrs, {'_method' : 'put'}); }
+    return attrs;
+  },
+
+  readAttribute: function(attr) {
+    return this.$('[name=' + attr  + ']').val();
+  },
+
+  readAdditionalAttributes: function() {
+    return {}; /* override for additional form stuff */
+  },
+
+  addErrors: function() {
+    var errorKeys = _.keys(this.model.validationError);
+    var selector = _.map(errorKeys, function(key) {
+      return ".input-row." + key;
+    }).join(', ');
+    this.$(selector).addClass('error');
+  },
+
+  clearErrors: function() {
+    _.each(this.formAttrs, function(key) {
+      this.model.set(key + '_error', undefined);
+    }.bind(this));
+
+    this.$('.input-row').removeClass('error');
+  }
+});

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

@@ -1,22 +1,48 @@
 NailPolish.Widget.Dropdown = NailPolish.View.extend({
-  templateName: 'templates/dropdown',
+  templateName: 'nail_polish/templates/dropdown',
 
   events: {
     'click .dropdown-toggle': 'toggle',
-    'click .menu-item': 'setSelected'
+    'click .menu-item': 'setSelected',
+    'click .dropdown-menu': 'stopPropagation'
   },
 
+  hiddenClass: 'hidden',
+
   init: function(){
-    this.className      = this.model.name + '-drop-down';
-    this.menuSelector   = '.' + this.model.name + '-dropdown-menu';
+    this.className      = this.model.get('name') + '-drop-down';
+    this.menuSelector   = '.' + this.model.get('name') + '-dropdown-menu';
   },
 
   presenterClass: function () {
     return NailPolish.Presenter.Dropdown;
   },
 
-  toggle: function() {
-    $(this.menuSelector).toggleClass(this.hiddenClass);
+  toggle: function(e) {
+    if (this.menuIsVisible()) {
+      this.hideMenu.bind(this)();
+    } else {
+      this.showMenu();
+      e.stopPropagation();
+    }
+  },
+
+  menuIsVisible: function() {
+    return this.$(this.menuSelector).is(':visible');
+  },
+
+  hideMenu: function() {
+    this.$el.find(this.menuSelector).addClass(this.hiddenClass);
+    this.removeBodyListener();
+  },
+
+  showMenu: function() {
+    this.$el.find(this.menuSelector).removeClass(this.hiddenClass);
+    $('body').on(NailPolish.Events.click, this.hideMenu.bind(this));
+  },
+
+  removeBodyListener: function() {
+    $('body').off(NailPolish.Events.click, this.hideMenu.bind(this));
   },
 
   renderTemplate: function () {
@@ -26,15 +52,17 @@ NailPolish.Widget.Dropdown = NailPolish.View.extend({
     this.$el.html(rendered);
   },
 
-  hiddenClass: 'hidden',
-
   setSelected: function(e){
     var $target = $(e.target);
-    this.model.selected = $target.attr("data-option");
+    this.model.set('selected_key', $target.attr("data-option"));
     this.render();
     this.afterSelect();
   },
 
+  stopPropagation: function(e) {
+    e.stopPropagation();
+  },
+
   afterSelect: function() {
     //overwrite me in subclass if you need to do stuffs
   },

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

@@ -3,7 +3,7 @@ NailPolish.Widget.Flash = NailPolish.View.extend({
   className: 'flash',
   parentSelector: '#flash-container',
   attachmentMethod: 'html',
-  animationLength: 500,
+  animationLength: 1000,
   showFor: 2000,
 
   addListeners: {
@@ -20,17 +20,17 @@ NailPolish.Widget.Flash = NailPolish.View.extend({
   },
 
   show: function () {
-    window.scrollTo(0, 0);
-    this.$el.css('opacity', 0);
     this.$el.show();
-    this.$el.animate({opacity: 1}, this.animationLength);
-
+    this.$el.find('.flash').css('opacity', 1);
     setTimeout(this.hide.bind(this), this.showFor);
   },
 
   hide: function () {
-    this.$el.animate(
-      {opacity: 0}, this.animationLength, this.$el.hide.bind(this.$el)
-    );
+    this.$el.find('.flash').css('opacity', 0);
+    setTimeout(this.removeFlash.bind(this), this.animationLength);
+  },
+
+  removeFlash: function() {
+    this.$el.hide();
   }
 });

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

@@ -0,0 +1,61 @@
+NailPolish.Widget.Menu = NailPolish.View.extend({
+  parentSelector: '.menu-container',
+  templateName: 'nail_polish/templates/menu',
+  addListeners: {
+    "click .menu-trigger": 'toggleMenu',
+    "click .menu-item a": 'menuItemClick'
+  },
+
+  onMenuItemClick: function (e) {
+    // hook in here
+  },
+
+  presenterClass: function() {
+    return NailPolish.Presenter.Menu;
+  },
+
+  toggleMenu: function(e) {
+    if (this.menuIsVisible()) {
+      this.hideMenu();
+    } else {
+      this.hideAllMenus();
+      this.showMenu(e);
+    }
+  },
+
+  menuIsVisible: function() {
+    return this.$('.menu-items').is(':visible');
+  },
+
+  showMenu: function(e) {
+    this.$('.menu-trigger').addClass("selected");
+    this.$('.menu-items').css("display", "block");
+    this.onBodyClick = this.hideMenu.bind(this);
+    $('body').on(NailPolish.Events.click, this.onBodyClick);
+    e.stopPropagation();
+    e.preventDefault();
+  },
+
+  hideMenu: function() {
+    this.$('.menu-trigger').removeClass("selected");
+    this.$('.menu-items').css("display", "none");
+    this.removeBodyListener();
+  },
+
+  hideAllMenus: function() {
+    $('.menu-trigger').removeClass("selected");
+    $('.menu-items').css("display", "none");
+  },
+
+  removeBodyListener: function() {
+    if(this.onBodyClick){
+      $('body').off(NailPolish.Events.click, this.onBodyClick);
+      this.onBodyClick = undefined;
+    }
+  },
+
+  menuItemClick: function(e) {
+    this.onMenuItemClick(e);
+    this.hideMenu();
+  }
+});