romo 0.19.10 → 0.20.0

data/assets/js/romo/indicator_text_input.js

@@ -1,11 +1,5 @@
-$.fn.romoIndicatorTextInput = function() {
-  return $.map(this, function(element) {
-    return new RomoIndicatorTextInput(element);
-  });
-}
-
-var RomoIndicatorTextInput = function(element) {
-  this.elem = $(element);
+var RomoIndicatorTextInput = RomoComponent(function(elem) {
+  this.elem = elem;
 
   this.defaultIndicatorClass     = undefined;
   this.defaultIndicatorPaddingPx = 5;
@@ -14,107 +8,92 @@ var RomoIndicatorTextInput = function(element) {
   this.doInit();
   this._bindElem();
 
-  this.elem.trigger('indicatorTextInput:ready', [this]);
-}
-
-RomoIndicatorTextInput.prototype.doInit = function() {
-  // override as needed
-}
+  Romo.trigger(this.elem, 'romoIndicatorTextInput:ready', [this]);
+});
 
 RomoIndicatorTextInput.prototype.doEnable = function() {
-  this.elem.prop('disabled', false);
-  this.elem.removeClass('disabled');
-  this.indicatorElem.removeClass('disabled');
+  this.elem.disabled = false;
+  Romo.removeClass([this.elem, this.indicatorElem], 'disabled');
 }
 
 RomoIndicatorTextInput.prototype.doDisable = function() {
-  this.elem.prop('disabled', true);
-  this.elem.addClass('disabled');
-  this.indicatorElem.addClass('disabled');
+  this.elem.disabled = true;
+  Romo.addClass([this.elem, this.indicatorElem], 'disabled');
 }
 
 RomoIndicatorTextInput.prototype.doShow = function() {
-  this._show(this.elem);
-  this._show(this.indicatorElem);
+  Romo.show([this.elem, this.indicatorElem]);
   this._placeIndicatorElem();
 }
 
 RomoIndicatorTextInput.prototype.doHide = function() {
-  this._hide(this.elem);
-  this._hide(this.indicatorElem);
+  Romo.hide([this.elem, this.indicatorElem]);
 }
 
-/* private */
+// private
 
 RomoIndicatorTextInput.prototype._bindElem = function() {
-  var elemWrapper = $('<div class="romo-indicator-text-input-wrapper"></div>');
-  elemWrapper.css({'display': (this.elem.data('romo-indicator-text-input-elem-display') || 'inline-block')});
-  if (this.elem.data('romo-indicator-text-input-btn-group') === true) {
-    elemWrapper.addClass('romo-btn-group');
+  var elemWrapper = Romo.elems('<div class="romo-indicator-text-input-wrapper"></div>')[0];
+  Romo.setStyle(elemWrapper, 'display', (Romo.data(this.elem, 'romo-indicator-text-input-elem-display') || 'inline-block'));
+  if (Romo.data(this.elem, 'romo-indicator-text-input-btn-group') === true) {
+    Romo.addClass(elemWrapper, 'romo-btn-group');
   }
 
-  this.elem.before(elemWrapper);
-  elemWrapper.append(this.elem);
+  Romo.before(this.elem, elemWrapper);
+  Romo.append(elemWrapper, this.elem);
+  Romo.parentChildElems.add(this.elem, [elemWrapper]);
 
-  // the elem wrapper should be treated like a child elem.  add it to Romo's
-  // parent-child elems so it will be removed when the elem (input) is removed.
-  // delay adding it b/c the `append` statement above is not a "move", it is
-  // a "remove" and "add" so if added immediately the "remove" part will
-  // incorrectly remove the wrapper.  Any value will do - I chose 1 arbitrarily.
-  setTimeout($.proxy(function() {
-    Romo.parentChildElems.add(this.elem, [elemWrapper]);
-  }, this), 1);
-
-  this.indicatorElem = $();
-  var indicatorClass = this.elem.data('romo-indicator-text-input-indicator') || this.defaultIndicatorClass;
+  this.indicatorElem = undefined;
+  var indicatorClass = Romo.data(this.elem, 'romo-indicator-text-input-indicator') || this.defaultIndicatorClass;
   if (indicatorClass !== undefined && indicatorClass !== 'none') {
-    this.indicatorElem = $('<div class="romo-indicator-text-input-indicator"><div><i class="'+indicatorClass+'"></i></div></div>');
-    this.elem.after(this.indicatorElem);
-    this.indicatorElem.on('click', $.proxy(this._onIndicatorClick, this));
+    this.indicatorElem = Romo.elems('<div class="romo-indicator-text-input-indicator"><div><i class="'+indicatorClass+'"></i></div></div>')[0];
+    Romo.after(this.elem, this.indicatorElem);
+    Romo.on(this.indicatorElem, 'click', Romo.proxy(this._onIndicatorClick, this));
     this._placeIndicatorElem();
 
-    this.indicatorIconContainerElem = this.indicatorElem.find('div');
-    if (this.elem.data('romo-indicator-text-input-indicator-basis-size') !== undefined) {
-      this.indicatorIconContainerElem.attr(
-        'data-romo-indicator-basis-size',
-        this.elem.data('romo-indicator-text-input-indicator-basis-size')
+    this.indicatorIconContainerElem = Romo.find(this.indicatorElem, 'div')[0];
+    if (Romo.data(this.elem, 'romo-indicator-text-input-spinner-basis-size') !== undefined) {
+      Romo.setData(
+        this.indicatorIconContainerElem,
+        'romo-spinner-basis-size',
+        Romo.data(this.elem, 'romo-indicator-text-input-spinner-basis-size')
       )
     }
-    this.indicatorIconContainerElem.romoIndicator();
+    new RomoSpinner(this.indicatorIconContainerElem);
 
-    this.elem.on('indicatorTextInput:triggerPlaceIndicator', $.proxy(function(e) {
+    Romo.on(this.elem, 'romoIndicatorTextInput:triggerPlaceIndicator', Romo.proxy(function(e) {
       this._placeIndicatorElem();
     }, this));
-    this.elem.on('indicatorTextInput:triggerIndicatorStart', $.proxy(function(e, basisSize) {
-      this.indicatorIconContainerElem.trigger('indicator:triggerStart', [basisSize]);
+    Romo.on(this.elem, 'romoIndicatorTextInput:triggerSpinnerStart', Romo.proxy(function(e, basisSize) {
+      Romo.trigger(this.indicatorIconContainerElem, 'romoSpinner:triggerStart', [basisSize]);
     }, this));
-    this.elem.on('indicatorTextInput:triggerIndicatorStop', $.proxy(function(e) {
-      this.indicatorIconContainerElem.trigger('indicator:triggerStop');
+    Romo.on(this.elem, 'romoIndicatorTextInput:triggerSpinnerStop', Romo.proxy(function(e) {
+      Romo.trigger(this.indicatorIconContainerElem, 'romoSpinner:triggerStop');
     }, this));
   }
 
-  this.elem.on('indicatorTextInput:triggerEnable', $.proxy(function(e) {
+  Romo.on(this.elem, 'romoIndicatorTextInput:triggerEnable', Romo.proxy(function(e) {
     this.doEnable();
   }, this));
-  this.elem.on('indicatorTextInput:triggerDisable', $.proxy(function(e) {
+  Romo.on(this.elem, 'romoIndicatorTextInput:triggerDisable', Romo.proxy(function(e) {
     this.doDisable();
   }, this));
-  this.elem.on('indicatorTextInput:triggerShow', $.proxy(function(e) {
+  Romo.on(this.elem, 'romoIndicatorTextInput:triggerShow', Romo.proxy(function(e) {
     this.doShow();
   }, this));
-  this.elem.on('indicatorTextInput:triggerHide', $.proxy(function(e) {
+  Romo.on(this.elem, 'romoIndicatorTextInput:triggerHide', Romo.proxy(function(e) {
     this.doHide();
   }, this));
 }
 
 RomoIndicatorTextInput.prototype._placeIndicatorElem = function() {
   if (this.indicatorElem !== undefined) {
-    this.indicatorElem.css({'line-height': this.elem.css('height')});
-    if (this.elem.prop('disabled') === true) {
-      this.indicatorElem.addClass('disabled');
+    Romo.setStyle(this.indicatorElem, 'line-height', Romo.css(this.elem, 'height'));
+    if (this.elem.disabled === true) {
+      Romo.addClass(this.indicatorElem, 'disabled');
     }
-    if (this.elem.css('display') === 'none') {
-      this._hide(this.indicatorElem);
+    if (Romo.css(this.elem, 'display') === 'none') {
+      Romo.hide(this.indicatorElem);
     }
 
     var indicatorPaddingPx = this._getIndicatorPaddingPx();
@@ -122,58 +101,48 @@ RomoIndicatorTextInput.prototype._placeIndicatorElem = function() {
     var indicatorPosition  = this._getIndicatorPosition();
 
     // add a pixel to account for the default input border
-    this.indicatorElem.css(indicatorPosition, indicatorPaddingPx+1);
+    Romo.setStyle(this.indicatorElem, indicatorPosition, indicatorPaddingPx+1+'px');
 
     // left-side padding
     // + indicator width
     // + right-side padding
     var inputPaddingPx = indicatorPaddingPx + indicatorWidthPx + indicatorPaddingPx;
-    this.elem.css('padding-'+indicatorPosition, inputPaddingPx+'px');
+    Romo.setStyle(this.elem, 'padding-'+indicatorPosition, inputPaddingPx+'px');
   }
 }
 
-RomoIndicatorTextInput.prototype._onIndicatorClick = function(e) {
-  if (e !== undefined) {
-    e.preventDefault();
-    e.stopPropagation();
-  }
-  if (this.elem.prop('disabled') === false) {
-    this.elem.focus();
-    this.elem.trigger('indicatorTextInput:indicatorClick');
-  }
-}
-
-// private
-
-RomoIndicatorTextInput.prototype._show = function(elem) {
-  elem.css('display', '');
-}
-
-RomoIndicatorTextInput.prototype._hide = function(elem) {
-  elem.css('display', 'none');
-}
-
 RomoIndicatorTextInput.prototype._getIndicatorPaddingPx = function() {
   return (
-    this.elem.data('romo-indicator-text-input-indicator-padding-px') ||
+    Romo.data(this.elem, 'romo-indicator-text-input-indicator-padding-px') ||
     this.defaultIndicatorPaddingPx
   );
 }
 
 RomoIndicatorTextInput.prototype._getIndicatorWidthPx = function() {
   return (
-    this.elem.data('romo-indicator-text-input-indicator-width-px') ||
-    parseInt(Romo.getComputedStyle(this.indicatorElem[0], "width"), 10)
+    Romo.data(this.elem, 'romo-indicator-text-input-indicator-width-px') ||
+    parseInt(Romo.css(this.indicatorElem, "width"), 10)
   );
 }
 
 RomoIndicatorTextInput.prototype._getIndicatorPosition = function() {
   return (
-    this.elem.data('romo-indicator-text-input-indicator-position') ||
+    Romo.data(this.elem, 'romo-indicator-text-input-indicator-position') ||
     this.defaultIndicatorPosition
   );
 }
 
-Romo.onInitUI(function(e) {
-  Romo.initUIElems(e, '[data-romo-indicator-text-input-auto="true"]').romoIndicatorTextInput();
-});
+// event functions
+
+RomoIndicatorTextInput.prototype.romoEvFn._onIndicatorClick = function(e) {
+  e.preventDefault();
+
+  if (this.elem.disabled === false) {
+    this.elem.focus();
+    Romo.trigger(this.elem, 'romoIndicatorTextInput:indicatorClick');
+  }
+}
+
+// init
+
+Romo.addElemsInitSelector('[data-romo-indicator-text-input-auto="true"]', RomoIndicatorTextInput);

data/assets/js/romo/inline.js

@@ -1,89 +1,96 @@
-$.fn.romoInline = function() {
-  return $.map(this, function(element) {
-    return new RomoInline(element);
-  });
+var RomoInline = RomoComponent(function(elem) {
+  this.elem = elem;
+
+  this.doInit();
+  this._bindElem();
+
+  Romo.trigger(this.elem, 'romoInline:ready', [this]);
+});
+
+RomoInline.prototype.doShow = function() {
+  Romo.show(this.elem);
+  if (this.toggleElem !== undefined) {
+    Romo.hide(this.toggleElem);
+  }
+  Romo.trigger(this.elem, 'romoInline:show', [this]);
+}
+
+RomoInline.prototype.doDismiss = function() {
+  if (this.toggleElem !== undefined) {
+    Romo.show(this.toggleElem);
+  }
+  Romo.hide(this.elem);
+  Romo.trigger(this.elem, 'romoInline:dismiss', [this]);
 }
 
-var RomoInline = function(element) {
-  this.elem        = $(element);
-  this.toggleElem  = $(this.elem.data('romo-inline-toggle'));
-  this.dismissElem = undefined;
+// private
+
+RomoInline.prototype._bindElem = function() {
+  this._bindDismiss();
 
-  this.elem.on('inline:triggerDismiss', $.proxy(this.onDismissClick, this));
-  this.elem.on('inline:triggerShow',  $.proxy(function(e) {
+  this.toggleElem = Romo.f(Romo.data(this.elem, 'romo-inline-toggle'))[0];
+
+  Romo.on(this.elem, 'romoInline:triggerDismiss', Romo.proxy(this._onDismissClick, this));
+  Romo.on(this.elem, 'romoInline:triggerShow',    Romo.proxy(function(e) {
     this.doShow();
   }, this));
 
-  this.elem.on('romoAjax:callStart', $.proxy(function(e, romoAjax) {
-    this.doLoadStart();
+  Romo.on(this.elem, 'romoAjax:callStart', Romo.proxy(function(e, romoAjax) {
+    this._loadStart();
     return false;
   }, this));
-  this.elem.on('romoAjax:callSuccess', $.proxy(function(e, data, romoAjax) {
-    this.doLoadSuccess(data);
+  Romo.on(this.elem, 'romoAjax:callSuccess', Romo.proxy(function(e, data, romoAjax) {
+    this._loadSuccess(data);
     return false;
   }, this));
-  this.elem.on('romoAjax:callError', $.proxy(function(e, xhr, romoAjax) {
-    this.doLoadError(xhr);
+  Romo.on(this.elem, 'romoAjax:callError', Romo.proxy(function(e, xhr, romoAjax) {
+    this._loadError(xhr);
     return false;
   }, this));
-
-  this.doBindDismiss();
-  this.doInit();
-  this.elem.trigger('inline:ready', [this]);
 }
 
-RomoInline.prototype.doInit = function() {
-  // override as needed
+RomoInline.prototype._bindDismiss = function() {
+  this.dismissElems = Romo.find(this.elem, '[data-romo-inline-dismiss]');
+  Romo.on(this.dismissElems, 'click', Romo.proxy(this._onDismissClick, this));
 }
 
-RomoInline.prototype.doLoadStart = function() {
-  this.elem.html('');
-  this.elem.trigger('inline:loadStart', [this]);
+RomoInline.prototype._loadStart = function() {
+  Romo.updateHtml(this.elem, '');
+  Romo.trigger(this.elem, 'romoInline:loadStart', [this]);
 }
 
-RomoInline.prototype.doLoadSuccess = function(data) {
+RomoInline.prototype._loadSuccess = function(data) {
   this.doShow();
-  Romo.initHtml(this.elem, data);
-  this.doBindDismiss();
-  this.elem.trigger('inline:loadSuccess', [data, this]);
+  Romo.initUpdateHtml(this.elem, data);
+  this._bindDismiss();
+  Romo.trigger(this.elem, 'romoInline:loadSuccess', [data, this]);
 }
 
-RomoInline.prototype.doLoadError = function(xhr) {
+RomoInline.prototype._loadError = function(xhr) {
   this.doShow();
-  this.elem.trigger('inline:loadError', [xhr, this]);
+  Romo.trigger(this.elem, 'romoInline:loadError', [xhr, this]);
 }
 
-RomoInline.prototype.doBindDismiss = function() {
-  this.dismissElem = this.elem.find('[data-romo-inline-dismiss]');
-  this.dismissElem.unbind('click');
-  this.dismissElem.on('click', $.proxy(this.onDismissClick, this));
-}
+// event functions
 
-RomoInline.prototype.onDismissClick = function(e) {
-  if (e !== undefined) {
-    e.preventDefault();
-  }
+RomoInline.prototype.romoEvFn._onDismissClick = function(e) {
+  e.preventDefault();
 
-  if (this.dismissElem.data('romo-inline-dismiss') === 'confirm') {
-    this.elem.trigger('inline:confirmDismiss', [this]);
-  } else if (this.dismissElem.hasClass('disabled') === false) {
-    this.doDismiss();
+  var disabled = this.dismissElems.reduce(function(disabled, dismissElem) {
+    return disabled || Romo.hasClass(dismissElem, 'disabled');
+  }, false);
+  if (!disabled) {
+    var confirm = this.dismissElems.reduce(function(confirm, dismissElem) {
+      return confirm || Romo.data(dismissElem, 'romo-inline-dismiss') === 'confirm';
+    }, false);
+    if (confirm) {
+      Romo.trigger(this.elem, 'romoInline:confirmDismiss', [this]);
+    } else {
+      this.doDismiss();
+    }
   }
 }
 
-RomoInline.prototype.doDismiss = function() {
-  this.toggleElem.show();
-  this.elem.hide();
-  this.elem.trigger('inline:dismiss', [this]);
-}
-
-RomoInline.prototype.doShow = function() {
-  this.elem.show();
-  this.toggleElem.hide();
-  this.elem.trigger('inline:show', [this]);
-}
-
-Romo.onInitUI(function(e) {
-  Romo.initUIElems(e, '[data-romo-inline-auto="true"]').romoInline();
-});
+// init
 
+Romo.addElemsInitSelector('[data-romo-inline-auto="true"]', RomoInline);

data/assets/js/romo/inline_form.js

@@ -1,99 +1,100 @@
-$.fn.romoInlineForm = function() {
-  return $.map(this, function(element) {
-    return new RomoInlineForm(element);
-  });
-}
+var RomoInlineForm = RomoComponent(function(elem) {
+  this.elem = elem;
 
-var RomoInlineForm = function(element) {
-  this.elem = $(element);
+  this.doInit();
+  this._bindElem();
 
-  this.inline = this.elem.romoInline()[0];
-  this.doBindInline();
+  Romo.trigger(this.elem, 'romoInlineForm:ready', [this]);
+});
 
-  this.form = undefined;
-  this.elem.on('inlineForm:form:triggerSubmit', $.proxy(function(e) {
-    if (this.form != undefined) {
-      this.form.elem.trigger('form:triggerSubmit', []);
+// private
+
+RomoInlineForm.prototype._bindElem = function() {
+  Romo.on(this.elem, 'romoInlineForm:romoForm:triggerSubmit', Romo.proxy(function(e) {
+    if (this.romoForm !== undefined) {
+      Romo.trigger(this.romoForm.elem, 'romoForm:triggerSubmit', []);
     }
   }, this));
-  this.elem.on('inlineForm:inline:triggerInvoke', $.proxy(function(e) {
-    this.inline.elem.trigger('inline:triggerInvoke', []);
+  Romo.on(this.elem, 'romoInlineForm:romoInline:triggerInvoke', Romo.proxy(function(e) {
+    Romo.trigger(this.romoInline.elem, 'romoInline:triggerInvoke', []);
   }, this));
-  this.elem.on('inlineForm:inline:triggerDismiss', $.proxy(function(e) {
-    this.inline.elem.trigger('inline:triggerDismiss', []);
+  Romo.on(this.elem, 'romoInlineForm:romoInline:triggerDismiss', Romo.proxy(function(e) {
+    Romo.trigger(this.romoInline.elem, 'romoInline:triggerDismiss', []);
   }, this));
-  this.doBindForm();
-  this.elem.on('inline:loadSuccess', $.proxy(function(e, data, inline) {
-    this.doBindForm();
-    this.elem.trigger('inlineForm:formReady', [this.form, this]);
+  Romo.on(this.elem, 'romoInline:loadSuccess', Romo.proxy(function(e, data, romoInline) {
+    this._bindForm();
+    Romo.trigger(this.elem, 'romoInlineForm:formReady', [this.romoForm, this]);
   }, this));
 
-  this.doInit();
-  this.elem.trigger('inlineForm:ready', [this]);
+  this._bindInline();
+  this._bindForm();
 }
 
-RomoInlineForm.prototype.doInit = function() {
-  // override as needed
-}
+RomoInlineForm.prototype._bindInline = function() {
+  this.romoInline = new RomoInline(this.elem);
 
-RomoInlineForm.prototype.doBindInline = function() {
-  this.elem.on('inline:ready', $.proxy(function(e, inline) {
-    this.elem.trigger('inlineForm:inline:ready', [inline, this]);
+  Romo.on(this.elem, 'romoInline:ready', Romo.proxy(function(e, romoInline) {
+    Romo.trigger(this.elem, 'romoInlineForm:romoInline:ready', [romoInline, this]);
   }, this));
-  this.elem.on('inline:loadStart', $.proxy(function(e, inline) {
-    this.elem.trigger('inlineForm:inline:loadStart', [inline, this]);
+  Romo.on(this.elem, 'romoInline:loadStart', Romo.proxy(function(e, romoInline) {
+    Romo.trigger(this.elem, 'romoInlineForm:romoInline:loadStart', [romoInline, this]);
   }, this));
-  this.elem.on('inline:loadSuccess', $.proxy(function(e, data, inline) {
-    this.elem.trigger('inlineForm:inline:loadSuccess', [data, inline, this]);
+  Romo.on(this.elem, 'romoInline:loadSuccess', Romo.proxy(function(e, data, romoInline) {
+    Romo.trigger(this.elem, 'romoInlineForm:romoInline:loadSuccess', [data, romoInline, this]);
   }, this));
-  this.elem.on('inline:loadError', $.proxy(function(e, xhr, inline) {
-    this.elem.trigger('inlineForm:inline:loadError', [xhr, inline, this]);
+  Romo.on(this.elem, 'romoInline:loadError', Romo.proxy(function(e, xhr, romoInline) {
+    Romo.trigger(this.elem, 'romoInlineForm:romoInline:loadError', [xhr, romoInline, this]);
   }, this));
-  this.elem.on('inline:show', $.proxy(function(e, inline) {
-    this.elem.trigger('inlineForm:inline:show', [inline, this]);
+  Romo.on(this.elem, 'romoInline:show', Romo.proxy(function(e, romoInline) {
+    Romo.trigger(this.elem, 'romoInlineForm:romoInline:show', [romoInline, this]);
   }, this));
-  this.elem.on('inline:dismiss', $.proxy(function(e, inline) {
-    this.elem.trigger('inlineForm:inline:dismiss', [inline, this]);
+  Romo.on(this.elem, 'romoInline:dismiss', Romo.proxy(function(e, romoInline) {
+    Romo.trigger(this.elem, 'romoInlineForm:romoInline:dismiss', [romoInline, this]);
   }, this));
-  this.elem.on('inline:confirmDismiss', $.proxy(function(e, inline) {
-    this.elem.trigger('inlineForm:inline:confirmDismiss', [inline, this]);
+  Romo.on(this.elem, 'romoInline:confirmDismiss', Romo.proxy(function(e, romoInline) {
+    Romo.trigger(this.elem, 'romoInlineForm:romoInline:confirmDismiss', [romoInline, this]);
   }, this));
 }
 
-RomoInlineForm.prototype.doBindForm = function() {
-  var formElem = this.elem.find('[data-romo-form-auto="inlineForm"]');
+RomoInlineForm.prototype._bindForm = function() {
+  this.romoForm = undefined;
+  var formElem = Romo.find(this.elem, '[data-romo-form-auto="inlineForm"]')[0];
 
-  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:confirmSubmit', $.proxy(function(e, form) {
-    this.elem.trigger('inlineForm:form:confirmSubmit', [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));
+  if (formElem !== undefined) {
+    Romo.on(formElem, 'romoForm:clearMsgs', Romo.proxy(function(e, romoForm) {
+      Romo.trigger(this.elem, 'romoInlineForm:romoForm:clearMsgs', [romoForm, this]);
+    }, this));
+    Romo.on(formElem, 'romoForm:ready', Romo.proxy(function(e, romoForm) {
+      Romo.trigger(this.elem, 'romoInlineForm:romoForm:ready', [romoForm, this]);
+    }, this));
+    Romo.on(formElem, 'romoForm:confirmSubmit', Romo.proxy(function(e, form) {
+      Romo.trigger(this.elem, 'romoInlineForm:romoForm:confirmSubmit', [romoForm, this]);
+    }, this));
+    Romo.on(formElem, 'romoForm:beforeSubmit', Romo.proxy(function(e, romoForm) {
+      Romo.trigger(this.elem, 'romoInlineForm:romoForm:beforeSubmit', [romoForm, this]);
+    }, this));
+    Romo.on(formElem, 'romoForm:submitSuccess', Romo.proxy(function(e, data, romoForm) {
+      Romo.trigger(this.elem, 'romoInlineForm:romoForm:submitSuccess', [data, romoForm, this]);
+    }, this));
+    Romo.on(formElem, 'romoForm:submitInvalidMsgs', Romo.proxy(function(e, msgs, xhr, romoForm) {
+      Romo.trigger(this.elem, 'romoInlineForm:romoForm:submitInvalidMsgs', [msgs, xhr, romoForm, this]);
+    }, this));
+    Romo.on(formElem, 'romoForm:submitXhrError', Romo.proxy(function(e, xhr, romoForm) {
+      Romo.trigger(this.elem, 'romoInlineForm:romoForm:submitXhrError', [xhr, romoForm, this]);
+    }, this));
+    Romo.on(formElem, 'romoForm:submitError', Romo.proxy(function(e, xhr, romoForm) {
+      Romo.trigger(this.elem, 'romoInlineForm:romoForm:submitError', [xhr, romoForm, this]);
+    }, this));
+
+    var submitElems  = Romo.find(this.elem, '[data-romo-form-submit]');
+    var spinnerElems = Romo.find(this.elem, '[data-romo-spinner-auto="true"]');
 
-  var submitElement = this.elem.find('[data-romo-form-submit]')[0];
-  var indicatorElements = this.elem.find('[data-romo-indicator-auto="true"]');
-  this.form = formElem.romoForm(submitElement, indicatorElements)[0];
+    this.romoForm = new RomoForm(formElem, submitElems, spinnerElems);
+  }
 }
 
-Romo.onInitUI(function(e) {
-  Romo.initUIElems(e, '[data-romo-inlineForm-auto="true"]').romoInlineForm();
-});
+// event functions
+
+// init
 
+Romo.addElemsInitSelector('[data-romo-inlineForm-auto="true"]', RomoInlineForm);