@panoramax/web-viewer 4.0.3-develop-e49e7274 → 4.0.3-develop-798f53e7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -32,7 +32,7 @@ Component properties.
32
32
  | Name | Type | Default | Description |
33
33
  | --- | --- | --- | --- |
34
34
  | [active] | <code>boolean</code> | <code>false</code> | Whether the button is in an active state. |
35
- | [kind] | <code>string</code> | <code>&quot;full&quot;</code> | The style variation of the button (full, outline, flat, superflat, inline, superinline) |
35
+ | [kind] | <code>string</code> | <code>&quot;full&quot;</code> | The style variation of the button (full, fullwarn, outline, flat, superflat, inline, superinline) |
36
36
  | [size] | <code>string</code> | <code>&quot;md&quot;</code> | The size of the button (sm, md, l, xl, xxl) |
37
37
  | [disabled] | <code>boolean</code> | <code>false</code> | Whether the button is disabled. |
38
38
  | [type] | <code>string</code> | | The button type (e.g., 'submit'). |
@@ -32,7 +32,7 @@ Component properties.
32
32
  | --- | --- | --- | --- |
33
33
  | [text] | <code>string</code> | | Text to copy in clipboard on click (use either this parameter or input, not both) |
34
34
  | [input] | <code>input</code> | | ID of a HTML input field to copy content from in clipboard (use either this parameter or text, not both) |
35
- | [kind] | <code>string</code> | <code>&quot;full&quot;</code> | The style variation of the button (full, outline, flat, superflat, inline, superinline) |
35
+ | [kind] | <code>string</code> | <code>&quot;full&quot;</code> | The style variation of the button (full, fullwarn, outline, flat, superflat, inline, superinline) |
36
36
  | [size] | <code>string</code> | <code>&quot;md&quot;</code> | The size of the button (sm, md, l, xl, xxl) |
37
37
  | [unstyled] | <code>boolean</code> | <code>false</code> | Disable all styling (for list group integration) |
38
38
  | [title] | <code>string</code> | | Tooltip text displayed when hovering over the button |
@@ -40,6 +40,6 @@ Component properties.
40
40
  | [title] | <code>string</code> | | Tooltip text displayed when hovering over the button |
41
41
  | [download] | <code>string</code> | | Indicates if the linked resource should be downloaded |
42
42
  | [class] | <code>string</code> | | Custom CSS class for additional styling |
43
- | [kind] | <code>string</code> | <code>&quot;full&quot;</code> | The style variation of the button (full, outline, flat, superflat) |
43
+ | [kind] | <code>string</code> | <code>&quot;full&quot;</code> | The style variation of the button (full, fullwarn, outline, flat, superflat) |
44
44
  | [size] | <code>string</code> | <code>&quot;md&quot;</code> | The size of the button (sm, md, l, xl, xxl) |
45
45
 
package/docs/reference.md CHANGED
@@ -71,7 +71,6 @@ More complex UI components (but not menus):
71
71
  - [MapFiltersButton](./reference/components/ui/widgets/MapFiltersButton.md) : a togglable map filters button & menu.
72
72
  - [MapLayersButton](./reference/components/ui/widgets/MapLayersButton.md) : a togglable map layers button & menu.
73
73
  - [OSMEditors](./reference/components/ui/widgets/OSMEditors.md) : shortcuts for OpenStreetMap editing tools.
74
- - [PictureLegendActions](./reference/components/ui/widgets/PictureLegendActions.md) : various actions from picture legend.
75
74
  - [Player](./reference/components/ui/widgets/Player.md) : the previous/next/play/pause toolbar.
76
75
  - [Zoom](./reference/components/ui/widgets/Zoom.md) : the +/- zoom toolbar.
77
76
 
package/mkdocs.yml CHANGED
@@ -84,7 +84,6 @@ nav:
84
84
  - MapFiltersButton: 'reference/components/ui/widgets/MapFiltersButton.md'
85
85
  - MapLayersButton: 'reference/components/ui/widgets/MapLayersButton.md'
86
86
  - OSMEditors: 'reference/components/ui/widgets/OSMEditors.md'
