romo 0.17.0 → 0.17.1

checksums.yaml

@@ -1,7 +1,7 @@
 --- 
 SHA1: 
-  metadata.gz: 1fe66b6570bc33ace62de2e8fd9c4346714ea4a4
-  data.tar.gz: 9cc7f175aa978376a86f4a85d005fdab750a817f
+  metadata.gz: 217361e9543ff348d3315d69454971dce89254f1
+  data.tar.gz: dd28175c1f05929102d1f06b4846b83a6ee1eb34
 SHA512: 
-  metadata.gz: 29b9803211c7b536f484844996ade3def60287dbdd6a6d06b4af646f899c35f88d9dbef95fdcc036707d6a706569fc21e74fec50c7ed09028d4ef0b9ea9ad9e6
-  data.tar.gz: e9cbde2242c2fcc0b332f6ed53081388bb750a2d9d05e919d1c1144cd53e7599371093768025d020e0c82bd1ef0e6170e1d18d4b946336034a17ff185dfa8f0e
+  metadata.gz: f4c569de6a994ed66af85e1e187a1f00aaab08390d550e95eae5816a9a250fba13e490b349f1a26934e6c8bebf27e21afc4abf842d95b76821e696bebf0fd541
+  data.tar.gz: d81fd57f559711ce1f7097ad8204505f627621a2edd4e633d6d234b1917b907d6b75684e5864dd96a0fb6a6caa9875bee4d048466ae15b0d51d2c57575f58cb4

data/assets/css/romo/_vars.scss

@@ -27,6 +27,8 @@ $spacingSize0: $spacingSize1 * 0.35;
 $spacingSize2: $spacingSize1 * 2;
 
 $inputHeight: ($baseLineHeight / 2) * 3; /* 30px */
+$inputFilterHeight: $baseLineHeight;     /* 20px */
+
 $inputSize1: 220px;
 $inputSize0: $inputSize1 - 120px;
 $inputSize2: $inputSize1 + 120px;

data/assets/css/romo/forms.scss

@@ -26,7 +26,8 @@ label { display: block; }
 
 .romo-form input,
 .romo-form select,
-.romo-form textarea {
+.romo-form textarea,
+input.romo-select-dropdown-option-filter {
   font-size: 100%;
   @include rm-push;
   @include align-middle;
@@ -42,8 +43,15 @@ label { display: block; }
   }
 }
 
-.romo-form input    { *overflow: visible; line-height: normal; }
-.romo-form textarea {  overflow: auto; @include align-top; }
+.romo-form input,
+input.romo-select-dropdown-option-filter {
+  *overflow: visible;
+  line-height: normal;
+}
+
+.romo-form textarea {
+  overflow: auto; @include align-top;
+}
 
 .romo-form label,
 .romo-form select,
@@ -58,7 +66,9 @@ label { display: block; }
 .romo-form textarea[disabled],
 .romo-form input[readonly],
 .romo-form select[readonly],
