vmario/wisemapping-frontend
1
0
Fork 0
mirror of https://bitbucket.org/wisemapping/wisemapping-frontend.git synced 2024-11-22 14:47:56 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merged in bugfix/link-edit-display (pull request #19)

Browse Source 
Fix link not updating after edit

* Fix link not updating after edit
Fix $ undefined error in mouseleave


Approved-by: Paulo Veiga
This commit is contained in:
Matias Arriola 2021-12-29 18:11:10 +00:00 committed by Paulo Veiga
parent 89765aa93d
commit 60db37b916
1 changed files with 16 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
packages/mindplot/src/components/widget/LinkIconTooltip.js
View File

@ -26,23 +26,30 @@ class LinkIconTooltip extends FloatingTip {
const nativeElement = $(linkIcon.getImage().peer._native); const nativeElement = $(linkIcon.getImage().peer._native);
super(nativeElement, { super(nativeElement, {
// Content can also be a function of the target element! // Content can also be a function of the target element!
content: LinkIconTooltip._buildContent(linkIcon), content() {
return LinkIconTooltip._buildContent(linkIcon);
},
html: true, html: true,
placement: 'bottom', placement: 'bottom',
container: 'body', container: 'body',
title: $msg('LINK'), title: $msg('LINK'),
trigger: 'manual', trigger: 'manual',
template: '<div id="linkPopover" class="popover" onmouseover="$(this).mouseleave(function() {$(this).fadeOut(200); });" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>', template: '<div id="linkPopover" class="popover" onmouseover="jQuery(this).mouseleave(function() {jQuery(this).fadeOut(200); });" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>',
destroyOnExit: true,
}); });
} }
static _buildContent(linkIcon) { static _buildContent(linkIcon) {
const url = linkIcon.getModel().getUrl();
const linkText = `URL: ${url}`;
const linkPreview = `http://free.pagepeeker.com/v2/thumbs.php?size=m&url=${url}`;
const result = $('<div></div>').css({ const result = $('<div></div>').css({
padding: '5px', padding: '5px',
width: '100%', width: '100%',
}); });
const text = $('<div></div>').text(`URL: ${linkIcon.getModel().getUrl()}`) const text = $('<div id="linkPopoverUrl"></div>').text(linkText)
.css({ .css({
'white-space': 'pre-wrap', 'white-space': 'pre-wrap',
'word-wrap': 'break-word', 'word-wrap': 'break-word',
@ -57,15 +64,15 @@ class LinkIconTooltip extends FloatingTip {
'padding-top': '5px', 'padding-top': '5px',
}); });
const img = $('<img>') const img = $('<img id="linkPopoverPreview">')
.prop('src', `http://free.pagepeeker.com/v2/thumbs.php?size=m&url=${linkIcon.getModel().getUrl()}`) .prop('src', linkPreview)
.prop('img', linkIcon.getModel().getUrl()) .prop('img', url)
.prop('alt', linkIcon.getModel().getUrl()); .prop('alt', url);
img.css('padding', '5px'); img.css('padding', '5px');
const link = $('<a></a>').attr({ const link = $('<a id="linkPopoverAnchor"></a>').attr({
href: linkIcon.getModel().getUrl(), href: url,
alt: 'Open in new window ...', alt: 'Open in new window ...',
target: '_blank', target: '_blank',
}); });