Adding snapping logic to ruler dragging (similar to playhead movement). Also fixing a few Codacy issues.

Author: jonoomph

src/timeline/js/directives/playhead.js

@@ -39,28 +39,26 @@ App.directive("tlPlayhead", function () {
 
       element.on("mousedown", function (e) {
         // Set bounding box for the playhead
-        bounding_box = {};
         setBoundingBox(scope, $(this), true);
       });
 
       // Move playhead to new position (if it's not currently being animated)
       element.on("mousemove", function (e) {
         if (e.which === 1 && !scope.playhead_animating) { // left button
           // Calculate the playhead bounding box movement and apply snapping rules
-          var cursor_position = e.pageX - $("#ruler").offset().left;
-          var results = moveBoundingBox(scope, bounding_box.left, bounding_box.top,
+          let cursor_position = e.pageX - $("#ruler").offset().left;
+          let results = moveBoundingBox(scope, bounding_box.left, bounding_box.top,
             cursor_position - bounding_box.left, cursor_position - bounding_box.top,
             cursor_position, cursor_position, true);
 
           // Only apply snapping when SHIFT is pressed
+          let new_position = cursor_position;
           if (e.shiftKey) {
             new_position = results.position.left;
-          } else {
-            new_position = cursor_position;
           }
 
           // Move playhead
-          var playhead_seconds = new_position / scope.pixelsPerSecond;
+          let playhead_seconds = new_position / scope.pixelsPerSecond;
           scope.movePlayhead(playhead_seconds);
           scope.previewFrame(playhead_seconds);
         }

src/timeline/js/directives/ruler.js

@@ -111,7 +111,6 @@ App.directive("tlBody", function () {
         }
       });
 
-
     }
   };
 });
@@ -146,11 +145,28 @@ App.directive("tlRuler", function ($timeout) {
 
       });
 
+      element.on("mousedown", function (e) {
+        // Set bounding box for the playhead position
+        setBoundingBox(scope, $(this), true);
+      });
+
       // Move playhead to new position (if it's not currently being animated)
       element.on("mousemove", function (e) {
         if (e.which === 1 && !scope.playhead_animating) { // left button
-          var playhead_seconds = (e.pageX - element.offset().left) / scope.pixelsPerSecond;
-          // Update playhead
+          // Calculate the playhead bounding box movement and apply snapping rules
+          let cursor_position = e.pageX - $("#ruler").offset().left;
+          let results = moveBoundingBox(scope, bounding_box.left, bounding_box.top,
+            cursor_position - bounding_box.left, cursor_position - bounding_box.top,
+            cursor_position, cursor_position, true);
+
+          // Only apply snapping when SHIFT is pressed
+          let new_position = cursor_position;
+          if (e.shiftKey) {
+            new_position = results.position.left;
+          }
+
+          // Move playhead
+          let playhead_seconds = new_position / scope.pixelsPerSecond;
           scope.movePlayhead(playhead_seconds);
           scope.previewFrame(playhead_seconds);
         }

src/timeline/media/css/main.css

@@ -63,7 +63,7 @@ img {
 .track { height: 62px; background-color: #000; margin-bottom: 8px; background: -webkit-gradient(linear, left bottom, left top, color-stop(0%,rgba(50,50,50,1)), color-stop(100%,rgba(6,6,6,1))); border-top: 1px solid #4b92ad; border-bottom: 1px solid #4b92ad; border-right: 1px solid #4B92AD; border-top-right-radius: 8px; border-bottom-right-radius: 8px; box-shadow: 0px 0px 10px #000; }
 
 /* Playhead */
-.playhead-line { z-index: 9999; position: absolute; height:316px; top:0px; width:1px; background-color:#ff0024; opacity:1;}
+.playhead-line { z-index: 9999; position: absolute; height: 316px; top: 0; width: 1px; background-color: #ff0024; opacity: 1; }
 .playhead-line-small { z-index: 9999; position: absolute; height:20px; top:32px;; margin-left: 12px; width:1px; background-color:#ff0024; opacity:1;}
 .playhead-top { cursor:move; z-index: 9999; position: absolute; margin-left: -12px; margin-top: 12px; width:25px; height:32px; background-image: url(../images/play_head.png); opacity:1;}
 .marker {position:absolute; top:30px;}