romo 0.13.0 → 0.14.0

data/assets/js/romo/base.js

@@ -4,6 +4,8 @@
   }
 
   Romo.prototype.doInit = function() {
+    this.parentChildElems = new RomoParentChildElems();
+
     $.each(this._eventCallbacks, function(idx, eventCallback) {
       $('body').on(eventCallback.eventName, eventCallback.callback);
     });
@@ -181,3 +183,62 @@ $(function() {
   Romo.doInit();
 
 })
+
+var RomoParentChildElems = function() {
+  this.attrName = 'romo-parent-elem-id';
+  this.elemId   = 0;
+  this.elems    = {};
+
+  var childRemovedObserver = new MutationObserver($.proxy(function(mutationRecords) {
+    mutationRecords.forEach($.proxy(function(mutationRecord) {
+      if (mutationRecord.type === 'childList' && mutationRecord.removedNodes.length > 0) {
+        $.each($(mutationRecord.removedNodes), $.proxy(function(idx, node) {
+          this.remove($(node));
+        }, this));
+      }
+    }, this));
+  }, this));
+
+  childRemovedObserver.observe($('body')[0], {
+    childList: true,
+    subtree:   true
+  });
+}
+
+RomoParentChildElems.prototype.add = function(parentElem, childElems) {
+  parentElem.attr('data-'+this.attrName, this._push(childElems, parentElem.data(this.attrName)));
+}
+
+RomoParentChildElems.prototype.remove = function(nodeElem) {
+  if(nodeElem.data(this.attrName) !== undefined) {
+    this._removeChildElems(nodeElem);  // node is a parent elem itself
+  }
+  $.each(nodeElem.find('[data-'+this.attrName+']'), $.proxy(function(idx, parent) {
+    this._removeChildElems($(parent));
+  }, this));
+}
+
+// private
+
+RomoParentChildElems.prototype._removeChildElems = function(parentElem) {
+  $.each(this._pop(parentElem.data(this.attrName)), function(idx, elem) {
+    $(elem).remove();
+  });
+};
+
+RomoParentChildElems.prototype._push = function(items, id) {
+  if (id === undefined) {
+    id = String(this.elemId++);
+  }
+  if (this.elems[id] === undefined) {
+    this.elems[id] = []
+  }
+  items.forEach($.proxy(function(item){ this.elems[id].push(item) }, this));
+  return id;
+};
+
+RomoParentChildElems.prototype._pop = function(id) {
+  var items = this.elems[id];
+  delete this.elems[id];
+  return items || [];
+}

data/assets/js/romo/datepicker.js

@@ -43,6 +43,15 @@ RomoDatepicker.prototype.doBindElem = function() {
   this.elem.before(elemWrapper);
   elemWrapper.append(this.elem);
 
+  // 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 100 arbitrarily.
+  setTimeout($.proxy(function() {
+    Romo.parentChildElems.add(this.elem, [elemWrapper]);
+  }, this), 100);
+
   this.elem.attr('autocomplete', 'off');
 
   this.indicatorElem = $();

data/assets/js/romo/dropdown.js

@@ -6,31 +6,9 @@ $.fn.romoDropdown = function() {
 
 var RomoDropdown = function(element) {
   this.elem = $(element);
-  this.popupElem = $('<div class="romo-dropdown-popup"><div class="romo-dropdown-body"></div></div>');
-  this.popupElem.appendTo(this.elem.closest(this.elem.data('romo-dropdown-append-to-closest') || 'body'));
-  this.doSetPopupZIndex(this.elem);
-  this.bodyElem = this.popupElem.find('> .romo-dropdown-body');
-  this.contentElem = $();
+  this.doInitPopup();
   this.romoInvoke = this.elem.romoInvoke()[0];
 
-  var positionData = this._parsePositionData(this.elem.data('romo-dropdown-position'));
-  this.popupPosition  = positionData.position  || 'bottom';
-  this.popupAlignment = positionData.alignment || 'left';
-  this.popupElem.attr('data-romo-dropdown-position',  this.popupPosition);
-  this.popupElem.attr('data-romo-dropdown-alignment', this.popupAlignment);
-  this.popupElem.attr('data-romo-dropdown-fixed', this.elem.data('romo-dropdown-fixed'));
-  // don't propagate click events on the popup elem.  this prevents the popup
-  // from closing when clicked (see body click event bind on popup open)
-  this.popupElem.on('click', function(e) {
-    if (e !== undefined) {
-      e.stopPropagation();
-    }
-  })
-
-  if (this.elem.data('romo-dropdown-style-class') !== undefined) {
-    this.bodyElem.addClass(this.elem.data('romo-dropdown-style-class'));
-  }
-
   this.elem.unbind('click');
   this.elem.on('click', $.proxy(this.onToggleClick, this));
   this.elem.on('dropdown:triggerToggle', $.proxy(this.onToggleClick, this));
@@ -58,8 +36,9 @@ RomoDropdown.prototype.doInit = function() {
   // override as needed
 }
 
-RomoDropdown.prototype.doInitBody = function() {
-  this.doResetBody();
+RomoDropdown.prototype.doInitPopup = function() {
+  this.popupElem = $('<div class="romo-dropdown-popup"><div class="romo-dropdown-body"></div></div>');
+  this.popupElem.appendTo(this.elem.closest(this.elem.data('romo-dropdown-append-to-closest') || 'body'));
 
   this.popupElem.on('modal:popupOpen', $.proxy(function(e) {
     this.doUnBindWindowBodyClick();
@@ -71,11 +50,47 @@ RomoDropdown.prototype.doInitBody = function() {
     this.doBindWindowBodyKeyUp();
     this.doBindElemKeyUp();
   }, this));
+
+  this.bodyElem = this.popupElem.find('> .romo-dropdown-body');
+  if (this.elem.data('romo-dropdown-style-class') !== undefined) {
+    this.bodyElem.addClass(this.elem.data('romo-dropdown-style-class'));
+  }
+
+  this.contentElem = $();
+
+  var positionData = this._parsePositionData(this.elem.data('romo-dropdown-position'));
+  this.popupPosition  = positionData.position  || 'bottom';
+  this.popupAlignment = positionData.alignment || 'left';
+  this.popupElem.attr('data-romo-dropdown-position',  this.popupPosition);
+  this.popupElem.attr('data-romo-dropdown-alignment', this.popupAlignment);
+  this.popupElem.attr('data-romo-dropdown-fixed', this.elem.data('romo-dropdown-fixed'));
+
+  this.doSetPopupZIndex(this.elem);
+
+  // don't propagate click events on the popup elem.  this prevents the popup
+  // from closing when clicked (see body click event bind on popup open)
+  this.popupElem.on('click', function(e) {
+    if (e !== undefined) {
+      e.stopPropagation();
+    }
+  })
+
+  // the popup should be treated like a child elem.  add it to Romo's
+  // parent-child elems so it will be removed when the elem is removed.
+  Romo.parentChildElems.add(this.elem, [this.popupElem]);
+}
+
+RomoDropdown.prototype.doInitBody = function() {
+  this.doResetBody();
+
   this.contentElem = this.bodyElem.find('.romo-dropdown-content').last();
   if (this.contentElem.size() === 0) {
     this.contentElem = this.bodyElem;
   }
+
   this.closeElem = this.popupElem.find('[data-romo-dropdown-close="true"]');
+  this.closeElem.unbind('click');
+  this.closeElem.on('click', $.proxy(this.onPopupClose, this));
 
   this.contentElem.css({
     'min-height': this.elem.data('romo-dropdown-min-height'),
@@ -104,9 +119,6 @@ RomoDropdown.prototype.doInitBody = function() {
       'width':      this.elem.data('romo-dropdown-width')
     });
   }
-
-  this.closeElem.unbind('click');
-  this.closeElem.on('click', $.proxy(this.onPopupClose, this));
 }
 
 RomoDropdown.prototype.doResetBody = function() {

data/assets/js/romo/modal.js

@@ -6,18 +6,9 @@ $.fn.romoModal = function() {
 
 var RomoModal = function(element) {
   this.elem = $(element);
-  this.popupElem = $('<div class="romo-modal-popup"><div class="romo-modal-body"></div></div>');
-  this.popupElem.appendTo(this.elem.closest(this.elem.data('romo-modal-append-to-closest') || 'body'));
-  this.bodyElem = this.popupElem.find('> .romo-modal-body');
-  this.contentElem = $();
-  this.closeElem = $();
-  this.dragElem = $();
+  this.doInitPopup();
   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));
@@ -45,6 +36,24 @@ RomoModal.prototype.doInit = function() {
   // override as needed
 }
 
+RomoModal.prototype.doInitPopup = function() {
+  this.popupElem = $('<div class="romo-modal-popup"><div class="romo-modal-body"></div></div>');
+  this.popupElem.appendTo(this.elem.closest(this.elem.data('romo-modal-append-to-closest') || 'body'));
+
+  this.bodyElem = this.popupElem.find('> .romo-modal-body');
+  if (this.elem.data('romo-modal-style-class') !== undefined) {
+    this.bodyElem.addClass(this.elem.data('romo-modal-style-class'));
+  }
+
+  this.contentElem = $();
+  this.closeElem   = $();
+  this.dragElem    = $();
+
+  // the popup should be treated like a child elem.  add it to Romo's
+  // parent-child elems so it will be removed when the elem is removed.
+  Romo.parentChildElems.add(this.elem, [this.popupElem]);
+}
+
 RomoModal.prototype.doInitBody = function() {
   this.doResetBody();
 
@@ -52,8 +61,14 @@ RomoModal.prototype.doInitBody = function() {
   if (this.contentElem.size() === 0) {
     this.contentElem = this.bodyElem;
   }
+
   this.closeElem = this.popupElem.find('[data-romo-modal-close="true"]');
+  this.closeElem.unbind('click');
+  this.closeElem.on('click', $.proxy(this.onPopupClose, this));
+
   this.dragElem = this.popupElem.find('[data-romo-modal-drag="true"]');
+  this.dragElem.addClass('romo-modal-grab');
+  this.dragElem.on('mousedown', $.proxy(this.onMouseDown, this));
 
   var css = {
     'min-width':  this.elem.data('romo-modal-min-width'),
@@ -73,12 +88,6 @@ RomoModal.prototype.doInitBody = function() {
   }
 
   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() {

data/assets/js/romo/select.js

@@ -130,6 +130,10 @@ RomoSelect.prototype._buildSelectDropdownElem = function() {
   romoSelectDropdownElem.before(this.elemWrapper);
   this.elemWrapper.append(romoSelectDropdownElem);
 
+  // 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 (select) is removed.
+  Romo.parentChildElems.add(this.elem, [this.elemWrapper]);
+
   var caretClass = this.elem.data('romo-select-caret') || this.defaultCaretClass;
   if (caretClass !== undefined && caretClass !== 'none') {
     var caret = $('<i class="romo-select-caret '+caretClass+'"></i>');

data/assets/js/romo/tooltip.js

@@ -6,11 +6,7 @@ $.fn.romoTooltip = function() {
 
 var RomoTooltip = function(element) {
   this.elem = $(element);
-  this.popupElem = $('<div class="romo-tooltip-popup"><div class="romo-tooltip-arrow"></div><div class="romo-tooltip-body"></div></div>');
-  this.popupElem.appendTo(this.elem.closest(this.elem.data('romo-tooltip-append-to-closest') || 'body'));
-  this.doSetPopupZIndex(this.elem);
-  this.arrowElem = this.popupElem.find('> .romo-tooltip-arrow');
-  this.bodyElem = this.popupElem.find('> .romo-tooltip-body');
+  this.doInitPopup();
 
   this.hoverState = 'out';
   this.delayEnter = 0;
@@ -26,19 +22,6 @@ var RomoTooltip = function(element) {
     this.delayLeave = this.elem.data('romo-tooltip-delay-leave');
   }
 
-  this.popupPosition = this.elem.data('romo-tooltip-position') || 'top';
-  this.popupElem.attr('data-romo-tooltip-position', this.popupPosition);
-  this.popupAlignment = this.elem.data('romo-tooltip-alignment') || 'center';
-  this.popupElem.attr('data-romo-tooltip-alignment', this.popupAlignment);
-
-  // don't propagate click events on the popup elem.  this prevents the popup
-  // from closing when clicked (see body click event bind on popup open)
-  this.popupElem.on('click', function(e) {
-    if (e !== undefined) {
-      e.stopPropagation();
-    }
-  })
-
   if (this.elem.data('romo-tooltip-style-class') !== undefined) {
     this.bodyElem.addClass(this.elem.data('romo-tooltip-style-class'));
   }
@@ -63,6 +46,33 @@ RomoTooltip.prototype.doInit = function() {
   // override as needed
 }
 
+RomoTooltip.prototype.doInitPopup = function() {
+  this.popupElem = $('<div class="romo-tooltip-popup"><div class="romo-tooltip-arrow"></div><div class="romo-tooltip-body"></div></div>');
+  this.popupElem.appendTo(this.elem.closest(this.elem.data('romo-tooltip-append-to-closest') || 'body'));
+
+  this.bodyElem = this.popupElem.find('> .romo-tooltip-body');
+
+  this.popupPosition = this.elem.data('romo-tooltip-position') || 'top';
+  this.popupElem.attr('data-romo-tooltip-position', this.popupPosition);
+
+  this.popupAlignment = this.elem.data('romo-tooltip-alignment') || 'center';
+  this.popupElem.attr('data-romo-tooltip-alignment', this.popupAlignment);
+
+  this.doSetPopupZIndex(this.elem);
+
+  // don't propagate click events on the popup elem.  this prevents the popup
+  // from closing when clicked (see body click event bind on popup open)
+  this.popupElem.on('click', function(e) {
+    if (e !== undefined) {
+      e.stopPropagation();
+    }
+  })
+
+  // the popup should be treated like a child elem.  add it to Romo's
+  // parent-child elems so it will be removed when the elem is removed.
+  Romo.parentChildElems.add(this.elem, [this.popupElem]);
+}
+
 RomoTooltip.prototype.doInitBody = function() {
   this.doResetBody();
 

data/lib/romo/version.rb

@@ -1,3 +1,3 @@
 module Romo
-  VERSION = "0.13.0"
+  VERSION = "0.14.0"
 end

metadata

@@ -1,13 +1,13 @@
 --- !ruby/object:Gem::Specification 
 name: romo
 version: !ruby/object:Gem::Version 
-  hash: 43
+  hash: 39
   prerelease: 
   segments: 
   - 0
-  - 13
+  - 14
   - 0
-  version: 0.13.0
+  version: 0.14.0
 platform: ruby
 authors: 
 - Kelly Redding
@@ -16,7 +16,7 @@ autorequire:
 bindir: bin
 cert_chain: []
 
-date: 2015-10-28 00:00:00 Z
+date: 2015-11-03 00:00:00 Z
 dependencies: 
 - !ruby/object:Gem::Dependency 
   requirement: &id001 !ruby/object:Gem::Requirement