Mouse scroll activated

MyEtherWallet · Aug 9, 2018 · 5ce0d7b · 5ce0d7b · mew-bot · Aug 9, 2018
1 parent 86c1554
commit 5ce0d7b
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 13 deletions.
diff --git a/src/layouts/CreateWalletWarningLayout/CreateWalletWarningLayout.scss b/src/layouts/CreateWalletWarningLayout/CreateWalletWarningLayout.scss
@@ -17,17 +17,27 @@
 
   .cww {
     position: absolute;
-    bottom: -1000px;
-    transition: all 0.3s ease;
+    transition: all 0.5s ease;
+    bottom: 0;
   }
 
   .active {
-    bottom: 0;
+
+  }
+
+  .positionTop {
+    bottom: 1000px;
   }
+
+  .positionBottom {
+    bottom: -1000px;
+  }
+
+
 }
 
 .create-wallet-warnings__footer-container {
-  pointer-events: none;
+  //pointer-events: none;
   background-color: $about-mew-spaceman-background-color;
   z-index: 9999;
   width: 100%;

diff --git a/src/layouts/CreateWalletWarningLayout/CreateWalletWarningLayout.vue b/src/layouts/CreateWalletWarningLayout/CreateWalletWarningLayout.vue
@@ -2,11 +2,11 @@
   <div class="create-wallet-warnings">
 
     <div class="wrap">
-      <what-is-mew :progressBarValue="'__20percent'"            class="cww cww-1 active" ref="cww-1" />
-      <where-my-funds-stored :progressBarValue="'__40percent'"  class="cww cww-2" ref="cww-2" />
-      <what-if-i-lose-key :progressBarValue="'__60percent'"     class="cww cww-3" ref="cww-3" />
-      <some-helpful-tips :progressBarValue="'__80percent'"      class="cww cww-4" ref="cww-4" />
-      <congratulations :progressBarValue="'__100percent'"       class="cww cww-5" ref="cww-5" />
+      <what-is-mew            :progressBarValue="'__20percent'"   class="cww cww1"                        ref="cww1" />
+      <where-my-funds-stored  :progressBarValue="'__40percent'"   class="cww cww2 positionBottom"         ref="cww2" />
+      <what-if-i-lose-key     :progressBarValue="'__60percent'"   class="cww cww3 positionBottom"         ref="cww3" />
+      <some-helpful-tips      :progressBarValue="'__80percent'"   class="cww cww4 positionBottom"         ref="cww4" />
+      <congratulations        :progressBarValue="'__100percent'"  class="cww cww5 positionBottom"         ref="cww5" />
 
       <div class="create-wallet-warnings__footer-container">
         <div class="create-wallet-warnings__mouse-scroll">
@@ -18,7 +18,6 @@
             <router-link to="/">Home</router-link>
             <router-link to="/">Privacy</router-link>
             <router-link to="/">Terms</router-link>
-            <a href="" v-on:click.prevent="mouseScrollDown">AAA</a>
           </div>
           <div class="create-wallet-warnings__copyright">
             <p>© 2018 MyEtherWallet. All rights reserved.</p>
@@ -45,18 +44,47 @@ export default {
     'what-if-i-lose-key': WhatIfILoseMyKeysOrPassword,
     'some-helpful-tips': SomeHelpfulTips,
     'congratulations': Congratulations
-
   },
   data () {
     return {
       cwwCount: this.$refs.length,
-      cwwCurrent: 0
+      cwwCurrent: 0,
+      cwwRefs: [
+        'cww1',
+        'cww2',
+        'cww3',
+        'cww4',
+        'cww5'
+      ]
     }
   },
   methods: {
     mouseScrollDown: function () {
-      console.log(this.$refs)
+      if (this.cwwCurrent < this.cwwRefs.length - 1) {
+        this.cwwCurrent++
+        this.$refs[this.cwwRefs[this.cwwCurrent - 1]].$el.classList.add('positionTop')
+        this.$refs[this.cwwRefs[this.cwwCurrent]].$el.classList.remove('positionBottom')
+      }
+    },
+    mouseScrollUp: function () {
+      if (this.cwwCurrent > 0) {
+        this.cwwCurrent--
+        this.$refs[this.cwwRefs[this.cwwCurrent + 1]].$el.classList.add('positionBottom')
+        this.$refs[this.cwwRefs[this.cwwCurrent]].$el.classList.remove('positionTop')
+      }
     }
+  },
+  mounted: function () {
+    var _this = this
+
+    window.addEventListener('wheel', function (e) {
+      if (e.deltaY < 0) {
+        _this.mouseScrollUp()
+      }
+      if (e.deltaY > 0) {
+        _this.mouseScrollDown()
+      }
+    })
   }
 }
 </script>