Rewrite tooltips code without jQuery
This commit is contained in:
parent
927607b5ff
commit
5996a8abcf
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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
|
||||
*
|
||||
|
|
|
|||
|
|
@ -68,11 +68,8 @@
|
|||
<?php endif ?>
|
||||
|
||||
<?php if (! $not_editable && ! 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 ?>
|
||||
|
||||
</span>
|
||||
|
||||
<?php if (! empty($column['column_nb_tasks'])): ?>
|
||||
|
|
|
|||
|
|
@ -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'] ?>">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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> <?= 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> <?= $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): ?>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<?= $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): ?>
|
||||
|
|
|
|||
|
|
@ -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: ?>
|
||||
|
|
|
|||
|
|
@ -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 ?>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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: ?>
|
||||
|
|
|
|||
|
|
@ -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 ?>
|
||||
|
|
|
|||
|
|
@ -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> <?= 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> <?= $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
|
|
@ -3,5 +3,6 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||
KB.render();
|
||||
KB.listen();
|
||||
KB.keyboardShortcuts();
|
||||
KB.tooltip();
|
||||
KB.trigger('dom.ready');
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
};
|
||||
|
|
@ -103,6 +103,7 @@ Kanboard.BoardDragAndDrop.prototype.refresh = function(data) {
|
|||
this.app.hideLoadingIcon();
|
||||
this.executeListeners();
|
||||
this.dragAndDrop();
|
||||
KB.tooltip();
|
||||
};
|
||||
|
||||
Kanboard.BoardDragAndDrop.prototype.executeListeners = function() {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
});
|
||||
};
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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('<p>Ça marche</p>', $textHelper->markdownAttribute('Ça marche'));
|
||||
$this->assertEquals('<p>Test with &quot;double quotes&quot;</p>', $textHelper->markdownAttribute('Test with "double quotes"'));
|
||||
$this->assertEquals('<p>Test with 'single quotes'</p>', $textHelper->markdownAttribute("Test with 'single quotes'"));
|
||||
}
|
||||
|
||||
public function testFormatBytes()
|
||||
{
|
||||
$textHelper = new TextHelper($this->container);
|
||||
|
|
|
|||
Loading…
Reference in New Issue