1.0.3, improved zoom

Author: gridwalk

example/codeKeyframes.css

@@ -12,6 +12,7 @@ function CodeKeyframes(args){
   this.skipLength   = 1
   this.zoom         = 30
   this.nudging      = false
+  this.nudgeMult    = 1
 
   this.sequence         = []
   this.sequenceCursor   = 0
@@ -97,7 +98,9 @@ function CodeKeyframes(args){
     this._code.value = JSON.stringify(keyframes)
   }
 
-  this._editor.onkeydown = (e) =>{
+
+
+  document.addEventListener('keydown', (e) => {
 
     console.log(e.which)
 
@@ -127,12 +130,14 @@ function CodeKeyframes(args){
       // up
       38:()=>{ 
         this.zoom += 0.5
+        this.nudgeMult = this.nudgeMult * .985
         this.wavesurfer.zoom(this.zoom)
       },
 
       // down
       40:()=>{ 
         this.zoom -= 0.5
+        this.nudgeMult = this.nudgeMult * 1.025
         this.wavesurfer.zoom(this.zoom)
       },
 
@@ -169,9 +174,6 @@ function CodeKeyframes(args){
 
       // space
       32:()=>{
-
-        console.log("PLAYPAUSE")
-
         this.wavesurfer.playPause()
         this._code.classList.remove('error')
       },
@@ -217,9 +219,9 @@ function CodeKeyframes(args){
       keycodes[e.which]()
     }
 
-  }
+  })
 
-  this._editor.onkeyup = (e) =>{
+  document.addEventListener('keyup', (e) =>{
 
     var keycodes = {
       // shift
@@ -236,7 +238,7 @@ function CodeKeyframes(args){
     if( keycodes[e.which] ){
       keycodes[e.which]()
     }
-  }
+  })
 
 
   /*
@@ -341,7 +343,11 @@ function CodeKeyframes(args){
   this.nudgeActiveRegion = (direction) => {
 
     region = this.activeRegion
-    nudgeAmount = (direction == 'left') ? -.1 : .1
+
+    nudgeAmount = .1 * this.nudgeMult
+    if( direction == 'left' ) nudgeAmount = nudgeAmount * -1
+
+    // nudgeAmount = (direction == 'left') ? -.1 : .1
 
     this.activeRegion = this.wavesurfer.addRegion({
       start:  region.start + nudgeAmount,

example/codeKeyframes.js

@@ -52,8 +52,10 @@
   }
 
   region.wavesurfer-region{
-    background-color: #fff!important;
+    background-color: transparent!important;
+    border-left:2px solid #fff;
     cursor: pointer;
+
     &:after{
       content:'';
       display: block;
@@ -70,7 +72,7 @@
     }
 
     &.active{
-      background-color: violet!important;
+      border-left:2px solid violet;
       &:after{
         border-color: transparent transparent transparent violet;
       }