Commit f76a3f3d authored by Robert Speicher's avatar Robert Speicher

Add ZenMode javascript specs

parent 79aac2c1
#= require dropzone
#= require mousetrap
#= require mousetrap/pause
class @ZenMode class @ZenMode
constructor: -> constructor: ->
@active_zen_area = null @active_zen_area = null
...@@ -26,7 +30,7 @@ class @ZenMode ...@@ -26,7 +30,7 @@ class @ZenMode
@exitZenMode() @exitZenMode()
$(document).on 'keydown', (e) => $(document).on 'keydown', (e) =>
if e.keyCode is $.ui.keyCode.ESCAPE if e.keyCode is 27 # Esc
@exitZenMode() @exitZenMode()
e.preventDefault() e.preventDefault()
...@@ -42,7 +46,9 @@ class @ZenMode ...@@ -42,7 +46,9 @@ class @ZenMode
@active_checkbox.prop('checked', false) @active_checkbox.prop('checked', false)
@active_zen_area = null @active_zen_area = null
@active_checkbox = null @active_checkbox = null
window.location.hash = '' @restoreScroll(@scroll_position)
window.scrollTo(window.pageXOffset, @scroll_position)
# Enable dropzone when leaving ZEN mode # Enable dropzone when leaving ZEN mode
Dropzone.forElement('.div-dropzone').enable() Dropzone.forElement('.div-dropzone').enable()
restoreScroll: (y) ->
window.scrollTo(window.pageXOffset, y)
.zennable { .zennable {
position: relative; position: relative;
input { .zen-toggle-comment {
display: none; display: none;
} }
...@@ -26,10 +26,12 @@ ...@@ -26,10 +26,12 @@
} }
} }
// Hide the Enter link when we're in Zen mode
input:checked ~ .zen-backdrop .zen-enter-link { input:checked ~ .zen-backdrop .zen-enter-link {
display: none; display: none;
} }
// Show the Leave link when we're in Zen mode
input:checked ~ .zen-backdrop .zen-leave-link { input:checked ~ .zen-backdrop .zen-leave-link {
display: block; display: block;
position: absolute; position: absolute;
...@@ -62,6 +64,9 @@ ...@@ -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 { .zen-backdrop textarea::-webkit-input-placeholder {
color: white; color: white;
} }
...@@ -78,6 +83,9 @@ ...@@ -78,6 +83,9 @@
color: white; 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 { input:checked ~ .zen-backdrop textarea::-webkit-input-placeholder {
color: #999; color: #999;
} }
......
.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'}
%i.fa.fa-expand
Edit in fullscreen
%a.zen-leave-link
%i.fa.fa-compress
#= require zen_mode
describe 'ZenMode', ->
fixture.preload('zen_mode.html')
beforeEach ->
fixture.load('zen_mode.html')
# Stub Dropzone.forElement(...).enable()
spyOn(Dropzone, 'forElement').and.callFake ->
enable: -> true
@zen = new 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')
enterZen()
expect(Mousetrap.pause).toHaveBeenCalled()
describe 'in use', ->
beforeEach ->
enterZen()
it 'exits on Escape', ->
$(document).trigger(jQuery.Event('keydown', {keyCode: 27}))
expect($('.zen-toggle-comment').prop('checked')).toBe(false)
describe 'on exit', ->
beforeEach ->
enterZen()
it 'unpauses Mousetrap', ->
spyOn(Mousetrap, 'unpause')
exitZen()
expect(Mousetrap.unpause).toHaveBeenCalled()
it 'restores the scroll position', ->
spyOn(@zen, 'restoreScroll')
exitZen()
expect(@zen.restoreScroll).toHaveBeenCalledWith(456)
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment