## Panoramax.components.core.PhotoViewer ⇐ [Basic](Basic.md/#Panoramax.components.core.Basic) **Kind**: static class of Panoramax.components.core **Extends**: [Basic](Basic.md/#Panoramax.components.core.Basic) **Emits**: [select](Basic.md/#Panoramax.components.core.Basic+event_select), [ready](Basic.md/#Panoramax.components.core.Basic+event_ready), [broken](Basic.md/#Panoramax.components.core.Basic+event_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 **Slot**: `editors` External links to map editors, or any tool that may be helpful. Defaults to OSM tools (iD & JOSM). **Properties** | Name | Type | Description | | --- | --- | --- | | loader | [Loader](../ui/Loader.md/#Panoramax.components.ui.Loader) | The loader screen | | api | [API](../../utils/API.md/#Panoramax.utils.API) | The API manager | | psv | [Photo](../ui/Photo.md/#Panoramax.components.ui.Photo) | The Photo Sphere Viewer component itself | | grid | [CorneredGrid](../layout/CorneredGrid.md/#Panoramax.components.layout.CorneredGrid) | The grid layout manager | | popup | [Popup](../ui/Popup.md/#Panoramax.components.ui.Popup) | The popup container | | urlHandler | [URLHandler](../../utils/URLHandler.md/#Panoramax.utils.URLHandler) | The URL query parameters manager | | presetsManager | [PresetsManager](../../utils/PresetsManager.md/#Panoramax.utils.PresetsManager) | The semantics presets manager | * [.PhotoViewer](#Panoramax.components.core.PhotoViewer) ⇐ [Basic](Basic.md/#Panoramax.components.core.Basic) * [new PhotoViewer()](#new_Panoramax.components.core.PhotoViewer_new) * [.properties](#Panoramax.components.core.PhotoViewer+properties) : Object * [.onceReady()](#Panoramax.components.core.PhotoViewer+onceReady) ⇒ Promise * [.oncePSVReady()](#Panoramax.components.core.PhotoViewer+oncePSVReady) ⇒ Promise * [.onceFirstPicLoaded()](#Panoramax.components.core.PhotoViewer+onceFirstPicLoaded) ⇒ Promise * [.setPopup(visible, [content])](#Panoramax.components.core.PhotoViewer+setPopup) * [.moveCenter()](#Panoramax.components.core.PhotoViewer+moveCenter) * [.moveLeft()](#Panoramax.components.core.PhotoViewer+moveLeft) * [.moveRight()](#Panoramax.components.core.PhotoViewer+moveRight) * [.moveUp()](#Panoramax.components.core.PhotoViewer+moveUp) * [.moveDown()](#Panoramax.components.core.PhotoViewer+moveDown) * [.addEventListener(type, listener, [options])](#Panoramax.components.core.PhotoViewer+addEventListener) * [.onceAPIReady()](Basic.md/#Panoramax.components.core.Basic+onceAPIReady) ⇒ Promise * [.getClassName()](Basic.md/#Panoramax.components.core.Basic+getClassName) ⇒ string * [.select([seqId], [picId], [force])](#Panoramax.components.core.Basic+select) * [.isWidthSmall()](Basic.md/#Panoramax.components.core.Basic+isWidthSmall) ⇒ boolean * [.isHeightSmall()](Basic.md/#Panoramax.components.core.Basic+isHeightSmall) ⇒ boolean * [.getSubComponentsNames()](Basic.md/#Panoramax.components.core.Basic+getSubComponentsNames) ⇒ Array.<string> * ["menu-opened"](Basic.md/#Panoramax.components.core.Basic+event_menu-opened) * ["select"](Basic.md/#Panoramax.components.core.Basic+event_select) * ["ready"](Basic.md/#Panoramax.components.core.Basic+event_ready) * ["broken"](Basic.md/#Panoramax.components.core.Basic+event_broken) ### new PhotoViewer() Photo Viewer is a component showing pictures (without any map). This component has a [CorneredGrid](../layout/CorneredGrid.md/#Panoramax.components.layout.CorneredGrid) layout, you can use directly any slot element to pass custom widgets. If you need a viewer with map, checkout [Viewer component](Viewer.md/#Panoramax.components.core.Viewer). Make sure to set width/height through CSS for proper display. **Example** ```html

My custom text