87
- - PictureLegendActions: 'reference/components/ui/widgets/PictureLegendActions.md'
88
87
  - Player: 'reference/components/ui/widgets/Player.md'
89
88
  - Zoom: 'reference/components/ui/widgets/Zoom.md'
90
89
  - Button: 'reference/components/ui/Button.md'
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@panoramax/web-viewer",
3
- "version": "4.0.3-develop-e49e7274",
3
+ "version": "4.0.3-develop-798f53e7",
4
4
  "description": "Panoramax web viewer for geolocated pictures",
5
5
  "main": "build/index.js",
6
6
  "author": "Panoramax team",
@@ -28,11 +28,13 @@
28
28
  --widget-bg-inactive: var(--grey-pale);
29
29
  --widget-bg-primary: var(--blue-semi);
30
30
  --widget-bg-primary-hover: #e0e7ff;
31
+ --widget-bg-warn: #FFECB3;
31
32
  --widget-border-div: var(--grey-pale);
32
33
  --widget-border-btn: var(--blue);
33
34
  --widget-font: var(--grey-dark);
34
35
  --widget-font-active: var(--white);
35
36
  --widget-font-direct: var(--blue);
37
+ --widget-font-warn: #FF8F00;
36
38
  --font-family: "Atkinson Hyperlegible Next", sans-serif;
37
39
  overscroll-behavior-y: contain;
38
40
  }
@@ -14,19 +14,26 @@ export default class MapLegend extends LitElement {
14
14
  /** @private */
15
15
  static styles = css`
16
16
  :host {
17
- font-size: 0.9em;
17
+ font-size: 0.7em;
18
18
  }
19
19
  small {
20
20
  font-size: 1em;
21
21
  }
22
+ .maplibregl-ctrl-attrib-inner {
23
+ display: inline-block;
24
+ }
22
25
  `;
23
26
 
24
27
  /** @private */
25
28
  render() {
29
+ /* eslint-disable indent */
26
30
  const mapAttrib = this._parent?.map?._attribution?._innerContainer;
31
+ const mapLabelParts = this._parent?._t.map.map_data.split("{m}");
27
32
 
28
33
  return html`
29
- ${mapAttrib && mapAttrib.innerHTML.length > 0 ? html`${this._parent?._t.map.map_data}<br />${mapAttrib}` : nothing}
34
+ ${mapAttrib && mapAttrib.innerHTML.length > 0
35
+ ? html`${mapLabelParts.shift()}${mapAttrib}${mapLabelParts.shift()}`
36
+ : nothing}
30
37
  `;
31
38
  }
32
39
  }
