Fix #1049 Fix #960 virtual-tour: add configurable behaviour

Author: mistic100

docs/.vuepress/config.js

@@ -157,8 +157,9 @@ module.exports = {
             },
         ],
         ['@vuepress/back-to-top'],
-        require('./plugins/gallery'),
         require('./plugins/code-demo'),
+        require('./plugins/dialog'),
+        require('./plugins/gallery'),
         require('./plugins/module'),
         require('./plugins/tabs'),
     ],

docs/.vuepress/plugins/dialog/Dialog.vue

@@ -0,0 +1,30 @@
+<template>
+<div>
+    <md-dialog :md-active.sync="showDialog">
+      <md-dialog-title>{{ title }}</md-dialog-title>
+
+      <md-dialog-content class="theme-default-content">
+        <slot></slot>
+      </md-dialog-content>
+
+      <md-dialog-actions>
+        <md-button class="md-primary md-raised" @click="showDialog = false">Close</md-button>
+      </md-dialog-actions>
+    </md-dialog>
+
+    <md-button class="md-primary md-raised" @click="showDialog = true">{{ button }}</md-button>
+  </div>
+</template>
+
+<script>
+export default {
+    name: 'Dialog',
+    data: () => ({
+      showDialog: false
+    }),
+    props: {
+        title: { type: String, default: '' },
+        button: { type: String, default: '' },
+    },
+};
+</script>

docs/.vuepress/plugins/dialog/enhanceApp.js

@@ -0,0 +1,5 @@
+import Dialog from './Dialog.vue';
+
+export default ({ Vue }) => {
+    Vue.component('Dialog', Dialog);
+};

docs/.vuepress/plugins/dialog/index.js

@@ -0,0 +1,21 @@
+const container = require('markdown-it-container');
+const path = require('path');
+
+module.exports = (options, ctx) => ({
+    name: 'dialog',
+    enhanceAppFiles: path.resolve(__dirname, './enhanceApp.js'),
+    extendMarkdown: (md) => {
+        md.use(container, 'dialog', {
+            render: (tokens, idx) => {
+                const { nesting, info } = tokens[idx];
+
+                if (nesting === 1) {
+                    const [, button, title] = info.match(/dialog "(.*?)" "(.*?)"/);
+                    return `<Dialog button="${button}" title="${title}">\n`;
+                } else {
+                    return `</Dialog>\n`;
+                }
+            },
+        });
+    },
+});

docs/.vuepress/plugins/gallery/index.js

@@ -19,11 +19,10 @@ module.exports = (options, ctx) => ({
 
         md.use(container, 'item', {
             render: (tokens, idx) => {
-                const { nesting, info } = tokens[idx];
-                const attributes = info.trim().slice('item '.length);
+                const { nesting } = tokens[idx];
 
                 if (nesting === 1) {
-                    return `<GalleryItem ${attributes}>\n`;
+                    return `<GalleryItem>\n`;
                 } else {
                     return `</GalleryItem>\n`;
                 }

docs/.vuepress/styles/index.styl

@@ -18,6 +18,16 @@
   box-shadow: 0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);
 }
 
+.md-dialog-content.theme-default-content {
+  margin: 0;
+}
+.md-dialog-content p:first-child:not(:only-child) {
+  margin-top: inherit;
+}
+.md-dialog-content p:last-child:not(:only-child) {
+  margin-bottom: inherit;
+}
+
 .site-name .md-badge {
   position: static;
   display: inline;

docs/guide/methods.md

@@ -18,7 +18,7 @@ It is good practice to wait for the `ready` event before calling any method.
 viewer.addEventListener('ready', () => {
   viewer.rotate({
     textureX: 1500,
-    textureY: 1000
+    textureY: 1000,
   });
 }, { once: true });
 ```
@@ -29,7 +29,11 @@ This section describes the most useful methods available.
 
 ### `animate(options): Animation`
 
-Rotate and zoom the view with a smooth animation. You can change the position (`yaw`, `pitch` or `textureX`, `textureY`) and the zoom level (`zoom`). The `speed` option is either a duration in milliseconds or a string containing the speed in revolutions per minute (`2rpm`). It returns a `Animation` object which is a standard Promise with an additional `cancel` method.
+Rotate and zoom the view with a smooth animation. You can change the position (`yaw`, `pitch` or `textureX`, `textureY`) and the zoom level (`zoom`).
+
+The `speed` option is either a duration in milliseconds or a string containing the speed in revolutions per minute (`2rpm`).
+
+The method returns a `Animation` object which is a standard Promise with an additional `cancel` method.
 
 ```js
 viewer.animate({
@@ -87,9 +91,22 @@ viewer.setOptions({
 
 Change the panorama image with an optional transition animation (enabled by default). See all options in the <ApiLink page="types/Core.PanoramaOptions.html"/>.
 
+The `speed` option is either a duration in milliseconds or a string containing the speed in revolutions per minute (`2rpm`).
+
+The method returns a Promise resolved when the new panorama has finished loading.
+
 ```js
 viewer.setPanorama('image.jpg')
   .then(() => /* update complete */);
+
+viewer.setPanorama('image.jpg', { transition: false });
+
+viewer.setPanorama('image.jpg', {
+  speed: '20rpm',
+  position: { yaw: 0, pitch: 0 },
+  caption: 'The new caption',
+  // more options in the API doc
+});
 ```
 
 ### `zoom(level)` | `zoomIn()` | `zoomOut()`