romo 0.19.7 → 0.19.8

checksums.yaml

@@ -1,7 +1,7 @@
 --- 
-SHA1: 
-  metadata.gz: 97d1c8900aee3e16f65d499f0837bb74f6225033
-  data.tar.gz: 17737178b8474f79671d577bd173db8fffdfb817
 SHA512: 
-  metadata.gz: dc935bbf15d8cc944fff91f2e7c2687ec8b8d033839b881cd66d30a549d1eac82e258aa85d8517f91797fb4239317f496702467a58103545058c0f7b12b51dbd
-  data.tar.gz: 01dbeac8de96746f831ed7993efb7c65ef34f4c2aac876528ccf784c668f361c3c95c2b0a9fab537fc2a85a3ef9fc0b03a2f671a62b385ff8e49984a17573b04
+  data.tar.gz: 5eea8c90486df3910adfb7ec8c509ad7b905b00b75cd254dbe0b2ef5717e9af0f4d75274cd674af2c4788c335eec7c1bda863e62ec9f5fb07bd2c79ed98613b7
+  metadata.gz: 7677d14e707541385b4bae0f61963fafd0d05ac14ac49cdcf3b0796cac5d473e68a7ea1e71a62238399587d6b43bc1a3676aa3d2babf3fbdbcd5f5ef4506b8d4
+SHA1: 
+  data.tar.gz: 796333f88f138aaba75067ce59915e6aa5f5bf4c
+  metadata.gz: 9a0f573b36b64a154382beb9a02ee6d51351a0db

data/assets/js/romo/base.js

