romo 0.0.1 → 0.1.0

data/assets/js/romo/inline.js

@@ -0,0 +1,77 @@
+$.fn.romoInline = function() {
+  return $.map(this, function(element) {
+    return new RomoInline(element);
+  });
+}
+
+var RomoInline = function(element) {
+  this.elem = $(element);
+  this.toggleElem = $(this.elem.data('romo-inline-toggle'));
+
+  this.elem.on('invoke:invoke', $.proxy(function(e, invoke) {
+    this.doInvoke();
+  }, this));
+  this.elem.on('invoke:loadStart', $.proxy(function(e, invoke) {
+    this.doLoadStart();
+  }, this));
+  this.elem.on('invoke:loadSuccess', $.proxy(function(e, data, invoke) {
+    this.doLoadSuccess(data);
+  }, this));
+  this.elem.on('invoke:loadError', $.proxy(function(e, xhr, invoke) {
+    this.doLoadError(xhr);
+  }, this));
+
+  this.doBindDismiss();
+  this.doInit();
+  this.elem.trigger('inline:ready', [this]);
+}
+
+RomoInline.prototype.doInit = function() {
+  // override as needed
+}
+
+RomoInline.prototype.doInvoke = function() {
+  this.elem.show();
+  this.toggleElem.hide();
+  this.elem.trigger('inline:invoke', [this]);
+}
+
+RomoInline.prototype.doLoadStart = function() {
+  this.elem.html('');
+  this.elem.trigger('inline:loadStart', [this]);
+}
+
+RomoInline.prototype.doLoadSuccess = function(data) {
+  Romo.initHtml(this.elem, data);
+  this.doBindDismiss();
+  this.elem.trigger('inline:loadSuccess', [data, this]);
+}
+
+RomoInline.prototype.doLoadError = function(xhr) {
+  this.elem.trigger('inline:loadError', [xhr, this]);
+}
+
+RomoInline.prototype.doBindDismiss = function() {
+  var dismissElem = this.elem.find('[data-romo-inline-dismiss="true"]');
+  dismissElem.unbind('click');
+  dismissElem.on('click', $.proxy(this.onDismissClick, this));
+}
+
+RomoInline.prototype.onDismissClick = function(e) {
+  if (e !== undefined) {
+    e.preventDefault();
+  }
+
+  this.doDismiss();
+}
+
+RomoInline.prototype.doDismiss = function() {
+  this.toggleElem.show();
+  this.elem.hide();
+  this.elem.trigger('inline:dismiss', [this]);
+}
+
+Romo.onInitUI(function(e) {
+  Romo.initUIElems(e, '[data-romo-inline-auto="true"]').romoInline();
+});
+

data/assets/js/romo/inline_form.js

