PhotoViewer
Panoramax.components.core.PhotoViewer ⇐ Basic
Kind: static class of Panoramax.components.core
Extends: Basic
Emits: select, ready, broken
Element: pnx-photo-viewer
Slot: top-left The top-left corner
Slot: top The top middle corner
Slot: top-right The top-right corner
Slot: bottom-left The bottom-left corner
Slot: bottom The bottom middle corner
Slot: bottom-right The bottom-right corner
Properties
| Name | Type | Description |
|---|---|---|
| loader | Loader |
The loader screen |
| api | API |
The API manager |
| psv | Photo |
The Photo Sphere Viewer component itself |
| grid | CorneredGrid |
The grid layout manager |
| popup | Popup |
The popup container |
| urlHandler | URLHandler |
The URL query parameters manager |
- .PhotoViewer ⇐
Basic- new PhotoViewer()
- .properties :
Object - .onceReady() ⇒
Promise - .oncePSVReady() ⇒
Promise - .onceFirstPicLoaded() ⇒
Promise - .setPopup(visible, [content])
- .moveCenter()
- .moveLeft()
- .moveRight()
- .moveUp()
- .moveDown()
- .addEventListener(type, listener, [options])
- .onceAPIReady() ⇒
Promise - .getClassName() ⇒
string - .select([seqId], [picId], [force])
- .isWidthSmall() ⇒
boolean - .isHeightSmall() ⇒
boolean - .getSubComponentsNames() ⇒
Array.<string> - "menu-opened"
- "select"
- "ready"
- "broken"
new PhotoViewer()
Photo Viewer is a component showing pictures (without any map).
This component has a CorneredGrid layout, you can use directly any slot element to pass custom widgets.
If you need a viewer with map, checkout Viewer component.
Make sure to set width/height through CSS for proper display.
Example
<!-- Basic example -->
<pnx-photo-viewer
endpoint="https://panoramax.openstreetmap.fr/"
style="width: 300px; height: 250px"
/>
<!-- With slotted widgets -->
<pnx-photo-viewer
endpoint="https://panoramax.openstreetmap.fr/"
style="width: 300px; height: 250px"
>
<p slot="top-right">My custom text</p>
</pnx-photo-viewer>
<!-- With only your custom widgets -->
<pnx-photo-viewer
endpoint="https://panoramax.openstreetmap.fr/"
style="width: 300px; height: 250px"
widgets="false"
>
<p slot="top-right">My custom text</p>
</pnx-photo-viewer>
photoViewer.properties : Object
Component properties. All of Basic properties are available as well.
Kind: instance property of PhotoViewer
Mixes: properties
Overrides: properties
Properties
| Name | Type | Default | Description |
|---|---|---|---|
| endpoint | string |
URL to API to use (must be a STAC API) | |
| [psv] | object |
Any option to pass to Photo component as an object. Example: psv="{'transitionDuration': 500, 'picturesNavigation': 'pic'}" |
|
| [widgets] | string |
true |
Use default set of widgets ? Set to false to avoid any widget to show up, and use slots to populate as you like. |
| [picture] | string |
The picture ID to display | |
| [sequence] | string |
The sequence ID of the picture displayed | |
| [fetchOptions] | object |
Set custom options for fetch calls made against API (same syntax as fetch options parameter) | |
| [lang] | string |
To override language used for labels. Defaults to using user's preferred languages. | |
| [url-parameters] | string |
true |
Should the component add and update URL query parameters to save viewer state ? |
photoViewer.onceReady() ⇒ Promise
Waits for PhotoViewer to be completely ready (map & PSV loaded, first picture also if one is wanted)
Kind: instance method of PhotoViewer
Overrides: onceReady
Returns: Promise - When viewer is ready
photoViewer.oncePSVReady() ⇒ Promise
Waiting for Photo Sphere Viewer to be available.
Kind: instance method of PhotoViewer
Returns: Promise - When PSV is ready to use
photoViewer.onceFirstPicLoaded() ⇒ Promise
Waits for first picture to display on PSV.
Kind: instance method of PhotoViewer
Fulfil: undefined When picture is shown
photoViewer.setPopup(visible, [content])
Change full-page popup visibility and content
Kind: instance method of PhotoViewer
| Param | Type | Default | Description |
|---|---|---|---|
| visible | boolean |
True to make it appear | |
| [content] | string | Array.<Element> |
null |
The new popup content |
photoViewer.moveCenter()
Move the view of main component to its center. For map, center view on selected picture. For picture, center view on image center.
Kind: instance method of PhotoViewer
photoViewer.moveLeft()
Moves the view of main component slightly to the left.
Kind: instance method of PhotoViewer
photoViewer.moveRight()
Moves the view of main component slightly to the right.
Kind: instance method of PhotoViewer
photoViewer.moveUp()
Moves the view of main component slightly to the top.
Kind: instance method of PhotoViewer
photoViewer.moveDown()
Moves the view of main component slightly to the bottom.
Kind: instance method of PhotoViewer
photoViewer.addEventListener(type, listener, [options])
Listen to events from this components or one of its sub-components.
For example, you can listen to psv events using prefix psv:.
Kind: instance method of PhotoViewer
Overrides: addEventListener
| Param | Type | Description |
|---|---|---|
| type | string |
The event type to listen for |
| listener | function |
The event handler |
| [options] | object |
Any original addEventListener available options |
photoViewer.onceAPIReady() ⇒ Promise
Waits for initial API setup.
Kind: instance method of PhotoViewer
Fulfil: null When API is ready.
Reject: string Error message
photoViewer.getClassName() ⇒ string
This allows to retrieve an always correct class name. This is crap, but avoids issues with Webpack & so on.
Each inheriting class must override this method.
Kind: instance method of PhotoViewer
Returns: string - The class name (for example "Basic")
photoViewer.select([seqId], [picId], [force])
Change the currently picture and/or sequence. Calling the method without parameters unselects.
Kind: instance method of PhotoViewer
| Param | Type | Default | Description |
|---|---|---|---|
| [seqId] | string |
null |
The sequence UUID |
| [picId] | string |
null |
The picture UUID |
| [force] | boolean |
false |
Force select even if already selected |
photoViewer.isWidthSmall() ⇒ boolean
Is the view running in a small container (small embed or smartphone)
Kind: instance method of PhotoViewer
Returns: boolean - True if container is small
photoViewer.isHeightSmall() ⇒ boolean
Is the view running in a small-height container (small embed or smartphone)
Kind: instance method of PhotoViewer
Returns: boolean - True if container height is small
photoViewer.getSubComponentsNames() ⇒ Array.<string>
List names of sub-components (like loader, api, map, psv) available in this component.
Kind: instance method of PhotoViewer
Returns: Array.<string> - Sub-components names.
"menu-opened"
Event for overlaying menu opening
Kind: event emitted by PhotoViewer
Properties
| Name | Type | Description |
|---|---|---|
| detail.menu | Element |
The opened menu |
"select"
Event for sequence/picture selection
Kind: event emitted by PhotoViewer
Properties
| Name | Type | Description |
|---|---|---|
| detail.seqId | string |
The selected sequence ID |
| detail.picId | string |
The selected picture ID (or null if not a precise picture clicked) |
| [detail.prevSeqId] | string |
The previously selected sequence ID (or null if none) |
| [detail.prevPicId] | string |
The previously selected picture ID (or null if none) |
"ready"
Event for component being ready to use (API loaded)
Kind: event emitted by PhotoViewer
"broken"
Event for viewer failing to initially load
Kind: event emitted by PhotoViewer
Properties
| Name | Type | Description |
|---|---|---|
| detail.error | string |
The user-friendly error message to display |