Close #405 Better documentation for plugins import

mistic100 · Jun 20, 2020 · 509c08f · 509c08f
1 parent cd1669d
commit 509c08f
Show file tree

Hide file tree

Showing 8 changed files with 37 additions and 7 deletions.
diff --git a/docs/README.md b/docs/README.md
@@ -20,7 +20,7 @@ features:
 footer: Licensed under MIT License, documentation under CC BY 3.0
 ---
 
-<iframe style="width: 100%; height: 600px;" src="//jsfiddle.net/mistic100/5r684etx/embedded/result,js/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
+<iframe style="width: 100%; height: 600px;" src="//jsfiddle.net/mistic100/5r684etx/embedded/result,js/dark" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
 
 ::: tip Thanks to Jéremy Heleine
 I forked the original Photo Sphere Viewer [by Jérémy Heleine](http://jeremyheleine.me) to provide a better code architecture and a bunch of new features.

diff --git a/docs/guide/cubemap.md b/docs/guide/cubemap.md
@@ -6,4 +6,4 @@ Photo Sphere Viewer supports cubemaps as six distinct image files. The files can
 
 All features of Photo Sphere Viewer are fully supported when using cubemaps but the `fisheye` option gives funky results.
 
-<iframe style="width: 100%; height: 600px;" src="//jsfiddle.net/mistic100/1jL5yc2r/embedded/result,js/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
+<iframe style="width: 100%; height: 600px;" src="//jsfiddle.net/mistic100/1jL5yc2r/embedded/result,js/dark" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
diff --git a/docs/plugins/README.md b/docs/plugins/README.md
@@ -2,6 +2,36 @@
 
 Plugins are used to add new functionalities to Photo Sphere Viewer. They can access all internal APIs of the viewer as well as the THREE.js renderer to make the viewer even more awesome.
 
+## Import official plugins
+
+Official plugins (listed on the left menu) are available in the the main `photo-sphere-viewer` package inside the `dist/plugins` directory. Some plugins also have an additional CSS file.
+
+**Example for the Markers plugins:**
+
+:::: tabs
+
+::: tab Direct import
+```html
+<!-- base imports of PSV and dependencies -->
+
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/plugins/markers.min.css"/>
+
+<script src="https://cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/plugins/markers.min.js"></script>
+```
+:::
+
+::: tab ES import
+Import `photo-sphere-viewer/dist/plugins/markers.css` with the prefered way depending on your tooling.
+
+```js
+import MarkersPlugins from 'photo-sphere-viewer/dist/plugins/markers';
+```
+:::
+
+::::
+
+
+
 ## Using a plugin
 
 All plugins consists of a JavaScript class which must be provided to the `plugins` array. Some plugins will also take configuration object provided in a nested array.

diff --git a/docs/plugins/plugin-autorotate-keypoints.md b/docs/plugins/plugin-autorotate-keypoints.md
@@ -49,7 +49,7 @@ The plugin reacts to the standard `autorotateDelay` and `autorotateSpeed` option
 
 The following demo randomly generates some markers and automatically pan between them.
 
-<iframe style="width: 100%; height: 500px;" src="//jsfiddle.net/mistic100/qsp01or4/embedded/result,js/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
+<iframe style="width: 100%; height: 500px;" src="//jsfiddle.net/mistic100/qsp01or4/embedded/result,js/dark" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
 
 
 ## Configuration

diff --git a/docs/plugins/plugin-markers.md b/docs/plugins/plugin-markers.md
@@ -52,7 +52,7 @@ markersPlugin.on('select-marker', (e, marker) => {
 
 The following example contains all types of markers. Click anywhere on the panorama to add a red marker, right-click to change it's color and double-click to remove it.
 
-<iframe style="width: 100%; height: 500px;" src="//jsfiddle.net/mistic100/kdpqLey2/embedded/result,js/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
+<iframe style="width: 100%; height: 500px;" src="//jsfiddle.net/mistic100/kdpqLey2/embedded/result,js/dark" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
 
 
 ## Markers options

diff --git a/docs/plugins/plugin-resolution.md b/docs/plugins/plugin-resolution.md
@@ -41,7 +41,7 @@ const viewer = new PhotoSphereViewer.Viewer({
 
 The following example provides two resolutions for the panorama, "small" is loaded by default.
 
-<iframe style="width: 100%; height: 500px;" src="//jsfiddle.net/mistic100/1cmn20zb/embedded/result,js/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
+<iframe style="width: 100%; height: 500px;" src="//jsfiddle.net/mistic100/1cmn20zb/embedded/result,js/dark" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
 
 
 ## Configuration

diff --git a/docs/plugins/plugin-settings.md b/docs/plugins/plugin-settings.md
@@ -26,7 +26,7 @@ const viewer = new PhotoSphereViewer.Viewer({
 
 The following example manually adds two settings.
 
-<iframe style="width: 100%; height: 500px;" src="//jsfiddle.net/mistic100/54qx9yLt/embedded/result,js/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
+<iframe style="width: 100%; height: 500px;" src="//jsfiddle.net/mistic100/54qx9yLt/embedded/result,js/dark" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
 
 
 ## Adding a setting

diff --git a/docs/plugins/plugin-visible-range.md b/docs/plugins/plugin-visible-range.md
@@ -34,7 +34,7 @@ visibleRangePlugin.setLatitudeRange(null);
 
 In this example only the front portion of the sphere is visible.
 
-<iframe style="width: 100%; height: 500px;" src="//jsfiddle.net/mistic100/m2fw1oLd/embedded/result,js/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
+<iframe style="width: 100%; height: 500px;" src="//jsfiddle.net/mistic100/m2fw1oLd/embedded/result,js/dark" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
 
 
 ## Configuration