2018-03-27 10:29:14 +08:00
|
|
|
import noteDetailService from "./note_detail.js";
|
|
|
|
import treeUtils from "./tree_utils.js";
|
|
|
|
import linkService from "./link.js";
|
2018-08-22 21:31:36 +08:00
|
|
|
import server from "./server.js";
|
2018-03-27 10:29:14 +08:00
|
|
|
|
|
|
|
function setupTooltip() {
|
|
|
|
$(document).tooltip({
|
2018-08-07 17:38:00 +08:00
|
|
|
items: "body a",
|
2018-03-27 10:29:14 +08:00
|
|
|
content: function (callback) {
|
2018-08-16 00:22:02 +08:00
|
|
|
const $link = $(this);
|
|
|
|
|
|
|
|
if ($link.hasClass("no-tooltip-preview")) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2018-10-07 04:00:43 +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"));
|
2018-07-28 23:59:55 +08:00
|
|
|
|
|
|
|
if (!notePath) {
|
2018-08-16 00:22:02 +08:00
|
|
|
notePath = $link.attr("data-note-path");
|
2018-07-28 23:59:55 +08:00
|
|
|
}
|
2018-03-27 10:29:14 +08:00
|
|
|
|
2018-07-30 00:39:10 +08:00
|
|
|
if (notePath) {
|
2018-03-27 10:29:14 +08:00
|
|
|
const noteId = treeUtils.getNoteIdFromNotePath(notePath);
|
|
|
|
|
2018-08-22 21:31:36 +08:00
|
|
|
const notePromise = noteDetailService.loadNote(noteId);
|
|
|
|
const attributePromise = server.get('notes/' + noteId + '/attributes');
|
|
|
|
|
|
|
|
Promise.all([notePromise, attributePromise])
|
|
|
|
.then(([note, attributes]) => renderTooltip(callback, note, attributes));
|
2018-03-27 10:29:14 +08:00
|
|
|
}
|
|
|
|
},
|
|
|
|
close: function (event, ui) {
|
|
|
|
ui.tooltip.hover(function () {
|
|
|
|
$(this).stop(true).fadeTo(400, 1);
|
|
|
|
},
|
|
|
|
function () {
|
|
|
|
$(this).fadeOut('400', function () {
|
|
|
|
$(this).remove();
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2018-08-22 21:31:36 +08:00
|
|
|
async function renderTooltip(callback, note, attributes) {
|
|
|
|
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);
|
2018-08-22 21:31:36 +08:00
|
|
|
|
|
|
|
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;
|
|
|
|
}
|
|
|
|
|
2018-08-22 21:31:36 +08:00
|
|
|
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') {
|
|
|
|
content += note.content;
|
|
|
|
}
|
|
|
|
else if (note.type === 'code') {
|
|
|
|
content += $("<pre>").text(note.content).prop('outerHTML');
|
|
|
|
}
|
|
|
|
// other types of notes don't have tooltip preview
|
|
|
|
|
|
|
|
if (!content.trim()) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
callback(content);
|
|
|
|
}
|
|
|
|
|
2018-03-27 10:29:14 +08:00
|
|
|
export default {
|
|
|
|
setupTooltip
|
|
|
|
}
|