romo 0.19.10 → 0.20.0

data/assets/js/romo/select_dropdown.js

@@ -1,27 +1,15 @@
-$.fn.romoSelectDropdown = function(optionElemsParent) {
-  return $.map(this, function(element) {
-    return new RomoSelectDropdown(element, optionElemsParent);
-  });
-}
-
-var RomoSelectDropdown = function(element, optionElemsParent) {
-  this.elem = $(element);
+var RomoSelectDropdown = RomoComponent(function(elem, optionElemsParentElem) {
+  this.elem = elem;
 
-  this.filterHiddenClass  = 'romo-select-filter-hidden';
-  this.optionElemSelector = ':not(.'+this.filterHiddenClass+')';
-  this.optionElemsParent  = (optionElemsParent || this.elem.find('.romo-select-dropdown-options-parent'));
+  this.filterHiddenClass     = 'romo-select-filter-hidden';
+  this.optionElemSelector    = ':not(.'+this.filterHiddenClass+')';
+  this.optionElemsParentElem = (optionElemsParentElem || Romo.find(this.elem, '.romo-select-dropdown-options-parent')[0]);
 
   this.doInit();
   this._bindElem();
 
-  if (this.elem.attr('id') !== undefined) {
-    $('label[for="'+this.elem.attr('id')+'"]').on('click', $.proxy(function(e) {
-      this.elem.focus();
-    }, this));
-  }
-
-  this.elem.trigger('selectDropdown:ready', [this]);
-}
+  Romo.trigger(this.elem, 'romoSelectDropdown:ready', [this]);
+});
 
 RomoSelectDropdown.prototype.bodyElem = function() {
   return this.romoOptionListDropdown.bodyElem();
@@ -63,10 +51,6 @@ RomoSelectDropdown.prototype.optgroupItemElems = function() {
   return this.romoOptionListDropdown.optgroupItemElems();
 }
 
-RomoSelectDropdown.prototype.doInit = function() {
-  // override as needed
-}
-
 RomoSelectDropdown.prototype.doSetSelectedItem = function(newValue) {
   this.romoOptionListDropdown.doSetSelectedItem(newValue);
 }
@@ -75,111 +59,118 @@ RomoSelectDropdown.prototype.doFocus = function(openOnFocus) {
   this.romoOptionListDropdown.doFocus(openOnFocus);
 }
 
-/* private */
+// private
 
 RomoSelectDropdown.prototype._bindElem = function() {
-  this.elem.attr('data-romo-option-list-focus-style-class', 'romo-select-focus');
+  Romo.setData(this.elem, 'romo-option-list-focus-style-class', 'romo-select-focus');
 
-  if (this.elem.data('romo-select-dropdown-no-filter') !== undefined) {
-    this.elem.attr('data-romo-option-list-dropdown-no-filter', this.elem.data('romo-select-dropdown-no-filter'));
+  if (Romo.data(this.elem, 'romo-select-dropdown-no-filter') !== undefined) {
+    Romo.setData(this.elem, 'romo-option-list-dropdown-no-filter', Romo.data(this.elem, 'romo-select-dropdown-no-filter'));
   }
-  if (this.elem.data('romo-select-dropdown-filter-placeholder') !== undefined) {
-    this.elem.attr('data-romo-option-list-dropdown-filter-placeholder', this.elem.data('romo-select-dropdown-filter-placeholder'));
+  if (Romo.data(this.elem, 'romo-select-dropdown-filter-placeholder') !== undefined) {
+    Romo.setData(this.elem, 'romo-option-list-dropdown-filter-placeholder', Romo.data(this.elem, 'romo-select-dropdown-filter-placeholder'));
   }
-  if (this.elem.data('romo-select-dropdown-filter-indicator') !== undefined) {
-    this.elem.attr('data-romo-option-list-dropdown-filter-indicator', this.elem.data('romo-select-dropdown-filter-indicator'));
+  if (Romo.data(this.elem, 'romo-select-dropdown-filter-indicator') !== undefined) {
+    Romo.setData(this.elem, 'romo-option-list-dropdown-filter-indicator', Romo.data(this.elem, 'romo-select-dropdown-filter-indicator'));
   }
-  if (this.elem.data('romo-select-dropdown-filter-indicator-width-px') !== undefined) {
-    this.elem.attr('data-romo-option-list-dropdown-filter-indicator-width-px', this.elem.data('romo-select-dropdown-filter-indicator-width-px'));
+  if (Romo.data(this.elem, 'romo-select-dropdown-filter-indicator-width-px') !== undefined) {
+    Romo.setData(this.elem, 'romo-option-list-dropdown-filter-indicator-width-px', Romo.data(this.elem, 'romo-select-dropdown-filter-indicator-width-px'));
   }
-  if (this.elem.data('romo-select-dropdown-open-on-focus') !== undefined) {
-    this.elem.attr('data-romo-option-list-dropdown-open-on-focus', this.elem.data('romo-select-dropdown-open-on-focus'));
+  if (Romo.data(this.elem, 'romo-select-dropdown-open-on-focus') !== undefined) {
+    Romo.setData(this.elem, 'romo-option-list-dropdown-open-on-focus', Romo.data(this.elem, 'romo-select-dropdown-open-on-focus'));
   }
 
-  this.elem.on('romoOptionListDropdown:dropdown:toggle', $.proxy(function(e, dropdown) {
-    this.elem.trigger('selectDropdown:dropdown:toggle', [dropdown, this]);
+  Romo.on(this.elem, 'romoOptionListDropdown:romoDropdown:toggle', Romo.proxy(function(e, romoDropdown) {
+    Romo.trigger(this.elem, 'romoSelectDropdown:romoDropdown:toggle', [romoDropdown, this]);
   }, this));
-  this.elem.on('romoOptionListDropdown:dropdown:popupOpen', $.proxy(function(e, dropdown) {
-    this.elem.trigger('selectDropdown:dropdown:popupOpen', [dropdown, this]);
+  Romo.on(this.elem, 'romoOptionListDropdown:romoDropdown:popupOpen', Romo.proxy(function(e, romoDropdown) {
+    Romo.trigger(this.elem, 'romoSelectDropdown:romoDropdown:popupOpen', [romoDropdown, this]);
   }, this));
-  this.elem.on('romoOptionListDropdown:dropdown:popupClose', $.proxy(function(e, dropdown) {
-    this.elem.trigger('selectDropdown:dropdown:popupClose', [dropdown, this]);
+  Romo.on(this.elem, 'romoOptionListDropdown:romoDropdown:popupClose', Romo.proxy(function(e, romoDropdown) {
+    Romo.trigger(this.elem, 'romoSelectDropdown:romoDropdown:popupClose', [romoDropdown, this]);
   }, this));
-  this.elem.on('romoOptionListDropdown:itemSelected', $.proxy(function(e, itemValue, itemDisplayText, romoOptionListDropdown) {
-    this.elem.trigger('selectDropdown:itemSelected', [itemValue, itemDisplayText, this]);
+  Romo.on(this.elem, 'romoOptionListDropdown:itemSelected', Romo.proxy(function(e, itemValue, itemDisplayText, romoOptionListDropdown) {
+    Romo.trigger(this.elem, 'romoSelectDropdown:itemSelected', [itemValue, itemDisplayText, this]);
   }, this));
-  this.elem.on('romoOptionListDropdown:newItemSelected', $.proxy(function(e, itemValue, itemDisplayText, romoOptionListDropdown) {
-    var custOptElem = this.optionElemsParent.find('OPTION[data-romo-select-dropdown-custom-option="true"]');
-    if (this.optionElemsParent.find('OPTION[value="'+itemValue+'"]').length === 0){
+  Romo.on(this.elem, 'romoOptionListDropdown:newItemSelected', Romo.proxy(function(e, itemValue, itemDisplayText, romoOptionListDropdown) {
+    var custOptElem = Romo.find(this.optionElemsParentElem, 'OPTION[data-romo-select-dropdown-custom-option="true"]')[0];
+    if (Romo.find(this.optionElemsParentElem, 'OPTION[value="'+itemValue+'"]').length === 0){
       // a custom value is being selected. add a custom option elem and update its value/text
-      if (custOptElem.length === 0) {
-        this.optionElemsParent.append('<option data-romo-select-dropdown-custom-option="true"></option>');
-        custOptElem = this.optionElemsParent.find('OPTION[data-romo-select-dropdown-custom-option="true"]');
+      if (custOptElem === undefined) {
+        Romo.appendHtml(this.optionElemsParentElem, '<option data-romo-select-dropdown-custom-option="true"></option>');
+        custOptElem = Romo.find(this.optionElemsParentElem, 'OPTION[data-romo-select-dropdown-custom-option="true"]')[0];
       }
-      custOptElem.attr('value', itemValue);
-      custOptElem.text(itemDisplayText);
-    } else if (custOptElem.length !== 0) {
+      Romo.setAttr(custOptElem, 'value', itemValue);
+      Romo.updateText(custOptElem,  itemDisplayText);
+    } else if (custOptElem !== undefined) {
       // a non custom value is being selected. remove any existing custom option
-      custOptElem.remove();
+      Romo.remove(custOptElem);
     }
-    this.elem.trigger('selectDropdown:newItemSelected', [itemValue, itemDisplayText, this]);
+    Romo.trigger(this.elem, 'romoSelectDropdown:newItemSelected', [itemValue, itemDisplayText, this]);
   }, this));
-  this.elem.on('romoOptionListDropdown:change', $.proxy(function(e, newValue, prevValue, romoOptionListDropdown) {
-    this.elem.trigger('selectDropdown:change', [newValue, prevValue, this]);
+  Romo.on(this.elem, 'romoOptionListDropdown:change', Romo.proxy(function(e, newValue, prevValue, romoOptionListDropdown) {
+    Romo.trigger(this.elem, 'romoSelectDropdown:change', [newValue, prevValue, this]);
   }, this));
 
 
-  this.elem.on('selectDropdown:triggerToggle', $.proxy(function(e) {
-    this.elem.trigger('romoOptionListDropdown:triggerToggle', []);
+  Romo.on(this.elem, 'romoSelectDropdown:triggerToggle', Romo.proxy(function(e) {
+    Romo.trigger(this.elem, 'romoOptionListDropdown:triggerToggle', []);
   }, this));
-  this.elem.on('selectDropdown:triggerPopupOpen', $.proxy(function(e) {
-    this.elem.trigger('romoOptionListDropdown:triggerPopupOpen', []);
+  Romo.on(this.elem, 'romoSelectDropdown:triggerPopupOpen', Romo.proxy(function(e) {
+    Romo.trigger(this.elem, 'romoOptionListDropdown:triggerPopupOpen', []);
   }, this));
-  this.elem.on('selectDropdown:triggerPopupClose', $.proxy(function(e) {
-    this.elem.trigger('romoOptionListDropdown:triggerPopupClose', []);
+  Romo.on(this.elem, 'romoSelectDropdown:triggerPopupClose', Romo.proxy(function(e) {
+    Romo.trigger(this.elem, 'romoOptionListDropdown:triggerPopupClose', []);
   }, this));
 
-  this.romoOptionListDropdown = this.elem.romoOptionListDropdown()[0];
+  this.romoOptionListDropdown = new RomoOptionListDropdown(this.elem);
 
-  this.elem.on('romoOptionListDropdown:filterChange', $.proxy(function(e, filterValue, romoOptionListDropdown) {
-    var elems    = this.optionElemsParent.find('OPTION');
+  Romo.on(this.elem, 'romoOptionListDropdown:filterChange', Romo.proxy(function(e, filterValue, romoOptionListDropdown) {
+    var elems    = Romo.find(this.optionElemsParentElem, 'OPTION');
     var wbFilter = new RomoWordBoundaryFilter(filterValue, elems, function(elem) {
       // The romo word boundary filter by default considers a space, "-" and "_"
       // as word boundaries.  We want to also consider other non-word characters
       // (such as ":", "/", ".", "?", "=", "&") as word boundaries as well.
-      return elem[0].textContent.replace(/\W/g, ' ');
+      return elem.textContent.replace(/\W/g, ' ');
     });
 
-    wbFilter.matchingElems.removeClass(this.filterHiddenClass);
-    wbFilter.notMatchingElems.addClass(this.filterHiddenClass);
+    Romo.removeClass(wbFilter.matchingElems, this.filterHiddenClass);
+    Romo.addClass(wbFilter.notMatchingElems, this.filterHiddenClass);
     this._setListItems();
 
     if (filterValue !== '') {
-      this.romoOptionListDropdown.elem.trigger('romoOptionListDropdown:triggerListOptionsUpdate', [this.optItemElems().first()]);
+      Romo.trigger(this.romoOptionListDropdown.elem, 'romoOptionListDropdown:triggerListOptionsUpdate', [this.optItemElems()[0]]);
     } else {
-      this.elem.trigger('romoOptionListDropdown:triggerListOptionsUpdate', [this.selectedItemElem()]);
+      Romo.trigger(this.elem, 'romoOptionListDropdown:triggerListOptionsUpdate', [this.selectedItemElem()]);
     }
   }, this));
 
   this._sanitizeOptions();
   this._setListItems();
-  this.elem.trigger('romoOptionListDropdown:triggerListOptionsUpdate', [this.selectedItemElem()]);
+  Romo.trigger(this.elem, 'romoOptionListDropdown:triggerListOptionsUpdate', [this.selectedItemElem()]);
+
+  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.elem.focus();
+    }, this));
+  }
 }
 
 RomoSelectDropdown.prototype._sanitizeOptions = function() {
   // set any options without a value to value=""
   // all options are required to have a value for things to work
   // this and the select component assume value attrs for all options
-  $.each(this.optionElemsParent.find('OPTION'), $.proxy(function(idx, optionNode) {
-    var optElem = $(optionNode);
-    if (optElem.attr('value') === undefined) {
-      optElem.attr('value', '');
+  Romo.find(this.optionElemsParentElem, 'OPTION').forEach(Romo.proxy(function(optElem) {
+    if (Romo.attr(optElem, 'value') === undefined) {
+      Romo.setAttr(optElem, 'value', '');
     }
   }, this));
 }
 
 RomoSelectDropdown.prototype._setListItems = function() {
-  var optElems = this.optionElemsParent.children(this.optionElemSelector);
+  var optElems = Romo.children(this.optionElemsParentElem, this.optionElemSelector);
   var items    = this._buildOptionListItems(optElems).concat(this._buildCustomOptionItems());
   this.romoOptionListDropdown.doSetListItems(items);
 }
@@ -187,11 +178,11 @@ RomoSelectDropdown.prototype._setListItems = function() {
 RomoSelectDropdown.prototype._buildOptionListItems = function(optionElems) {
   var list = [];
 
-  $.each(optionElems, $.proxy(function(idx, optionNode) {
-    if (optionNode.tagName === "OPTION") {
-      list.push(this._buildOptionItem($(optionNode)));
-    } else if (optionNode.tagName === "OPTGROUP") {
-      var optGroupItem = this._buildOptGroupItem($(optionNode));
+  optionElems.forEach(Romo.proxy(function(optElem) {
+    if (optElem.tagName === "OPTION") {
+      list.push(this._buildOptionItem(optElem));
+    } else if (optElem.tagName === "OPTGROUP") {
+      var optGroupItem = this._buildOptGroupItem(optElem);
       if (optGroupItem.items.length !== 0) {
         list.push(optGroupItem);
       }
@@ -205,14 +196,14 @@ RomoSelectDropdown.prototype._buildOptionItem = function(optionElem) {
   var item = {}
 
   item['type']        = 'option';
-  item['value']       = (optionElem.attr('value') || '');
-  item['displayText'] = (optionElem.text().trim() || '');
-  item['displayHtml'] = (optionElem.text().trim() || '&nbsp;');
+  item['value']       = (Romo.attr(optionElem, 'value') || '');
+  item['displayText'] = (optionElem.innerText.trim() || '');
+  item['displayHtml'] = (optionElem.innerText.trim() || '<span>&nbsp;</span>');
 
-  if (optionElem.prop('selected')) {
+  if (optionElem.selected) {
     item['selected'] = true;
   }
-  if (optionElem.attr('disabled') !== undefined) {
+  if (Romo.attr(optionElem, 'disabled') !== undefined) {
     item['disabled'] = true;
   }
 
@@ -223,8 +214,8 @@ RomoSelectDropdown.prototype._buildOptGroupItem = function(optGroupElem) {
   var item = {};
 
   item['type']  = 'optgroup';
-  item['label'] = optGroupElem.attr('label');
-  item['items'] = this._buildOptionListItems(optGroupElem.children(this.optionElemSelector));
+  item['label'] = Romo.attr(optGroupElem, 'label');
+  item['items'] = this._buildOptionListItems(Romo.children(optGroupElem, this.optionElemSelector));
 
   return item;
 }
@@ -233,8 +224,8 @@ RomoSelectDropdown.prototype._buildCustomOptionItems = function() {
   var items = [];
 
   var value = this.romoOptionListDropdown.optionFilterValue();
-  if (value !== '' && this.elem.data('romo-select-dropdown-custom-option') === true) {
-    var prompt = this.elem.data('romo-select-dropdown-custom-option-prompt');
+  if (value !== '' && Romo.data(this.elem, 'romo-select-dropdown-custom-option') === true) {
+    var prompt = Romo.data(this.elem, 'romo-select-dropdown-custom-option-prompt');
     if (prompt !== undefined) {
       items.push({
         'type':  'optgroup',
@@ -258,6 +249,8 @@ RomoSelectDropdown.prototype._buildCustomOptionItem = function(value) {
   };
 }
 
-Romo.onInitUI(function(e) {
-  Romo.initUIElems(e, '[data-romo-select-dropdown-auto="true"]').romoSelectDropdown();
-});
+// event functions
+
+// init
+
+Romo.addElemsInitSelector('[data-romo-select-dropdown-auto="true"]', RomoSelectDropdown);

data/assets/js/romo/selected_options_list.js

@@ -1,4 +1,4 @@
-var RomoSelectedOptionsList = function(focusElem) {
+var RomoSelectedOptionsList = RomoComponent(function(focusElem) {
   this.elem      = undefined;
   this.focusElem = focusElem; // picker/select dropdown elem
 
@@ -6,11 +6,7 @@ var RomoSelectedOptionsList = function(focusElem) {
 
   this.doInit();
   this._bindElem();
-}
-
-RomoSelectedOptionsList.prototype.doInit = function() {
-  // override as needed
-}
+});
 
 /*
 Options are specified as a list of items.  Each 'option' item object
@@ -47,87 +43,79 @@ RomoSelectedOptionsList.prototype.doRemoveItem = function(itemValue) {
 
 RomoSelectedOptionsList.prototype.doRefreshUI = function() {
   var itemValues  = this._getItemValues();
-  var uiListElem  = this.elem.find('.romo-selected-options-list-items');
-  var uiItemElems = uiListElem.find('.romo-selected-options-list-item');
-  var uiValues    = uiItemElems.get().map(function(uiItemNode) {
-    return $(uiItemNode).data('romo-selected-options-list-value');
-  });
-  var rmNodes = uiItemElems.get().filter(function(uiItemNode) {
-     return itemValues.indexOf($(uiItemNode).data('romo-selected-options-list-value')) === -1;
+  var uiListElem  = Romo.find(this.elem, '.romo-selected-options-list-items')[0];
+  var uiItemElems = Romo.find(uiListElem, '.romo-selected-options-list-item');
+  var uiValues    = uiItemElems.map(Romo.proxy(function(uiItemElem) {
+    return Romo.data(uiItemElem, 'romo-selected-options-list-value');
+  }, this), []);
+  var rmElems = uiItemElems.filter(function(uiItemElem) {
+     return itemValues.indexOf(Romo.data(uiItemElem, 'romo-selected-options-list-value')) === -1;
    });
   var addItems = this.items.filter(function(item) {
     return uiValues.indexOf(item.value) === -1;
   });
-  rmNodes.forEach($.proxy(function(rmNode) {
-    $(rmNode).remove();
-  }, this));
-  addItems.forEach($.proxy(function(addItem) {
+  Romo.remove(rmElems);
+  addItems.forEach(Romo.proxy(function(addItem) {
     var addElem = this._buildItemElem(addItem);
     uiListElem.append(addElem);
 
-    var listWidth       = parseInt(Romo.getComputedStyle(uiListElem[0], "width"), 10);
-    var listLeftPad     = parseInt(Romo.getComputedStyle(uiListElem[0], "padding-left"), 10);
-    var listRightPad    = parseInt(Romo.getComputedStyle(uiListElem[0], "padding-right"), 10);
+    var listWidth       = parseInt(Romo.css(uiListElem, "width"), 10);
+    var listLeftPad     = parseInt(Romo.css(uiListElem, "padding-left"), 10);
+    var listRightPad    = parseInt(Romo.css(uiListElem, "padding-right"), 10);
     var itemBorderWidth = 1;
-    var itemLeftPad     = parseInt(Romo.getComputedStyle(addElem[0], "padding-left"), 10);
-    var itemRightPad    = parseInt(Romo.getComputedStyle(addElem[0], "padding-right"), 10);
-    addElem.find('DIV').css('max-width', String(listWidth-listLeftPad-listRightPad-(2*itemBorderWidth)-itemLeftPad-itemRightPad)+'px');
+    var itemLeftPad     = parseInt(Romo.css(addElem, "padding-left"), 10);
+    var itemRightPad    = parseInt(Romo.css(addElem, "padding-right"), 10);
+    Romo.setStyle(Romo.find(addElem, 'DIV')[0], 'max-width', String(listWidth-listLeftPad-listRightPad-(2*itemBorderWidth)-itemLeftPad-itemRightPad)+'px');
   }, this));
 
-  var focusElemWidth = parseInt(Romo.getComputedStyle(this.focusElem[0], "width"), 10);
-  this.elem.css('width', String(focusElemWidth)+'px');
+  var focusElemWidth = parseInt(Romo.css(this.focusElem, "width"), 10);
+  Romo.setStyle(this.elem, 'width', String(focusElemWidth)+'px');
 
-  var maxRows          = undefined;
-  var uiListElemHeight = parseInt(Romo.getComputedStyle(uiListElem[0], "height"), 10);
-  var firstItemNode    = uiListElem.find('.romo-selected-options-list-item')[0];
-  if (firstItemNode !== undefined) {
-    var itemHeight       = parseInt(Romo.getComputedStyle(firstItemNode, "height"), 10);
-    var itemMarginBottom = parseInt(Romo.getComputedStyle(firstItemNode, "margin-bottom"), 10);
+  var maxRows           = undefined;
+  var uiListElemHeight  = parseInt(Romo.css(uiListElem, "height"), 10);
+  var firstItemElem = Romo.find(uiListElem, '.romo-selected-options-list-item')[0];
+  if (firstItemElem !== undefined) {
+    var itemHeight       = parseInt(Romo.css(firstItemElem, "height"), 10);
+    var itemMarginBottom = parseInt(Romo.css(firstItemElem, "margin-bottom"), 10);
     var itemBorderWidth  = 1;
-    var listTopPad       = parseInt(Romo.getComputedStyle(uiListElem[0], "padding-top"), 10);
-    var listBottomPad    = parseInt(Romo.getComputedStyle(uiListElem[0], "padding-bottom"), 10);
+    var listTopPad       = parseInt(Romo.css(uiListElem, "padding-top"), 10);
+    var listBottomPad    = parseInt(Romo.css(uiListElem, "padding-bottom"), 10);
 
-    var maxRows   = this.focusElem.data('romo-selected-options-list-max-rows') || 0;
+    var maxRows   = Romo.data(this.focusElem, 'romo-selected-options-list-max-rows') || 0;
     var maxHeight = listTopPad+(itemHeight*maxRows)+(itemMarginBottom*(maxRows-1))+(2*itemBorderWidth*maxRows)+listBottomPad+(itemHeight/2);
   }
   if (maxRows !== 0 && (uiListElemHeight > maxHeight)) {
-    this.elem.css({
-      'height':     String(maxHeight)+'px',
-      'overflow-y': 'auto'
-    });
-    var itemElems    = uiListElem.find('.romo-selected-options-list-item');
-    var lastItemNode = itemElems[itemElems.length-1];
-    this._scrollListTopToItem($(lastItemNode));
+    Romo.setStyle(this.elem, 'height',     String(maxHeight)+'px');
+    Romo.setStyle(this.elem, 'overflow-y', 'auto');
+
+    var itemElems    = Romo.find(uiListElem, '.romo-selected-options-list-item');
+    var lastItemElem = itemElems[itemElems.length-1];
+    this._scrollListTopToItem(lastItemElem);
   } else {
-    this.elem.css({
-      'height':     String(uiListElemHeight)+'px',
-      'overflow-y': undefined
-    });
+    Romo.setStyle(this.elem, 'height', String(uiListElemHeight)+'px');
+    Romo.rmStyle(this.elem, 'overflow-y');
   }
 }
 
-/* private */
+// private
 
 RomoSelectedOptionsList.prototype._bindElem = function() {
-  this.elem = $('<div class="romo-selected-options-list"><div class="romo-selected-options-list-items"></div></div>');
-
-  this.elem.on('click', $.proxy(function(e) {
-    if (e !== undefined) {
-      e.stopPropagation();
-      e.preventDefault();
-    }
-    this.elem.trigger('romoSelectedOptionsList:listClick', [this]);
+  this.elem = Romo.elems('<div class="romo-selected-options-list"><div class="romo-selected-options-list-items"></div></div>')[0];
+
+  Romo.on(this.elem, 'click', Romo.proxy(function(e) {
+    Romo.trigger(this.elem, 'romoSelectedOptionsList:listClick', [this]);
+    return false;
   }, this));
 
   this.doSetItems([]);
 }
 
 RomoSelectedOptionsList.prototype._buildItemElem = function(item) {
-  var itemClass = this.focusElem.data('romo-selected-options-list-item-class') || '';
-  var itemElem  = $('<div class="romo-selected-options-list-item romo-pointer romo-pad0-left romo-pad0-right romo-push0-right romo-push0-bottom '+itemClass+'"></div>');
-  itemElem.append($('<div class="romo-crop-ellipsis romo-text-strikethrough-hover">'+(item.displayText || '')+'</div>'));
-  itemElem.attr('data-romo-selected-options-list-value', (item.value || ''));
-  itemElem.on('click', $.proxy(this._onItemClick, this));
+  var itemClass = Romo.data(this.focusElem, 'romo-selected-options-list-item-class') || '';
+  var itemElem  = Romo.elems('<div class="romo-selected-options-list-item romo-pointer romo-pad0-left romo-pad0-right romo-push0-right romo-push0-bottom '+itemClass+'"></div>')[0];
+  Romo.append(itemElem, Romo.elems('<div class="romo-crop-ellipsis romo-text-strikethrough-hover">'+(item.displayText || '')+'</div>')[0]);
+  Romo.setData(itemElem, 'romo-selected-options-list-value', (item.value || ''));
+  Romo.on(itemElem, 'click', Romo.proxy(this._onItemClick, this));
 
   return itemElem;
 }
@@ -136,26 +124,28 @@ RomoSelectedOptionsList.prototype._getItemValues = function() {
   return this.items.map(function(item) { return item.value; });
 }
 
-RomoSelectedOptionsList.prototype._onItemClick = function(e) {
-  var itemElem = $(e.target);
-  if (!itemElem.hasClass('romo-selected-options-list-item')) {
-    var itemElem = itemElem.closest('.romo-selected-options-list-item');
-  }
-  if (itemElem[0] !== undefined) {
-    var value = itemElem.data('romo-selected-options-list-value');
-    this.elem.trigger('romoSelectedOptionsList:itemClick', [value, this]);
+RomoSelectedOptionsList.prototype._scrollListTopToItem = function(itemElem) {
+  if (itemElem !== undefined) {
+    var scrollElem = this.elem;
+    scrollElem.scrollTop = 0;
+
+    var scrollOffsetTop = Romo.offset(scrollElem).top;
+    var selOffsetTop    = Romo.offset(itemElem).top;
+    var selOffset       = parseInt(Romo.css(itemElem, 'height'), 10) / 2;
+
+    scrollElem.scrollTop = selOffsetTop - scrollOffsetTop - selOffset;
   }
 }
 
-RomoSelectedOptionsList.prototype._scrollListTopToItem = function(itemElem) {
-  if (itemElem[0] !== undefined) {
-    var scroll = this.elem;
-    scroll.scrollTop(0);
-
-    var scrollOffsetTop = scroll.offset().top;
-    var selOffsetTop    = itemElem.offset().top;
-    var selOffset       = itemElem.height() / 2;
+// event functions
 
-    scroll.scrollTop(selOffsetTop - scrollOffsetTop - selOffset);
+RomoSelectedOptionsList.prototype.romoEvFn._onItemClick = function(e) {
+  var itemElem = e.target;
+  if (!Romo.hasClass(itemElem, 'romo-selected-options-list-item')) {
+    var itemElem = Romo.closest(itemElem, '.romo-selected-options-list-item');
+  }
+  if (itemElem !== undefined) {
+    var value = Romo.data(itemElem, 'romo-selected-options-list-value');
+    Romo.trigger(this.elem, 'romoSelectedOptionsList:itemClick', [value, this]);
   }
 }