trilium/src/public/javascripts/services/note_tooltip.js

142 lines
4.4 KiB
JavaScript
Raw Normal View History

2020-01-25 16:56:08 +08:00
import treeService from "./tree.js";
import linkService from "./link.js";
import treeCache from "./tree_cache.js";
function setupGlobalTooltip() {
$(document).on("mouseenter", "a", mouseEnterHandler);
$(document).on("mouseleave", "a", mouseLeaveHandler);
2019-04-20 15:39:39 +08:00
// close any note tooltip after click, this fixes the problem that sometimes tooltips remained on the screen
$(document).on("click", () => $('.note-tooltip').remove());
}
function setupElementTooltip($el) {
$el.on('mouseenter', mouseEnterHandler);
$el.on('mouseleave', mouseLeaveHandler);
}
async function mouseEnterHandler() {
const $link = $(this);
2019-11-02 03:00:56 +08:00
if ($link.hasClass("no-tooltip-preview")
|| $link.hasClass("disabled")
|| $link.attr("data-action") === 'note-revision') {
return;
}
2018-11-07 02:35:42 +08:00
// this is to avoid showing tooltip from inside CKEditor link editor dialog
if ($link.closest(".ck-link-actions").length) {
return;
}
let notePath = linkService.getNotePathFromUrl($link.attr("href"));
if (!notePath) {
notePath = $link.attr("data-note-path");
}
if (!notePath) {
return;
}
2018-11-07 02:35:42 +08:00
2020-01-25 16:56:08 +08:00
const noteId = treeService.getNoteIdFromNotePath(notePath);
2018-11-07 02:35:42 +08:00
const note = await treeCache.getNote(noteId);
const noteComplement = await treeCache.getNoteComplement(noteId);
2018-11-07 02:35:42 +08:00
2020-02-01 18:15:58 +08:00
const html = await renderTooltip(note, noteComplement);
// we need to check if we're still hovering over the element
// since the operation to get tooltip content was async, it is possible that
// we now create tooltip which won't close because it won't receive mouseleave event
if ($(this).is(":hover")) {
$(this).tooltip({
delay: {"show": 300, "hide": 100},
container: 'body',
placement: 'auto',
trigger: 'manual',
boundary: 'window',
title: html,
2019-04-20 15:39:39 +08:00
html: true,
template: '<div class="tooltip note-tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'
});
$(this).tooltip('show');
}
}
function mouseLeaveHandler() {
$(this).tooltip('dispose');
}
2020-02-01 18:15:58 +08:00
async function renderTooltip(note, noteComplement) {
const attributes = await note.getAttributes();
let content = '';
2018-08-27 19:35:45 +08:00
const promoted = attributes.filter(attr =>
(attr.type === 'label-definition' || attr.type === 'relation-definition')
&& !attr.name.startsWith("child:")
&& attr.value.isPromoted);
if (promoted.length > 0) {
const $table = $("<table>").addClass("promoted-attributes-in-tooltip");
for (const definitionAttr of promoted) {
const definitionType = definitionAttr.type;
const valueType = definitionType.substr(0, definitionType.length - 11);
let valueAttrs = attributes.filter(el => el.name === definitionAttr.name && el.type === valueType);
for (const valueAttr of valueAttrs) {
2018-08-27 19:35:45 +08:00
if (!valueAttr.value) {
continue;
}
let $value = "";
if (valueType === 'label') {
$value = $("<td>").text(valueAttr.value);
}
else if (valueType === 'relation' && valueAttr.value) {
$value = $("<td>").append(await linkService.createNoteLink(valueAttr.value));
}
const $row = $("<tr>")
.append($("<th>").text(definitionAttr.name))
.append($value);
$table.append($row);
}
}
content += $table.prop('outerHTML');
}
if (note.type === 'text') {
2019-02-07 04:29:23 +08:00
// surround with <div> for a case when note's content is pure text (e.g. "[protected]") which
// then fails the jquery non-empty text test
2020-02-01 18:15:58 +08:00
content += '<div>' + noteComplement.content + '</div>';
}
else if (note.type === 'code') {
2018-11-14 15:36:19 +08:00
content += $("<pre>")
2020-02-01 18:15:58 +08:00
.text(noteComplement.content)
2018-11-14 15:36:19 +08:00
.prop('outerHTML');
}
else if (note.type === 'image') {
content += $("<img>")
2019-02-23 06:03:20 +08:00
.prop("src", `api/images/${note.noteId}/${note.title}`)
2018-11-14 15:36:19 +08:00
.prop('outerHTML');
}
// other types of notes don't have tooltip preview
2018-11-14 15:36:19 +08:00
if (!$(content).text().trim() && note.type !== 'image') {
2018-11-07 02:35:42 +08:00
return "";
}
2018-11-07 02:35:42 +08:00
return content;
}
export default {
setupGlobalTooltip,
setupElementTooltip
}