diff --git a/ui/widgets/nuxeo-selectivity.js b/ui/widgets/nuxeo-selectivity.js index a6d7578b7..02c10b81f 100644 --- a/ui/widgets/nuxeo-selectivity.js +++ b/ui/widgets/nuxeo-selectivity.js @@ -25,8 +25,6 @@ import { html } from '@polymer/polymer/lib/utils/html-tag.js'; import { mixinBehaviors } from '@polymer/polymer/lib/legacy/class.js'; import {I18nBehavior} from "../nuxeo-i18n-behavior"; import '@polymer/iron-icon/iron-icon.js'; -import { IronResizableBehavior } from '@polymer/iron-resizable-behavior/iron-resizable-behavior.js'; -import './nuxeo-tooltip.js'; /** * @license @@ -2442,6 +2440,7 @@ typedArrayTags[weakMapTag] = false; } else if (!resultsHtml && !options.add) { resultsHtml = this.selectivity.template('noResults', { term: options.term }); } + if (resultsHtml) { this.resultsContainer.innerHTML = ''; removeElement(this.$('.selectivity-loading')); @@ -3430,43 +3429,10 @@ typedArrayTags[weakMapTag] = false; item, ), )); - - this.input.parentNode.insertBefore(el, this.input); - const textElement = el.querySelector('.multipleSelectedItemText'); - if(textElement){ - const containerElement = this._getHTMLRootNode(textElement) - let containerElementWidth = this._calculateElementWidth(containerElement) - const childNodes = Array.from(textElement.children); - const otherElementWidth = childNodes.reduce((totalWidth, currentValue) => { - if (currentValue !== this && !currentValue.shadowRoot) { - totalWidth += currentValue.offsetWidth; - } - return totalWidth; - }, 1); - containerElementWidth -= otherElementWidth ; - el.setAttribute('style', `max-width:${containerElementWidth}px`); - } + this.input.parentNode.insertBefore(el, this.input); }, - _getHTMLRootNode(element){ - let currentElement = element; - const parentElement = currentElement.closest(".selectivity-multiple-input-container") - return parentElement; - }, - - - - _calculateElementWidth(element){ - const currrentElement = getComputedStyle(element); - const paddingX = parseFloat(currrentElement.paddingLeft) + parseFloat(currrentElement.paddingRight); - const borderX = parseFloat(currrentElement.borderLeftWidth) + parseFloat(currrentElement.borderRightWidth); - const scrollBarWidth = element.offsetWidth - element.clientWidth; - const elementWidth = (element .offsetWidth - paddingX - borderX - scrollBarWidth -2) ; - return elementWidth - }, - - /** * @private */ @@ -6617,7 +6583,7 @@ typedArrayTags[weakMapTag] = false; * @demo demo/nuxeo-selectivity/index.html */ class SelectivityElement - extends mixinBehaviors([I18nBehavior, IronFormElementBehavior, IronValidatableBehavior, IronResizableBehavior], Nuxeo.Element) { + extends mixinBehaviors([I18nBehavior, IronFormElementBehavior, IronValidatableBehavior], Nuxeo.Element) { static get is() { return 'nuxeo-selectivity'; @@ -7142,11 +7108,6 @@ typedArrayTags[weakMapTag] = false; height: 2px; background-color: var(--nuxeo-primary-color, #0066ff); } - .selectivity-text-container { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } @@ -7210,18 +7171,10 @@ typedArrayTags[weakMapTag] = false; multipleSelectedItem: (opts) => { const extraClass = opts.highlighted ? ' highlighted' : ''; - const toolTipElement = ` - ${this.selectionFormatter(opts.item || opts)} - `; - return (` - - ${opts.removable ? + return `${opts.removable ? `` - : ``}${this.selectionFormatter(opts.item || opts)} - - ${toolTipElement} - `) + : ``}${this.selectionFormatter(opts.item || opts)}` }, }, }; @@ -7236,7 +7189,6 @@ typedArrayTags[weakMapTag] = false; options.allowClear = !this.required && !this.multiple; // allowClear only works on single-value mode } - if (this.data) { options.items = this._wrap(this.data); } @@ -7313,12 +7265,8 @@ typedArrayTags[weakMapTag] = false; }); this._visibilityObserver.observe(this); this._readonlyChanged(); - this.multiple && this._scrollParent.addEventListener('dialog-opened',this._reCalculateWidth.bind(this)) - this.multiple && this.addEventListener('iron-resize', this._reCalculateWidth); } - - disconnectedCallback() { this.$.input.removeEventListener('selectivity-change', this._updateSelectionHandler); this._updateSelectionHandler = null; @@ -7326,21 +7274,9 @@ typedArrayTags[weakMapTag] = false; this._selectivity = null; this._visibilityObserver.unobserve(this); this._scrollParent.removeEventListener('scroll', this._updateDropdownPosition.bind(this)); - this.multiple && this._scrollParent.removeEventListener('dialog-opened',this._reCalculateWidth.bind(this)) - this.multiple && this.removeEventListener('iron-resize', this._reCalculateWidth); super.disconnectedCallback(); } - - _reCalculateWidth(){ - setTimeout(() => { - this.multiple && - this._selectivity && - this._selectivity.rerenderSelection(); - }, 0); - - } - _updateDropdownPosition() { if (this._selectivity) { this._selectivity.positionDropdown(); @@ -7570,4 +7506,4 @@ export function escapeHTML(markup) { } return String(markup).replace(/[&<>"'/\\]/g, (match) => replaceMap[match]); -}; \ No newline at end of file +};