Skip to content

Commit

Permalink
Merge pull request #286 from gnbm/AddTootltipTagsSupport
Browse files Browse the repository at this point in the history 
Add tootltip support for tags
  • Loading branch information
@gnbm
gnbm authored Dec 28, 2023
2 parents dd6a0eb + 3525a5e commit 8edea0e
Show file tree
Hide file tree
Showing 8 changed files with 118 additions and 27 deletions.
2 changes: 1 addition & 1 deletion dist-archive/virtual-select-1.0.40.min.js
View file

Large diffs are not rendered by default.

46 changes: 37 additions & 9 deletions dist/virtual-select.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -159,6 +159,29 @@ var Utils = /*#__PURE__*/function () {
var NON_WORD_REGEX = /[^\w]/g;
return text.normalize('NFD').replace(NON_WORD_REGEX, '');
}

/**
* @static
* @param {*} container
* @param {string} text
* @return {boolean}
* @memberof Utils
*/
}, {
key: "willTextOverflow",
value: function willTextOverflow(container, text) {
var tempElement = document.createElement('div');
tempElement.style.position = 'absolute';
tempElement.style.visibility = 'hidden';
tempElement.style.whiteSpace = 'nowrap';
tempElement.style.fontSize = window.getComputedStyle(container).fontSize;
tempElement.style.fontFamily = window.getComputedStyle(container).fontFamily;
tempElement.textContent = text;
document.body.appendChild(tempElement);
var textWidth = tempElement.clientWidth;
document.body.removeChild(tempElement);
return textWidth > container.clientWidth;
}
}]);
return Utils;
}();
Expand Down Expand Up @@ -574,7 +597,7 @@ var VirtualSelect = /*#__PURE__*/function () {
}
var uniqueId = this.uniqueId;
var wrapperClasses = 'vscomp-wrapper';
var valueTooltip = this.getTooltipAttrText(this.placeholder, true, true);
var valueTooltip = this.showValueAsTags ? '' : this.getTooltipAttrText(this.placeholder, true, true);
var clearButtonTooltip = this.getTooltipAttrText(this.clearButtonText);
var ariaLabelledbyText = this.ariaLabelledby ? "aria-labelledby=\"".concat(this.ariaLabelledby, "\"") : '';
var ariaLabelText = this.ariaLabelText ? "aria-label=\"".concat(this.ariaLabelText, "\"") : '';
Expand Down Expand Up @@ -1774,6 +1797,7 @@ var VirtualSelect = /*#__PURE__*/function () {
}, {
key: "setValueText",
value: function setValueText() {
var _this9 = this;
var multiple = this.multiple,
selectedValues = this.selectedValues,
noOfDisplayValues = this.noOfDisplayValues,
Expand Down Expand Up @@ -1804,7 +1828,8 @@ var VirtualSelect = /*#__PURE__*/function () {
valueText.push(label);
selectedValuesCount += 1;
if (showValueAsTags) {
var valueTagHtml = "<span class=\"vscomp-value-tag\" data-index=\"".concat(d.index, "\">\n <span class=\"vscomp-value-tag-content\">").concat(label, "</span>\n <span class=\"vscomp-value-tag-clear-button\">\n <i class=\"vscomp-clear-icon\"></i>\n </span>\n </span>");
var valueTooltipForTags = _this9.getTooltipAttrText(label, !Utils.willTextOverflow($valueText.parentElement, label), true);
var valueTagHtml = "<span class=\"vscomp-value-tag\" data-index=\"".concat(d.index, "\" ").concat(valueTooltipForTags, ">\n <span class=\"vscomp-value-tag-content\">").concat(label, "</span>\n <span class=\"vscomp-value-tag-clear-button\">\n <i class=\"vscomp-clear-icon\"></i>\n </span>\n </span>");
valueTooltip.push(valueTagHtml);
} else {
valueTooltip.push(label);
Expand Down Expand Up @@ -1854,10 +1879,13 @@ var VirtualSelect = /*#__PURE__*/function () {
} else if (!showValueAsTags) {
tooltipText = valueTooltip.join(', ');
}
DomUtils.setData($valueText, 'tooltip', tooltipText);
if (!showValueAsTags) {
DomUtils.setData($valueText, 'tooltip', tooltipText);
}
if (multiple) {
DomUtils.setData($valueText, 'tooltipEllipsisOnly', selectedLength === 0);
if (showValueAsTags) {
if (!showValueAsTags) {
DomUtils.setData($valueText, 'tooltipEllipsisOnly', selectedLength === 0);
} else {
this.updatePosition();
}
}
Expand Down Expand Up @@ -2699,7 +2727,7 @@ var VirtualSelect = /*#__PURE__*/function () {
}, {
key: "selectRangeOptions",
value: function selectRangeOptions(lastSelectedOptionIndex, selectedIndex) {
var _this9 = this;
var _this10 = this;
if (typeof lastSelectedOptionIndex !== 'number' || this.maxValues) {
return;
}
Expand Down Expand Up @@ -2745,7 +2773,7 @@ var VirtualSelect = /*#__PURE__*/function () {

/** using setTimeout to fix the issue of dropbox getting closed on select */
setTimeout(function () {
_this9.renderOptions();
_this10.renderOptions();
}, 0);
}
}, {
Expand Down Expand Up @@ -2852,7 +2880,7 @@ var VirtualSelect = /*#__PURE__*/function () {
}, {
key: "toggleGroupOptions",
value: function toggleGroupOptions($ele, isSelected) {
var _this10 = this;
var _this11 = this;
if (!this.hasOptionGroup || this.disableOptionGroupCheckbox || !$ele) {
return;
}
Expand Down Expand Up @@ -2888,7 +2916,7 @@ var VirtualSelect = /*#__PURE__*/function () {

/** using setTimeout to fix the issue of dropbox getting closed on select */
setTimeout(function () {
_this10.renderOptions();
_this11.renderOptions();
}, 0);
}
}, {
Expand Down
2 changes: 1 addition & 1 deletion dist/virtual-select.min.js
View file

Large diffs are not rendered by default.

3 changes: 3 additions & 0 deletions docs/assets/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,9 @@ function getOptions(count = 100000, includeDesc = false) {

optionsData.push(optionData);
}
//Add an option with a very long text
const optionData6 = { value: 100001, label: 'This is a very long text to be selected in the selection!! This is a very long text to be selected in the selection!!' };
optionsData.push(optionData6);

return optionsData;
}
Expand Down
46 changes: 37 additions & 9 deletions docs/assets/virtual-select.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -159,6 +159,29 @@ var Utils = /*#__PURE__*/function () {
var NON_WORD_REGEX = /[^\w]/g;
return text.normalize('NFD').replace(NON_WORD_REGEX, '');
}

/**
* @static
* @param {*} container
* @param {string} text
* @return {boolean}
* @memberof Utils
*/
}, {
key: "willTextOverflow",
value: function willTextOverflow(container, text) {
var tempElement = document.createElement('div');
tempElement.style.position = 'absolute';
tempElement.style.visibility = 'hidden';
tempElement.style.whiteSpace = 'nowrap';
tempElement.style.fontSize = window.getComputedStyle(container).fontSize;
tempElement.style.fontFamily = window.getComputedStyle(container).fontFamily;
tempElement.textContent = text;
document.body.appendChild(tempElement);
var textWidth = tempElement.clientWidth;
document.body.removeChild(tempElement);
return textWidth > container.clientWidth;
}
}]);
return Utils;
}();
Expand Down Expand Up @@ -574,7 +597,7 @@ var VirtualSelect = /*#__PURE__*/function () {
}
var uniqueId = this.uniqueId;
var wrapperClasses = 'vscomp-wrapper';
var valueTooltip = this.getTooltipAttrText(this.placeholder, true, true);
var valueTooltip = this.showValueAsTags ? '' : this.getTooltipAttrText(this.placeholder, true, true);
var clearButtonTooltip = this.getTooltipAttrText(this.clearButtonText);
var ariaLabelledbyText = this.ariaLabelledby ? "aria-labelledby=\"".concat(this.ariaLabelledby, "\"") : '';
var ariaLabelText = this.ariaLabelText ? "aria-label=\"".concat(this.ariaLabelText, "\"") : '';
Expand Down Expand Up @@ -1774,6 +1797,7 @@ var VirtualSelect = /*#__PURE__*/function () {
}, {
key: "setValueText",
value: function setValueText() {
var _this9 = this;
var multiple = this.multiple,
selectedValues = this.selectedValues,
noOfDisplayValues = this.noOfDisplayValues,
Expand Down Expand Up @@ -1804,7 +1828,8 @@ var VirtualSelect = /*#__PURE__*/function () {
valueText.push(label);
selectedValuesCount += 1;
if (showValueAsTags) {
var valueTagHtml = "<span class=\"vscomp-value-tag\" data-index=\"".concat(d.index, "\">\n <span class=\"vscomp-value-tag-content\">").concat(label, "</span>\n <span class=\"vscomp-value-tag-clear-button\">\n <i class=\"vscomp-clear-icon\"></i>\n </span>\n </span>");
var valueTooltipForTags = _this9.getTooltipAttrText(label, !Utils.willTextOverflow($valueText.parentElement, label), true);
var valueTagHtml = "<span class=\"vscomp-value-tag\" data-index=\"".concat(d.index, "\" ").concat(valueTooltipForTags, ">\n <span class=\"vscomp-value-tag-content\">").concat(label, "</span>\n <span class=\"vscomp-value-tag-clear-button\">\n <i class=\"vscomp-clear-icon\"></i>\n </span>\n </span>");
valueTooltip.push(valueTagHtml);
} else {
valueTooltip.push(label);
Expand Down Expand Up @@ -1854,10 +1879,13 @@ var VirtualSelect = /*#__PURE__*/function () {
} else if (!showValueAsTags) {
tooltipText = valueTooltip.join(', ');
}
DomUtils.setData($valueText, 'tooltip', tooltipText);
if (!showValueAsTags) {
DomUtils.setData($valueText, 'tooltip', tooltipText);
}
if (multiple) {
DomUtils.setData($valueText, 'tooltipEllipsisOnly', selectedLength === 0);
if (showValueAsTags) {
if (!showValueAsTags) {
DomUtils.setData($valueText, 'tooltipEllipsisOnly', selectedLength === 0);
} else {
this.updatePosition();
}
}
Expand Down Expand Up @@ -2699,7 +2727,7 @@ var VirtualSelect = /*#__PURE__*/function () {
}, {
key: "selectRangeOptions",
value: function selectRangeOptions(lastSelectedOptionIndex, selectedIndex) {
var _this9 = this;
var _this10 = this;
if (typeof lastSelectedOptionIndex !== 'number' || this.maxValues) {
return;
}
Expand Down Expand Up @@ -2745,7 +2773,7 @@ var VirtualSelect = /*#__PURE__*/function () {

/** using setTimeout to fix the issue of dropbox getting closed on select */
setTimeout(function () {
_this9.renderOptions();
_this10.renderOptions();
}, 0);
}
}, {
Expand Down Expand Up @@ -2852,7 +2880,7 @@ var VirtualSelect = /*#__PURE__*/function () {
}, {
key: "toggleGroupOptions",
value: function toggleGroupOptions($ele, isSelected) {
var _this10 = this;
var _this11 = this;
if (!this.hasOptionGroup || this.disableOptionGroupCheckbox || !$ele) {
return;
}
Expand Down Expand Up @@ -2888,7 +2916,7 @@ var VirtualSelect = /*#__PURE__*/function () {

/** using setTimeout to fix the issue of dropbox getting closed on select */
setTimeout(function () {
_this10.renderOptions();
_this11.renderOptions();
}, 0);
}
}, {
Expand Down
2 changes: 1 addition & 1 deletion docs/assets/virtual-select.min.js
View file

Large diffs are not rendered by default.

26 changes: 26 additions & 0 deletions src/utils/utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,4 +116,30 @@ export class Utils {
const NON_WORD_REGEX = /[^\w]/g;
return text.normalize('NFD').replace(NON_WORD_REGEX, '');
}

/**
* @static
* @param {*} container
* @param {string} text
* @return {boolean}
* @memberof Utils
*/
static willTextOverflow(container, text) {
const tempElement = document.createElement('div');
tempElement.style.position = 'absolute';
tempElement.style.visibility = 'hidden';
tempElement.style.whiteSpace = 'nowrap';
tempElement.style.fontSize = window.getComputedStyle(container).fontSize;
tempElement.style.fontFamily = window.getComputedStyle(container).fontFamily;
tempElement.textContent = text;

document.body.appendChild(tempElement);
const textWidth = tempElement.clientWidth;

document.body.removeChild(tempElement);

return textWidth > container.clientWidth;

}

}
18 changes: 12 additions & 6 deletions src/virtual-select.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@ export class VirtualSelect {

const { uniqueId } = this;
let wrapperClasses = 'vscomp-wrapper';
const valueTooltip = this.getTooltipAttrText(this.placeholder, true, true);
const valueTooltip = this.showValueAsTags ? '' : this.getTooltipAttrText(this.placeholder, true, true);
const clearButtonTooltip = this.getTooltipAttrText(this.clearButtonText);
const ariaLabelledbyText = this.ariaLabelledby ? `aria-labelledby="${this.ariaLabelledby}"` : '';
const ariaLabelText = this.ariaLabelText ? `aria-label="${this.ariaLabelText}"` : '';
Expand Down Expand Up @@ -1455,14 +1455,17 @@ export class VirtualSelect {
selectedValuesCount += 1;

if (showValueAsTags) {
const valueTagHtml = `<span class="vscomp-value-tag" data-index="${d.index}">
const valueTooltipForTags = this.getTooltipAttrText(label, !(Utils.willTextOverflow($valueText.parentElement, label)), true);

const valueTagHtml = `<span class="vscomp-value-tag" data-index="${d.index}" ${valueTooltipForTags}>
<span class="vscomp-value-tag-content">${label}</span>
<span class="vscomp-value-tag-clear-button">
<i class="vscomp-clear-icon"></i>
</span>
</span>`;

valueTooltip.push(valueTagHtml);

} else {
valueTooltip.push(label);
}
Expand Down Expand Up @@ -1526,12 +1529,15 @@ export class VirtualSelect {
tooltipText = valueTooltip.join(', ');
}

DomUtils.setData($valueText, 'tooltip', tooltipText);
if (!showValueAsTags) {
DomUtils.setData($valueText, 'tooltip', tooltipText);
}

if (multiple) {
DomUtils.setData($valueText, 'tooltipEllipsisOnly', selectedLength === 0);

if (showValueAsTags) {
if (!showValueAsTags) {
DomUtils.setData($valueText, 'tooltipEllipsisOnly', selectedLength === 0);
}
else {
this.updatePosition();
}
}
Expand Down

0 comments on commit 8edea0e

Please sign in to comment.