Skip to content

Commit

Permalink
印刷時にアトリビューションが表示されるように CSS の修正などをした (#386)
Browse files Browse the repository at this point in the history
* Add @media print CSS to remove unnecessary html element

close #384

* Control <details open> when printing
  • Loading branch information
Kamata, Ryo authored Oct 12, 2023
1 parent b4c884b commit 61ec0e8
Show file tree
Hide file tree
Showing 2 changed files with 26 additions and 0 deletions.
20 changes: 20 additions & 0 deletions src/lib/CustomAttributionControl.ts
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,8 @@ class CustomAttributionControl implements IControl {
private _attribHTML;
private styleId;
private styleOwner;
private printQuery;
private onMediaPrintChange;

constructor(options = {}) {
this.options = options;
Expand Down Expand Up @@ -190,6 +192,12 @@ class CustomAttributionControl implements IControl {
}
}
@media print {
.maplibregl-ctrl-attrib-button {
display: none!important;
}
}
.maplibregl-ctrl-attrib a {
color: rgba(0,0,0,.75);
text-decoration: none;
Expand Down Expand Up @@ -218,6 +226,16 @@ class CustomAttributionControl implements IControl {
shadow.appendChild(style);
shadow.appendChild(this._shadowContainer);

this.printQuery = window.matchMedia('print');
this.onMediaPrintChange = (e) => {
if (e.matches) {
// force open
this._shadowContainer.setAttribute('open', '');
this._shadowContainer.classList.remove('maplibregl-compact-show');
}
};
this.printQuery.addEventListener('change', this.onMediaPrintChange);

return this._container;
}

Expand All @@ -233,6 +251,8 @@ class CustomAttributionControl implements IControl {
this._map = undefined;
this._compact = undefined;
this._attribHTML = undefined;

this.printQuery.removeEventListener('change', this.onMediaPrintChange);
}

_setElementTitle(element, title) {
Expand Down
6 changes: 6 additions & 0 deletions src/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -129,3 +129,9 @@
display: block!important;
}
/* End: CSS for Attribution */

@media print {
.maplibregl-control-container button {
display: none;
}
}

0 comments on commit 61ec0e8

Please sign in to comment.