[FIX] survey: chop down long words in labels

Create a new live-session survey with a multi-choice question of 4
choices. In one of the choices write a word of 20+ characters. Start the
live-session, on the manager side the choices overlap on the screen.

In case a word is longer that the available place, it can overlap on the
labels of the other columns, making the text very hard to read. This
work wraps words that are too long for a single line over multiple ones.

Task-3530706

closes odoo/odoo#146554

X-original-commit: f085957855f86fb669c533be09fd13a14a6c874d
Signed-off-by: Thibault Delavallee (tde) <tde@openerp.com>
Signed-off-by: Julien Castiaux (juc) <juc@odoo.com>
This commit is contained in:
Julien Castiaux
2023-12-22 13:31:40 +00:00
parent 09c1545412
commit fefea440c8
@@ -188,6 +188,10 @@ publicWidget.registry.SurveySessionChart = publicWidget.Widget.extend({
* Which will be displayed as "this is an<br/>example of<br/>a label"
* Obviously, the more labels you have, the more columns, and less screen space is available.
*
* When the screen space is too small for long words, those long words are split over multiple rows.
* At 6 chars per row, the above example becomes ["this", "is an", "examp-", "le of", "a label"]
* Which is displayed as "this<br/>is an<br/>examp-<br/>le of<br/>a label"
*
* We also adapt the font size based on the width available in the chart.
*
* So we counterbalance multiple times:
@@ -236,8 +240,13 @@ publicWidget.registry.SurveySessionChart = publicWidget.Widget.extend({
let resultLines = [];
let currentLine = [];
for (let i = 0; i < words.length; i++) {
// If the word we are adding exceed already the number of characters for the line, we add it anyway before passing to a new line
currentLine.push(words[i]);
// Chop down words that do not fit on a single line, add each part on its own line.
let word = words[i];
while (word.length > charPerLine) {
resultLines.push(word.slice(0, charPerLine - 1) + '-');
word = word.slice(charPerLine - 1);
}
currentLine.push(word);
// Continue to add words in the line if there is enough space and if there is at least one more word to add
const nextWord = i+1 < words.length ? words[i+1] : null;