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>