uikit-rails 0.0.2 → 1.0.1

data/vendor/assets/javascripts/ui.dialog.js

@@ -1,252 +0,0 @@
-
-/**
- * Active dialog.
- */
-
-var active;
-
-/**
- * Expose `Dialog`.
- */
-
-exports.Dialog = Dialog;
-
-/**
- * Return a new `Dialog` with the given 
- * (optional) `title` and `msg`.
- *
- * @param {String} title or msg
- * @param {String} msg
- * @return {Dialog}
- * @api public
- */
-
-exports.dialog = function(title, msg){
-  switch (arguments.length) {
-    case 2:
-      return new Dialog({ title: title, message: msg });
-    case 1:
-      return new Dialog({ message: title });
-  }
-};
-
-/**
- * Initialize a new `Dialog`.
- *
- * Options:
- *
- *    - `title` dialog title
- *    - `message` a message to display
- *
- * Emits:
- *
- *    - `show` when visible
- *    - `hide` when hidden
- *
- * @param {Object} options
- * @api public
- */
-
-function Dialog(options) {
-  ui.Emitter.call(this);
-  options = options || {};
-  this.template = html;
-  this.el = $(this.template);
-  this.render(options);
-  if (active && !active.hiding) active.hide();
-  if (Dialog.effect) this.effect(Dialog.effect);
-  active = this;
-};
-
-/**
- * Inherit from `Emitter.prototype`.
- */
-
-Dialog.prototype = new ui.Emitter;
-
-/**
- * Render with the given `options`.
- *
- * @param {Object} options
- * @api public
- */
-
-Dialog.prototype.render = function(options){
-  var el = this.el
-    , title = options.title
-    , msg = options.message
-    , self = this;
-
-  el.find('.close').click(function(){
-    self.emit('close');
-    self.hide();
-    return false;
-  });
-
-  el.find('h1').text(title);
-  if (!title) el.find('h1').remove();
-
-  // message
-  if ('string' == typeof msg) {
-    el.find('p').text(msg);
-  } else if (msg) {
-    el.find('p').replaceWith(msg.el || msg);
-  }
-
-  setTimeout(function(){
-    el.removeClass('hide');
-  }, 0);
-};
-
-/**
- * Enable the dialog close link.
- *
- * @return {Dialog} for chaining
- * @api public
- */
-
-Dialog.prototype.closable = function(){
-  this.el.addClass('closable');
-  return this;
-};
-
-/**
- * Set the effect to `type`.
- *
- * @param {String} type
- * @return {Dialog} for chaining
- * @api public
- */
-
-Dialog.prototype.effect = function(type){
-  this._effect = type;
-  this.el.addClass(type);
-  return this;
-};
-
-/**
- * Make it modal!
- *
- * @return {Dialog} for chaining
- * @api public
- */
-
-Dialog.prototype.modal = function(){
-  this._overlay = ui.overlay();
-  return this;
-};
-
-/**
- * Add an overlay.
- *
- * @return {Dialog} for chaining
- * @api public
- */
-
-Dialog.prototype.overlay = function(){
-  var self = this;
-  this._overlay = ui
-    .overlay({ closable: true })
-    .on('hide', function(){
-      self.closedOverlay = true;
-      self.hide();
-    });
-  return this;
-};
-
-/**
- * Close the dialog when the escape key is pressed.
- *
- * @api private
- */
-
-Dialog.prototype.escapable = function(){
-  var self = this;
-  $(document).bind('keydown.dialog', function(e){
-    if (27 != e.which) return;
-    $(this).unbind('keydown.dialog');
-    self.hide();
-  });
-};
-
-/**
- * Show the dialog.
- *
- * Emits "show" event.
- *
- * @return {Dialog} for chaining
- * @api public
- */
-
-Dialog.prototype.show = function(){
-  var overlay = this._overlay;
-
-  this.emit('show');
-
-  if (overlay) {
-    overlay.show();
-    this.el.addClass('modal');
-  }
-
-  // escape
-  if (!overlay || overlay.closable) this.escapable();
-
-  this.el.appendTo('body');
-  this.el.css({ marginLeft: -(this.el.width() / 2) + 'px' });
-  this.emit('show');
-  return this;
-};
-
-/**
- * Hide the dialog with optional delay of `ms`,
- * otherwise the dialog is removed immediately.
- *
- * Emits "hide" event.
- *
- * @return {Number} ms
- * @return {Dialog} for chaining
- * @api public
- */
-
-Dialog.prototype.hide = function(ms){
-  var self = this;
-
-  // prevent thrashing
-  this.hiding = true;
-
-  // duration
-  if (ms) {
-    setTimeout(function(){
-      self.hide();
-    }, ms);
-    return this;
-  }
-
-  // hide / remove
-  this.el.addClass('hide');
-  if (this._effect) {
-    setTimeout(function(){
-      self.remove();
-    }, 500);
-  } else {
-    self.remove();
-  }
-
-  // modal
-  if (this._overlay && !self.closedOverlay) this._overlay.hide();
-
-  return this;
-};
-
-/**
- * Hide the dialog without potential animation.
- *
- * @return {Dialog} for chaining
- * @api public
- */
-
-Dialog.prototype.remove = function(){
-  this.emit('hide');
-  this.el.remove();
-  return this;
-};

data/vendor/assets/javascripts/ui.emitter.js

