uikit-rails 0.0.1 → 0.0.2

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

@@ -0,0 +1,238 @@
+
+/**
+ * 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, '');
+}

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

@@ -0,0 +1,240 @@
+
+/**
+ * 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.remove();
+    }, 500);
+  } 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;
+};