assets/js/romo/select.js in romo-0.20.10 vs assets/js/romo/select.js in romo-0.20.11

- old
+ new

@@ -69,117 +69,238 @@ RomoSelect.prototype._bindSelectedOptionsList = function() { this.romoSelectedOptionsList = undefined; if (this.elem.multiple === true) { if (Romo.data(this.elem, 'romo-select-multiple-item-class') !== undefined) { - Romo.setData(this.romoSelectDropdown.elem, 'romo-selected-options-list-item-class', Romo.data(this.elem, 'romo-select-multiple-item-class')); + Romo.setData( + this.romoSelectDropdown.elem, + 'romo-selected-options-list-item-class', + Romo.data(this.elem, 'romo-select-multiple-item-class') + ); } if (Romo.data(this.elem, 'romo-select-multiple-max-rows') !== undefined) { - Romo.setData(this.romoSelectDropdown.elem, 'romo-selected-options-list-max-rows', Romo.data(this.elem, 'romo-select-multiple-max-rows')); + Romo.setData( + this.romoSelectDropdown.elem, + 'romo-selected-options-list-max-rows', + Romo.data(this.elem, 'romo-select-multiple-max-rows') + ); } this.romoSelectedOptionsList = new RomoSelectedOptionsList(this.romoSelectDropdown.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._setValues(currentValues); - } - this.romoSelectedOptionsList.doRemoveItem(itemValue); - this._refreshUI(); - }, this)); - Romo.on(this.romoSelectedOptionsList.elem, 'romoSelectedOptionsList:listClick', Romo.proxy(function(e, romoSelectedOptionsList) { - Romo.trigger(this.romoSelectDropdown.elem, 'romoDropdown:triggerPopupClose', []); - this.romoSelectDropdown.doFocus(false); - }, this)); + 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._setValues(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.romoSelectDropdown.elem, 'romoDropdown:triggerPopupClose', []); + this.romoSelectDropdown.doFocus(false); + }, this) + ); + Romo.before(this.elemWrapper, this.romoSelectedOptionsList.elem); this.romoSelectedOptionsList.doRefreshUI(); } } RomoSelect.prototype._bindSelectDropdown = function() { this.romoSelectDropdown = new RomoSelectDropdown(this._buildSelectDropdownElem(), this.elem); - Romo.on(this.romoSelectDropdown.elem, 'romoSelectDropdown:romoDropdown:toggle', Romo.proxy(function(e, romoDropdown, romoSelectDropdown) { - Romo.trigger(this.elem, 'romoSelect:romoDropdown:toggle', [romoDropdown, this]); - }, this)); - Romo.on(this.romoSelectDropdown.elem, 'romoSelectDropdown:romoDropdown:popupOpen', Romo.proxy(function(e, romoDropdown, romoSelectDropdown) { - Romo.trigger(this.elem, 'romoSelect:romoDropdown:popupOpen', [romoDropdown, this]); - }, this)); - Romo.on(this.romoSelectDropdown.elem, 'romoSelectDropdown:romoDropdown:popupClose', Romo.proxy(function(e, romoDropdown, romoSelectDropdown) { - Romo.trigger(this.elem, 'romoSelect:romoDropdown:popupClose', [romoDropdown, this]); - }, this)); + Romo.on( + this.romoSelectDropdown.elem, + 'romoSelectDropdown:romoDropdown:toggle', + Romo.proxy(function(e, romoDropdown, romoSelectDropdown) { + Romo.trigger(this.elem, 'romoSelect:romoDropdown:toggle', [romoDropdown, this]); + }, this) + ); + Romo.on( + this.romoSelectDropdown.elem, + 'romoSelectDropdown:romoDropdown:popupOpen', + Romo.proxy(function(e, romoDropdown, romoSelectDropdown) { + Romo.trigger(this.elem, 'romoSelect:romoDropdown:popupOpen', [romoDropdown, this]); + }, this) + ); + Romo.on( + this.romoSelectDropdown.elem, + 'romoSelectDropdown:romoDropdown:popupClose', + Romo.proxy(function(e, romoDropdown, romoSelectDropdown) { + Romo.trigger(this.elem, 'romoSelect:romoDropdown:popupClose', [romoDropdown, this]); + }, this) + ); - Romo.on(this.romoSelectDropdown.elem, 'romoSelectDropdown:itemSelected', Romo.proxy(function(e, itemValue, itemDisplayText, romoSelectDropdown) { - this.romoSelectDropdown.doFocus(); - Romo.trigger(this.elem, 'romoSelect:itemSelected', [itemValue, itemDisplayText, this]); - }, this)); - Romo.on(this.romoSelectDropdown.elem, 'romoSelectDropdown:newItemSelected', Romo.proxy(function(e, itemValue, itemDisplayText, romoSelectDropdown) { - if (this.romoSelectedOptionsList !== undefined) { - var currentValues = this._elemValues(); - if (!currentValues.includes(itemValue)) { - this._setValues(currentValues.concat([itemValue])); - this.romoSelectedOptionsList.doAddItem({ - 'value': itemValue, - 'displayText': itemDisplayText - }); + Romo.on( + this.romoSelectDropdown.elem, + 'romoSelectDropdown:itemSelected', + Romo.proxy(function(e, itemValue, itemDisplayText, romoSelectDropdown) { + this.romoSelectDropdown.doFocus(); + Romo.trigger(this.elem, 'romoSelect:itemSelected', [itemValue, itemDisplayText, this]); + }, this) + ); + Romo.on( + this.romoSelectDropdown.elem, + 'romoSelectDropdown:newItemSelected', + Romo.proxy(function(e, itemValue, itemDisplayText, romoSelectDropdown) { + 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]); } - } else { - this._setValues([itemValue]); - } - this._refreshUI(); - Romo.trigger(this.elem, 'romoSelect:newItemSelected', [itemValue, itemDisplayText, this]); - }, this)); - Romo.on(this.romoSelectDropdown.elem, 'romoSelectDropdown:change', Romo.proxy(function(e, newValue, prevValue, romoSelectDropdown) { - Romo.trigger(this.elem, 'change'); - Romo.trigger(this.elem, 'romoSelect:change', [newValue, prevValue, this]); - }, this)); + this._refreshUI(); + Romo.trigger(this.elem, 'romoSelect:newItemSelected', [itemValue, itemDisplayText, this]); + }, this) + ); + Romo.on( + this.romoSelectDropdown.elem, + 'romoSelectDropdown:change', + Romo.proxy(function(e, newValue, prevValue, romoSelectDropdown) { + Romo.trigger(this.elem, 'change'); + if (this.romoSelectedOptionsList !== undefined) { + Romo.trigger( + this.elem, + 'romoSelect:multipleChange', + [this._elemValues(), newValue, this] + ); + } else { + Romo.trigger(this.elem, 'romoSelect:change', [newValue, prevValue, this]); + } + }, this) + ); } RomoSelect.prototype._buildSelectDropdownElem = function() { - var romoSelectDropdownElem = Romo.elems('<div class="romo-select romo-btn" tabindex="0"><span class="romo-select-text"></span></div>')[0]; + var romoSelectDropdownElem = Romo.elems( + '<div class="romo-select romo-btn" tabindex="0">'+ + '<span class="romo-select-text"></span>'+ + '</div>' + )[0]; Romo.setData(romoSelectDropdownElem, 'romo-dropdown-overflow-x', 'hidden'); Romo.setData(romoSelectDropdownElem, 'romo-dropdown-width', 'elem'); if (Romo.data(this.elem, 'romo-select-dropdown-position') !== undefined) { - Romo.setData(romoSelectDropdownElem, 'romo-dropdown-position', Romo.data(this.elem, 'romo-select-dropdown-position')); + Romo.setData( + romoSelectDropdownElem, + 'romo-dropdown-position', + Romo.data(this.elem, 'romo-select-dropdown-position') + ); } if (Romo.data(this.elem, 'romo-select-dropdown-style-class') !== undefined) { - Romo.setData(romoSelectDropdownElem, 'romo-dropdown-style-class', Romo.data(this.elem, 'romo-select-dropdown-style-class')); + Romo.setData( + romoSelectDropdownElem, + 'romo-dropdown-style-class', + Romo.data(this.elem, 'romo-select-dropdown-style-class') + ); } if (Romo.data(this.elem, 'romo-select-dropdown-min-height') !== undefined) { - Romo.setData(romoSelectDropdownElem, 'romo-dropdown-min-height', Romo.data(this.elem, 'romo-select-dropdown-min-height')); + Romo.setData( + romoSelectDropdownElem, + 'romo-dropdown-min-height', + Romo.data(this.elem, 'romo-select-dropdown-min-height') + ); } if (Romo.data(this.elem, 'romo-select-dropdown-max-height') !== undefined) { - Romo.setData(romoSelectDropdownElem, 'romo-dropdown-max-height', Romo.data(this.elem, 'romo-select-dropdown-max-height')); + Romo.setData( + romoSelectDropdownElem, + 'romo-dropdown-max-height', + Romo.data(this.elem, 'romo-select-dropdown-max-height') + ); } if (Romo.data(this.elem, 'romo-select-dropdown-height') !== undefined) { - Romo.setData(romoSelectDropdownElem, 'romo-dropdown-height', Romo.data(this.elem, 'romo-select-dropdown-height')); + Romo.setData( + romoSelectDropdownElem, + 'romo-dropdown-height', + Romo.data(this.elem, 'romo-select-dropdown-height') + ); } + if (Romo.data(this.elem, 'romo-select-dropdown-append-to-closest') !== undefined) { + Romo.setData( + romoOptionListDropdownElem, + 'romo-dropdown-append-to-closest', + Romo.data(this.elem, 'romo-select-dropdown-append-to-closest') + ); + } + if (Romo.data(this.elem, 'romo-select-dropdown-append-to') !== undefined) { + Romo.setData( + romoOptionListDropdownElem, + 'romo-dropdown-append-to', + Romo.data(this.elem, 'romo-select-dropdown-append-to') + ); + } if (Romo.data(this.elem, 'romo-select-filter-placeholder') !== undefined) { - Romo.setData(romoSelectDropdownElem, 'romo-select-dropdown-filter-placeholder', Romo.data(this.elem, 'romo-select-filter-placeholder')); + Romo.setData( + romoSelectDropdownElem, + 'romo-select-dropdown-filter-placeholder', + Romo.data(this.elem, 'romo-select-filter-placeholder') + ); } if (Romo.data(this.elem, 'romo-select-filter-indicator') !== undefined) { - Romo.setData(romoSelectDropdownElem, 'romo-select-dropdown-filter-indicator', Romo.data(this.elem, 'romo-select-filter-indicator')); + Romo.setData( + romoSelectDropdownElem, + 'romo-select-dropdown-filter-indicator', + Romo.data(this.elem, 'romo-select-filter-indicator') + ); } if (Romo.data(this.elem, 'romo-select-filter-indicator-width-px') !== undefined) { - Romo.setData(romoSelectDropdownElem, 'romo-select-dropdown-filter-indicator-width-px', Romo.data(this.elem, 'romo-select-filter-indicator-width-px')); + Romo.setData( + romoSelectDropdownElem, + 'romo-select-dropdown-filter-indicator-width-px', + Romo.data(this.elem, 'romo-select-filter-indicator-width-px') + ); } if (Romo.data(this.elem, 'romo-select-no-filter') !== undefined) { - Romo.setData(romoSelectDropdownElem, 'romo-select-dropdown-no-filter', Romo.data(this.elem, 'romo-select-no-filter')); + Romo.setData( + romoSelectDropdownElem, + 'romo-select-dropdown-no-filter', + Romo.data(this.elem, 'romo-select-no-filter') + ); } if (Romo.data(this.elem, 'romo-select-custom-option') !== undefined) { - Romo.setData(romoSelectDropdownElem, 'romo-select-dropdown-custom-option', Romo.data(this.elem, 'romo-select-custom-option')); + Romo.setData( + romoSelectDropdownElem, + 'romo-select-dropdown-custom-option', + Romo.data(this.elem, 'romo-select-custom-option') + ); } if (Romo.data(this.elem, 'romo-select-custom-option-prompt') !== undefined) { - Romo.setData(romoSelectDropdownElem, 'romo-select-dropdown-custom-option-prompt', Romo.data(this.elem, 'romo-select-custom-option-prompt')); + Romo.setData( + romoSelectDropdownElem, + 'romo-select-dropdown-custom-option-prompt', + Romo.data(this.elem, 'romo-select-custom-option-prompt') + ); } if (Romo.data(this.elem, 'romo-select-open-on-focus') !== undefined) { - Romo.setData(romoSelectDropdownElem, 'romo-select-dropdown-open-on-focus', Romo.data(this.elem, 'romo-select-open-on-focus')); + Romo.setData( + romoSelectDropdownElem, + 'romo-select-dropdown-open-on-focus', + Romo.data(this.elem, 'romo-select-open-on-focus') + ); } if (Romo.data(romoSelectDropdownElem, 'romo-dropdown-max-height') === undefined) { Romo.setData(romoSelectDropdownElem, 'romo-dropdown-max-height', 'detect'); } @@ -208,11 +329,15 @@ this.caretElem = undefined; var caretClass = Romo.data(this.elem, 'romo-select-caret') || this.defaultCaretClass; if (caretClass !== undefined && caretClass !== 'none') { this.caretElem = Romo.elems('<i class="romo-select-caret '+caretClass+'"></i>')[0]; - Romo.setStyle(this.caretElem, 'line-height', Romo.css(romoSelectDropdownElem, 'line-height')); + Romo.setStyle( + this.caretElem, + 'line-height', + Romo.css(romoSelectDropdownElem, 'line-height') + ); Romo.on(this.caretElem, 'click', Romo.proxy(this._onCaretClick, this)); Romo.append(romoSelectDropdownElem, this.caretElem); var caretPaddingPx = this._getCaretPaddingPx(); var caretWidthPx = this._getCaretWidthPx(); @@ -223,10 +348,14 @@ // left-side padding // + caret width // + right-side padding var dropdownPaddingPx = caretPaddingPx + caretWidthPx + caretPaddingPx; - Romo.setStyle(romoSelectDropdownElem, 'padding-'+caretPosition, dropdownPaddingPx+'px'); + Romo.setStyle( + romoSelectDropdownElem, + 'padding-'+caretPosition, + dropdownPaddingPx+'px' + ); } return romoSelectDropdownElem; }