@@ -0,0 +1,86 @@
+$.fn.romoInlineForm = function() {
+  return $.map(this, function(element) {
+    return new RomoInlineForm(element);
+  });
+}
+
+var RomoInlineForm = function(element) {
+  this.elem = $(element);
+
+  this.inline = this.elem.romoInline()[0];
+  this.doBindInline();
+
+  this.form = undefined;
+  this.elem.on('inlineForm:form:triggerSubmit', $.proxy(function(e) {
+    if (this.form != undefined) {
+      this.form.elem.trigger('form:triggerSubmit', []);
+    }
+  }, this));
+  this.doBindForm();
+  this.elem.on('inline:loadSuccess', $.proxy(function(e, data, inline) {
+    this.doBindForm();
+  }, this));
+
+  this.doInit();
+  this.elem.trigger('inlineForm:ready', [this]);
+}
+
+RomoInlineForm.prototype.doInit = function() {
+  // override as needed
+}
+
+RomoInlineForm.prototype.doBindInline = function() {
+  this.elem.on('inline:ready', $.proxy(function(e, inline) {
+    this.elem.trigger('inlineForm:inline:ready', [inline, this]);
+  }, this));
+  this.elem.on('inline:invoke', $.proxy(function(e, inline) {
+    this.elem.trigger('inlineForm:inline:invoke', [inline, this]);
+  }, this));
+  this.elem.on('inline:loadStart', $.proxy(function(e, inline) {
+    this.elem.trigger('inlineForm:inline:loadStart', [inline, this]);
+  }, this));
+  this.elem.on('inline:loadSuccess', $.proxy(function(e, data, inline) {
+    this.elem.trigger('inlineForm:inline:loadSuccess', [data, inline, this]);
+  }, this));
+  this.elem.on('inline:loadError', $.proxy(function(e, xhr, inline) {
+    this.elem.trigger('inlineForm:inline:loadError', [xhr, inline, this]);
+  }, this));
+  this.elem.on('inline:dismiss', $.proxy(function(e, inline) {
+    this.elem.trigger('inlineForm:inline:dismiss', [inline, this]);
+  }, this));
+}
+
+RomoInlineForm.prototype.doBindForm = function() {
+  var formElem = this.elem.find('[data-romo-form-auto="inlineForm"]');
+
+  formElem.on('form:clearMsgs', $.proxy(function(e, form) {
+    this.elem.trigger('inlineForm:form:clearMsgs', [form, this]);
+  }, this));
+  formElem.on('form:ready', $.proxy(function(e, form) {
+    this.elem.trigger('inlineForm:form:ready', [form, this]);
+  }, this));
+  formElem.on('form:beforeSubmit', $.proxy(function(e, form) {
+    this.elem.trigger('inlineForm:form:beforeSubmit', [form, this]);
+  }, this));
+  formElem.on('form:submitSuccess', $.proxy(function(e, data, form) {
+    this.elem.trigger('inlineForm:form:submitSuccess', [data, form, this]);
+  }, this));
+  formElem.on('form:submitInvalidMsgs', $.proxy(function(e, msgs, xhr, form) {
+    this.elem.trigger('inlineForm:form:submitInvalidMsgs', [msgs, xhr, form, this]);
+  }, this));
+  formElem.on('form:submitXhrError', $.proxy(function(e, xhr, form) {
+    this.elem.trigger('inlineForm:form:submitXhrError', [xhr, form, this]);
+  }, this));
+  formElem.on('form:submitError', $.proxy(function(e, xhr, form) {
+    this.elem.trigger('inlineForm:form:submitError', [xhr, form, this]);
+  }, this));
+
+  var submitElement = this.elem.find('[data-romo-form-submit="true"]')[0];
+  var indicatorElements = this.elem.find('[data-romo-indicator-auto="true"]');
+  this.form = formElem.romoForm(submitElement, indicatorElements)[0];
+}
+
+Romo.onInitUI(function(e) {
+  Romo.initUIElems(e, '[data-romo-inlineForm-auto="true"]').romoInlineForm();
+});
+

data/assets/js/romo/invoke.js

@@ -0,0 +1,87 @@
+$.fn.romoInvoke = function() {
+  return $.map(this, function(element) {
+    return new RomoInvoke(element);
+  });
+}
+
+var RomoInvoke = function(element) {
+  this.elem = $(element);
+  this.targetElem = $(this.elem.data('romo-invoke-target'));
+  this.invokeOn = this.elem.data('romo-invoke-on') || 'click';
+  this.invokeAttr = this.elem.data('romo-invoke-attr') || 'href';
+  this.loadOnlyOnce = this.elem.data('romo-invoke-load-once') === true;
+
+  this.elem.unbind(this.invokeOn);
+
+  this.doInit();
+  this.doBindInvoke();
+  this._trigger('invoke:ready', [this]);
+}
+
+RomoInvoke.prototype.doInit = function() {
+  // override as needed
+}
+
+RomoInvoke.prototype.doBindInvoke = function() {
+  this.doUnBindInvoke();
+  this.elem.on(this.invokeOn, $.proxy(this.onInvoke, this));
+  this.elem.on('invoke:triggerInvoke', $.proxy(this.onInvoke, this));
+}
+
+RomoInvoke.prototype.doUnBindInvoke = function() {
+  this.elem.off(this.invokeOn, $.proxy(this.onInvoke, this));
+  this.elem.off('invoke:triggerInvoke', $.proxy(this.onInvoke, this));
+}
+
+RomoInvoke.prototype.onInvoke = function(e) {
+  if (e !== undefined) {
+    e.preventDefault();
+  }
+
+  if (this.elem.hasClass('disabled') === false) {
+    this.doInvoke();
+  }
+}
+
+RomoInvoke.prototype.doInvoke = function() {
+  var loadHref = this.elem.attr(this.invokeAttr);
+  if (this.loadOnlyOnce === true) {
+    this.elem.removeAttr(this.invokeAttr);
+  }
+  if (loadHref !== undefined) {
+    this.doLoad(loadHref);
+  } else {
+    this._trigger('invoke:invoke', [this]);
+  }
+}
+
+RomoInvoke.prototype.doLoad = function(href) {
+  this._trigger('invoke:loadStart', [this]);
+
+  $.ajax({
+    url:     href,
+    success: $.proxy(this.onLoadAjaxSuccess, this),
+    error:   $.proxy(this.onLoadAjaxError,   this)
+  });
+}
+
+RomoInvoke.prototype.onLoadAjaxSuccess = function(data, status, xhr) {
+  this._trigger('invoke:invoke', [this]);
+  this._trigger('invoke:loadSuccess', [data, this]);
+}
+
+RomoInvoke.prototype.onLoadAjaxError = function(xhr, errorType, error) {
+  this._trigger('invoke:invoke', [this]);
+  this._trigger('invoke:loadError', [xhr, this]);
+}
+
+RomoInvoke.prototype._trigger = function(event_name, event_data) {
+  this.elem.trigger(event_name, event_data);
+  if (this.targetElem !== undefined) {
+    this.targetElem.trigger(event_name, event_data);
+  }
+}
+
+Romo.onInitUI(function(e) {
+  Romo.initUIElems(e, '[data-romo-invoke-auto="true"]').romoInvoke();
+});

