Update link.js

origo-map · Nov 6, 2024 · 06152ff · 06152ff
1 parent 3cd0b8f
commit 06152ff
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 22 deletions.
diff --git a/index.json b/index.json
@@ -40,7 +40,7 @@
       "name": "legend",
       "options": {
         "labelOpacitySlider": "Opacity",
-        "useGroupIndication" : true
+        "useGroupIndication": true
       }
     },
     {
@@ -258,4 +258,4 @@
       ]
     ]
   }
-}
+}
diff --git a/src/controls/link.js b/src/controls/link.js
@@ -1,33 +1,67 @@
-import { Component } from '../ui';
+import { Component, Element as El, Button, dom } from '../ui';
 
 const Link = function Link(options = {}) {
   const {
     icon = '#ic_launch_24px',
+    placement = ['menu'],
+    target = '_blank',
     url,
     title
   } = options;
   let mapMenu;
   let menuItem;
   let viewer;
+  let mapTools;
+  let screenButtonContainer;
+  let screenButton;
 
   return Component({
     name: 'link',
     onAdd(evt) {
       viewer = evt.target;
-      mapMenu = viewer.getControlByName('mapmenu');
-      menuItem = mapMenu.MenuItem({
-        click() {
-          mapMenu.close();
-          window.open(url);
-        },
-        icon,
-        title
-      });
-      this.addComponent(menuItem);
+      if (placement.indexOf('screen') > -1) {
+        mapTools = `${viewer.getMain().getMapTools().getId()}`;
+        screenButtonContainer = El({
+          tagName: 'div',
+          cls: 'flex column'
+        });
+        screenButton = Button({
+          cls: 'o-link padding-small icon-smaller round light box-shadow',
+          click() {
+            window.open(url, target);
+          },
+          icon,
+          tooltipText: title,
+          tooltipPlacement: 'east'
+        });
+        this.addComponent(screenButton);
+      }
+      if (placement.indexOf('menu') > -1) {
+        mapMenu = viewer.getControlByName('mapmenu');
+        menuItem = mapMenu.MenuItem({
+          click() {
+            mapMenu.close();
+            window.open(url, target);
+          },
+          icon,
+          title
+        });
+        this.addComponent(menuItem);
+      }
       this.render();
     },
     render() {
-      mapMenu.appendMenuItem(menuItem);
+      if (placement.indexOf('screen') > -1) {
+        let htmlString = `${screenButtonContainer.render()}`;
+        let el = dom.html(htmlString);
+        document.getElementById(mapTools).appendChild(el);
+        htmlString = screenButton.render();
+        el = dom.html(htmlString);
+        document.getElementById(screenButtonContainer.getId()).appendChild(el);
+      }
+      if (placement.indexOf('menu') > -1) {
+        mapMenu.appendMenuItem(menuItem);
+      }
       this.dispatch('render');
     }
   });

diff --git a/src/controls/measure.js b/src/controls/measure.js
@@ -750,7 +750,7 @@ const Measure = function Measure({
         });
 
         measureButton = 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',
           click() {
             toggleMeasure();
           },
@@ -762,7 +762,7 @@ const Measure = function Measure({
 
         if (lengthTool) {
           lengthToolButton = Button({
-            cls: 'o-measure-length padding-small margin-bottom-smaller icon-smaller round light box-shadow hidden',
+            cls: 'o-measure-length padding-small margin-top-small icon-smaller round light box-shadow hidden',
             click() {
               type = 'LineString';
               toggleType(this);
@@ -778,7 +778,7 @@ const Measure = function Measure({
 
         if (areaTool) {
           areaToolButton = Button({
-            cls: 'o-measure-area padding-small margin-bottom-smaller icon-smaller round light box-shadow hidden',
+            cls: 'o-measure-area padding-small margin-top-small icon-smaller round light box-shadow hidden',
             click() {
               type = 'Polygon';
               toggleType(this);
@@ -793,7 +793,7 @@ const Measure = function Measure({
 
         if (elevationTool) {
           elevationToolButton = Button({
-            cls: 'o-measure-elevation padding-small margin-bottom-smaller icon-smaller round light box-shadow hidden',
+            cls: 'o-measure-elevation padding-small margin-top-small icon-smaller round light box-shadow hidden',
             click() {
               type = 'Point';
               toggleType(this);
@@ -808,7 +808,7 @@ const Measure = function Measure({
 
         if (bufferTool) {
           bufferToolButton = Button({
-            cls: 'o-measure-buffer padding-small margin-bottom-smaller icon-smaller round light box-shadow hidden',
+            cls: 'o-measure-buffer padding-small margin-top-small icon-smaller round light box-shadow hidden',
             click() {
               type = 'Point';
               toggleType(this);
@@ -836,7 +836,7 @@ const Measure = function Measure({
 
         if (lengthTool || areaTool) {
           undoButton = Button({
-            cls: 'o-measure-undo padding-small margin-bottom-smaller icon-smaller round light box-shadow hidden',
+            cls: 'o-measure-undo padding-small margin-top-small icon-smaller round light box-shadow hidden',
             click() {
               undoLastPoint();
             },
@@ -846,7 +846,7 @@ const Measure = function Measure({
           });
           buttons.push(undoButton);
           clearButton = Button({
-            cls: 'o-measure-clear padding-small margin-bottom-smaller icon-smaller round light box-shadow hidden',
+            cls: 'o-measure-clear padding-small margin-top-small icon-smaller round light box-shadow hidden',
             click() {
               measure.abortDrawing();
               vector.getSource().clear();
@@ -861,7 +861,7 @@ const Measure = function Measure({
 
         if (snap) {
           toggleSnapButton = Button({
-            cls: `o-measure-snap padding-small margin-bottom-smaller icon-smaller round light box-shadow hidden activ ${
+            cls: `o-measure-snap padding-small margin-top-small icon-smaller round light box-shadow hidden activ ${
               snapActive && 'active'
             }`,
             click() {