@@ -211,11 +211,14 @@ export default class PictureLegend extends LitElement {
211
211
  ${this._addr?.length > 0 ? this._addr : html`<span class="pnx-placeholder-loading">&nbsp;</span>`}
212
212
  </div>
213
213
 
214
- <pnx-picture-legend-actions
215
- @click=${e => e.stopPropagation()}
216
- ._parent=${this._parent}
217
- ?full=${this._expanded}
218
- ></pnx-picture-legend-actions>
214
+ <pnx-button
215
+ title=${this._parent?._t.pnx.share}
216
+ size="sm"
217
+ @click=${() => this._parent._showShareOptions()}
218
+ class=${hiddenExpanded}
219
+ >
220
+ ${fa(faShareNodes)}
221
+ </pnx-button>
219
222
  </div>
220
223
 
221
224
  <div id="pic-legend-info" class=${hiddenExpanded}>
@@ -231,16 +234,16 @@ export default class PictureLegend extends LitElement {
231
234
  </div>
232
235
 
233
236
  <div id="pic-legend-cta" class=${shownExpanded}>
237
+ <pnx-button size="sm" @click=${() => this._parent._showShareOptions()}>
238
+ ${fa(faShareNodes)} ${this._parent?._t.pnx.share}
239
+ </pnx-button>
240
+
234
241
  ${this._parent.api._endpoints.report ? html`
235
- <pnx-button size="sm" @click=${() => this._parent._showReportForm()}>
242
+ <pnx-button kind="fullwarn" size="sm" @click=${() => this._parent._showReportForm()}>
236
243
  ${fa(faTriangleExclamation)} ${this._parent?._t.pnx.report}
237
244
  </pnx-button>
238
245
  ` : nothing}
239
246
 
240
- <pnx-button size="sm" @click=${() => this._parent._showShareOptions()}>
241
- ${fa(faShareNodes)} ${this._parent?._t.pnx.share}
242
- </pnx-button>
243
-
244
247
  <slot name="editors">
245
248
  <pnx-widget-osmeditors ._parent=${this._parent} />
246
249
  </slot>
@@ -1,10 +1,13 @@
1
- import { LitElement, css, html } from "lit";
1
+ import { LitElement, css, html, nothing } from "lit";
2
2
  import { fa } from "../../utils/widgets";
3
3
  import { faSvg, textarea, titles, input } from "../styles";
4
4
  import { faMap } from "@fortawesome/free-solid-svg-icons/faMap";
5
5
  import { faCircleInfo } from "@fortawesome/free-solid-svg-icons/faCircleInfo";
6
6
  import { faShareAlt } from "@fortawesome/free-solid-svg-icons/faShareAlt";
7
7
  import { faLink } from "@fortawesome/free-solid-svg-icons/faLink";
8
+ import { faFileDownload } from "@fortawesome/free-solid-svg-icons/faFileDownload";
9
+ import { faPrint } from "@fortawesome/free-solid-svg-icons/faPrint";
10
+ import { faRssSquare } from "@fortawesome/free-solid-svg-icons/faRssSquare";
8
11
 
9
12
  /**
10
13
  * Share Menu displays links for quick picture sharing.
@@ -25,6 +28,16 @@ export default class ShareMenu extends LitElement {
25
28
  .links {
26
29
  display: flex;
27
30
  gap: 5px;
31
+ align-items: center;
32
+ margin-bottom: 10px;
33
+ }
34
+ .cta-links {
35
+ display: flex;
36
+ flex-wrap: nowrap;
37
+ gap: 5px;
38
+ }
39
+ .cta-links pnx-link-button {
40
+ flex: 1;
28
41
  }
29
42
  .embed {
30
43
  display: flex;
@@ -37,6 +50,7 @@ export default class ShareMenu extends LitElement {
37
50
  /** @private */
38
51
  static properties = {
39
52
  _url: {state: true},
53
+ _meta: { state: true },
40
54
  };
41
55
 
42
56
  constructor() {
@@ -50,6 +64,11 @@ export default class ShareMenu extends LitElement {
50
64
  this._parent?.onceReady().then(() => {
51
65
  this._onUrlChange();
52
66
  this._parent.urlHandler.addEventListener("url-changed", this._onUrlChange.bind(this));
67
+
68
+ this._meta = this._parent.psv.getPictureMetadata();
69
+ this._parent.psv.addEventListener("picture-loaded", () => {
70
+ this._meta = this._parent.psv.getPictureMetadata();
71
+ });
53
72
  });
54
73
  }
55
74
 
@@ -59,6 +78,12 @@ export default class ShareMenu extends LitElement {
59
78
  this._url = this._parent?.urlHandler?.nextShortLink(baseUrl) || baseUrl;
60
79
  }
61
80
 
81
+ /** @private */
82
+ _onPrint() {
83
+ this._parent?.setPopup(false);
84
+ window.print();
85
+ }
86
+
62
87
  /** @private */
63
88
  render() {
64
89
  const iframe = `<iframe src="${this._url}" style="border: none; width: 500px; height: 300px"></iframe>`;
@@ -66,12 +91,36 @@ export default class ShareMenu extends LitElement {
66
91
  return html`
67
92
  <h4>${fa(faShareAlt)} ${this._parent?._t.pnx.share}</h4>
68
93
  <pnx-tabs>
69
- <h4 slot="title">${fa(faLink)} ${this._parent?._t.pnx.share_page}</h4>
94
+ <h4 slot="title">${fa(faLink)} ${this._parent?._t.pnx.share_picture}</h4>
70
95
  <div slot="content">
71
96
  <div class="links">
97
+ <div>${this._parent?._t.pnx.share_page}</div>
72
98
  <input type="text" readonly value=${this._url} style="flex: 2" />
73
99
  <pnx-copy-button ._t=${this._parent?._t} text=${this._url}></pnx-copy-button>
74
100
  </div>
101
+ <div class="cta-links">
102
+ <pnx-link-button
103
+ download
104
+ target="_blank"
105
+ href=${this._meta?.panorama?.hdUrl}
106
+ @click=${this._closeGroup}
107
+ >${fa(faFileDownload)} ${this._parent?._t.pnx.share_image}</pnx-link-button>
108
+
109
+ ${this._parent.isWidthSmall() ? nothing : html`<pnx-link-button @click=${this._onPrint}>
110
+ ${fa(faPrint)} ${this._parent?._t.pnx.share_print}
111
+ </pnx-link-button>`}
112
+
113
+ ${this._parent?.api?.getRSSURL() && html`
114
+ <pnx-link-button
115
+ target="_blank"
116
+ href=${this._parent?.api.getRSSURL(this._parent?.map?.getBounds?.())}
117
+ title=${this._parent?._t.pnx.share_rss_title}
118
+ @click=${this._closeGroup}
119
+ >
120
+ ${fa(faRssSquare)} ${this._parent?._t.pnx.share_rss}
121
+ </pnx-link-button>
122
+ `}
123
+ </div>
75
124
  </div>
76
125
 
77
126
  <h4 slot="title">${fa(faMap)} ${this._parent?._t.pnx.share_embed}</h4>
@@ -130,7 +130,7 @@ export const btn = css`
130
130
  gap: 5px;
131
131
  position: relative;
132
132
  width: 100%;
133
- height: 100%;
133
+ max-height: 100%;
134
134
  min-width: 26px;
135
135
  }
136
136
 
@@ -212,6 +212,17 @@ export const btn = css`
212
212
  background-color: var(--widget-bg-primary-hover);
213
213
  }
214
214
 
215
+ /* Fully-filled warning style */
216
+ .pnx-btn-fullwarn {
217
+ background-color: var(--widget-bg-warn);
218
+ color: var(--widget-font-warn);
219
+ border: none;
220
+ }
221
+
222
+ .pnx-btn-fullwarn:not(:disabled):hover {
223
+ background-color: var(--widget-bg-warn);
224
+ }
225
+
215
226
  /* Outline style */
216
227
  .pnx-btn-outline {
217
228
  border: 1px solid var(--widget-border-btn);
@@ -23,7 +23,7 @@ export default class Button extends LitElement {
23
23
  * @memberof Panoramax.components.ui.Button#
24
24
  * @type {Object}
25
25
  * @property {boolean} [active=false] Whether the button is in an active state.
26
- * @property {string} [kind=full] The style variation of the button (full, outline, flat, superflat, inline, superinline)
26
+ * @property {string} [kind=full] The style variation of the button (full, fullwarn, outline, flat, superflat, inline, superinline)
27
27
  * @property {string} [size=md] The size of the button (sm, md, l, xl, xxl)
28
28
  * @property {boolean} [disabled=false] Whether the button is disabled.
29
29
  * @property {string} [type] The button type (e.g., 'submit').
@@ -38,7 +38,7 @@ export default class CopyButton extends LitElement {
38
38
  * @type {Object}
39
39
  * @property {string} [text] Text to copy in clipboard on click (use either this parameter or input, not both)
40
40
  * @property {input} [input] ID of a HTML input field to copy content from in clipboard (use either this parameter or text, not both)
41
- * @property {string} [kind=full] The style variation of the button (full, outline, flat, superflat, inline, superinline)
41
+ * @property {string} [kind=full] The style variation of the button (full, fullwarn, outline, flat, superflat, inline, superinline)
42
42
  * @property {string} [size=md] The size of the button (sm, md, l, xl, xxl)
43
43
  * @property {boolean} [unstyled=false] Disable all styling (for list group integration)
44
44
  * @property {string} [title] Tooltip text displayed when hovering over the button
@@ -31,7 +31,7 @@ export default class LinkButton extends LitElement {
31
31
  * @property {string} [title] Tooltip text displayed when hovering over the button
32
32
  * @property {string} [download] Indicates if the linked resource should be downloaded
33
33
  * @property {string} [class] Custom CSS class for additional styling
34
- * @property {string} [kind=full] The style variation of the button (full, outline, flat, superflat)
34
+ * @property {string} [kind=full] The style variation of the button (full, fullwarn, outline, flat, superflat)
35
35
  * @property {string} [size=md] The size of the button (sm, md, l, xl, xxl)
36
36
  */
37
37
  static properties = {
@@ -46,7 +46,8 @@ export default class Legend extends LitElement {
46
46
  width: 250px;
47
47
  }
48
48
  .presentation {
49
- font-size: 0.9em;
49
+ font-size: 0.85em;
50
+ line-height: 1em;
50
51
  display: flex;
51
52
  gap: 5px;
52
53
  align-items: center;
@@ -104,7 +105,7 @@ export default class Legend extends LitElement {
104
105
  </pnx-picture-legend>
105
106
  <pnx-map-legend
106
107
  ._parent=${this._parent}
107
- style=${this.focus != "map" ? "display: none": ""}
108
+ style=${this.focus != "map" ? "display: none": "display: block; margin-top: 5px"}
108
109
  ></pnx-map-legend>
109
110
  </div>`;
110
111
  }
@@ -9,6 +9,5 @@ export {default as Legend} from "./Legend";
9
9
  export {default as MapFiltersButton} from "./MapFiltersButton";
10
10
  export {default as MapLayersButton} from "./MapLayersButton";
11
11
  export {default as OSMEditors} from "./OSMEditors";
12
- export {default as PictureLegendActions} from "./PictureLegendActions";
13
12
  export {default as Player} from "./Player";
14
13
  export {default as Zoom} from "./Zoom";
@@ -199,7 +199,7 @@
199
199
  "thumbnail": "Miniature af billedet, der holdes",
200
200
  "not_public": "Ikke offentligt synlig",
201
201
  "slow_loading": "Kortet indlæses langsomt og kan virke defekt",
202
- "map_data": "Kortdata:",
202
+ "map_data": "Kortdata: {m}",
203
203
  "more_panoramax": "Få mere at vide om Panoramax"
204
204
  }
205
205
  }
@@ -225,7 +225,7 @@
225
225
  "not_public": "Nicht öffentlich sichtbar",
226
226
  "loading": "Laden…",
227
227
  "slow_loading": "Die Karte wird nur langsam geladen und könnte fehlerhaft erscheinen",
228
- "map_data": "Kartendaten:",
228
+ "map_data": "Kartendaten: {m}",
229
229
  "more_panoramax": "Mehr Infos über Panoramax"
230
230
  },