data/assets/js/romo/modal.js

@@ -0,0 +1,311 @@
+$.fn.romoModal = function() {
+  return $.map(this, function(element) {
+    return new RomoModal(element);
+  });
+}
+
+var RomoModal = function(element) {
+  this.elem = $(element);
+  this.popupElem = $('<div class="romo-modal-popup"><div class="romo-modal-body"></div></div>');
+  this.popupElem.appendTo('body');
+  this.bodyElem = this.popupElem.find('> .romo-modal-body');
+  this.contentElem = $();
+  this.closeElem = $();
+  this.dragElem = $();
+  this.romoInvoke = this.elem.romoInvoke()[0];
+
+  if (this.elem.data('romo-modal-style-class') !== undefined) {
+    this.bodyElem.addClass(this.elem.data('romo-modal-style-class'));
+  }
+
+  this.elem.unbind('click');
+  this.elem.on('click', $.proxy(this.onToggleClick, this));
+  this.elem.on('modal:triggerToggle', $.proxy(this.onToggleClick, this));
+  this.elem.on('modal:triggerPopupOpen', $.proxy(this.onPopupOpen, this));
+  this.elem.on('modal:triggerPopupClose', $.proxy(this.onPopupClose, this));
+  this.elem.on('invoke:loadStart', $.proxy(function(e, invoke) {
+    this.doLoadBodyStart();
+  }, this));
+  this.elem.on('invoke:loadSuccess', $.proxy(function(e, data, invoke) {
+    this.doLoadBodySuccess(data);
+  }, this));
+  this.elem.on('invoke:loadError', $.proxy(function(e, xhr, invoke) {
+    this.doLoadBodyError(xhr);
+  }, this));
+
+  this.doInit();
+  this.doInitBody();
+
+  this.elem.trigger('modal:ready', [this]);
+}
+
+RomoModal.prototype.doInit = function() {
+  // override as needed
+}
+
+RomoModal.prototype.doInitBody = function() {
+  this.doResetBody();
+
+  this.contentElem = this.bodyElem.find('.romo-modal-content').last();
+  if (this.contentElem.size() === 0) {
+    this.contentElem = this.bodyElem;
+  }
+  this.closeElem = this.popupElem.find('[data-romo-modal-close="true"]');
+  this.dragElem = this.popupElem.find('[data-romo-modal-drag="true"]');
+
+  var css = {
+    'min-width':  this.elem.data('romo-modal-min-width'),
+    'max-width':  this.elem.data('romo-modal-max-width'),
+    'width':      this.elem.data('romo-modal-width'),
+    'min-height': this.elem.data('romo-modal-min-height'),
+    'height':     this.elem.data('romo-modal-height'),
+    'overflow-x': 'auto',
+    'overflow-y': 'auto'
+  }
+
+  if (this.elem.data('romo-modal-max-height') === undefined) {
+    this.elem.attr('data-romo-modal-max-height', 'detect');
+  }
+  if (this.elem.data('romo-modal-max-height') !== 'detect') {
+    css['max-height'] = this.elem.data('romo-modal-max-height');
+  }
+
+  this.contentElem.css(css);
+
+  this.closeElem.unbind('click');
+  this.closeElem.on('click', $.proxy(this.onPopupClose, this));
+
+  this.dragElem.addClass('romo-modal-grab');
+  this.dragElem.on('mousedown', $.proxy(this.onMouseDown, this));
+}
+
+RomoModal.prototype.doResetBody = function() {
+  this.contentElem.css({
+    'min-width':  '',
+    'max-width':  '',
+    'width':      '',
+    'min-height': '',
+    'max-height': '',
+    'height':     '',
+    'overflow':   ''
+  });
+
+  this.closeElem.off('click', $.proxy(this.onPopupClose, this));
+}
+
+RomoModal.prototype.doLoadBodyStart = function() {
+  this.bodyElem.html('');
+  this.doInitBody();
+  this.doPlacePopupElem();
+  this.elem.trigger('modal:loadBodyStart', [this]);
+}
+
+RomoModal.prototype.doLoadBodySuccess = function(data) {
+  Romo.initHtml(this.bodyElem, data);
+  this.doInitBody();
+  this.doPlacePopupElem();
+  this.elem.trigger('modal:loadBodySuccess', [data, this]);
+}
+
+RomoModal.prototype.doLoadBodyError = function(xhr) {
+  this.elem.trigger('modal:loadBodyError', [xhr, this]);
+}
+
+RomoModal.prototype.onToggleClick = function(e) {
+  if (e !== undefined) {
+    e.preventDefault();
+  }
+
+  if (this.elem.hasClass('disabled') === false) {
+    this.doToggle();
+  }
+}
+
+RomoModal.prototype.doToggle = function() {
+  if (this.popupElem.hasClass('romo-modal-open')) {
+    setTimeout($.proxy(function() {
+      this.doPopupClose();
+    }, this), 100);
+  } else {
+    setTimeout($.proxy(function() {
+      this.doPopupOpen();
+    }, this), 100);
+  }
+  this.elem.trigger('modal:toggle', [this]);
+}
+
+RomoModal.prototype.onPopupOpen = function(e) {
+  if (e !== undefined) {
+    e.preventDefault();
+  }
+
+  if ((this.elem.hasClass('disabled') === false) &&
+      (this.popupElem.hasClass('romo-modal-open') === false)) {
+    setTimeout($.proxy(function() {
+      this.doPopupOpen();
+    }, this), 100);
+  }
+}
+
+RomoModal.prototype.doPopupOpen = function() {
+  this.romoInvoke.doInvoke();
+  this.popupElem.addClass('romo-modal-open');
+  this.doPlacePopupElem();
+
+  // bind an event to close the popup when clicking away from the
+  // popup.  Bind on a timeout to allow time for any toggle
+  // click event to propagate.  If no timeout, we'll bind this
+  // event, then the toggle click will propagate which will call
+  // this event and immediately close the popup.
+  setTimeout($.proxy(function() {
+    $('body').on('click', $.proxy(this.onWindowBodyClick, this));
+  }, this), 100);
+
+  // bind "esc" keystroke to toggle close
+  $('body').on('keyup', $.proxy(this.onWindowBodyKeyUp, this));
+
+  // bind window resizes reposition modal
+  $(window).on('resize', $.proxy(this.onResizeWindow, this));
+
+  this.elem.trigger('modal:popupOpen', [this]);
+}
+
+RomoModal.prototype.onPopupClose = function(e) {
+  if (e !== undefined) {
+    e.preventDefault();
+  }
+
+  if (this.elem.hasClass('disabled') === false) {
+    setTimeout($.proxy(function() {
+      this.doPopupClose();
+    }, this), 100);
+  }
+}
+
+RomoModal.prototype.doPopupClose = function() {
+  $('body').trigger('modal:popupclose');
+  this.popupElem.removeClass('romo-modal-open');
+
+  // unbind any event to close the popup when clicking away from it
+  $('body').off('click', $.proxy(this.onWindowBodyClick, this));
+
+  // unbind "esc" keystroke to toggle close
+  $('body').off('keyup', $.proxy(this.onWindowBodyKeyUp, this));
+
+  // unbind window resizes reposition modal
+  $(window).off('resize', $.proxy(this.onResizeWindow, this));
+
+  this.elem.trigger('modal:popupClose', [this]);
+}
+
+RomoModal.prototype.onMouseDown = function(e) {
+  $('body').trigger('modal:mousedown');
+  e.preventDefault();
+  e.stopPropagation();
+  this.doDragStart(e);
+  return false;
+}
+
+RomoModal.prototype.doDragStart = function(e) {
+  this.dragElem.addClass('romo-modal-grabbing');
+  this.dragElem.removeClass('romo-modal-grab');
+
+  this.popupElem.css('width', this.popupElem.width()+'px');
+  this.popupElem.css('height', this.popupElem.height()+'px');
+
+  this._dragDiffX = e.clientX - this.popupElem[0].offsetLeft;
+  this._dragDiffY = e.clientY - this.popupElem[0].offsetTop;
+  $(window).on('mousemove', $.proxy(this.onMouseMove, this));
+  $(window).on('mouseup',   $.proxy(this.onMouseUp, this));
+
+  this.elem.trigger("modal:dragStart", [this]);
+}
+
+RomoModal.prototype.onMouseMove = function(e) {
+  e.preventDefault();
+  e.stopPropagation();
+  this.doDragMove(e.clientX, e.clientY);
+  return false;
+}
+
+RomoModal.prototype.doDragMove = function(clientX, clientY) {
+  var placeX = clientX - this._dragDiffX;
+  var placeY = clientY - this._dragDiffY;
+  this.popupElem.css({ left: placeX+'px' , top: placeY+'px' });
+
+  this.elem.trigger("modal:dragMove", [placeX, placeY, this]);
+}
+
+RomoModal.prototype.onMouseUp = function(e) {
+  e.preventDefault();
+  e.stopPropagation();
+  this.doDragStop(e);
+  return false;
+}
+
+RomoModal.prototype.doDragStop = function(e) {
+  this.dragElem.addClass('romo-modal-grab');
+  this.dragElem.removeClass('romo-modal-grabbing');
+  this.popupElem.css('width', '');
+  this.popupElem.css('height', '');
+
+  $(window).off('mousemove', $.proxy(this.onMouseMove, this));
+  $(window).off('mouseup',   $.proxy(this.onMouseUp, this));
+  delete this._dragDiffX;
+  delete this._dragDiffY;
+
+  this.elem.trigger("modal:dragStop", [this]);
+}
+
+RomoModal.prototype.onWindowBodyClick = function(e) {
+  // if not clicked on the popup elem
+  if (e !== undefined && $(e.target).parents('.romo-modal-popup').size() === 0) {
+    this.doPopupClose();
+  }
+  return true;
+}
+
+RomoModal.prototype.onWindowBodyKeyUp = function(e) {
+  if (e.keyCode === 27 /* Esc */) {
+    this.doPopupClose();
+  }
+  return true;
+}
+
+RomoModal.prototype.onResizeWindow = function(e) {
+  this.doPlacePopupElem();
+  return true;
+}
+
+RomoModal.prototype.doPlacePopupElem = function() {
+  var w = this.popupElem[0].offsetWidth;
+  var h = this.popupElem[0].offsetHeight;
+  var min = 75;
+  var centerTop  = $(window).height() / 2 - h / 2;
+  var centerLeft = $(window).width()  / 2 - w / 2;
+  var css = {};
+
+  css.top = $(window).height() * 0.15;
+  if (centerTop < css.top) { css.top = centerTop; }
+  if (css.top < min) { css.top = min; }
+
+  css.left = centerLeft;
+  if (css.left < min) { css.left = min; }
+
+  this.popupElem.css(css);
+
+  if (this.elem.data('romo-modal-max-height') === 'detect') {
+    var pad = this.elem.data('romo-modal-max-height-detect-pad') || 10;
+    var contentTop = this.contentElem[0].getBoundingClientRect().top;
+    var contentBottom = this.contentElem[0].getBoundingClientRect().bottom;
+    var bodyBottom = this.bodyElem[0].getBoundingClientRect().bottom;
+    var padBottom = bodyBottom - contentBottom;
+
+    var maxHeight = $(window).height() - contentTop - padBottom - pad;
+    this.contentElem.css({'max-height': maxHeight.toString() + 'px'});
+  }
+}
+
+Romo.onInitUI(function(e) {
+  Romo.initUIElems(e, '[data-romo-modal-auto="true"]').romoModal();
+});