@@ -1,99 +0,0 @@
-/**
- * Expose `Emitter`.
- */
-
-exports.Emitter = Emitter;
-
-/**
- * Initialize a new `Emitter`.
- * 
- * @api public
- */
-
-function Emitter() {
-  this.callbacks = {};
-};
-
-/**
- * Listen on the given `event` with `fn`.
- *
- * @param {String} event
- * @param {Function} fn
- * @return {Emitter}
- * @api public
- */
-
-Emitter.prototype.on = function(event, fn){
-  (this.callbacks[event] = this.callbacks[event] || [])
-    .push(fn);
-  return this;
-};
-
-/**
- * Adds an `event` listener that will be invoked a single
- * time then automatically removed.
- *
- * @param {String} event
- * @param {Function} fn
- * @return {Emitter}
- * @api public
- */
-
-Emitter.prototype.once = function(event, fn){
-  var self = this;
-
-  function on() {
-    self.off(event, on);
-    fn.apply(this, arguments);
-  }
-
-  this.on(event, on);
-  return this;
-};
-
-/**
- * Remove the given callback for `event` or all
- * registered callbacks.
- *
- * @param {String} event
- * @param {Function} fn
- * @return {Emitter}
- * @api public
- */
-
-Emitter.prototype.off = function(event, fn){
-  var callbacks = this.callbacks[event];
-  if (!callbacks) return this;
-
-  // remove all handlers
-  if (1 == arguments.length) {
-    delete this.callbacks[event];
-    return this;
-  }
-
-  // remove specific handler
-  var i = callbacks.indexOf(fn);
-  callbacks.splice(i, 1);
-  return this;
-};
-
-/**
- * Emit `event` with the given args.
- *
- * @param {String} event
- * @param {Mixed} ...
- * @return {Emitter} 
- */
-
-Emitter.prototype.emit = function(event){
-  var args = [].slice.call(arguments, 1)
-    , callbacks = this.callbacks[event];
-
-  if (callbacks) {
-    for (var i = 0, len = callbacks.length; i < len; ++i) {
-      callbacks[i].apply(this, args);
-    }
-  }
-
-  return this;
-};

data/vendor/assets/javascripts/ui.js

