Print - Expose all settings as config options (#1172)

* Expose print control header config options

* Expose print control description config options

* Expose print control size config options

* Re-use titleCase from utils

* Expose print control orientation config option

* Expose print control resolution config options

* Expose print control initial scale config option

* Expose print control checkbox config options

* Expose print control rotation config options

* Fixed linter errors

* Fixed resolutions' value types

src/controls/print/custom-size-control.js

@@ -1,6 +1,13 @@
 import { Component, InputRange } from '../../ui';
 
 export default function CustomSizeControl(options = {}) {
+  const {
+    minHeight,
+    maxHeight,
+    minWidth,
+    maxWidth
+  } = options;
+
   let {
     height,
     width,
@@ -16,17 +23,17 @@ export default function CustomSizeControl(options = {}) {
       rangeHeightComponent = InputRange({
         cls: '',
         initialValue: height,
-        maxValue: 420,
-        minValue: 50,
+        maxValue: maxHeight,
+        minValue: minHeight,
         style: { width: '100%' },
         unit: 'mm',
         label: 'Höjd'
       });
       rangeWidthComponent = InputRange({
         cls: '',
         initialValue: width,
-        maxValue: 420,
-        minValue: 50,
+        maxValue: maxWidth,
+        minValue: minWidth,
         style: { width: '100%' },
         unit: 'mm',
         label: 'Bredd'

src/controls/print/description-control.js

@@ -2,19 +2,21 @@ import { Textarea, cuid, Component, Button, Dropdown, ToggleGroup } from '../../
 
 export default function DescriptionControl(options = {}) {
   const {
-    text = '',
-    alignment = 'center',
-    classes = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6']
+    description,
+    descriptionPlaceholderText,
+    descriptionAlignment,
+    descriptionSizes
   } = options;
+
   let {
-    size = 'h4'
+    descriptionSize,
+    descriptionFormatIsVisible
   } = options;
+
   const cls = 'placeholder-text-smaller smaller';
-  const placeholderText = 'Här kan du skriva en beskrivning';
   const style = { margin: 0 };
   const align = ['text-align-left', 'text-align-center', 'text-align-right'];
   const formatId = cuid();
-  let isVisible = false;
   let formatEl;
   let textareaDescription;
   let formatButton;
@@ -29,10 +31,10 @@ export default function DescriptionControl(options = {}) {
     onInit() {
       textareaDescription = Textarea({
         cls,
-        placeholderText,
+        placeholderText: descriptionPlaceholderText,
         style,
         cols: 32,
-        value: text
+        value: description
       });
       formatButton = Button({
         cls: 'grow light text-smaller',
@@ -43,19 +45,19 @@ export default function DescriptionControl(options = {}) {
       alignLeftComponent = Button({
         cls: 'grow light text-smaller',
         text: 'Vänster',
-        state: alignment === 'left' ? 'active' : 'initial',
+        state: descriptionAlignment === 'left' ? 'active' : 'initial',
         style: { width: '34%' }
       });
       alignCenterComponent = Button({
         cls: 'grow light text-smaller',
         text: 'Mitten',
-        state: alignment === 'center' ? 'active' : 'initial',
+        state: descriptionAlignment === 'center' ? 'active' : 'initial',
         style: { width: '34%' }
       });
       alignRightComponent = Button({
         cls: 'grow light text-smaller',
         text: 'Höger',
-        state: alignment === 'right' ? 'active' : 'initial',
+        state: descriptionAlignment === 'right' ? 'active' : 'initial',
         style: { width: '33%' }
       });
       alignButtons = [alignLeftComponent, alignCenterComponent, alignRightComponent];
@@ -88,25 +90,25 @@ export default function DescriptionControl(options = {}) {
     onChangeSize(evt) {
       this.dispatch('change:descriptionSize', { class: evt });
       selectSize.setButtonText(evt);
-      size = evt;
+      descriptionSize = evt;
     },
     onRender() {
       formatEl = document.getElementById(formatId);
       this.dispatch('render');
-      selectSize.setButtonText(size);
-      selectSize.setItems(classes);
-      this.onChangeSize(size);
+      selectSize.setButtonText(descriptionSize);
+      selectSize.setItems(descriptionSizes);
+      this.onChangeSize(descriptionSize);
       document.getElementById(selectSize.getId()).addEventListener('dropdown:select', (evt) => {
         this.onChangeSize(evt.target.textContent);
       });
     },
     onChangeVisible() {
-      if (isVisible) {
+      if (descriptionFormatIsVisible) {
         formatEl.classList.add('hidden');
       } else {
         formatEl.classList.remove('hidden');
       }
-      isVisible = !isVisible;
+      descriptionFormatIsVisible = !descriptionFormatIsVisible;
     },
     onChangeDescription(evt) {
       this.dispatch('change:description', evt);
@@ -123,7 +125,7 @@ export default function DescriptionControl(options = {}) {
           ${formatButton.render()}
         </div>
       </div>
-      <div class="hidden" id="${formatId}">
+      <div class="${descriptionFormatIsVisible ? '' : 'hidden'}" id="${formatId}">
       <div class="padding-smaller">
         <h6>Justering beskrivning</h6>
         ${alignControl.render()}

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({

src/controls/print/print-component.js

@@ -19,47 +19,56 @@ 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;
   let pageContainerElement;
   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();