romo 0.0.1 → 0.1.0

data/assets/js/romo/select.js

@@ -0,0 +1,139 @@
+$.fn.romoSelect = function() {
+  return $.map(this, function(element) {
+    return new RomoSelect(element);
+  });
+}
+
+var RomoSelect = function(element) {
+  this.elem = $(element);
+
+  this.doInit();
+  this.doBindSelectDropdown();
+  this.doRefreshUI();
+
+  if (this.elem.attr('id') !== undefined) {
+    $('label[for="'+this.elem.attr('id')+'"]').on('click', $.proxy(function(e) {
+      this.romoSelectDropdown.elem.focus();
+    }, this));
+  }
+
+  $(window).on("pageshow", $.proxy(function(e) {
+    var selectedVal = this.elem.find('option[selected]').attr('value');
+    if (selectedVal === undefined) {
+      selectedVal = '';
+    }
+    if (selectedVal !== this.elem[0].value) {
+      this.romoSelectDropdown.doSetNewValue(selectedVal);
+      this._setNewValue(selectedVal);
+    }
+  }, this));
+
+  this.elem.trigger('select:ready', [this]);
+}
+
+RomoSelect.prototype.doInit = function() {
+  // override as needed
+}
+
+RomoSelect.prototype.doBindSelectDropdown = function() {
+  this.romoSelectDropdown = this._buildSelectDropdownElem().romoSelectDropdown(this.elem)[0];
+
+  this.romoSelectDropdown.elem.on('selectDropdown:dropdown:toggle', $.proxy(function(e, dropdown, selectDropdown) {
+    this.elem.trigger('select:dropdown:toggle', [dropdown, this]);
+  }, this));
+  this.romoSelectDropdown.elem.on('selectDropdown:dropdown:popupOpen', $.proxy(function(e, dropdown, selectDropdown) {
+    this.elem.trigger('select:dropdown:popupOpen', [dropdown, this]);
+  }, this));
+  this.romoSelectDropdown.elem.on('selectDropdown:dropdown:popupClose', $.proxy(function(e, dropdown, selectDropdown) {
+    this.elem.trigger('select:dropdown:popupClose', [dropdown, this]);
+  }, this));
+
+  this.romoSelectDropdown.elem.on('selectDropdown:itemSelected', $.proxy(function(e, newValue, prevValue, selectDropdown) {
+    this.romoSelectDropdown.elem.focus();
+    this.elem.trigger('select:itemSelected', [newValue, prevValue, this]);
+  }, this));
+  this.romoSelectDropdown.elem.on('selectDropdown:change', $.proxy(function(e, newValue, prevValue, selectDropdown) {
+    this._setNewValue(newValue);
+    this.elem.trigger('change');
+    this.elem.trigger('select:change', [newValue, prevValue, this]);
+  }, this));
+
+  this.elem.on('select:triggerToggle', $.proxy(function(e) {
+    this.romoSelectDropdown.elem.trigger('selectDropdown:triggerToggle', []);
+  }, this));
+  this.elem.on('select:triggerPopupOpen', $.proxy(function(e) {
+    this.romoSelectDropdown.elem.trigger('selectDropdown:triggerPopupOpen', []);
+  }, this));
+  this.elem.on('select:triggerPopupClose', $.proxy(function(e) {
+    this.romoSelectDropdown.elem.trigger('selectDropdown:triggerPopupClose', []);
+  }, this));
+}
+
+RomoSelect.prototype.doRefreshUI = function() {
+  var text = this.romoSelectDropdown.selectedListing().text() || ' ';
+  this.romoSelectDropdown.elem.find('.romo-select-text').html(text);
+}
+
+RomoSelect.prototype.onCaretClick = function(e) {
+  if (this.elem.prop('disabled') === false) {
+    this.romoSelectDropdown.elem.focus();
+    this.elem.trigger('select:triggerPopupOpen');
+  }
+}
+
+RomoSelect.prototype._setNewValue = function(newValue) {
+  this.elem[0].value = newValue;
+  this.doRefreshUI();
+}
+
+RomoSelect.prototype._buildSelectDropdownElem = function() {
+  var romoSelectDropdownElem = $('<div class="romo-select romo-btn" tabindex="0"><span class="romo-select-text"></span></div>');
+
+  romoSelectDropdownElem.attr('data-romo-dropdown-position', this.elem.data('romo-select-dropdown-position'));
+  romoSelectDropdownElem.attr('data-romo-dropdown-style-class', this.elem.data('romo-select-dropdown-style-class'));
+  romoSelectDropdownElem.attr('data-romo-dropdown-min-height', this.elem.data('romo-select-dropdown-min-height'));
+  romoSelectDropdownElem.attr('data-romo-dropdown-max-height', this.elem.data('romo-select-dropdown-max-height'));
+  romoSelectDropdownElem.attr('data-romo-dropdown-height', this.elem.data('romo-select-dropdown-height'));
+  romoSelectDropdownElem.attr('data-romo-dropdown-overflow-x', 'hidden');
+  romoSelectDropdownElem.attr('data-romo-dropdown-width', 'elem');
+  if (romoSelectDropdownElem.data('romo-dropdown-max-height') === undefined) {
+    romoSelectDropdownElem.attr('data-romo-dropdown-max-height', 'detect');
+  }
+
+  var classList = this.elem.attr('class') !== undefined ? this.elem.attr('class').split(/\s+/) : [];
+  $.each(classList, function(idx, classItem) {
+    romoSelectDropdownElem.addClass(classItem);
+  });
+  if (this.elem.attr('style') !== undefined) {
+    romoSelectDropdownElem.attr('style', this.elem.attr('style'));
+  }
+  romoSelectDropdownElem.css({'width': this.elem.css('width')});
+  if (this.elem.attr('disabled') !== undefined) {
+    this.romoSelectDropdown.elem.attr('disabled', this.elem.attr('disabled'));
+  }
+
+  this.elem.after(romoSelectDropdownElem);
+  this.elem.hide();
+
+  this.elemWrapper = $('<div class="romo-select-wrapper"></div>');
+  if (this.elem.data('romo-select-btn-group') === true) {
+    this.elemWrapper.addClass('romo-btn-group');
+  }
+  romoSelectDropdownElem.before(this.elemWrapper);
+  this.elemWrapper.append(romoSelectDropdownElem);
+
+  var caretClass = this.elem.data('romo-select-caret') || this.defaultCaretClass;
+  if (caretClass !== undefined && caretClass !== 'none') {
+    var caret = $('<i class="romo-select-caret '+caretClass+'"></i>');
+    caret.css({'line-height': romoSelectDropdownElem.css('line-height')});
+    caret.on('click', $.proxy(this.onCaretClick, this));
+    romoSelectDropdownElem.css({'padding-right': '22px'});
+    romoSelectDropdownElem.append(caret);
+  }
+
+  return romoSelectDropdownElem;
+}
+
+Romo.onInitUI(function(e) {
+  Romo.initUIElems(e, '[data-romo-select-auto="true"]').romoSelect();
+});