231
231
  "maplibre": {
@@ -33,6 +33,7 @@
33
33
  "share": "Share",
34
34
  "share_links": "Links",
35
35
  "share_page": "Link to this picture",
36
+ "share_picture": "Picture",
36
37
  "share_image": "HD Image",
37
38
  "share_rss": "RSS feed",
38
39
  "share_rss_title": "RSS feed of new sequences in the currently visible map area",
@@ -225,7 +226,7 @@
225
226
  "thumbnail": "Thumbnail of hovered picture",
226
227
  "not_public": "Not publicly visible",
227
228
  "slow_loading": "Map is slow to load and could appear broken",
228
- "map_data": "Map data:",
229
+ "map_data": "Map based on {m}",
229
230
  "more_panoramax": "Discover more about Panoramax"
230
231
  }
231
232
  }
@@ -211,6 +211,6 @@
211
211
  "thumbnail": "Miniaturo de la surflikta bildo",
212
212
  "not_public": "Ne publike videbla",
213
213
  "more_panoramax": "Malkovri pli pri Panoramax",
214
- "map_data": "Kartaj datumoj :"
214
+ "map_data": "Kartaj datumoj : {m}"
215
215
  }
216
216
  }
@@ -31,6 +31,7 @@
31
31
  "search_address": "Rechercher une adresse, ville…",
