doc: update imports in examples

mistic100 · Oct 1, 2024 · fddc34d · fddc34d
1 parent 4abb2a5
commit fddc34d
Show file tree

Hide file tree

Showing 27 changed files with 182 additions and 144 deletions.
diff --git a/docs/.vitepress/theme/style.scss b/docs/.vitepress/theme/style.scss
@@ -196,7 +196,6 @@ h4:not(.release-subtitle)+ul {
   }
 
   code {
-    padding: 0 5px;
-    margin-right: -0.3em;
+    padding: 0 0.3rem;
   }
 }
diff --git a/docs/guide/adapters/cubemap-tiles.md b/docs/guide/adapters/cubemap-tiles.md
@@ -9,8 +9,10 @@ This adapter is available in the [@photo-sphere-viewer/cubemap-tiles-adapter](ht
 :::
 
 ```js
-const viewer = new PhotoSphereViewer.Viewer({
-    adapter: PhotoSphereViewer.CubemapTilesAdapter,
+import { CubemapTilesAdapter } from '@photo-sphere-viewer/cubemap-tiles-adapter';
+
+const viewer = new Viewer({
+    adapter: CubemapTilesAdapter,
     panorama: {
         faceSize: 6000,
         nbTiles: 8,

diff --git a/docs/guide/adapters/cubemap-video.md b/docs/guide/adapters/cubemap-video.md
@@ -7,12 +7,14 @@ This adapter is available in the [@photo-sphere-viewer/cubemap-video-adapter](ht
 :::
 
 ```js
-const viewer = new PhotoSphereViewer.Viewer({
-    adapter: PhotoSphereViewer.CubemapVideoAdapter,
+import { CubemapVideoAdapter } from '@photo-sphere-viewer/cubemap-video-adapter';
+
+const viewer = new Viewer({
+    adapter: CubemapVideoAdapter,
     panorama: {
         source: 'path/video.mp4',
     },
-    plugins: [PhotoSphereViewer.VideoPlugin],
+    plugins: [VideoPlugin],
 });
 ```
 

diff --git a/docs/guide/adapters/cubemap.md b/docs/guide/adapters/cubemap.md
@@ -9,8 +9,10 @@ This adapter is available in the [@photo-sphere-viewer/cubemap-adapter](https://
 :::
 
 ```js
-const viewer = new PhotoSphereViewer.Viewer({
-    adapter: PhotoSphereViewer.CubemapAdapter,
+import {  CubemapAdapter } from '@photo-sphere-viewer/cubemap-adapter';
+
+const viewer = new Viewer({
+    adapter: CubemapAdapter,
     panorama: {
         left: 'path/to/left.jpg',
         front: 'path/to/front.jpg',

diff --git a/docs/guide/adapters/dual-fisheye.md b/docs/guide/adapters/dual-fisheye.md
@@ -7,8 +7,10 @@ This adapter is available in the main `@photo-sphere-viewer/core` package.
 :::
 
 ```js
-const viewer = new PhotoSphereViewer.Viewer({
-    adapter: [PhotoSphereViewer.DualFisheyeAdapter, {
+import { DualFisheyeAdapter } from '@photo-sphere-viewer/core';
+
+const viewer = new Viewer({
+    adapter: [DualFisheyeAdapter, {
         // config
     }],
     panorama: 'path/panorama.jpg',

diff --git a/docs/guide/adapters/equirectangular-tiles.md b/docs/guide/adapters/equirectangular-tiles.md
@@ -9,8 +9,10 @@ This adapter is available in the [@photo-sphere-viewer/equirectangular-tiles-ada
 :::
 
 ```js
-const viewer = new PhotoSphereViewer.Viewer({
-    adapter: PhotoSphereViewer.EquirectangularTilesAdapter,
+import { EquirectangularTilesAdapter } from '@photo-sphere-viewer/equirectangular-tiles-adapter';
+
+const viewer = new Viewer({
+    adapter: EquirectangularTilesAdapter,
     panorama: {
         width: 12000,
         cols: 16,

diff --git a/docs/guide/adapters/equirectangular-video.md b/docs/guide/adapters/equirectangular-video.md
@@ -7,12 +7,14 @@ This adapter is available in the [@photo-sphere-viewer/equirectangular-video-ada
 :::
 
 ```js
-const viewer = new PhotoSphereViewer.Viewer({
-    adapter: PhotoSphereViewer.EquirectangularVideoAdapter,
+import { EquirectangularVideoAdapter } from '@photo-sphere-viewer/equirectangular-video-adapter';
+
+const viewer = new Viewer({
+    adapter: EquirectangularVideoAdapter,
     panorama: {
         source: 'path/video.mp4',
     },
-    plugins: [PhotoSphereViewer.VideoPlugin],
+    plugins: [VideoPlugin],
 });
 ```
 

diff --git a/docs/guide/adapters/equirectangular.md b/docs/guide/adapters/equirectangular.md
@@ -9,8 +9,10 @@ There is no need to declare the equirectangular adapter as it is the default one
 :::
 
 ```js
-const viewer = new PhotoSphereViewer.Viewer({
-    adapter: [PhotoSphereViewer.EquirectangularAdapter, {
+import { EquirectangularAdapter } from '@photo-sphere-viewer/core';
+
+const viewer = new Viewer({
+    adapter: [EquirectangularAdapter, {
         interpolateBackground: true,
     }],
     panorama: 'path/panorama.jpg',
@@ -136,7 +138,7 @@ exiftool -tagsfromfile data.xmp -all:all panorama.jpg
 You can also directly pass the values to Photo Sphere Viewer with the `panoData` parameter.
 
 ```js
-const viewer = new PhotoSphereViewer.Viewer({
+const viewer = new Viewer({
     container: 'viewer',
     panorama: 'path/to/panorama.jpg',
 

diff --git a/docs/guide/adapters/index.md b/docs/guide/adapters/index.md
@@ -64,3 +64,18 @@ new Viewer({
 :::
 
 ::::
+
+::: tip
+When using Typescript you can also type-check the panorama object :
+
+```ts
+import { CubemapAdapter, CubemapPanorama } from '@photo-sphere-viewer/cubemap-adapter';
+
+const viewer = new Viewer({
+    adapter: CubemapAdapter,
+    panorama: {
+        ...,
+    } satisfies CubemapPanorama,
+});
+```
+:::
diff --git a/docs/guide/config.md b/docs/guide/config.md
@@ -14,7 +14,7 @@ HTML element which will contain the panorama, or identifier of the element.
 
 ```js
 container: document.querySelector('.viewer');
-
+container: '.viewer'; // will target [class="viewer"]
 container: 'viewer'; // will target [id="viewer"]
 ```
 
@@ -58,7 +58,7 @@ Define the file which will be downloaded with the `download` button. This is par
 #### `downloadName`
 
 -   type: `string`
--   default: `panorama` or `downloadUrl` filename
+-   default: `=downloadUrl` filename
 
 Overrides the filename when downloading the panorama. This is mostly useful if the panorama is provided as base64.
 
@@ -318,8 +318,10 @@ Configure keyboard actions. It is a map defining key code->action. (all the avai
 You can also configure an arbitrary callback to any key.
 
 ```js
+import { DEFAULTS } from '@photo-sphere-viewer/core';
+
 keyboardActions: {
-  ...PhotoSphereViewer.DEFAULTS.keyboardActions,
+  ...DEFAULTS.keyboardActions,
   'h': (viewer) => {
       if (viewer.panel.isVisible('help')) {
           viewer.panel.hide();

diff --git a/docs/guide/navbar.md b/docs/guide/navbar.md
@@ -88,15 +88,15 @@ viewer.navbar.getButton('my-button').show();
 This example uses some core buttons, the caption and a custom button.
 
 ```js
-new PhotoSphereViewer.Viewer({
+new Viewer({
     navbar: [
         'zoom',
         {
             id: 'my-button',
             content: '<svg...>',
             title: 'Hello world',
             className: 'custom-button',
-            onClick: (viewer) => {
+            onClick(viewer) {
                 alert('Hello from custom button');
             },
         },

diff --git a/docs/plugins/autorotate.md b/docs/plugins/autorotate.md
@@ -18,9 +18,11 @@ This plugin is available in the [@photo-sphere-viewer/autorotate-plugin](https:/
 In standard mode the panorama will simply rotate around, you can configure the `autorotatePitch` and `autorotateZoomLvl`.
 
 ```js
-const viewer = new PhotoSphereViewer.Viewer({
+import { AutorotatePlugin } from '@photo-sphere-viewer/autorotate-plugin';
+
+const viewer = new Viewer({
     plugins: [
-        [PhotoSphereViewer.AutorotatePlugin, {
+        [AutorotatePlugin, {
             autorotatePitch: '5deg',
         }],
     ],
@@ -36,9 +38,9 @@ In keypoints mode the plugin is configured with a list of `keypoints` which can
 It is also possible to configure each keypoint with a pause time and a tooltip.
 
 ```js
-const viewer = new PhotoSphereViewer.Viewer({
+const viewer = new Viewer({
     plugins: [
-        [PhotoSphereViewer.AutorotatePlugin, {
+        [AutorotatePlugin, {
             keypoints: [
                 'existing-marker-id',
 

diff --git a/docs/plugins/compass.md b/docs/plugins/compass.md
@@ -14,9 +14,11 @@ This plugin is available in the [@photo-sphere-viewer/compass-plugin](https://ww
 The plugin can be configured with a list of `hotspots` which are small dots on the compass. It can also display markers positions.
 
 ```js
-const viewer = new PhotoSphereViewer.Viewer({
+import { CompassPlugin } from '@photo-sphere-viewer/compass-plugin';
+
+const viewer = new Viewer({
     plugins: [
-        [PhotoSphereViewer.CompassPlugin, {
+        [CompassPlugin, {
             hotspots: [
                 { yaw: '45deg' }, 
                 { yaw: '60deg', color: 'red' },

diff --git a/docs/plugins/gallery.md b/docs/plugins/gallery.md
@@ -18,9 +18,11 @@ GalleryPlugin is not compatible with ResolutionPlugin.
 The plugin has a list of `items`, each configuring the corresponding panorama, a name and a thumbnail.
 
 ```js
-const viewer = new PhotoSphereViewer.Viewer({
+import { GalleryPlugin } from '@photo-sphere-viewer/gallery-plugin';
+
+const viewer = new Viewer({
     plugins: [
-        [PhotoSphereViewer.GalleryPlugin, {
+        [GalleryPlugin, {
             items: [
                 {
                     id: 'pano-1',

diff --git a/docs/plugins/gyroscope.md b/docs/plugins/gyroscope.md
@@ -14,8 +14,12 @@ This plugin is available in the [@photo-sphere-viewer/gyroscope-plugin](https://
 Once enabled the plugin will add a new "Gyroscope" button only shown when the gyroscope API is available.
 
 ```js
-const viewer = new PhotoSphereViewer.Viewer({
-    plugins: [PhotoSphereViewer.GyroscopePlugin],
+import { GyroscopePlugin } from '@photo-sphere-viewer/gyroscope-plugin';
+
+const viewer = new Viewer({
+    plugins: [
+        GyroscopePlugin,
+    ],
 });
 ```
 

diff --git a/docs/plugins/index.md b/docs/plugins/index.md
@@ -33,9 +33,7 @@ Official plugins (listed on the left menu) are available in various `@photo-sphe
 
     const viewer = new Viewer({
         plugins: [
-            [MarkersPlugin, {
-                // optional plugin config
-            }],
+            MarkersPlugin,
         ],
     });
 </script>
@@ -51,9 +49,7 @@ import { MarkersPlugin } from '@photo-sphere-viewer/markers-plugin';
 
 const viewer = new Viewer({
     plugins: [
-        [MarkersPlugin, {
-            // optional plugin config
-        }],
+        MarkersPlugin,
     ],
 });
 ```
@@ -98,6 +94,8 @@ const viewer = new Viewer({
 ```
 :::
 
+### Methods and events
+
 After initialization the plugin instance can be obtained with the `getPlugin` method, allowing to call methods on the plugin and subscribe to events.
 
 ```js
@@ -110,6 +108,8 @@ markersPlugin.addEventListener('select-marker', () => {
 });
 ```
 
+### Update options
+
 Some plugins allow their configuration to be modified after init with the `setOption()` and `setOptions()` methods. The updatable configuration properties are documented on each plugin page.
 
 ```js

diff --git a/docs/plugins/map.md b/docs/plugins/map.md
@@ -18,9 +18,11 @@ Looking for geographic map ? (OpenStreetMap, Google, etc) try the [Plan plugin](
 The minimal configuration of this plugin contains `imageUrl` and `center` (the position of the panorama on the map, in pixels). The map rotation can be ajusted with `rotation`.
 
 ```js
-const viewer = new PhotoSphereViewer.Viewer({
+import { MapPlugin } from '@photo-sphere-viewer/map-plugin';
+
+const viewer = new Viewer({
     plugins: [
-        [PhotoSphereViewer.MapPlugin, {
+        [MapPlugin, {
             imageUrl: 'path/to/map.jpg',
             center: { x: 785, y: 421 },
             rotation: '-12deg',

diff --git a/docs/plugins/markers.md b/docs/plugins/markers.md
@@ -24,9 +24,11 @@ There are four types of markers :
 Markers can be added at startup with the `markers` option or after load with the various methods.
 
 ```js
-const viewer = new PhotoSphereViewer.Viewer({
+import { MarkersPlugin } from '@photo-sphere-viewer/markers-plugin';
+
+const viewer = new Viewer({
     plugins: [
-        [PhotoSphereViewer.MarkersPlugin, {
+        [MarkersPlugin, {
             markers: [
                 {
                     id: 'new-marker',
@@ -39,7 +41,7 @@ const viewer = new PhotoSphereViewer.Viewer({
     ],
 });
 
-const markersPlugin = viewer.getPlugin(PhotoSphereViewer.MarkersPlugin);
+const markersPlugin = viewer.getPlugin(MarkersPlugin);
 
 markersPlugin.addEventListener('select-marker', ({ marker }) => {
     markersPlugin.updateMarker({

diff --git a/docs/plugins/overlays.md b/docs/plugins/overlays.md
@@ -5,6 +5,8 @@
 ::: module
 <ApiButton page="modules/OverlaysPlugin.html"/>
 Display additional images and videos on top of the panorama.
+
+This plugin is available in the [@photo-sphere-viewer/overlays-plugin](https://www.npmjs.com/package/@photo-sphere-viewer/overlays-plugin) package.
 :::
 
 ## Usage
@@ -17,9 +19,11 @@ Two kinds of overlays are supported :
 -   positionned rectangle : the image/video has a defined position and size (always in radians/degrees)
 
 ```js
-const viewer = new PhotoSphereViewer.Viewer({
+import { OverlaysPlugin } from '@photo-sphere-viewer/overlays-plugin';
+
+const viewer = new Viewer({
     plugins: [
-        [PhotoSphereViewer.OverlaysPlugin, {
+        [OverlaysPlugin, {
             overlays: [
                 {
                     id: 'fullsize',

diff --git a/docs/plugins/plan.md b/docs/plugins/plan.md
@@ -14,9 +14,11 @@ This plugin is available in the [@photo-sphere-viewer/plan-plugin](https://www.n
 The minimal configuration of this plugin contains `coordinates` (the GPS position of the panorama).
 
 ```js
-const viewer = new PhotoSphereViewer.Viewer({
+import { PlanPlugin } from '@photo-sphere-viewer/plan-plugin';
+
+const viewer = new Viewer({
     plugins: [
-        [PhotoSphereViewer.PlanPlugin, {
+        [PlanPlugin, {
             coordinates: [6.79077, 44.58041],
         }],
     ],

diff --git a/docs/plugins/resolution.md b/docs/plugins/resolution.md
@@ -18,10 +18,13 @@ ResolutionPlugin is not compatible with GalleryPlugin.
 Once enabled the plugin will add a new setting the user can use to change the resolution of the panorama.
 
 ```js
-const viewer = new PhotoSphereViewer.Viewer({
+import { SettingsPlugin } from '@photo-sphere-viewer/settings-plugin';
+import { ResolutionPlugin } from '@photo-sphere-viewer/resolution-plugin';
+
+const viewer = new Viewer({
     plugins: [
-        PhotoSphereViewer.SettingsPlugin,
-        [PhotoSphereViewer.ResolutionPlugin, {
+        SettingsPlugin,
+        [ResolutionPlugin, {
             defaultResolution: 'SD',
             resolutions: [
                 {