data/assets/js/romo/select_dropdown.js

@@ -0,0 +1,325 @@
+$.fn.romoSelectDropdown = function(optionElemsParent) {
+  return $.map(this, function(element) {
+    return new RomoSelectDropdown(element, optionElemsParent);
+  });
+}
+
+var RomoSelectDropdown = function(element, optionElemsParent) {
+  this.elem = $(element);
+  this.defaultCaretClass = '';
+  this.itemSelector = 'LI[data-romo-select-item="opt"]:not(.disabled)';
+  this.prevValue = undefined;
+
+  var optsParent = (optionElemsParent || this.elem.find('.romo-select-dropdown-options-parent'));
+  this.optionElems = optsParent.children();
+  this.optionList = this._buildOptionList(this.optionElems);
+
+  this.doInit();
+  this.doBindDropdown();
+
+  if (this.elem.attr('id') !== undefined) {
+    $('label[for="'+this.elem.attr('id')+'"]').on('click', $.proxy(function(e) {
+      this.elem.focus();
+    }, this));
+  }
+
+  this.elem.trigger('selectDropdown:ready', [this]);
+}
+
+RomoSelectDropdown.prototype.selectedListing = function() {
+  return this.romoDropdown.bodyElem.find('LI.selected');
+}
+
+RomoSelectDropdown.prototype.doInit = function() {
+  // override as needed
+}
+
+RomoSelectDropdown.prototype.doSetNewValue = function(newValue) {
+  this.selectedListing().removeClass('selected');
+  this.romoDropdown.bodyElem.find('LI[data-romo-select-option-value="'+newValue+'"]').addClass('selected');
+
+  this.prevValue = newValue;
+}
+
+RomoSelectDropdown.prototype.doBindDropdown = function() {
+  this.romoDropdown = this.elem.romoDropdown()[0];
+  this.romoDropdown.doSetPopupZIndex(this.elem);
+  this.romoDropdown.bodyElem.addClass('romo-select-option-list');
+  this.romoDropdown.elem.on('dropdown:popupOpen', $.proxy(this.onPopupOpen, this));
+  this.romoDropdown.elem.on('dropdown:popupClose', $.proxy(this.onPopupClose, this));
+  this.romoDropdown.elem.on('blur', $.proxy(function(e) {
+    this.blurTimeoutId = setTimeout($.proxy(function() {
+      if (this.popupMouseDown !== true) {
+        this.romoDropdown.elem.trigger('dropdown:triggerPopupClose', []);
+      }
+    }, this), 10);
+  }, this));
+  this.romoDropdown.elem.on('keydown', $.proxy(this.onElemKeyDown, this));
+  this.romoDropdown.popupElem.on('keydown', $.proxy(this.onElemKeyDown, this));
+
+  this.romoDropdown.elem.on('dropdown:toggle', $.proxy(function(e, dropdown) {
+    this.elem.trigger('selectDropdown:dropdown:toggle', [dropdown, this]);
+  }, this));
+  this.romoDropdown.elem.on('dropdown:popupOpen', $.proxy(function(e, dropdown) {
+    this.elem.trigger('selectDropdown:dropdown:popupOpen', [dropdown, this]);
+  }, this));
+  this.romoDropdown.elem.on('dropdown:popupClose', $.proxy(function(e, dropdown) {
+    this.elem.trigger('selectDropdown:dropdown:popupClose', [dropdown, this]);
+  }, this));
+
+  this.elem.on('selectDropdown:triggerToggle', $.proxy(function(e) {
+    this.romoDropdown.elem.trigger('dropdown:triggerToggle', []);
+  }, this));
+  this.elem.on('selectDropdown:triggerPopupOpen', $.proxy(function(e) {
+    this.romoDropdown.elem.trigger('dropdown:triggerPopupOpen', []);
+  }, this));
+  this.elem.on('selectDropdown:triggerPopupClose', $.proxy(function(e) {
+    this.romoDropdown.elem.trigger('dropdown:triggerPopupClose', []);
+  }, this));
+
+  this.romoDropdown.bodyElem.html('');
+  this.romoDropdown.bodyElem.append(this.optionList);
+
+  this.romoDropdown.bodyElem.find(this.itemSelector).on('hover', $.proxy(this.onItemHover, this));
+  this.romoDropdown.bodyElem.find(this.itemSelector).on('click', $.proxy(this.onItemClick, this));
+
+  this.romoDropdown.popupElem.on('mousedown', $.proxy(this.onPopupMouseDown, this));
+  this.romoDropdown.popupElem.on('mouseup',   $.proxy(this.onPopupMouseUp, this));
+}
+
+RomoSelectDropdown.prototype.doSelectHighlightedItem = function() {
+  var prevValue = this.prevValue;
+  var newValue = this.romoDropdown.bodyElem.find('LI.romo-select-highlight').data('romo-select-option-value');
+
+  this.romoDropdown.doPopupClose();
+  this.elem.trigger('selectDropdown:itemSelected', [newValue, prevValue, this]);
+
+  if (newValue !== prevValue) {
+    this.doSetNewValue(newValue);
+    this.elem.trigger('selectDropdown:change', [newValue, prevValue, this]);
+  }
+}
+
+RomoSelectDropdown.prototype.onPopupOpen = function(e) {
+  if (this.elem.hasClass('disabled') === false) {
+    this._highlightItem(this.selectedListing());
+    this._scrollTopToItem(this.selectedListing());
+  }
+  $('body').on('keydown', $.proxy(this.onPopupOpenBodyKeyDown, this));
+}
+
+RomoSelectDropdown.prototype.onPopupClose = function(e) {
+  this._highlightItem($());
+  $('body').off('keydown', $.proxy(this.onPopupOpenBodyKeyDown, this));
+}
+
+RomoSelectDropdown.prototype.onItemHover = function(e) {
+  if (e !== undefined) {
+    e.preventDefault();
+    e.stopPropagation();
+  }
+  this._highlightItem($(e.target));
+}
+
+RomoSelectDropdown.prototype.onItemClick = function(e) {
+  if (this.blurTimeoutId !== undefined) {
+    clearTimeout(this.blurTimeoutId);
+    this.blurTimeoutId = undefined;
+  }
+  if (e !== undefined) {
+    e.preventDefault();
+    e.stopPropagation();
+  }
+  this.doSelectHighlightedItem();
+}
+
+RomoSelectDropdown.prototype.onPopupMouseDown = function(e) {
+  this.popupMouseDown = true;
+}
+
+RomoSelectDropdown.prototype.onPopupMouseUp = function(e) {
+  this.popupMouseDown = false;
+}
+
+RomoSelectDropdown.prototype.onPopupOpenBodyKeyDown = function(e) {
+  if (e !== undefined) {
+    e.stopPropagation();
+  }
+
+  var scroll = this.romoDropdown.bodyElem;
+
+  if (e.keyCode === 38 /* Up */) {
+    var prev = this._prevListItem();
+
+    this._highlightItem(prev);
+    if (scroll.offset().top > prev.offset().top) {
+      this._scrollTopToItem(prev);
+    } else if ((scroll.offset().top + scroll.height()) < prev.offset().top) {
+      this._scrollTopToItem(prev);
+    }
+
+    return false;
+  } else if(e.keyCode === 40 /* Down */) {
+    var next = this._nextListItem();
+
+    this._highlightItem(next);
+    if ((scroll.offset().top + scroll.height()) < next.offset().top + next.height()) {
+      this._scrollBottomToItem(next);
+    } else if (scroll.offset().top > next.offset().top) {
+      this._scrollTopToItem(next);
+    }
+
+    return false;
+  } else if (e.keyCode === 13 /* Enter */ ) {
+    this.doSelectHighlightedItem();
+    return false;
+  } else {
+    return true;
+  }
+}
+
+RomoSelectDropdown.prototype.onElemKeyDown = function(e) {
+  if (this.elem.hasClass('disabled') === false) {
+    if (this.romoDropdown.popupElem.hasClass('romo-dropdown-open') === false) {
+      if(e.keyCode === 40 /* Down */ ) {
+        this.romoDropdown.doPopupOpen();
+        return false;
+      } else {
+        return true;
+      }
+    }
+  }
+  return true;
+}
+
+RomoSelectDropdown.prototype._scrollTopToItem = function(item) {
+  if (item.size() > 0) {
+    var scroll = this.romoDropdown.bodyElem;
+    scroll.scrollTop(0);
+
+    var scrollOffsetTop = scroll.offset().top;
+    var selOffsetTop = item.offset().top;
+    var selOffset = item.height() / 2;
+
+    scroll.scrollTop(selOffsetTop - scrollOffsetTop - selOffset);
+  }
+}
+
+RomoSelectDropdown.prototype._scrollBottomToItem = function(item) {
+  if (item.size() > 0) {
+    var scroll = this.romoDropdown.bodyElem;
+    scroll.scrollTop(0);
+
+    var scrollOffsetTop = scroll.offset().top;
+    var selOffsetTop = item.offset().top;
+    var selOffset = scroll[0].offsetHeight - item.height();
+
+    scroll.scrollTop(selOffsetTop - scrollOffsetTop - selOffset);
+  }
+}
+
+RomoSelectDropdown.prototype._buildOptionList = function(optionElems, listClass) {
+  var list = $('<ul></ul>');
+  list.addClass(listClass);
+  $.each(optionElems, $.proxy(function(idx, elem) {
+    if (elem.tagName === "OPTION") {
+      list.append(this._buildOptionListItem(elem));
+    } else if (elem.tagName === "OPTGROUP") {
+      list.append(this._buildOptGroupListItem(elem));
+      list.append(this._buildOptionList($(elem).children(), 'romo-select-optgroup'));
+    }
+  }, this));
+  return list;
+}
+
+RomoSelectDropdown.prototype._buildOptionListItem = function(optionElem) {
+  var opt = $(optionElem);
+  var item = $('<li data-romo-select-item="opt"></li>');
+
+  item.attr('data-romo-select-option-value', opt.attr('value'));
+  item.html(opt.text().trim() || '&nbsp;');
+  if (opt.prop('selected')) {
+    item.addClass('selected');
+  }
+  if (opt.attr('disabled') !== undefined) {
+    item.addClass('disabled');
+  }
+
+  return item;
+}
+
+RomoSelectDropdown.prototype._buildOptGroupListItem = function(optGroupElem) {
+  var optgroup = $(optGroupElem);
+  var item = $('<li data-romo-select-item="optgroup"></li>');
+
+  item.text(optgroup.attr('label'));
+
+  return item;
+}
+
+RomoSelectDropdown.prototype._nextListItem = function() {
+  var listOrItemSelector = 'UL, '+this.itemSelector;
+  var curr = this.romoDropdown.bodyElem.find('LI.romo-select-highlight');
+  var next = this._nextAll(curr, listOrItemSelector).first();
+
+  if (next.size() === 0) {
+    next = this._nextAll(curr.closest('UL'), listOrItemSelector).first();
+  }
+  if (next.size() !== 0 && next[0].tagName === 'UL') {
+    next = next.find(this.itemSelector).first()
+  }
+  if (next.size() === 0) {
+    next = this.romoDropdown.bodyElem.find(this.itemSelector).first();
+  }
+  return next;
+}
+
+RomoSelectDropdown.prototype._prevListItem = function() {
+  var listOrItemSelector = 'UL, '+this.itemSelector;
+  var curr = this.romoDropdown.bodyElem.find('LI.romo-select-highlight');
+  var prev = this._prevAll(curr, listOrItemSelector).last();
+
+  if (prev.size() === 0) {
+    prev = this._prevAll(curr.closest('UL'), listOrItemSelector).last();
+  }
+  if (prev.size() !== 0 && prev[0].tagName === 'UL') {
+    prev = prev.find(this.itemSelector).last()
+  }
+  if (prev.size() === 0) {
+    prev = this.romoDropdown.bodyElem.find(this.itemSelector).last();
+  }
+  return prev;
+}
+
+RomoSelectDropdown.prototype._nextAll = function(elem, selector) {
+  var els = $();
+  var el = elem.next();
+  while( el.length ) {
+    if (selector === undefined || el.is(selector)) {
+      els = els.add(el);
+    }
+    el = el.next();
+  }
+  return els;
+}
+
+RomoSelectDropdown.prototype._prevAll = function(elem, selector) {
+  var els = $();
+  var el = elem.prev();
+  while( el.length ) {
+    if (selector === undefined || el.is(selector)) {
+      els = els.add(el);
+    }
+    el = el.prev();
+  }
+  return els;
+}
+
+RomoSelectDropdown.prototype._highlightItem = function(item) {
+  this.romoDropdown.bodyElem.find('LI.romo-select-highlight').removeClass('romo-select-highlight');
+  item.addClass('romo-select-highlight');
+}
+
+Romo.onInitUI(function(e) {
+  Romo.initUIElems(e, '[data-romo-select-dropdown-auto="true"]').romoSelectDropdown();
+});