32
32
  "search_user": "Rechercher un nom d'utilisateur…",
33
33
  "share": "Partager",
34
+ "share_picture": "Photo",
34
35
  "share_links": "Liens utiles",
35
36
  "share_page": "Lien de la photo",
36
37
  "share_image": "Image HD",
@@ -223,7 +224,7 @@
223
224
  "thumbnail": "Miniature de la photo survolée",
224
225
  "not_public": "Masqué au public",
225
226
  "slow_loading": "La carte est longue à charger et pourrait apparaître cassée",
226
- "map_data": "Données cartographiques :",
227
+ "map_data": "Carte basée sur {m}",
227
228
  "more_panoramax": "En savoir plus sur Panoramax"
228
229
  }
229
230
  }
@@ -228,7 +228,7 @@
228
228
  "thumbnail": "Miniatura della foto passata con il mouse",
229
229
  "not_public": "Non pubblicamente visibile",
230
230
  "slow_loading": "La mappa impiega troppo tempo a caricarsi e potrebbe apparire a pezzi",
231
- "map_data": "Dati cartografici:",
231
+ "map_data": "Dati cartografici: {m}",
232
232
  "more_panoramax": "Per saperne di più su Panoramax"
233
233
  }
234
234
  }
@@ -228,7 +228,7 @@
228
228
  "slow_loading": "De kaart laadt traag en kan er gebroken uitzien",
