GuidanceSystem

Guidance System

Component used to manage the creation and display of correct guidanceModal including home screen, branches and individual guidannce screens. Reacts to events in the guidance bus, based off of which is selects to show one of the three guidance sub components: guidanceHome, guidanceWrapper, guidanceModal.

Usage

A non interactive component. But must be included in order to have a functioning guidance system.

API Reference

Props

• guidance_branches_input - Array, stores data for the guidance modal screens is structured as an array of objects where each object is associated with one brnach of the guidance system, each branch then includes an object called title(the title of the branch, string) and branch_data this is another array of objects where each object contains: text(string) the text inside the body of the modal, highlightDiv(string or array of strings, html that is/are highlighted when modal screen shown), identifier(string, used in guidance button to link to the correct guidance modal screen), positionModal(array of strings, position the center of the modal in the screen [top, right, bottom, right] e.g ["50%",null,null,"50%"]), color_rgb(array of rgb value, sets the themeign colour of the modal screen).
• defaultGuidance - object, default=null, determines ,if any, guidance item is shown on load. Should be one of guidanceWrapper,guidanceHome,guidanceModal.

Events

• Reacts to several events on the guidance bus: guidance-button-click,open-main-guidance, close-window, select-branch, go-home

Data

• whichGuidance: this.defaultGuidance selects which of the three guidance sub-components is shown
• guidanceData: null selects the data to be passed to a guidance sub-component
• guidance_branches_list: this.guidance_branches_input used to store the guidnace data object, which is then mutated to add an additional branch which includes all of the modal screens in one go, so the user can see all unique screens in one branch quickly

Examples

<template>
  <div id="app">
    <iv-title-bar />
    <iv-guidance-system :guidance_branches_input="guidance_branch_list" />
    <iv-visualisation hotspotColumnHeight="35%"></iv-visualisation>
  </div>
</template>

<script>
export default {
  name:"App",
  data(){
    return{
      guidance_branch_list:[
        {title:"Branch 1",
          branch_data:[
              {text:"A text 1", highlightDiv:"iv-fixed-hotspot-topright" ,identifier: "A1", positionModal:["50%",null,null,"50%"],color_rgb:[52,186,235]},
              {text:"A text 2", highlightDiv:"iv-toggle-hotspot-bottom" ,identifier: "A2", positionModal:[null,"50%","50%",null],color_rgb:[189,52,235]},
              {text:"A text 3", highlightDiv:"iv-toggle-hotspot-bottomright" ,identifier: "A3", positionModal:[null,"50%","50%",null],color_rgb:[123,90,135]},
              {text:"A text 4", highlightDiv:"iv-toggle-hotspot-topleft" ,identifier: "A4", positionModal:[null,"50%","50%",null],color_rgb:[200,150,190]}
          ]
        },
        {title:"Branch 2",
          branch_data:[
              {text:"B text 1", highlightDiv:["iv-toggle-hotspot-bottom-slider_1","iv-toggle-hotspot-topleft"] ,identifier: "B1", positionModal:[null,"20%","20%",null],color_rgb:[52,186,235]},
              {text:"B text 2", highlightDiv:"iv-toggle-hotspot-bottom-slider_2" ,identifier: "B2", positionModal:[null,"20%","20%",null],color_rgb:[189,52,235]},
              {text:"B text 3", highlightDiv:"iv-toggle-hotspot-topleft" ,identifier: "B3", positionModal:["20%",null,null,"20%"],color_rgb:[123,90,135]},
              {text:"B text 4", highlightDiv:"iv-toggle-hotspot-topleft" ,identifier: "B4", positionModal:["40%",null,null,"40%"],color_rgb:[200,150,190]}
          ]
        },
      ]
    }
  }
}
</script>