Print Dialog inside body and not shadow root

[1Map]

I have a ol.map that lives in the shadow root. Problem with the Print Dialog is that it is created in the body of the html and not the same root as where the ol.map element lives. How can this be done?

[Viglino]

Maybe you can move it afterwards...

map.getTargetElement().appendChild(printControl._printDialog.element)

[1Map]

Thanks, I think it is more a question for vue3-openlayers Not sure if they create the control or ol-ext?

Link to OlPrintDialogControl.vue

    <ol-map>
      <ol-view
          :center="mapSettings?.mapPosition?.olCenter"
          :rotation="mapSettings?.mapPosition?.rotation"
          :zoom="mapSettings?.mapPosition?.zoom"
          :projection="mapSettings?.projection"
      />

      <ol-control-bar>
        <ol-control-printdialog />
      </ol-control-bar>

      <ol-layerswitcher-control />

      <ol-tile-layer
        title="OSM"
        :baseLayer="true"
      >
        <ol-source-osm />
      </ol-tile-layer>
    </ol-map>

[Viglino]

If the control is created a new button appears on the map.
In vue3-openlayers examples it seems to use print control 😃 called ol-printdialog-control and not ol-control-printdialog
see: https://vue3openlayers.netlify.app/componentsguide/mapcontrols/
and: https://vue3openlayers.netlify.app/componentsguide/mapcontrols/printdialog/

[1Map]

Thanks, does not make a difference, the control is still created in the body of the html and not the shadow root. Will have to find out where exactly the control is created in the body.

In the below image I have 2 custom vue elements. You can clearly see that the print dialog is created in the body part (at the bottom), whereas the print dialog was suppos to live in the shadow root of each custom element.

[1Map]

Any feedback on this issue?

[1Map]

Here, you can see an example where I have 4 vue elements "widgets" on the same page, whereby I want a print dialog to mount onto the widget and not in the body. Print dialog should have an optional property like, appendTo whereby you can specify the parent.

[Viglino]

I've added a targetDialog option to let you change the dialog target.

[1Map]

Thanks. Have you actually tested if it can Print (As I get a blank page in my page preview - Printer Preview).

Have you updated this change to the latest version, and what version? I am on 4.0.8, but cannot see your change.

1409cd7

I have manually applied your changes on my side and the dialog now shows on my map. Problem is when I click the Print button, it shows a blank preview (page)

[Viglino]

The PrintDialog uses a mediaquery to hide all element but the map from print.
See https://github.com/Viglino/ol-ext/blob/master/src/control/PrintDialog.css#L253
Il you change the location of the dialog in the DOM you may have to write a new CSS to take it into account and make it run...

[1Map]

Thanks, I am still not having any luck. Can you please show me sample of how this is done. Even with the targetDialog set the code still injects the "ol-print-document" class to the body and not to the targetDialog. This will create a problem if you have multiple maps with its own print dialogs. The best would be to add a class (for example ol-print-preview) to the targetDialog (if one was set) just before window.print and remove it after printing or print preview canceled. Then, the custom styling would be much easier in the css.

[Viglino]

The code is here: https://github.com/Viglino/ol-ext/blob/master/src/control/PrintDialog.css#L253
Every DOM element in the body is hidden (not printed):

  body.ol-print-document > * {
    display: none!important;
  }

Except the print dialog:

  body.ol-print-document > .ol-ext-print-dialog {
    display: block!important;
  }

So you have to make it visible (and his hierarchy) if it is not at the body root...

Do you have an online example?

[1Map]

@Viglino Thanks,

I do understand how the css handles the visibility. The problem here is not that easy.

If you have, for example 2 divs with print previews open. Then, in media print the css does the following:

1. Hide all components in the body

@media print {
  body.ol-print-document > * {
    display: none !important;
  }
}

2. Only show ol-print-document and ol-ext-print-dialog

@media print {
  body.ol-print-document,
  body.ol-print-document .ol-ext-print-dialog {
    display: block !important;
  }
}

But, because the print dialog does not live in the body anymore (with the use of targetDialog), but each one in its own div, the above will not work and you have to impliment custom css. Now, lets take the 2 div areas with a class of, lets say "onemapwidget", then I could have something like:

@media print {
  body.ol-print-document {
    margin: 0 !important;
    padding: 0 !important;
  }
  body.ol-print-document > * {
    display: none !important;
  }
  body.ol-print-document,
  body.ol-print-document .onemapwidget,
  body.ol-print-document .onemapwidget .ol-ext-print-dialog {
    display: block !important;
  }
  body.ol-print-document .onemapwidget,
  body.ol-print-document .onemapwidget .ol-ext-print-dialog .ol-content {
    max-height: unset !important;
    max-width: unset !important;
    width: unset !important;
    height: unset !important;
  }
  body.ol-print-document .onemapwidget .ol-ext-print-dialog > form,
  body.ol-print-document .onemapwidget .ol-ext-print-dialog {
    position: unset;
    box-shadow: none;
    background: none !important;
    border: 0;
  }
  body.ol-print-document .onemapwidget .ol-ext-print-dialog > form > *,
  body.ol-print-document .onemapwidget .ol-ext-print-dialog .ol-print-param {
    display: none !important;
    background: none;
  }
  body.ol-print-document .onemapwidget .ol-ext-print-dialog .ol-content {
    display: block !important;
    border: 0;
    background: none;
  }
  body.ol-print-document .onemapwidget .ol-ext-print-dialog .ol-print-map {
    position: fixed;
    background: none;
    width: auto;
    overflow: visible;
  }
  body.ol-print-document .onemapwidget .ol-ext-print-dialog .ol-print-map .ol-page {
    transform: none !important;
    box-shadow: none !important;
    position: unset;
  }

  body.ol-print-document .onemapwidget .ol-ext-print-dialog .ol-print-map .ol-control-title {
    visibility: visible !important;
    background-color: rgba(255, 255, 255, 0.5);
    text-align: center;
    height: auto;
  }
}

But this will print preview all 2 maps on top of each other with the last map on top.

That is why I said, that you have to add a custom class to the print dialog, just before window.print happens and remove it after the print preview was done (hidden or printed). Then it will be much easier to handle css based on only the "active" print preview (in case there are more than one print dialog open).