romo 0.19.6 → 0.19.7

checksums.yaml

@@ -1,7 +1,7 @@
 --- 
-SHA512: 
-  metadata.gz: 643c9c0e9600c876e1ec481fafc0488260c94f0c99d06a53fbc7abe791b23ff363f0922cf2ba92f605e886df4403bb8b368631f83e080a74949583dccf21675c
-  data.tar.gz: 1dd48f7b1d07b69f3b2e135048ba7565a6b53e1758c08e242e7074d5a2e44fcc8f32ad9f731a3a8bfdbe3b64a4f715460814bda4d43bb74400afd3fd966f0abd
 SHA1: 
-  metadata.gz: 86052336ce3a41a0592c123eb52ad0c8f0a61709
-  data.tar.gz: 8d5fda1c6c5172f7e59664624dffc2830bb70410
+  metadata.gz: 97d1c8900aee3e16f65d499f0837bb74f6225033
+  data.tar.gz: 17737178b8474f79671d577bd173db8fffdfb817
+SHA512: 
+  metadata.gz: dc935bbf15d8cc944fff91f2e7c2687ec8b8d033839b881cd66d30a549d1eac82e258aa85d8517f91797fb4239317f496702467a58103545058c0f7b12b51dbd
+  data.tar.gz: 01dbeac8de96746f831ed7993efb7c65ef34f4c2aac876528ccf784c668f361c3c95c2b0a9fab537fc2a85a3ef9fc0b03a2f671a62b385ff8e49984a17573b04

data/assets/css/romo/forms.scss

@@ -318,7 +318,7 @@
     @include align-middle;
   }
 
-  /* input option list (used by selects vie option list dropdown) */
+  /* input option list (used by selects/pickers via option list dropdown) */
 
   .romo-input-option-list {
     cursor: pointer;
@@ -366,4 +366,26 @@
     color: $disabledColor;
   }
 
+  /* selected options list (used by multi selects/pickers) */
+
+  .romo-selected-options-list {
+    font-weight: normal;
+    @include user-select(none);
+    background-color: $inputBgColor;
+    color: $inputColor;
+    @include border1;
+
+    .romo-selected-options-list-items {
+      min-height: 35px;
+    }
+    .romo-selected-options-list-items {
+      padding: 4px;
+    }
+    .romo-selected-options-list-item {
+      display: inline-block;
+      @include border1;
+      @include bg-alt;
+    }
+  }
+
 }

data/assets/js/romo/datepicker.js