data/assets/js/romo/sortable.js

@@ -0,0 +1,201 @@
+$.fn.romoSortable = function() {
+  return $.map(this, function(element) {
+    return new RomoSortable(element);
+  });
+}
+
+var RomoSortable = function(element) {
+  this.elem = $(element);
+
+  this.draggableSelector = '[data-romo-sortable-item="true"]';
+  this.handleSelector = '[data-romo-sortable-handle="true"]';
+
+  this.draggableElems = this.elem.find(this.draggableSelector);
+  this.draggableElems.prop('draggable', 'true');
+
+  this.draggingClass = this.elem.data('romo-sortable-dragging-class') || '';
+  this.dragOverClass = this.elem.data('romo-sortable-dragover-class') || '';
+  this.placeholderClass = this.elem.data('romo-sortable-placeholder-class') || '';
+
+  this.draggedElem = this.draggedIndex = this.draggableSelected = null;
+  this.draggedOverElem = this.dragDirection = this.lastY = null;
+
+  this.elem.on('dragenter', $.proxy(this.onDragEnter, this));
+  this.elem.on('dragover',  $.proxy(this.onDragOver,  this));
+  this.elem.on('dragend',   $.proxy(this.onDragEnd,   this));
+  this.elem.on('drop',      $.proxy(this.onDragDrop,  this));
+
+  this.draggableElems.on('dragstart',  $.proxy(this.onDragStart, this));
+  this.draggableElems.on('dragenter',  $.proxy(this.onDragEnter, this));
+  this.draggableElems.on('dragover',   $.proxy(this.onDragOver,  this));
+  this.draggableElems.on('dragend',    $.proxy(this.onDragEnd,   this));
+  this.draggableElems.on('drop',       $.proxy(this.onDragDrop,  this));
+
+  this.draggableElems.on('mousedown', $.proxy(this.onDraggableMouseDown, this));
+  var handleElems = this.draggableElems.find(this.handleSelector)
+  handleElems.on('mousedown', $.proxy(this.onHandleMouseDown, this));
+  $('body').on('mouseup', $.proxy(this.onWindowBodyMouseUp, this));
+
+  this._resetGrabClasses();
+  this.doInit();
+  this.doInitPlaceholder();
+
+  this.elem.trigger('sortable:ready', [this]);
+}
+
+RomoSortable.prototype.doInit = function() {
+  // override as needed
+}
+
+RomoSortable.prototype.doInitPlaceholder = function() {
+  var tag;
+  try {
+    tag = this.draggableElems.get(0).tagName;
+  } catch(e) {
+    tag = /^ul|ol$/i.test(this.elem.tagName) ? 'li' : 'div';
+  }
+  this.placeholderElem = $('<' + tag + '/>');
+  this.placeholderElem.addClass(this.placeholderClass);
+
+  this.placeholderElem.on('dragover', $.proxy(this.onDragOver, this));
+  this.placeholderElem.on('drop',     $.proxy(this.onDragDrop, this));
+}
+
+RomoSortable.prototype.onDragStart = function(e) {
+  if(!this.draggableSelected){ return false; }
+
+  e.stopPropagation();
+  e.originalEvent.dataTransfer.effectAllowed = 'move';
+
+  // IE fix
+  try {
+    // FF fix, it won't drag without some data being set
+    e.originalEvent.dataTransfer.setData('text/plain', null);
+  } catch(e) {}
+
+  this.draggedElem = $(e.target);
+  this.draggedElem.addClass(this.draggingClass);
+  this.draggedIndex = this.draggedElem.index();
+
+  this.placeholderElem.css({ 'height': this.draggedElem.height() });
+
+  this.elem.trigger('sortable:dragStart', [this.draggedElem, this]);
+}
+
+RomoSortable.prototype.onDragEnter = function(e) {
+  e.preventDefault();
+  e.stopPropagation();
+
+  // return if event is fired on the placeholder
+  if(this.placeholderElem.get(0) === e.currentTarget){ return; }
+
+  this.placeholderElem.show();
+  this.draggedElem.hide();
+
+  // if event is not fired on the sortable
+  var overSortableElem = this.elem.get(0) === e.currentTarget;
+  var clientX = e.originalEvent.clientX;
+  var clientY = e.originalEvent.clientY;
+  if (!overSortableElem) {
+    // if we are in the same elem and moving the same direction, exit out
+    var overSameElem = this.draggedOverElem &&
+                       this.draggedOverElem.get(0) === e.currentTarget;
+    var sameDirection = (this.dragDirection === 'down' && clientY > this.lastY) ||
+                        (this.dragDirection === 'up'   && clientY < this.lastY);
+    if(overSameElem && sameDirection){ return; }
+
+    // remove dragged over classes from previous elem
+    if(this.draggedOverElem){ this.draggedOverElem.removeClass(this.dragOverClass); }
+    this.draggedOverElem = $(e.currentTarget);
+    this.lastY = clientY;
+    this.draggedOverElem.addClass(this.dragOverClass);
+
+    // insert the placeholder according to the dragging direction
+    if (this.placeholderElem.index() < this.draggedOverElem.index()) {
+      this.dragDirection = 'down';
+    } else {
+      this.dragDirection = 'up';
+    }
+    var insertMethod = this.dragDirection === 'down' ? 'after' : 'before';
+    this.draggedOverElem[insertMethod](this.placeholderElem);
+  }
+
+  this.elem.trigger('sortable:dragMove', [clientX, clientY, this.draggedElem, this]);
+}
+
+RomoSortable.prototype.onDragOver = function(e) {
+  // This is how you allow an element to receive a drop event.
+  e.preventDefault();
+  e.stopPropagation();
+}
+
+RomoSortable.prototype.onDragEnd = function(e) {
+  e.stopPropagation();
+  e.preventDefault();
+
+  if(!this.draggedElem){ return; }
+
+  this.draggableElems.removeClass(this.dragOverClass);
+  this.draggedElem.removeClass(this.draggingClass);
+  this.draggedElem.show();
+  this.placeholderElem.hide();
+  this._resetGrabClasses();
+
+  this.elem.trigger('sortable:dragStop', [this.draggedElem, this]);
+
+  this.draggedElem = this.draggedIndex = this.draggableSelected = null;
+  this.draggedOverElem = this.dragDirection = this.lastY = null;
+}
+
+RomoSortable.prototype.onDragDrop = function(e) {
+  e.stopPropagation();
+  e.preventDefault();
+
+  if(!this.draggedElem){ return; }
+
+  this.draggedElem.insertBefore(this.placeholderElem);
+  this.draggedElem.show();
+
+  var newIndex = this.draggedElem.index();
+  if (newIndex !== this.draggedIndex) {
+    this.elem.trigger('sortable:change', [this.draggedElem, this]);
+  }
+  this.elem.trigger('sortable:dragDrop', [this.draggedElem, this]);
+}
+
+RomoSortable.prototype.onDraggableMouseDown = function(e) {
+  // if our draggable elem doesn't have a handle then it's draggable
+  var draggableElem = $(e.currentTarget);
+  if(draggableElem.find(this.handleSelector).size() === 0) {
+    draggableElem.removeClass('romo-sortable-grab');
+    draggableElem.addClass('romo-sortable-grabbing');
+    this.draggableSelected = true;
+  }
+}
+
+RomoSortable.prototype.onHandleMouseDown = function(e) {
+  this.draggableSelected = true;
+  var handleElem = $(e.currentTarget);
+  handleElem.removeClass('romo-sortable-grab');
+  handleElem.addClass('romo-sortable-grabbing');
+}
+
+RomoSortable.prototype.onWindowBodyMouseUp = function(e) {
+  this.draggableSelected = false;
+}
+
+RomoSortable.prototype._resetGrabClasses = function() {
+  this.draggableElems.each($.proxy(function(index, item) {
+
+    draggableElem = $(item);
+    handleElem = draggableElem.find(this.handleSelector);
+    if(handleElem.size() === 0){ handleElem = draggableElem; }
+    handleElem.addClass('romo-sortable-grab');
+    handleElem.removeClass('romo-sortable-grabbing');
+
+  }, this));
+}
+
+Romo.onInitUI(function(e) {
+  $(e.target).find('[data-romo-sortable-auto="true"]').romoSortable();
+});