Hide examples until user clicks them

appsocially · Sep 12, 2019 · 131ea20 · 131ea20
1 parent e526b8d
commit 131ea20
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 27 deletions.
diff --git a/docs/.vuepress/components/UpilBot.vue b/docs/.vuepress/components/UpilBot.vue
@@ -2,32 +2,40 @@
 <template>
   <div class="scenario-demonstration">
     <slot />
-    <v-sheet color="light-grey" class="upil-example-container">
-      <ChatThemePlugin
-        removeBottomBar
-        :upil="upil"
-        :avatar="Logo"
-        :wrapperStyleOverride="{height: '240px', 'overflow-y': 'scroll'}"
-      >
-        <template v-slot:external="{allNodes, currentNode, scenarioEnded}">
-          <div id="bottom-bar" v-if="currentNode && !scenarioEnded">
-            <component
-              v-bind:is="currentNode.componentType"
-              v-bind="currentNode.node"
-              placeholderOverride="Type your answer here"
-              :labelOverride="getLabelOverride(currentNode.node.type)"
-            />
-          </div>
-        </template>
-      </ChatThemePlugin>
-    </v-sheet>
+    <v-expansion-panels v-model="panel">
+      <v-expansion-panel>
+        <v-expansion-panel-header>{{isOpen ? '' : 'Show example'}}</v-expansion-panel-header>
+        <v-expansion-panel-content>
+          <v-sheet color="light-grey" class="upil-example-container">
+            <ChatThemePlugin
+              removeBottomBar
+              :upil="upil"
+              :avatar="Logo"
+              :wrapperStyleOverride="{height: '240px', 'overflow-y': 'scroll'}"
+            >
+              <template v-slot:external="{allNodes, currentNode, scenarioEnded}">
+                <div id="bottom-bar" v-if="currentNode && !scenarioEnded">
+                  <component
+                    v-bind:is="currentNode.componentType"
+                    v-bind="currentNode.node"
+                    placeholderOverride="Type your answer here"
+                    :labelOverride="getLabelOverride(currentNode.node.type)"
+                  />
+                </div>
+              </template>
+            </ChatThemePlugin>
+          </v-sheet>
+        </v-expansion-panel-content>
+      </v-expansion-panel>
+    </v-expansion-panels>
   </div>
 </template>
 
 <script>
 import { UPILCore, ChatTheme } from '@appsocially/vue-upil-plugin'
 import '@appsocially/vue-upil-plugin/dist/vue-userpil-plugin.css'
 import Logo from '../public/logo.png'
+import once from 'lodash.once'
 
 const { ChatThemePlugin } = ChatTheme
 
@@ -38,8 +46,22 @@ export default {
   },
   data () {
     return {
-      upil: new UPILCore(),
-      Logo
+      upil:  new UPILCore(),
+      Logo,
+      panel: null,
+      hasRun: false,
+    }
+  },
+  computed: {
+    isOpen(){
+      return this.panel === 0
+    }
+  },
+  watch: {
+    isOpen(isOpen){
+      if(isOpen){
+        this.start()
+      }
     }
   },
   props: {
@@ -58,9 +80,12 @@ export default {
         return text
       }
     },
-    start: function () {
-      const scenario = this.getScenario()
-      this.upil.startRaw(scenario)
+    start() {
+      if(!this.hasRun){
+        this.hasRun = true
+        const scenario = this.getScenario()
+        this.upil.startRaw(scenario)
+      }
     },
     getLabelOverride(type){
       switch(type){
@@ -73,9 +98,6 @@ export default {
       }
     }
   },
-  created () {
-    this.start()
-  }
 }
 </script>
 

diff --git a/yarn.lock b/yarn.lock
@@ -5405,6 +5405,11 @@ lodash.memoize@^4.1.2:
   resolved "https://registry.npm.taobao.org/lodash.memoize/download/lodash.memoize-4.1.2.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Flodash.memoize%2Fdownload%2Flodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
   integrity sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=
 
+lodash.once@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lodash.once/-/lodash.once-4.1.1.tgz#0dd3971213c7c56df880977d504c88fb471a97ac"
+  integrity sha1-DdOXEhPHxW34gJd9UEyI+0cal6w=
+
 lodash.template@^4.4.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.template/-/lodash.template-4.5.0.tgz#f976195cf3f347d0d5f52483569fe8031ccce8ab"