@@ -1,1641 +0,0 @@
-var ui = {};
-
-;(function(exports){
-/**
- * Expose `Emitter`.
- */
-
-exports.Emitter = Emitter;
-
-/**
- * Initialize a new `Emitter`.
- * 
- * @api public
- */
-
-function Emitter() {
-  this.callbacks = {};
-};
-
-/**
- * Listen on the given `event` with `fn`.
- *
- * @param {String} event
- * @param {Function} fn
- * @return {Emitter}
- * @api public
- */
-
-Emitter.prototype.on = function(event, fn){
-  (this.callbacks[event] = this.callbacks[event] || [])
-    .push(fn);
-  return this;
-};
-
-/**
- * Adds an `event` listener that will be invoked a single
- * time then automatically removed.
- *
- * @param {String} event
- * @param {Function} fn
- * @return {Emitter}
- * @api public
- */
-
-Emitter.prototype.once = function(event, fn){
-  var self = this;
-
-  function on() {
-    self.off(event, on);
-    fn.apply(this, arguments);
-  }
-
-  this.on(event, on);
-  return this;
-};
-
-/**
- * Remove the given callback for `event` or all
- * registered callbacks.
- *
- * @param {String} event
- * @param {Function} fn
- * @return {Emitter}
- * @api public
- */
-
-Emitter.prototype.off = function(event, fn){
-  var callbacks = this.callbacks[event];
-  if (!callbacks) return this;
-
-  // remove all handlers
-  if (1 == arguments.length) {
-    delete this.callbacks[event];
-    return this;
-  }
-
-  // remove specific handler
-  var i = callbacks.indexOf(fn);
-  callbacks.splice(i, 1);
-  return this;
-};
-
-/**
- * Emit `event` with the given args.
- *
- * @param {String} event
- * @param {Mixed} ...
- * @return {Emitter} 
- */
-
-Emitter.prototype.emit = function(event){
-  var args = [].slice.call(arguments, 1)
-    , callbacks = this.callbacks[event];
-
-  if (callbacks) {
-    for (var i = 0, len = callbacks.length; i < len; ++i) {
-      callbacks[i].apply(this, args);
-    }
-  }
-
-  return this;
-};
-
-})(ui);
-;(function(exports, html){
-
-/**
- * Active dialog.
- */
-
-var active;
-
-/**
- * Expose `Dialog`.
- */
-
-exports.Dialog = Dialog;
-
-/**
- * Return a new `Dialog` with the given 
- * (optional) `title` and `msg`.
- *
- * @param {String} title or msg
- * @param {String} msg
- * @return {Dialog}
- * @api public
- */
-
-exports.dialog = function(title, msg){
-  switch (arguments.length) {
-    case 2:
-      return new Dialog({ title: title, message: msg });
-    case 1:
-      return new Dialog({ message: title });
-  }
-};
-
-/**
- * Initialize a new `Dialog`.
- *
- * Options:
- *
- *    - `title` dialog title
- *    - `message` a message to display
- *
- * Emits:
- *
- *    - `show` when visible
- *    - `hide` when hidden
- *
- * @param {Object} options
- * @api public
- */
-
-function Dialog(options) {
-  ui.Emitter.call(this);
-  options = options || {};
-  this.template = html;
-  this.el = $(this.template);
-  this.render(options);
-  if (active && !active.hiding) active.hide();
-  if (Dialog.effect) this.effect(Dialog.effect);
-  active = this;
-};
-
-/**
- * Inherit from `Emitter.prototype`.
- */
-
-Dialog.prototype = new ui.Emitter;
-
-/**
- * Render with the given `options`.
- *
- * @param {Object} options
- * @api public
- */
-
-Dialog.prototype.render = function(options){
-  var el = this.el
-    , title = options.title
-    , msg = options.message
-    , self = this;
-
-  el.find('.close').click(function(){
-    self.emit('close');
-    self.hide();
-    return false;
-  });
-
-  el.find('h1').text(title);
-  if (!title) el.find('h1').remove();
-
-  // message
-  if ('string' == typeof msg) {
-    el.find('p').text(msg);
-  } else if (msg) {
-    el.find('p').replaceWith(msg.el || msg);
-  }
-
-  setTimeout(function(){
-    el.removeClass('hide');
-  }, 0);
-};
-
-/**
- * Enable the dialog close link.
- *
- * @return {Dialog} for chaining
- * @api public
- */
-
-Dialog.prototype.closable = function(){
-  this.el.addClass('closable');
-  return this;
-};
-
-/**
- * Set the effect to `type`.
- *
- * @param {String} type
- * @return {Dialog} for chaining
- * @api public
- */
-
-Dialog.prototype.effect = function(type){
-  this._effect = type;
-  this.el.addClass(type);
-  return this;
-};
-
-/**
- * Make it modal!
- *
- * @return {Dialog} for chaining
- * @api public
- */
-
-Dialog.prototype.modal = function(){
-  this._overlay = ui.overlay();
-  return this;
-};
-
-/**
- * Add an overlay.
- *
- * @return {Dialog} for chaining
- * @api public
- */
-
-Dialog.prototype.overlay = function(){
-  var self = this;
-  this._overlay = ui
-    .overlay({ closable: true })
-    .on('hide', function(){
-      self.closedOverlay = true;
-      self.hide();
-    });
-  return this;
-};
-
-/**
- * Close the dialog when the escape key is pressed.
- *
- * @api private
- */
-
-Dialog.prototype.escapable = function(){
-  var self = this;
-  $(document).bind('keydown.dialog', function(e){
-    if (27 != e.which) return;
-    $(this).unbind('keydown.dialog');
-    self.hide();
-  });
-};
-
-/**
- * Show the dialog.
- *
- * Emits "show" event.
- *
- * @return {Dialog} for chaining
- * @api public
- */
-
-Dialog.prototype.show = function(){
-  var overlay = this._overlay;
-
-  this.emit('show');
-
-  if (overlay) {
-    overlay.show();
-    this.el.addClass('modal');
-  }
-
-  // escape
-  if (!overlay || overlay.closable) this.escapable();
-
-  this.el.appendTo('body');
-  this.el.css({ marginLeft: -(this.el.width() / 2) + 'px' });
-  this.emit('show');
-  return this;
-};
-
-/**
- * Hide the dialog with optional delay of `ms`,
- * otherwise the dialog is removed immediately.
- *
- * Emits "hide" event.
- *
- * @return {Number} ms
- * @return {Dialog} for chaining
- * @api public
- */
-
-Dialog.prototype.hide = function(ms){
-  var self = this;
-
-  // prevent thrashing
-  this.hiding = true;
-
-  // duration
-  if (ms) {
-    setTimeout(function(){
-      self.hide();
-    }, ms);
-    return this;
-  }
-
-  // hide / remove
-  this.el.addClass('hide');
-  if (this._effect) {
-    setTimeout(function(self){
-      self.remove();
-    }, 500, this);
-  } else {
-    self.remove();
-  }
-
-  // modal
-  if (this._overlay && !self.closedOverlay) this._overlay.hide();
-
-  return this;
-};
-
-/**
- * Hide the dialog without potential animation.
- *
- * @return {Dialog} for chaining
- * @api public
- */
-
-Dialog.prototype.remove = function(){
-  this.emit('hide');
-  this.el.remove();
-  return this;
-};
-
-})(ui, "<div id=\"dialog\" class=\"hide\">\n  <div class=\"content\">\n    <h1>Title</h1>\n    <a href=\"#\" class=\"close\">×</a>\n    <p>Message</p>\n  </div>\n</div>");
-;(function(exports, html){
-
-/**
- * Expose `Overlay`.
- */
-
-exports.Overlay = Overlay;
-
-/**
- * Return a new `Overlay` with the given `options`.
- *
- * @param {Object} options
- * @return {Overlay}
- * @api public
- */
-
-exports.overlay = function(options){
-  return new Overlay(options);
-};
-
-/**
- * Initialize a new `Overlay`.
- *
- * @param {Object} options
- * @api public
- */
-
-function Overlay(options) {
-  ui.Emitter.call(this);
-  var self = this;
-  options = options || {};
-  this.closable = options.closable;
-  this.el = $(html);
-  this.el.appendTo('body');
-  if (this.closable) {
-    this.el.click(function(){
-      self.hide();
-    });
-  }
-}
-
-/**
- * Inherit from `Emitter.prototype`.
- */
-
-Overlay.prototype = new ui.Emitter;
-
-/**
- * Show the overlay.
- *
- * Emits "show" event.
- *
- * @return {Overlay} for chaining
- * @api public
- */
-
-Overlay.prototype.show = function(){
-  this.emit('show');
-  this.el.removeClass('hide');
-  return this;
-};
-
-/**
- * Hide the overlay.
- *
- * Emits "hide" event.
- *
- * @return {Overlay} for chaining
- * @api public
- */
-
-Overlay.prototype.hide = function(){
-  var self = this;
-  this.emit('hide');
-  this.el.addClass('hide');
-  setTimeout(function(){
-    self.el.remove();
-  }, 2000);
-  return this;
-};
-
-})(ui, "<div id=\"overlay\" class=\"hide\"></div>");
-;(function(exports, html){
-
-/**
- * Expose `Confirmation`.
- */
-
-exports.Confirmation = Confirmation;
-
-/**
- * Return a new `Confirmation` dialog with the given 
- * `title` and `msg`.
- *
- * @param {String} title or msg
- * @param {String} msg
- * @return {Dialog}
- * @api public
- */
-
-exports.confirm = function(title, msg){
-  switch (arguments.length) {
-    case 2:
-      return new Confirmation({ title: title, message: msg });
-    case 1:
-      return new Confirmation({ message: title });
-  }
-};
-
-/**
- * Initialize a new `Confirmation` dialog.
- *
- * Options:
- *
- *    - `title` dialog title
- *    - `message` a message to display
- *
- * Emits:
- *
- *    - `cancel` the user pressed cancel or closed the dialog
- *    - `ok` the user clicked ok
- *    - `show` when visible
- *    - `hide` when hidden
- *
- * @param {Object} options
- * @api public
- */
-
-function Confirmation(options) {
-  ui.Dialog.call(this, options);
-};
-
-/**
- * Inherit from `Dialog.prototype`.
- */
-
-Confirmation.prototype = new ui.Dialog;
-
-/**
- * Change "cancel" button `text`.
- *
- * @param {String} text
- * @return {Confirmation}
- * @api public
- */
-
-Confirmation.prototype.cancel = function(text){
-  this.el.find('.cancel').text(text);
-  return this;
-};
-
-/**
- * Change "ok" button `text`.
- *
- * @param {String} text
- * @return {Confirmation}
- * @api public
- */
-
-Confirmation.prototype.ok = function(text){
-  this.el.find('.ok').text(text);
-  return this;
-};
-
-/**
- * Show the confirmation dialog and invoke `fn(ok)`.
- *
- * @param {Function} fn
- * @return {Confirmation} for chaining
- * @api public
- */
-
-Confirmation.prototype.show = function(fn){
-  ui.Dialog.prototype.show.call(this);
-  this.el.find('.ok').focus();
-  this.callback = fn || function(){};
-  return this;
-};
-
-/**
- * Render with the given `options`.
- *
- * Emits "cancel" event.
- * Emits "ok" event.
- *
- * @param {Object} options
- * @api public
- */
-
-Confirmation.prototype.render = function(options){
-  ui.Dialog.prototype.render.call(this, options);
-  var self = this
-    , actions = $(html);
-
-  this.el.addClass('confirmation');
-  this.el.append(actions);
-
-  this.on('close', function(){
-    self.emit('cancel');
-    self.callback(false);
-  });
-
-  actions.find('.cancel').click(function(e){
-    e.preventDefault();
-    self.emit('cancel');
-    self.callback(false);
-    self.hide();
-  });
-
-  actions.find('.ok').click(function(e){
-    e.preventDefault();
-    self.emit('ok');
-    self.callback(true);
-    self.hide();
-  });
-};
-
-})(ui, "<div class=\"actions\">\n  <button class=\"cancel\">Cancel</button>\n  <button class=\"ok main\">Ok</button>\n</div>");
-;(function(exports, html){
-
-/**
- * Expose `ColorPicker`.
- */
-
-exports.ColorPicker = ColorPicker;
-
-/**
- * RGB util.
- */
-
-function rgb(r,g,b) {
-  return 'rgb(' + r + ', ' + g + ', ' + b + ')';
-}
-
-/**
- * RGBA util.
- */
-
-function rgba(r,g,b,a) {
-  return 'rgba(' + r + ', ' + g + ', ' + b + ', ' + a + ')';
-}
-
-/**
- * Mouse position util.
- */
-
-function localPos(e) {
-  var offset = $(e.target).offset();
-  return {
-      x: e.pageX - offset.left
-    , y: e.pageY - offset.top
-  };
-}
-
-/**
- * Initialize a new `ColorPicker`.
- *
- * Emits:
- *
- *    - `change` with the given color object
- *
- * @api public
- */
-
-function ColorPicker() {
-  ui.Emitter.call(this);
-  this._colorPos = {};
-  this.el = $(html);
-  this.main = this.el.find('.main').get(0);
-  this.spectrum = this.el.find('.spectrum').get(0);
-  $(this.main).bind('selectstart', function(e){ e.preventDefault() });
-  $(this.spectrum).bind('selectstart', function(e){ e.preventDefault() });
-  this.hue(rgb(255, 0, 0));
-  this.spectrumEvents();
-  this.mainEvents();
-  this.w = 180;
-  this.h = 180;
-  this.render();
-}
-
-/**
- * Inherit from `Emitter.prototype`.
- */
-
-ColorPicker.prototype = new ui.Emitter;
-
-/**
- * Set width / height to `n`.
- *
- * @param {Number} n
- * @return {ColorPicker} for chaining
- * @api public
- */
-
-ColorPicker.prototype.size = function(n){
-  return this
-    .width(n)
-    .height(n);
-};
-
-/**
- * Set width to `n`.
- *
- * @param {Number} n
- * @return {ColorPicker} for chaining
- * @api public
- */
-
-ColorPicker.prototype.width = function(n){
-  this.w = n;
-  this.render();
-  return this;
-};
-
-/**
- * Set height to `n`.
- *
- * @param {Number} n
- * @return {ColorPicker} for chaining
- * @api public
- */
-
-ColorPicker.prototype.height = function(n){
-  this.h = n;
-  this.render();
-  return this;
-};
-
-/**
- * Spectrum related events.
- *
- * @api private
- */
-
-ColorPicker.prototype.spectrumEvents = function(){
-  var self = this
-    , canvas = $(this.spectrum)
-    , down;
-
-  function update(e) {
-    var offsetY = localPos(e).y
-      , color = self.hueAt(offsetY - 4);
-    self.hue(color.toString());
-    self.emit('change', color);
-    self._huePos = offsetY;
-    self.render();
-  }
-
-  canvas.mousedown(function(e){
-    e.preventDefault();
-    down = true;
-    update(e);
-  });
-
-  canvas.mousemove(function(e){
-    if (down) update(e);
-  });
-
-  canvas.mouseup(function(){
-    down = false;
-  });
-};
-
-/**
- * Hue / lightness events.
- *
- * @api private
- */
-
-ColorPicker.prototype.mainEvents = function(){
-  var self = this
-    , canvas = $(this.main)
-    , down;
-
-  function update(e) {
-    var color;
-    self._colorPos = localPos(e);
-    color = self.colorAt(self._colorPos.x, self._colorPos.y);
-    self.color(color.toString());
-    self.emit('change', color);
-
-    self.render();
-  }
-
-  canvas.mousedown(function(e){
-    down = true;
-    update(e);
-  });
-
-  canvas.mousemove(function(e){
-    if (down) update(e);
-  });
-
-  canvas.mouseup(function(){
-    down = false;
-  });
-};
-
-/**
- * Get the RGB color at `(x, y)`.
- *
- * @param {Number} x
- * @param {Number} y
- * @return {Object}
- * @api private
- */
-
-ColorPicker.prototype.colorAt = function(x, y){
-  var data = this.main.getContext('2d').getImageData(x, y, 1, 1).data;
-  return {
-      r: data[0]
-    , g: data[1]
-    , b: data[2]
-    , toString: function(){
-      return rgb(this.r, this.g, this.b);
-    }
-  };
-};
-
-/**
- * Get the RGB value at `y`.
- *
- * @param {Type} name
- * @return {Type}
- * @api private
- */
-
-ColorPicker.prototype.hueAt = function(y){
-  var data = this.spectrum.getContext('2d').getImageData(0, y, 1, 1).data;
-  return {
-      r: data[0]
-    , g: data[1]
-    , b: data[2]
-    , toString: function(){
-      return rgb(this.r, this.g, this.b);
-    }
-  };
-};
-
-/**
- * Get or set `color`.
- *
- * @param {String} color
- * @return {String|ColorPicker}
- * @api public
- */
-
-ColorPicker.prototype.color = function(color){
-  // TODO: update pos
-  if (0 == arguments.length) return this._color;
-  this._color = color;
-  return this;
-};
-
-/**
- * Get or set hue `color`.
- *
- * @param {String} color
- * @return {String|ColorPicker}
- * @api public
- */
-
-ColorPicker.prototype.hue = function(color){
-  // TODO: update pos
-  if (0 == arguments.length) return this._hue;
-  this._hue = color;
-  return this;
-};
-
-/**
- * Render with the given `options`.
- *
- * @param {Object} options
- * @api public
- */
-
-ColorPicker.prototype.render = function(options){
-  options = options || {};
-  this.renderMain(options);
-  this.renderSpectrum(options);
-};
-
-/**
- * Render spectrum.
- *
- * @api private
- */
-
-ColorPicker.prototype.renderSpectrum = function(options){
-  var el = this.el
-    , canvas = this.spectrum
-    , ctx = canvas.getContext('2d')
-    , pos = this._huePos
-    , w = this.w * .12
-    , h = this.h;
-
-  canvas.width = w;
-  canvas.height = h;
-
-  var grad = ctx.createLinearGradient(0, 0, 0, h);
-  grad.addColorStop(0, rgb(255, 0, 0));
-  grad.addColorStop(.15, rgb(255, 0, 255));
-  grad.addColorStop(.33, rgb(0, 0, 255));
-  grad.addColorStop(.49, rgb(0, 255, 255));
-  grad.addColorStop(.67, rgb(0, 255, 0));
-  grad.addColorStop(.84, rgb(255, 255, 0));
-  grad.addColorStop(1, rgb(255, 0, 0));
-
-  ctx.fillStyle = grad;
-  ctx.fillRect(0, 0, w, h);
-
-  // pos
-  if (!pos) return;
-  ctx.fillStyle = rgba(0,0,0, .3);
-  ctx.fillRect(0, pos, w, 1);
-  ctx.fillStyle = rgba(255,255,255, .3);
-  ctx.fillRect(0, pos + 1, w, 1);
-};
-
-/**
- * Render hue/luminosity canvas.
- *
- * @api private
- */
-
-ColorPicker.prototype.renderMain = function(options){
-  var el = this.el
-    , canvas = this.main
-    , ctx = canvas.getContext('2d')
-    , w = this.w
-    , h = this.h
-    , x = (this._colorPos.x || w) + .5
-    , y = (this._colorPos.y || 0) + .5;
-
-  canvas.width = w;
-  canvas.height = h;
-
-  var grad = ctx.createLinearGradient(0, 0, w, 0);
-  grad.addColorStop(0, rgb(255, 255, 255));
-  grad.addColorStop(1, this._hue);
-
-  ctx.fillStyle = grad;
-  ctx.fillRect(0, 0, w, h);
-
-  grad = ctx.createLinearGradient(0, 0, 0, h);
-  grad.addColorStop(0, rgba(255, 255, 255, 0));
-  grad.addColorStop(1, rgba(0, 0, 0, 1));
-
-  ctx.fillStyle = grad;
-  ctx.fillRect(0, 0, w, h);
-
-  // pos
-  var rad = 10;
-  ctx.save();
-  ctx.beginPath();
-  ctx.lineWidth = 1;
-
-  // outer dark
-  ctx.strokeStyle = rgba(0,0,0,.5);
-  ctx.arc(x, y, rad / 2, 0, Math.PI * 2, false);
-  ctx.stroke();
-
-  // outer light
-  ctx.strokeStyle = rgba(255,255,255,.5);
-  ctx.arc(x, y, rad / 2 - 1, 0, Math.PI * 2, false);
-  ctx.stroke();
-
-  ctx.beginPath();
-  ctx.restore();
-};
-})(ui, "<div class=\"color-picker\">\n  <canvas class=\"main\"></canvas>\n  <canvas class=\"spectrum\"></canvas>\n</div>");
-;(function(exports, html){
-
-/**
- * Notification list.
- */
-
-var list;
-
-/**
- * Expose `Notification`.
- */
-
-exports.Notification = Notification;
-
-// list
-
-$(function(){
-  list = $('<ul id="notifications">');
-  list.appendTo('body');
-})
-
-/**
- * Return a new `Notification` with the given 
- * (optional) `title` and `msg`.
- *
- * @param {String} title or msg
- * @param {String} msg
- * @return {Dialog}
- * @api public
- */
-
-exports.notify = function(title, msg){
-  switch (arguments.length) {
-    case 2:
-      return new Notification({ title: title, message: msg })
-        .show()
-        .hide(4000);
-    case 1:
-      return new Notification({ message: title })
-        .show()
-        .hide(4000);
-  }
-};
-
-/**
- * Construct a notification function for `type`.
- *
- * @param {String} type
- * @return {Function}
- * @api private
- */
-
-function type(type) {
-  return function(title, msg){
-    return exports.notify.apply(this, arguments)
-      .type(type);
-  }
-}
-
-/**
- * Notification methods.
- */
-
-exports.info = exports.notify;
-exports.warn = type('warn');
-exports.error = type('error');
-
-/**
- * Initialize a new `Notification`.
- *
- * Options:
- *
- *    - `title` dialog title
- *    - `message` a message to display
- *
- * @param {Object} options
- * @api public
- */
-
-function Notification(options) {
-  ui.Emitter.call(this);
-  options = options || {};
-  this.template = html;
-  this.el = $(this.template);
-  this.render(options);
-  if (Notification.effect) this.effect(Notification.effect);
-};
-
-/**
- * Inherit from `Emitter.prototype`.
- */
-
-Notification.prototype = new ui.Emitter;
-
-/**
- * Render with the given `options`.
- *
- * @param {Object} options
- * @api public
- */
-
-Notification.prototype.render = function(options){
-  var el = this.el
-    , title = options.title
-    , msg = options.message
-    , self = this;
-
-  el.find('.close').click(function(){
-    self.hide();
-    return false;
-  });
-
-  el.click(function(e){
-    e.preventDefault();
-    self.emit('click', e);
-  });
-
-  el.find('h1').text(title);
-  if (!title) el.find('h1').remove();
-
-  // message
-  if ('string' == typeof msg) {
-    el.find('p').text(msg);
-  } else if (msg) {
-    el.find('p').replaceWith(msg.el || msg);
-  }
-
-  setTimeout(function(){
-    el.removeClass('hide');
-  }, 0);
-};
-
-/**
- * Enable the dialog close link.
- *
- * @return {Notification} for chaining
- * @api public
- */
-
-Notification.prototype.closable = function(){
-  this.el.addClass('closable');
-  return this;
-};
-
-/**
- * Set the effect to `type`.
- *
- * @param {String} type
- * @return {Notification} for chaining
- * @api public
- */
-
-Notification.prototype.effect = function(type){
-  this._effect = type;
-  this.el.addClass(type);
-  return this;
-};
-
-/**
- * Show the notification.
- *
- * @return {Notification} for chaining
- * @api public
- */
-
-Notification.prototype.show = function(){
-  this.el.appendTo(list);
-  return this;
-};
-
-/**
- * Set the notification `type`.
- *
- * @param {String} type
- * @return {Notification} for chaining
- * @api public
- */
-
-Notification.prototype.type = function(type){
-  this._type = type;
-  this.el.addClass(type);
-  return this;
-};
-
-/**
- * Make it stick (clear hide timer), and make it closable.
- *
- * @return {Notification} for chaining
- * @api public
- */
-
-Notification.prototype.sticky = function(){
-  return this.hide(0).closable();
-};
-
-/**
- * Hide the dialog with optional delay of `ms`,
- * otherwise the notification is removed immediately.
- *
- * @return {Number} ms
- * @return {Notification} for chaining
- * @api public
- */
-
-Notification.prototype.hide = function(ms){
-  var self = this;
-
-  // duration
-  if ('number' == typeof ms) {
-    clearTimeout(this.timer);
-    if (!ms) return this;
-    this.timer = setTimeout(function(){
-      self.hide();
-    }, ms);
-    return this;
-  }
-
-  // hide / remove
-  this.el.addClass('hide');
-  if (this._effect) {
-    setTimeout(function(self){
-      self.remove();
-    }, 500, this);
-  } else {
-    self.remove();
-  }
-
-  return this;
-};
-
-/**
- * Hide the notification without potential animation.
- *
- * @return {Dialog} for chaining
- * @api public
- */
-
-Notification.prototype.remove = function(){
-  this.el.remove();
-  return this;
-};
-})(ui, "<li class=\"notification hide\">\n  <div class=\"content\">\n    <h1>Title</h1>\n    <a href=\"#\" class=\"close\">×</a>\n    <p>Message</p>\n  </div>\n</li>");
-;(function(exports, html){
-
-/**
- * Expose `SplitButton`.
- */
-
-exports.SplitButton = SplitButton;
-
-/**
- * Initialize a new `SplitButton`
- * with an optional `label`.
- *
- * @param {String} label
- * @api public
- */
-
-function SplitButton(label) {
-  ui.Emitter.call(this);
-  this.el = $(html);
-  this.events();
-  this.render({ label: label });
-  this.state = 'hidden';
-}
-
-/**
- * Inherit from `Emitter.prototype`.
- */
-
-SplitButton.prototype = new ui.Emitter;
-
-/**
- * Register event handlers.
- *
- * @api private
- */
-
-SplitButton.prototype.events = function(){
-  var self = this
-    , el = this.el;
-
-  el.find('.button').click(function(e){
-    e.preventDefault();
-    self.emit('click', e);
-  });
-
-  el.find('.toggle').click(function(e){
-    e.preventDefault();
-    self.toggle();
-  });
-};
-
-/**
- * Toggle the drop-down contents.
- *
- * @return {SplitButton}
- * @api public
- */
-
-SplitButton.prototype.toggle = function(){
-  return 'hidden' == this.state
-    ? this.show()
-    : this.hide();
-};
-
-/**
- * Show the drop-down contents.
- *
- * @return {SplitButton}
- * @api public
- */
-
-SplitButton.prototype.show = function(){
-  this.state = 'visible';
-  this.emit('show');
-  this.el.addClass('show');
-  return this;
-};
-
-/**
- * Hide the drop-down contents.
- *
- * @return {SplitButton}
- * @api public
- */
-
-SplitButton.prototype.hide = function(){
-  this.state = 'hidden';
-  this.emit('hide');
-  this.el.removeClass('show');
-  return this;
-};
-
-/**
- * Render the split-button with the given `options`.
- *
- * @param {Object} options
- * @return {SplitButton}
- * @api private
- */
-
-SplitButton.prototype.render = function(options){
-  var options = options || {}
-    , button = this.el.find('.button')
-    , label = options.label;
-
-  if ('string' == label) button.text(label);
-  else button.text('').append(label);
-  return this;
-};
-
-})(ui, "<div class=\"split-button\">\n  <a class=\"button\" href=\"#\">Action</a>\n  <a class=\"toggle\" href=\"#\"><span></span></a>\n</div>");
-;(function(exports, html){
-
-/**
- * Expose `Menu`.
- */
-
-exports.Menu = Menu;
-
-/**
- * Create a new `Menu`.
- *
- * @return {Menu}
- * @api public
- */
-
-exports.menu = function(){
-  return new Menu();
-};
-
-/**
- * Initialize a new `Menu`.
- *
- * Emits:
- *
- *   - "show" when shown
- *   - "hide" when hidden
- *   - "remove" with the item name when an item is removed
- *   - * menu item events are emitted when clicked
- *
- * @api public
- */
-
-function Menu() {
-  ui.Emitter.call(this);
-  this.items = {};
-  this.el = $(html).hide().appendTo('body');
-  this.el.hover(this.deselect.bind(this));
-  $('html').click(this.hide.bind(this));
-  this.on('show', this.bindKeyboardEvents.bind(this));
-  this.on('hide', this.unbindKeyboardEvents.bind(this));
-};
-
-/**
- * Inherit from `Emitter.prototype`.
- */
-
-Menu.prototype = new ui.Emitter;
-
-/**
- * Deselect selected menu items.
- *
- * @api private
- */
-
-Menu.prototype.deselect = function(){
-  this.el.find('.selected').removeClass('selected');
-};
-
-/**
- * Bind keyboard events.
- *
- * @api private
- */
-
-Menu.prototype.bindKeyboardEvents = function(){
-  $(document).bind('keydown.menu', this.onkeydown.bind(this));
-  return this;
-};
-
-/**
- * Unbind keyboard events.
- *
- * @api private
- */
-
-Menu.prototype.unbindKeyboardEvents = function(){
-  $(document).unbind('keydown.menu');
-  return this;
-};
-
-/**
- * Handle keydown events.
- *
- * @api private
- */
-
-Menu.prototype.onkeydown = function(e){
-  switch (e.keyCode) {
-    // up
-    case 38:
-      e.preventDefault();
-      this.move('prev');
-      break;
-    // down
-    case 40:
-      e.preventDefault();
-      this.move('next');
-      break;
-  }
-};
-
-/**
- * Focus on the next menu item in `direction`.
- * 
- * @param {String} direction "prev" or "next"
- * @api public
- */
-
-Menu.prototype.move = function(direction){
-  var prev = this.el.find('.selected').eq(0);
-
-  var next = prev.length
-    ? prev[direction]()
-    : this.el.find('li:first-child');
-
-  if (next.length) {
-    prev.removeClass('selected');
-    next.addClass('selected');
-    next.find('a').focus();
-  }
-};
-
-/**
- * Add menu item with the given `text` and optional callback `fn`.
- *
- * When the item is clicked `fn()` will be invoked
- * and the `Menu` is immediately closed. When clicked
- * an event of the name `text` is emitted regardless of
- * the callback function being present.
- *
- * @param {String} text
- * @param {Function} fn
- * @return {Menu}
- * @api public
- */
-
-Menu.prototype.add = function(text, fn){
-  var self = this
-    , el = $('<li><a href="#">' + text + '</a></li>')
-    .addClass(slug(text))
-    .appendTo(this.el)
-    .click(function(e){
-      e.preventDefault();
-      e.stopPropagation();
-      self.hide();
-      self.emit(text);
-      fn && fn();
-    });
-
-  this.items[text] = el;
-  return this;
-};
-
-/**
- * Remove menu item with the given `text`.
- *
- * @param {String} text
- * @return {Menu}
- * @api public
- */
-
-Menu.prototype.remove = function(text){
-  var item = this.items[text];
-  if (!item) throw new Error('no menu item named "' + text + '"');
-  this.emit('remove', text);
-  item.remove();
-  delete this.items[text];
-  return this;
-};
-
-/**
- * Check if this menu has an item with the given `text`.
- *
- * @param {String} text
- * @return {Boolean}
- * @api public
- */
-
-Menu.prototype.has = function(text){
-  return !! this.items[text];
-};
-
-/**
- * Move context menu to `(x, y)`.
- *
- * @param {Number} x
- * @param {Number} y
- * @return {Menu}
- * @api public
- */
-
-Menu.prototype.moveTo = function(x, y){
-  this.el.css({
-    top: y,
-    left: x
-  });
-  return this;
-};
-
-/**
- * Show the menu.
- *
- * @return {Menu}
- * @api public
- */
-
-Menu.prototype.show = function(){
-  this.emit('show');
-  this.el.show();
-  return this;
-};
-
-/**
- * Hide the menu.
- *
- * @return {Menu}
- * @api public
- */
-
-Menu.prototype.hide = function(){
-  this.emit('hide');
-  this.el.hide();
-  return this;
-};
-
-/**
- * Generate a slug from `str`.
- *
- * @param {String} str
- * @return {String}
- * @api private
- */
-
-function slug(str) {
-  return str
-    .toLowerCase()
-    .replace(/ +/g, '-')
-    .replace(/[^a-z0-9-]/g, '');
-}
-
-})(ui, "<div class=\"menu\">\n</div>");
-;(function(exports, html){
-
-/**
- * Expose `Card`.
- */
-
-exports.Card = Card;
-
-/**
- * Create a new `Card`.
- *
- * @param {Mixed} front
- * @param {Mixed} back
- * @return {Card}
- * @api public
- */
-
-exports.card = function(front, back){
-  return new Card(front, back);
-};
-
-/**
- * Initialize a new `Card` with content
- * for face `front` and `back`.
- *
- * Emits "flip" event.
- *
- * @param {Mixed} front
- * @param {Mixed} back
- * @api public
- */
-
-function Card(front, back) {
-  ui.Emitter.call(this);
-  this._front = front || $('<p>front</p>');
-  this._back = back  || $('<p>back</p>');
-  this.template = html;
-  this.render();
-};
-
-/**
- * Inherit from `Emitter.prototype`.
- */
-
-Card.prototype = new ui.Emitter;
-
-/**
- * Set front face `val`.
- *
- * @param {Mixed} val
- * @return {Card}
- * @api public
- */
-
-Card.prototype.front = function(val){
-  this._front = val;
-  this.render();
-  return this;
-};
-
-/**
- * Set back face `val`.
- *
- * @param {Mixed} val
- * @return {Card}
- * @api public
- */
-
-Card.prototype.back = function(val){
-  this._back = val;
-  this.render();
-  return this;
-};
-
-/**
- * Flip the card.
- *
- * @return {Card} for chaining
- * @api public
- */
-
-Card.prototype.flip = function(){
-  this.emit('flip');
-  this.el.toggleClass('flipped');
-  return this;
-};
-
-/**
- * Set the effect to `type`.
- *
- * @param {String} type
- * @return {Dialog} for chaining
- * @api public
- */
-
-Card.prototype.effect = function(type){
-  this.el.addClass(type);
-  return this;
-};
-
-/**
- * Render with the given `options`.
- *
- * @param {Object} options
- * @api public
- */
-
-Card.prototype.render = function(options){
-  var self = this
-    , el = this.el = $(this.template);
-  el.find('.front').empty().append(this._front.el || $(this._front));
-  el.find('.back').empty().append(this._back.el || $(this._back));
-  el.click(function(){
-    self.flip();
-  });
-};
-})(ui, "<div class=\"card\">\n  <div class=\"wrapper\">\n    <div class=\"face front\">1</div>\n    <div class=\"face back\">2</div>\n  </div>\n</div>");