Merge pull request #42 from Tehsurfer/context-help

Context help added to the site

package.json

@@ -18,10 +18,10 @@
     "build-static": "vue-cli-service build --dest test_html"
   },
   "dependencies": {
-    "@abi-software/flatmapvuer": "^0.1.19",
+    "@abi-software/flatmapvuer": "^0.1.20",
     "@abi-software/maptooltip": "^0.1.10",
-    "@abi-software/scaffoldvuer": "^0.1.31",
-    "@tehsurfer/plotvuer": "^0.2.17",
+    "@abi-software/scaffoldvuer": "^0.1.32",
+    "@tehsurfer/plotvuer": "^0.2.18",
     "@tehsurfer/vue-tour": "^1.3.4",
     "core-js": "^3.3.2",
     "element-ui": "^2.13.0",

src/components/ContentVuer.vue

@@ -5,17 +5,17 @@
       <MultiFlatmapVuer v-if="entry.type === 'MultiFlatmap'" :availableSpecies="entry.availableSpecies" 
         @flatmapChanged="flatmapChanged" @ready="flatmapReady"
         @resource-selected="resourceSelected(entry.type, $event)"  :name="entry.resource" 
-        style="height:100%;width:100%;" :initial="entry.resource" 
+        style="height:100%;width:100%;" :initial="entry.resource" :helpMode="helpMode"
         ref="multiflatmap"/>
       <FlatmapVuer v-else-if="entry.type === 'Flatmap'" :entry="entry.resource" 
         @resource-selected="resourceSelected(entry.type, $event)" :name="entry.resource"
-        style="height:100%;width:100%;" :minZoom="entry.minZoom" 
+        style="height:100%;width:100%;" :minZoom="entry.minZoom" :helpMode="helpMode"
         :pathControls="entry.pathControls" ref="flatmap" @ready="flatmapReady"/>
       <ScaffoldVuer v-else-if="entry.type === 'Scaffold'" :url="entry.resource" 
         @scaffold-selected="resourceSelected(entry.type, $event)" ref="scaffold" 
-        :backgroundToggle=true :traditional=true />
+        :backgroundToggle=true :traditional=true :helpMode="helpMode"/>
       <PlotVuer v-else-if="entry.type === 'Plot'" :url="entry.resource"
-      :plotType="entry.plotType" style="height: 200px"></PlotVuer>
+      :plotType="entry.plotType" :helpMode="helpMode" style="height: 200px"></PlotVuer>
       <IframeVuer v-else-if="entry.type === 'Iframe'" :url="entry.resource" />
       <MapPopover v-if="(entry.type === ('Flatmap')) || (entry.type === ('MultiFlatmap')) || 
         (entry.type === ('Scaffold'))"
@@ -30,6 +30,7 @@
 
 <script>
 /* eslint-disable no-alert, no-console */
+import EventBus from './EventBus';
 import MapPopover from './MapPopover';
 import DatasetHeader from './DatasetHeader';
 import IframeVuer from './Iframe';
@@ -116,6 +117,18 @@ export default {
       for (let i = 0; i < terms.length; i++) {
         map.addMarker(terms[i].id, terms[i].type);
       }
+    },
+    startHelp: function(id){
+      if (this.entry.id === id && this.isInHelp === undefined){
+        this.helpMode = true;
+        window.addEventListener("mousedown", this.endHelp)
+        this.isInHelp = true;
+      }
+    },
+    endHelp: function(){
+      window.removeEventListener("mousedown", this.endHelp)
+      this.helpMode = false;
+      setTimeout(()=>{this.isInHelp = undefined}, 200);
     }
   },
   data: function() {
@@ -129,7 +142,8 @@ export default {
         height: this.entry.datasetTitle ? "calc(100% - 30px)" : "100%",
         width: "100%",
         bottom: "0px",
-      }
+      },
+      helpMode: false
     }
   },
   mounted: function() {
@@ -138,6 +152,9 @@ export default {
       this.tooltipCoords = this.$refs.scaffold.getDynamicSelectedCoordinates();
       document.querySelectorAll('.el-checkbox-group')[0].id = 'scaffold-checkbox-group-' + this.entry.id;
     }
+    EventBus.$on("startHelp", (id) => {
+      this.startHelp(id);
+    })
   },
 };
 </script>

src/components/DialogToolbarContent.vue

@@ -12,7 +12,7 @@
     <el-row class="icon-group" >
       <el-popover content="Help" placement="bottom-end"
         :appendToBody=false trigger="hover" popper-class="header-popper" v-if="showHelpIcon" >
-        <el-button class="header-icon" slot="reference" icon="el-icon-question" size="medium" type="text" @click="startTutorial"></el-button>
+        <el-button class="header-icon" slot="reference" icon="el-icon-question" size="medium" type="text" @click="startHelp(activeId)"></el-button>
       </el-popover>
       <el-popover content="Toggle fullscreen" placement="bottom-end"
         :appendToBody=false trigger="hover" popper-class="header-popper" v-if="showFullscreenIcon">
@@ -38,6 +38,7 @@
 <script>
 /* eslint-disable no-alert, no-console */
 import Vue from "vue";
+import EventBus from './EventBus';
 import {
   Button,
   Icon,
@@ -79,15 +80,15 @@ export default {
     },
     showHelpIcon: {
       type: Boolean,
-      default: false
+      default: true
     },
   },
   methods: {
     titleClicked: function(id) {
       this.$emit("titleClicked", id);
     },
-    startTutorial: function(){
-      this.$emit("startTutorial")
+    startHelp: function(id){
+      EventBus.$emit("startHelp", id);
     },
     onFullscreen: function() {
       this.$emit("onFullscreen");

src/components/FloatingDialog.vue

@@ -6,7 +6,7 @@
       <el-header v-if="entry.mode==='normal'" style="text-align: left; font-size: 14px;padding:0" 
         height="40px" class="dialog-header">
         <DialogToolbarContent :dialogTitles="[indexTitle]"  @maximise="onMaximise" @minimise="onMinimise" 
-          @close="onClose"/>         
+          @close="onClose" :activeId="index"/>         
       </el-header>
       <el-main class="dialog-main" :style="mainStyle">
         <ContentVuer :entry="entry" ref="content" @resource-selected="resourceSelected"

src/components/FloatingFlow.vue

@@ -6,7 +6,7 @@
         :showIcons="entries[findIndexOfId(activeDockedId)].mode!=='main'" 
         @maximise="dockedMaximise" @minimise="dockedMinimise" @close="dockedClose" 
         @titleClicked="dockedTitleClicked" @onFullscreen="onFullscreen"
-        :showHelpIcon="true" @startTutorial="startTutorial"/>       
+        :showHelpIcon="true" @startHelp="startHelp"/>       
     </el-header>
     <el-main class="dialog-main">
       <div style="width:100%;height:100%;position:relative;overflow:hidden;">
@@ -218,9 +218,10 @@ export default {
     flatmapChanged: function (){
       this.onFlowChange('flatmapChanged');
     },
-    startTutorial: function(){
+    startHelp: function(){
       this.onFlowChange('startTutorial');
     },
+    
     resetApp: function(){
       Object.assign(this.$data, initialState());
       var closeItems = document.querySelectorAll('.mapboxgl-popup-close-button');