data/assets/js/romo/modal_form.js

@@ -0,0 +1,101 @@
+$.fn.romoModalForm = function() {
+  return $.map(this, function(element) {
+    return new RomoModalForm(element);
+  });
+}
+
+var RomoModalForm = function(element) {
+  this.elem = $(element);
+
+  this.modal = this.elem.romoModal()[0];
+  this.doBindModal();
+
+  this.form = undefined;
+  this.elem.on('modalForm:form:triggerSubmit', $.proxy(function(e) {
+    if (this.form != undefined) {
+      this.form.elem.trigger('form:triggerSubmit', []);
+    }
+  }, this));
+  this.doBindForm();
+  this.elem.on('modal:loadBodySuccess', $.proxy(function(e, data, modal) {
+    this.doBindForm();
+  }, this));
+
+  this.doInit();
+  this.elem.trigger('modalForm:ready', [this]);
+}
+
+RomoModalForm.prototype.doInit = function() {
+  // override as needed
+}
+
+RomoModalForm.prototype.doBindModal = function() {
+  this.elem.on('modal:ready', $.proxy(function(e, modal) {
+    this.elem.trigger('modalForm:modal:ready', [modal, this]);
+  }, this));
+  this.elem.on('modal:toggle', $.proxy(function(e, modal) {
+    this.elem.trigger('modalForm:modal:toggle', [modal, this]);
+  }, this));
+  this.elem.on('modal:popupOpen', $.proxy(function(e, modal) {
+    this.elem.trigger('modalForm:modal:popupOpen', [modal, this]);
+  }, this));
+  this.elem.on('modal:popupClose', $.proxy(function(e, modal) {
+    this.elem.trigger('modalForm:modal:popupClose', [modal, this]);
+  }, this));
+  this.elem.on('modal:dragStart', $.proxy(function(e, modal) {
+    this.elem.trigger('modalForm:modal:dragStart', [modal, this]);
+  }, this));
+  this.elem.on('modal:dragMove', $.proxy(function(e, placeX, placeY, modal) {
+    this.elem.trigger('modalForm:modal:dragMove', [placeX, placeY, modal, this]);
+  }, this));
+  this.elem.on('modal:dragStop', $.proxy(function(e, modal) {
+    this.elem.trigger('modalForm:modal:dragStop', [modal, this]);
+  }, this));
+  this.elem.on('modal:loadBodyStart', $.proxy(function(e, modal) {
+    this.elem.trigger('modalForm:modal:loadBodyStart', [modal, this]);
+  }, this));
+  this.elem.on('modal:loadBodySuccess', $.proxy(function(e, data, modal) {
+    this.elem.trigger('modalForm:modal:loadBodySuccess', [data, modal, this]);
+  }, this));
+  this.elem.on('modal:loadBodyError', $.proxy(function(e, xhr, modal) {
+    this.elem.trigger('modalForm:modal:loadBodyError', [xhr, modal, this]);
+  }, this));
+  this.elem.on('modal:dismiss', $.proxy(function(e, modal) {
+    this.elem.trigger('modalForm:modal:dismiss', [modal, this]);
+  }, this));
+}
+
+RomoModalForm.prototype.doBindForm = function() {
+  var formElem = this.modal.popupElem.find('[data-romo-form-auto="modalForm"]');
+
+  formElem.on('form:clearMsgs', $.proxy(function(e, form) {
+    this.elem.trigger('modalForm:form:clearMsgs', [form, this]);
+  }, this));
+  formElem.on('form:ready', $.proxy(function(e, form) {
+    this.elem.trigger('modalForm:form:ready', [form, this]);
+  }, this));
+  formElem.on('form:beforeSubmit', $.proxy(function(e, form) {
+    this.elem.trigger('modalForm:form:beforeSubmit', [form, this]);
+  }, this));
+  formElem.on('form:submitSuccess', $.proxy(function(e, data, form) {
+    this.elem.trigger('modalForm:form:submitSuccess', [data, form, this]);
+  }, this));
+  formElem.on('form:submitInvalidMsgs', $.proxy(function(e, msgs, xhr, form) {
+    this.elem.trigger('modalForm:form:submitInvalidMsgs', [msgs, xhr, form, this]);
+  }, this));
+  formElem.on('form:submitXhrError', $.proxy(function(e, xhr, form) {
+    this.elem.trigger('modalForm:form:submitXhrError', [xhr, form, this]);
+  }, this));
+  formElem.on('form:submitError', $.proxy(function(e, xhr, form) {
+    this.elem.trigger('modalForm:form:submitError', [xhr, form, this]);
+  }, this));
+
+  var submitElement = this.modal.popupElem.find('[data-romo-form-submit="true"]')[0];
+  var indicatorElements = this.modal.popupElem.find('[data-romo-indicator-auto="true"]');
+  this.form = formElem.romoForm(submitElement, indicatorElements)[0];
+}
+
+Romo.onInitUI(function(e) {
+  Romo.initUIElems(e, '[data-romo-modalForm-auto="true"]').romoModalForm();
+});
+