assets/js/romo/select_dropdown.js in romo-0.19.4 vs assets/js/romo/select_dropdown.js in romo-0.19.5

@@ -5,15 +5,14 @@
 }
 
 var RomoSelectDropdown = function(element, optionElemsParent) {
   this.elem = $(element);
 
-  this.filterHiddenClass = 'romo-select-filter-hidden';
+  this.filterHiddenClass  = 'romo-select-filter-hidden';
+  this.optionElemSelector = ':not(.'+this.filterHiddenClass+')';
+  this.optionElemsParent  = (optionElemsParent || this.elem.find('.romo-select-dropdown-options-parent'));
 
-  var optsParent   = (optionElemsParent || this.elem.find('.romo-select-dropdown-options-parent'));
-  this.optionElems = optsParent.children();
-
   this.doInit();
   this._bindElem();
 
   if (this.elem.attr('id') !== undefined) {
     $('label[for="'+this.elem.attr('id')+'"]').on('click', $.proxy(function(e) {
@@ -42,10 +41,14 @@
 
 RomoSelectDropdown.prototype.selectedItemText = function() {
   return this.romoOptionListDropdown.selectedItemText();
 }
 
+RomoSelectDropdown.prototype.optionFilterValue = function() {
+  return this.romoOptionListDropdown.optionFilterValue();
+}
+
 RomoSelectDropdown.prototype.optItemElems = function() {
   return this.romoOptionListDropdown.optItemElems();
 }
 
 RomoSelectDropdown.prototype.optgroupItemElems = function() {
@@ -61,11 +64,10 @@
 }
 
 /* private */
 
 RomoSelectDropdown.prototype._bindElem = function() {
-  this.elem.attr('data-romo-option-list-dropdown-item-selector-customization', ':not(.'+this.filterHiddenClass+')');
   this.elem.attr('data-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'));
   }
@@ -76,10 +78,13 @@
     this.elem.attr('data-romo-option-list-dropdown-filter-indicator', this.elem.data('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 (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'));
+  }
 
   this.elem.on('romoOptionListDropdown:dropdown:toggle', $.proxy(function(e, dropdown) {
     this.elem.trigger('selectDropdown:dropdown:toggle', [dropdown, this]);
   }, this));
   this.elem.on('romoOptionListDropdown:dropdown:popupOpen', $.proxy(function(e, dropdown) {
@@ -107,40 +112,50 @@
   }, this));
 
   this.romoOptionListDropdown = this.elem.romoOptionListDropdown()[0];
 
   this.elem.on('romoOptionListDropdown:filterChange', $.proxy(function(e, filterValue, romoOptionListDropdown) {
-    var wbFilter = new RomoWordBoundaryFilter(filterValue, this.optItemElems(), 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.
+    var elems    = this.optionElemsParent.find('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, ' ');
     });
 
-    wbFilter.matchingElems.show();
-    wbFilter.notMatchingElems.hide();
     wbFilter.matchingElems.removeClass(this.filterHiddenClass);
     wbFilter.notMatchingElems.addClass(this.filterHiddenClass);
+    this._setListItems();
 
     if (filterValue !== '') {
-      this.elem.trigger('romoOptionListDropdown:triggerListOptionsUpdate', [wbFilter.matchingElems.first()]);
+      this.romoOptionListDropdown.elem.trigger('romoOptionListDropdown:triggerListOptionsUpdate', [this.optItemElems().first()]);
     } else {
       this.elem.trigger('romoOptionListDropdown:triggerListOptionsUpdate', [this.selectedItemElem()]);
     }
   }, this));
 
-  this.romoOptionListDropdown.doSetListItems(this._buildOptionList(this.optionElems));
+  this._setListItems();
+  this.elem.trigger('romoOptionListDropdown:triggerListOptionsUpdate', [this.selectedItemElem()]);
 }
 
-RomoSelectDropdown.prototype._buildOptionList = function(optionElems) {
+RomoSelectDropdown.prototype._setListItems = function() {
+  var optElems = this.optionElemsParent.children(this.optionElemSelector);
+  var items    = this._buildOptionListItems(optElems).concat(this._buildCustomOptionItems());
+  this.romoOptionListDropdown.doSetListItems(items);
+}
+
+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") {
-      list.push(this._buildOptGroupItem($(optionNode)));
+      var optGroupItem = this._buildOptGroupItem($(optionNode));
+      if (optGroupItem.items.length !== 0) {
+        list.push(optGroupItem);
+      }
     }
   }, this));
 
   return list;
 }
@@ -166,12 +181,41 @@
 RomoSelectDropdown.prototype._buildOptGroupItem = function(optGroupElem) {
   var item = {};
 
   item['type']  = 'optgroup';
   item['label'] = optGroupElem.attr('label');
-  item['items'] = this._buildOptionList(optGroupElem.children());
+  item['items'] = this._buildOptionListItems(optGroupElem.children(this.optionElemSelector));
 
   return item;
+}
+
+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 (prompt !== undefined) {
+      items.push({
+        'type':  'optgroup',
+        'label': prompt,
+        'items': [this._buildCustomOptionItem(value)]
+      });
+    } else {
+      items.push(this._buildCustomOptionItem(value));
+    }
+  }
+
+  return items;
+}
+
+RomoSelectDropdown.prototype._buildCustomOptionItem = function(value) {
+  return {
+    'type':        'option',
+    'value':       value,
+    'displayText': value,
+    'displayHtml': value
+  };
 }
 
 Romo.onInitUI(function(e) {
   Romo.initUIElems(e, '[data-romo-select-dropdown-auto="true"]').romoSelectDropdown();
 });