doc: use CDN version of the lib

mistic100 · Jul 31, 2022 · f7714e2 · f7714e2
1 parent 1979b63
commit f7714e2
Show file tree

Hide file tree

Showing 9 changed files with 51 additions and 42 deletions.
diff --git a/docs/.vuepress/components/CropPlayground.vue b/docs/.vuepress/components/CropPlayground.vue
@@ -86,8 +86,6 @@
 </template>
 
 <script>
-  const { Viewer } = require('photo-sphere-viewer');
-
   export default {
     data   : () => ({
       psv      : null,
@@ -199,7 +197,7 @@
           this.psv.destroy();
         }
 
-        this.psv = new Viewer({
+        this.psv = new PhotoSphereViewer.Viewer({
           panorama  : this.imageData,
           container : 'viewer',
           loadingImg: 'https://photo-sphere-viewer.js.org/assets/photosphere-logo.gif',

diff --git a/docs/.vuepress/components/Playground.vue b/docs/.vuepress/components/Playground.vue
@@ -498,8 +498,6 @@
 </template>
 
 <script>
-  const { Viewer, DEFAULTS } = require('photo-sphere-viewer');
-  const { MarkersPlugin } = require('photo-sphere-viewer-markers');
   const { cloneDeep, omit, debounce, isEqual, pickBy, range } = require('lodash');
 
   const TEMP_ID = 'marker-temp';
@@ -515,7 +513,7 @@
         roll: 0
       },
       options         : {
-        ...omit(cloneDeep(DEFAULTS), ['panorama', 'panoData', 'sphereCorrection', 'container', 'plugins', 'navbar', 'loadingImg']),
+        ...omit(cloneDeep(PhotoSphereViewer.DEFAULTS), ['panorama', 'panoData', 'sphereCorrection', 'container', 'plugins', 'navbar', 'loadingImg']),
       },
       panoData        : {
         fullWidth    : null,
@@ -528,22 +526,22 @@
       navbar          : [
         {
           code   : 'autorotate',
-          label  : DEFAULTS.lang.autorotate,
+          label  : PhotoSphereViewer.DEFAULTS.lang.autorotate,
           enabled: true
         },
         {
           code   : 'zoom',
-          label  : DEFAULTS.lang.zoom,
+          label  : PhotoSphereViewer.DEFAULTS.lang.zoom,
           enabled: true
         },
         {
           code   : 'move',
-          label  : DEFAULTS.lang.move,
+          label  : PhotoSphereViewer.DEFAULTS.lang.move,
           enabled: true
         },
         {
           code   : 'download',
-          label  : DEFAULTS.lang.download,
+          label  : PhotoSphereViewer.DEFAULTS.lang.download,
           enabled: true
         },
         {
@@ -553,7 +551,7 @@
         },
         {
           code   : 'fullscreen',
-          label  : DEFAULTS.lang.fullscreen,
+          label  : PhotoSphereViewer.DEFAULTS.lang.fullscreen,
           enabled: true
         },
       ],
@@ -596,7 +594,7 @@
     },
 
     created() {
-      this.CLIPBOARD_AVAILABLE = false; // SSR rendering dissallow "window" usage here
+      this.CLIPBOARD_AVAILABLE = !!window.navigator.clipboard;
       this.PIN_RED_URL = 'https://photo-sphere-viewer.js.org/assets/pin-red.png';
       this.PIN_BLUE_URL = 'https://photo-sphere-viewer.js.org/assets/pin-blue.png';
       this.TARGET_URL = 'https://photo-sphere-viewer.js.org/assets/target.png';
@@ -605,32 +603,41 @@
     },
 
     mounted() {
-      this.CLIPBOARD_AVAILABLE = !!window.navigator.clipboard;
+      const markersJs = document.createElement('script');
+      markersJs.setAttribute('src', 'https://cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/plugins/markers.js');
+      document.head.appendChild(markersJs);
+
+      const markersCss = document.createElement('link');
+      markersCss.setAttribute('rel', 'stylesheet');
+      markersCss.setAttribute('href', 'https://cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/plugins/markers.css');
+      document.head.appendChild(markersCss);
 
       this.oldOptions = cloneDeep(this.options);
 
       this._applyOptions = debounce(() => this.applyOptions(), 200);
 
-      this.psv = new Viewer({
-        container : 'viewer',
-        loadingImg: 'https://photo-sphere-viewer.js.org/assets/photosphere-logo.gif',
-        plugins   : [
-          [MarkersPlugin, {}],
-        ],
-      });
+      markersJs.onload = () => {
+        this.psv = new PhotoSphereViewer.Viewer({
+          container : 'viewer',
+          loadingImg: 'https://photo-sphere-viewer.js.org/assets/photosphere-logo.gif',
+          plugins   : [
+            [PhotoSphereViewer.MarkersPlugin, {}],
+          ],
+        });
 
-      this.applyNavbar();
+        this.applyNavbar();
 
-      this.markers = this.psv.getPlugin(MarkersPlugin);
+        this.markers = this.psv.getPlugin(PhotoSphereViewer.MarkersPlugin);
 
-      this.psv.on('click', (e, data) => this.onClick(data));
-      this.psv.on('dblclick', (e, data) => this.onDblClick(data));
-      this.markers.on('select-marker', (e, marker) => this.onSelectMarker(marker));
-      this.markers.on('set-markers', (e, markers) => {
-        this.markersList = cloneDeep(markers.filter(m => m.id !== TEMP_ID));
-      });
+        this.psv.on('click', (e, data) => this.onClick(data));
+        this.psv.on('dblclick', (e, data) => this.onDblClick(data));
+        this.markers.on('select-marker', (e, marker) => this.onSelectMarker(marker));
+        this.markers.on('set-markers', (e, markers) => {
+          this.markersList = cloneDeep(markers.filter(m => m.id !== TEMP_ID));
+        });
 
-      this.loadPsv();
+        this.loadPsv();
+      };
     },
 
     watch: {

diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
@@ -6,6 +6,13 @@ module.exports = {
   description: 'A JavaScript library to display Photo Sphere panoramas',
   head       : [
     ['link', { rel: 'icon', href: '/favicon.png' }],
+    ['script', { src: 'https://cdn.jsdelivr.net/npm/uevent@2/browser.js', defer: 'defer' }],
+    ['script', { src: 'https://cdn.jsdelivr.net/npm/three/build/three.min.js', defer: 'defer' }],
+    ['script', { src: 'https://cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/photo-sphere-viewer.js', defer: 'defer' }],
+    ['link', {
+      rel : 'stylesheet',
+      href: 'https://cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/photo-sphere-viewer.css'
+    }],
   ],
   themeConfig: {
     logo        : '/favicon.png',
@@ -116,10 +123,4 @@ module.exports = {
     }],
     ['@vuepress/back-to-top'],
   ],
-  alias      : {
-    'photo-sphere-viewer'                   : path.resolve(process.cwd(), 'dist/photo-sphere-viewer.js'),
-    'photo-sphere-viewer-markers'           : path.resolve(process.cwd(), 'dist/plugins/markers.js'),
-    'photo-sphere-viewer-stylesheet'        : path.resolve(process.cwd(), 'dist/photo-sphere-viewer.css'),
-    'photo-sphere-viewer-markers-stylesheet': path.resolve(process.cwd(), 'dist/plugins/markers.css'),
-  },
 };
diff --git a/docs/.vuepress/enhanceApp.js b/docs/.vuepress/enhanceApp.js
@@ -1,6 +1,7 @@
 import VueMaterial from 'vue-material';
 import VSwatches from 'vue-swatches';
 import VueSlider from 'vue-slider-component/dist-css/vue-slider-component.umd.min';
+import NoSSR from 'vue-no-ssr';
 
 import 'vue-material/dist/theme/default.css'
 import 'vue-material/dist/vue-material.min.css'
@@ -12,6 +13,7 @@ export default ({ Vue, router }) => {
   Vue.use(VueMaterial);
   Vue.component('v-swatches', VSwatches);
   Vue.component('vue-slider', VueSlider);
+  Vue.component('no-ssr', NoSSR);
 
   router.beforeEach((to, from, next) => {
     if (/^\/api/.test(to.fullPath)) {

diff --git a/docs/.vuepress/styles/index.styl b/docs/.vuepress/styles/index.styl
@@ -1,6 +1,3 @@
-@import '~photo-sphere-viewer-stylesheet';
-@import '~photo-sphere-viewer-markers-stylesheet';
-
 .sidebar a:not(.active):not(:hover), .navbar a:not(.active):not(:hover) {
   color: inherit !important;
 }

diff --git a/docs/.vuepress/theme/components/Home.vue b/docs/.vuepress/theme/components/Home.vue
@@ -84,7 +84,6 @@
 </template>
 
 <script>
-  const { Viewer } = require('photo-sphere-viewer');
   import NavLink from '@theme/components/NavLink.vue'
 
   export default {
@@ -110,7 +109,7 @@
     }),
 
     mounted() {
-      const viewer = new Viewer({
+      const viewer = new PhotoSphereViewer.Viewer({
         panorama       : 'https://photo-sphere-viewer-data.netlify.app/assets/sphere.jpg',
         container      : 'photosphere',
         defaultLat     : 0.1,

diff --git a/docs/guide/adapters/equirectangular.md b/docs/guide/adapters/equirectangular.md
@@ -121,4 +121,6 @@ const viewer = new PhotoSphereViewer.Viewer({
 
 Use this demo to find the best values for your image.
 
-<CropPlayground/>
+<no-ssr>
+  <CropPlayground/>
+</no-ssr>
diff --git a/docs/playground.md b/docs/playground.md
@@ -2,4 +2,6 @@
 
 This page allows to test (almost) all options of Photo Sphere Viewer with your own panorama (equirectangular only). You can also add markers interractively and export them.
 
-<Playground/>
+<no-ssr>
+  <Playground/>
+</no-ssr>
diff --git a/package.json b/package.json
@@ -76,6 +76,7 @@
     "stylelint-config-standard-scss": "^5.0.0",
     "typescript": "^4.4.2",
     "vue-material": "^1.0.0-beta-15",
+    "vue-no-ssr": "^1.1.1",
     "vue-slider-component": "^3.2.14",
     "vue-swatches": "^2.1.1",
     "vuepress": "^1.8.2"