``` ### photoViewer.properties : Object Component properties. All of [Basic properties](Basic.md/#Panoramax.components.core.Basic+properties) are available as well. **Kind**: instance property of [PhotoViewer](#Panoramax.components.core.PhotoViewer) **Mixes**: [properties](Basic.md/#Panoramax.components.core.Basic+properties) **Overrides**: [properties](Basic.md/#Panoramax.components.core.Basic+properties) **Properties** | Name | Type | Default | Description | | --- | --- | --- | --- | | endpoint | string | | URL to API to use (must be a [STAC API](https://github.com/radiantearth/stac-api-spec/blob/main/overview.md)) | | [psv-options] | object | | [Any option to pass to Photo component](../ui/Photo.md/#Panoramax.components.ui.Photo) as an object.
Example: `psv-options="{'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 | | [fetch-options] | object | | Set custom options for fetch calls made against API ([same syntax as fetch options parameter](https://developer.mozilla.org/en-US/docs/Web/API/fetch#parameters)) | | [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 ? | | [keyboard-shortcuts] | string | true | Should keyboard shortcuts be enabled ? Set to "false" to fully disable any keyboard shortcuts. | | [skip-tags-menu-opening] | string | false | Should the "Tags" menu automatically open when you toggle Annotations switch ? Set true to avoid auto-opening. | | [share-base-url] | string | | Override the default base URL (current page) for the Share widget. Useful to lead to a public page when viewer is used in a closed tool. | ### 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](#Panoramax.components.core.PhotoViewer) **Overrides**: [onceReady](Basic.md/#Panoramax.components.core.Basic+onceReady) **Returns**: Promise - When viewer is ready ### photoViewer.oncePSVReady() ⇒ Promise Waiting for Photo Sphere Viewer to be available. **Kind**: instance method of [PhotoViewer](#Panoramax.components.core.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](#Panoramax.components.core.PhotoViewer) **Fulfil**: undefined When picture is shown ### photoViewer.setPopup(visible, [content]) Change full-page popup visibility and content **Kind**: instance method of [PhotoViewer](#Panoramax.components.core.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](#Panoramax.components.core.PhotoViewer) ### photoViewer.moveLeft() Moves the view of main component slightly to the left. **Kind**: instance method of [PhotoViewer](#Panoramax.components.core.PhotoViewer) ### photoViewer.moveRight() Moves the view of main component slightly to the right. **Kind**: instance method of [PhotoViewer](#Panoramax.components.core.PhotoViewer) ### photoViewer.moveUp() Moves the view of main component slightly to the top. **Kind**: instance method of [PhotoViewer](#Panoramax.components.core.PhotoViewer) ### photoViewer.moveDown() Moves the view of main component slightly to the bottom. **Kind**: instance method of [PhotoViewer](#Panoramax.components.core.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:`. ```js me.addEventListener("psv:picture-loading", doSomething); ``` **Kind**: instance method of [PhotoViewer](#Panoramax.components.core.PhotoViewer) **Overrides**: [addEventListener](Basic.md/#Panoramax.components.core.Basic+addEventListener) | Param | Type | Description | | --- | --- | --- | | type | string | The event type to listen for | | listener | function | The event handler | | [options] | object | [Any original addEventListener available options](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#options) | ### photoViewer.onceAPIReady() ⇒ Promise Waits for initial API setup. **Kind**: instance method of [PhotoViewer](#Panoramax.components.core.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](#Panoramax.components.core.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](#Panoramax.components.core.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](#Panoramax.components.core.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](#Panoramax.components.core.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](#Panoramax.components.core.PhotoViewer) **Returns**: Array.<string> - Sub-components names. ### "menu-opened" Event for overlaying menu opening **Kind**: event emitted by [PhotoViewer](#Panoramax.components.core.PhotoViewer) **Properties** | Name | Type | Description | | --- | --- | --- | | detail.menu | Element | The opened menu | ### "select" Event for sequence/picture selection **Kind**: event emitted by [PhotoViewer](#Panoramax.components.core.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 when component is ready to use. This happens when loader screen disappear, with picture and map loaded. To follow more precisely loading steps, you can also watch for sub-components `ready` events. ```js // Watch API-readiness viewer.addEventListener("api:ready", ...); // From parent viewer.api.addEventListener("ready", ...); // Or on sub-component ``` **Kind**: event emitted by [PhotoViewer](#Panoramax.components.core.PhotoViewer) ### "broken" Event for viewer failing to initially load. To follow more precisely loading failures, you can also watch for sub-components `broken` events. ```js // Watch API breaks viewer.addEventListener("api:broken", ...); // From parent viewer.api.addEventListener("broken", ...); // Or on sub-component ``` **Kind**: event emitted by [PhotoViewer](#Panoramax.components.core.PhotoViewer) **Properties** | Name | Type | Description | | --- | --- | --- | | detail.error | string | The user-friendly error message to display |