Fix stylistic issues with javascript

- Rename ambiguous interval and timeout variables - Rename functions to reduce verbosity - Switch data structure for video dimension to be dictionary instead of list - Remove unnecessary comment
Stanford-Online · May 16, 2017 · 8abbbd6 · 8abbbd6
1 parent 1fbb911
commit 8abbbd6
Showing 1 changed file with 28 additions and 33 deletions.
diff --git a/invideoquiz/public/js/src/invideoquiz.js b/invideoquiz/public/js/src/invideoquiz.js
@@ -11,19 +11,19 @@ function InVideoQuizXBlock(runtime, element) {
     var video;
     var videoState;
 
-    var knownVideoDimensions;
+    var knownDimensions;
 
     // Interval at which to check if video size has changed size
     // and the displayed problems needs to do the same
     var resizeIntervalTime = 100;
 
     // Interval at which to check for problems to display
     // Checking every 0.5 seconds to make sure we check at least once per actual second of video
-    var intervalTime = 500;
+    var displayIntervalTime = 500;
 
     // Timeout to wait before checking for problems again after "play" is clicked
     // Waiting 1.5 seconds to make sure we are moved to the next second and we don't get a double firing
-    var intervalTimeout = 1500;
+    var displayIntervalTimeout = 1500;
 
     $(function () {
         $('#seq_content .vert-mod .vert').each(function () {
@@ -37,7 +37,7 @@ function InVideoQuizXBlock(runtime, element) {
         });
 
         if (studentMode) {
-          knownVideoDimensions = getVideoDimensions();
+          knownDimensions = getDimensions();
           bindVideoEvents();
         }
     });
@@ -57,20 +57,23 @@ function InVideoQuizXBlock(runtime, element) {
         }
     }
 
-    function getVideoDimensions() {
-        videoPosition = $('.tc-wrapper', video).position().top;
-        videoHeight = $('.tc-wrapper', video).css('height');
-        videoWidth = $('.tc-wrapper', video).css('width');
-        return [videoPosition, videoHeight, videoWidth];
+    function getDimensions() {
+        var position = $('.tc-wrapper', video).position().top;
+        var height = $('.tc-wrapper', video).css('height');
+        var width = $('.tc-wrapper', video).css('width');
+        return {
+          'top': position,
+          'height': height,
+          'width': width
+        };
     }
 
-    function videoDimensionsDiffer(newMeasurement, oldMeasurement) {
-        if (newMeasurement.length !== oldMeasurement.length) {
-            return true;
-        }
-        for (var i = 0; i < oldMeasurement.length; i++) {
-            if (oldMeasurement[i] !== newMeasurement[i]) {
-                return true;
+    function dimensionsHaveChanged(newDimensions) {
+        for (var key in knownDimensions) {
+            if (newDimensions.hasOwnProperty(key)) {
+                if (knownDimensions[key] !== newDimensions[key]) {
+                    return true;
+                }
             }
         }
         return false;
@@ -88,12 +91,8 @@ function InVideoQuizXBlock(runtime, element) {
         });
     }
 
-    function resizeInVideoProblem(currentProblem, videoDimensions) {
-        currentProblem.css({
-            top: videoDimensions[0],
-            height: videoDimensions[1],
-            width: videoDimensions[2]
-        });
+    function resizeInVideoProblem(currentProblem, dimensions) {
+        currentProblem.css(dimensions);
     }
 
     // Bind In Video Quiz display to video time, as well as play and pause buttons
@@ -109,7 +108,7 @@ function InVideoQuizXBlock(runtime, element) {
           if (problemToDisplay) {
             window.setTimeout(function () {
               canDisplayProblem = true;
-            }, intervalTimeout);
+            }, displayIntervalTimeout);
             problemToDisplay.hide();
             problemToDisplay = null;
           }
@@ -124,28 +123,24 @@ function InVideoQuizXBlock(runtime, element) {
                 if (isProblemToDisplay) {
                   problemToDisplay = $('.xblock-student_view', this)
                   videoState.videoPlayer.pause();
-                  resizeInVideoProblem(problemToDisplay, getVideoDimensions());
+                  resizeInVideoProblem(problemToDisplay, getDimensions());
                   problemToDisplay.show();
                   problemToDisplay.css({display: 'block'});
                   canDisplayProblem = false;
                 }
               });
             }
-          }, intervalTime);
+          }, displayIntervalTime);
         });
 
         video.on('pause', function () {
           clearInterval(intervalObject);
           if (problemToDisplay) {
             resizeIntervalObject = setInterval(function () {
-
-              // check if the size has changed from the previous state; if so, update
-              // both our known size measurements and the size of the problem
-              currentVideoDimensions = getVideoDimensions();
-
-              if (videoDimensionsDiffer(currentVideoDimensions, knownVideoDimensions)) {
-                    resizeInVideoProblem(problemToDisplay, currentVideoDimensions);
-                    knownVideoDimensions = currentVideoDimensions;
+              var currentDimensions = getDimensions();
+              if (dimensionsHaveChanged(currentDimensions)) {
+                    resizeInVideoProblem(problemToDisplay, currentDimensions);
+                    knownDimensions = currentDimensions;
               }
             }, resizeIntervalTime);
             $('.in-video-continue', problemToDisplay).on('click', function () {