romo 0.19.4 → 0.19.5

checksums.yaml

@@ -1,7 +1,7 @@
 --- 
-SHA512: 
-  metadata.gz: 05431cecaec71b465c4986bf8aa7df0e2a71c88a693c4d082f8937c0e562c351371e4dd45e945881297f2316a14498194969f712ceb6465cacc2532e03f78d7b
-  data.tar.gz: 85887b774157ab564966b5007f4f0f04c51140af7a3be6e792d01731793801a6177ffc2c20538fea6c6f63afcbd2f263e7d1789b0addd8344471f4da6180f28c
 SHA1: 
-  metadata.gz: b24ab8cacb24c8fa5e9a7a64854ee8eb9f85a5f1
-  data.tar.gz: 69de9ee98dabfef298bbe7b5e9fb1bf1339e133a
+  metadata.gz: 4fc3f8ffd4150f3516e977cc2c65e3fd25862848
+  data.tar.gz: 792b1f359b813c11cb40a595e23cd36aadd7f6e6
+SHA512: 
+  metadata.gz: 112164a4224eb8e7ac852de31606510b95ae4a52063ab9ccb40598e458955b72bcba9d991671f1d649adc770162059b74bc7a3cc25a0ea039a3e134cfb1e618d
+  data.tar.gz: e513bd994b174937fb9c6c5d3aa15c6c03a78020447705ec54c145bfad17ea67b6e5cd2093b6b47e5a614ba05bd84a79558064b98b5dfd26816b239ddd0cd565

data/assets/css/romo/forms.scss

@@ -342,12 +342,13 @@
     padding-left: $spacingSize1;
   }
 