-.romo-form textarea[readonly] { cursor: $notAllowedCursor; }
+.romo-form textarea[readonly],
+input.romo-select-dropdown-option-filter[disabled],
+input.romo-select-dropdown-option-filter[readonly] { cursor: $notAllowedCursor; }
 
 .romo-form select {
   font-weight: normal;
@@ -82,7 +92,8 @@ label { display: block; }
 .romo-form input[type="url"],
 .romo-form input[type="search"],
 .romo-form input[type="tel"],
-.romo-form input[type="color"] {
+.romo-form input[type="color"],
+input.romo-select-dropdown-option-filter {
   font-weight: normal;
   background-color: $inputBgColor;
   @include border1;
@@ -104,7 +115,8 @@ label { display: block; }
 .romo-form input[type="url"]:focus,
 .romo-form input[type="search"]:focus,
 .romo-form input[type="tel"]:focus,
-.romo-form input[type="color"]:focus {
+.romo-form input[type="color"]:focus,
+input.romo-select-dropdown-option-filter:focus {
   @include input-focus;
 }
 
@@ -113,7 +125,9 @@ label { display: block; }
 .romo-form textarea[disabled],
 .romo-form input[readonly],
 .romo-form select[readonly],
-.romo-form textarea[readonly] { background-color: $inputDisabledColor; }
+.romo-form textarea[readonly],
+input.romo-select-dropdown-option-filter[disabled],
+input.romo-select-dropdown-option-filter[readonly] { background-color: $inputDisabledColor; }
 
 .romo-form input[type="radio"][disabled],
 .romo-form input[type="checkbox"][disabled],
@@ -134,12 +148,17 @@ label { display: block; }
 .romo-form input[type="url"],
 .romo-form input[type="search"],
 .romo-form input[type="tel"],
-.romo-form input[type="color"] {
+.romo-form input[type="color"],
+input.romo-select-dropdown-option-filter {
   height: $inputHeight;
   line-height: $baseLineHeight;
   @include align-middle;
 }
 
+input.romo-select-dropdown-option-filter {
+  height: $inputFilterHeight;
+}
+
 .romo-form textarea,
 .romo-form input[type="text"],
 .romo-form input[type="password"],
@@ -154,12 +173,18 @@ label { display: block; }
 .romo-form input[type="url"],
 .romo-form input[type="search"],
 .romo-form input[type="tel"],
-.romo-form input[type="color"] {
+.romo-form input[type="color"],
+input.romo-select-dropdown-option-filter {
   display: inline-block;
   padding: 4px 6px;
   color: $inputColor;
 }
 
+input.romo-select-dropdown-option-filter {
+  display: block;
+  width: 100%;
+}
+
 .romo-form textarea,
 .romo-form select[multiple],
 .romo-form select[size] { height: auto; }

data/assets/css/romo/indicator_text_input.scss

@@ -8,6 +8,7 @@
 .romo-indicator-text-input-indicator {
   display: inline-block;
   position: absolute;
+  top: 0px;
   right: 6px;
   vertical-align: middle;
   cursor: pointer;

data/assets/css/romo/select.scss

@@ -22,7 +22,8 @@
   padding-right: 6px;
 }
 
-.romo-select:focus{ @include input-focus; }
+.romo-select:focus,
+.romo-select.romo-select-focus { @include input-focus; }
 
 .romo-select:active,
 .romo-select.active {
@@ -43,6 +44,12 @@
   vertical-align: middle;
 }
 
+.romo-select-dropdown-option-filter-wrapper {
+  @include border1-bottom();
+  padding: 4px 0;
+  margin: 0 4px;
+}
+
 .romo-select-option-list {
   cursor: pointer;
   font-weight: normal;

data/assets/js/romo/base.js

@@ -182,10 +182,79 @@
   // elem handling
 
   Romo.prototype.toArray = function(elems) {
-    // converts a collection of elements (`$()`) to an array of nodes
+    // converts a collection of elements `$()` to an array of nodes
     return $.map(elems, function(node){ return node; })
   }
 
+  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.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;
+  }
+
+  // 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 */
+    ];
+  }
+
   // private
 
   Romo.prototype._addEventCallback = function(name, callback) {

data/assets/js/romo/datepicker.js

@@ -6,20 +6,19 @@ $.fn.romoDatepicker = function() {
 
 var RomoDatepicker = function(element) {
   this.elem = $(element);
-  this.defaultFormat = 'yyyy-mm-dd'
   this.monthNames = [
     "January", "February", "March", "April", "May", "June",
     "July", "August", "September", "October", "November", "December"
   ]
-  this.defaultPrevClass        = undefined;
-  this.defaultNextClass        = undefined;
-  this.defaultIndicatorClass   = undefined;
-  this.defaultIndicatorWidthPx = 0;
-  this.itemSelector            = 'TD.romo-datepicker-day:not(.disabled)';
-  this.calTable                = $();
-  this.date                    = undefined;
-  this.today                   = this._getTodaysDate();
-  this.prevValue               = undefined;
+
+  this.defaultFormat    = 'yyyy-mm-dd'
+  this.defaultPrevClass = undefined;
+  this.defaultNextClass = undefined;
+  this.itemSelector     = 'TD.romo-datepicker-day:not(.disabled)';
+  this.calTable         = $();
+  this.date             = undefined;
+  this.today            = this._getTodaysDate();
+  this.prevValue        = undefined;
 
   this.doInit();
   this.doBindElem();
@@ -36,47 +35,22 @@ RomoDatepicker.prototype.doInit = function() {
 }
 
 RomoDatepicker.prototype.doBindElem = function() {
-  var elemWrapper = $('<div class="romo-datepicker-wrapper"></div>');
-  elemWrapper.css({'display': (this.elem.data('romo-datepicker-elem-display') || 'inline-block')});
-  if (this.elem.data('romo-datepicker-btn-group') === true) {
-    elemWrapper.addClass('romo-btn-group');
-  }
-
-  this.elem.before(elemWrapper);
-  elemWrapper.append(this.elem);
-
-  // 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 (input) is removed.
-  // delay adding it b/c the `append` statement above is not a "move", it is
-  // a "remove" and "add" so if added immediately the "remove" part will
-  // incorrectly remove the wrapper.  Any value will do - I chose 1 arbitrarily.
-  setTimeout($.proxy(function() {
-    Romo.parentChildElems.add(this.elem, [elemWrapper]);
-  }, this), 1);
-
   this.elem.attr('autocomplete', 'off');
 
-  this.indicatorElem = $();
-  var indicatorClass = this.elem.data('romo-datepicker-indicator') || this.defaultIndicatorClass;
-  if (indicatorClass !== undefined && indicatorClass !== 'none') {
-    this.indicatorElem = $('<i class="romo-datepicker-indicator '+indicatorClass+'"></i>');
-    this.indicatorElem.css({'line-height': this.elem.css('height')});
-    if (this.elem.prop('disabled') === true) {
-      this.indicatorElem.addClass('disabled');
-    }
-    if (this.elem.css('display') === 'none') {
-      this._hide(this.indicatorElem);
-    }
-    this.indicatorElem.on('click', $.proxy(this.onIndicatorClick, this));
-
-    var indicatorWidthPx   = this.elem.data('romo-datepicker-indicator-width-px') || this.defaultIndicatorWidthPx;
-    // left-side spacing
-    // + indicator width
-    // + right-side spacing
-    var indicatorPaddingPx = 4 + indicatorWidthPx + 4;
-    this.elem.css({'padding-right': indicatorPaddingPx + 'px'});
-    this.elem.after(this.indicatorElem);
+  if (this.elem.data('romo-datepicker-indicator') !== undefined) {
+    this.elem.attr('data-romo-indicator-text-input-indicator', this.elem.data('romo-datepicker-indicator'));
   }
+  if (this.elem.data('romo-datepicker-indicator-width-px') !== undefined) {
+    this.elem.attr('data-romo-indicator-text-input-indicator-width-px', this.elem.data('romo-datepicker-indicator-width-px'));
+  }
+  if (this.elem.data('romo-datepicker-btn-group') === true) {
+    this.elem.attr('data-romo-indicator-text-input-btn-group', this.elem.data('romo-datepicker-btn-group'));
+  }
+  if (this.elem.data('romo-datepicker-elem-display') !== undefined) {
+    this.elem.attr('data-romo-indicator-text-input-elem-display', this.elem.data('romo-datepicker-elem-display'));
+  }
+
+  this.elem.romoIndicatorTextInput();
 
   this.prevValue = this.elem.val();
   this.elem.on('change', $.proxy(function(e) {
@@ -85,18 +59,24 @@ RomoDatepicker.prototype.doBindElem = function() {
     this.prevValue = newValue;
   }, this));
 
+  this.elem.on('indicatorTextInput:indicatorClick', $.proxy(function(e) {
+    this._clearBlurTimeout();
+    this.elem.trigger('datepicker:triggerPopupOpen');
+  }, this));
+
   this.elem.on('datepicker:triggerEnable', $.proxy(function(e) {
-    this.doEnable();
+    this.elem.trigger('indicatorTextInput:triggerEnable', []);
   }, this));
   this.elem.on('datepicker:triggerDisable', $.proxy(function(e) {
-    this.doDisable();
+    this.elem.trigger('indicatorTextInput:triggerDisable', []);
   }, this));
   this.elem.on('datepicker:triggerShow', $.proxy(function(e) {
-    this.doShow();
+    this.elem.trigger('indicatorTextInput:triggerShow', []);
   }, this));
   this.elem.on('datepicker:triggerHide', $.proxy(function(e) {
-    this.doHide();
+    this.elem.trigger('indicatorTextInput:triggerHide', []);
   }, this));
+
   this.elem.on('datepicker:triggerSetFormat', $.proxy(function(e) {
     this.doSetFormat();
   }, this));
@@ -117,28 +97,6 @@ RomoDatepicker.prototype.doSetDate = function(value) {
   }
 }
 
-RomoDatepicker.prototype.doEnable = function() {
-  this.elem.prop('disabled', false);
-  this.elem.removeClass('disabled');
-  this.indicatorElem.removeClass('disabled');
-}
-
-RomoDatepicker.prototype.doDisable = function() {
-  this.elem.prop('disabled', true);
-  this.elem.addClass('disabled');
-  this.indicatorElem.addClass('disabled');
-}
-
-RomoDatepicker.prototype.doShow = function() {
-  this._show(this.elem);
-  this._show(this.indicatorElem);
-}
-
-RomoDatepicker.prototype.doHide = function() {
-  this._hide(this.elem);
-  this._hide(this.indicatorElem);
-}
-
 RomoDatepicker.prototype.doBindDropdown = function() {
   this.elem.attr('data-romo-dropdown-disable-toggle', 'true');
   if (this.elem.data('romo-dropdown-width') === undefined) {
@@ -283,18 +241,6 @@ RomoDatepicker.prototype.onItemEnter = function(e) {
   this._highlightItem($(e.target));
 }
 
-RomoDatepicker.prototype.onIndicatorClick = function(e) {
-  this._clearBlurTimeout();
-  if (e !== undefined) {
-    e.preventDefault();
-    e.stopPropagation();
-  }
-  if (this.elem.prop('disabled') === false) {
-    this.elem.focus();
-    this.elem.trigger('datepicker:triggerPopupOpen');
-  }
-}
-
 RomoDatepicker.prototype.onItemClick = function(e) {
   this._clearBlurTimeout();
   if (e !== undefined) {

data/assets/js/romo/dropdown.js

@@ -278,6 +278,7 @@ RomoDropdown.prototype.onElemKeyUp = function(e) {
     if (this.popupElem.hasClass('romo-dropdown-open')) {
       if(e.keyCode === 27 /* Esc */ ) {
         this.doPopupClose();
+        this.elem.trigger('dropdown:popupClosedByEsc', [this]);
         return false;
       } else {
         return true;
@@ -321,6 +322,7 @@ RomoDropdown.prototype.doUnBindWindowBodyKeyUp = function() {
 RomoDropdown.prototype.onWindowBodyKeyUp = function(e) {
   if (e.keyCode === 27 /* Esc */) {
     this.doPopupClose();
+    this.elem.trigger('dropdown:popupClosedByEsc', [this]);
   }
   return true;
 }
@@ -333,7 +335,6 @@ RomoDropdown.prototype.onResizeWindow = function(e) {
 RomoDropdown.prototype.doPlacePopupElem = function() {
   if (this.elem.parents('.romo-modal-popup').size() !== 0) {
     this.popupElem.css({'position': 'fixed'});
-    this.popupElem.offset(this.elem.offset());
   }
 
   var pos = $.extend({}, this.elem[0].getBoundingClientRect(), this.elem.offset());
@@ -360,6 +361,9 @@ RomoDropdown.prototype.doPlacePopupElem = function() {
       configHeight = bottomAvailHeight;
     }
 
+    // remove any height difference between the popup and content elems
+    // assumes popup height always greater than or equal to content height
+    configHeight = configHeight - (h - this.contentElem[0].offsetHeight);
     this.contentElem.css({'max-height': configHeight.toString() + 'px'});
   }
 
@@ -386,6 +390,10 @@ RomoDropdown.prototype.doPlacePopupElem = function() {
       break;
   }
 
+  $.extend(offset, {
+    top:  this._roundPosOffsetVal(offset['top']),
+    left: this._roundPosOffsetVal(offset['left'])
+  });
   this.popupElem.offset(offset);
 }
 
@@ -420,6 +428,10 @@ RomoDropdown.prototype._getPopupMaxHeightDetectPad = function(position) {
   return this.elem.data('romo-dropdown-max-height-detect-pad-'+position) || this.elem.data('romo-dropdown-max-height-detect-pad') || 10;
 }
 
+RomoDropdown.prototype._roundPosOffsetVal = function(value) {
+  return Math.round(value*100) / 100;
+}
+
 Romo.onInitUI(function(e) {
   Romo.initUIElems(e, '[data-romo-dropdown-auto="true"]').romoDropdown();
 });

data/assets/js/romo/indicator_text_input.js

@@ -38,28 +38,17 @@ RomoIndicatorTextInput.prototype.doBindElem = function() {
     Romo.parentChildElems.add(this.elem, [elemWrapper]);
   }, this), 1);
 
-  this.elem.attr('autocomplete', 'off');
-
   this.indicatorElem = $();
   var indicatorClass = this.elem.data('romo-indicator-text-input-indicator') || this.defaultIndicatorClass;
   if (indicatorClass !== undefined && indicatorClass !== 'none') {
     this.indicatorElem = $('<i class="romo-indicator-text-input-indicator '+indicatorClass+'"></i>');
-    this.indicatorElem.css({'line-height': this.elem.css('height')});
-    if (this.elem.prop('disabled') === true) {
-      this.indicatorElem.addClass('disabled');
-    }
-    if (this.elem.css('display') === 'none') {
-      this._hide(this.indicatorElem);
-    }
+    this.elem.after(this.indicatorElem);
     this.indicatorElem.on('click', $.proxy(this.onIndicatorClick, this));
+    this.doPlaceIndicatorElem();
 
-    var indicatorWidthPx = this.elem.data('romo-indicator-text-input-indicator-width-px') || this.defaultIndicatorWidthPx;
-    // left-side spacing
-    // + indicator width
-    // + right-side spacing
-    var indicatorPaddingPx = 4 + indicatorWidthPx + 4;
-    this.elem.css({'padding-right': indicatorPaddingPx + 'px'});
-    this.elem.after(this.indicatorElem);
+    this.elem.on('indicatorTextInput:triggerPlaceIndicator', $.proxy(function(e) {
+      this.doPlaceIndicatorElem();
+    }, this));
   }
 
   this.elem.on('indicatorTextInput:triggerEnable', $.proxy(function(e) {
@@ -76,6 +65,25 @@ RomoIndicatorTextInput.prototype.doBindElem = function() {
   }, this));
 }
 
+RomoIndicatorTextInput.prototype.doPlaceIndicatorElem = function() {
+  if (this.indicatorElem !== undefined) {
+    this.indicatorElem.css({'line-height': this.elem.css('height')});
+    if (this.elem.prop('disabled') === true) {
+      this.indicatorElem.addClass('disabled');
+    }
+    if (this.elem.css('display') === 'none') {
+      this._hide(this.indicatorElem);
+    }
+
+    var indicatorWidthPx = this.elem.data('romo-indicator-text-input-indicator-width-px') || this.defaultIndicatorWidthPx;
+    // left-side spacing
+    // + indicator width
+    // + right-side spacing
+    var indicatorPaddingPx = 4 + indicatorWidthPx + 4;
+    this.elem.css({'padding-right': indicatorPaddingPx + 'px'});
+  }
+}
+
 RomoIndicatorTextInput.prototype.doEnable = function() {
   this.elem.prop('disabled', false);
   this.elem.removeClass('disabled');
@@ -91,6 +99,7 @@ RomoIndicatorTextInput.prototype.doDisable = function() {
 RomoIndicatorTextInput.prototype.doShow = function() {
   this._show(this.elem);
   this._show(this.indicatorElem);
+  this.doPlaceIndicatorElem();
 }
 
 RomoIndicatorTextInput.prototype.doHide = function() {
@@ -105,6 +114,7 @@ RomoIndicatorTextInput.prototype.onIndicatorClick = function(e) {
   }
   if (this.elem.prop('disabled') === false) {
     this.elem.focus();
+    this.elem.trigger('indicatorTextInput:indicatorClick');
   }
 }
 

data/assets/js/romo/select.js

@@ -110,6 +110,18 @@ RomoSelect.prototype._buildSelectDropdownElem = function() {
   if (romoSelectDropdownElem.data('romo-dropdown-max-height') === undefined) {
     romoSelectDropdownElem.attr('data-romo-dropdown-max-height', 'detect');
   }
+  if (this.elem.data('romo-select-filter-placeholder') !== undefined) {
+    romoSelectDropdownElem.attr('data-romo-select-dropdown-filter-placeholder', this.elem.data('romo-select-filter-placeholder'));
+  }
+  if (this.elem.data('romo-select-filter-indicator') !== undefined) {
+    romoSelectDropdownElem.attr('data-romo-select-dropdown-filter-indicator', this.elem.data('romo-select-filter-indicator'));
+  }
+  if (this.elem.data('romo-select-filter-indicator-width-px') !== undefined) {
+    romoSelectDropdownElem.attr('data-romo-select-dropdown-filter-indicator-width-px', this.elem.data('romo-select-filter-indicator-width-px'));
+  }
+  if (this.elem.data('romo-select-no-filter') !== undefined) {
+    romoSelectDropdownElem.attr('data-romo-select-dropdown-no-filter', this.elem.data('romo-select-no-filter'));
+  }
 
   var classList = this.elem.attr('class') !== undefined ? this.elem.attr('class').split(/\s+/) : [];
   $.each(classList, function(idx, classItem) {
@@ -148,7 +160,7 @@ RomoSelect.prototype._buildSelectDropdownElem = function() {
     caret.css({'line-height': romoSelectDropdownElem.css('line-height')});
     caret.on('click', $.proxy(this.onCaretClick, this));
 
-    var caretWidthPx   = this.elem.data('romo-select-caret-width-px') || this.defaultCaretWidthPx;
+    var caretWidthPx = this.elem.data('romo-select-caret-width-px') || this.defaultCaretWidthPx;
     // left-side spacing
     // + caret width
     // - 1 px select styling optical illusion

data/assets/js/romo/select_dropdown.js

@@ -5,13 +5,16 @@ $.fn.romoSelectDropdown = function(optionElemsParent) {
 }
 
 var RomoSelectDropdown = function(element, optionElemsParent) {
-  this.elem         = $(element);
-  this.itemSelector = 'LI[data-romo-select-item="opt"]:not(.disabled)';
-  this.prevValue    = '';
+  this.elem      = $(element);
+  this.prevValue = '';
 
-  var optsParent   = (optionElemsParent || this.elem.find('.romo-select-dropdown-options-parent'));
-  this.optionElems = optsParent.children();
-  this.optionList  = this._buildOptionList(this.optionElems);
+  this.filterHiddenClass = 'romo-select-filter-hidden';
+  this.itemSelector      = 'LI[data-romo-select-item="opt"]:not(.disabled):not(.'+this.filterHiddenClass+')';
+
+  var optsParent    = (optionElemsParent || this.elem.find('.romo-select-dropdown-options-parent'));
+  this.optionElems  = optsParent.children();
+  this.optionList   = this._buildOptionList(this.optionElems);
+  this.optionFilter = undefined;
 
   this.doInit();
   this.doBindDropdown();
@@ -44,15 +47,10 @@ RomoSelectDropdown.prototype.doBindDropdown = function() {
   this.romoDropdown = this.elem.romoDropdown()[0];
   this.romoDropdown.doSetPopupZIndex(this.elem);
   this.romoDropdown.bodyElem.addClass('romo-select-option-list');
+
   this.romoDropdown.elem.on('dropdown:popupOpen', $.proxy(this.onPopupOpen, this));
   this.romoDropdown.elem.on('dropdown:popupClose', $.proxy(this.onPopupClose, this));
-  this.romoDropdown.elem.on('blur', $.proxy(function(e) {
-    this.blurTimeoutId = setTimeout($.proxy(function() {
-      if (this.popupMouseDown !== true) {
-        this.romoDropdown.elem.trigger('dropdown:triggerPopupClose', []);
-      }
-    }, this), 10);
-  }, this));
+
   this.romoDropdown.elem.on('keydown', $.proxy(this.onElemKeyDown, this));
   this.romoDropdown.popupElem.on('keydown', $.proxy(this.onElemKeyDown, this));
 
@@ -77,6 +75,15 @@ RomoSelectDropdown.prototype.doBindDropdown = function() {
   }, this));
 
   this.romoDropdown.bodyElem.html('');
+
+  if (this.elem.data('romo-select-dropdown-no-filter') !== true) {
+    this.optionFilter = this._buildOptionFilter();
+    var optionFilterWrapper = $('<div class="romo-select-dropdown-option-filter-wrapper"></div>');
+    optionFilterWrapper.append(this.optionFilter);
+    this.romoDropdown.popupElem.prepend(optionFilterWrapper);
+    this.doBindDropdownOptionFilter();
+  }
+
   this.romoDropdown.bodyElem.append(this.optionList);
 
   this.romoDropdown.bodyElem.find(this.itemSelector).on('mouseenter', $.proxy(this.onItemEnter, this));
@@ -86,16 +93,116 @@ RomoSelectDropdown.prototype.doBindDropdown = function() {
   this.romoDropdown.popupElem.on('mouseup',   $.proxy(this.onPopupMouseUp, this));
 }
 
+RomoSelectDropdown.prototype.doBindDropdownOptionFilter = function() {
+  this.optionFilter.romoIndicatorTextInput();
+  this.optionFilter.romoOnkey();
+
+  this.romoDropdown.elem.on('focus', $.proxy(function(e) {
+    if (this.blurTimeoutId !== undefined) {
+      clearTimeout(this.blurTimeoutId);
+    }
+    // remove any manual elem focus when elem is actually focused
+    this.optionFilterFocused = false;
+    this.romoDropdown.elem.removeClass('romo-select-focus');
+  }, this));
+  this.romoDropdown.elem.on('blur', $.proxy(function(e) {
+    if (this.blurTimeoutId !== undefined) {
+      clearTimeout(this.blurTimeoutId);
+    }
+    // close the dropdown when elem is blurred
+    // remove any manual focus as well
+    this.romoDropdown.elem.removeClass('romo-select-focus');
+    this.blurTimeoutId = setTimeout($.proxy(function() {
+      if (this.popupMouseDown !== true && this.optionFilterFocused !== true) {
+        this.romoDropdown.elem.trigger('dropdown:triggerPopupClose', []);
+      }
+    }, this), 10);
+  }, this));
+  this.optionFilter.on('focus', $.proxy(function(e) {
+    if (this.blurTimeoutId !== undefined) {
+      clearTimeout(this.blurTimeoutId);
+    }
+    // manually make the elem focused when its filter is focused
+    this.optionFilterFocused = true;
+    this.romoDropdown.elem.addClass('romo-select-focus');
+  }, this));
+  this.optionFilter.on('blur', $.proxy(function(e) {
+    // remove any manual elem focus when its filter is blurred
+    this.optionFilterFocused = false;
+    this.romoDropdown.elem.removeClass('romo-select-focus');
+  }, this));
+
+  this.romoDropdown.elem.on('dropdown:popupOpen', $.proxy(function(e, dropdown) {
+    this.optionFilter.trigger('indicatorTextInput:triggerPlaceIndicator');
+    this.optionFilter.focus();
+    this.doFilterOptionElems();
+  }, this));
+  this.romoDropdown.elem.on('dropdown:popupClose', $.proxy(function(e, dropdown) {
+    this.optionFilter.val('');
+  }, this));
+  this.romoDropdown.elem.on('dropdown:popupClosedByEsc', $.proxy(function(e, dropdown) {
+    this.romoDropdown.elem.focus();
+  }, this));
+  this.optionFilter.on('click', $.proxy(function(e) {
+    if (e !== undefined) {
+      e.stopPropagation();
+    }
+  }, this));
+  this.romoDropdown.popupElem.on('click', $.proxy(function(e) {
+    this.optionFilter.focus();
+  }, this));
+
+  this.onkeySearchTimeout = undefined;
+  this.onkeySearchDelay   = 100; // 0.1 secs, want it to be really responsive
+
+  this.optionFilter.on('onkey:trigger', $.proxy(function(e, triggerEvent, onkey) {
+    // TODO: incorp this timeout logic into the onkey component so don't have to repeat it
+    clearTimeout(this.onkeySearchTimeout);
+    this.onkeySearchTimeout = setTimeout($.proxy(function() {
+      if (Romo.nonInputTextKeyCodes().indexOf(triggerEvent.keyCode) === -1 /* Input Text */) {
+        this.doFilterOptionElems();
+      }
+    }, this), this.onkeySearchDelay);
+  }, this));
+}
+
+RomoSelectDropdown.prototype.doFilterOptionElems = function() {
+  var wbFilter = new RomoWordBoundaryFilter(
+    this.optionFilter.val(),
+    this.romoDropdown.bodyElem.find('LI[data-romo-select-item="opt"]'),
+    function(elem) {
+      return elem[0].textContent;
+    }
+  );
+
+  wbFilter.matchingElems.show();
+  wbFilter.notMatchingElems.hide();
+  wbFilter.matchingElems.removeClass(this.filterHiddenClass);
+  wbFilter.notMatchingElems.addClass(this.filterHiddenClass);
+
+  this.romoDropdown.doPlacePopupElem();
+  if (this.optionFilter.val() !== '') {
+    this._highlightItem(wbFilter.matchingElems.first());
+    this._scrollTopToItem(wbFilter.matchingElems.first());
+  } else {
+    this._highlightItem(this.selectedListing());
+    this._scrollTopToItem(this.selectedListing());
+  }
+}
+
 RomoSelectDropdown.prototype.doSelectHighlightedItem = function() {
-  var prevValue = this.prevValue;
-  var newValue  = this.romoDropdown.bodyElem.find('LI.romo-select-highlight').data('romo-select-option-value');
+  var curr = this._getHighlightedItem();
+  if (curr.length !== 0) {
+    var prevValue = this.prevValue;
+    var newValue  = curr.data('romo-select-option-value');
 
-  this.romoDropdown.doPopupClose();
-  this.elem.trigger('selectDropdown:itemSelected', [newValue, prevValue, this]);
+    this.romoDropdown.doPopupClose();
+    this.elem.trigger('selectDropdown:itemSelected', [newValue, prevValue, this]);
 
-  if (newValue !== prevValue) {
-    this.doSetNewValue(newValue);
-    this.elem.trigger('selectDropdown:change', [newValue, prevValue, this]);
+    if (newValue !== prevValue) {
+      this.doSetNewValue(newValue);
+      this.elem.trigger('selectDropdown:change', [newValue, prevValue, this]);
+    }
   }
 }
 
@@ -172,6 +279,9 @@ RomoSelectDropdown.prototype.onPopupOpenBodyKeyDown = function(e) {
   } else if (e.keyCode === 13 /* Enter */ ) {
     this.doSelectHighlightedItem();
     return false;
+  } else if (e.keyCode === 9 /* Tab */ ) {
+    e.preventDefault();
+    return false;
   } else {
     return true;
   }
@@ -180,9 +290,19 @@ RomoSelectDropdown.prototype.onPopupOpenBodyKeyDown = function(e) {
 RomoSelectDropdown.prototype.onElemKeyDown = function(e) {
   if (this.elem.hasClass('disabled') === false) {
     if (this.romoDropdown.popupElem.hasClass('romo-dropdown-open') === false) {
-      if(e.keyCode === 40 /* Down */ ) {
+      if (e.keyCode === 40 /* Down */  || e.keyCode === 38 /* Up */) {
         this.romoDropdown.doPopupOpen();
         return false;
+      } else if (this.optionFilter !== undefined &&
+                 Romo.nonInputTextKeyCodes().indexOf(e.keyCode) === -1 /* Input Text */)  {
+        if (e.metaKey === false) {
+          // don't prevent default on Cmd-* keys (preserve Cmd-R refresh, etc)
+          e.preventDefault();
+        }
+        e.stopPropagation();
+        this.optionFilter.val(e.key);
+        this.romoDropdown.doPopupOpen();
+        return true;
       } else {
         return true;
       }
@@ -258,69 +378,74 @@ RomoSelectDropdown.prototype._buildOptGroupListItem = function(optGroupElem) {
   return item;
 }
 
-RomoSelectDropdown.prototype._nextListItem = function() {
-  var listOrItemSelector = 'UL, '+this.itemSelector;
-  var curr = this.romoDropdown.bodyElem.find('LI.romo-select-highlight');
-  var next = this._nextAll(curr, listOrItemSelector).first();
+RomoSelectDropdown.prototype._buildOptionFilter = function() {
+  var filter = $('<input type="text" class="romo-select-dropdown-option-filter"></input>');
 
-  if (next.size() === 0) {
-    next = this._nextAll(curr.closest('UL'), listOrItemSelector).first();
+  if (this.elem.data('romo-select-dropdown-filter-placeholder') !== undefined) {
+    filter.attr('placeholder', this.elem.data('romo-select-dropdown-filter-placeholder'));
   }
-  if (next.size() !== 0 && next[0].tagName === 'UL') {
-    next = next.find(this.itemSelector).first()
+  filter.attr('data-romo-indicator-text-input-elem-display', "block");
+  if (this.elem.data('romo-select-dropdown-filter-indicator') !== undefined) {
+    filter.attr('data-romo-indicator-text-input-indicator', this.elem.data('romo-select-dropdown-filter-indicator'));
   }
-  if (next.size() === 0) {
-    next = this.romoDropdown.bodyElem.find(this.itemSelector).first();
+  if (this.elem.data('romo-select-dropdown-filter-indicator-width-px') !== undefined) {
+    filter.attr('data-romo-indicator-text-input-indicator-width-px', this.elem.data('romo-select-dropdown-filter-indicator-width-px'));
   }
-  return next;
-}
+  filter.attr('data-romo-form-disable-enter-submit', "true");
+  filter.attr('data-romo-onkey-on', "keydown");
 
-RomoSelectDropdown.prototype._prevListItem = function() {
-  var listOrItemSelector = 'UL, '+this.itemSelector;
-  var curr = this.romoDropdown.bodyElem.find('LI.romo-select-highlight');
-  var prev = this._prevAll(curr, listOrItemSelector).last();
+  filter.attr('autocomplete', 'off');
 
-  if (prev.size() === 0) {
-    prev = this._prevAll(curr.closest('UL'), listOrItemSelector).last();
-  }
-  if (prev.size() !== 0 && prev[0].tagName === 'UL') {
-    prev = prev.find(this.itemSelector).last()
-  }
-  if (prev.size() === 0) {
-    prev = this.romoDropdown.bodyElem.find(this.itemSelector).last();
-  }
-  return prev;
+  return filter;
 }
 
-RomoSelectDropdown.prototype._nextAll = function(elem, selector) {
-  var els = $();
-  var el = elem.next();
-  while( el.length ) {
-    if (selector === undefined || el.is(selector)) {
-      els = els.add(el);
+RomoSelectDropdown.prototype._nextListItem = function() {
+  var curr = this._getHighlightedItem();
+  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();
     }
-    el = el.next();
   }
-  return els;
+  return next;
 }
 
-RomoSelectDropdown.prototype._prevAll = function(elem, selector) {
-  var els = $();
-  var el = elem.prev();
-  while( el.length ) {
-    if (selector === undefined || el.is(selector)) {
-      els = els.add(el);
+RomoSelectDropdown.prototype._prevListItem = function() {
+  var curr = this._getHighlightedItem();
+  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();
     }
-    el = el.prev();
   }
-  return els;
+  return prev;
 }
 
 RomoSelectDropdown.prototype._highlightItem = function(item) {
-  this.romoDropdown.bodyElem.find('LI.romo-select-highlight').removeClass('romo-select-highlight');
+  this._getHighlightedItem().removeClass('romo-select-highlight');
   item.addClass('romo-select-highlight');
 }
 
+RomoSelectDropdown.prototype._getHighlightedItem = function() {
+  return this.romoDropdown.bodyElem.find('LI.romo-select-highlight');
+}
+
 Romo.onInitUI(function(e) {
   Romo.initUIElems(e, '[data-romo-select-dropdown-auto="true"]').romoSelectDropdown();
 });

data/assets/js/romo/sortable.js

@@ -10,15 +10,28 @@ var RomoSortable = function(element) {
   this.draggableSelector = '[data-romo-sortable-item="true"]';
   this.handleSelector = '[data-romo-sortable-handle="true"]';
 
-  this.draggableElems = this.elem.find(this.draggableSelector);
-  this.draggableElems.prop('draggable', 'true');
+  this.draggedElem = this.draggedIndex = this.draggableSelected = null;
+  this.draggedOverElem = this.dragDirection = this.lastY = null;
+
+  this.doInit();
+  this.doBindDraggables();
+  this.doInitPlaceholder();
+  this._resetGrabClasses();
+
+  this.elem.trigger('sortable:ready', [this]);
+}
+
+RomoSortable.prototype.doInit = function() {
+  // override as needed
+}
 
-  this.draggingClass = this.elem.data('romo-sortable-dragging-class') || '';
-  this.dragOverClass = this.elem.data('romo-sortable-dragover-class') || '';
+RomoSortable.prototype.doBindDraggables = function() {
+  this.draggingClass    = this.elem.data('romo-sortable-dragging-class') || '';
+  this.dragOverClass    = this.elem.data('romo-sortable-dragover-class') || '';
   this.placeholderClass = this.elem.data('romo-sortable-placeholder-class') || '';
 
-  this.draggedElem = this.draggedIndex = this.draggableSelected = null;
-  this.draggedOverElem = this.dragDirection = this.lastY = null;
+  this.draggableElems = this.elem.find(this.draggableSelector);
+  this.draggableElems.prop('draggable', 'true');
 
   this.elem.on('dragenter', $.proxy(this.onDragEnter, this));
   this.elem.on('dragover',  $.proxy(this.onDragOver,  this));
@@ -36,16 +49,6 @@ var RomoSortable = function(element) {
   handleElems.on('mousedown', $.proxy(this.onHandleMouseDown, this));
 
   $('body').on('mouseup', $.proxy(this.onWindowBodyMouseUp, this));
-
-  this._resetGrabClasses();
-  this.doInit();
-  this.doInitPlaceholder();
-
-  this.elem.trigger('sortable:ready', [this]);
-}
-
-RomoSortable.prototype.doInit = function() {
-  // override as needed
 }
 
 RomoSortable.prototype.doInitPlaceholder = function() {

data/lib/romo/version.rb

@@ -1,3 +1,3 @@
 module Romo
-  VERSION = "0.17.0"
+  VERSION = "0.17.1"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification 
 name: romo
 version: !ruby/object:Gem::Version 
-  version: 0.17.0
+  version: 0.17.1
 platform: ruby
 authors: 
 - Kelly Redding
@@ -10,7 +10,7 @@ autorequire:
 bindir: bin
 cert_chain: []
 
-date: 2016-11-01 00:00:00 Z
+date: 2016-11-08 00:00:00 Z
 dependencies: 
 - !ruby/object:Gem::Dependency 
   name: assert