dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #1738 from ChantsovaEkaterina/features/map-tooltip-appearance

Browse Source 
Add option to show tooltip on hover
This commit is contained in:
VoBa 2019-05-29 14:37:44 +03:00 committed by GitHub
commit a2afa068a5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 96 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
ui/src/app/widget/lib/google-map.js
View File

@ -266,6 +266,14 @@ export default class TbGoogleMap {
content: ''
});
var map = this;
if (settings.displayTooltipAction == 'hover') {
marker.addListener('mouseover', function () {
popup.open(this.map, marker);
});
marker.addListener('mouseout', function () {
popup.close();
});
} else {
marker.addListener('click', function() {
if (settings.autocloseTooltip) {
map.tooltips.forEach((tooltip) => {
@ -274,6 +282,7 @@ export default class TbGoogleMap {
}
popup.open(this.map, marker);
});
}
this.tooltips.push( {
markerArgs: markerArgs,
popup: popup,

9
ui/src/app/widget/lib/image-map.js
View File

@ -354,6 +354,15 @@ export default class TbImageMap {
var popup = L.popup();
popup.setContent('');
marker.bindPopup(popup, {autoClose: settings.autocloseTooltip, closeOnClick: false});
if (settings.displayTooltipAction == 'hover') {
marker.off('click');
marker.on('mouseover', function () {
this.openPopup();
});
marker.on('mouseout', function () {
this.closePopup();
});
}
this.tooltips.push( {
markerArgs: markerArgs,
popup: popup,

43
ui/src/app/widget/lib/map-widget2.js
View File

@ -156,8 +156,9 @@ export default class TbMapWidgetV2 {
this.locationSettings.showLabel = this.ctx.settings.showLabel !== false;
this.locationSettings.displayTooltip = this.ctx.settings.showTooltip !== false;
this.locationSettings.displayTooltipAction = this.ctx.settings.showTooltipAction && this.ctx.settings.showTooltipAction.length ? this.ctx.settings.showTooltipAction : "click";
this.locationSettings.autocloseTooltip = this.ctx.settings.autocloseTooltip !== false;
this.locationSettings.showPolygon = this.ctx.settings.showPolygon !== false;
this.locationSettings.showPolygon = this.ctx.settings.showPolygon === true;
this.locationSettings.labelColor = this.ctx.widgetConfig.color || '#000000';
this.locationSettings.label = this.ctx.settings.label || "${entityName}";
this.locationSettings.color = this.ctx.settings.color ? tinycolor(this.ctx.settings.color).toHexString() : "#FE7569";
@ -978,6 +979,11 @@ const commonMapSettingsSchema =
"type": "boolean",
"default": true
},
"showTooltipAction": {
"title": "Action for displaying the tooltip",
"type": "string",
"default": "click"
},
"autocloseTooltip": {
"title": "Auto-close tooltips",
"type": "boolean",
@ -1095,6 +1101,21 @@ const commonMapSettingsSchema =
"type": "javascript"
},
"showTooltip",
{
"key": "showTooltipAction",
"type": "rc-select",
"multiple": false,
"items": [
{
"value": "click",
"label": "Show tooltip on click (Default)"
},
{
"value": "hover",
"label": "Show tooltip on hover"
}
]
},
"autocloseTooltip",
{
"key": "tooltipPattern",
@ -1235,6 +1256,11 @@ const imageMapSettingsSchema =
"type": "boolean",
"default": true
},
"showTooltipAction": {
"title": "Action for displaying the tooltip",
"type": "string",
"default": "click"
},
"autocloseTooltip": {
"title": "Auto-close tooltips",
"type": "boolean",
@ -1329,6 +1355,21 @@ const imageMapSettingsSchema =
"type": "javascript"
},
"showTooltip",
{
"key": "showTooltipAction",
"type": "rc-select",
"multiple": false,
"items": [
{
"value": "click",
"label": "Show tooltip on click (Default)"
},
{
"value": "hover",
"label": "Show tooltip on hover"
}
]
},
"autocloseTooltip",
{
"key": "tooltipPattern",

9
ui/src/app/widget/lib/openstreet-map.js
View File

@ -168,6 +168,15 @@ export default class TbOpenStreetMap {
var popup = L.popup();
popup.setContent('');
marker.bindPopup(popup, {autoClose: settings.autocloseTooltip, closeOnClick: false});
if (settings.displayTooltipAction == 'hover') {
marker.off('click');
marker.on('mouseover', function () {
this.openPopup();
});
marker.on('mouseout', function () {
this.closePopup();
});
}
this.tooltips.push({
markerArgs: markerArgs,
popup: popup,

10
ui/src/app/widget/lib/tencent-map.js
View File

@ -278,6 +278,15 @@ export default class TbTencentMap {
map: this.map
});
var map = this;
if (settings.displayTooltipAction == 'hover') {
qq.maps.event.addListener(marker, 'mouseover', function () {
popup.open();
popup.setPosition(marker);
});
qq.maps.event.addListener(marker, 'mouseout', function () {
popup.close();
});
} else {
qq.maps.event.addListener(marker, 'click', function () {
if (settings.autocloseTooltip) {
map.tooltips.forEach((tooltip) => {
@ -287,6 +296,7 @@ export default class TbTencentMap {
popup.open();
popup.setPosition(marker);
});
}
map.tooltips.push({
markerArgs: markerArgs,
popup: popup,