## Panoramax.components.core.Basic ⇐ [lit.LitElement](https://lit.dev/docs/api/LitElement/) **Kind**: static class of Panoramax.components.core **Extends**: [lit.LitElement](https://lit.dev/docs/api/LitElement/) **Emits**: [select](#Panoramax.components.core.Basic+event_select), [ready](#Panoramax.components.core.Basic+event_ready), [broken](#Panoramax.components.core.Basic+event_broken), [menu-opened](#Panoramax.components.core.Basic+event_menu-opened) **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 | * [.Basic](#Panoramax.components.core.Basic) ⇐ [lit.LitElement](https://lit.dev/docs/api/LitElement/) * [new Basic()](#new_Panoramax.components.core.Basic_new) * [.properties](#Panoramax.components.core.Basic+properties) : Object * [.onceReady()](#Panoramax.components.core.Basic+onceReady) ⇒ Promise * [.onceAPIReady()](#Panoramax.components.core.Basic+onceAPIReady) ⇒ Promise * [.getClassName()](#Panoramax.components.core.Basic+getClassName) ⇒ string * [.select([seqId], [picId], [force])](#Panoramax.components.core.Basic+select) * [.isWidthSmall()](#Panoramax.components.core.Basic+isWidthSmall) ⇒ boolean * [.isHeightSmall()](#Panoramax.components.core.Basic+isHeightSmall) ⇒ boolean * [.getSubComponentsNames()](#Panoramax.components.core.Basic+getSubComponentsNames) ⇒ Array.<string> * [.addEventListener(type, listener, [options])](#Panoramax.components.core.Basic+addEventListener) * ["menu-opened"](#Panoramax.components.core.Basic+event_menu-opened) * ["select"](#Panoramax.components.core.Basic+event_select) * ["ready"](#Panoramax.components.core.Basic+event_ready) * ["broken"](#Panoramax.components.core.Basic+event_broken) ### new Basic() Basic core component is a basic container for common functions through all core components. It is not intended to be used directly, it's only to be extended by other core components. ### basic.properties : Object Component properties. **Kind**: instance mixin of [Basic](#Panoramax.components.core.Basic) **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)) | | [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)) | | [users] | Array.<string> | [geovisio] | List of users IDs to use for map display (defaults to general map, identified as "geovisio") | | [map-style] | string \| object | | The map's MapLibre style. This can be an a JSON object conforming to the schema described in the [MapLibre Style Specification](https://maplibre.org/maplibre-style-spec/), or a URL string pointing to one. Defaults to OSM vector tiles. | | [lang] | string | | To override language used for labels. Defaults to using user's preferred languages. | ### basic.onceReady() ⇒ Promise Waits for component to have its first loading done. Each inheriting class must override this method. **Kind**: instance method of [Basic](#Panoramax.components.core.Basic) **Fulfil**: null When initialization is complete. **Reject**: string Error message ### basic.onceAPIReady() ⇒ Promise Waits for initial API setup. **Kind**: instance method of [Basic](#Panoramax.components.core.Basic) **Fulfil**: null When API is ready. **Reject**: string Error message ### basic.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 [Basic](#Panoramax.components.core.Basic) **Returns**: string - The class name (for example "Basic") ### basic.select([seqId], [picId], [force]) Change the currently picture and/or sequence. Calling the method without parameters unselects. **Kind**: instance method of [Basic](#Panoramax.components.core.Basic) | 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 | ### basic.isWidthSmall() ⇒ boolean Is the view running in a small container (small embed or smartphone) **Kind**: instance method of [Basic](#Panoramax.components.core.Basic) **Returns**: boolean - True if container is small ### basic.isHeightSmall() ⇒ boolean Is the view running in a small-height container (small embed or smartphone) **Kind**: instance method of [Basic](#Panoramax.components.core.Basic) **Returns**: boolean - True if container height is small ### basic.getSubComponentsNames() ⇒ Array.<string> List names of sub-components (like loader, api, map, psv) available in this component. **Kind**: instance method of [Basic](#Panoramax.components.core.Basic) **Returns**: Array.<string> - Sub-components names. ### basic.addEventListener(type, listener, [options]) Listen to events from this components or one of its sub-components. For example, you can listen to `map` events using prefix `map:`. ```js me.addEventListener("map:move", doSomething); ``` **Kind**: instance method of [Basic](#Panoramax.components.core.Basic) | 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) | ### "menu-opened" Event for overlaying menu opening **Kind**: event emitted by [Basic](#Panoramax.components.core.Basic) **Properties** | Name | Type | Description | | --- | --- | --- | | detail.menu | Element | The opened menu | ### "select" Event for sequence/picture selection **Kind**: event emitted by [Basic](#Panoramax.components.core.Basic) **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 [Basic](#Panoramax.components.core.Basic) ### "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 [Basic](#Panoramax.components.core.Basic) **Properties** | Name | Type | Description | | --- | --- | --- | | detail.error | string | The user-friendly error message to display |