229
229
  "thumbnail": "Thumbnail van de aangeduide foto",
230
230
  "not_public": "Niet openbaar zichtbaar",
231
- "map_data": "Kaartdata:",
231
+ "map_data": "Kaartdata: {m}",
232
232
  "more_panoramax": "Meer weten over Panoramax"
233
233
  }
234
234
  }
@@ -198,7 +198,7 @@
198
198
  "thumbnail": "遊標懸停相片的縮圖",
199
199
  "slow_loading": "地圖載入速度緩慢而且可能出現損壞",
200
200
  "more_panoramax": "深入了解 Panoramax",
201
- "map_data": "地圖資料:"
201
+ "map_data": "地圖資料: {m}"
202
202
  },
203
203
  "psv": {
204
204
  "ctrlZoom": "使用 CTRL + 滑鼠滾輪縮放圖片",
@@ -1,32 +0,0 @@
1
- <a name="Panoramax.components.ui.widgets.PictureLegendActions"></a>
2
-
3
- ## Panoramax.components.ui.widgets.PictureLegendActions ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
4
- **Kind**: static class of <code>Panoramax.components.ui.widgets</code>
5
- **Extends**: <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
6
- **Element**: pnx-picture-legend-actions
7
-
8
- * [.PictureLegendActions](#Panoramax.components.ui.widgets.PictureLegendActions) ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
9
- * [new PictureLegendActions()](#new_Panoramax.components.ui.widgets.PictureLegendActions_new)
10
- * [.properties](#Panoramax.components.ui.widgets.PictureLegendActions+properties) : <code>Object</code>
11
-
12
- <a name="new_Panoramax.components.ui.widgets.PictureLegendActions_new"></a>
13
-
14
- ### new PictureLegendActions()
15
- Picture Legend Actions is a menu showing up complementary actions for picture legend.
16
-
17
- **Example**
18
- ```html
19
- <pnx-picture-legend-actions _parent=${viewer} />
20
- ```
21
- <a name="Panoramax.components.ui.widgets.PictureLegendActions+properties"></a>
22
-
23
- ### pictureLegendActions.properties : <code>Object</code>
24
- Component properties.
25
-
26
- **Kind**: instance property of [<code>PictureLegendActions</code>](#Panoramax.components.ui.widgets.PictureLegendActions)
27
- **Properties**
28
-
29
- | Name | Type | Default | Description |
30
- | --- | --- | --- | --- |
31
- | [full] | <code>boolean</code> | <code>false</code> | Show advanced actions |
32
-
@@ -1,117 +0,0 @@
1
- import { LitElement, html, nothing, css } from "lit";
2
- import { fa } from "../../../utils/widgets";
3
- import { faEllipsisV } from "@fortawesome/free-solid-svg-icons/faEllipsisV";
4
- import { noprint } from "../../styles";
5
-
6
- /**
7
- * Picture Legend Actions is a menu showing up complementary actions for picture legend.
8
- * @class Panoramax.components.ui.widgets.PictureLegendActions
9
- * @element pnx-picture-legend-actions
10
- * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
11
- * @example
12
- * ```html
13
- * <pnx-picture-legend-actions _parent=${viewer} />
14
- * ```
15
- */
16
- export default class PictureLegendActions extends LitElement {
17
- /** @private */
18
- static styles = [ noprint, css`
19
- pnx-togglable-group::part(menu) {
20
- border-radius: 5px;
21
- min-width: unset;
22
- }
23
- `];
24
-
25
- /**
26
- * Component properties.
27
- * @memberof Panoramax.components.ui.widgets.PictureLegendActions#
28
- * @type {Object}
29
- * @property {boolean} [full=false] Show advanced actions
30
- */
31
- static properties = {
32
- full: { type: Boolean },
33
- _meta: { state: true },
34
- };
35
-
36
- constructor() {
37
- super();
38
- this.full = false;
39
- }
40
-
41
- /** @private */
42
- connectedCallback() {
43
- super.connectedCallback();
44
-
45
- this._parent?.onceReady().then(() => {
46
- this._meta = this._parent.psv.getPictureMetadata();
47
- this._parent.psv.addEventListener("picture-loaded", () => {
48
- this._meta = this._parent.psv.getPictureMetadata();
49
- });
50
- });
51
- }
52
-
53
- /** @private */
54
- _onPrint() {
55
- this._closeGroup();
56
- window.print();
57
- }
58
-
59
- /** @private */
60
- _closeGroup() {
61
- this.renderRoot.querySelector("#pic-legend-headline-menu").close();
62
- }
63
-
64
- /** @private */
65
- _onShareClick() {
66
- this._closeGroup();
67
- this._parent._showShareOptions();
68
- }
69
-
70
- /** @private */
71
- _onReportClick() {
72
- this._closeGroup();
73
- this._parent._showReportForm();
74
- }
75
-
76
- /** @private */
77
- render() {
78
- return html`<pnx-togglable-group padded="false" id="pic-legend-headline-menu" ._parent=${this._parent}>
79
- <pnx-button slot="button" kind="inline">${fa(faEllipsisV)}</pnx-button>
80
- <pnx-list-group class="pnx-print-hidden" @click=${this._closeMenu}>
81
- ${this.full ? html`
82
- <a
83
- download
84
- target="_blank"
85
- href=${this._meta?.panorama?.hdUrl}
86
- @click=${this._closeGroup}
87
- >${this._parent?._t.pnx.share_image}</a>
88
- ${this._parent.isWidthSmall() ? nothing : html`<button @click=${this._onPrint}>
89
- ${this._parent?._t.pnx.share_print}
90
- </button>`}
91
- ${this._parent?.api?.getRSSURL() && html`
92
- <a
93
- target="_blank"
94
- href=${this._parent?.api.getRSSURL(this._parent?.map?.getBounds?.())}
95
- title=${this._parent?._t.pnx.share_rss_title}
96
- @click=${this._closeGroup}
97
- >
98
- ${this._parent?._t.pnx.share_rss}
99
- </a>
100
- `}
101
- ` : html`
102
- <button @click=${this._onReportClick}>
103
- ${this._parent?._t.pnx.report}
104
- </button>
105
- <button @click=${this._onShareClick}>
106
- ${this._parent?._t.pnx.share}
107
- </button>
108
- ${this._meta ? html`<pnx-copy-button ._t=${this._parent?._t} text=${this._meta.id} unstyled>
109
- ${this._parent?._t.pnx.metadata_general_copy_picid}
110
- </pnx-copy-button>` : nothing}
111
- ` }
112
- </pnx-list-group>
113
- </pnx-togglable-group>`;
114
- }
115
- }
116
-
117
- customElements.define("pnx-picture-legend-actions", PictureLegendActions);