diff --git a/index.json b/index.json index d4b6c9283..7c2138b9c 100644 --- a/index.json +++ b/index.json @@ -40,7 +40,7 @@ "name": "legend", "options": { "labelOpacitySlider": "Opacity", - "useGroupIndication" : true + "useGroupIndication": true } }, { @@ -258,4 +258,4 @@ ] ] } -} +} \ No newline at end of file diff --git a/src/controls/about.js b/src/controls/about.js index 12c8f6784..47c35302e 100644 --- a/src/controls/about.js +++ b/src/controls/about.js @@ -1,4 +1,4 @@ -import { Component, Modal } from '../ui'; +import { Component, Modal, Element as El, Button, dom } from '../ui'; const About = function About(options = {}) { let { @@ -8,40 +8,95 @@ const About = function About(options = {}) { const { content = '
', icon = '#ic_help_outline_24px', - title = 'Om kartan' + placement = ['menu'], + title = 'Om kartan', + style } = options; let viewer; let mapMenu; let menuItem; let modal; + let mapTools; + let screenButtonContainer; + let screenButton; + let modalStyle = ''; + switch (style) { + case 'modal-full': + { + modalStyle = 'max-width:unset;width:98%;max-height:calc(100% - 5rem);height:98%;resize:both;overflow:auto;display:flex;flex-flow:column;'; + break; + } + default: + { + modalStyle = 'resize:both;overflow:auto;display:flex;flex-flow:column;'; + break; + } + } return Component({ name: 'about', onAdd(evt) { if (!buttonText) buttonText = title; viewer = evt.target; - target = viewer.getId(); - mapMenu = viewer.getControlByName('mapmenu'); - menuItem = mapMenu.MenuItem({ - click() { - modal = Modal({ - title, - content, - target - }); - this.addComponent(modal); - mapMenu.close(); - }, - icon, - title: buttonText, - ariaLabel: title - }); - this.addComponent(menuItem); + if (placement.indexOf('screen') > -1) { + target = viewer.getId(); + mapTools = `${viewer.getMain().getMapTools().getId()}`; + screenButtonContainer = El({ + tagName: 'div', + cls: 'flex column' + }); + screenButton = Button({ + cls: 'o-about padding-small icon-smaller round light box-shadow', + click() { + modal = Modal({ + title, + content, + target, + style: modalStyle + }); + this.addComponent(modal); + }, + icon, + tooltipText: title, + tooltipPlacement: 'east' + }); + this.addComponent(screenButton); + } + if (placement.indexOf('menu') > -1) { + target = viewer.getId(); + mapMenu = viewer.getControlByName('mapmenu'); + menuItem = mapMenu.MenuItem({ + click() { + modal = Modal({ + title, + content, + target, + style: modalStyle + }); + this.addComponent(modal); + mapMenu.close(); + }, + icon, + title: buttonText, + ariaLabel: 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'); } });