-  .romo-input-option-list LI {
+  .romo-input-option-list LI[data-romo-option-list-dropdown-item="opt"] {
     @include input-option-list-option;
   }
 
-  .romo-input-option-list LI[data-romo-option-list-item="optgroup"] {
+  .romo-input-option-list LI[data-romo-option-list-dropdown-item="optgroup"] {
     @include input-option-list-optgroup;
+    padding: 0 $spacingSize0;
   }
 
   .romo-input-option-list LI.romo-option-list-dropdown-highlight {

data/assets/js/romo/option_list_dropdown.js

@@ -5,12 +5,15 @@ $.fn.romoOptionListDropdown = function() {
 }
 
 var RomoOptionListDropdown = function(element) {
-  this.elem      = $(element);
-  this.prevValue = '';
+  this.elem = $(element);
+
+  this.prevValue       = '';
+  this.optionListItems = [];
 
   var selCustomization = this.elem.data('romo-option-list-dropdown-item-selector-customization') || '';
   this.itemSelector    = 'LI[data-romo-option-list-dropdown-item="opt"]:not(.disabled)'+selCustomization;
   this.focusStyleClass = this.elem.data('romo-option-list-focus-style-class');
+  this.openOnFocus     = this.elem.data('romo-option-list-dropdown-open-on-focus');
 
   this.doInit();
   this._bindElem();
@@ -44,6 +47,10 @@ RomoOptionListDropdown.prototype.selectedItemText = function() {
   return this.elem.attr('data-romo-option-list-dropdown-selected-text');
 }
 
+RomoOptionListDropdown.prototype.optionFilterValue = function() {
+  return this.optionFilterElem.val();
+}
+
 RomoOptionListDropdown.prototype.optItemElems = function() {
   return this.romoDropdown.bodyElem.find('LI[data-romo-option-list-dropdown-item="opt"]');
 }
@@ -80,7 +87,8 @@ RomoOptionListDropdown.prototype.doSetSelectedValueAndText = function(newValue,
 Options are specified as a list of items.  Each 'option' item object
 has either display text or html, a value, and can optionally be
 selected or disabled.  Each 'optgroup' item object has a label and
-a list of items.
+a list of items.  Option groups cannot contain other option groups in
+their items.
 
 Example:
 [ { 'type': 'option', 'value': 'a', 'displayText': 'A', 'displayHtml': 'A' },
@@ -100,6 +108,7 @@ Example:
 */
 
 RomoOptionListDropdown.prototype.doSetListItems = function(itemsList) {
+  this.optionListItems = itemsList;
   this.optionListContainer.html(this._buildListElem(itemsList));
 
   this._updateOptionsListUI();
@@ -210,7 +219,7 @@ RomoOptionListDropdown.prototype._buildListOptionElem = function(item) {
   return itemElem;
 }
 
-RomoOptionListDropdown.prototype._buildListOptGroupElemItem = function(item) {
+RomoOptionListDropdown.prototype._buildListOptGroupElem = function(item) {
   var itemElem = $('<li data-romo-option-list-dropdown-item="optgroup"></li>');
 
   itemElem.text(item.label);
@@ -251,6 +260,12 @@ RomoOptionListDropdown.prototype._bindDropdownOptionFilter = function() {
     // remove any manual elem focus when elem is actually focused
     this.optionFilterFocused = false;
     this.romoDropdown.elem.removeClass(this.focusStyleClass);
+
+    if (this.openOnFocus === true) {
+      this.romoDropdown.elem.trigger('dropdown:triggerPopupOpen', []);
+    } else {
+      this.openOnFocus = this.elem.data('romo-option-list-dropdown-open-on-focus');
+    }
   }, this));
   this.romoDropdown.elem.on('blur', $.proxy(function(e) {
     if (this.blurTimeoutId !== undefined) {
@@ -283,6 +298,7 @@ RomoOptionListDropdown.prototype._bindDropdownOptionFilter = function() {
     this.optionFilterElem.trigger('indicatorTextInput:triggerPlaceIndicator');
     this.optionFilterElem.focus();
     this._filterOptionElems();
+    this.openOnFocus = false;
   }, this));
   this.romoDropdown.elem.on('dropdown:popupClose', $.proxy(function(e, dropdown) {
     this.optionFilterElem.val('');
@@ -334,7 +350,7 @@ RomoOptionListDropdown.prototype._updateOptionsListUI = function(highlightOption
 }
 
 RomoOptionListDropdown.prototype._selectHighlightedItem = function() {
-  var curr = this._getHighlightedItem();
+  var curr = this._getHighlightedItemElem();
   if (curr.length !== 0) {
     var prevValue = this.prevValue;
     var newValue  = curr.data('romo-option-list-dropdown-option-value');
@@ -481,49 +497,84 @@ RomoOptionListDropdown.prototype._scrollBottomToItem = function(item) {
 }
 
 RomoOptionListDropdown.prototype._nextListItem = function() {
-  var curr = this._getHighlightedItem();
+  var curr = this._getHighlightedItemElem();
   if (curr.length === 0) {
     return curr;
   }
-  var currList = curr.closest('UL');
-  var next     = Romo.selectNext(curr, this.itemSelector);
-
-  while (next.length === 0) {
-    currList = Romo.selectNext(currList, 'UL');
-    if (currList.length !== 0) {
-      next = currList.find(this.itemSelector).first();
-    } else {
-      next = this.romoDropdown.bodyElem.find(this.itemSelector).first();
-    }
+  var next = Romo.selectNext(curr, this.itemSelector+', UL.romo-option-list-optgroup');
+  if (next.length === 0) {
+    // curr is either the last ungrouped opt elem in the overall
+    // list OR is the last opt elem in a grouped list.
+
+    // if the hightlighted opt elem is in an opt group list, use
+    // its list as the reference elem.  otherwise keep using the
+    // hightlighted opt elem itself.
+    curr = curr.closest('UL.romo-option-list-optgroup') || curr;
+    next = Romo.selectNext(curr, this.itemSelector+', UL.romo-option-list-optgroup');
   }
+  while (next.hasClass('romo-option-list-optgroup') && next.children().size() === 0) {
+    // keep trying until you find a opt group list with options or an option or nothing
+    curr = next;
+    next = Romo.selectNext(curr, this.itemSelector+', UL.romo-option-list-optgroup');
+  }
+  if (next.length === 0) {
+    // curr is the last opt elem (grouped or not) in the overall
+    // list.  get the the first opt elem in the overall list
+    next = this.romoDropdown.bodyElem.find(this.itemSelector).first();
+  } else if (next.hasClass('romo-option-list-optgroup')) {
+    // curr (grouped or not) is before an opt group list. get
+    // the first opt elem in that list.
+    next = next.find(this.itemSelector).first();
+  }
+  // otherwise curr (grouped or not) is before an opt elem.
+  // use that opt elem.
+
   return next;
 }
 
 RomoOptionListDropdown.prototype._prevListItem = function() {
-  var curr = this._getHighlightedItem();
+  var curr = this._getHighlightedItemElem();
   if (curr.length === 0) {
     return curr;
   }
-  var currList = curr.closest('UL');
-  var prev     = Romo.selectPrev(curr, this.itemSelector);
 
-  while (prev.length === 0) {
-    currList = Romo.selectPrev(currList, 'UL');
-    if (currList.length !== 0) {
-      prev = currList.find(this.itemSelector).last();
-    } else {
-      prev = this.romoDropdown.bodyElem.find(this.itemSelector).last();
-    }
+  var prev = Romo.selectPrev(curr, this.itemSelector+', UL.romo-option-list-optgroup');
+  if (prev.length === 0) {
+    // curr is either the first ungrouped opt elem in the overall
+    // list OR is the first opt elem in a grouped list
+
+    // if the hightlighted opt elem is in an opt group list, use
+    // its list as the reference elem.  otherwise keep using the
+    // hightlighted opt elem itself.
+    curr = curr.closest('UL.romo-option-list-optgroup') || curr;
+    prev = Romo.selectPrev(curr, this.itemSelector+', UL.romo-option-list-optgroup');
+  }
+  while (prev.hasClass('romo-option-list-optgroup') && prev.children().size() === 0) {
+    // keep trying until you find a opt group list with options or an option or nothing
+    curr = prev;
+    prev = Romo.selectPrev(curr, this.itemSelector+', UL.romo-option-list-optgroup');
   }
+  if (prev.length === 0) {
+    // curr is the first opt elem (grouped or not) in the overall
+    // list.  get the the last opt elem in the overall list
+    prev = this.romoDropdown.bodyElem.find(this.itemSelector).last();
+  } else if (prev.hasClass('romo-option-list-optgroup')) {
+    // curr (grouped or not) is after an opt group list.  get
+    // the last opt elem in that list.
+    prev = prev.find(this.itemSelector).last();
+  }
+  // otherwise curr (grouped or not) is after an opt elem.
+  // use that opt elem.
+
   return prev;
 }
 
 RomoOptionListDropdown.prototype._highlightItem = function(item) {
-  this._getHighlightedItem().removeClass('romo-option-list-dropdown-highlight');
+  this._getHighlightedItemElem().removeClass('romo-option-list-dropdown-highlight');
   item.addClass('romo-option-list-dropdown-highlight');
 }
 
-RomoOptionListDropdown.prototype._getHighlightedItem = function() {
+RomoOptionListDropdown.prototype._getHighlightedItemElem = function() {
   return this.romoDropdown.bodyElem.find('LI.romo-option-list-dropdown-highlight');
 }
 

data/assets/js/romo/picker.js

@@ -11,7 +11,8 @@ var RomoPicker = function(element) {
   this.defaultCaretPaddingPx = 5;
   this.defaultCaretPosition  = 'right'
 
-  this.defaultOptionItems = this._buildDefaultOptionItems();
+  this.defaultOptionItems  = this._buildDefaultOptionItems();
+  this.filteredOptionItems = [];
 
   this.doInit();
   this._bindElem();
@@ -109,9 +110,13 @@ RomoPicker.prototype._bindOptionListDropdown = function() {
 
   this.romoOptionListDropdown.elem.on('romoOptionListDropdown:filterChange', $.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 }]);
     } else {
-      this._setListItems(this.defaultOptionItems);
+      this._setListItems(this.defaultOptionItems.concat(this._buildCustomOptionItems()));
     }
   }, this));
   this.romoOptionListDropdown.elem.on('romoOptionListDropdown:itemSelected', $.proxy(function(e, newValue, prevValue, optionListDropdown) {
@@ -152,6 +157,9 @@ RomoPicker.prototype._buildOptionListDropdownElem = function() {
   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 (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'));
+  }
 
   var classList = this.elem.attr('class') !== undefined ? this.elem.attr('class').split(/\s+/) : [];
   $.each(classList, function(idx, classItem) {
@@ -218,11 +226,12 @@ RomoPicker.prototype._bindAjax = function() {
     this.romoOptionListDropdown.elem.trigger('romoOptionListDropdown:triggerFilterIndicatorStart', []);
   }, this));
   this.elem.on('romoAjax:callSuccess', $.proxy(function(e, data, romoAjax) {
-    this._setListItems(data);
+    this.filteredOptionItems = data;
+    this._setListItems(this.filteredOptionItems.concat(this._buildCustomOptionItems()));
     this.romoOptionListDropdown.elem.trigger('romoOptionListDropdown:triggerFilterIndicatorStop', []);
   }, this));
   this.elem.on('romoAjax:callError', $.proxy(function(e, xhr, romoAjax) {
-    this._setListItems(this.defaultOptionItems);
+    this._setListItems(this.defaultOptionItems.concat(this._buildCustomOptionItems()));
     this.romoOptionListDropdown.elem.trigger('romoOptionListDropdown:triggerFilterIndicatorStop', []);
   }, this));
 
@@ -234,7 +243,7 @@ RomoPicker.prototype._setListItems = function(items) {
   this.romoOptionListDropdown.elem.trigger('romoOptionListDropdown:triggerListOptionsUpdate', [this.romoOptionListDropdown.optItemElems().first()]);
 }
 
-RomoPicker.prototype._buildDefaultOptionItems = function(e) {
+RomoPicker.prototype._buildDefaultOptionItems = function() {
   var items = []
 
   if (this.elem.data('romo-picker-empty-option') === true) {
@@ -249,6 +258,35 @@ RomoPicker.prototype._buildDefaultOptionItems = function(e) {
   return items;
 }
 
+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 (prompt !== undefined) {
+      items.push({
+        'type':  'optgroup',
+        'label': prompt,
+        'items': [this._buildCustomOptionItem(value)]
+      });
+    } else {
+      items.push(this._buildCustomOptionItem(value));
+    }
+  }
+
+  return items;
+}
+
+RomoPicker.prototype._buildCustomOptionItem = function(value) {
+  return {
+    'type':        'option',
+    'value':       value,
+    'displayText': value,
+    'displayHtml': value
+  };
+}
+
 RomoPicker.prototype._onCaretClick = function(e) {
   if (this.elem.prop('disabled') === false) {
     this.romoOptionListDropdown.elem.focus();

data/assets/js/romo/select.js

@@ -66,6 +66,12 @@ RomoSelect.prototype._bindElem = function() {
   this.elem.on('select:triggerPopupClose', $.proxy(function(e) {
     this.romoSelectDropdown.elem.trigger('selectDropdown:triggerPopupClose', []);
   }, this));
+
+
+  var presetVal = this.elem[0].value;
+  if (presetVal !== '') {
+    this.doSetValue(presetVal);
+  }
 }
 
 RomoSelect.prototype._bindSelectDropdown = function() {
@@ -117,6 +123,15 @@ RomoSelect.prototype._buildSelectDropdownElem = function() {
   if (this.elem.data('romo-select-no-filter') !== undefined) {
     romoSelectDropdownElem.attr('data-romo-select-dropdown-no-filter', this.elem.data('romo-select-no-filter'));
   }
+  if (this.elem.data('romo-select-custom-option') !== undefined) {
+    romoSelectDropdownElem.attr('data-romo-select-dropdown-custom-option', this.elem.data('romo-select-custom-option'));
+  }
+  if (this.elem.data('romo-select-custom-option-prompt') !== undefined) {
+    romoSelectDropdownElem.attr('data-romo-select-dropdown-custom-option-prompt', this.elem.data('romo-select-custom-option-prompt'));
+  }
+  if (this.elem.data('romo-select-open-on-focus') !== undefined) {
+    romoSelectDropdownElem.attr('data-romo-select-dropdown-open-on-focus', this.elem.data('romo-select-open-on-focus'));
+  }
 
   var classList = this.elem.attr('class') !== undefined ? this.elem.attr('class').split(/\s+/) : [];
   $.each(classList, function(idx, classItem) {

data/assets/js/romo/select_dropdown.js

@@ -7,10 +7,9 @@ $.fn.romoSelectDropdown = function(optionElemsParent) {
 var RomoSelectDropdown = function(element, optionElemsParent) {
   this.elem = $(element);
 
-  this.filterHiddenClass = 'romo-select-filter-hidden';
-
-  var optsParent   = (optionElemsParent || this.elem.find('.romo-select-dropdown-options-parent'));
-  this.optionElems = optsParent.children();
+  this.filterHiddenClass  = 'romo-select-filter-hidden';
+  this.optionElemSelector = ':not(.'+this.filterHiddenClass+')';
+  this.optionElemsParent  = (optionElemsParent || this.elem.find('.romo-select-dropdown-options-parent'));
 
   this.doInit();
   this._bindElem();
@@ -44,6 +43,10 @@ RomoSelectDropdown.prototype.selectedItemText = function() {
   return this.romoOptionListDropdown.selectedItemText();
 }
 
+RomoSelectDropdown.prototype.optionFilterValue = function() {
+  return this.romoOptionListDropdown.optionFilterValue();
+}
+
 RomoSelectDropdown.prototype.optItemElems = function() {
   return this.romoOptionListDropdown.optItemElems();
 }
@@ -63,7 +66,6 @@ RomoSelectDropdown.prototype.doSetNewValue = function(newValue) {
 /* 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) {
@@ -78,6 +80,9 @@ RomoSelectDropdown.prototype._bindElem = function() {
   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]);
@@ -109,36 +114,46 @@ RomoSelectDropdown.prototype._bindElem = function() {
   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));
 
@@ -168,11 +183,40 @@ RomoSelectDropdown.prototype._buildOptGroupItem = function(optGroupElem) {
 
   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();
 });

data/lib/romo/version.rb

@@ -1,3 +1,3 @@
 module Romo
-  VERSION = "0.19.4"
+  VERSION = "0.19.5"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification 
 name: romo
 version: !ruby/object:Gem::Version 
-  version: 0.19.4
+  version: 0.19.5
 platform: ruby
 authors: 
 - Kelly Redding
@@ -10,7 +10,7 @@ autorequire:
 bindir: bin
 cert_chain: []
 
-date: 2017-08-18 00:00:00 Z
+date: 2017-08-23 00:00:00 Z
 dependencies: 
 - !ruby/object:Gem::Dependency 
   name: assert