简柏林 / thingskit · Commits

Commit c5d96d7c415fd901758083f5bfedc0030d999dd2

Authored by Chantsova Ekaterina
1 parent 9bc5e676

Add option to show tooltip on hover

Inline Side-by-side
Showing 5 changed files with 94 additions and 18 deletions
@@ -266,14 +266,23 @@ export default class TbGoogleMap { @@ -266,14 +266,23 @@ export default class TbGoogleMap {
266 content: '' 266 content: ''
267 }); 267 });
268 var map = this; 268 var map = this;
269 - marker.addListener('click', function() {  
270 - if (settings.autocloseTooltip) {  
271 - map.tooltips.forEach((tooltip) => {  
272 - tooltip.popup.close();  
273 - });  
274 - }  
275 - popup.open(this.map, marker);  
276 - }); 269 + if (settings.displayTooltipAction == 'hover') {
  270 + marker.addListener('mouseover', function () {
  271 + popup.open(this.map, marker);
  272 + });
  273 + marker.addListener('mouseout', function () {
  274 + popup.close();
  275 + });
  276 + } else {
  277 + marker.addListener('click', function() {
  278 + if (settings.autocloseTooltip) {
  279 + map.tooltips.forEach((tooltip) => {
  280 + tooltip.popup.close();
  281 + });
  282 + }
  283 + popup.open(this.map, marker);
  284 + });
  285 + }
