Scroll screenshots

.gitignore

@@ -1 +1,2 @@
-.DS_Store
+.DS_Store
+web-server.js

css/app.css

@@ -18,7 +18,7 @@ h1 {margin: 0;font-size: 1.5em;line-height: 42px;}
 .pathList { border-right:1px solid rgb(220, 220, 224);position: fixed; top: 80px; bottom: 0; overflow: auto; z-index: 3;}
 .envImages { position: fixed; top: 80px; bottom: 0; overflow: auto; left: 16.666%; z-index: 2;border-right: 1px solid rgb(220, 220, 224);}
 .pathList a, .envImages a{text-align: center;display: block; border: 1px solid #ccc;max-height: 300px;overflow: hidden;}
-.pathList img, .envImages img{}
+.pathList img, .envImages img{position: relative;}
 .diff-header {height: 37px;line-height: 35px;position: fixed;top: 43px;z-index: 5;width: 100%;background-color: rgb(229, 229, 235);}
 .diff-header ul {margin: 0;padding: 0;margin-left: 2%}
 .diff-header input {width: 95%;padding: 3px}

index.html

@@ -62,14 +62,14 @@
         <div class="env-iamge-block">
           <label>{{currentViff.envs[0].name}}</label>
           <a ng-href="{{currentViff.envs[0].path | imagePath }}">
-            <img src="img/loader.gif" data-loading-src="img/loader.gif" data-src="{{currentViff.envs[0].path | imagePath}}"/>
+            <img src="img/loader.gif" data-loading-src="img/loader.gif" data-src="{{currentViff.envs[0].path | imagePath}}" scroll-to-map-position/>
           </a>
         </div>
 
         <div class="env-iamge-block">
           <label>{{currentViff.envs[1].name}}</label>
           <a ng-href="{{currentViff.envs[1].path | imagePath }}">
-            <img src="img/loader.gif" data-loading-src="img/loader.gif" data-src="{{currentViff.envs[1].path | imagePath }}"/>
+            <img src="img/loader.gif" data-loading-src="img/loader.gif" data-src="{{currentViff.envs[1].path | imagePath }}" scroll-to-map-position/>
           </a>
         </div>
       </div>
@@ -78,6 +78,8 @@
         <a ng-href="{{currentViff.diffPath | imagePath }}">
           <img src="img/loader.gif" data-loading-src="img/loader.gif" data-src="{{currentViff.diffPath | imagePath }}"/>
         </a>
+        <div class="blank">
+        </div>
       </div>
 
       <div class="pure-u-1-2 diff-actions">
@@ -94,6 +96,7 @@
   <script type="text/javascript" src="js/angular.modules.js"></script>
   <script type="text/javascript" src="js/controllers.js"></script>
   <script type="text/javascript" src="js/services.js"></script>
+  <script type="text/javascript" src="js/directives.js"></script>
   <script type="text/javascript" src="js/filters.js"></script>
   <script type="text/javascript" src="js/app.js"></script>
 

js/directives.js

@@ -0,0 +1,50 @@
+angular.module('viffReport')
+  .directive('scrollToMapPosition', function ($window) {
+    return function (scope, element, attributes) {
+      var diffImageHeight, envImage, envImageHeightDiff;
+      var diffVisualHeight = $(window).height() - (43 + 35 + 60);
+      var originalSrc = element[0].src;
+
+      angular.element($window).bind("scroll", function () {
+        if (originalSrc !== element[0].src) {
+          envImage = {
+            height: element[0].height,
+            parentHeight: element[0].parentElement.clientHeight
+          };
+          diffImageHeight = $(".diffImage img").get(0).height;
+          envImageHeightDiff = envImage.height - envImage.parentHeight;
+        }
+
+        if (!envImage) {
+          return;
+        }
+
+        setBlankHeight(envImage);
+        var offsetY = $(document).scrollTop();
+        var offsetValue = parseInt(offsetY / diffImageHeight * envImage.height);
+
+        if (envImageHeightDiff < offsetValue) {
+          setElementTop(0 - envImageHeightDiff);
+        } else {
+          setElementTop(0 - offsetValue);
+        }
+
+        scope.$apply();
+      });
+
+      function setElementTop(imagePosition) {
+        if (typeof imagePosition === 'number') {
+          element[0].style.top = imagePosition + 'px';
+        } else {
+          element[0].style.top = imagePosition;
+        }
+      }
+
+      function setBlankHeight(envImage) {
+        var blankHeight = diffVisualHeight - (envImage.parentHeight * diffImageHeight / envImage.height);
+        if ($(".blank").height() < blankHeight) {
+          $(".blank").height(blankHeight);
+        }
+      }
+    }
+  });

js/filters.js

@@ -1,28 +1,28 @@
 angular.module('viffReport')
   .filter('imagePath', function () {
-    return function(input){
-		return encodeURIComponent(input);
-	}
-  }).filter('browserFilter', function (){
-	return function(input){
-		return "(" + input[0].toUpperCase() + ")" + input.slice(1);
-	}
-}).filter('showCases', function(){
-    return function(cases, showAll){
-        var arrayToReturn = []; 
-        if(showAll){
-        	angular.forEach(cases, function(item){
-				if (item.misMatchPercentage >= 0) {
-                	arrayToReturn.push(item);
-            	}
-        	});
-        }else{
-	       	angular.forEach(cases, function(item){
-				if (item.misMatchPercentage > 0) {
-                	arrayToReturn.push(item);
-            	}
-        	});
-        }
-        return arrayToReturn;
+    return function (input) {
+      return encodeURIComponent(input);
+    }
+  }).filter('browserFilter', function () {
+    return function (input) {
+      return "(" + input[0].toUpperCase() + ")" + input.slice(1);
+    }
+  }).filter('showCases', function () {
+    return function (cases, showAll) {
+      var arrayToReturn = [];
+      if (showAll) {
+        angular.forEach(cases, function (item) {
+          if (item.misMatchPercentage >= 0) {
+            arrayToReturn.push(item);
+          }
+        });
+      } else {
+        angular.forEach(cases, function (item) {
+          if (item.misMatchPercentage > 0) {
+            arrayToReturn.push(item);
+          }
+        });
+      }
+      return arrayToReturn;
     };
-});;
+  });;

