From 5996a8abcf12336586cee345180203dd1500c92f Mon Sep 17 00:00:00 2001
From: Frédéric Guillot <fred@kanboard.net>
Date: Fri, 20 Apr 2018 15:18:30 -0700
Subject: Rewrite tooltips code without jQuery

---
 app/Helper/AppHelper.php                         | 10 ++++++++++
 app/Helper/TextHelper.php                        | 12 ------------
 app/Template/board/table_column.php              |  5 +----
 app/Template/board/table_swimlane.php            |  7 +------
 app/Template/board/table_tasks.php               |  2 +-
 app/Template/board/task_footer.php               | 21 +++++++++++----------
 app/Template/category/index.php                  |  4 +---
 app/Template/column/index.php                    |  4 +---
 app/Template/header/title.php                    |  4 +---
 app/Template/project_list/project_icons.php      |  6 ++----
 app/Template/project_overview/images.php         |  4 +---
 app/Template/project_predefined_content/show.php |  4 +---
 app/Template/project_view/show.php               |  4 +---
 app/Template/swimlane/table.php                  |  4 +---
 app/Template/task_file/images.php                |  4 +---
 app/Template/task_list/task_details.php          |  5 ++++-
 app/Template/task_list/task_icons.php            | 16 +++++++---------
 17 files changed, 45 insertions(+), 71 deletions(-)

(limited to 'app')

diff --git a/app/Helper/AppHelper.php b/app/Helper/AppHelper.php
index 3a0a2428..63ebac98 100644
--- a/app/Helper/AppHelper.php
+++ b/app/Helper/AppHelper.php
@@ -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;
diff --git a/app/Helper/TextHelper.php b/app/Helper/TextHelper.php
index 698bef6d..910130d6 100644
--- a/app/Helper/TextHelper.php
+++ b/app/Helper/TextHelper.php
@@ -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
      *
diff --git a/app/Template/board/table_column.php b/app/Template/board/table_column.php
index 1bba397d..765d05a9 100644
--- a/app/Template/board/table_column.php
+++ b/app/Template/board/table_column.php
@@ -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'])): ?>
diff --git a/app/Template/board/table_swimlane.php b/app/Template/board/table_swimlane.php
index c5937e01..33c1cf26 100644
--- a/app/Template/board/table_swimlane.php
+++ b/app/Template/board/table_swimlane.php
@@ -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'] ?>">
diff --git a/app/Template/board/table_tasks.php b/app/Template/board/table_tasks.php
index e7452807..82e90bc9 100644
--- a/app/Template/board/table_tasks.php
+++ b/app/Template/board/table_tasks.php
@@ -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>
diff --git a/app/Template/board/task_footer.php b/app/Template/board/task_footer.php
index 9d375194..95ffd8fd 100644
--- a/app/Template/board/task_footer.php
+++ b/app/Template/board/task_footer.php
@@ -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): ?>
diff --git a/app/Template/category/index.php b/app/Template/category/index.php
index f7657be2..1ef67fdb 100644
--- a/app/Template/category/index.php
+++ b/app/Template/category/index.php
@@ -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>
diff --git a/app/Template/column/index.php b/app/Template/column/index.php
index 7c29d4bf..92abfbcf 100644
--- a/app/Template/column/index.php
+++ b/app/Template/column/index.php
@@ -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>
diff --git a/app/Template/header/title.php b/app/Template/header/title.php
index 61c6ee9a..75fb1af7 100644
--- a/app/Template/header/title.php
+++ b/app/Template/header/title.php
@@ -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>
diff --git a/app/Template/project_list/project_icons.php b/app/Template/project_list/project_icons.php
index 348db367..b359bcfe 100644
--- a/app/Template/project_list/project_icons.php
+++ b/app/Template/project_list/project_icons.php
@@ -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): ?>
diff --git a/app/Template/project_overview/images.php b/app/Template/project_overview/images.php
index 482ef551..bc356fc2 100644
--- a/app/Template/project_overview/images.php
+++ b/app/Template/project_overview/images.php
@@ -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: ?>
diff --git a/app/Template/project_predefined_content/show.php b/app/Template/project_predefined_content/show.php
index b2785ada..5bfd0722 100644
--- a/app/Template/project_predefined_content/show.php
+++ b/app/Template/project_predefined_content/show.php
@@ -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 ?>
diff --git a/app/Template/project_view/show.php b/app/Template/project_view/show.php
index 8105d708..755b25c8 100644
--- a/app/Template/project_view/show.php
+++ b/app/Template/project_view/show.php
@@ -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>
diff --git a/app/Template/swimlane/table.php b/app/Template/swimlane/table.php
index 708b67f5..eb8f591f 100644
--- a/app/Template/swimlane/table.php
+++ b/app/Template/swimlane/table.php
@@ -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>
diff --git a/app/Template/task_file/images.php b/app/Template/task_file/images.php
index 9d20dea0..c03e5648 100644
--- a/app/Template/task_file/images.php
+++ b/app/Template/task_file/images.php
@@ -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: ?>
diff --git a/app/Template/task_list/task_details.php b/app/Template/task_list/task_details.php
index eeb5747d..b68be2dc 100644
--- a/app/Template/task_list/task_details.php
+++ b/app/Template/task_list/task_details.php
@@ -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 ?>
diff --git a/app/Template/task_list/task_icons.php b/app/Template/task_list/task_icons.php
index d02c9021..ded13ade 100644
--- a/app/Template/task_list/task_icons.php
+++ b/app/Template/task_list/task_icons.php
@@ -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>
-- 
cgit v1.2.3