romo 0.19.10 → 0.20.0

data/assets/js/romo/picker.js

@@ -1,14 +1,9 @@
-$.fn.romoPicker = function() {
-  return $.map(this, function(element) {
-    return new RomoPicker(element);
-  });
-}
-
-var RomoPicker = function(element) {
-  this.elem = $(element);
+var RomoPicker = RomoComponent(function(elem) {
+  this.elem = elem;
 
   this.defaultCaretClass     = undefined;
   this.defaultCaretPaddingPx = 5;
+  this.defaultCaretWidthPx   = 18;
   this.defaultCaretPosition  = 'right'
   this.defaultValuesDelim    = ',';
 
@@ -18,51 +13,23 @@ var RomoPicker = function(element) {
   this.doInit();
   this._bindElem();
 
-  this.doSetValue(this._elemValues());
-
-  if (this.elem.attr('id') !== undefined) {
-    $('label[for="'+this.elem.attr('id')+'"]').on('click', $.proxy(function(e) {
-      this.romoOptionListDropdown.doFocus();
-    }, this));
-  }
-
-  $(window).on("pageshow", $.proxy(function(e) {
-    this._refreshUI();
-  }, this));
-
-  this.elem.on('romoPicker:triggerSetValue', $.proxy(function(e, value) {
-    this.doSetValue(value)
-  }, this));
-
-  this.elem.trigger('romoPicker:ready', [this]);
-}
-
-RomoPicker.prototype.doInit = function() {
-  // override as needed
-}
+  Romo.trigger(this.elem, 'romoPicker:ready', [this]);
+});
 
 RomoPicker.prototype.doSetValue = function(values) {
-  var value = undefined;
-  if (Array.isArray(values)) {
-    value = values.join(this._elemValuesDelim());
-  } else {
-    value = values;
-  }
-  $.ajax({
+  var value = Romo.array(values).join(this._elemValuesDelim());
+  Romo.ajax({
     type:    'GET',
-    url:     this.elem.data('romo-picker-url'),
+    url:     Romo.data(this.elem, 'romo-picker-url'),
     data:    { 'values': value },
-    success: $.proxy(function(data, status, xhr) { this.doSetValueDatas(data); }, this),
+    success: Romo.proxy(function(data, status, xhr) {
+      this.doSetValueDatas(JSON.parse(data));
+    }, this),
   });
 }
 
 RomoPicker.prototype.doSetValueDatas = function(valueDatas) {
-  var datas = undefined;
-  if (Array.isArray(valueDatas)) {
-    datas = valueDatas;
-  } else {
-    datas = [valueDatas];
-  }
+  var datas        = Romo.array(valueDatas);
   var values       = datas.map(function(data) { return data.value; });
   var displayTexts = datas.map(function(data) { return data.displayText; });
 
@@ -71,7 +38,7 @@ RomoPicker.prototype.doSetValueDatas = function(valueDatas) {
     this.romoSelectedOptionsList.doSetItems(datas);
   } else {
     var displayText = displayTexts[0] ||
-                      this.elem.data('romo-picker-empty-option-display-text') ||
+                      Romo.data(this.elem, 'romo-picker-empty-option-display-text') ||
                       '';
     this._setValuesAndDisplayText(values, displayText);
     this.romoOptionListDropdown.doSetSelectedValueAndText(
@@ -82,38 +49,56 @@ RomoPicker.prototype.doSetValueDatas = function(valueDatas) {
   this._refreshUI();
 }
 
-/* private */
+// private
 
 RomoPicker.prototype._bindElem = function() {
   this._bindOptionListDropdown();
   this._bindSelectedOptionsList();
   this._bindAjax();
 
-  this.elem.on('romoPicker:triggerToggle', $.proxy(function(e) {
-    this.romoOptionListDropdown.elem.trigger('romoOptionListDropdown:triggerToggle', []);
+  Romo.on(this.elem, 'romoPicker:triggerToggle', Romo.proxy(function(e) {
+    Romo.trigger(this.romoOptionListDropdown.elem, 'romoOptionListDropdown:triggerToggle', []);
   }, this));
-  this.elem.on('romoPicker:triggerPopupOpen', $.proxy(function(e) {
-    this.romoOptionListDropdown.elem.trigger('romoOptionListDropdown:triggerPopupOpen', []);
+  Romo.on(this.elem, 'romoPicker:triggerPopupOpen', Romo.proxy(function(e) {
+    Romo.trigger(this.romoOptionListDropdown.elem, 'romoOptionListDropdown:triggerPopupOpen', []);
   }, this));
-  this.elem.on('romoPicker:triggerPopupClose', $.proxy(function(e) {
-    this.romoOptionListDropdown.elem.trigger('romoOptionListDropdown:triggerPopupClose', []);
+  Romo.on(this.elem, 'romoPicker:triggerPopupClose', Romo.proxy(function(e) {
+    Romo.trigger(this.romoOptionListDropdown.elem, 'romoOptionListDropdown:triggerPopupClose', []);
   }, this));
 
   this.romoOptionListDropdown.doSetListItems(this.defaultOptionItems);
+
+  this.doSetValue(this._elemValues());
+
+  if (Romo.attr(this.elem, 'id') !== undefined) {
+    var labelElem = Romo.f('label[for="'+Romo.attr(this.elem, 'id')+'"]');
+    Romo.on(labelElem, 'click', Romo.proxy(function(e) {
+      e.preventDefault();
+      this.romoOptionListDropdown.doFocus();
+    }, this));
+  }
+
+  Romo.on(window, "pageshow", Romo.proxy(function(e) {
+    this._refreshUI();
+  }, this));
+
+  Romo.on(this.elem, 'romoPicker:triggerSetValue', Romo.proxy(function(e, value) {
+    this.doSetValue(value)
+  }, this));
 }
 
 RomoPicker.prototype._bindSelectedOptionsList = function() {
   this.romoSelectedOptionsList = undefined;
-  if (this.elem.prop('multiple') === true) {
-    if (this.elem.data('romo-picker-multiple-item-class') !== undefined) {
-      this.romoOptionListDropdown.elem.attr('data-romo-selected-options-list-item-class', this.elem.data('romo-picker-multiple-item-class'));
+  if (this.elem.multiple === true) {
+    if (Romo.data(this.elem, 'romo-picker-multiple-item-class') !== undefined) {
+      Romo.setData(this.romoOptionListDropdown.elem, 'romo-selected-options-list-item-class', Romo.data(this.elem, 'romo-picker-multiple-item-class'));
     }
-    if (this.elem.data('romo-picker-multiple-max-rows') !== undefined) {
-      this.romoOptionListDropdown.elem.attr('data-romo-selected-options-list-max-rows', this.elem.data('romo-picker-multiple-max-rows'));
+    if (Romo.data(this.elem, 'romo-picker-multiple-max-rows') !== undefined) {
+      Romo.setData(this.romoOptionListDropdown.elem, 'romo-selected-options-list-max-rows', Romo.data(this.elem, 'romo-picker-multiple-max-rows'));
     }
 
     this.romoSelectedOptionsList = new RomoSelectedOptionsList(this.romoOptionListDropdown.elem);
-    this.romoSelectedOptionsList.elem.on('romoSelectedOptionsList:itemClick', $.proxy(function(e, itemValue, romoSelectedOptionsList) {
+    Romo.on(this.romoSelectedOptionsList.elem, 'romoSelectedOptionsList:itemClick', Romo.proxy(function(e, itemValue, romoSelectedOptionsList) {
       var currentValues = this._elemValues();
       var index         = currentValues.indexOf(itemValue);
       if (index > -1) {
@@ -123,45 +108,47 @@ RomoPicker.prototype._bindSelectedOptionsList = function() {
       this.romoSelectedOptionsList.doRemoveItem(itemValue);
       this._refreshUI();
     }, this));
-    this.romoSelectedOptionsList.elem.on('romoSelectedOptionsList:listClick', $.proxy(function(e, romoSelectedOptionsList) {
-      this.romoOptionListDropdown.elem.trigger('dropdown:triggerPopupClose', []);
+    Romo.on(this.romoSelectedOptionsList.elem, 'romoSelectedOptionsList:listClick', Romo.proxy(function(e, romoSelectedOptionsList) {
+      Romo.trigger(this.romoOptionListDropdown.elem, 'romoDropdown:triggerPopupClose', []);
       this.romoOptionListDropdown.doFocus(false);
     }, this));
 
-    this.elemWrapper.before(this.romoSelectedOptionsList.elem);
+    Romo.before(this.elemWrapper, this.romoSelectedOptionsList.elem);
     this.romoSelectedOptionsList.doRefreshUI();
   }
 }
 
 RomoPicker.prototype._bindOptionListDropdown = function() {
-  this.romoOptionListDropdown = this._buildOptionListDropdownElem().romoOptionListDropdown(this.elem)[0];
+  this.romoOptionListDropdown = new RomoOptionListDropdown(
+    this._buildOptionListDropdownElem()
+  );
 
-  this.romoOptionListDropdown.elem.on('romoOptionListDropdown:dropdown:toggle', $.proxy(function(e, dropdown, optionListDropdown) {
-    this.elem.trigger('romoPicker:dropdown:toggle', [dropdown, this]);
+  Romo.on(this.romoOptionListDropdown.elem, 'romoOptionListDropdown:romoDropdown:toggle', Romo.proxy(function(e, romoDropdown, optionListDropdown) {
+    Romo.trigger(this.elem, 'romoPicker:romoDropdown:toggle', [romoDropdown, this]);
   }, this));
-  this.romoOptionListDropdown.elem.on('romoOptionListDropdown:dropdown:popupOpen', $.proxy(function(e, dropdown, optionListDropdown) {
-    this.elem.trigger('romoPicker:dropdown:popupOpen', [dropdown, this]);
+  Romo.on(this.romoOptionListDropdown.elem, 'romoOptionListDropdown:romoDropdown:popupOpen', Romo.proxy(function(e, romoDropdown, optionListDropdown) {
+    Romo.trigger(this.elem, 'romoPicker:romoDropdown:popupOpen', [romoDropdown, this]);
   }, this));
-  this.romoOptionListDropdown.elem.on('romoOptionListDropdown:dropdown:popupClose', $.proxy(function(e, dropdown, optionListDropdown) {
-    this.elem.trigger('romoPicker:dropdown:popupClose', [dropdown, this]);
+  Romo.on(this.romoOptionListDropdown.elem, 'romoOptionListDropdown:romoDropdown:popupClose', Romo.proxy(function(e, romoDropdown, optionListDropdown) {
+    Romo.trigger(this.elem, 'romoPicker:romoDropdown:popupClose', [romoDropdown, this]);
   }, this));
 
-  this.romoOptionListDropdown.elem.on('romoOptionListDropdown:filterChange', $.proxy(function(e, filterValue, romoOptionListDropdown) {
+  Romo.on(this.romoOptionListDropdown.elem, 'romoOptionListDropdown:filterChange', Romo.proxy(function(e, filterValue, romoOptionListDropdown) {
     if (filterValue !== '') {
       // immediately update the custom opt as the filter changes
       // but keep the current filtered option items
       this._setListItems(this.filteredOptionItems.concat(this._buildCustomOptionItems()));
       // this will update with the new filtered items plus the custom on ajax callback
-      this.elem.trigger('romoAjax:triggerInvoke', [{ 'filter': filterValue }]);
+      Romo.trigger(this.elem, 'romoAjax:triggerInvoke', [{ 'filter': filterValue }]);
     } else {
       this._setListItems(this.defaultOptionItems.concat(this._buildCustomOptionItems()));
     }
   }, this));
-  this.romoOptionListDropdown.elem.on('romoOptionListDropdown:itemSelected', $.proxy(function(e, itemValue, itemDisplayText, optionListDropdown) {
+  Romo.on(this.romoOptionListDropdown.elem, 'romoOptionListDropdown:itemSelected', Romo.proxy(function(e, itemValue, itemDisplayText, optionListDropdown) {
     this.romoOptionListDropdown.doFocus();
-    this.elem.trigger('romoPicker:itemSelected', [itemValue, itemDisplayText, this]);
+    Romo.trigger(this.elem, 'romoPicker:itemSelected', [itemValue, itemDisplayText, this]);
   }, this));
-  this.romoOptionListDropdown.elem.on('romoOptionListDropdown:newItemSelected', $.proxy(function(e, itemValue, itemDisplayText, optionListDropdown) {
+  Romo.on(this.romoOptionListDropdown.elem, 'romoOptionListDropdown:newItemSelected', Romo.proxy(function(e, itemValue, itemDisplayText, optionListDropdown) {
     if (this.romoSelectedOptionsList !== undefined) {
       var currentValues = this._elemValues();
       if (!currentValues.includes(itemValue)) {
@@ -175,139 +162,141 @@ RomoPicker.prototype._bindOptionListDropdown = function() {
       this._setValuesAndDisplayText([itemValue], itemDisplayText);
     }
     this._refreshUI();
-    this.elem.trigger('romoPicker:newItemSelected', [itemValue, itemDisplayText, this]);
+    Romo.trigger(this.elem, 'romoPicker:newItemSelected', [itemValue, itemDisplayText, this]);
   }, this));
-  this.romoOptionListDropdown.elem.on('romoOptionListDropdown:change', $.proxy(function(e, newValue, prevValue, optionListDropdown) {
-    this.elem.trigger('change');
-    this.elem.trigger('romoPicker:change', [newValue, prevValue, this]);
+  Romo.on(this.romoOptionListDropdown.elem, 'romoOptionListDropdown:change', Romo.proxy(function(e, newValue, prevValue, optionListDropdown) {
+    Romo.trigger(this.elem, 'change');
+    Romo.trigger(this.elem, 'romoPicker:change', [newValue, prevValue, this]);
   }, this));
 }
 
 RomoPicker.prototype._buildOptionListDropdownElem = function() {
-  var romoOptionListDropdownElem = $('<div class="romo-picker romo-btn" tabindex="0"><span class="romo-picker-text"></span></div>');
-
-  romoOptionListDropdownElem.attr('data-romo-option-list-focus-style-class', 'romo-picker-focus');
-
-  romoOptionListDropdownElem.attr('data-romo-dropdown-position', this.elem.data('romo-picker-dropdown-position'));
-  romoOptionListDropdownElem.attr('data-romo-dropdown-style-class', this.elem.data('romo-picker-dropdown-style-class'));
-  romoOptionListDropdownElem.attr('data-romo-dropdown-min-height', this.elem.data('romo-picker-dropdown-min-height'));
-  romoOptionListDropdownElem.attr('data-romo-dropdown-max-height', this.elem.data('romo-picker-dropdown-max-height'));
-  romoOptionListDropdownElem.attr('data-romo-dropdown-height', this.elem.data('romo-picker-dropdown-height'));
-  romoOptionListDropdownElem.attr('data-romo-dropdown-overflow-x', 'hidden');
-  romoOptionListDropdownElem.attr('data-romo-dropdown-width', 'elem');
-  if (romoOptionListDropdownElem.data('romo-dropdown-max-height') === undefined) {
-    romoOptionListDropdownElem.attr('data-romo-dropdown-max-height', 'detect');
+  var romoOptionListDropdownElem = Romo.elems('<div class="romo-picker romo-btn" tabindex="0"><span class="romo-picker-text"></span></div>')[0];
+
+  Romo.setData(romoOptionListDropdownElem, 'romo-dropdown-overflow-x',           'hidden');
+  Romo.setData(romoOptionListDropdownElem, 'romo-dropdown-width',                'elem');
+  Romo.setData(romoOptionListDropdownElem, 'romo-option-list-focus-style-class', 'romo-picker-focus');
+
+  if (Romo.data(this.elem, 'romo-picker-dropdown-position') !== undefined) {
+    Romo.setData(romoOptionListDropdownElem, 'romo-dropdown-position', Romo.data(this.elem, 'romo-picker-dropdown-position'));
+  }
+  if (Romo.data(this.elem, 'romo-picker-dropdown-style-class') !== undefined) {
+    Romo.setData(romoOptionListDropdownElem, 'romo-dropdown-style-class', Romo.data(this.elem, 'romo-picker-dropdown-style-class'));
+  }
+  if (Romo.data(this.elem, 'romo-picker-dropdown-min-height') !== undefined) {
+    Romo.setData(romoOptionListDropdownElem, 'romo-dropdown-min-height', Romo.data(this.elem, 'romo-picker-dropdown-min-height'));
   }
-  if (this.elem.data('romo-picker-filter-placeholder') !== undefined) {
-    romoOptionListDropdownElem.attr('data-romo-option-list-dropdown-filter-placeholder', this.elem.data('romo-picker-filter-placeholder'));
+  if (Romo.data(this.elem, 'romo-picker-dropdown-max-height') !== undefined) {
+    Romo.setData(romoOptionListDropdownElem, 'romo-dropdown-max-height', Romo.data(this.elem, 'romo-picker-dropdown-max-height'));
   }
-  if (this.elem.data('romo-picker-filter-indicator') !== undefined) {
-    romoOptionListDropdownElem.attr('data-romo-option-list-dropdown-filter-indicator', this.elem.data('romo-picker-filter-indicator'));
+  if (Romo.data(this.elem, 'romo-picker-dropdown-height') !== undefined) {
+    Romo.setData(romoOptionListDropdownElem, 'romo-dropdown-height', Romo.data(this.elem, 'romo-picker-dropdown-height'));
   }
-  if (this.elem.data('romo-picker-filter-indicator-width-px') !== undefined) {
-    romoOptionListDropdownElem.attr('data-romo-option-list-filter-indicator-width-px', this.elem.data('romo-picker-filter-indicator-width-px'));
+  if (Romo.data(this.elem, 'romo-picker-filter-placeholder') !== undefined) {
+    Romo.setData(romoOptionListDropdownElem, 'romo-option-list-dropdown-filter-placeholder', Romo.data(this.elem, 'romo-picker-filter-placeholder'));
   }
-  if (this.elem.data('romo-picker-no-filter') !== undefined) {
-    romoOptionListDropdownElem.attr('data-romo-option-list-dropdown-no-filter', this.elem.data('romo-picker-no-filter'));
+  if (Romo.data(this.elem, 'romo-picker-filter-indicator') !== undefined) {
+    Romo.setData(romoOptionListDropdownElem, 'romo-option-list-dropdown-filter-indicator', Romo.data(this.elem, 'romo-picker-filter-indicator'));
   }
-  if (this.elem.data('romo-picker-open-on-focus') !== undefined) {
-    romoOptionListDropdownElem.attr('data-romo-option-list-dropdown-open-on-focus', this.elem.data('romo-picker-open-on-focus'));
+  if (Romo.data(this.elem, 'romo-picker-filter-indicator-width-px') !== undefined) {
+    Romo.setData(romoOptionListDropdownElem, 'romo-option-list-filter-indicator-width-px', Romo.data(this.elem, 'romo-picker-filter-indicator-width-px'));
+  }
+  if (Romo.data(this.elem, 'romo-picker-no-filter') !== undefined) {
+    Romo.setData(romoOptionListDropdownElem, 'romo-option-list-dropdown-no-filter', Romo.data(this.elem, 'romo-picker-no-filter'));
+  }
+  if (Romo.data(this.elem, 'romo-picker-open-on-focus') !== undefined) {
+    Romo.setData(romoOptionListDropdownElem, 'romo-option-list-dropdown-open-on-focus', Romo.data(this.elem, 'romo-picker-open-on-focus'));
   }
 
-  var classList = this.elem.attr('class') !== undefined ? this.elem.attr('class').split(/\s+/) : [];
-  $.each(classList, function(idx, classItem) {
-    romoOptionListDropdownElem.addClass(classItem);
-  });
-  if (this.elem.attr('style') !== undefined) {
-    romoOptionListDropdownElem.attr('style', this.elem.attr('style'));
+  if (Romo.data(romoOptionListDropdownElem, 'romo-dropdown-max-height') === undefined) {
+    Romo.setData(romoOptionListDropdownElem, 'romo-dropdown-max-height', 'detect');
+  }
+
+  if (Romo.attr(this.elem, 'class') !== undefined) {
+    Romo.addClass(romoOptionListDropdownElem, Romo.attr(this.elem, 'class'));
+  }
+  if (Romo.attr(this.elem, 'style') !== undefined) {
+    Romo.setAttr(romoOptionListDropdownElem, 'style', Romo.attr(this.elem, 'style'));
   }
-  romoOptionListDropdownElem.css({'width': this.elem.css('width')});
-  if (this.elem.attr('disabled') !== undefined) {
-    this.romoOptionListDropdown.elem.attr('disabled', this.elem.attr('disabled'));
+  Romo.setStyle(romoOptionListDropdownElem, 'width', Romo.css(this.elem, 'width'));
+  if (Romo.attr(this.elem, 'disabled') !== undefined) {
+    Romo.setAttr(this.romoOptionListDropdown.elem, 'disabled', Romo.attr(this.elem, 'disabled'));
   }
 
-  this.elem.after(romoOptionListDropdownElem);
-  this.elem.hide();
+  Romo.after(this.elem, romoOptionListDropdownElem);
+  Romo.hide(this.elem);
 
-  this.elemWrapper = $('<div class="romo-picker-wrapper"></div>');
-  if (this.elem.data('romo-picker-btn-group') === true) {
-    this.elemWrapper.addClass('romo-btn-group');
+  this.elemWrapper = Romo.elems('<div class="romo-picker-wrapper"></div>')[0];
+  if (Romo.data(this.elem, 'romo-picker-btn-group') === true) {
+    Romo.addClass(this.elemWrapper, 'romo-btn-group');
   }
-  romoOptionListDropdownElem.before(this.elemWrapper);
-  this.elemWrapper.append(romoOptionListDropdownElem);
-
-  // 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 (picker input) is removed.
-  // 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($.proxy(function() {
-    Romo.parentChildElems.add(this.elem, [this.elemWrapper]);
-  }, this), 1);
-
-  this.caretElem = $();
-  var caretClass = this.elem.data('romo-picker-caret') || this.defaultCaretClass;
+  Romo.before(romoOptionListDropdownElem, this.elemWrapper);
+  Romo.append(this.elemWrapper, romoOptionListDropdownElem);
+  Romo.parentChildElems.add(this.elem, [this.elemWrapper]);
+
+  this.caretElem = undefined;
+  var caretClass = Romo.data(this.elem, 'romo-picker-caret') || this.defaultCaretClass;
   if (caretClass !== undefined && caretClass !== 'none') {
-    this.caretElem = $('<i class="romo-picker-caret '+caretClass+'"></i>');
-    this.caretElem.css('line-height', parseInt(Romo.getComputedStyle(romoOptionListDropdownElem[0], "line-height"), 10)+'px');
-    this.caretElem.on('click', $.proxy(this._onCaretClick, this));
-    romoOptionListDropdownElem.append(this.caretElem);
+    this.caretElem = Romo.elems('<i class="romo-picker-caret '+caretClass+'"></i>')[0];
+    Romo.setStyle(this.caretElem, 'line-height', parseInt(Romo.css(romoOptionListDropdownElem, "line-height"), 10)+'px');
+    Romo.on(this.caretElem, 'click', Romo.proxy(this._onCaretClick, this));
+    Romo.append(romoOptionListDropdownElem, this.caretElem);
 
     var caretPaddingPx = this._getCaretPaddingPx();
     var caretWidthPx   = this._getCaretWidthPx();
     var caretPosition  = this._getCaretPosition();
 
     // add a pixel to account for the default input border
-    this.caretElem.css(caretPosition, caretPaddingPx+1);
+    Romo.setStyle(this.caretElem, caretPosition, caretPaddingPx+1+'px');
 
     // left-side padding
     // + caret width
     // + right-side padding
     var dropdownPaddingPx = caretPaddingPx + caretWidthPx + caretPaddingPx;
-    romoOptionListDropdownElem.css('padding-'+caretPosition, dropdownPaddingPx+'px');
+    Romo.setStyle(romoOptionListDropdownElem, 'padding-'+caretPosition, dropdownPaddingPx+'px');
   }
 
   return romoOptionListDropdownElem;
 }
 
 RomoPicker.prototype._bindAjax = function() {
-  this.elem.attr('data-romo-ajax-disable-default-invoke-on', true);
-  this.elem.attr('data-romo-ajax-url-attr', 'data-romo-picker-url');
-  this.elem.attr('data-romo-ajax-auto', false);
+  Romo.setData(this.elem, 'romo-ajax-disable-default-invoke-on', true);
+  Romo.setData(this.elem, 'romo-ajax-url-attr', 'data-romo-picker-url');
+  Romo.setData(this.elem, 'romo-ajax-auto', false);
 
-  this.elem.on('romoAjax:callStart', $.proxy(function(e, data, romoAjax) {
-    this.romoOptionListDropdown.elem.trigger('romoOptionListDropdown:triggerFilterIndicatorStart', []);
+  Romo.on(this.elem, 'romoAjax:callStart', Romo.proxy(function(e, data, romoAjax) {
+    Romo.trigger(this.romoOptionListDropdown.elem, 'romoOptionListDropdown:triggerFilterSpinnerStart', []);
     return false;
   }, this));
-  this.elem.on('romoAjax:callSuccess', $.proxy(function(e, data, romoAjax) {
-    this.filteredOptionItems = data;
+  Romo.on(this.elem, 'romoAjax:callSuccess', Romo.proxy(function(e, data, romoAjax) {
+    this.filteredOptionItems = JSON.parse(data);
     this._setListItems(this.filteredOptionItems.concat(this._buildCustomOptionItems()));
-    this.romoOptionListDropdown.elem.trigger('romoOptionListDropdown:triggerFilterIndicatorStop', []);
+    Romo.trigger(this.romoOptionListDropdown.elem, 'romoOptionListDropdown:triggerFilterSpinnerStop', []);
     return false;
   }, this));
-  this.elem.on('romoAjax:callError', $.proxy(function(e, xhr, romoAjax) {
+  Romo.on(this.elem, 'romoAjax:callError', Romo.proxy(function(e, xhr, romoAjax) {
     this._setListItems(this.defaultOptionItems.concat(this._buildCustomOptionItems()));
-    this.romoOptionListDropdown.elem.trigger('romoOptionListDropdown:triggerFilterIndicatorStop', []);
+    Romo.trigger(this.romoOptionListDropdown.elem, 'romoOptionListDropdown:triggerFilterSpinnerStop', []);
     return false;
   }, this));
 
-  this.elem.romoAjax();
+  this.romoAjax = new RomoAjax(this.elem);
 }
 
 RomoPicker.prototype._setListItems = function(items) {
   this.romoOptionListDropdown.doSetListItems(items);
-  this.romoOptionListDropdown.elem.trigger('romoOptionListDropdown:triggerListOptionsUpdate', [this.romoOptionListDropdown.optItemElems().first()]);
+  Romo.trigger(this.romoOptionListDropdown.elem, 'romoOptionListDropdown:triggerListOptionsUpdate', [this.romoOptionListDropdown.optItemElems()[0]]);
 }
 
 RomoPicker.prototype._buildDefaultOptionItems = function() {
   var items = []
 
-  if (this.elem.data('romo-picker-empty-option') === true) {
+  if (Romo.data(this.elem, 'romo-picker-empty-option') === true) {
     items.push({
       'type':        'option',
       'value':       '',
-      'displayText': (this.elem.data('romo-picker-empty-option-display-text') || ''),
-      'displayHtml': '&nbsp;'
+      'displayText': (Romo.data(this.elem, 'romo-picker-empty-option-display-text') || ''),
+      'displayHtml': '<span>&nbsp;</span>'
     });
   }
 
@@ -318,8 +307,8 @@ RomoPicker.prototype._buildCustomOptionItems = function() {
   var items = [];
 
   var value = this.romoOptionListDropdown.optionFilterValue();
-  if (value !== '' && this.elem.data('romo-picker-custom-option') === true) {
-    var prompt = this.elem.data('romo-picker-custom-option-prompt');
+  if (value !== '' && Romo.data(this.elem, 'romo-picker-custom-option') === true) {
+    var prompt = Romo.data(this.elem, 'romo-picker-custom-option-prompt');
     if (prompt !== undefined) {
       items.push({
         'type':  'optgroup',
@@ -344,65 +333,70 @@ RomoPicker.prototype._buildCustomOptionItem = function(value) {
 }
 
 RomoPicker.prototype._setValuesAndDisplayText = function(newValues, displayText) {
-  this.elem[0].value = newValues.join(this._elemValuesDelim());
-
-  // store the display text on the DOM to compliment the value being stored on the
-  // DOM via the elem above.  need to use `attr` to persist selected values to the
-  // DOM for back button logic to work.  using `data` won't persist changes to DOM
-  // and breaks how the component deals with back-button behavior.
-  this.elem.attr('data-romo-picker-display-text', displayText);
+  this.elem.value = newValues.join(this._elemValuesDelim());
+  Romo.setData(this.elem, 'romo-picker-display-text', displayText);
 }
 
 RomoPicker.prototype._elemValues = function() {
-  return this.elem[0].value.split(this._elemValuesDelim()).filter(function(v){ return v !== ''; });
+  return this.elem.value.split(this._elemValuesDelim()).filter(function(v){ return v !== ''; });
 }
 
 RomoPicker.prototype._elemValuesDelim = function() {
-  return this.elem.data('romo-picker-values-delim') || this.defaultValuesDelim;
+  return Romo.data(this.elem, 'romo-picker-values-delim') || this.defaultValuesDelim;
 }
 
 RomoPicker.prototype._refreshUI = function() {
-  // need to use `attr` so it will always read from the DOM
-  // using `data` works the first time but does some elem caching or something
-  // so it won't work subsequent times.
-  var text = this.elem.attr('data-romo-picker-display-text');
+  var text = Romo.data(this.elem, 'romo-picker-display-text') || '';
   if (this.romoSelectedOptionsList !== undefined) {
     this.romoSelectedOptionsList.doRefreshUI();
   }
-  if (text === '') {
-    text = '&nbsp;'
-  }
-  this.romoOptionListDropdown.elem.find('.romo-picker-text').html(text);
-}
 
-RomoPicker.prototype._onCaretClick = function(e) {
-  if (this.elem.prop('disabled') === false) {
-    this.romoOptionListDropdown.doFocus();
-    this.elem.trigger('romoPicker:triggerPopupOpen');
+  var textElem = Romo.find(this.romoOptionListDropdown.elem, '.romo-picker-text')[0];
+  if (text === '') {
+    Romo.updateHtml(textElem, '<span>&nbsp;</span>');
+  } else {
+    Romo.updateText(textElem, text);
   }
 }
 
 RomoPicker.prototype._getCaretPaddingPx = function() {
   return (
-    this.elem.data('romo-picker-caret-padding-px') ||
+    Romo.data(this.elem, 'romo-picker-caret-padding-px') ||
     this.defaultCaretPaddingPx
   );
 }
 
 RomoPicker.prototype._getCaretWidthPx = function() {
   return (
-    this.elem.data('romo-picker-caret-width-px') ||
-    parseInt(Romo.getComputedStyle(this.caretElem[0], "width"), 10)
+    Romo.data(this.elem, 'romo-picker-caret-width-px') ||
+    this._parseCaretWidthPx()
   );
 }
 
 RomoPicker.prototype._getCaretPosition = function() {
   return (
-    this.elem.data('romo-picker-caret-position') ||
+    Romo.data(this.elem, 'romo-picker-caret-position') ||
     this.defaultCaretPosition
   );
 }
 
-Romo.onInitUI(function(e) {
-  Romo.initUIElems(e, '[data-romo-picker-auto="true"]').romoPicker();
-});
+RomoPicker.prototype._parseCaretWidthPx = function() {
+  var widthPx = parseInt(Romo.css(this.caretElem, "width"), 10);
+  if (isNaN(widthPx)) {
+    widthPx = this.defaultCaretWidthPx;
+  }
+  return widthPx;
+}
+
+// event functions
+
+RomoPicker.prototype.romoEvFn._onCaretClick = function(e) {
+  if (this.elem.disabled === false) {
+    this.romoOptionListDropdown.doFocus();
+    Romo.trigger(this.elem, 'romoPicker:triggerPopupOpen');
+  }
+}
+
+// init
+
+Romo.addElemsInitSelector('[data-romo-picker-auto="true"]', RomoPicker);