@panoramax/web-viewer 4.0.3-develop-fcd1db46 → 4.0.3-develop-d3e361bc

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.
Files changed (20) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/build/index.css +1 -1
  3. package/build/index.css.map +1 -1
  4. package/build/index.js +22 -9
  5. package/build/index.js.map +1 -1
  6. package/build/viewer.html +1 -1
  7. package/docs/reference/components/menus/MiniPictureLegend.md +15 -0
  8. package/docs/reference.md +1 -0
  9. package/mkdocs.yml +1 -0
  10. package/package.json +1 -1
  11. package/public/viewer.html +1 -1
  12. package/src/components/core/Viewer.js +3 -0
  13. package/src/components/menus/MiniPictureLegend.js +74 -0
  14. package/src/components/menus/PictureLegend.js +1 -2
  15. package/src/components/menus/PictureMetadata.js +1 -1
  16. package/src/components/menus/Share.js +1 -1
  17. package/src/components/menus/index.js +5 -4
  18. package/src/components/ui/AnnotationsSwitch.js +0 -1
  19. package/src/components/ui/Photo.css +3 -2
  20. package/src/components/ui/Photo.js +1 -0
package/build/viewer.html CHANGED
@@ -1,4 +1,4 @@
1
- <!doctype html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"/><title>Panoramax Web Viewer</title><style>#viewer{position:relative;width:95%;margin:2.5%;height:400px}#viewer.fullpage{position:fixed;top:0;bottom:0;left:0;right:0;height:unset;width:unset;margin:0}</style><script defer="defer" src="index.js"></script><link href="index.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><pnx-viewer id="viewer" class="fullpage" map='{
1
+ <!doctype html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"/><title>Panoramax Web Viewer</title><style>#viewer{position:relative;width:95%;margin:2.5%;height:400px}#viewer.fullpage{position:fixed;top:0;bottom:0;left:0;right:0;height:unset;width:unset;margin:0}</style><script defer="defer" src="index.js"></script><link href="index.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><pnx-viewer id="viewer" class="fullpage" _map='{
2
2
  raster: {
3
3
  type: "raster",
4
4
  tiles: [
package/docs/reference/components/menus/MiniPictureLegend.md ADDED
@@ -0,0 +1,15 @@
1
+ <a name="Panoramax.components.menus.MiniPictureLegend"></a>
2
+
3
+ ## Panoramax.components.menus.MiniPictureLegend ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
4
+ **Kind**: static class of <code>Panoramax.components.menus</code>
5
+ **Extends**: <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
6
+ **Element**: pnx-mini-picture-legend
7
+ <a name="new_Panoramax.components.menus.MiniPictureLegend_new"></a>
8
+
9
+ ### new MiniPictureLegend()
10
+ Mini picture legend shows info about picture capture date, when seen in mini component of viewer.
11
+
12
+ **Example**
13
+ ```html
14
+ <pnx-mini-picture-legend ._parent=${viewer} />
15
+ ```
package/docs/reference.md CHANGED
@@ -30,6 +30,7 @@ All-in-one, ready-to-use menus for complex operations. Note that they don't embe
30
30
  - [MapFilters](./reference/components/menus/MapFilters.md) : set map filters.
31
31
  - [MapLayers](./reference/components/menus/MapLayers.md) : change map theme and background.
32
32
  - [MapLegend](./reference/components/menus/MapLegend.md) : display map sources and Panoramax info.
33
+ - [MiniPictureLegend](./reference/components/menus/PictureLegend.md) : display date of a picture when it's shown reduced.
33
34
  - [PictureLegend](./reference/components/menus/PictureLegend.md) : display date, author and info for a picture.
34
35
  - [PictureMetadata](./reference/components/menus/PictureMetadata.md) : display full details about a picture.
35
36
  - [PlayerOptions](./reference/components/menus/PlayerOptions.md) : speed and constrast settings for play sequence feature.
package/mkdocs.yml CHANGED
@@ -70,6 +70,7 @@ nav:
70
70
  - MapFilters: 'reference/components/menus/MapFilters.md'
71
71
  - MapLayers: 'reference/components/menus/MapLayers.md'
72
72
  - MapLegend: 'reference/components/menus/MapLegend.md'
73
+ - MiniPictureLegend: 'reference/components/menus/MiniPictureLegend.md'
73
74
  - PictureLegend: 'reference/components/menus/PictureLegend.md'
74
75
  - PictureMetadata: 'reference/components/menus/PictureMetadata.md'
75
76
  - PlayerOptions: 'reference/components/menus/PlayerOptions.md'
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@panoramax/web-viewer",
3
- "version": "4.0.3-develop-fcd1db46",
3
+ "version": "4.0.3-develop-d3e361bc",
4
4
  "description": "Panoramax web viewer for geolocated pictures",
5
5
  "main": "build/index.js",
6
6
  "author": "Panoramax team",
package/public/viewer.html CHANGED
@@ -31,7 +31,7 @@
31
31
  <pnx-viewer
32
32
  id="viewer"
33
33
  class="fullpage"
34
- map='{
34
+ _map='{
35
35
  raster: {
36
36
  type: "raster",
37
37
  tiles: [
package/src/components/core/Viewer.js CHANGED
@@ -165,6 +165,7 @@ export default class Viewer extends PhotoViewer {
165
165
  focus: this._initParams.getParentPostInit().focus,
166
166
  picture: this._initParams.getParentPostInit().picture,
167
167
  });
168
+ this._miniPicLegend = createWebComp("pnx-mini-picture-legend", { _parent: this });
168
169
  this.grid.appendChild(this.legend);
169
170
  }
170
171
  else {
@@ -497,6 +498,7 @@ export default class Viewer extends PhotoViewer {
497
498
  // Add PSV to mini
498
499
  this.mini.appendChild(this.psvContainer);
499
500
  this.mini.icon = fa(faPanorama);
501
+ if(this._miniPicLegend) { this.mini.appendChild(this._miniPicLegend); }
500
502
 
501
503
  // Hide mini icon if no picture selected
502
504
  if(isNullId(this.picture)) { this.mini.classList.add("pnx-hidden"); }
@@ -514,6 +516,7 @@ export default class Viewer extends PhotoViewer {
514
516
  // Remove PSV from mini
515
517
  if(this.psvContainer.parentNode == this.mini) {
516
518
  this.mini.removeChild(this.psvContainer);
519
+ if(this._miniPicLegend) { this.mini.removeChild(this._miniPicLegend); }
517
520
  }
518
521
 
519
522
  // Add PSV to grid
package/src/components/menus/MiniPictureLegend.js ADDED
@@ -0,0 +1,74 @@
1
+ import { LitElement, nothing, css, html } from "lit";
2
+ import { onceParentAvailable } from "../../utils/widgets";
3
+ import { panel } from "../styles";
4
+
5
+ /**
6
+ * Mini picture legend shows info about picture capture date, when seen in mini component of viewer.
7
+ * @class Panoramax.components.menus.MiniPictureLegend
8
+ * @element pnx-mini-picture-legend
9
+ * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
10
+ * @example
11
+ * ```html
12
+ * <pnx-mini-picture-legend ._parent=${viewer} />
13
+ * ```
14
+ */
15
+ export default class MiniPictureLegend extends LitElement {
16
+ /** @private */
17
+ static styles = [panel, css`
18
+ .pnx-panel {
19
+ bottom: 0;
20
+ right: 0;
21
+ width: unset;
22
+ min-width: unset;
23
+ border-radius: 10px;
24
+ border-top-right-radius: 0;
25
+ border-bottom-left-radius: 0;
26
+ border-right: none;
27
+ border-bottom: none;
28
+ padding: 2px 5px;
29
+ font-size: 0.7em;
30
+ }
31
+ `];
32
+
33
+ /** @private */
34
+ static properties = {
35
+ _caption: {state: true},
36
+ };
37
+
38
+ /** @private */
39
+ connectedCallback() {
40
+ super.connectedCallback();
41
+
42
+ onceParentAvailable(this)
43
+ .then(() => this._parent.onceReady())
44
+ .then(() => {
45
+ this._onPicChange(this._parent.psv.getPictureMetadata());
46
+ this._parent.psv.addEventListener("picture-loaded", () => {
47
+ this._onPicChange(this._parent.psv.getPictureMetadata());
48
+ });
49
+ this._parent.psv.addEventListener("sequence-stopped", () => {
50
+ this._onPicChange(this._parent.psv.getPictureMetadata());
51
+ });
52
+ });
53
+ }
54
+
55
+ /** @private */
56
+ _onPicChange(picMeta) {
57
+ this._caption = picMeta?.caption;
58
+ }
59
+
60
+ /** @private */
61
+ render() {
62
+ /* eslint-disable indent */
63
+ return this._caption?.date ?
64
+ html`<div class="pnx-panel">${
65
+ this._caption.date.toLocaleDateString(
66
+ this._parent?.lang || window.navigator.language,
67
+ { year: "numeric", month: "long", day: "numeric" }
68
+ )
69
+ }</div>`
70
+ : nothing;
71
+ }
72
+ }
73
+
74
+ customElements.define("pnx-mini-picture-legend", MiniPictureLegend);
package/src/components/menus/PictureLegend.js CHANGED
@@ -282,8 +282,7 @@ export default class PictureLegend extends LitElement {
282
282
 
283
283
  ${this._caption.date ? html`<div class="info-block">
284
284
  ${fa(faCalendarAlt)}
285
- ${this._caption.date.toLocaleDateString(this._parent?.lang || window.navigator.language, { year: "numeric", month: "long" })}
286
- </div>` : nothing}
285
+ ${this._caption.date.toLocaleDateString(this._parent?.lang || window.navigator.language, { year: "numeric", month: "long", day: "numeric" })} </div>` : nothing}
287
286
  </div>
288
287
 
289
288
  <div id="pic-legend-cta" class=${shownExpanded}>
package/src/components/menus/PictureMetadata.js CHANGED
@@ -305,7 +305,7 @@ export default class PictureMetadata extends LitElement {
305
305
  }
306
306
  return {
307
307
  title: key,
308
- content: value.length > 30 ? html`<textarea readonly>${value}</textarea>`: value,
308
+ content: value.length > 30 ? html`<textarea readonly .value=${value}></textarea>`: value,
309
309
  style: value.length > 30 ? "width: 100%" : undefined
310
310
  };
311
311
  });
package/src/components/menus/Share.js CHANGED
@@ -85,7 +85,7 @@ export default class ShareMenu extends LitElement {
85
85
  >
86
86
  ${fa(faCircleInfo)} ${this._parent?._t.pnx.share_embed_docs}
87
87
  </pnx-link-button>
88
- <textarea readonly>${iframe}</textarea>
88
+ <textarea readonly .value=${iframe}></textarea>
89
89
  <pnx-copy-button
90
90
  ._t=${this._parent?._t}
91
91
  text=${iframe}
package/src/components/menus/index.js CHANGED
@@ -4,13 +4,14 @@
4
4
  */
5
5
 
6
6
  export {default as AnnotationsList} from "./AnnotationsList";
7
+ export {default as MapBackground} from "./MapBackground";
7
8
  export {default as MapFilters} from "./MapFilters";
8
9
  export {default as MapLayers} from "./MapLayers";
9
- export {default as MapBackground} from "./MapBackground";
10
+ export {default as MapLegend} from "./MapLegend";
11
+ export {default as MiniPictureLegend} from "./MiniPictureLegend";
12
+ export {default as PictureLegend} from "./PictureLegend";
13
+ export {default as PictureMetadata} from "./PictureMetadata";
10
14
  export {default as PlayerOptions} from "./PlayerOptions";
11
15
  export {default as QualityScoreDoc} from "./QualityScoreDoc";
12
16
  export {default as ReportForm} from "./ReportForm";
13
17
  export {default as Share} from "./Share";
14
- export {default as PictureLegend} from "./PictureLegend";
15
- export {default as MapLegend} from "./MapLegend";
16
- export {default as PictureMetadata} from "./PictureMetadata";
package/src/components/ui/AnnotationsSwitch.js CHANGED
@@ -122,7 +122,6 @@ export default class AnnotationsSwitch extends LitElement {
122
122
 
123
123
  /** @private */
124
124
  _persistAnnotationsLocalStorage(isAnnotToggled) {
125
- console.log("save", isAnnotToggled);
126
125
  localStorage.setItem(DISABLE_ANNOTATIONS_PARAM, isAnnotToggled ? "false": "true");
127
126
  }
128
127
 
package/src/components/ui/Photo.css CHANGED
@@ -43,7 +43,8 @@
43
43
  display: none;
44
44
  }
45
45
 
46
- /* No virtual tour arrows if photo is reduced */
47
- pnx-mini .psv-virtual-tour-arrows {
46
+ /* No virtual tour arrows or annotations if photo is reduced */
47
+ pnx-mini .psv-virtual-tour-arrows,
48
+ pnx-mini .pnx-psv-annotation {
48
49
  display: none;
49
50
  }
package/src/components/ui/Photo.js CHANGED
@@ -992,6 +992,7 @@ export default class Photo extends PSViewer {
992
992
  id: `annotation-${a.id}`,
993
993
  polygon: shape,
994
994
  data: { id: a.id },
995
+ className: "pnx-psv-annotation",
995
996
  svgStyle: {
996
997
  stroke: "var(--orange)",
997
998
  strokeWidth: "3px",