Rewrite tooltips code without jQuery

This commit is contained in:
Frédéric Guillot 2018-04-20 15:18:30 -07:00
parent 927607b5ff
commit 5996a8abcf
25 changed files with 152 additions and 200 deletions

View File

@ -12,6 +12,16 @@ use Kanboard\Core\Base;
*/
class AppHelper extends Base
{
public function tooltipMarkdown($markdownText, $icon = 'fa-info-circle')
{
return '<span class="tooltip"><i class="fa '.$icon.'"></i><script type="text/template"><div class="markdown">'.$this->helper->text->markdown($markdownText).'</div></script></span>';
}
public function tooltipLink($label, $link)
{
return '<span class="tooltip" data-href="'.$link.'">'.$label.'</span>';
}
public function getToken()
{
return $this->token;

View File

@ -51,18 +51,6 @@ class TextHelper extends Base
return $parser->text($text);
}
/**
* Escape Markdown text that need to be stored in HTML attribute
*
* @access public
* @param string $text
* @return mixed
*/
public function markdownAttribute($text)
{
return htmlentities($this->markdown($text), ENT_QUOTES, 'UTF-8');
}
/**
* Format a file size
*

View File

@ -68,11 +68,8 @@
<?php endif ?>
<?php if (! $not_editable && ! empty($column['description'])): ?>
<span class="tooltip" title="<?= $this->text->markdownAttribute($column['description']) ?>">
&nbsp;<i class="fa fa-info-circle"></i>
</span>
<?= $this->app->tooltipMarkdown($column['description']) ?>
<?php endif ?>
</span>
<?php if (! empty($column['column_nb_tasks'])): ?>

View File

@ -11,12 +11,7 @@
<?= $this->text->e($swimlane['name']) ?>
<?php if (! $not_editable && ! empty($swimlane['description'])): ?>
<span
title="<?= t('Description') ?>"
class="tooltip"
data-href="<?= $this->url->href('BoardTooltipController', 'swimlane', array('swimlane_id' => $swimlane['id'], 'project_id' => $project['id'])) ?>">
<i class="fa fa-info-circle"></i>
</span>
<?= $this->app->tooltipLink('<i class="fa fa-info-circle"></i>', $this->url->href('BoardTooltipController', 'swimlane', array('swimlane_id' => $swimlane['id'], 'project_id' => $project['id']))) ?>
<?php endif ?>
<span title="<?= t('Task count') ?>" class="board-column-header-task-count swimlane-task-count-<?= $swimlane['id'] ?>">

View File

@ -31,7 +31,7 @@
data-task-limit="<?= $column['task_limit'] ?>">
<div class="board-rotation-wrapper">
<div class="board-column-title board-rotation board-toggle-column-view" data-column-id="<?= $column['id'] ?>" title="<?= t('Show this column') ?>">
<i class="fa fa-plus-square tooltip" title="<?= $this->text->e($column['title']) ?>"></i> <?= $this->text->e($column['title']) ?>
<i class="fa fa-plus-square" title="<?= $this->text->e($column['title']) ?>"></i> <?= $this->text->e($column['title']) ?>
</div>
</div>
</div>

View File

@ -11,8 +11,11 @@
array('task_id' => $task['id'], 'project_id' => $task['project_id']),
false,
'js-modal-medium' . (! empty($task['category_description']) ? ' tooltip' : ''),
! empty($task['category_description']) ? $this->text->markdownAttribute($task['category_description']) : t('Change category')
t('Change category')
) ?>
<?php if (! empty($task['category_description'])): ?>
<?= $this->app->tooltipMarkdown($task['category_description']) ?>
<?php endif ?>
<?php endif ?>
</span>
</div>
@ -72,27 +75,27 @@
<div class="task-board-icons-row">
<?php if ($task['recurrence_status'] == \Kanboard\Model\TaskModel::RECURRING_STATUS_PENDING): ?>
<span title="<?= t('Recurrence') ?>" class="tooltip" data-href="<?= $this->url->href('BoardTooltipController', 'recurrence', array('task_id' => $task['id'], 'project_id' => $task['project_id'])) ?>"><i class="fa fa-refresh fa-rotate-90"></i></span>
<?= $this->app->tooltipLink('<i class="fa fa-refresh fa-rotate-90"></i>', $this->url->href('BoardTooltipController', 'recurrence', array('task_id' => $task['id'], 'project_id' => $task['project_id']))) ?>
<?php endif ?>
<?php if ($task['recurrence_status'] == \Kanboard\Model\TaskModel::RECURRING_STATUS_PROCESSED): ?>
<span title="<?= t('Recurrence') ?>" class="tooltip" data-href="<?= $this->url->href('BoardTooltipController', 'recurrence', array('task_id' => $task['id'], 'project_id' => $task['project_id'])) ?>"><i class="fa fa-refresh fa-rotate-90 fa-inverse"></i></span>
<?= $this->app->tooltipLink('<i class="fa fa-refresh fa-rotate-90 fa-inverse"></i>', $this->url->href('BoardTooltipController', 'recurrence', array('task_id' => $task['id'], 'project_id' => $task['project_id']))) ?>
<?php endif ?>
<?php if (! empty($task['nb_links'])): ?>
<span title="<?= t('Links') ?>" class="tooltip" data-href="<?= $this->url->href('BoardTooltipController', 'tasklinks', array('task_id' => $task['id'], 'project_id' => $task['project_id'])) ?>"><i class="fa fa-code-fork fa-fw"></i><?= $task['nb_links'] ?></span>
<?= $this->app->tooltipLink('<i class="fa fa-code-fork fa-fw"></i>'.$task['nb_links'], $this->url->href('BoardTooltipController', 'tasklinks', array('task_id' => $task['id'], 'project_id' => $task['project_id']))) ?>
<?php endif ?>
<?php if (! empty($task['nb_external_links'])): ?>
<span title="<?= t('External links') ?>" class="tooltip" data-href="<?= $this->url->href('BoardTooltipController', 'externallinks', array('task_id' => $task['id'], 'project_id' => $task['project_id'])) ?>"><i class="fa fa-external-link fa-fw"></i><?= $task['nb_external_links'] ?></span>
<?= $this->app->tooltipLink('<i class="fa fa-external-link fa-fw"></i>'.$task['nb_external_links'], $this->url->href('BoardTooltipController', 'externallinks', array('task_id' => $task['id'], 'project_id' => $task['project_id']))) ?>
<?php endif ?>
<?php if (! empty($task['nb_subtasks'])): ?>
<span title="<?= t('Sub-Tasks') ?>" class="tooltip" data-href="<?= $this->url->href('BoardTooltipController', 'subtasks', array('task_id' => $task['id'], 'project_id' => $task['project_id'])) ?>"><i class="fa fa-bars"></i>&nbsp;<?= round($task['nb_completed_subtasks']/$task['nb_subtasks']*100, 0).'%' ?></span>
<?= $this->app->tooltipLink('<i class="fa fa-bars fa-fw"></i>'.round($task['nb_completed_subtasks'] / $task['nb_subtasks'] * 100, 0).'%', $this->url->href('BoardTooltipController', 'subtasks', array('task_id' => $task['id'], 'project_id' => $task['project_id']))) ?>
<?php endif ?>
<?php if (! empty($task['nb_files'])): ?>
<span title="<?= t('Attachments') ?>" class="tooltip" data-href="<?= $this->url->href('BoardTooltipController', 'attachments', array('task_id' => $task['id'], 'project_id' => $task['project_id'])) ?>"><i class="fa fa-paperclip"></i>&nbsp;<?= $task['nb_files'] ?></span>
<?= $this->app->tooltipLink('<i class="fa fa-paperclip fa-fw"></i>'.$task['nb_files'], $this->url->href('BoardTooltipController', 'attachments', array('task_id' => $task['id'], 'project_id' => $task['project_id']))) ?>
<?php endif ?>
<?php if ($task['nb_comments'] > 0): ?>
@ -111,9 +114,7 @@
<?php endif ?>
<?php if (! empty($task['description'])): ?>
<span title="<?= t('Description') ?>" class="tooltip" data-href="<?= $this->url->href('BoardTooltipController', 'description', array('task_id' => $task['id'], 'project_id' => $task['project_id'])) ?>">
<i class="fa fa-file-text-o"></i>
</span>
<?= $this->app->tooltipLink('<i class="fa fa-file-text-o"></i>', $this->url->href('BoardTooltipController', 'description', array('task_id' => $task['id'], 'project_id' => $task['project_id']))) ?>
<?php endif ?>
<?php if ($task['is_active'] == 1): ?>

View File

@ -31,9 +31,7 @@
<?= $this->text->e($category['name']) ?>
<?php if (! empty($category['description'])): ?>
<span class="tooltip" title="<?= $this->text->markdownAttribute($category['description']) ?>">
<i class="fa fa-info-circle"></i>
</span>
<?= $this->app->tooltipMarkdown($category['description']) ?>
<?php endif ?>
</td>
</tr>

View File

@ -42,9 +42,7 @@
</div>
<?= $this->text->e($column['title']) ?>
<?php if (! empty($column['description'])): ?>
<span class="tooltip" title="<?= $this->text->markdownAttribute($column['description']) ?>">
<i class="fa fa-info-circle"></i>
</span>
<?= $this->app->tooltipMarkdown($column['description']) ?>
<?php endif ?>
</td>
<td>

View File

@ -10,8 +10,6 @@
<?php endif ?>
</span>
<?php if (! empty($description)): ?>
<small class="tooltip" title="<?= $this->text->markdownAttribute($description) ?>">
<i class="fa fa-info-circle"></i>
</small>
<?= $this->app->tooltipMarkdown($description) ?>
<?php endif ?>
</h1>

View File

@ -10,13 +10,11 @@
<?php endif ?>
<?php if ($this->user->hasAccess('ProjectUserOverviewController', 'managers')): ?>
<span class="tooltip" title="<?= t('Members') ?>" data-href="<?= $this->url->href('ProjectUserOverviewController', 'users', array('project_id' => $project['id'])) ?>"><i class="fa fa-users"></i></span>&nbsp;
<?= $this->app->tooltipLink('<i class="fa fa-users"></i>', $this->url->href('ProjectUserOverviewController', 'users', array('project_id' => $project['id']))) ?>
<?php endif ?>
<?php if (! empty($project['description'])): ?>
<span class="tooltip" title="<?= $this->text->markdownAttribute($project['description']) ?>">
<i class="fa fa-info-circle"></i>
</span>
<?= $this->app->tooltipMarkdown($project['description']) ?>
<?php endif ?>
<?php if ($project['is_active'] == 0): ?>

View File

@ -30,9 +30,7 @@
</div>
</div>
<div class="file-thumbnail-description">
<span class="tooltip" title='<?= t('Uploaded: %s', $this->dt->datetime($file['date'])).'<br>'.t('Size: %s', $this->text->bytes($file['size'])) ?>'>
<i class="fa fa-info-circle"></i>
</span>
<?= $this->app->tooltipMarkdown(t('Uploaded: %s', $this->dt->datetime($file['date']))."\n\n".t('Size: %s', $this->text->bytes($file['size']))) ?>
<?php if (! empty($file['user_id'])): ?>
<?= t('Uploaded by %s', $file['user_name'] ?: $file['username']) ?>
<?php else: ?>

View File

@ -25,9 +25,7 @@
</ul>
</div>
<?= $this->text->e($template['title']) ?>
<span class="tooltip" title="<?= $this->text->markdownAttribute($template['description']) ?>">
<i class="fa fa-info-circle"></i>
</span>
<?= $this->app->tooltipMarkdown($template['description']) ?>
</td>
</tr>
<?php endforeach ?>

View File

@ -65,9 +65,7 @@
<td>
<?= $this->text->e($column['title']) ?>
<?php if (! empty($column['description'])): ?>
<span class="tooltip" title="<?= $this->text->markdownAttribute($column['description']) ?>">
<i class="fa fa-info-circle"></i>
</span>
<?= $this->app->tooltipMarkdown($column['description']) ?>
<?php endif ?>
</td>
<td>

View File

@ -40,9 +40,7 @@
<?= $this->text->e($swimlane['name']) ?>
<?php if (! empty($swimlane['description'])): ?>
<span class="tooltip" title="<?= $this->text->markdownAttribute($swimlane['description']) ?>">
<i class="fa fa-info-circle"></i>
</span>
<?= $this->app->tooltipMarkdown($swimlane['description']) ?>
<?php endif ?>
</td>
<td>

View File

@ -30,9 +30,7 @@
</div>
</div>
<div class="file-thumbnail-description">
<span class="tooltip" title='<?= t('Uploaded: %s', $this->dt->datetime($file['date'])).'<br>'.t('Size: %s', $this->text->bytes($file['size'])) ?>'>
<i class="fa fa-info-circle"></i>
</span>
<?= $this->app->tooltipMarkdown(t('Uploaded: %s', $this->dt->datetime($file['date']))."\n\n".t('Size: %s', $this->text->bytes($file['size']))) ?>
<?php if (! empty($file['user_id'])): ?>
<?= t('Uploaded by %s', $file['user_name'] ?: $file['username']) ?>
<?php else: ?>

View File

@ -13,8 +13,11 @@
array('task_id' => $task['id'], 'project_id' => $task['project_id']),
false,
'js-modal-medium' . (! empty($task['category_description']) ? ' tooltip' : ''),
! empty($task['category_description']) ? $this->text->markdownAttribute($task['category_description']) : t('Change category')
t('Change category')
) ?>
<?php if (! empty($task['category_description'])): ?>
<?= $this->app->tooltipMarkdown($task['category_description']) ?>
<?php endif ?>
<?php else: ?>
<?= $this->text->e($task['category_name']) ?>
<?php endif ?>

View File

@ -44,27 +44,27 @@
<?php endif ?>
<?php if ($task['recurrence_status'] == \Kanboard\Model\TaskModel::RECURRING_STATUS_PENDING): ?>
<span title="<?= t('Recurrence') ?>" class="tooltip" data-href="<?= $this->url->href('BoardTooltipController', 'recurrence', array('task_id' => $task['id'], 'project_id' => $task['project_id'])) ?>"><i class="fa fa-refresh fa-rotate-90"></i></span>
<?= $this->app->tooltipLink('<i class="fa fa-refresh fa-rotate-90"></i>', $this->url->href('BoardTooltipController', 'recurrence', array('task_id' => $task['id'], 'project_id' => $task['project_id']))) ?>
<?php endif ?>
<?php if ($task['recurrence_status'] == \Kanboard\Model\TaskModel::RECURRING_STATUS_PROCESSED): ?>
<span title="<?= t('Recurrence') ?>" class="tooltip" data-href="<?= $this->url->href('BoardTooltipController', 'recurrence', array('task_id' => $task['id'], 'project_id' => $task['project_id'])) ?>"><i class="fa fa-refresh fa-rotate-90 fa-inverse"></i></span>
<?= $this->app->tooltipLink('<i class="fa fa-refresh fa-rotate-90 fa-inverse"></i>', $this->url->href('BoardTooltipController', 'recurrence', array('task_id' => $task['id'], 'project_id' => $task['project_id']))) ?>
<?php endif ?>
<?php if (! empty($task['nb_links'])): ?>
<span title="<?= t('Links') ?>" class="tooltip" data-href="<?= $this->url->href('BoardTooltipController', 'tasklinks', array('task_id' => $task['id'], 'project_id' => $task['project_id'])) ?>"><i class="fa fa-code-fork fa-fw"></i><?= $task['nb_links'] ?></span>
<?= $this->app->tooltipLink('<i class="fa fa-code-fork fa-fw"></i>'.$task['nb_links'], $this->url->href('BoardTooltipController', 'tasklinks', array('task_id' => $task['id'], 'project_id' => $task['project_id']))) ?>
<?php endif ?>
<?php if (! empty($task['nb_external_links'])): ?>
<span title="<?= t('External links') ?>" class="tooltip" data-href="<?= $this->url->href('BoardTooltipController', 'externallinks', array('task_id' => $task['id'], 'project_id' => $task['project_id'])) ?>"><i class="fa fa-external-link fa-fw"></i><?= $task['nb_external_links'] ?></span>
<?= $this->app->tooltipLink('<i class="fa fa-external-link fa-fw"></i>'.$task['nb_external_links'], $this->url->href('BoardTooltipController', 'externallinks', array('task_id' => $task['id'], 'project_id' => $task['project_id']))) ?>
<?php endif ?>
<?php if (! empty($task['nb_subtasks'])): ?>
<span title="<?= t('Sub-Tasks') ?>" class="tooltip" data-href="<?= $this->url->href('BoardTooltipController', 'subtasks', array('task_id' => $task['id'], 'project_id' => $task['project_id'])) ?>"><i class="fa fa-bars"></i>&nbsp;<?= round($task['nb_completed_subtasks']/$task['nb_subtasks']*100, 0).'%' ?></span>
<?= $this->app->tooltipLink('<i class="fa fa-bars fa-fw"></i>'.round($task['nb_completed_subtasks'] / $task['nb_subtasks'] * 100, 0).'%', $this->url->href('BoardTooltipController', 'subtasks', array('task_id' => $task['id'], 'project_id' => $task['project_id']))) ?>
<?php endif ?>
<?php if (! empty($task['nb_files'])): ?>
<span title="<?= t('Attachments') ?>" class="tooltip" data-href="<?= $this->url->href('BoardTooltipController', 'attachments', array('task_id' => $task['id'], 'project_id' => $task['project_id'])) ?>"><i class="fa fa-paperclip"></i>&nbsp;<?= $task['nb_files'] ?></span>
<?= $this->app->tooltipLink('<i class="fa fa-paperclip fa-fw"></i>'.$task['nb_files'], $this->url->href('BoardTooltipController', 'attachments', array('task_id' => $task['id'], 'project_id' => $task['project_id']))) ?>
<?php endif ?>
<?php if ($task['nb_comments'] > 0): ?>
@ -83,9 +83,7 @@
<?php endif ?>
<?php if (! empty($task['description'])): ?>
<span title="<?= t('Description') ?>" class="tooltip" data-href="<?= $this->url->href('BoardTooltipController', 'description', array('task_id' => $task['id'], 'project_id' => $task['project_id'])) ?>">
<i class="fa fa-file-text-o"></i>
</span>
<?= $this->app->tooltipLink('<i class="fa fa-file-text-o"></i>', $this->url->href('BoardTooltipController', 'description', array('task_id' => $task['id'], 'project_id' => $task['project_id']))) ?>
<?php endif ?>
<span title="<?= t('Position') ?>">(<?= $task['position'] ?>)</span>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -3,5 +3,6 @@ document.addEventListener('DOMContentLoaded', function () {
KB.render();
KB.listen();
KB.keyboardShortcuts();
KB.tooltip();
KB.trigger('dom.ready');
});

85
assets/js/core/tooltip.js Normal file
View File

@ -0,0 +1,85 @@
KB.tooltip = function () {
function onMouseOver(event) {
if (! exists()) {
create(event.target);
}
}
function onMouseLeaveContainer() {
setTimeout(destroy, 500);
}
function create(element) {
var contentElement = element.querySelector("script");
if (contentElement) {
render(element, contentElement.innerHTML);
return;
}
var link = element.dataset.href;
if (link) {
fetch(link, function (html) {
if (html) {
render(element, html);
}
});
}
}
function fetch(url, callback) {
var request = new XMLHttpRequest();
request.open("GET", url, true);
request.setRequestHeader("X-Requested-With", "XMLHttpRequest");
request.onreadystatechange = function () {
if (request.readyState === XMLHttpRequest.DONE) {
if (request.status === 200) {
callback(request.responseText);
}
}
};
request.send(null);
}
function render(element, html) {
var containerElement = document.createElement("div");
containerElement.id = "tooltip-container";
containerElement.innerHTML = html;
containerElement.addEventListener("mouseleave", onMouseLeaveContainer, false);
var elementRect = element.getBoundingClientRect();
var top = elementRect.top + window.scrollY + elementRect.height;
containerElement.style.top = top + "px";
if (elementRect.left > (window.innerWidth - 600)) {
var right = window.innerWidth - elementRect.right - window.scrollX;
containerElement.style.right = right + "px";
} else {
var left = elementRect.left + window.scrollX;
containerElement.style.left = left + "px";
}
document.body.appendChild(containerElement);
document.body.onclick = function(event) {
if (! containerElement.contains(event.target)) {
destroy();
}
};
}
function destroy() {
var element = document.getElementById("tooltip-container");
if (element) {
element.parentNode.removeChild(element);
}
}
function exists() {
return !!document.getElementById("tooltip-container");
}
var elements = document.querySelectorAll(".tooltip");
for (var i = 0; i < elements.length; i++) {
elements[i].addEventListener("mouseenter", onMouseOver, false);
}
};

View File

@ -103,6 +103,7 @@ Kanboard.BoardDragAndDrop.prototype.refresh = function(data) {
this.app.hideLoadingIcon();
this.executeListeners();
this.dragAndDrop();
KB.tooltip();
};
Kanboard.BoardDragAndDrop.prototype.executeListeners = function() {

View File

@ -1,75 +0,0 @@
Kanboard.Tooltip = function(app) {
this.app = app;
};
Kanboard.Tooltip.prototype.onBoardRendered = function() {
this.execute();
};
Kanboard.Tooltip.prototype.execute = function() {
$(".tooltip").tooltip({
track: false,
show: false,
hide: false,
position: {
my: 'left-20 top',
at: 'center bottom+9',
using: function(position, feedback) {
$(this).css(position);
var arrow_pos = feedback.target.left + feedback.target.width / 2 - feedback.element.left - 20;
$("<div>")
.addClass("tooltip-arrow")
.addClass(feedback.vertical)
.addClass(arrow_pos < 1 ? "align-left" : "align-right")
.appendTo(this);
}
},
content: function() {
var _this = this;
var href = $(this).attr('data-href');
if (! href) {
return '<div class="markdown">' + $(this).attr("title") + '</div>';
}
$.get(href, function setTooltipContent(data) {
var tooltip = $('.ui-tooltip:visible');
$('.ui-tooltip-content:visible').html(data);
// Clear previous position, it interferes with the updated position computation
tooltip.css({ top: '', left: '' });
// Remove arrow, it will be added when repositionning
tooltip.children('.tooltip-arrow').remove();
// Reposition the tooltip
var position = $(_this).tooltip("option", "position");
position.of = $(_this);
tooltip.position(position);
});
return '<i class="fa fa-spinner fa-spin"></i>';
}
})
.on("mouseenter", function() {
var _this = this;
$(this).tooltip("open");
$(".ui-tooltip").on("mouseleave", function() {
$(_this).tooltip('close');
});
}).on("mouseleave focusout", function(e) {
e.stopImmediatePropagation();
var _this = this;
setTimeout(function() {
if (! $(".ui-tooltip:hover").length) {
$(_this).tooltip("close");
}
}, 100);
});
};

View File

@ -1,49 +1,23 @@
@import variables
.tooltip-arrow:after
.tooltip
i.fa
cursor: pointer
.fa-info-circle
color: color('light')
#tooltip-container
padding: 5px
background: #fff
border: 1px solid #aaaaaa
box-shadow: 0 0 5px #aaa
div.ui-tooltip
min-width: 200px
max-width: 600px
.tooltip-arrow
width: 20px
height: 10px
overflow: hidden
border: 1px solid #ddd
border-radius: 4px
box-shadow: 0 6px 12px #aaa
position: absolute
&.top
top: -10px
&.bottom
bottom: -10px
&.align-left
left: 10px
&.align-right
right: 10px
&:after
content: ""
position: absolute
width: 14px
height: 14px
-webkit-transform: rotate(45deg)
-ms-transform: rotate(45deg)
transform: rotate(45deg)
&.bottom:after
top: -10px
&.top:after
bottom: -10px
&.align-left:after
left: 0
&.align-right:after
right: 0
min-width: 350px
.tooltip-large
width: 600px
.markdown p
margin-bottom: 0
.ui-tooltip-content .markdown p
margin-bottom: 0
.tooltip .fa-info-circle
color: color('light')
.tooltip-large
width: 600px

View File

@ -102,14 +102,6 @@ class TextHelperTest extends Base
$this->assertEquals('<p>Text @admin @notfound</p>', $textHelper->markdown('Text @admin @notfound', true));
}
public function testMarkdownAttribute()
{
$textHelper = new TextHelper($this->container);
$this->assertEquals('&lt;p&gt;&Ccedil;a marche&lt;/p&gt;', $textHelper->markdownAttribute('Ça marche'));
$this->assertEquals('&lt;p&gt;Test with &amp;quot;double quotes&amp;quot;&lt;/p&gt;', $textHelper->markdownAttribute('Test with "double quotes"'));
$this->assertEquals('&lt;p&gt;Test with &#039;single quotes&#039;&lt;/p&gt;', $textHelper->markdownAttribute("Test with 'single quotes'"));
}
public function testFormatBytes()
{
$textHelper = new TextHelper($this->container);