romo 0.20.10 → 0.20.11

checksums.yaml

@@ -1,7 +1,7 @@
 --- 
-SHA1: 
-  metadata.gz: f188c7ec6458f78c8fac481fb5a55c9e26d12b12
-  data.tar.gz: 2efa22bf82590430a69ae5b97f2f16a91787bcc7
 SHA512: 
-  metadata.gz: 0b341879e0b7413f8a207a8b674be4941907fc7fb5c3b4ce70226fd04f5da65ed7e5b72c2260dbedab021cd6d9c929aa7fce04d89e144b797b8f23c40adf6e54
-  data.tar.gz: c62ca09016eefa8044f95fbdf1327185110d09a4341788ea246e0b052cce80dec4ae3665dec35f92267fc7ac7e569912067b8dcb749235f76def0dfd04966d3a
+  data.tar.gz: 808ea2ad05f17ec79e56d481ea45213ea7d5fd2e89d17165d05b03b6f25c2a4f6d831e00bd558b882ef6965eba96f424061ca7f305c9382c02ad7b4237cbd4b3
+  metadata.gz: 929531f2eac4058d404c755516b7996f9c073bad45a97b345b0004dbc501038202ce81cd8f817ed9f71bea0e1e41643fc719730110449ca79c22427e3b562e46
+SHA1: 
+  data.tar.gz: 7e903175bd957a7425036484e9b380bbcf622fd5
+  metadata.gz: c4b671aa8bc3a18ae06d71008c553e71dc1ba89a

data/assets/css/romo/color_select.scss

@@ -0,0 +1,62 @@
+@import 'css/romo/vars';
+@import 'css/romo/mixins';
+
+.romo {
+
+  .romo-color-select-wrapper {
+    display: inline-block;
+    text-align: left;
+    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
+    cursor: pointer;
+    @include user-select(none);
+    position: relative;
+  }
+
+  .romo-color-select {
+    min-width: 50px;
+    font-weight: normal;
+    text-align: left;
+    padding-left: 6px;
+    padding-right: 6px;
+  }
+
+  .romo-color-select:focus,
+  .romo-color-select.romo-color-select-focus { @include input-focus; }
+
+  .romo-color-select:active,
+  .romo-color-select.active {
+    background-image: none;
+    outline: 0;
+    @include box-shadow((inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)));
+  }
+
+  .romo-color-select-text {
+    white-space: nowrap;
+    overflow: hidden;
+    display: inline-block;
+    width: 100%;
+  }
+
+  .romo-color-select-caret {
+    display: inline-block;
+    position: absolute;
+    vertical-align: middle;
+    cursor: pointer;
+  }
+
+  .romo-color-select-item {
+    @include pad0();
+  }
+  .romo-color-select-item-color,
+  .romo-color-select-item-name {
+    display: inline-block;
+    vertical-align: middle;
+    line-height: $lineHeight1;
+  }
+  .romo-color-select-item-color {
+    @include push0-right();
+    @include border1();
+    width: $lineHeight1;
+  }
+
+}

data/assets/js/romo/color_select.js

