assets/js/romo/inline.js in romo-0.19.10 vs assets/js/romo/inline.js in romo-0.20.0

@@ -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]);
 }
 
-var RomoInline = function(element) {
-  this.elem        = $(element);
-  this.toggleElem  = $(this.elem.data('romo-inline-toggle'));
-  this.dismissElem = undefined;
+RomoInline.prototype.doDismiss = function() {
+  if (this.toggleElem !== undefined) {
+    Romo.show(this.toggleElem);
+  }
+  Romo.hide(this.elem);
+  Romo.trigger(this.elem, 'romoInline:dismiss', [this]);
+}
 
-  this.elem.on('inline:triggerDismiss', $.proxy(this.onDismissClick, this));
-  this.elem.on('inline:triggerShow',  $.proxy(function(e) {
+// private
+
+RomoInline.prototype._bindElem = function() {
+  this._bindDismiss();
+
+  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]);
-}
+// init
 
-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();
-});
-
+Romo.addElemsInitSelector('[data-romo-inline-auto="true"]', RomoInline);