Add preview state for screenshots, and accompanying styles. Clean up …

…screenshot sass.
andrewtoups · Aug 26, 2021 · 54b6f4d · 54b6f4d
1 parent 9202983
commit 54b6f4d
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 37 deletions.
diff --git a/scripts/components/pager/pager.js b/scripts/components/pager/pager.js
@@ -111,6 +111,7 @@ define([
         self.screenshotMode = ko.observable(false);
         self.placementsMode = ko.observable(true);
         self.printMode = ko.observable(false);
+        self.previewMode = ko.observable(false);
 
         self.screenshot = ko.observable();
         self.screenshotPlacements = ko.observable();        
@@ -138,6 +139,7 @@ define([
                         if (key === "screenshot")    self.screenshotMode(value === 'true');
                         if (key === "placements")    self.placementsMode(value === 'true');
                         if (key === "print")         self.printMode(value === 'true');
+                        if (key === "preview")       self.previewMode(value === 'true');
                         if (key.includes("Element")) metaKey = key.replace("Element", "");
                         if (key.includes("Sign"))    metaKey = key.replace("Sign", "");
                         if (typeof birthChart[metaKey] === "undefined") birthChart[metaKey] = {sign: "", element: ""};

diff --git a/scripts/components/poem/poem.html b/scripts/components/poem/poem.html
@@ -1,4 +1,4 @@
-<article data-bind="visible: poemData(), event: {keydown: keyDown}, css: {print: vm.printMode()}" tabindex="1" id="poem" class="moon">
+<article data-bind="visible: poemData(), event: {keydown: keyDown}" tabindex="1" id="poem" class="moon">
     <div class="debug-bday" data-bind="visible: showDebug, if: birthData">
         <div data-bind="text: birthDay"></div>
         <div data-bind="text: location"></div>

diff --git a/scripts/utils/api.js b/scripts/utils/api.js
@@ -48,6 +48,7 @@ define([], () => {
     const printPreview = params => {
         const modes = {
             print: true,
+            preview: true
         };
         const paramObj = getChartParams(params, modes);
         const paramStr = new URLSearchParams(paramObj).toString();

diff --git a/scripts/utils/paypal.js b/scripts/utils/paypal.js
@@ -87,7 +87,7 @@ define(['api'], api => {
 
         saveOrderData: (params) => {
             const modes = {
-                print: true,
+                print: true
             };
             let paramObj = api.getChartParams(params.natalChart, modes);
             params.chartParams = new URLSearchParams(paramObj).toString();

diff --git a/styles/components/_viewPoem.scss b/styles/components/_viewPoem.scss
@@ -37,39 +37,6 @@
                 opacity: .25;
             }
         }
-        &.print {
-            transform: scale(2.4);
-            .image-region { transform: scale(0.6) };
-            .image-region > div { transform: scale(1.6) };
-            &:before, &:after { content: none; }
-            .icon {opacity: .45; }
-            .watermark-container { display: none; }
-            form.active legend { right: 25px; bottom: 8px; }
-            .image-region > div { top: -13px; }
-            form {
-                padding: 1.5rem 1rem;
-                font-size: 114%;
-                color: rgb(55,55,55);
-            }
-            .signature {
-                position: fixed;
-                &.chris {
-                    left: 20.2rem; bottom: 5.2rem;
-                    width: 7rem;
-                    opacity: .6;
-                }
-                &.dylan {
-                    left: 14.7rem; bottom: 5rem;
-                    width: 5rem;
-                    opacity: .6;
-                }
-                &.toups {
-                    left: 11rem; bottom: 5rem;
-                    width: 3.4rem;
-                    opacity: 0.4;
-                }
-            }
-        }
         .image-region > div {
             position: relative;
         }
@@ -85,9 +52,48 @@
             }
         }
     }
-
     nav { display: none; }
 }
+#screenshot .print {
+    #poem.moon {
+        transform: scale(2.4);
+        &:before, &:after { content: none; }        
+    }
+    &.preview #poem.moon {
+        transform: scale(1.2);
+    }
+    .image-region { transform: scale(0.6); }
+    .image-region > div {
+        transform: scale(1.6);
+        top: -13px;
+    }
+    .icon {opacity: .45; }
+    .watermark-container { display: none; }
+    form.active legend { right: 25px; bottom: 8px; }
+    form {
+        padding: 1.5rem 1rem;
+        font-size: 114%;
+        color: rgb(55,55,55);
+    }
+    .signature {
+        position: fixed;
+        &.chris {
+            left: 20.2rem; bottom: 5.2rem;
+            width: 7rem;
+            opacity: .6;
+        }
+        &.dylan {
+            left: 14.7rem; bottom: 5rem;
+            width: 5rem;
+            opacity: .6;
+        }
+        &.toups {
+            left: 11rem; bottom: 5rem;
+            width: 3.4rem;
+            opacity: 0.4;
+        }
+    }
+}
 #screenshot .print .image-region {
     &.plant-layout {
         .icon.primary {

diff --git a/viewPoem/index.html b/viewPoem/index.html
@@ -14,7 +14,7 @@
     <link rel="stylesheet" href="../styles/viewPoem.css" type="text/css">
 </head>
 <body>
-    <main data-bind="css: {screenshot: screenshotMode, 'icons-ready': iconsReady()}">
+    <main data-bind="css: {screenshot: screenshotMode, 'icons-ready': iconsReady(), print: vm.printMode(), preview: vm.previewMode()}">
         <!-- ko foreach: pages -->
         <section data-bind="page: $data"></section>
         <!-- /ko -->