Refactor ZenMode

- No longer depends on the "hidden checkbox".
- No longer depends on manually storing/restoring the scroll position.
  Instead, we take advantage of jquery.scrollTo.
- Event-based.
- Simplifies the state-based styling.

2 files changed, 14 insertions, 21 deletions

diff --git a/spec/javascripts/fixtures/zen_mode.html.haml b/spec/javascripts/fixtures/zen_mode.html.haml
index e867e4de2b9..1701652c61e 100644
--- a/spec/javascripts/fixtures/zen_mode.html.haml
+++ b/spec/javascripts/fixtures/zen_mode.html.haml
@@ -1,9 +1,8 @@
 .zennable
-  %input#zen-toggle-comment.zen-toggle-comment{ tabindex: '-1', type: 'checkbox' }
   .zen-backdrop
-    %textarea#note_note.js-gfm-input.markdown-area{placeholder: 'Leave a comment'}
-    %a.zen-enter-link{tabindex: '-1'}
+    %textarea#note_note.js-gfm-input.markdown-area
+    %a.js-zen-enter(tabindex="-1" href="#")
       %i.fa.fa-expand
-        Edit in fullscreen
-    %a.zen-leave-link
+      Edit in fullscreen
+    %a.js-zen-leave(tabindex="-1" href="#")
       %i.fa.fa-compress
diff --git a/spec/javascripts/zen_mode_spec.js.coffee b/spec/javascripts/zen_mode_spec.js.coffee
index 4cb3836755f..b790fce01ed 100644
--- a/spec/javascripts/zen_mode_spec.js.coffee
+++ b/spec/javascripts/zen_mode_spec.js.coffee
@@ -15,14 +15,6 @@ describe 'ZenMode', ->
     # Set this manually because we can't actually scroll the window
     @zen.scroll_position = 456
 
-  # Ohmmmmmmm
-  enterZen = ->
-    $('.zen-toggle-comment').prop('checked', true).trigger('change')
-
-  # Wh- what was that?!
-  exitZen = ->
-    $('.zen-toggle-comment').prop('checked', false).trigger('change')
-
   describe 'on enter', ->
     it 'pauses Mousetrap', ->
       spyOn(Mousetrap, 'pause')
@@ -35,16 +27,14 @@ describe 'ZenMode', ->
       expect('textarea').not.toHaveAttr('style')
 
   describe 'in use', ->
-    beforeEach ->
-      enterZen()
+    beforeEach -> enterZen()
 
     it 'exits on Escape', ->
-      $(document).trigger(jQuery.Event('keydown', {keyCode: 27}))
-      expect($('.zen-toggle-comment').prop('checked')).toBe(false)
+      escapeKeydown()
+      expect($('.zen-backdrop')).not.toHaveClass('fullscreen')
 
   describe 'on exit', ->
-    beforeEach ->
-      enterZen()
+    beforeEach -> enterZen()
 
     it 'unpauses Mousetrap', ->
       spyOn(Mousetrap, 'unpause')
@@ -52,6 +42,10 @@ describe 'ZenMode', ->
       expect(Mousetrap.unpause).toHaveBeenCalled()
 
     it 'restores the scroll position', ->
-      spyOn(@zen, 'restoreScroll')
+      spyOn(@zen, 'scrollTo')
       exitZen()
-      expect(@zen.restoreScroll).toHaveBeenCalledWith(456)
+      expect(@zen.scrollTo).toHaveBeenCalled()
+
+enterZen      = -> $('a.js-zen-enter').click() # Ohmmmmmmm
+exitZen       = -> $('a.js-zen-leave').click()
+escapeKeydown = -> $('textarea').trigger($.Event('keydown', {keyCode: 27}))