From be4091766e4beac5946043351111fba745fa886a Mon Sep 17 00:00:00 2001
From: Kelly Innes <kinnes@azavea.com>
Date: Thu, 5 Oct 2017 10:53:09 -0400
Subject: [PATCH] Adjust compare view during ITSI screenshots

- add CSS rules for compare view to supplement flexbox -- which isn't
  supported by PhatomJS -- with rules to keep rows horizontal & aligned
---
 src/mmw/js/src/app.js            | 59 ++++++++++++++++++++++++++++++++
 src/mmw/sass/pages/_compare.scss | 21 ++++++++++++
 2 files changed, 80 insertions(+)

diff --git a/src/mmw/js/src/app.js b/src/mmw/js/src/app.js
index d3c20da76..23d1759c0 100644
--- a/src/mmw/js/src/app.js
+++ b/src/mmw/js/src/app.js
@@ -155,6 +155,57 @@ function RestAPI() {
     };
 }
 
+function adjustCompareViewBeforeITSIScreenshot() {
+    toggleCompareViewForITSIScreenshot(true);
+}
+
+function adjustCompareViewAfterITSIScreenshot() {
+    toggleCompareViewForITSIScreenshot(false);
+}
+
+function toggleCompareViewForITSIScreenshot(adjustForScreenshot) {
+    var itsiCompareDialog = 'itsi-compare-dialog',
+        itsiCompareModal = 'itsi-compare-modal',
+        itsiCompareRow = 'itsi-compare-row',
+        compareDialog = '#compare-new-dialog',
+        compareModalContent = '.compare-modal-content',
+        compareCloseButton = '.compare-close',
+        compareChartButton = '#compare-input-button-chart',
+        compareTableButton = '#compare-input-button-table',
+        compareChartRow = '.compare-chart-row',
+        compareTableRow = '.compare-table-row',
+        compareScenariosRow = '.compare-scenarios',
+        compareMapsRow = '.compare-scenario-row-content';
+
+    if (adjustForScreenshot) {
+        $(compareDialog).addClass(itsiCompareDialog);
+        $(compareModalContent).addClass(itsiCompareModal);
+        $(compareCloseButton).hide();
+        $(compareChartButton).hide();
+        $(compareTableButton).hide();
+        $(compareScenariosRow).addClass(itsiCompareRow);
+        $(compareMapsRow).addClass(itsiCompareRow);
+        if ($(compareChartRow).length) {
+            $(compareChartRow).addClass(itsiCompareRow);
+        } else if ($(compareTableRow).length) {
+            $(compareTableRow).addClass(itsiCompareRow);
+        }
+    } else {
+        $(compareDialog).removeClass(itsiCompareDialog);
+        $(compareModalContent).removeClass(itsiCompareModal);
+        $(compareCloseButton).show();
+        $(compareChartButton).show();
+        $(compareTableButton).show();
+        $(compareScenariosRow).removeClass(itsiCompareRow);
+        $(compareMapsRow).removeClass(itsiCompareRow);
+        if ($(compareChartRow)) {
+            $(compareChartRow).removeClass(itsiCompareRow);
+        } else if ($(compareTableRow).length) {
+            $(compareTableRow).removeClass(itsiCompareRow);
+        }
+    }
+}
+
 function initializeShutterbug() {
     var googleTileLayerSelector = '#map > .leaflet-google-layer > div > div > div:nth-child(1) > div:nth-child(1)';
 
@@ -187,6 +238,10 @@ function initializeShutterbug() {
             // '/' then to empty string, which leaves a '#' in the URL.
             document.location.hash = '/';
             document.location.hash = '';
+
+            if ($('#compare-new').length) {
+                adjustCompareViewBeforeITSIScreenshot();
+            }
         })
         .on('shutterbug-asyouwere', function() {
             // Reset after screenshot has been taken
@@ -209,6 +264,10 @@ function initializeShutterbug() {
                     top: '',
                 });
             }
+
+            if ($('#compare-new').length) {
+                adjustCompareViewAfterITSIScreenshot();
+            }
         });
 
     shutterbug.enable('body');
diff --git a/src/mmw/sass/pages/_compare.scss b/src/mmw/sass/pages/_compare.scss
index dec0b2a34..c1a8c484c 100644
--- a/src/mmw/sass/pages/_compare.scss
+++ b/src/mmw/sass/pages/_compare.scss
@@ -656,3 +656,24 @@ $compare-chart-table-height: calc(100vh - #{$height-lg} - #{$compare-footer-heig
     }
   }
 }
+
+.itsi-compare-modal {
+  max-width: 100% !important;
+  max-height: 100% !important;
+}
+
+.itsi-compare-row {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-flex-wrap: wrap;
+  flex-wrap: wrap;
+}
+
+.itsi-compare-dialog {
+  margin-left: 3% !important;
+  max-width: 70% !important;
+  max-height: 100% !important;
+  width: 70% !important;
+  height: 100% !important;
+}