@@ -193,7 +193,7 @@ RomoDatepicker.prototype.onTriggerSetDate = function(e, value) {
 
 RomoDatepicker.prototype.onElemKeyDown = function(e) {
   if (this.elem.hasClass('disabled') === false) {
-    if (this.romoDropdown.popupElem.hasClass('romo-dropdown-open')) {
+    if (this.romoDropdown.popupOpen()) {
       return true;
     } else {
       if(e.keyCode === 40 /* Down */ ) {

data/assets/js/romo/dropdown.js

@@ -38,6 +38,14 @@ var RomoDropdown = function(element) {
   this.elem.trigger('dropdown:ready', [this]);
 }
 
+RomoDropdown.prototype.popupOpen = function() {
+  return this.popupElem.hasClass('romo-dropdown-open') === true;
+}
+
+RomoDropdown.prototype.popupClosed = function() {
+  return this.popupElem.hasClass('romo-dropdown-open') === false;
+}
+
 RomoDropdown.prototype.doInit = function() {
   // override as needed
 }
@@ -177,7 +185,7 @@ RomoDropdown.prototype.onToggleClick = function(e) {
 }
 
 RomoDropdown.prototype.doToggle = function() {
-  if (this.popupElem.hasClass('romo-dropdown-open')) {
+  if (this.popupOpen()) {
     setTimeout($.proxy(function() {
       this.doPopupClose();
     }, this), 100);
@@ -194,8 +202,7 @@ RomoDropdown.prototype.onPopupOpen = function(e) {
     e.preventDefault();
   }
 
-  if (this.elem.hasClass('disabled') === false &&
-      this.popupElem.hasClass('romo-dropdown-open') === false) {
+  if (this.elem.hasClass('disabled') === false && this.popupClosed()) {
     setTimeout($.proxy(function() {
       this.doPopupOpen();
     }, this), 100);
@@ -235,8 +242,7 @@ RomoDropdown.prototype.onPopupClose = function(e) {
     e.preventDefault();
   }
 
-  if (this.elem.hasClass('disabled') === false &&
-      this.popupElem.hasClass('romo-dropdown-open') === true) {
+  if (this.elem.hasClass('disabled') === false && this.popupOpen()) {
     setTimeout($.proxy(function() {
       this.doPopupClose();
     }, this), 100);
@@ -275,7 +281,7 @@ RomoDropdown.prototype.doUnBindElemKeyUp = function() {
 
 RomoDropdown.prototype.onElemKeyUp = function(e) {
   if (this.elem.hasClass('disabled') === false) {
-    if (this.popupElem.hasClass('romo-dropdown-open')) {
+    if (this.popupOpen()) {
       if(e.keyCode === 27 /* Esc */ ) {
         this.doPopupClose();
         this.elem.trigger('dropdown:popupClosedByEsc', [this]);

data/assets/js/romo/option_list_dropdown.js

@@ -29,6 +29,14 @@ RomoOptionListDropdown.prototype.popupElem = function() {
   return this.romoDropdown.popupElem;
 }
 
+RomoOptionListDropdown.prototype.popupOpen = function() {
+  return this.romoDropdown.popupOpen();
+}
+
+RomoOptionListDropdown.prototype.popupClosed = function() {
+  return this.romoDropdown.popupClosed();
+}
+
 RomoOptionListDropdown.prototype.selectedItemElem = function() {
   return this.romoDropdown.bodyElem.find('LI.selected');
 }
@@ -65,13 +73,20 @@ RomoOptionListDropdown.prototype.doInit = function() {
 
 RomoOptionListDropdown.prototype.doSetSelectedItem = function(itemValue) {
   this.selectedItemElem().removeClass('selected');
-  this.romoDropdown.bodyElem.find(
-    'LI[data-romo-option-list-dropdown-option-value="'+itemValue+'"]'
-  ).addClass('selected');
-  this.doSetSelectedValueAndText(
-    this.selectedItemElem().data('romo-option-list-dropdown-option-value'),
-    this.selectedItemElem().data('romo-option-list-dropdown-option-display-text')
-  );
+  if (itemValue !== undefined) {
+    this.romoDropdown.bodyElem.find(
+      'LI[data-romo-option-list-dropdown-option-value="'+itemValue+'"]'
+    ).addClass('selected');
+  }
+  var selectedElem = this.selectedItemElem();
+  if (selectedElem[0] !== undefined) {
+    this.doSetSelectedValueAndText(
+      this.selectedItemElem().data('romo-option-list-dropdown-option-value'),
+      this.selectedItemElem().data('romo-option-list-dropdown-option-display-text')
+    );
+  } else {
+    this.doSetSelectedValueAndText('', '');
+  }
 }
 
 RomoOptionListDropdown.prototype.doSetSelectedValueAndText = function(value, text) {
@@ -83,6 +98,15 @@ RomoOptionListDropdown.prototype.doSetSelectedValueAndText = function(value, tex
   this.prevValue = value;
 }
 
+RomoOptionListDropdown.prototype.doFocus = function(openOnFocus) {
+  if (openOnFocus === true) {
+    this.openOnFocus = true;
+  } else if (openOnFocus === false) {
+    this.openOnFocus = false;
+  }
+  this.elem.focus();
+}
+
 /*
 Options are specified as a list of items.  Each 'option' item object
 has either display text or html, a value, and can optionally be
@@ -451,7 +475,7 @@ RomoOptionListDropdown.prototype._onPopupOpenBodyKeyDown = function(e) {
 
 RomoOptionListDropdown.prototype._onElemKeyDown = function(e) {
   if (this.elem.hasClass('disabled') === false) {
-    if (this.romoDropdown.popupElem.hasClass('romo-dropdown-open') === false) {
+    if (this.romoDropdown.popupClosed()) {
       if (e.keyCode === 40 /* Down */  || e.keyCode === 38 /* Up */) {
         this.romoDropdown.doPopupOpen();
         return false;

data/assets/js/romo/picker.js

@@ -10,6 +10,7 @@ var RomoPicker = function(element) {
   this.defaultCaretClass     = undefined;
   this.defaultCaretPaddingPx = 5;
   this.defaultCaretPosition  = 'right'
+  this.defaultValuesDelim    = ',';
 
   this.defaultOptionItems  = this._buildDefaultOptionItems();
   this.filteredOptionItems = [];
@@ -17,18 +18,11 @@ var RomoPicker = function(element) {
   this.doInit();
   this._bindElem();
 
-  var presetVal = this.elem[0].value;
-  if (presetVal !== '') {
-    this.doSetValue(presetVal);
-  } else if (this.elem.data('romo-picker-empty-option') === true) {
-    this.doSetValueAndText('', this.elem.data('romo-picker-empty-option-display-text') || '');
-  } else {
-    this.doSetValueAndText('', '');
-  }
+  this.doSetValue(this._elemValues());
 
   if (this.elem.attr('id') !== undefined) {
     $('label[for="'+this.elem.attr('id')+'"]').on('click', $.proxy(function(e) {
-      this.romoOptionListDropdown.elem.focus();
+      this.romoOptionListDropdown.doFocus();
     }, this));
   }
 
@@ -47,26 +41,41 @@ RomoPicker.prototype.doInit = function() {
   // override as needed
 }
 
-RomoPicker.prototype.doSetValue = function(value) {
+RomoPicker.prototype.doSetValue = function(values) {
+  var value = undefined;
+  if (Array.isArray(values)) {
+    value = values.join(this._elemValuesDelim());
+  } else {
+    value = values;
+  }
   $.ajax({
     type:    'GET',
     url:     this.elem.data('romo-picker-url'),
     data:    { 'values': value },
-    success: $.proxy(function(data, status, xhr) {
-      if (data[0] !== undefined) {
-        this.doSetValueAndText(data[0].value, data[0].displayText);
-      } else  if (this.elem.data('romo-picker-empty-option') === true) {
-        this.doSetValueAndText('', this.elem.data('romo-picker-empty-option-display-text') || '');
-      } else {
-        this.doSetValueAndText('', '');
-      }
-    }, this),
+    success: $.proxy(function(data, status, xhr) { this.doSetValueDatas(data); }, this),
   });
 }
 
-RomoPicker.prototype.doSetValueAndText = function(value, text) {
-  this.romoOptionListDropdown.doSetSelectedValueAndText(value, text);
-  this._setValueAndText(value, text);
+RomoPicker.prototype.doSetValueDatas = function(valueDatas) {
+  var datas = undefined;
+  if (Array.isArray(valueDatas)) {
+    datas = valueDatas;
+  } else {
+    datas = [valueDatas];
+  }
+  var values       = datas.map(function(data) { return data.value; });
+  var displayTexts = datas.map(function(data) { return data.displayText; });
+
+  if (this.romoSelectedOptionsList !== undefined) {
+    this._setValuesAndDisplayText(values, '');
+    this.romoSelectedOptionsList.doSetItems(datas);
+  } else {
+    this._setValuesAndDisplayText(
+      values,
+      (displayTexts[0] || this.elem.data('romo-picker-empty-option-display-text') || '')
+    );
+    this.romoOptionListDropdown.doSetSelectedItem(values[0]);
+  }
   this._refreshUI();
 }
 
@@ -74,6 +83,7 @@ RomoPicker.prototype.doSetValueAndText = function(value, text) {
 
 RomoPicker.prototype._bindElem = function() {
   this._bindOptionListDropdown();
+  this._bindSelectedOptionsList();
   this._bindAjax();
 
   this.elem.on('romoPicker:triggerToggle', $.proxy(function(e) {
@@ -89,6 +99,37 @@ RomoPicker.prototype._bindElem = function() {
   this.romoOptionListDropdown.doSetListItems(this.defaultOptionItems);
 }
 
+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.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'));
+    }
+
+    this.romoSelectedOptionsList = new RomoSelectedOptionsList(this.romoOptionListDropdown.elem);
+    this.romoSelectedOptionsList.elem.on('romoSelectedOptionsList:itemClick', $.proxy(function(e, itemValue, romoSelectedOptionsList) {
+      var currentValues = this._elemValues();
+      var index         = currentValues.indexOf(itemValue);
+      if (index > -1) {
+        currentValues.splice(index, 1);
+        this._setValuesAndDisplayText(currentValues, '');
+      }
+      this.romoSelectedOptionsList.doRemoveItem(itemValue);
+      this._refreshUI();
+    }, this));
+    this.romoSelectedOptionsList.elem.on('romoSelectedOptionsList:listClick', $.proxy(function(e, romoSelectedOptionsList) {
+      this.romoOptionListDropdown.elem.trigger('dropdown:triggerPopupClose', []);
+      this.romoOptionListDropdown.doFocus(false);
+    }, this));
+
+    this.elemWrapper.before(this.romoSelectedOptionsList.elem);
+    this.romoSelectedOptionsList.doRefreshUI();
+  }
+}
+
 RomoPicker.prototype._bindOptionListDropdown = function() {
   this.romoOptionListDropdown = this._buildOptionListDropdownElem().romoOptionListDropdown(this.elem)[0];
 
@@ -114,11 +155,22 @@ RomoPicker.prototype._bindOptionListDropdown = function() {
     }
   }, this));
   this.romoOptionListDropdown.elem.on('romoOptionListDropdown:itemSelected', $.proxy(function(e, itemValue, itemDisplayText, optionListDropdown) {
-    this.romoOptionListDropdown.elem.focus();
+    this.romoOptionListDropdown.doFocus();
     this.elem.trigger('romoPicker:itemSelected', [itemValue, itemDisplayText, this]);
   }, this));
   this.romoOptionListDropdown.elem.on('romoOptionListDropdown:newItemSelected', $.proxy(function(e, itemValue, itemDisplayText, optionListDropdown) {
-    this._setValueAndText(itemValue, itemDisplayText);
+    if (this.romoSelectedOptionsList !== undefined) {
+      var currentValues = this._elemValues();
+      if (!currentValues.includes(itemValue)) {
+        this._setValuesAndDisplayText(currentValues.concat([itemValue]), '');
+        this.romoSelectedOptionsList.doAddItem({
+          'value':       itemValue,
+          'displayText': itemDisplayText
+        });
+      }
+    } else {
+      this._setValuesAndDisplayText([itemValue], itemDisplayText);
+    }
     this._refreshUI();
     this.elem.trigger('romoPicker:newItemSelected', [itemValue, itemDisplayText, this]);
   }, this));
@@ -285,14 +337,22 @@ RomoPicker.prototype._buildCustomOptionItem = function(value) {
   };
 }
 
-RomoPicker.prototype._setValueAndText = function(value, text) {
-  this.elem[0].value = 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', text);
+  this.elem.attr('data-romo-picker-display-text', displayText);
+}
+
+RomoPicker.prototype._elemValues = function() {
+  return this.elem[0].value.split(this._elemValuesDelim()).filter(function(v){ return v !== ''; });
+}
+
+RomoPicker.prototype._elemValuesDelim = function() {
+  return this.elem.data('romo-picker-values-delim') || this.defaultValuesDelim;
 }
 
 RomoPicker.prototype._refreshUI = function() {
@@ -300,6 +360,9 @@ RomoPicker.prototype._refreshUI = function() {
   // 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');
+  if (this.romoSelectedOptionsList !== undefined) {
+    this.romoSelectedOptionsList.doRefreshUI();
+  }
   if (text === '') {
     text = ' '
   }
@@ -308,7 +371,7 @@ RomoPicker.prototype._refreshUI = function() {
 
 RomoPicker.prototype._onCaretClick = function(e) {
   if (this.elem.prop('disabled') === false) {
-    this.romoOptionListDropdown.elem.focus();
+    this.romoOptionListDropdown.doFocus();
     this.elem.trigger('romoPicker:triggerPopupOpen');
   }
 }

data/assets/js/romo/select.js

@@ -14,11 +14,11 @@ var RomoSelect = function(element) {
   this.doInit();
   this._bindElem();
 
-  this.doSetValue(this.elem[0].value);
+  this.doSetValue(this._elemValues());
 
   if (this.elem.attr('id') !== undefined) {
     $('label[for="'+this.elem.attr('id')+'"]').on('click', $.proxy(function(e) {
-      this.romoSelectDropdown.elem.focus();
+      this.romoSelectDropdown.doFocus();
     }, this));
   }
 
@@ -38,8 +38,28 @@ RomoSelect.prototype.doInit = function() {
 }
 
 RomoSelect.prototype.doSetValue = function(value) {
-  this.romoSelectDropdown.doSetSelectedItem(value);
-  this._setValue(value);
+  var values = undefined;
+  if (Array.isArray(value)) {
+    values = value;
+  } else {
+    values = [value];
+  }
+  values = values.filter($.proxy(function(v) {
+    return this.elem.find('OPTION[value="'+v+'"]')[0] !== undefined;
+  }, this));
+
+  this._setValues(values);
+  if (this.romoSelectedOptionsList !== undefined) {
+    var items = values.map($.proxy(function(value) {
+      return {
+        'value':       value,
+        'displayText': this.elem.find('OPTION[value="'+value+'"]').text().trim()
+      };
+    }, this));
+    this.romoSelectedOptionsList.doSetItems(items);
+  } else {
+    this.romoSelectDropdown.doSetSelectedItem(values[0]);
+  }
   this._refreshUI();
 }
 
@@ -47,6 +67,7 @@ RomoSelect.prototype.doSetValue = function(value) {
 
 RomoSelect.prototype._bindElem = function() {
   this._bindSelectDropdown();
+  this._bindSelectedOptionsList();
 
   this.elem.on('select:triggerToggle', $.proxy(function(e) {
     this.romoSelectDropdown.elem.trigger('selectDropdown:triggerToggle', []);
@@ -59,6 +80,37 @@ RomoSelect.prototype._bindElem = function() {
   }, this));
 }
 
+RomoSelect.prototype._bindSelectedOptionsList = function() {
+  this.romoSelectedOptionsList = undefined;
+  if (this.elem.prop('multiple') === true) {
+    if (this.elem.data('romo-select-multiple-item-class') !== undefined) {
+      this.romoSelectDropdown.elem.attr('data-romo-selected-options-list-item-class', this.elem.data('romo-select-multiple-item-class'));
+    }
+    if (this.elem.data('romo-select-multiple-max-rows') !== undefined) {
+      this.romoSelectDropdown.elem.attr('data-romo-selected-options-list-max-rows', this.elem.data('romo-select-multiple-max-rows'));
+    }
+
+    this.romoSelectedOptionsList = new RomoSelectedOptionsList(this.romoSelectDropdown.elem);
+    this.romoSelectedOptionsList.elem.on('romoSelectedOptionsList:itemClick', $.proxy(function(e, itemValue, romoSelectedOptionsList) {
+      var currentValues = this._elemValues();
+      var index         = currentValues.indexOf(itemValue);
+      if (index > -1) {
+        currentValues.splice(index, 1);
+        this._setValues(currentValues);
+      }
+      this.romoSelectedOptionsList.doRemoveItem(itemValue);
+      this._refreshUI();
+    }, this));
+    this.romoSelectedOptionsList.elem.on('romoSelectedOptionsList:listClick', $.proxy(function(e, romoSelectedOptionsList) {
+      this.romoSelectDropdown.elem.trigger('dropdown:triggerPopupClose', []);
+      this.romoSelectDropdown.doFocus(false);
+    }, this));
+
+    this.elemWrapper.before(this.romoSelectedOptionsList.elem);
+    this.romoSelectedOptionsList.doRefreshUI();
+  }
+}
+
 RomoSelect.prototype._bindSelectDropdown = function() {
   this.romoSelectDropdown = this._buildSelectDropdownElem().romoSelectDropdown(this.elem)[0];
 
@@ -73,11 +125,22 @@ RomoSelect.prototype._bindSelectDropdown = function() {
   }, this));
 
   this.romoSelectDropdown.elem.on('selectDropdown:itemSelected', $.proxy(function(e, itemValue, itemDisplayText, selectDropdown) {
-    this.romoSelectDropdown.elem.focus();
+    this.romoSelectDropdown.doFocus();
     this.elem.trigger('select:itemSelected', [itemValue, itemDisplayText, this]);
   }, this));
   this.romoSelectDropdown.elem.on('selectDropdown:newItemSelected', $.proxy(function(e, itemValue, itemDisplayText, selectDropdown) {
-    this._setValue(itemValue);
+    if (this.romoSelectedOptionsList !== undefined) {
+      var currentValues = this._elemValues();
+      if (!currentValues.includes(itemValue)) {
+        this._setValues(currentValues.concat([itemValue]));
+        this.romoSelectedOptionsList.doAddItem({
+          'value':       itemValue,
+          'displayText': itemDisplayText
+        });
+      }
+    } else {
+      this._setValues([itemValue]);
+    }
     this._refreshUI();
     this.elem.trigger('select:newItemSelected', [itemValue, itemDisplayText, this]);
   }, this));
@@ -178,18 +241,47 @@ RomoSelect.prototype._buildSelectDropdownElem = function() {
   return romoSelectDropdownElem;
 }
 
-RomoSelect.prototype._setValue = function(value) {
-  var prevOptElem = this.elem.find('OPTION[value="'+this.elem[0].value+'"]');
-  var newOptElem  = this.elem.find('OPTION[value="'+value+'"]');
+RomoSelect.prototype._setValues = function(newValues) {
+  var currentValues = this._elemValues();
 
-  prevOptElem.removeAttr('selected');
-  prevOptElem.prop('selected', false);
-  newOptElem.attr('selected', 'selected');
-  newOptElem.prop('selected', true);
+  var unsetValues = currentValues.filter(function(value) {
+    return newValues.indexOf(value) === -1;
+  });
+  var setValues = newValues.filter(function(value) {
+    return currentValues.indexOf(value) === -1;
+  });
+  var unsetElems = unsetValues.reduce($.proxy(function(elems, value) {
+    return elems.add(this.elem.find('OPTION[value="'+value+'"]'));
+  }, this), $());
+  var setElems = setValues.reduce($.proxy(function(elems, value) {
+    return elems.add(this.elem.find('OPTION[value="'+value+'"]'));
+  }, this), $());
+
+  unsetElems.removeAttr('selected');
+  unsetElems.prop('selected', false);
+  setElems.attr('selected', 'selected');
+  setElems.prop('selected', true);
+}
+
+RomoSelect.prototype._elemValues = function() {
+  var selectedNodes = this.elem.find('OPTION[selected]').get();
+  if (selectedNodes.length === 0 && this.romoSelectedOptionsList === undefined) {
+    // if a non-multi select has no selected options, treat the first option as selected
+    selectedNodes = [this.elem.find('OPTION')[0]];
+  }
+  return selectedNodes.map(function(node) {
+    return ($(node).attr('value') || '');
+  });
 }
 
 RomoSelect.prototype._refreshUI = function() {
-  var text = this.elem.find('OPTION[selected="selected"]').text().trim();
+  var text = undefined;
+  if (this.romoSelectedOptionsList !== undefined) {
+    text = '';
+    this.romoSelectedOptionsList.doRefreshUI();
+  } else {
+    text = this.elem.find('OPTION[value="'+this._elemValues()[0]+'"]').text().trim();
+  }
   if (text === '') {
     text = ' '
   }
@@ -198,7 +290,7 @@ RomoSelect.prototype._refreshUI = function() {
 
 RomoSelect.prototype._onCaretClick = function(e) {
   if (this.elem.prop('disabled') === false) {
-    this.romoSelectDropdown.elem.focus();
+    this.romoSelectDropdown.doFocus();
     this.elem.trigger('select:triggerPopupOpen');
   }
 }

data/assets/js/romo/select_dropdown.js

@@ -31,6 +31,14 @@ RomoSelectDropdown.prototype.popupElem = function() {
   return this.romoOptionListDropdown.popupElem();
 }
 
+RomoSelectDropdown.prototype.popupOpen = function() {
+  return this.romoOptionListDropdown.popupOpen();
+}
+
+RomoSelectDropdown.prototype.popupClosed = function() {
+  return this.romoOptionListDropdown.popupClosed();
+}
+
 RomoSelectDropdown.prototype.selectedItemElem = function() {
   return this.romoOptionListDropdown.selectedItemElem();
 }
@@ -63,6 +71,10 @@ RomoSelectDropdown.prototype.doSetSelectedItem = function(newValue) {
   this.romoOptionListDropdown.doSetSelectedItem(newValue);
 }
 
+RomoSelectDropdown.prototype.doFocus = function(openOnFocus) {
+  this.romoOptionListDropdown.doFocus(openOnFocus);
+}
+
 /* private */
 
 RomoSelectDropdown.prototype._bindElem = function() {

data/assets/js/romo/selected_options_list.js

@@ -0,0 +1,161 @@
+var RomoSelectedOptionsList = function(focusElem) {
+  this.elem      = undefined;
+  this.focusElem = focusElem; // picker/select dropdown elem
+
+  this.items = [];
+
+  this.doInit();
+  this._bindElem();
+}
+
+RomoSelectedOptionsList.prototype.doInit = function() {
+  // override as needed
+}
+
+/*
+Options are specified as a list of items.  Each 'option' item object
+has display text and a value. They are compatible with the option list
+dropdown option items.
+
+Example:
+[ { 'type': 'option', 'value': 'a', 'displayText': 'A' },
+  { 'type': 'option', 'value': 'b', 'displayText': 'B' },
+  { 'type': 'option', 'value': 'c', 'displayText': 'C' }
+]
+*/
+
+RomoSelectedOptionsList.prototype.doSetItems = function(itemsList) {
+  this.items = itemsList;
+}
+
+RomoSelectedOptionsList.prototype.doClearItems = function() {
+  this.items = [];
+}
+
+RomoSelectedOptionsList.prototype.doAddItem = function(item) {
+  if (!this._getItemValues().includes(item.value)) {
+    this.items.push(item);
+  }
+}
+
+RomoSelectedOptionsList.prototype.doRemoveItem = function(itemValue) {
+  var index = this._getItemValues().indexOf(itemValue);
+  if (index > -1) {
+    this.items.splice(index, 1);
+  }
+}
+
+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 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) {
+    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 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');
+  }, this));
+
+  var focusElemWidth = parseInt(Romo.getComputedStyle(this.focusElem[0], "width"), 10);
+  this.elem.css('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 itemBorderWidth  = 1;
+    var listTopPad       = parseInt(Romo.getComputedStyle(uiListElem[0], "padding-top"), 10);
+    var listBottomPad    = parseInt(Romo.getComputedStyle(uiListElem[0], "padding-bottom"), 10);
+
+    var maxRows   = this.focusElem.data('romo-selected-options-list-max-rows') || 0;
+    var maxHeight = listTopPad+(itemHeight*maxRows)+(itemMarginBottom*(maxRows-1))+(2*itemBorderWidth*maxRows)+listBottomPad+(itemHeight/2);
+  }
+  if (maxRows !== undefined && (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));
+  } else {
+    this.elem.css({
+      'height':     String(uiListElemHeight)+'px',
+      'overflow-y': undefined
+    });
+  }
+}
+
+/* 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));
+
+  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));
+
+  return itemElem;
+}
+
+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[0] !== undefined) {
+    var scroll = this.elem;
+    scroll.scrollTop(0);
+
+    var scrollOffsetTop = scroll.offset().top;
+    var selOffsetTop    = itemElem.offset().top;
+    var selOffset       = itemElem.height() / 2;
+
+    scroll.scrollTop(selOffsetTop - scrollOffsetTop - selOffset);
+  }
+}

data/lib/romo/dassets.rb

@@ -56,6 +56,7 @@ module Romo::Dassets
         'js/romo/indicator.js',
         'js/romo/indicator_text_input.js',
         'js/romo/currency_text_input.js',
+        'js/romo/selected_options_list.js',
         'js/romo/option_list_dropdown.js',
         'js/romo/select_dropdown.js',
         'js/romo/select.js',

data/lib/romo/version.rb

@@ -1,3 +1,3 @@
 module Romo
-  VERSION = "0.19.6"
+  VERSION = "0.19.7"
 end

data/test/unit/dassets_tests.rb

@@ -58,6 +58,7 @@ module Romo::Dassets
         'js/romo/indicator.js',
         'js/romo/indicator_text_input.js',
         'js/romo/currency_text_input.js',
+        'js/romo/selected_options_list.js',
         'js/romo/option_list_dropdown.js',
         'js/romo/select_dropdown.js',
         'js/romo/select.js',

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification 
 name: romo
 version: !ruby/object:Gem::Version 
-  version: 0.19.6
+  version: 0.19.7
 platform: ruby
 authors: 
 - Kelly Redding
@@ -10,7 +10,7 @@ autorequire:
 bindir: bin
 cert_chain: []
 
-date: 2017-08-25 00:00:00 Z
+date: 2017-09-06 00:00:00 Z
 dependencies: 
 - !ruby/object:Gem::Dependency 
   name: assert
@@ -99,6 +99,7 @@ files:
 - assets/js/romo/picker.js
 - assets/js/romo/select.js
 - assets/js/romo/select_dropdown.js
+- assets/js/romo/selected_options_list.js
 - assets/js/romo/sortable.js
 - assets/js/romo/tooltip.js
 - assets/js/romo/word_boundary_filter.js