Merge pull request #78 from shahbanno/master

added reset button

Author: Puredbest

Template/App.vue

@@ -5,7 +5,6 @@
                 <!-- <img src='./assets/ImpVis-logo.png' alt="ImpVisLogo" height="50"/> -->
                 <h1> Welcome to Imperial Visualisations!</h1>
                 <p> Your project, {{projectName}} has succesfully been set up using the NodeJS template!</p>
-                <iv-hover-text></iv-hover-text>
             </div>
 
 
@@ -15,8 +14,16 @@
                 <iv-toggle-hotspot position='top' title='Toggle Hotspot' :glass=true>
                     I am in a toggle hotspot
                     <iv-slider></iv-slider>
+
+                    <iv-reset-button> Reset </iv-reset-button>
+
+                    <iv-toggle-basic> </iv-toggle-basic>
+                    <iv-toggle-advance></iv-toggle-advance>
+                    <iv-tickbox></iv-tickbox>
+
                 </iv-toggle-hotspot>
 
+
                 <iv-fixed-hotspot position='topright'>
                     I am in a fixed hotspot
                 </iv-fixed-hotspot>

package-lock.json

@@ -0,0 +1,3 @@
+import Vue from "vue";
+export const eventBus = new Vue();
+

src/buses/eventBus.js

@@ -0,0 +1,76 @@
+<template>
+    <button class="iv-reset-button iv-drop-shadow-medium" style="height:100%" @mouseover="mouseOn" @mouseleave="mouseOff" @click="buttonClick(e)" :disabled="disabled">
+        <slot>Default text</slot></button>
+</template>
+
+<script>
+import { eventBus } from "@/buses/eventBus";
+export default {
+    name: "iv-reset-button",
+    methods:{
+        mouseOn(e){
+            this.$emit("mouseover",e)
+        },
+        mouseOff(e){
+            this.$emit("mouseleave",e)
+        },
+        buttonClick(e){
+            this.$emit("click", e)
+            eventBus.$emit("reset-data", this.resetChoice)
+        },
+    },
+    props:{
+      disabled: {
+        type:Boolean,
+        required: false,
+        default: false
+      },
+      resetChoice: {
+        type:Boolean,
+        required: false,
+        default: true,
+      }
+
+    }  
+}
+</script>
+
+<style lang="scss">
+@import "src/globals";
+$green:#19CF86;
+$greenHover:#1BDE90;
+$greenClick:#139C65;
+$disabledColor:#D3D3D3;
+.iv-reset-button{
+    border: none;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 1.2rem;
+    height:1.45rem;
+    padding: 0.25em 0.5em;
+    background-color: $green;
+    color:$white;
+    font-weight:500;
+    transition: all 0.2s;
+    &:focus{
+        outline:0;
+    }
+
+    &:hover{
+        background-color:$greenHover;
+    }
+    &:active{
+        background:$greenClick;
+        color:#F0FFF0;
+    }
+
+
+    &:disabled{
+        background-color:$disabledColor;
+        color:#a3a3a3;
+    }
+}
+
+
+</style>

src/components/ResetButton/ResetButton.vue

@@ -0,0 +1,3 @@
+import ResetButton from "./ResetButton.vue";
+//import SymbolButton from "./SymbolButton.vue";
+export default ResetButton;

src/components/ResetButton/index.js

@@ -19,6 +19,7 @@ import BubbleComp from './bubble.vue';
 import InputButton from './inputButton.vue';
 import Theme from '@/Theme.js';
 import Button from '../Button/Button.vue';
+import {eventBus} from "@/buses/eventBus";
 export default {
     name:"iv-slider",
     components: {
@@ -150,12 +151,20 @@ export default {
             }
         }
     },
+
     mounted () {
         this.id = this._uid;
         //this.min_step_size();
         this.tick_list = this.calc_ticks(); 
         this.tick_line_key = "tick_line_" + this._uid;
         this.tick_num_key = "tick_num_" + this._uid;
+
+
+        eventBus.$on("reset-data", data => {
+            console.log(data);
+            
+            this.value=this.init_val;
+        })
     },
     watch:{
         current_step:function(){

src/components/Slider/Slider.vue

@@ -34,7 +34,7 @@ export default {
             this.$emit("unchecked", this.checkboxStatus)
           }
         }    
-    }
+    },
 }
 </script>
 <style>

src/components/Tickbox/Tickbox.vue

@@ -5,7 +5,9 @@
 </template>
 
 <script>
-import ToggleAdvanceButton from "./ToggleAdvanceButton.vue"
+import ToggleAdvanceButton from "./ToggleAdvanceButton.vue";
+import {eventBus} from "@/buses/eventBus";
+
 export default {
     name:"iv-toggle-advance",
     components: {"iv-toggle-advance-button": ToggleAdvanceButton},
@@ -42,6 +44,12 @@ export default {
           return false;
         }
       }
+    },
+    mounted(){
+      eventBus.$on("reset-data", data => {
+        console.log(data);
+        this.toggleModeIndex = this.initialModeIndex;
+      });
     }
 }
 </script>

src/components/ToggleAdvance/ToggleAdvance.vue

@@ -20,6 +20,7 @@
   </div>
 </template>
 <script>
+import {eventBus} from "@/buses/eventBus";
 export default {
   name:"iv-toggle-basic",
   props: {
@@ -49,6 +50,13 @@ export default {
       this.toggleValue =! this.toggleValue
       this.$emit('input', !this.toggleValue);
     }
+  },
+
+  mounted(){
+    eventBus.$on("reset-data", data => {
+      console.log(data);
+      this.toggleValue=0;
+    });
   }
 };
 </script>

src/components/ToggleBasic/ToggleBasic.vue

@@ -9,6 +9,7 @@ export {default as DropdownList} from "./DropdownList";
 export {default as ToggleBasic} from "./ToggleBasic";
 export {default as ToggleAdvance} from "./ToggleAdvance";
 export {default as Tickbox} from "./Tickbox";
+
 export {default as SectionTitle} from "./Titles";
 //export {default as Play_Button} from "./Play_Button";
 export {SymbolButton,Button} from "./Button";
@@ -21,5 +22,6 @@ export {default as LegacyWrapper} from './LegacyWrapper';
 export {SectionHeading,SidebarSection,SidebarContent} from './SidebarText';
 export {PageIndicator,PaneNavigator} from './Navigation';
 export {default as Meter} from './Meter';
+export {default as ResetButton} from "./ResetButton";
 // For folders containg multiple exported components write:
 // export {ComponentA,ComponentB} from './ComponentFolder';