Justering beskrivning
${alignControl.render()}
diff --git a/src/controls/print/index.js b/src/controls/print/index.js
index d820609e7..1a86836b6 100644
--- a/src/controls/print/index.js
+++ b/src/controls/print/index.js
@@ -7,13 +7,44 @@ const Print = function Print(options = {}) {
logo = {},
northArrow = {},
title = 'Skriv ut',
- leftFooterText = '',
+ headerText = '',
+ headerPlaceholderText = 'Här kan du skriva en rubrik',
+ headerAlignment = 'center',
+ headerSizes = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
+ headerSize = 'h4',
+ headerFormatIsVisible = false,
+ descriptionText = '',
+ descriptionPlaceholderText = 'Här kan du skriva en beskrivning',
+ descriptionAlignment = 'center',
+ descriptionSizes = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
+ descriptionSize = 'h4',
+ descriptionFormatIsVisible = false,
+ sizes = {
+ a3: [420, 297],
+ a4: [297, 210],
+ custom: [297, 210]
+ },
+ sizeInitial = 'a4',
+ sizeCustomMinHeight = 50,
+ sizeCustomMaxHeight = 420,
+ sizeCustomMinWidth = 50,
+ sizeCustomMaxWidth = 420,
+ orientation = 'portrait',
+ resolutions = [
+ { label: 'Låg', value: 75 },
+ { label: 'Mellan', value: 150 },
+ { label: 'Hög', value: 300 }
+ ],
+ resolution = 150,
+ scales = [],
+ scaleInitial,
+ showMargins = true,
showCreated = false,
createdPrefix = '',
- scales = [],
showScale = true,
- classes,
- defaultClass,
+ rotation = 0,
+ rotationStep = 1,
+ leftFooterText = '',
filename
} = options;
let {
@@ -36,18 +67,41 @@ const Print = function Print(options = {}) {
const printComponent = PrintComponent({
logo,
northArrow,
- target: viewer.getId(),
+ filename,
map: viewer.getMap(),
+ target: viewer.getId(),
viewer,
- leftFooterText,
+ title: headerText,
+ titlePlaceholderText: headerPlaceholderText,
+ titleAlignment: headerAlignment,
+ titleSizes: headerSizes,
+ titleSize: headerSize,
+ titleFormatIsVisible: headerFormatIsVisible,
+ description: descriptionText,
+ descriptionPlaceholderText,
+ descriptionAlignment,
+ descriptionSizes,
+ descriptionSize,
+ descriptionFormatIsVisible,
+ sizes,
+ size: sizeInitial,
+ sizeCustomMinHeight,
+ sizeCustomMaxHeight,
+ sizeCustomMinWidth,
+ sizeCustomMaxWidth,
+ orientation,
+ resolutions,
+ resolution,
+ scales,
+ scaleInitial,
+ showMargins,
showCreated,
createdPrefix,
- showNorthArrow,
- scales,
showScale,
- classes,
- defaultClass,
- filename
+ showNorthArrow,
+ rotation,
+ rotationStep,
+ leftFooterText
});
mapMenu = viewer.getControlByName('mapmenu');
menuItem = mapMenu.MenuItem({
diff --git a/src/controls/print/print-component.js b/src/controls/print/print-component.js
index 6fd999ae4..b8ecc9b2e 100644
--- a/src/controls/print/print-component.js
+++ b/src/controls/print/print-component.js
@@ -19,20 +19,40 @@ const PrintComponent = function PrintComponent(options = {}) {
map,
target,
viewer,
- leftFooterText,
- createdPrefix,
+ titlePlaceholderText,
+ titleAlignment,
+ titleSizes,
+ titleFormatIsVisible,
+ descriptionPlaceholderText,
+ descriptionAlignment,
+ descriptionSizes,
+ descriptionFormatIsVisible,
+ sizes,
+ sizeCustomMinHeight,
+ sizeCustomMaxHeight,
+ sizeCustomMinWidth,
+ sizeCustomMaxWidth,
+ resolutions,
scales,
- classes,
- defaultClass
+ scaleInitial,
+ createdPrefix,
+ rotation,
+ rotationStep,
+ leftFooterText
} = options;
let {
- size = 'a4',
- orientation = 'portrait',
+ title,
+ titleSize,
+ description,
+ descriptionSize,
+ size,
+ orientation,
+ resolution,
+ showMargins,
showCreated,
- showNorthArrow,
- resolution = 150,
- showScale
+ showScale,
+ showNorthArrow
} = options;
let pageElement;
@@ -40,26 +60,15 @@ const PrintComponent = function PrintComponent(options = {}) {
let targetElement;
const pageContainerId = cuid();
const pageId = cuid();
- let title = '';
- let titleSize = 'h4';
- let titleAlign = 'text-align-center';
- let description = '';
- let descriptionSize = 'h4';
- let descriptionAlign = 'text-align-center';
+ let titleAlign = `text-align-${titleAlignment}`;
+ let descriptionAlign = `text-align-${descriptionAlignment}`;
let viewerMapTarget;
const printMarginClass = 'print-margin';
- let usePrintMargins = true;
let today = new Date(Date.now());
let printScale = 0;
let widthImage = 0;
let heightImage = 0;
- const sizes = {
- a3: [420, 297],
- a4: [297, 210],
- custom: [297, 210]
- };
-
const setCustomSize = function setCustomSize(sizeObj) {
if ('width' in sizeObj) {
sizes.custom[1] = Number(sizeObj.width);
@@ -117,18 +126,36 @@ const PrintComponent = function PrintComponent(options = {}) {
};
const printSettings = PrintSettings({
- orientation,
- customSize: sizes.custom,
- initialSize: size,
- sizes: Object.keys(sizes),
map,
- showCreated,
- showNorthArrow,
- scales,
+ title,
+ titlePlaceholderText,
+ titleAlignment,
+ titleSizes,
+ titleSize,
+ titleFormatIsVisible,
+ description,
+ descriptionPlaceholderText,
+ descriptionAlignment,
+ descriptionSizes,
+ descriptionSize,
+ descriptionFormatIsVisible,
+ sizes,
+ size,
+ sizeCustomMinHeight,
+ sizeCustomMaxHeight,
+ sizeCustomMinWidth,
+ sizeCustomMaxWidth,
+ orientation,
+ resolutions,
resolution,
+ scales,
+ scaleInitial,
+ showMargins,
+ showCreated,
showScale,
- classes,
- defaultClass
+ showNorthArrow,
+ rotation,
+ rotationStep
});
const printToolbar = PrintToolbar();
const closeButton = Button({
@@ -224,11 +251,11 @@ const PrintComponent = function PrintComponent(options = {}) {
setScale(evt.scale);
},
printMargin() {
- return usePrintMargins ? 'print-margin' : '';
+ return showMargins ? 'print-margin' : '';
},
toggleMargin() {
pageElement.classList.toggle(printMarginClass);
- usePrintMargins = !usePrintMargins;
+ showMargins = !showMargins;
this.updatePageSize();
},
toggleCreated() {
@@ -246,6 +273,9 @@ const PrintComponent = function PrintComponent(options = {}) {
},
close() {
printMapComponent.removePrintControls();
+ if (map.getView().getRotation() !== 0) {
+ map.getView().setRotation(0);
+ }
const printElement = document.getElementById(this.getId());
map.setTarget(viewerMapTarget);
this.restoreViewerControls();
diff --git a/src/controls/print/print-settings.js b/src/controls/print/print-settings.js
index 46cd7c075..595fe2b36 100644
--- a/src/controls/print/print-settings.js
+++ b/src/controls/print/print-settings.js
@@ -15,22 +15,42 @@ import SetScaleControl from './set-scale-control';
import ResolutionControl from './resolution-control';
import ShowScaleControl from './show-scale-control';
-const PrintSettings = function PrintSettings({
- closeIcon = '#ic_close_24px',
- initialSize,
- openIcon = '#ic_tune_24px',
- orientation = 'portrait',
- customSize,
- sizes,
- map,
- showCreated,
- showNorthArrow,
- scales,
- resolution = 150,
- showScale,
- classes,
- defaultClass
-} = {}) {
+const PrintSettings = function PrintSettings(options = {}) {
+ const {
+ closeIcon = '#ic_close_24px',
+ openIcon = '#ic_tune_24px',
+ map,
+ title,
+ titlePlaceholderText,
+ titleAlignment,
+ titleSizes,
+ titleSize,
+ titleFormatIsVisible,
+ description,
+ descriptionPlaceholderText,
+ descriptionAlignment,
+ descriptionSizes,
+ descriptionSize,
+ descriptionFormatIsVisible,
+ sizes,
+ size,
+ sizeCustomMinHeight,
+ sizeCustomMaxHeight,
+ sizeCustomMinWidth,
+ sizeCustomMaxWidth,
+ orientation,
+ resolutions,
+ resolution,
+ scales,
+ scaleInitial,
+ showMargins,
+ showCreated,
+ showScale,
+ showNorthArrow,
+ rotation,
+ rotationStep
+ } = options;
+
let headerComponent;
let contentComponent;
let openButton;
@@ -95,21 +115,48 @@ const PrintSettings = function PrintSettings({
});
const orientationControl = OrientationControl({ orientation });
- const sizeControl = SizeControl({ initialSize, sizes });
- const titleControl = TitleControl({ classes, size: defaultClass });
- const descriptionControl = DescriptionControl({ classes, size: defaultClass });
- const marginControl = MarginControl({ checked: true });
+ const sizeControl = SizeControl({
+ initialSize: size,
+ sizes: Object.keys(sizes)
+ });
+ const titleControl = TitleControl({
+ title,
+ titlePlaceholderText,
+ titleAlignment,
+ titleSizes,
+ titleSize,
+ titleFormatIsVisible
+ });
+ const descriptionControl = DescriptionControl({
+ description,
+ descriptionPlaceholderText,
+ descriptionAlignment,
+ descriptionSizes,
+ descriptionSize,
+ descriptionFormatIsVisible
+ });
+ const marginControl = MarginControl({ checked: showMargins });
const createdControl = CreatedControl({ checked: showCreated });
- const resolutionControl = ResolutionControl({ resolution });
+ const resolutionControl = ResolutionControl({
+ initialResolution: resolution,
+ resolutions
+ });
const showScaleControl = ShowScaleControl({ checked: showScale });
northArrowControl = NorthArrowControl({ showNorthArrow });
- rotationControl = map.getView().getConstraints().rotation(180) === 180 ? RotationControl({ rotation: 0, map }) : undefined;
+ rotationControl = map.getView().getConstraints().rotation(180) === 180 ? RotationControl({ rotation, rotationStep, map }) : undefined;
customSizeControl = CustomSizeControl({
- state: initialSize === 'custom' ? 'active' : 'inital',
- height: customSize[0],
- width: customSize[1]
+ minHeight: sizeCustomMinHeight,
+ maxHeight: sizeCustomMaxHeight,
+ minWidth: sizeCustomMinWidth,
+ maxWidth: sizeCustomMaxWidth,
+ height: sizes.custom ? sizes.custom[0] : sizeCustomMinHeight,
+ width: sizes.custom ? sizes.custom[1] : sizeCustomMinWidth,
+ state: size === 'custom' ? 'active' : 'initial'
});
- setScaleControl = SetScaleControl({ scales }, map);
+ setScaleControl = SetScaleControl({
+ scales,
+ initialScale: scaleInitial
+ }, map);
contentComponent = Component({
onRender() { this.dispatch('render'); },
diff --git a/src/controls/print/print-settings.template.js b/src/controls/print/print-settings.template.js
index 85adfab92..f487c6fe3 100644
--- a/src/controls/print/print-settings.template.js
+++ b/src/controls/print/print-settings.template.js
@@ -48,7 +48,7 @@ export default function printTemplate({
-
Visa Norrpil
+
Visa norrpil
${northArrowControl.render()}
${rotationControl ? rotationControl.render() : ''}
diff --git a/src/controls/print/resolution-control.js b/src/controls/print/resolution-control.js
index 6e9763866..f53593193 100644
--- a/src/controls/print/resolution-control.js
+++ b/src/controls/print/resolution-control.js
@@ -1,29 +1,32 @@
import { Button, ToggleGroup } from '../../ui';
+import round2 from '../../utils/round';
-export default function ResolutionControl({ resolution }) {
- const lowButton = Button({
- cls: 'grow light text-smaller padding-left-large',
- text: 'Låg (75)',
- state: resolution === 75 ? 'active' : 'initial'
- });
- const middleButton = Button({
- cls: 'grow light text-smaller padding-right-large',
- text: 'Mellan (150)',
- state: resolution === 150 ? 'active' : 'initial'
- });
- const highButton = Button({
- cls: 'grow light text-smaller padding-right-large',
- text: 'Hög (300)',
- state: resolution === 300 ? 'active' : 'initial'
+export default function ResolutionControl({ initialResolution, resolutions }) {
+ const resolutionButtons = resolutions.map((resolution, index) => {
+ if (index + 1 === resolutions.length) {
+ return Button({
+ cls: 'grow light text-smaller',
+ text: `${resolution.label} (${resolution.value})`,
+ state: initialResolution === resolution.value ? 'active' : 'initial',
+ style: { width: `${String(round2(100 - round2(100 / resolutions.length, 1) * (resolutions.length - 1), 1))}%` }
+ });
+ }
+ return Button({
+ cls: 'grow light text-smaller',
+ text: `${resolution.label} (${resolution.value})`,
+ state: initialResolution === resolution.value ? 'active' : 'initial',
+ style: { width: `${String(round2(100 / resolutions.length, 1))}%` }
+ });
});
+
const resolutionControl = ToggleGroup({
cls: 'flex rounded bg-inverted border',
- components: [lowButton, middleButton, highButton],
- style: { height: '2rem', display: 'flex' }
+ components: resolutionButtons,
+ style: { height: 'fit-content', display: 'flex' }
+ });
+ resolutionButtons.forEach((resolutionButton, index) => {
+ resolutionButton.on('click', () => resolutionControl.dispatch('change:resolution', { resolution: resolutions[index].value }));
});
- lowButton.on('click', () => resolutionControl.dispatch('change:resolution', { resolution: 75 }));
- middleButton.on('click', () => resolutionControl.dispatch('change:resolution', { resolution: 150 }));
- highButton.on('click', () => resolutionControl.dispatch('change:resolution', { resolution: 300 }));
return resolutionControl;
}
diff --git a/src/controls/print/rotation-control.js b/src/controls/print/rotation-control.js
index afb33e9cb..012b7a011 100644
--- a/src/controls/print/rotation-control.js
+++ b/src/controls/print/rotation-control.js
@@ -2,7 +2,8 @@ import { InputRange, Component } from '../../ui';
export default function RotationControl(options = {}) {
const {
- rotation = 0,
+ rotation,
+ rotationStep,
map
} = options;
@@ -11,7 +12,7 @@ export default function RotationControl(options = {}) {
minValue: 0,
maxValue: 360,
initialValue: rotation,
- step: 1,
+ step: rotationStep,
style: {
'align-self': 'center'
},
@@ -27,6 +28,9 @@ export default function RotationControl(options = {}) {
},
onRender() {
this.dispatch('render');
+ if (rotation) {
+ map.getView().setRotation((rotation * Math.PI) / 180);
+ }
},
onChangeRotation(evt) {
map.getView().setRotation((evt.value * Math.PI) / 180);
diff --git a/src/controls/print/set-scale-control.js b/src/controls/print/set-scale-control.js
index 3b71dc19e..8c2df627f 100644
--- a/src/controls/print/set-scale-control.js
+++ b/src/controls/print/set-scale-control.js
@@ -4,7 +4,8 @@ import numberFormatter from '../../utils/numberformatter';
export default function SetScaleControl(options = {}, map) {
const {
- scales = []
+ scales = [],
+ initialScale
} = options;
let projection;
@@ -14,9 +15,9 @@ export default function SetScaleControl(options = {}, map) {
const roundScale = (scale) => {
let scaleValue = scale;
- const differens = scaleValue % 10;
- if (differens !== 0) {
- scaleValue += (10 - differens);
+ const difference = scaleValue % 10;
+ if (difference !== 0) {
+ scaleValue += (10 - difference);
}
return scaleValue;
};
@@ -32,7 +33,8 @@ export default function SetScaleControl(options = {}, map) {
cls: 'o-scalepicker text-black flex',
contentCls: 'bg-grey-lighter text-smallest rounded',
buttonCls: 'bg-white border text-black',
- buttonIconCls: 'black'
+ buttonIconCls: 'black',
+ text: 'Välj skala'
});
this.addComponents([selectScale]);
projection = map.getView().getProjection();
@@ -45,7 +47,6 @@ export default function SetScaleControl(options = {}, map) {
},
onRender() {
this.dispatch('render');
- selectScale.setButtonText('Välj skala');
if (Array.isArray(scales) && scales.length) {
selectScale.setItems(scales);
} else {
@@ -54,6 +55,9 @@ export default function SetScaleControl(options = {}, map) {
document.getElementById(selectScale.getId()).addEventListener('dropdown:select', (evt) => {
this.onChangeScale(evt.target.textContent);
});
+ if (initialScale) {
+ this.onChangeScale(initialScale);
+ }
},
render() {
return `
diff --git a/src/controls/print/size-control.js b/src/controls/print/size-control.js
index d5644f35e..51d9c338b 100644
--- a/src/controls/print/size-control.js
+++ b/src/controls/print/size-control.js
@@ -1,8 +1,6 @@
import { Button, ToggleGroup } from '../../ui';
-
-const titleCase = function titleCase(str) {
- return str.charAt(0).toUpperCase() + str.slice(1);
-};
+import round2 from '../../utils/round';
+import titleCase from '../../utils/titlecase';
export default function SizeControl({ initialSize, sizes }) {
const sizeButtons = sizes.map((size) => {
@@ -10,15 +8,15 @@ export default function SizeControl({ initialSize, sizes }) {
return Button({
cls: 'grow light text-smaller',
text: 'Anpassa',
- state: 'initial',
- style: { width: '34%' }
+ state: initialSize === size ? 'active' : 'initial',
+ style: { width: `${String(round2(100 - round2(100 / sizes.length, 1) * (sizes.length - 1), 1))}%` }
});
}
return Button({
cls: 'grow light text-smaller',
text: titleCase(size),
state: initialSize === size ? 'active' : 'initial',
- style: { width: '33%' }
+ style: { width: `${String(round2(100 / sizes.length, 1))}%` }
});
});
diff --git a/src/controls/print/title-control.js b/src/controls/print/title-control.js
index f8aeac132..14f3f4d84 100644
--- a/src/controls/print/title-control.js
+++ b/src/controls/print/title-control.js
@@ -2,19 +2,21 @@ import { Input, cuid, Component, Button, Dropdown, ToggleGroup } from '../../ui'
export default function TitleControl(options = {}) {
const {
- title = '',
- alignment = 'center',
- classes = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6']
+ title,
+ titlePlaceholderText,
+ titleAlignment,
+ titleSizes
} = options;
+
let {
- size = 'h4'
+ titleSize,
+ titleFormatIsVisible
} = options;
+
const cls = 'placeholder-text-smaller smaller';
- const placeholderText = 'Här kan du skriva en rubrik';
const style = { height: '2rem', margin: 0, width: '16rem' };
const align = ['text-align-left', 'text-align-center', 'text-align-right'];
const formatId = cuid();
- let isVisible = false;
let formatEl;
let inputTitle;
let formatButton;
@@ -30,7 +32,7 @@ export default function TitleControl(options = {}) {
inputTitle = Input({
cls,
style,
- placeholderText,
+ placeholderText: titlePlaceholderText,
value: title
});
formatButton = Button({
@@ -42,19 +44,19 @@ export default function TitleControl(options = {}) {
alignLeftComponent = Button({
cls: 'grow light text-smaller',
text: 'Vänster',
- state: alignment === 'left' ? 'active' : 'initial',
+ state: titleAlignment === 'left' ? 'active' : 'initial',
style: { width: '34%' }
});
alignCenterComponent = Button({
cls: 'grow light text-smaller',
text: 'Mitten',
- state: alignment === 'center' ? 'active' : 'initial',
+ state: titleAlignment === 'center' ? 'active' : 'initial',
style: { width: '34%' }
});
alignRightComponent = Button({
cls: 'grow light text-smaller',
text: 'Höger',
- state: alignment === 'right' ? 'active' : 'initial',
+ state: titleAlignment === 'right' ? 'active' : 'initial',
style: { width: '33%' }
});
alignButtons = [alignLeftComponent, alignCenterComponent, alignRightComponent];
@@ -87,25 +89,25 @@ export default function TitleControl(options = {}) {
onChangeSize(evt) {
this.dispatch('change:titleSize', { class: evt });
selectSize.setButtonText(evt);
- size = evt;
+ titleSize = evt;
},
onRender() {
formatEl = document.getElementById(formatId);
this.dispatch('render');
- selectSize.setButtonText(size);
- selectSize.setItems(classes);
- this.onChangeSize(size);
+ selectSize.setButtonText(titleSize);
+ selectSize.setItems(titleSizes);
+ this.onChangeSize(titleSize);
document.getElementById(selectSize.getId()).addEventListener('dropdown:select', (evt) => {
this.onChangeSize(evt.target.textContent);
});
},
onChangeVisible() {
- if (isVisible) {
+ if (titleFormatIsVisible) {
formatEl.classList.add('hidden');
} else {
formatEl.classList.remove('hidden');
}
- isVisible = !isVisible;
+ titleFormatIsVisible = !titleFormatIsVisible;
},
onChangeTitle(evt) {
this.dispatch('change:title', evt);
@@ -122,7 +124,7 @@ export default function TitleControl(options = {}) {
${formatButton.render()}