romo 0.19.10 → 0.20.0

data/assets/js/romo/modal_form.js

@@ -1,112 +1,113 @@
-$.fn.romoModalForm = function() {
-  return $.map(this, function(element) {
-    return new RomoModalForm(element);
-  });
-}
+var RomoModalForm = RomoComponent(function(elem) {
+  this.elem = elem;
 
-var RomoModalForm = function(element) {
-  this.elem = $(element);
+  this.doInit();
+  this._bindElem();
 
-  this.modal = this.elem.romoModal()[0];
-  this.doBindModal();
+  Romo.trigger(this.elem, 'romoModalForm:ready', [this]);
+});
 
-  this.form = undefined;
-  this.elem.on('modalForm:form:triggerSubmit', $.proxy(function(e) {
-    if (this.form != undefined) {
-      this.form.elem.trigger('form:triggerSubmit', []);
+// private
+
+RomoModalForm.prototype._bindElem = function() {
+  Romo.on(this.elem, 'romoModalForm:romoForm:triggerSubmit', Romo.proxy(function(e) {
+    if (this.romoForm !== undefined) {
+      Romo.trigger(this.romoForm.elem, 'romoForm:triggerSubmit', []);
     }
   }, this));
-  this.doBindForm();
-  this.elem.on('modal:loadBodySuccess', $.proxy(function(e, data, modal) {
-    this.doBindForm();
-    this.elem.trigger('modalForm:formReady', [this.form, this]);
+  Romo.on(this.elem, 'romoModal:loadBodySuccess', Romo.proxy(function(e, data, romoModal) {
+    this._bindForm();
+    Romo.trigger(this.elem, 'romoModalForm:formReady', [this.romoForm, this]);
   }, this));
 
-  this.doInit();
-  this.elem.trigger('modalForm:ready', [this]);
+  this._bindModal();
+  this._bindForm();
 }
 
-RomoModalForm.prototype.doInit = function() {
-  // override as needed
-}
+RomoModalForm.prototype._bindModal = function() {
+  this.romoModal = new RomoModal(this.elem);
 
-RomoModalForm.prototype.doBindModal = function() {
-  if (this.elem.data('romo-modal-clear-content') === undefined) {
-    this.elem.attr('data-romo-modal-clear-content', 'true');
+  if (Romo.data(this.elem, 'romo-modal-clear-content') === undefined) {
+    Romo.setData(this.elem, 'romo-modal-clear-content', 'true');
   }
 
-  this.elem.on('modal:ready', $.proxy(function(e, modal) {
-    this.elem.trigger('modalForm:modal:ready', [modal, this]);
+  Romo.on(this.elem, 'romoModal:ready', Romo.proxy(function(e, romoModal) {
+    Romo.trigger(this.elem, 'romoModalForm:romoModal:ready', [romoModal, this]);
   }, this));
-  this.elem.on('modal:toggle', $.proxy(function(e, modal) {
-    this.elem.trigger('modalForm:modal:toggle', [modal, this]);
+  Romo.on(this.elem, 'romoModal:toggle', Romo.proxy(function(e, romoModal) {
+    Romo.trigger(this.elem, 'romoModalForm:romoModal:toggle', [romoModal, this]);
   }, this));
-  this.elem.on('modal:popupOpen', $.proxy(function(e, modal) {
-    this.elem.trigger('modalForm:modal:popupOpen', [modal, this]);
+  Romo.on(this.elem, 'romoModal:popupOpen', Romo.proxy(function(e, romoModal) {
+    Romo.trigger(this.elem, 'romoModalForm:romoModal:popupOpen', [romoModal, this]);
   }, this));
-  this.elem.on('modal:popupClose', $.proxy(function(e, modal) {
-    this.elem.trigger('modalForm:modal:popupClose', [modal, this]);
+  Romo.on(this.elem, 'romoModal:popupClose', Romo.proxy(function(e, romoModal) {
+    Romo.trigger(this.elem, 'romoModalForm:romoModal:popupClose', [romoModal, this]);
   }, this));
-  this.elem.on('modal:dragStart', $.proxy(function(e, modal) {
-    this.elem.trigger('modalForm:modal:dragStart', [modal, this]);
+  Romo.on(this.elem, 'romoModal:dragStart', Romo.proxy(function(e, romoModal) {
+    Romo.trigger(this.elem, 'romoModalForm:romoModal:dragStart', [romoModal, this]);
   }, this));
-  this.elem.on('modal:dragMove', $.proxy(function(e, placeX, placeY, modal) {
-    this.elem.trigger('modalForm:modal:dragMove', [placeX, placeY, modal, this]);
+  Romo.on(this.elem, 'romoModal:dragMove', Romo.proxy(function(e, placeX, placeY, romoModal) {
+    Romo.trigger(this.elem, 'romoModalForm:romoModal:dragMove', [placeX, placeY, romoModal, this]);
   }, this));
-  this.elem.on('modal:dragStop', $.proxy(function(e, modal) {
-    this.elem.trigger('modalForm:modal:dragStop', [modal, this]);
+  Romo.on(this.elem, 'romoModal:dragStop', Romo.proxy(function(e, romoModal) {
+    Romo.trigger(this.elem, 'romoModalForm:romoModal:dragStop', [romoModal, this]);
   }, this));
-  this.elem.on('modal:loadBodyStart', $.proxy(function(e, modal) {
-    this.elem.trigger('modalForm:modal:loadBodyStart', [modal, this]);
+  Romo.on(this.elem, 'romoModal:loadBodyStart', Romo.proxy(function(e, romoModal) {
+    Romo.trigger(this.elem, 'romoModalForm:romoModal:loadBodyStart', [romoModal, this]);
   }, this));
-  this.elem.on('modal:loadBodySuccess', $.proxy(function(e, data, modal) {
-    this.elem.trigger('modalForm:modal:loadBodySuccess', [data, modal, this]);
+  Romo.on(this.elem, 'romoModal:loadBodySuccess', Romo.proxy(function(e, data, romoModal) {
+    Romo.trigger(this.elem, 'romoModalForm:romoModal:loadBodySuccess', [data, romoModal, this]);
   }, this));
-  this.elem.on('modal:loadBodyError', $.proxy(function(e, xhr, modal) {
-    this.elem.trigger('modalForm:modal:loadBodyError', [xhr, modal, this]);
+  Romo.on(this.elem, 'romoModal:loadBodyError', Romo.proxy(function(e, xhr, romoModal) {
+    Romo.trigger(this.elem, 'romoModalForm:romoModal:loadBodyError', [xhr, romoModal, this]);
   }, this));
-  this.elem.on('modal:dismiss', $.proxy(function(e, modal) {
-    this.elem.trigger('modalForm:modal:dismiss', [modal, this]);
+  Romo.on(this.elem, 'romoModal:dismiss', Romo.proxy(function(e, romoModal) {
+    Romo.trigger(this.elem, 'romoModalForm:romoModal:dismiss', [romoModal, this]);
   }, this));
 }
 
-RomoModalForm.prototype.doBindForm = function() {
-  var formElem = this.modal.popupElem.find('[data-romo-form-auto="modalForm"]');
+RomoModalForm.prototype._bindForm = function() {
+  this.romoForm = undefined;
+  var formElem = Romo.find(this.romoModal.popupElem, '[data-romo-form-auto="modalForm"]')[0];
 
-  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:confirmSubmit', $.proxy(function(e, form) {
-    this.elem.trigger('modalForm:form:confirmSubmit', [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));
-  formElem.on('form:browserSubmit', $.proxy(function(e, form) {
-    this.elem.trigger('modalForm:form:browserSubmit', [form, this]);
-  }, this));
+  if (formElem !== undefined) {
+    Romo.on(formElem, 'romoForm:clearMsgs', Romo.proxy(function(e, romoForm) {
+      Romo.trigger(this.elem, 'romoModalForm:romoForm:clearMsgs', [romoForm, this]);
+    }, this));
+    Romo.on(formElem, 'romoForm:ready', Romo.proxy(function(e, romoForm) {
+      Romo.trigger(this.elem, 'romoModalForm:romoForm:ready', [romoForm, this]);
+    }, this));
+    Romo.on(formElem, 'romoForm:confirmSubmit', Romo.proxy(function(e, romoForm) {
+      Romo.trigger(this.elem, 'romoModalForm:romoForm:confirmSubmit', [romoForm, this]);
+    }, this));
+    Romo.on(formElem, 'romoForm:beforeSubmit', Romo.proxy(function(e, romoForm) {
+      Romo.trigger(this.elem, 'romoModalForm:romoForm:beforeSubmit', [romoForm, this]);
+    }, this));
+    Romo.on(formElem, 'romoForm:submitSuccess', Romo.proxy(function(e, data, romoForm) {
+      Romo.trigger(this.elem, 'romoModalForm:romoForm:submitSuccess', [data, romoForm, this]);
+    }, this));
+    Romo.on(formElem, 'romoForm:submitInvalidMsgs', Romo.proxy(function(e, msgs, xhr, romoForm) {
+      Romo.trigger(this.elem, 'romoModalForm:romoForm:submitInvalidMsgs', [msgs, xhr, romoForm, this]);
+    }, this));
+    Romo.on(formElem, 'romoForm:submitXhrError', Romo.proxy(function(e, xhr, romoForm) {
+      Romo.trigger(this.elem, 'romoModalForm:romoForm:submitXhrError', [xhr, romoForm, this]);
+    }, this));
+    Romo.on(formElem, 'romoForm:submitError', Romo.proxy(function(e, xhr, romoForm) {
+      Romo.trigger(this.elem, 'romoModalForm:romoForm:submitError', [xhr, romoForm, this]);
+    }, this));
+    Romo.on(formElem, 'romoForm:browserSubmit', Romo.proxy(function(e, romoForm) {
+      Romo.trigger(this.elem, 'romoModalForm:romoForm:browserSubmit', [romoForm, this]);
+    }, this));
 
-  var submitElement = this.modal.popupElem.find('[data-romo-form-submit]')[0];
-  var indicatorElements = this.modal.popupElem.find('[data-romo-indicator-auto="true"]');
-  this.form = formElem.romoForm(submitElement, indicatorElements)[0];
+    var submitElems  = Romo.find(this.romoModal.popupElem, '[data-romo-form-submit]');
+    var spinnerElems = Romo.find(this.romoModal.popupElem, '[data-romo-spinner-auto="true"]');
+
+    this.romoForm = new RomoForm(formElem, submitElems, spinnerElems);
+  }
 }
 
-Romo.onInitUI(function(e) {
-  Romo.initUIElems(e, '[data-romo-modalForm-auto="true"]').romoModalForm();
-});
+// event functions
+
+// init
 
+Romo.addElemsInitSelector('[data-romo-modalForm-auto="true"]', RomoModalForm);

data/assets/js/romo/onkey.js

@@ -1,35 +1,38 @@
-$.fn.romoOnkey = function() {
-  return $.map(this, function(element) {
-    return new RomoOnkey(element);
-  });
-}
+var RomoOnkey = RomoComponent(function(elem) {
+  this.elem = elem;
 
-var RomoOnkey = function(element) {
-  this.elem = $(element);
   this.defaultTriggerOn = 'keydown';
+  this.defaultDelayMs   = 0;
+  this.delayTimeout     = undefined;
 
   this.doInit();
 
-  this.triggerOn = this.elem.data('romo-onkey-on') || this.defaultTriggerOn;
-  this.elem.on(this.triggerOn, $.proxy(this.onTrigger, this));
+  this.triggerOn = Romo.data(this.elem, 'romo-onkey-on') || this.defaultTriggerOn;
+  Romo.on(this.elem, this.triggerOn, Romo.proxy(this._onTrigger, this));
 
-  this.elem.trigger('onkey:ready', [this]);
-}
+  Romo.trigger(this.elem, 'romoOnkey:ready', [this]);
+});
+
+// private
 
-RomoOnkey.prototype.doInit = function() {
-  // override as needed
+RomoOnkey.prototype._doTrigger = function(triggerEvent) {
+  clearTimeout(this.delayTimeout);
+  this.delayTimeout = setTimeout(
+    Romo.proxy(function() {
+      Romo.trigger(this.elem, 'romoOnkey:trigger', [triggerEvent, this]);
+    }, this),
+    Romo.data(this.elem, 'romo-onkey-delay-ms') || this.defaultDelayMs
+  );
 }
 
-RomoOnkey.prototype.onTrigger = function(e) {
-  if (this.elem.hasClass('disabled') === false) {
-    this.doTrigger(e);
+// event functions
+
+RomoOnkey.prototype.romoEvFn._onTrigger = function(e) {
+  if (Romo.hasClass(this.elem, 'disabled') === false) {
+    this._doTrigger(e);
   }
 }
 
-RomoOnkey.prototype.doTrigger = function(triggerEvent) {
-  this.elem.trigger('onkey:trigger', [triggerEvent, this]);
-}
+// init
 
-Romo.onInitUI(function(e) {
-  Romo.initUIElems(e, '[data-romo-onkey-auto="true"]').romoOnkey();
-});
+Romo.addElemsInitSelector('[data-romo-onkey-auto="true"]', RomoOnkey);