From c79bb1e99fd5a70ca02a516717481bbe58be59f5 Mon Sep 17 00:00:00 2001 From: Nathan Byrd Date: Mon, 20 Feb 2023 13:49:05 -0600 Subject: [PATCH] Added documentation for overflow and made consistent between views --- core/full_menu_view.js | 13 +++++++------ core/vertical_menu_view.js | 16 ++++++++++++---- docs/_docs/art/views/vertical_menu_view.md | 10 ++++++++++ 3 files changed, 29 insertions(+), 10 deletions(-) diff --git a/core/full_menu_view.js b/core/full_menu_view.js index 9a46f6b3..7b20b8f5 100644 --- a/core/full_menu_view.js +++ b/core/full_menu_view.js @@ -253,12 +253,13 @@ function FullMenuView(options) { } if (relativeColumn + renderLength > this.dimens.width) { - const overflow = this.hasTextOverflow() ? this.textOverflow : ''; - - text = strUtil.renderTruncate(text, { - length: this.dimens.width - (relativeColumn + overflow.length), - omission: overflow, - }); + if (this.hasTextOverflow()) { + text = strUtil.renderTruncate(text, { + length: + this.dimens.width - (relativeColumn + this.textOverflow.length), + omission: this.textOverflow, + }); + } } let padLength = Math.min(item.fixedLength + 1, this.dimens.width); diff --git a/core/vertical_menu_view.js b/core/vertical_menu_view.js index e34794c8..f08a66e4 100644 --- a/core/vertical_menu_view.js +++ b/core/vertical_menu_view.js @@ -98,10 +98,12 @@ function VerticalMenuView(options) { sgr = index === self.focusedItemIndex ? self.getFocusSGR() : self.getSGR(); } - text = strUtil.renderTruncate(text, { - length: this.dimens.width, - omission: this.textOverflow, - }); + if (this.hasTextOverflow()) { + text = strUtil.renderTruncate(text, { + length: this.dimens.width, + omission: this.textOverflow, + }); + } text = `${sgr}${strUtil.pad( `${text}${this.styleSGR1}`, @@ -405,6 +407,12 @@ VerticalMenuView.prototype.focusLast = function () { return VerticalMenuView.super_.prototype.focusLast.call(this); }; +VerticalMenuView.prototype.setTextOverflow = function (overflow) { + VerticalMenuView.super_.prototype.setTextOverflow.call(this, overflow); + + this.positionCacheExpired = true; +}; + VerticalMenuView.prototype.setFocusItems = function (items) { VerticalMenuView.super_.prototype.setFocusItems.call(this, items); diff --git a/docs/_docs/art/views/vertical_menu_view.md b/docs/_docs/art/views/vertical_menu_view.md index e11e087c..2a66bc36 100644 --- a/docs/_docs/art/views/vertical_menu_view.md +++ b/docs/_docs/art/views/vertical_menu_view.md @@ -29,6 +29,7 @@ Items can be selected on a menu via the cursor keys, Page Up, Page Down, Home, a | `justify` | Sets the justification of each item in the list. Options: left (default), right, center | | `itemFormat` | Sets the format for a list entry. See **Entry Formatting** in [MCI](../mci.md) | | `fillChar` | Specifies a character to fill extra space in the menu with. Defaults to an empty space | +| `textOverflow` | If an entry cannot be displayed due to `width`, set overflow characters. See **Text Overflow** below | | `items` | List of items to show in the menu. See **Items** below. | `focusItemFormat` | Sets the format for a focused list entry. See **Entry Formatting** in [MCI](../mci.md) | | `truncateOmission` | Sets the omission characters for truncated text if used. Defaults to an empty string. Commonly set to "..." | @@ -70,6 +71,15 @@ If the list is for display only (there is no form action associated with it) you ["First item", "Second item", "Third Item"] ``` +### Text Overflow + +The `textOverflow` option is used to specify what happens when a text string is too long to fit in the `width` defined. If an entry is too long to display in the width specified + +> :information_source: If `textOverflow` is not specified at all, a menu can become wider than the `width` if needed to display a single column. + +> :information_source: Setting `textOverflow` to an empty string `textOverflow: ""` will cause the item to be truncated if necessary without any characters displayed + +> :information_source: Otherwise, setting `textOverflow` to one or more characters will truncate the value if necessary and display those characters at the end. i.e. `textOverflow: ...` ## Example