@@ -0,0 +1,580 @@
+var RomoColorSelect = RomoComponent(function(elem) {
+  this.elem = elem;
+
+  this.defaultCaretClass     = undefined;
+  this.defaultCaretPaddingPx = 5;
+  this.defaultCaretWidthPx   = 18;
+  this.defaultCaretPosition  = 'right'
+
+  this.defaultValuesDelim = ',';
+  this.defaultOptionItems = this._buildDefaultOptionItems();
+
+  this.doRefreshColorItemsJson();
+  this.doInit();
+  this._bindElem();
+
+  Romo.trigger(this.elem, 'romoColorSelect:ready', [this]);
+});
+
+RomoColorSelect.prototype.doSetValue = function(value) {
+  var items, values, displayText;
+
+  items = Romo.array(value).map(Romo.proxy(function(v) {
+    return this.colorItems.find(function(i) { return i.value === v; });
+  }, this));
+  items = items.filter(function(i) { return i !== undefined; });
+  items = items.map(function(i) {
+    return {
+      'value':       i.value,
+      'displayText': i.displayText
+    };
+  });
+  values = items.map(function(i) { return i.value; });
+
+  if (this.romoSelectedOptionsList !== undefined) {
+    displayText = '';
+    this.romoSelectedOptionsList.doSetItems(items);
+  } else if (items[0]) {
+    displayText = items[0].displayText;
+    this.romoOptionListDropdown.doSetSelectedItem(values[0]);
+  } else {
+    displayText = Romo.data(this.elem, 'romo-color-select-empty-option-display-text') || '';
+    this.romoOptionListDropdown.doSetSelectedItem(undefined);
+  }
+  this._setValuesAndDisplayText(values, displayText);
+  this._refreshUI();
+}
+
+RomoColorSelect.prototype.doRefreshColorItemsJson = function() {
+  var items, values;
+  itemTuples = Romo.data(this.elem, 'romo-color-select-items-json');
+  values     = this._elemValues();
+
+  this.colorItems = itemTuples.map(Romo.proxy(function(itemTuple) {
+    return this._buildColorItem(values, {
+      'value': itemTuple[0],
+      'name':  itemTuple[1]
+    });
+  }, this));
+}
+
+// private
+
+RomoColorSelect.prototype._buildColorItem = function(elemValues, itemData) {
+  return {
+    'value':       itemData.value,
+    'displayText': itemData.name,
+    'displayHtml': this._buildColorItemDisplayHtml(itemData),
+    'selected':    elemValues.includes(itemData.value)
+  }
+}
+
+RomoColorSelect.prototype._buildColorItemDisplayHtml = function(itemData) {
+  return (
+    '<div class="romo-color-select-item">'+
+      '<div class="romo-color-select-item-color"'+
+           'style="background-color: '+itemData.value+'">&nbsp;</div>'+
+      '<div class="romo-color-select-item-name">'+itemData.name+'</div>'+
+    '</div>'
+  );
+}
+
+RomoColorSelect.prototype._bindElem = function() {
+  this._bindOptionListDropdown();
+  this._bindSelectedOptionsList();
+
+  Romo.on(this.elem, 'romoColorSelect:triggerToggle', Romo.proxy(function(e) {
+    Romo.trigger(this.romoOptionListDropdown.elem, 'romoOptionListDropdown:triggerToggle', []);
+  }, this));
+  Romo.on(this.elem, 'romoColorSelect:triggerPopupOpen', Romo.proxy(function(e) {
+    Romo.trigger(this.romoOptionListDropdown.elem, 'romoOptionListDropdown:triggerPopupOpen', []);
+  }, this));
+  Romo.on(this.elem, 'romoColorSelect:triggerPopupClose', Romo.proxy(function(e) {
+    Romo.trigger(this.romoOptionListDropdown.elem, 'romoOptionListDropdown:triggerPopupClose', []);
+  }, this));
+  Romo.on(this.elem, 'romoColorSelect:triggerRefreshColorItemsJson', Romo.proxy(function(e) {
+    this.doRefreshColorItemsJson();
+  }, this));
+
+  this._setUnfilteredListItems();
+  this.doSetValue(this._elemValues());
+
+  if (Romo.attr(this.elem, 'id') !== undefined) {
+    var labelElem = Romo.f('label[for="'+Romo.attr(this.elem, 'id')+'"]');
+    Romo.on(labelElem, 'click', Romo.proxy(function(e) {
+      e.preventDefault();
+      this.romoOptionListDropdown.doFocus();
+    }, this));
+  }
+
+  Romo.on(window, "pageshow", Romo.proxy(function(e) {
+    this._refreshUI();
+  }, this));
+
+  Romo.on(this.elem, 'romoColorSelect:triggerSetValue', Romo.proxy(function(e, value) {
+    this.doSetValue(value)
+  }, this));
+}
+
+RomoColorSelect.prototype._bindSelectedOptionsList = function() {
+  this.romoSelectedOptionsList = undefined;
+  if (this.elem.multiple === true) {
+    if (Romo.data(this.elem, 'romo-color-select-multiple-item-class') !== undefined) {
+      Romo.setData(
+        this.romoOptionListDropdown.elem,
+        'romo-selected-options-list-item-class',
+        Romo.data(this.elem, 'romo-color-select-multiple-item-class')
+      );
+    }
+    if (Romo.data(this.elem, 'romo-color-select-multiple-max-rows') !== undefined) {
+      Romo.setData(
+        this.romoOptionListDropdown.elem,
+        'romo-selected-options-list-max-rows',
+        Romo.data(this.elem, 'romo-color-select-multiple-max-rows')
+      );
+    }
+
+    this.romoSelectedOptionsList = new RomoSelectedOptionsList(this.romoOptionListDropdown.elem);
+    Romo.on(
+      this.romoSelectedOptionsList.elem,
+      'romoSelectedOptionsList:itemClick',
+      Romo.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();
+
+        Romo.trigger(this.elem, 'change');
+        Romo.trigger(
+          this.elem,
+          'romoSelect:multipleChange',
+          [currentValues, itemValue, this]
+        );
+      }, this)
+    );
+    Romo.on(
+      this.romoSelectedOptionsList.elem,
+      'romoSelectedOptionsList:listClick',
+      Romo.proxy(function(e, romoSelectedOptionsList) {
+        Romo.trigger(this.romoOptionListDropdown.elem, 'romoDropdown:triggerPopupClose', []);
+        this.romoOptionListDropdown.doFocus(false);
+      }, this)
+    );
+
+    Romo.before(this.elemWrapper, this.romoSelectedOptionsList.elem);
+    this.romoSelectedOptionsList.doRefreshUI();
+  }
+}
+
+RomoColorSelect.prototype._bindOptionListDropdown = function() {
+  this.romoOptionListDropdown = new RomoOptionListDropdown(
+    this._buildOptionListDropdownElem()
+  );
+
+  Romo.on(
+    this.romoOptionListDropdown.elem,
+    'romoOptionListDropdown:romoDropdown:toggle',
+    Romo.proxy(function(e, romoDropdown, optionListDropdown) {
+      Romo.trigger(this.elem, 'romoColorSelect:romoDropdown:toggle', [romoDropdown, this]);
+    }, this)
+  );
+  Romo.on(
+    this.romoOptionListDropdown.elem,
+    'romoOptionListDropdown:romoDropdown:popupOpen',
+    Romo.proxy(function(e, romoDropdown, optionListDropdown) {
+      Romo.trigger(this.elem, 'romoColorSelect:romoDropdown:popupOpen', [romoDropdown, this]);
+    }, this)
+  );
+  Romo.on(
+    this.romoOptionListDropdown.elem,
+    'romoOptionListDropdown:romoDropdown:popupClose',
+    Romo.proxy(function(e, romoDropdown, optionListDropdown) {
+      Romo.trigger(this.elem, 'romoColorSelect:romoDropdown:popupClose', [romoDropdown, this]);
+    }, this)
+  );
+
+  Romo.on(
+    this.romoOptionListDropdown.elem,
+    'romoOptionListDropdown:filterChange',
+    Romo.proxy(function(e, filterValue, romoOptionListDropdown) {
+      var wbFilter = new RomoWordBoundaryFilter(filterValue, this.colorItems, function(item) {
+        // 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 item.displayText.replace(/\W/g, ' ');
+      });
+
+      wbFilter.matchingItems.forEach(function(i){    i.hidden = false; });
+      wbFilter.notMatchingItems.forEach(function(i){ i.hidden = true;  });
+
+      if (filterValue !== '') {
+        this._setFilteredListItems();
+        Romo.trigger(
+          this.romoOptionListDropdown.elem,
+          'romoOptionListDropdown:triggerListOptionsUpdate',
+          [this.romoOptionListDropdown.optItemElems()[0]]
+        );
+      } else {
+        this._setUnfilteredListItems();
+        Romo.trigger(
+          this.elem,
+          'romoOptionListDropdown:triggerListOptionsUpdate',
+          [this.romoOptionListDropdown.selectedItemElem()]
+        );
+      }
+    }, this)
+  );
+  Romo.on(
+    this.romoOptionListDropdown.elem,
+    'romoOptionListDropdown:itemSelected',
+    Romo.proxy(function(e, itemValue, itemDisplayText, optionListDropdown) {
+      this.romoOptionListDropdown.doFocus();
+      Romo.trigger(this.elem, 'romoColorSelect:itemSelected', [itemValue, itemDisplayText, this]);
+    }, this)
+  );
+  Romo.on(
+    this.romoOptionListDropdown.elem,
+    'romoOptionListDropdown:newItemSelected',
+    Romo.proxy(function(e, itemValue, itemDisplayText, optionListDropdown) {
+      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();
+      Romo.trigger(this.elem, 'romoColorSelect:newItemSelected', [itemValue, itemDisplayText, this]);
+    }, this)
+  );
+  Romo.on(
+    this.romoOptionListDropdown.elem,
+    'romoOptionListDropdown:change',
+    Romo.proxy(function(e, newValue, prevValue, optionListDropdown) {
+      Romo.trigger(this.elem, 'change');
+      if (this.romoSelectedOptionsList !== undefined) {
+        Romo.trigger(
+          this.elem,
+          'romoColorSelect:multipleChange',
+          [this._elemValues(), newValue, this]
+        );
+      } else {
+        Romo.trigger(this.elem, 'romoColorSelect:change', [newValue, prevValue, this]);
+      }
+
+    }, this)
+  );
+}
+
+RomoColorSelect.prototype._buildOptionListDropdownElem = function() {
+  var romoOptionListDropdownElem = Romo.elems(
+    '<div class="romo-color-select romo-btn" tabindex="0">'+
+      '<span class="romo-color-select-text"></span>'+
+    '</div>'
+  )[0];
+
+  Romo.setData(romoOptionListDropdownElem, 'romo-dropdown-overflow-x', 'hidden');
+  Romo.setData(romoOptionListDropdownElem, 'romo-dropdown-width',      'elem');
+  Romo.setData(
+    romoOptionListDropdownElem,
+    'romo-option-list-focus-style-class',
+    'romo-color-select-focus'
+  );
+
+  if (Romo.data(this.elem, 'romo-color-select-dropdown-position') !== undefined) {
+    Romo.setData(
+      romoOptionListDropdownElem,
+      'romo-dropdown-position',
+      Romo.data(this.elem, 'romo-color-select-dropdown-position')
+    );
+  }
+  if (Romo.data(this.elem, 'romo-color-select-dropdown-style-class') !== undefined) {
+    Romo.setData(
+      romoOptionListDropdownElem,
+      'romo-dropdown-style-class',
+      Romo.data(this.elem, 'romo-color-select-dropdown-style-class')
+    );
+  }
+  if (Romo.data(this.elem, 'romo-color-select-dropdown-min-height') !== undefined) {
+    Romo.setData(
+      romoOptionListDropdownElem,
+      'romo-dropdown-min-height',
+      Romo.data(this.elem, 'romo-color-select-dropdown-min-height')
+    );
+  }
+  if (Romo.data(this.elem, 'romo-color-select-dropdown-max-height') !== undefined) {
+    Romo.setData(
+      romoOptionListDropdownElem,
+      'romo-dropdown-max-height',
+      Romo.data(this.elem, 'romo-color-select-dropdown-max-height')
+    );
+  }
+  if (Romo.data(this.elem, 'romo-color-select-dropdown-height') !== undefined) {
+    Romo.setData(
+      romoOptionListDropdownElem,
+      'romo-dropdown-height',
+      Romo.data(this.elem, 'romo-color-select-dropdown-height')
+    );
+  }
+  if (Romo.data(this.elem, 'romo-color-select-dropdown-append-to-closest') !== undefined) {
+    Romo.setData(
+      romoOptionListDropdownElem,
+      'romo-dropdown-append-to-closest',
+      Romo.data(this.elem, 'romo-color-select-dropdown-append-to-closest')
+    );
+  }
+  if (Romo.data(this.elem, 'romo-color-select-dropdown-append-to') !== undefined) {
+    Romo.setData(
+      romoOptionListDropdownElem,
+      'romo-dropdown-append-to',
+      Romo.data(this.elem, 'romo-color-select-dropdown-append-to')
+    );
+  }
+  if (Romo.data(this.elem, 'romo-color-select-filter-placeholder') !== undefined) {
+    Romo.setData(
+      romoOptionListDropdownElem,
+      'romo-option-list-dropdown-filter-placeholder',
+      Romo.data(this.elem, 'romo-color-select-filter-placeholder')
+    );
+  }
+  if (Romo.data(this.elem, 'romo-color-select-filter-indicator') !== undefined) {
+    Romo.setData(
+      romoOptionListDropdownElem,
+      'romo-option-list-dropdown-filter-indicator',
+      Romo.data(this.elem, 'romo-color-select-filter-indicator')
+    );
+  }
+  if (Romo.data(this.elem, 'romo-color-select-filter-indicator-width-px') !== undefined) {
+    Romo.setData(
+      romoOptionListDropdownElem,
+      'romo-option-list-filter-indicator-width-px',
+      Romo.data(this.elem, 'romo-color-select-filter-indicator-width-px')
+    );
+  }
+  if (Romo.data(this.elem, 'romo-color-select-no-filter') !== undefined) {
+    Romo.setData(
+      romoOptionListDropdownElem,
+      'romo-option-list-dropdown-no-filter',
+      Romo.data(this.elem, 'romo-color-select-no-filter')
+    );
+  }
+  if (Romo.data(this.elem, 'romo-color-select-open-on-focus') !== undefined) {
+    Romo.setData(
+      romoOptionListDropdownElem,
+      'romo-option-list-dropdown-open-on-focus',
+      Romo.data(this.elem, 'romo-color-select-open-on-focus')
+    );
+  }
+
+  if (Romo.data(romoOptionListDropdownElem, 'romo-dropdown-max-height') === undefined) {
+    Romo.setData(romoOptionListDropdownElem, 'romo-dropdown-max-height', 'detect');
+  }
+
+  if (Romo.attr(this.elem, 'class') !== undefined) {
+    Romo.addClass(romoOptionListDropdownElem, Romo.attr(this.elem, 'class'));
+  }
+  if (Romo.attr(this.elem, 'style') !== undefined) {
+    Romo.setAttr(romoOptionListDropdownElem, 'style', Romo.attr(this.elem, 'style'));
+  }
+  Romo.setStyle(romoOptionListDropdownElem, 'width', Romo.width(this.elem)+'px');
+  if (Romo.attr(this.elem, 'disabled') !== undefined) {
+    Romo.setAttr(this.romoOptionListDropdown.elem, 'disabled', Romo.attr(this.elem, 'disabled'));
+  }
+
+  Romo.after(this.elem, romoOptionListDropdownElem);
+  Romo.hide(this.elem);
+
+  this.elemWrapper = Romo.elems('<div class="romo-color-select-wrapper"></div>')[0];
+  if (Romo.data(this.elem, 'romo-color-select-btn-group') === true) {
+    Romo.addClass(this.elemWrapper, 'romo-btn-group');
+  }
+  Romo.before(romoOptionListDropdownElem, this.elemWrapper);
+  Romo.append(this.elemWrapper, romoOptionListDropdownElem);
+  Romo.parentChildElems.add(this.elem, [this.elemWrapper]);
+
+  this.caretElem = undefined;
+  var caretClass = Romo.data(this.elem, 'romo-color-select-caret') || this.defaultCaretClass;
+  if (caretClass !== undefined && caretClass !== 'none') {
+    this.caretElem = Romo.elems('<i class="romo-color-select-caret '+caretClass+'"></i>')[0];
+    Romo.setStyle(
+      this.caretElem,
+      'line-height',
+      Romo.css(romoOptionListDropdownElem, 'line-height')
+    );
+    Romo.on(this.caretElem, 'click', Romo.proxy(this._onCaretClick, this));
+    Romo.append(romoOptionListDropdownElem, this.caretElem);
+
+    var caretPaddingPx = this._getCaretPaddingPx();
+    var caretWidthPx   = this._getCaretWidthPx();
+    var caretPosition  = this._getCaretPosition();
+
+    // add a pixel to account for the default input border
+    Romo.setStyle(this.caretElem, caretPosition, caretPaddingPx+1+'px');
+
+    // left-side padding
+    // + caret width
+    // + right-side padding
+    var dropdownPaddingPx = caretPaddingPx + caretWidthPx + caretPaddingPx;
+    Romo.setStyle(
+      romoOptionListDropdownElem,
+      'padding-'+caretPosition,
+      dropdownPaddingPx+'px'
+    );
+  }
+
+  return romoOptionListDropdownElem;
+}
+
+RomoColorSelect.prototype._setUnfilteredListItems = function() {
+  this.romoOptionListDropdown.doSetListItems(
+    this.defaultOptionItems.concat(this._buildOptionItems())
+  );
+}
+
+RomoColorSelect.prototype._setFilteredListItems = function() {
+  this.romoOptionListDropdown.doSetListItems(
+    this._buildOptionItems().concat(this._buildCustomOptionItems())
+  );
+}
+
+RomoColorSelect.prototype._buildOptionItems = function() {
+  return this.colorItems.filter(function(i) { return i.hidden !== true; }).map(function(i) {
+    return {
+      'type':        'option',
+      'value':       i.value,
+      'displayText': i.displayText,
+      'displayHtml': i.displayHtml,
+      'selected':    i.selected
+    }
+  });
+}
+
+RomoColorSelect.prototype._buildDefaultOptionItems = function() {
+  var items = [];
+
+  if (Romo.data(this.elem, 'romo-color-select-empty-option') === true) {
+    var text = Romo.data(this.elem, 'romo-color-select-empty-option-display-text') || '';
+    items.push({
+      'type':        'option',
+      'value':       '',
+      'displayText': text,
+      'displayHtml': '<span>'+text+'</span>'
+    });
+  }
+
+  return items;
+}
+
+RomoColorSelect.prototype._buildCustomOptionItems = function() {
+  var items = [];
+
+  var value = this.romoOptionListDropdown.optionFilterValue();
+  if (value !== '' && Romo.data(this.elem, 'romo-color-select-custom-option') === true) {
+    var prompt = Romo.data(this.elem, 'romo-color-select-custom-option-prompt');
+    if (prompt !== undefined) {
+      items.push({
+        'type':  'optgroup',
+        'label': prompt,
+        'items': [this._buildCustomOptionItem(value)]
+      });
+    } else {
+      items.push(this._buildCustomOptionItem(value));
+    }
+  }
+
+  return items;
+}
+
+RomoColorSelect.prototype._buildCustomOptionItem = function(value) {
+  return {
+    'type':        'option',
+    'value':       value,
+    'displayText': value,
+    'displayHtml': '<span>'+value+'</span>'
+  };
+}
+
+RomoColorSelect.prototype._setValuesAndDisplayText = function(newValues, displayText) {
+  this.elem.value = newValues.join(this._elemValuesDelim());
+  this.colorItems.forEach(function(colorItem) {
+    if (newValues.includes(colorItem.value)) {
+      colorItem.selected = true;
+    } else {
+      colorItem.selected = false;
+    }
+  });
+  Romo.setData(this.elem, 'romo-color-select-display-text', displayText);
+}
+
+RomoColorSelect.prototype._elemValues = function() {
+  return this.elem.value.split(this._elemValuesDelim()).filter(function(v){ return v !== ''; });
+}
+
+RomoColorSelect.prototype._elemValuesDelim = function() {
+  return Romo.data(this.elem, 'romo-color-select-values-delim') || this.defaultValuesDelim;
+}
+
+RomoColorSelect.prototype._refreshUI = function() {
+  if (this.romoSelectedOptionsList !== undefined) {
+    this.romoSelectedOptionsList.doRefreshUI();
+  }
+
+  var textElem = Romo.find(this.romoOptionListDropdown.elem, '.romo-color-select-text')[0];
+  var text     = Romo.data(this.elem, 'romo-color-select-display-text') || '';
+  if (text === '') {
+    Romo.updateHtml(textElem, '<span>&nbsp;</span>');
+  } else {
+    Romo.updateText(textElem, text);
+  }
+}
+
+RomoColorSelect.prototype._getCaretPaddingPx = function() {
+  return (
+    Romo.data(this.elem, 'romo-color-select-caret-padding-px') ||
+    this.defaultCaretPaddingPx
+  );
+}
+
+RomoColorSelect.prototype._getCaretWidthPx = function() {
+  return (
+    Romo.data(this.elem, 'romo-color-select-caret-width-px') ||
+    this._parseCaretWidthPx()
+  );
+}
+
+RomoColorSelect.prototype._getCaretPosition = function() {
+  return (
+    Romo.data(this.elem, 'romo-color-select-caret-position') ||
+    this.defaultCaretPosition
+  );
+}
+
+RomoColorSelect.prototype._parseCaretWidthPx = function() {
+  var widthPx = Romo.width(this.caretElem);
+  if (isNaN(widthPx)) {
+    widthPx = this.defaultCaretWidthPx;
+  }
+  return widthPx;
+}
+
+// event functions
+
+RomoColorSelect.prototype.romoEvFn._onCaretClick = function(e) {
+  if (this.elem.disabled === false) {
+    this.romoOptionListDropdown.doFocus();
+    Romo.trigger(this.elem, 'romoColorSelect:triggerPopupOpen');
+  }
+}
+
+// init
+
+Romo.addElemsInitSelector('[data-romo-color-select-auto="true"]', RomoColorSelect);