report.json

@@ -1 +1,50 @@
-{"compares":{"firefox":{"RCA home":{"images":{"firefox-build":"screenshots/firefox/RCA%20home/firefox-build.png","firefox-prod":"screenshots/firefox/RCA%20home/firefox-prod.png","diff":"screenshots/firefox/RCA%20home/diff.png"},"isSameDimensions":false,"misMatchPercentage":97.12,"analysisTime":1998},"RCA header":{"images":{"firefox-build":"screenshots/firefox/RCA%20header/firefox-build.png","firefox-prod":"screenshots/firefox/RCA%20header/firefox-prod.png","diff":"screenshots/firefox/RCA%20header/diff.png"},"isSameDimensions":true,"misMatchPercentage":4.66,"analysisTime":50},"RCA footer":{"images":{"firefox-build":"screenshots/firefox/RCA%20footer/firefox-build.png","firefox-prod":"screenshots/firefox/RCA%20footer/firefox-prod.png","diff":"screenshots/firefox/RCA%20footer/diff.png"},"isSameDimensions":true,"misMatchPercentage":0,"analysisTime":32}}},"caseCount":3,"sameCount":1,"diffCount":2,"totalAnalysisTime":2080}
+{
+  "compares": {
+    "firefox": {
+      "RCA home": {
+        "images": {
+          "firefox-build": "screenshots/firefox/RCA%20home/firefox-build.png",
+          "firefox-prod": "screenshots/firefox/RCA%20home/firefox-prod.png",
+          "diff": "screenshots/firefox/RCA%20home/diff.png"
+        },
+        "isSameDimensions": false,
+        "misMatchPercentage": 97.12,
+        "analysisTime": 1998
+      },
+      "RCA header": {
+        "images": {
+          "firefox-build": "screenshots/firefox/RCA%20header/firefox-build.png",
+          "firefox-prod": "screenshots/firefox/RCA%20header/firefox-prod.png",
+          "diff": "screenshots/firefox/RCA%20header/diff.png"
+        },
+        "isSameDimensions": true,
+        "misMatchPercentage": 4.66,
+        "analysisTime": 50
+      },
+      "RCA footer": {
+        "images": {
+          "firefox-build": "screenshots/firefox/RCA%20footer/firefox-build.png",
+          "firefox-prod": "screenshots/firefox/RCA%20footer/firefox-prod.png",
+          "diff": "screenshots/firefox/RCA%20footer/diff.png"
+        },
+        "isSameDimensions": true,
+        "misMatchPercentage": 0,
+        "analysisTime": 32
+      },
+      "Suncorp": {
+        "images": {
+          "firefox-build": "screenshots/firefox/Suncorp/firefox-build.png",
+          "firefox-prod": "screenshots/firefox/Suncorp/firefox-prod.png",
+          "diff": "screenshots/firefox/Suncorp/diff.png"
+        },
+        "isSameDimensions": true,
+        "misMatchPercentage": 90,
+        "analysisTime": 32
+      }
+    }
+  },
+  "caseCount": 4,
+  "sameCount": 1,
+  "diffCount": 3,
+  "totalAnalysisTime": 2080
+}