WIP update broch

assets/styles.css

@@ -39,10 +39,11 @@ a:hover {
 }
 .hideLemur .lemurInYourFace {
   opacity: 0;
+  visibility: hidden;
   transform: translateZ(200px);
 }
 .lemurInYourFace {
-  transition: 750ms ease;
+  transition: transform 750ms ease, opacity 750ms ease, visibility 800ms ease;
   width: 50%;
   z-index: 1;
   position: relative;
@@ -68,7 +69,7 @@ a:hover {
   transform: translateZ(50px);
 }
 .BackstopJS3 {
-  transition: 750ms ease;
+  transition: transform 750ms ease;
   width: 75%;
 }
 .getItBlock, .supportsBlock {

backstop_data/engine_scripts/setCookies

@@ -0,0 +1,15 @@
+var fs = require('fs'),
+    cookiePath = "backstop_data/cookies.json";
+
+module.exports = function(casper, scenario, vp) {
+  var cookies = [];
+
+  if (fs.exists(cookiePath)) {
+    cookies = JSON.parse(fs.read(cookiePath));
+  }
+
+  casper.page.cookies = cookies;
+  console.log('Cookie state restored with cookies:', JSON.stringify(cookies));
+  casper.echo('setting user agent', 'INFO');
+  casper.userAgent('Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36');
+};

index.html

@@ -19,8 +19,8 @@
           <p class="mascotBlock">
             <a href="https://github.com/garris/BackstopJS" class="lemur-link">
               <img id="theLemur" src="assets/lemurFace.png" class='lemurInYourFace' alt="">
-              <img id="lemurButt" src="assets/lemurButt.png" class='lemurButtInYourFace' alt="">
             </a>
+            <img id="lemurButt" src="assets/lemurButt.png" class='lemurButtInYourFace' alt="">
           </p>
           <p class="logoBlock">
             <img src="assets/BackstopJS3.svg" class='BackstopJS3' alt="BackstopJS 3">
@@ -57,21 +57,56 @@ <h1>Visual regression testing for web apps.</h1>
 </html>
 
 <script type="text/javascript">
-  const CLICK_HANDLE = /click/;
-  if (CLICK_HANDLE.test(window.location.search)) {
-    console.log('CLICK_HANDLE_ready');
-    initClickListener();
+  const READY_LAG_MS = 10000;
+  const READY_TAG = '_the_lemur_is_ready_to_see_you';
+  const LEMUR_CLASS_ACTION = 'hideLemur';
+  const COOKIE_TEST = /cookie/i;
+  const CLICK_TEST = /click/i;
+  const DELAY_TEST = /delay/i;
+
+  if (COOKIE_TEST.test(window.location.search)) {
+    showCookies();
+  }
+  if (CLICK_TEST.test(window.location.search)) {
+    modifyLemurBehavior();
+  }
+  if (DELAY_TEST.test(window.location.search)) {
+    delayLemurification();
   }
 
-  function initClickListener () {
+  function modifyLemurBehavior () {
     document.body.addEventListener('click', evt => {
-      console.log('click', evt);
       if (evt.target.id === 'theLemur') {
-        document.body.classList.add('hideLemur');
+        containTheLemur();
         evt.preventDefault();
       } else {
-        document.body.classList.remove('hideLemur');
+        releaseTheLemur();
       }
     });
+    console.log('lemur behavior is modified');
+  }
+
+  function showCookies () {
+    document.getElementsByClassName('logoBlock')[0].innerText = 'cookies > ' + document.cookie;
+  }
+
+  function setReadyFlags () {
+    console.log(READY_TAG);
+    document.body.classList.add(READY_TAG);
   }
+
+  function releaseTheLemur () {
+    document.body.classList.remove(LEMUR_CLASS_ACTION);
+  }
+
+  function containTheLemur () {
+    document.body.classList.add(LEMUR_CLASS_ACTION);
+  }
+
+  function delayLemurification () {
+    containTheLemur();
+    setTimeout(releaseTheLemur, READY_LAG_MS);
+    setTimeout(setReadyFlags, READY_LAG_MS + 1000);
+  }
+
 </script>