@@ -1,274 +1,612 @@
-(function() {
-  var Romo = function() {
-    this._eventCallbacks = [];
-  }
+var Romo = function() {
+  this._eventCallbacks = [];
+}
 
-  Romo.prototype.doInit = function() {
-    this.parentChildElems = new RomoParentChildElems();
+// TODO: rework w/o jQuery
+Romo.prototype.doInit = function() {
+  this.parentChildElems = new RomoParentChildElems();
 
-    $.each(this._eventCallbacks, function(idx, eventCallback) {
-      $('body').on(eventCallback.eventName, eventCallback.callback);
-    });
+  $.each(this._eventCallbacks, function(idx, eventCallback) {
+    $('body').on(eventCallback.eventName, eventCallback.callback);
+  });
 
-    this.triggerInitUI($('body'));
-  }
+  this.triggerInitUI($('body'));
+}
 
-  // init UI
+// element finders
 
-  Romo.prototype.onInitUI = function(callback) {
-    this._addEventCallback('romo:initUI', callback);
-  }
+Romo.prototype.f = function(selector) {
+  return this.array(document.querySelectorAll(selector));
+}
 
-  Romo.prototype.triggerInitUI = function(elems) {
-    elems.trigger('romo:initUI');
-  }
+Romo.prototype.find = function(parentElem, selector) {
+  return this.array(parentElem.querySelectorAll(selector));
+}
+
+Romo.prototype.children = function(parentElem) {
+  return this.array(parentElem.children);
+}
 
-  Romo.prototype.initUIElems = function(e, selector) {
-    var elems = $(e.target).find(selector).get();
-    if ($(e.target).is(selector)) {
-      elems.push(e.target)
+Romo.prototype.parent = function(childElem) {
+  return childElem.parentNode;
+}
+
+Romo.prototype.siblings = function(elem) {
+  return Array.prototype.filter.call(elem.parentNode.children, function(childElem) {
+    return childElem !== elem;
+  });
+}
+
+Romo.prototype.prev = function(fromElem) {
+  return fromElem.previousElementSibling;
+}
+
+Romo.prototype.next = function(fromElem) {
+  return fromElem.nextElementSibling;
+}
+
+Romo.prototype.closest = function(fromElem, selector) {
+  if (fromElem.closest) {
+    return fromElem.closest(selector);
+  } else {
+    var matchesSelector = fromElem.matches ||
+                          fromElem.webkitMatchesSelector ||
+                          fromElem.mozMatchesSelector ||
+                          fromElem.msMatchesSelector;
+    while (fromElem) {
+      if (matchesSelector.call(fromElem, selector)) {
+        return fromElem;
+      } else {
+        fromElem = fromElem.parentElement;
+      }
     }
-    return $(elems);
+    return undefined;
   }
+}
 
-  Romo.prototype.initHtml = function(elems, data) {
-    elems.each($.proxy(function(index, elem) {
-      var htmlElems = $(data)
-      $(elem).html(htmlElems);
-      this.triggerInitUI(htmlElems);
-    }, this));
+// TODO: rework w/o jQuery
+Romo.prototype.selectNext = function(elem, selector) {
+  // like `$().next()`, but takes a selector; returns first next elem that
+  // matches the given selector or an empty collection if non matches
+  var el = elem.next();
+  while(el.length) {
+    if (selector === undefined || el.is(selector)) {
+      return el;
+    }
+    el = el.next();
   }
+  return el;
+}
 
-  Romo.prototype.initReplace = function(elems, data) {
-    elems.each($.proxy(function(index, elem) {
-      var replacementElem = $(data);
-      $(elem).replaceWith(replacementElem);
-      this.triggerInitUI(replacementElem);
-    }, this));
+// TODO: rework w/o jQuery
+Romo.prototype.selectPrev = function(elem, selector) {
+  // like `$().prev()`, but takes a selector; returns first prev elem that
+  // matches the given selector or an empty collection if non matches
+  var el = elem.prev();
+  while(el.length) {
+    if (selector === undefined || el.is(selector)) {
+      return el;
+    }
+    el = el.prev();
   }
+  return el;
+}
 
-  Romo.prototype.initPrepend = function(elems, data) {
-    elems.each($.proxy(function(index, elem) {
-      var prependedElem = $(data);
-      $(elem).prepend(prependedElem);
-      this.triggerInitUI(prependedElem);
-    }, this));
-  }
+// attributes, styles, classes
 
-  Romo.prototype.initAppend = function(elems, data) {
-    elems.each($.proxy(function(index, elem) {
-      var appendedElem = $(data);
-      $(elem).append(appendedElem);
-      this.triggerInitUI(appendedElem);
-    }, this));
+Romo.prototype.attr = function(elem, attrName) {
+  return elem.getAttribute ? elem.getAttribute(attrName) : undefined;
+}
+
+Romo.prototype.setAttr = function(elem, attrName, attrValue) {
+  if (elem.setAttribute) {
+    elem.setAttribute(attrName, attrValue);
   }
+  return attrValue;
+}
 
-  Romo.prototype.initBefore = function(elems, data) {
-    elems.each($.proxy(function(index, elem) {
-      var insertedElem = $(data);
-      $(elem).before(insertedElem);
-      this.triggerInitUI(insertedElem);
-    }, this));
+Romo.prototype.style = function(elem, styleName) {
+  return elem.style[styleName];
+}
+
+Romo.prototype.setStyle = function(elem, styleName, styleValue) {
+  elem.style[styleName] = styleValue;
+  return styleValue;
+}
+
+Romo.prototype.css = function(elem, styleName) {
+  return window.getComputedStyle(elem, null).getPropertyValue(styleName);
+}
+
+Romo.prototype.addClass = function(elem, className) {
+  elem.classList.add(className);
+  return className;
+}
+
+Romo.prototype.removeClass = function(elem, className) {
+  elem.classList.remove(className);
+  return className;
+}
+
+Romo.prototype.toggleClass = function(elem, className) {
+  elem.classList.toggle(className);
+  return className;
+}
+
+Romo.prototype.hasClass = function(elem, className) {
+  return elem.classList.contains(className);
+}
+
+Romo.prototype.show = function(elem) {
+  elem.style.display = '';
+}
+
+Romo.prototype.hide = function(elem) {
+  elem.style.display = 'none';
+}
+
+Romo.prototype.offset = function(elem) {
+  var rect = elem.getBoundingClientRect();
+  return {
+    top:  rect.top  + document.body.scrollTop,
+    left: rect.left + document.body.scrollLeft
+  };
+}
+
+Romo.prototype.scrollTop = function(elem) {
+  return ('scrollTop' in elem) ? elem.scrollTop : elem.pageYOffset;
+}
+
+Romo.prototype.scrollLeft = function(elem) {
+  return ('scrollLeft' in elem) ? elem.scrollLeft : elem.pageXOffset;
+}
+
+Romo.prototype.setScrollTop = function(elem, value) {
+  if ('scrollTop' in elem) {
+    elem.scrollTop = value;
+  } else {
+    elem.scrollTo(elem.scrollX, value);
   }
+}
 
-  Romo.prototype.initAfter = function(elems, data) {
-    elems.each($.proxy(function(index, elem) {
-      var insertedElem = $(data);
-      $(elem).after(insertedElem);
-      this.triggerInitUI(insertedElem);
-    }, this));
+Romo.prototype.setScrollLeft = function(elem, value) {
+  if ('scrollLeft' in elem) {
+    elem.scrollLeft = value;
+  } else {
+    elem.scrollTo(value, elem.scrollY);
   }
+}
 
-  // page handling
+// TODO: rework w/o jQuery
+Romo.prototype.getComputedStyle = function(node, styleName) {
+  return window.getComputedStyle(node, null).getPropertyValue(styleName);
+}
 
-  Romo.prototype.reloadPage = function() {
-    window.location = window.location;
+// TODO: rework w/o jQuery
+Romo.prototype.parseZIndex = function(elem) {
+  // for the case where z-index is set directly on the elem
+  var val = this.parseElemZIndex(elem);
+  if (val !== 0) {
+    return val;
   }
 
-  Romo.prototype.redirectPage = function(redirectUrl) {
-    window.location = redirectUrl;
+  // for the case where z-index is inherited from a parent elem
+  var parentIndexes = this.toArray(elem.parents()).reduce($.proxy(function(prev, curr) {
+    var pval = this.parseElemZIndex($(curr));
+    if (pval !== 0) {
+      prev.push(pval);
+    }
+    return prev;
+  }, this), []);
+  parentIndexes.push(0); // in case z-index is 'auto' all the way up
+  return parentIndexes[0];
+}
+
+// TODO: rework w/o jQuery
+Romo.prototype.parseElemZIndex = function(elem) {
+  var val = parseInt(this.getComputedStyle(elem[0], "z-index"));
+  if (!isNaN(val)) {
+    return val;
   }
+  return 0;
+}
 
-  // param serialization
+// DOM manipulation
 
-  Romo.prototype.param = function(data, opts) {
-    var paramData = $.extend({}, data);
+Romo.prototype.elems = function(htmlString) {
+  var context = document.implementation.createHTMLDocument();
 
-    if (opts && opts.removeEmpty) {
-      $.each(paramData, function(key, value) {
-        if (value === '') {
-          delete paramData[key];
-        }
-      })
-    }
+  // Set the base href for the created document so any parsed
+  // elements with URLs are based on the document's URL
+  var base = context.createElement('base');
+  base.href = document.location.href;
+  context.head.appendChild(base);
 
-    var paramString = $.param(paramData);
+  context.body.innerHTML = htmlString;
+  return this.array(context.body.children);
+}
 
-    if (opts && opts.decodeValues) {
-      paramString = this.decodeParam(paramString);
-    }
+Romo.prototype.remove = function(elem) {
+  return elem.parentNode.removeChild(elem);
+}
 
-    return paramString;
-  }
+Romo.prototype.replace = function(elem, replacementElem) {
+  elem.parentNode.replaceChild(replacementElem, elem);
+  return replacementElem;
+}
 
-  Romo.prototype.decodeParam = function(string) {
-    return this.decodeParamMap.reduce(function(prev, curr) {
-      return prev.replace(curr[0], curr[1]);
-    }, string);
-  }
+Romo.prototype.replaceHtml = function(elem, htmlString) {
+  return this.replace(elem, this.elems(htmlString)[0]);
+}
 
-  Romo.prototype.decodeParamMap = [
-    [/%20/g, '+'],
-    [/%21/g, '!'],
-    [/%24/g, '$'],
-    [/%28/g, '('],
-    [/%29/g, ')'],
-    [/%2A/g, '*'],
-    [/%2B/g, '+'],
-    [/%2C/g, ','],
-    [/%2D/g, '-'],
-    [/%2E/g, '.'],
-    [/%2F/g, '/'],
-    [/%5B/g, '['],
-    [/%5C/g, '\\'],
-    [/%5D/g, ']'],
-    [/%3A/g, ':'],
-    [/%3C/g, '<'],
-    [/%3E/g, '>'],
-    [/%3F/g, '?'],
-    [/%40/g, '@'],
-    [/%5E/g, '^'],
-    [/%5F/g, '_'],
-    [/%60/g, '`'],
-    [/%7B/g, '{'],
-    [/%7C/g, '|'],
-    [/%7D/g, '}'],
-    [/%7E/g, '~']
-  ];
+Romo.prototype.update = function(elem, childElems) {
+  elem.innerHTML = '';
+  return childElems.map(function(childElem) {
+    return elem.appendChild(childElem);
+  });
+}
+
+Romo.prototype.updateHtml = function(elem, htmlString) {
+  return this.update(elem, this.elems(htmlString));
+}
+
+Romo.prototype.prepend = function(elem, childElems) {
+  var refElem = elem.firstChild;
+  return childElems.reverse().map(function(childElem) {
+    refElem = elem.insertBefore(childElem, refElem);
+    return refElem;
+  }).reverse();
+}
+
+Romo.prototype.prependHtml = function(elem, htmlString) {
+  return this.prepend(elem, this.elems(htmlString));
+}
+
+Romo.prototype.append = function(elem, childElems) {
+  return childElems.map(function(childElem) {
+    return elem.appendChild(childElem);
+  });
+}
+
+Romo.prototype.appendHtml = function(elem, htmlString) {
+  return this.append(elem, this.elems(htmlString));
+}
+
+Romo.prototype.before = function(elem, siblingElems) {
+  var refElem    = elem;
+  var parentElem = elem.parentNode;
+  return siblingElems.reverse().map(function(siblingElem) {
+    refElem = parentElem.insertBefore(siblingElem, refElem);
+    return refElem;
+  }).reverse();
+}
+
+Romo.prototype.beforeHtml = function(elem, htmlString) {
+  return this.before(elem, this.elems(htmlString));
+}
+
+Romo.prototype.after = function(elem, siblingElems) {
+  var refElem    = this.next(elem);
+  var parentElem = elem.parentNode;
+  return siblingElems.map(function(siblingElem) {
+    return parentElem.insertBefore(siblingElem, refElem);
+  });
+}
+
+Romo.prototype.afterHtml = function(elem, htmlString) {
+  return this.after(elem, this.elems(htmlString));
+}
+
+// init UI (TODO: rework w/o jQuery)
+
+Romo.prototype.onInitUI = function(callback) {
+  this._addEventCallback('romo:initUI', callback);
+}
 
-  // style handling
+Romo.prototype.triggerInitUI = function(elems) {
+  elems.trigger('romo:initUI');
+}
 
-  Romo.prototype.getComputedStyle = function(node, styleName) {
-    return window.getComputedStyle(node, null).getPropertyValue(styleName);
+Romo.prototype.initUIElems = function(e, selector) {
+  var elems = $(e.target).find(selector).get();
+  if ($(e.target).is(selector)) {
+    elems.push(e.target)
   }
+  return $(elems);
+}
 
-  Romo.prototype.parseZIndex = function(elem) {
-    // for the case where z-index is set directly on the elem
-    var val = this.parseElemZIndex(elem);
-    if (val !== 0) {
-      return val;
-    }
+Romo.prototype.initHtml = function(elems, data) {
+  elems.each($.proxy(function(index, elem) {
+    var htmlElems = $(data)
+    $(elem).html(htmlElems);
+    this.triggerInitUI(htmlElems);
+  }, this));
+}
+
+Romo.prototype.initReplace = function(elems, data) {
+  elems.each($.proxy(function(index, elem) {
+    var replacementElem = $(data);
+    $(elem).replaceWith(replacementElem);
+    this.triggerInitUI(replacementElem);
+  }, this));
+}
+
+Romo.prototype.initPrepend = function(elems, data) {
+  elems.each($.proxy(function(index, elem) {
+    var prependedElem = $(data);
+    $(elem).prepend(prependedElem);
+    this.triggerInitUI(prependedElem);
+  }, this));
+}
+
+Romo.prototype.initAppend = function(elems, data) {
+  elems.each($.proxy(function(index, elem) {
+    var appendedElem = $(data);
+    $(elem).append(appendedElem);
+    this.triggerInitUI(appendedElem);
+  }, this));
+}
+
+Romo.prototype.initBefore = function(elems, data) {
+  elems.each($.proxy(function(index, elem) {
+    var insertedElem = $(data);
+    $(elem).before(insertedElem);
+    this.triggerInitUI(insertedElem);
+  }, this));
+}
+
+Romo.prototype.initAfter = function(elems, data) {
+  elems.each($.proxy(function(index, elem) {
+    var insertedElem = $(data);
+    $(elem).after(insertedElem);
+    this.triggerInitUI(insertedElem);
+  }, this));
+}
+
+// page handling
 
-    // for the case where z-index is inherited from a parent elem
-    var parentIndexes = this.toArray(elem.parents()).reduce($.proxy(function(prev, curr) {
-      var pval = this.parseElemZIndex($(curr));
-      if (pval !== 0) {
-        prev.push(pval);
+Romo.prototype.reloadPage = function() {
+  window.location = window.location;
+}
+
+Romo.prototype.redirectPage = function(redirectUrl) {
+  window.location = redirectUrl;
+}
+
+// param serialization (TODO: rework w/o jQuery)
+
+Romo.prototype.param = function(data, opts) {
+  var paramData = $.extend({}, data);
+
+  if (opts && opts.removeEmpty) {
+    $.each(paramData, function(key, value) {
+      if (value === '') {
+        delete paramData[key];
       }
-      return prev;
-    }, this), []);
-    parentIndexes.push(0); // in case z-index is 'auto' all the way up
-    return parentIndexes[0];
+    })
   }
 
-  Romo.prototype.parseElemZIndex = function(elem) {
-    var val = parseInt(this.getComputedStyle(elem[0], "z-index"));
-    if (!isNaN(val)) {
-      return val;
-    }
-    return 0;
+  var paramString = $.param(paramData);
+
+  if (opts && opts.decodeValues) {
+    paramString = this.decodeParam(paramString);
   }
 
-  // elem handling
+  return paramString;
+}
 
-  Romo.prototype.toArray = function(elems) {
-    // converts a collection of elements `$()` to an array of nodes
-    return $.map(elems, function(node){ return node; })
-  }
+Romo.prototype.decodeParam = function(string) {
+  return this.decodeParamMap.reduce(function(prev, curr) {
+    return prev.replace(curr[0], curr[1]);
+  }, string);
+}
 
-  Romo.prototype.selectNext = function(elem, selector) {
-    // like `$().next()`, but takes a selector; returns first next elem that
-    // matches the given selector or an empty collection if non matches
-    var el = elem.next();
-    while(el.length) {
-      if (selector === undefined || el.is(selector)) {
-        return el;
-      }
-      el = el.next();
-    }
-    return el;
+Romo.prototype.decodeParamMap = [
+  [/%20/g, '+'],
+  [/%21/g, '!'],
+  [/%24/g, '$'],
+  [/%28/g, '('],
+  [/%29/g, ')'],
+  [/%2A/g, '*'],
+  [/%2B/g, '+'],
+  [/%2C/g, ','],
+  [/%2D/g, '-'],
+  [/%2E/g, '.'],
+  [/%2F/g, '/'],
+  [/%5B/g, '['],
+  [/%5C/g, '\\'],
+  [/%5D/g, ']'],
+  [/%3A/g, ':'],
+  [/%3C/g, '<'],
+  [/%3E/g, '>'],
+  [/%3F/g, '?'],
+  [/%40/g, '@'],
+  [/%5E/g, '^'],
+  [/%5F/g, '_'],
+  [/%60/g, '`'],
+  [/%7B/g, '{'],
+  [/%7C/g, '|'],
+  [/%7D/g, '}'],
+  [/%7E/g, '~']
+];
+
+// AJAX
+
+Romo.prototype.ajax = function(settings) {
+  var xhr = new XMLHttpRequest();
+  xhr.open(settings.type || 'GET', settings.url, true, settings.username, settings.password);
+  if (settings.responseType === 'arraybuffer' || settings.responseType === 'blob') {
+    xhr.responseType = settings.responseType;
   }
-
-  Romo.prototype.selectPrev = function(elem, selector) {
-    // like `$().prev()`, but takes a selector; returns first prev elem that
-    // matches the given selector or an empty collection if non matches
-    var el = elem.prev();
-    while(el.length) {
-      if (selector === undefined || el.is(selector)) {
-        return el;
+  xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
+  for (name in settings.headers) {
+    xhr.setRequestHeader(name, settings.headers[name]);
+  }
+  if (settings.contentType) {
+    xhr.setRequestHeader('Content-Type', settings.contentType);
+  }
+  xhr.onreadystatechange = function() {
+    if (xhr.readyState === 4) {
+      if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
+        if (xhr.responseType === 'arraybuffer' || xhr.responseType === 'blob') {
+          settings.success.call(window, xhr.response, xhr.status, xhr, settings);
+        } else {
+          settings.success.call(window, xhr.responseText, xhr.status, xhr, settings);
+        }
+      } else {
+        settings.error.call(window, xhr.statusText || null, xhr.status, xhr, settings);
       }
-      el = el.prev();
     }
-    return el;
-  }
+  };
+  xhr.send(settings.data ? settings.data : null);
+},
+
+// events
+
+Romo.prototype.on = function(elem, eventName, fn) {
+  // var proxyFn = function(e) {
+  //   var result = fn.apply(elem, e.detail === undefined ? [e] : [e].concat(e.detail));
+  //   if (result === false) {
+  //     e.preventDefault();
+  //     e.stopPropagation();
+  //   }
+  //   return result;
+  // }
+  // proxyFn._romofid = this._fn(fn)._romofid;
+
+  // var key = this._handlerKey(elem, eventName, proxyFn);
+  // if (!this._handlers[key]) {
+  //   elem.addEventListener(eventName, proxyFn);
+  //   this._handlers[key] = proxyFn;
+  // }
+
+  // Giant Hack to temporarily support jQuery and non-jQuery triggers
+  // see: https://bugs.jquery.com/ticket/11047
+  $(elem).on(eventName, fn);
+}
 
-  // input handling
-
-  Romo.prototype.nonInputTextKeyCodes = function() {
-    // https://css-tricks.com/snippets/javascript/javascript-keycodes/
-    return [
-      9,   /* tab */
-      13,  /* enter */
-      16,  /* shift */
-      17,  /* ctrl */
-      18,  /* alt */
-      19,  /* pausebreak */
-      20,  /* capslock */
-      27,  /* escape */
-      33,  /* pageup */
-      34,  /* pagedown */
-      35,  /* end */
-      36,  /* home */
-      37,  /* leftarrow */
-      38,  /* uparrow */
-      39,  /* rightarrow */
-      40,  /* downarrow */
-      45,  /* insert */
-      46,  /* delete */
-      91,  /* leftwindowkey */
-      92,  /* rightwindowkey */
-      93,  /* selectkey */
-      112, /* f1 */
-      113, /* f2 */
-      114, /* f3 */
-      115, /* f4 */
-      116, /* f5 */
-      117, /* f6 */
-      118, /* f7 */
-      119, /* f8 */
-      120, /* f9 */
-      121, /* f10 */
-      122, /* f11 */
-      123, /* f12 */
-      144, /* numlock */
-      145, /* scrolllock */
-    ];
-  }
+Romo.prototype.off = function(elem, eventName, fn) {
+  // var key     = this._handlerKey(elem, eventName, fn);
+  // var proxyFn = this._handlers[key];
+  // if (proxyFn) {
+  //   elem.removeEventListener(eventName, proxyFn);
+  //   this._handlers[key] = undefined;
+  // }
+
+  // Giant Hack to temporarily support jQuery and non-jQuery triggers
+  // see: https://bugs.jquery.com/ticket/11047
+  $(elem).off(eventName, fn);
+}
 
-  // private
+Romo.prototype.trigger = function(elem, customEventName, args) {
+  // var event = undefined;
+  // if (typeof window.CustomEvent === "function") {
+  //   event = new CustomEvent(customEventName, { detail: args });
+  // } else {
+  //   event = document.createEvent('CustomEvent');
+  //   event.initCustomEvent(customEventName, false, false, args);
+  // }
+  // elem.dispatchEvent(event);
+  $(elem).trigger(customEventName, args);
+}
 
-  Romo.prototype._addEventCallback = function(name, callback) {
-    this._eventCallbacks.push({ eventName: name, callback:  callback });
+Romo.prototype.ready = function(eventHandlerFn) {
+  if (document.readyState === 'complete' || document.readyState !== 'loading') {
+    eventHandlerFn();
+  } else {
+    this.on(document, 'DOMContentLoaded', eventHandlerFn);
   }
+}
 
-  window.Romo = new Romo();
-})();
+// utils
 
-$(function() {
+Romo.prototype.array = function(collection) {
+  return Array.prototype.slice.call(collection);
+}
 
-  Romo.doInit();
+Romo.prototype.proxy = function(fn, context) {
+  var proxyFn    = fn.bind(context);
+  proxyFn._romofid = this._fn(fn)._romofid;
 
-})
+  return proxyFn;
+}
+
+// TODO: rework w/o jQuery
+Romo.prototype.toArray = function(elems) {
+  // converts a collection of elements `$()` to an array of nodes
+  return $.map(elems, function(node){ return node; })
+}
+
+Romo.prototype.nonInputTextKeyCodes = function() {
+  // https://css-tricks.com/snippets/javascript/javascript-keycodes/
+  return [
+    9,   /* tab */
+    13,  /* enter */
+    16,  /* shift */
+    17,  /* ctrl */
+    18,  /* alt */
+    19,  /* pausebreak */
+    20,  /* capslock */
+    27,  /* escape */
+    33,  /* pageup */
+    34,  /* pagedown */
+    35,  /* end */
+    36,  /* home */
+    37,  /* leftarrow */
+    38,  /* uparrow */
+    39,  /* rightarrow */
+    40,  /* downarrow */
+    45,  /* insert */
+    46,  /* delete */
+    91,  /* leftwindowkey */
+    92,  /* rightwindowkey */
+    93,  /* selectkey */
+    112, /* f1 */
+    113, /* f2 */
+    114, /* f3 */
+    115, /* f4 */
+    116, /* f5 */
+    117, /* f6 */
+    118, /* f7 */
+    119, /* f8 */
+    120, /* f9 */
+    121, /* f10 */
+    122, /* f11 */
+    123, /* f12 */
+    144, /* numlock */
+    145, /* scrolllock */
+  ];
+}
+
+// private helpers
+
+Romo.prototype._eid = 1;
+Romo.prototype._fid = 1;
+
+Romo.prototype._el = function(elem) {
+  elem._romoeid || (
+    elem._romoeid = (this.attr(elem, 'data-romo-eid') || this.setAttr(elem, 'data-romo-eid', this._eid++))
+  );
+  return elem;
+}
+
+Romo.prototype._fn = function(fn) {
+  fn._romofid || (fn._romofid = this._fid++);
+  return fn;
+}
+
+Romo.prototype._handlers = {};
+
+Romo.prototype._handlerKey = function(elem, eventName, fn) {
+  return 'eid--'+this._el(elem)._romoeid+'--'+eventName+'--fid--'+this._fn(fn)._romofid;
+}
+
+// TODO: rework w/o jQuery
+Romo.prototype._addEventCallback = function(name, callback) {
+  this._eventCallbacks.push({ eventName: name, callback:  callback });
+}
+
+// RomoParentChildElems (TODO: rework w/o jQuery)
 
 var RomoParentChildElems = function() {
   this.attrName = 'romo-parent-elem-id';
@@ -306,7 +644,7 @@ RomoParentChildElems.prototype.remove = function(nodeElem) {
   }
 }
 
-// private
+// private RomoParentChildElems
 
 RomoParentChildElems.prototype._removeChildElems = function(parentElem) {
   $.each(this._pop(parentElem.data(this.attrName)), function(idx, elem) {
@@ -330,3 +668,12 @@ RomoParentChildElems.prototype._pop = function(id) {
   delete this.elems[id];
   return items || [];
 }
+
+// Init
+
+window.Romo = new Romo();
+
+// TODO: rework w/o jQuery
+$(function() {
+  Romo.doInit();
+})

data/assets/js/romo/option_list_dropdown.js

@@ -481,10 +481,12 @@ RomoOptionListDropdown.prototype._onElemKeyDown = function(e) {
         return false;
       } else if (this.optionFilterElem !== undefined &&
                  Romo.nonInputTextKeyCodes().indexOf(e.keyCode) === -1 /* Input Text */)  {
+        // don't prevent default on Cmd-* keys (preserve Cmd-R refresh, etc)
         if (e.metaKey === false) {
-          // don't prevent default on Cmd-* keys (preserve Cmd-R refresh, etc)
           e.preventDefault();
-          this.optionFilterElem.val(e.key);
+          if (e.keyCode !== 8) { /* Backspace */
+            this.optionFilterElem.val(e.key);
+          }
           this.romoDropdown.doPopupOpen();
         }
         e.stopPropagation();

data/assets/js/romo/picker.js

@@ -70,11 +70,14 @@ RomoPicker.prototype.doSetValueDatas = function(valueDatas) {
     this._setValuesAndDisplayText(values, '');
     this.romoSelectedOptionsList.doSetItems(datas);
   } else {
-    this._setValuesAndDisplayText(
-      values,
-      (displayTexts[0] || this.elem.data('romo-picker-empty-option-display-text') || '')
+    var displayText = displayTexts[0] ||
+                      this.elem.data('romo-picker-empty-option-display-text') ||
+                      '';
+    this._setValuesAndDisplayText(values, displayText);
+    this.romoOptionListDropdown.doSetSelectedValueAndText(
+      values[0],
+      displayText
     );
-    this.romoOptionListDropdown.doSetSelectedItem(values[0]);
   }
   this._refreshUI();
 }

data/lib/romo/version.rb

@@ -1,3 +1,3 @@
 module Romo
-  VERSION = "0.19.7"
+  VERSION = "0.19.8"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification 
 name: romo
 version: !ruby/object:Gem::Version 
-  version: 0.19.7
+  version: 0.19.8
 platform: ruby
 authors: 
 - Kelly Redding
@@ -10,7 +10,7 @@ autorequire:
 bindir: bin
 cert_chain: []
 
-date: 2017-09-06 00:00:00 Z
+date: 2017-09-26 00:00:00 Z
 dependencies: 
 - !ruby/object:Gem::Dependency 
   name: assert