Merge pull request #246 from redding/kr-push

add `Romo.pushFn` method to formalize set timeout reactor push

assets/js/romo/base.js

@@ -548,6 +548,11 @@ Romo.prototype.trigger = function(elems, customEventName, args) {
   });
 }
 
+Romo.prototype.pushFn = function(fn) {
+  // push the function to delay running until the end of the reactor stack
+  setTimeout(fn, 1);
+}
+
 Romo.prototype.ready = function(eventHandlerFn) {
   if (document.readyState === 'complete' || document.readyState !== 'loading') {
     eventHandlerFn();
@@ -948,22 +953,20 @@ RomoPopupStack.prototype.addStyleClass = function(styleClass) {
 RomoPopupStack.prototype.addElem = function(popupElem, boundOpenFn, boundCloseFn, boundPlaceFn) {
   this.items.push(new this.itemClass(popupElem, boundCloseFn, boundPlaceFn));
 
-  // run the open function in a timeout to allow any body click events
-  // to propagate and run.  This ensures any existing stack is in the
-  // appropriate state before opening a new popup.
-  setTimeout(boundOpenFn, 1);
+  // allow any body click events to propagate and run first.  This ensures
+  // any existing stack is in the appropriate state before opening a new popup.
+  Romo.pushFn(boundOpenFn);
 }
 
 RomoPopupStack.prototype.closeThru = function(popupElem) {
-  // run the closures in a timeout to allow any body click events to
-  // propagate and run.  This ensures any existing is in the appropriate
-  // state post-click before processing this closure.
-  setTimeout(Romo.proxy(function() {
+  // allow any body click events to propagate and run first.  This ensures
+  // any existing stack is in the appropriate state before opening a new popup.
+  Romo.pushFn(Romo.proxy(function() {
     if (this._includes(popupElem)) {
       this.closeTo(popupElem);
       this._closeTop();
     }
-  }, this), 1);
+  }, this));
 }
 
 RomoPopupStack.prototype.closeTo = function(popupElem) {

assets/js/romo/dropdown.js

@@ -17,9 +17,9 @@ RomoDropdown.prototype.popupClosed = function() {
 
 RomoDropdown.prototype.doToggle = function() {
   if (this.popupOpen()) {
-    setTimeout(Romo.proxy(this.doPopupClose, this), 100);
+    Romo.pushFn(Romo.proxy(this.doPopupClose, this));
   } else {
-    setTimeout(Romo.proxy(this.doPopupOpen, this), 100);
+    Romo.pushFn(Romo.proxy(this.doPopupOpen, this));
   }
   Romo.trigger(this.elem, 'romoDropdown:toggle', [this]);
 }
@@ -180,9 +180,9 @@ RomoDropdown.prototype._bindPopup = function() {
   // delay adding it b/c other components may `append` generated dropdowns
   // meaning the dropdown is removed and then re-added.  if added immediately
   // the "remove" part will incorrectly remove the popup.
-  setTimeout(Romo.proxy(function() {
+  Romo.pushFn(Romo.proxy(function() {
     Romo.parentChildElems.add(this.elem, [this.popupElem]);
-  }, this), 1);
+  }, this));
   Romo.on(this.popupElem, 'romoParentChildElems:childRemoved', Romo.proxy(function(e, childElem) {
     Romo.popupStack.closeThru(this.popupElem);
   }, this));
@@ -259,15 +259,15 @@ RomoDropdown.prototype._loadBodyStart = function() {
   Romo.updateHtml(this.bodyElem, '');
   this._bindBody();
   this.doPlacePopupElem();
-  setTimeout(Romo.proxy(this.doPlacePopupElem, this), 1);
+  Romo.pushFn(Romo.proxy(this.doPlacePopupElem, this));
   Romo.trigger(this.elem, 'romoDropdown:loadBodyStart', [this]);
 }
 
 RomoDropdown.prototype._loadBodySuccess = function(data) {
   Romo.initUpdateHtml(this.bodyElem, data);
   this._bindBody();
   this.doPlacePopupElem();
-  setTimeout(Romo.proxy(this.doPlacePopupElem, this), 1);
+  Romo.pushFn(Romo.proxy(this.doPlacePopupElem, this));
   Romo.trigger(this.elem, 'romoDropdown:loadBodySuccess', [data, this]);
 }
 
@@ -321,13 +321,13 @@ RomoDropdown.prototype.romoEvFn._onToggle = function(e) {
 
 RomoDropdown.prototype.romoEvFn._onPopupOpen = function(e) {
   if (Romo.hasClass(this.elem, 'disabled') === false && this.popupClosed()) {
-    setTimeout(Romo.proxy(this.doPopupOpen, this), 1);
+    Romo.pushFn(Romo.proxy(this.doPopupOpen, this));
   }
 }
 
 RomoDropdown.prototype.romoEvFn._onPopupClose = function(e) {
   if (Romo.hasClass(this.elem, 'disabled') === false && this.popupOpen()) {
-    setTimeout(Romo.proxy(this.doPopupClose, this), 1);
+    Romo.pushFn(Romo.proxy(this.doPopupClose, this));
   }
 }
 

assets/js/romo/indicator_text_input.js

@@ -47,9 +47,9 @@ RomoIndicatorTextInput.prototype._bindElem = function() {
   // 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.
-  setTimeout(Romo.proxy(function() {
+  Romo.pushFn(Romo.proxy(function() {
     Romo.parentChildElems.add(this.elem, [elemWrapper]);
-  }, this), 1);
+  }, this));
 
   this.indicatorElem = undefined;
   var indicatorClass = Romo.data(this.elem, 'romo-indicator-text-input-indicator') || this.defaultIndicatorClass;

assets/js/romo/modal.js

@@ -17,9 +17,9 @@ RomoModal.prototype.popupClosed = function() {
 
 RomoModal.prototype.doToggle = function() {
   if (this.popupOpen()) {
-    setTimeout(Romo.proxy(this.doPopupClose, this), 1);
+    Romo.pushFn(Romo.proxy(this.doPopupClose, this));
   } else {
-    setTimeout(Romo.proxy(this.doPopupOpen, this), 1);
+    Romo.pushFn(Romo.proxy(this.doPopupOpen, this));
   }
   Romo.trigger(this.elem, 'romoModal:toggle', [this]);
 }
@@ -129,9 +129,9 @@ RomoModal.prototype._bindPopup = function() {
   // delay adding it b/c other components may `append` generated modals
   // meaning the modal is removed and then re-added.  if added immediately
   // the "remove" part will incorrectly remove the popup.
-  setTimeout(Romo.proxy(function() {
+  Romo.pushFn(Romo.proxy(function() {
     Romo.parentChildElems.add(this.elem, [this.popupElem]);
-  }, this), 1);
+  }, this));
   Romo.on(this.popupElem, 'romoParentChildElems:childRemoved', Romo.proxy(function(e, childElem) {
     Romo.popupStack.closeThru(this.popupElem);
   }, this));
@@ -215,15 +215,15 @@ RomoModal.prototype._loadBodyStart = function() {
   Romo.updateHtml(this.bodyElem, '');
   this._bindBody();
   this.doPlacePopupElem();
-  setTimeout(Romo.proxy(this.doPlacePopupElem, this), 1);
+  Romo.pushFn(Romo.proxy(this.doPlacePopupElem, this));
   Romo.trigger(this.elem, 'romoModal:loadBodyStart', [this]);
 }
 
 RomoModal.prototype._loadBodySuccess = function(data) {
   Romo.initUpdateHtml(this.bodyElem, data);
   this._bindBody();
   this.doPlacePopupElem();
-  setTimeout(Romo.proxy(this.doPlacePopupElem, this), 1);
+  Romo.pushFn(Romo.proxy(this.doPlacePopupElem, this));
   Romo.trigger(this.elem, 'romoModal:loadBodySuccess', [data, this]);
 }
 

assets/js/romo/picker.js

@@ -237,9 +237,9 @@ RomoPicker.prototype._buildOptionListDropdownElem = function() {
   // delay adding it b/c other components may `append` generated pickers
   // meaning the picker is removed and then re-added.  if added immediately
   // the "remove" part will incorrectly remove the wrapper.
-  setTimeout(Romo.proxy(function() {
+  Romo.pushFn(Romo.proxy(function() {
     Romo.parentChildElems.add(this.elem, [this.elemWrapper]);
-  }, this), 1);
+  }, this));
 
   this.caretElem = undefined;
   var caretClass = Romo.data(this.elem, 'romo-picker-caret') || this.defaultCaretClass;

assets/js/romo/select.js

@@ -209,9 +209,9 @@ RomoSelect.prototype._buildSelectDropdownElem = function() {
   // delay adding it b/c other components may `append` generated selects
   // meaning the select is removed and then re-added.  if added immediately
   // the "remove" part will incorrectly remove the wrapper.
-  setTimeout(Romo.proxy(function() {
+  Romo.pushFn(Romo.proxy(function() {
     Romo.parentChildElems.add(this.elem, [this.elemWrapper]);
-  }, this), 1);
+  }, this));
 
   this.caretElem = undefined;
   var caretClass = Romo.data(this.elem, 'romo-select-caret') || this.defaultCaretClass;

assets/js/romo/sortable.js

@@ -233,9 +233,9 @@ RomoSortable.prototype.romoEvFn._onDragDrop = function(e) {
   // dropdown, tooltip popups) like normal.
   // we have to put this in a timeout so the reactor loop has a
   // chance to run the mutation observer before we re-enable
-  setTimeout(Romo.proxy(function() {
+  Romo.pushFn(Romo.proxy(function() {
     Romo.setData(this.draggedElem, 'romo-parent-removed-observer-disabled', false);
-  }, this), 1);
+  }, this));
 
   var elems    = Romo.children(Romo.parent(this.draggedElem));
   var newIndex = elems.indexOf(this.draggedElem);

assets/js/romo/tooltip.js

@@ -117,7 +117,7 @@ RomoTooltip.prototype.doSetContent = function(value) {
   Romo.setData(this.elem, 'romo-tooltip-content', value);
   this._setBodyHtml(Romo.data(this.elem, 'romo-tooltip-content'));
   this.doPlacePopupElem();
-  setTimeout(Romo.proxy(this.doPlacePopupElem, this), 1);
+  Romo.pushFn(Romo.proxy(this.doPlacePopupElem, this));
 }
 
 RomoTooltip.prototype.doSetPopupZIndex = function(relativeElem) {
@@ -189,9 +189,9 @@ RomoTooltip.prototype._bindPopup = function() {
   // delay adding it b/c other components may `append` generated tooltips
   // meaning the tooltip is removed and then re-added.  if added immediately
   // the "remove" part will incorrectly remove the popup.
-  setTimeout(Romo.proxy(function() {
+  Romo.pushFn(Romo.proxy(function() {
     Romo.parentChildElems.add(this.elem, [this.popupElem]);
-  }, this), 1);
+  }, this));
 }
 
 RomoTooltip.prototype._bindAjax = function() {
@@ -242,15 +242,15 @@ RomoTooltip.prototype._loadBodyStart = function() {
   this._setBodyHtml('');
   this._bindBody();
   this.doPlacePopupElem();
-  setTimeout(Romo.proxy(this.doPlacePopupElem, this), 1);
+  Romo.pushFn(Romo.proxy(this.doPlacePopupElem, this));
   Romo.trigger(this.elem, 'romoTooltip:loadBodyStart', [this]);
 }
 
 RomoTooltip.prototype._loadBodySuccess = function(data) {
   Romo.initUpdateHtml(this.bodyElem, data);
   this._bindBody();
   this.doPlacePopupElem();
-  setTimeout(Romo.proxy(this.doPlacePopupElem, this), 1);
+  Romo.pushFn(Romo.proxy(this.doPlacePopupElem, this));
   Romo.trigger(this.elem, 'romoTooltip:loadBodySuccess', [data, this]);
 }