feature: external url control with regular links (#2071)

* update: external url control * Update externalurlSeveralButtons.js
origo-map · Nov 18, 2024 · 857c527 · 857c527
1 parent 260dae2
commit 857c527
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 7 deletions.
diff --git a/src/controls/externalurl/externalurlSeveralButtons.js b/src/controls/externalurl/externalurlSeveralButtons.js
@@ -5,6 +5,7 @@ import replacer from '../../utils/replacer';
 const externalurlSeveralButtons = function externalurlSeveralButtons(options = {}) {
   const mainbuttonTooltipText = options.tooltipText || 'Visa kartan i en extern karttjänst';
   const links = options.links;
+  const hasValidMethod = links.some(link => link.method !== 'none');
   let map;
   let isMainButtonActive = false;
   let viewer;
@@ -13,19 +14,44 @@ const externalurlSeveralButtons = function externalurlSeveralButtons(options = {
   let target;
   const buttons = [];
   const subButtons = [];
+  const direction = options.direction;
+  const linkTarget = options.target || '_blank';
+  let containerElementcls;
+  let subButtoncls;
+  let subButtontooltipPlacement;
+  switch (direction) {
+    case 'horizontal':
+    {
+      containerElementcls = 'flex row';
+      subButtoncls = 'margin-left-small';
+      subButtontooltipPlacement = 'south';
+      break;
+    }
+    default:
+    {
+      containerElementcls = 'flex column';
+      subButtoncls = 'margin-top-small';
+      subButtontooltipPlacement = 'east';
+      break;
+    }
+  }
 
   function toggleMainButton() {
     if (!isMainButtonActive) {
       document.getElementById(externalUrlMainButton.getId()).classList.add('active');
-      viewer.centerMarker.show();
+      if (hasValidMethod) {
+        viewer.centerMarker.show();
+      }
       subButtons.forEach((button) => {
         document.getElementById(button.getId()).classList.remove('hidden');
       });
       document.getElementById(externalUrlMainButton.getId()).classList.remove('tooltip');
       isMainButtonActive = true;
     } else {
       document.getElementById(externalUrlMainButton.getId()).classList.remove('active');
-      viewer.centerMarker.hide();
+      if (hasValidMethod) {
+        viewer.centerMarker.hide();
+      }
       subButtons.forEach((button) => {
         document.getElementById(button.getId()).classList.add('hidden');
       });
@@ -39,11 +65,11 @@ const externalurlSeveralButtons = function externalurlSeveralButtons(options = {
     onInit() {
       containerElement = El({
         tagName: 'div',
-        cls: 'flex column'
+        cls: containerElementcls
       });
 
       externalUrlMainButton = Button({
-        cls: 'o-measure padding-small margin-bottom-smaller icon-smaller round light box-shadow',
+        cls: 'o-measure padding-small icon-smaller round light box-shadow',
         icon: '#ic_baseline_link_24px',
         tooltipText: mainbuttonTooltipText,
         tooltipPlacement: 'east',
@@ -56,10 +82,10 @@ const externalurlSeveralButtons = function externalurlSeveralButtons(options = {
         const tooltipText = link.tooltipText;
         const buttonImage = link.buttonImage || '#fa-external-link';
         const subButton = Button({
-          cls: 'o-measure-length padding-small margin-bottom-smaller icon-smaller round light box-shadow hidden',
+          cls: `o-measure-length padding-small ${subButtoncls} icon-smaller round light box-shadow hidden`,
           icon: buttonImage,
           tooltipText,
-          tooltipPlacement: 'east',
+          tooltipPlacement: subButtontooltipPlacement,
           click() {
             const mapView = map.getView();
             const center = mapView.getCenter();
@@ -72,8 +98,10 @@ const externalurlSeveralButtons = function externalurlSeveralButtons(options = {
             } else if (link.method === 'LatLon') {
               const centerLonlat = toLonLat(transformedCenter);
               replacedUrl = replacer.replace(link.url, { LON: centerLonlat[0], LAT: centerLonlat[1] });
+            } else if (link.method === 'none') {
+              replacedUrl = link.url;
             }
-            window.open(replacedUrl, '_blank');
+            window.open(replacedUrl, linkTarget);
           }
         });
         buttons.push(subButton);

diff --git a/src/controls/externalurl/externalurlSingleButton.js b/src/controls/externalurl/externalurlSingleButton.js
@@ -33,6 +33,8 @@ const ExternalurlSingleButton = function ExternalurlSingleButton(options = {}) {
     } else if (method === 'LatLon') {
       const centerLonlat = toLonLat(transformedCenter);
       replacedUrl = replacer.replace(url, { LON: centerLonlat[0], LAT: centerLonlat[1] });
+    } else if (method === 'none') {
+      replacedUrl = url;
     }
 
     window.open(replacedUrl, '_blank');