Add ZenMode javascript specs

2 files changed, 18 insertions, 4 deletions

diff --git a/app/assets/javascripts/zen_mode.js.coffee b/app/assets/javascripts/zen_mode.js.coffee
index dc6a84c6c52..8a0564a9098 100644
--- a/app/assets/javascripts/zen_mode.js.coffee
+++ b/app/assets/javascripts/zen_mode.js.coffee
@@ -1,3 +1,7 @@
+#= require dropzone
+#= require mousetrap
+#= require mousetrap/pause
+
 class @ZenMode
   constructor: ->
     @active_zen_area = null
@@ -26,7 +30,7 @@ class @ZenMode
         @exitZenMode()
 
     $(document).on 'keydown', (e) =>
-      if e.keyCode is $.ui.keyCode.ESCAPE
+      if e.keyCode is 27 # Esc
         @exitZenMode()
         e.preventDefault()
 
@@ -42,7 +46,9 @@ class @ZenMode
       @active_checkbox.prop('checked', false)
       @active_zen_area = null
       @active_checkbox = null
-      window.location.hash = ''
-      window.scrollTo(window.pageXOffset, @scroll_position)
+      @restoreScroll(@scroll_position)
       # Enable dropzone when leaving ZEN mode
       Dropzone.forElement('.div-dropzone').enable()
+
+  restoreScroll: (y) ->
+    window.scrollTo(window.pageXOffset, y)
diff --git a/app/assets/stylesheets/generic/zen.scss b/app/assets/stylesheets/generic/zen.scss
index 26afc21a6ab..bcb8bbe3134 100644
--- a/app/assets/stylesheets/generic/zen.scss
+++ b/app/assets/stylesheets/generic/zen.scss
@@ -1,7 +1,7 @@
 .zennable {
   position: relative;
 
-  input {
+  .zen-toggle-comment {
     display: none;
   }
 
@@ -26,10 +26,12 @@
     }
   }
 
+  // Hide the Enter link when we're in Zen mode
   input:checked ~ .zen-backdrop .zen-enter-link {
     display: none;
   }
 
+  // Show the Leave link when we're in Zen mode
   input:checked ~ .zen-backdrop .zen-leave-link {
     display: block;
     position: absolute;
@@ -62,6 +64,9 @@
     }
   }
 
+  // Make the placeholder text in the standard textarea the same color as the
+  // background, effectively hiding it
+
   .zen-backdrop textarea::-webkit-input-placeholder {
     color: white;
   }
@@ -78,6 +83,9 @@
     color: white;
   }
 
+  // Make the color of the placeholder text in the Zenned-out textarea darker,
+  // so it becomes visible
+
   input:checked ~ .zen-backdrop textarea::-webkit-input-placeholder {
     color: #999;
   }