assets/js/romo/select.js in romo-0.19.6 vs assets/js/romo/select.js in romo-0.19.7

@@ -12,15 +12,15 @@
   this.defaultCaretPosition  = 'right'
 
   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));
   }
 
   $(window).on("pageshow", $.proxy(function(e) {
     this._refreshUI();
@@ -36,19 +36,40 @@
 RomoSelect.prototype.doInit = function() {
   // override as needed
 }
 
 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();
 }
 
 /* private */
 
 RomoSelect.prototype._bindElem = function() {
   this._bindSelectDropdown();
+  this._bindSelectedOptionsList();
 
   this.elem.on('select:triggerToggle', $.proxy(function(e) {
     this.romoSelectDropdown.elem.trigger('selectDropdown:triggerToggle', []);
   }, this));
   this.elem.on('select:triggerPopupOpen', $.proxy(function(e) {
@@ -57,10 +78,41 @@
   this.elem.on('select:triggerPopupClose', $.proxy(function(e) {
     this.romoSelectDropdown.elem.trigger('selectDropdown:triggerPopupClose', []);
   }, 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];
 
   this.romoSelectDropdown.elem.on('selectDropdown:dropdown:toggle', $.proxy(function(e, dropdown, selectDropdown) {
     this.elem.trigger('select:dropdown:toggle', [dropdown, this]);
@@ -71,15 +123,26 @@
   this.romoSelectDropdown.elem.on('selectDropdown:dropdown:popupClose', $.proxy(function(e, dropdown, selectDropdown) {
     this.elem.trigger('select:dropdown:popupClose', [dropdown, this]);
   }, 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));
   this.romoSelectDropdown.elem.on('selectDropdown:change', $.proxy(function(e, newValue, prevValue, selectDropdown) {
     this.elem.trigger('change');
@@ -176,30 +239,59 @@
   }
 
   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 = ' '
   }
   this.romoSelectDropdown.elem.find('.romo-select-text').html(text);
 }
 
 RomoSelect.prototype._onCaretClick = function(e) {
   if (this.elem.prop('disabled') === false) {
-    this.romoSelectDropdown.elem.focus();
+    this.romoSelectDropdown.doFocus();
     this.elem.trigger('select:triggerPopupOpen');
   }
 }
 
 RomoSelect.prototype._getCaretPaddingPx = function() {