277 this.tooltips.push( { 286 this.tooltips.push( {
278 markerArgs: markerArgs, 287 markerArgs: markerArgs,
279 popup: popup, 288 popup: popup,
@@ -354,6 +354,14 @@ export default class TbImageMap { @@ -354,6 +354,14 @@ export default class TbImageMap {
354 var popup = L.popup(); 354 var popup = L.popup();
355 popup.setContent(''); 355 popup.setContent('');
356 marker.bindPopup(popup, {autoClose: settings.autocloseTooltip, closeOnClick: false}); 356 marker.bindPopup(popup, {autoClose: settings.autocloseTooltip, closeOnClick: false});
  357 + if (settings.displayTooltipAction == 'hover') {
  358 + marker.on('mouseover', function () {
  359 + this.openPopup();
  360 + });
  361 + marker.on('mouseout', function () {
  362 + this.closePopup();
  363 + });
  364 + }
357 this.tooltips.push( { 365 this.tooltips.push( {
358 markerArgs: markerArgs, 366 markerArgs: markerArgs,
359 popup: popup, 367 popup: popup,
@@ -156,8 +156,9 @@ export default class TbMapWidgetV2 { @@ -156,8 +156,9 @@ export default class TbMapWidgetV2 {
156 156
157 this.locationSettings.showLabel = this.ctx.settings.showLabel !== false; 157 this.locationSettings.showLabel = this.ctx.settings.showLabel !== false;
158 this.locationSettings.displayTooltip = this.ctx.settings.showTooltip !== false; 158 this.locationSettings.displayTooltip = this.ctx.settings.showTooltip !== false;
  159 + this.locationSettings.displayTooltipAction = this.ctx.settings.showTooltipAction && this.ctx.settings.showTooltipAction.length ? this.ctx.settings.showTooltipAction : "click";
159 this.locationSettings.autocloseTooltip = this.ctx.settings.autocloseTooltip !== false; 160 this.locationSettings.autocloseTooltip = this.ctx.settings.autocloseTooltip !== false;
160 - this.locationSettings.showPolygon = this.ctx.settings.showPolygon !== false; 161 + this.locationSettings.showPolygon = this.ctx.settings.showPolygon === true;
161 this.locationSettings.labelColor = this.ctx.widgetConfig.color || '#000000'; 162 this.locationSettings.labelColor = this.ctx.widgetConfig.color || '#000000';
162 this.locationSettings.label = this.ctx.settings.label || "${entityName}"; 163 this.locationSettings.label = this.ctx.settings.label || "${entityName}";
163 this.locationSettings.color = this.ctx.settings.color ? tinycolor(this.ctx.settings.color).toHexString() : "#FE7569"; 164 this.locationSettings.color = this.ctx.settings.color ? tinycolor(this.ctx.settings.color).toHexString() : "#FE7569";
@@ -978,6 +979,11 @@ const commonMapSettingsSchema = @@ -978,6 +979,11 @@ const commonMapSettingsSchema =
978 "type": "boolean", 979 "type": "boolean",
979 "default": true 980 "default": true
980 }, 981 },
  982 + "showTooltipAction": {
  983 + "title": "Action for displaying the tooltip",
  984 + "type": "string",
  985 + "default": "click"
  986 + },
981 "autocloseTooltip": { 987 "autocloseTooltip": {
982 "title": "Auto-close tooltips", 988 "title": "Auto-close tooltips",
983 "type": "boolean", 989 "type": "boolean",
@@ -1095,6 +1101,21 @@ const commonMapSettingsSchema = @@ -1095,6 +1101,21 @@ const commonMapSettingsSchema =
1095 "type": "javascript" 1101 "type": "javascript"
1096 }, 1102 },
1097 "showTooltip", 1103 "showTooltip",
  1104 + {
  1105 + "key": "showTooltipAction",
  1106 + "type": "rc-select",
  1107 + "multiple": false,
  1108 + "items": [
  1109 + {
  1110 + "value": "click",
  1111 + "label": "Show tooltip on click (Default)"
  1112 + },
  1113 + {
  1114 + "value": "hover",
  1115 + "label": "Show tooltip on hover"
  1116 + }
  1117 + ]
  1118 + },
1098 "autocloseTooltip", 1119 "autocloseTooltip",
1099 { 1120 {
1100 "key": "tooltipPattern", 1121 "key": "tooltipPattern",
@@ -1235,6 +1256,11 @@ const imageMapSettingsSchema = @@ -1235,6 +1256,11 @@ const imageMapSettingsSchema =
1235 "type": "boolean", 1256 "type": "boolean",
1236 "default": true 1257 "default": true
1237 }, 1258 },
  1259 + "showTooltipAction": {
  1260 + "title": "Action for displaying the tooltip",
  1261 + "type": "string",
  1262 + "default": "click"
  1263 + },
1238 "autocloseTooltip": { 1264 "autocloseTooltip": {
1239 "title": "Auto-close tooltips", 1265 "title": "Auto-close tooltips",
1240 "type": "boolean", 1266 "type": "boolean",
@@ -1329,6 +1355,21 @@ const imageMapSettingsSchema = @@ -1329,6 +1355,21 @@ const imageMapSettingsSchema =
1329 "type": "javascript" 1355 "type": "javascript"
1330 }, 1356 },
1331 "showTooltip", 1357 "showTooltip",
  1358 + {
  1359 + "key": "showTooltipAction",
  1360 + "type": "rc-select",
  1361 + "multiple": false,
  1362 + "items": [
  1363 + {
  1364 + "value": "click",
  1365 + "label": "Show tooltip on click (Default)"
  1366 + },
  1367 + {
  1368 + "value": "hover",
  1369 + "label": "Show tooltip on hover"
  1370 + }
  1371 + ]
  1372 + },
1332 "autocloseTooltip", 1373 "autocloseTooltip",
1333 { 1374 {
1334 "key": "tooltipPattern", 1375 "key": "tooltipPattern",
@@ -168,6 +168,14 @@ export default class TbOpenStreetMap { @@ -168,6 +168,14 @@ export default class TbOpenStreetMap {
168 var popup = L.popup(); 168 var popup = L.popup();
169 popup.setContent(''); 169 popup.setContent('');
170 marker.bindPopup(popup, {autoClose: settings.autocloseTooltip, closeOnClick: false}); 170 marker.bindPopup(popup, {autoClose: settings.autocloseTooltip, closeOnClick: false});
  171 + if (settings.displayTooltipAction == 'hover') {
  172 + marker.on('mouseover', function () {
  173 + this.openPopup();
  174 + });
  175 + marker.on('mouseout', function () {
  176 + this.closePopup();
  177 + });
  178 + }
171 this.tooltips.push({ 179 this.tooltips.push({
172 markerArgs: markerArgs, 180 markerArgs: markerArgs,
173 popup: popup, 181 popup: popup,
@@ -278,15 +278,25 @@ export default class TbTencentMap { @@ -278,15 +278,25 @@ export default class TbTencentMap {
278 map: this.map 278 map: this.map
279 }); 279 });
280 var map = this; 280 var map = this;
281 - qq.maps.event.addListener(marker, 'click', function () {  
282 - if (settings.autocloseTooltip) {  
283 - map.tooltips.forEach((tooltip) => {  
284 - tooltip.popup.close();  
285 - });  
286 - }  
287 - popup.open();  
288 - popup.setPosition(marker);  
289 - }); 281 + if (settings.displayTooltipAction == 'hover') {
  282 + qq.maps.event.addListener(marker, 'mouseover', function () {
  283 + popup.open();
  284 + popup.setPosition(marker);
  285 + });
  286 + qq.maps.event.addListener(marker, 'mouseout', function () {
  287 + popup.close();
  288 + });
  289 + } else {
  290 + qq.maps.event.addListener(marker, 'click', function () {
  291 + if (settings.autocloseTooltip) {
  292 + map.tooltips.forEach((tooltip) => {
  293 + tooltip.popup.close();
  294 + });
  295 + }
  296 + popup.open();
  297 + popup.setPosition(marker);
  298 + });
  299 + }
290 map.tooltips.push({ 300 map.tooltips.push({
291 markerArgs: markerArgs, 301 markerArgs: markerArgs,
292 popup: popup, 302 popup: popup,