diff --git a/app/assets/javascripts/zen_mode.js.coffee b/app/assets/javascripts/zen_mode.js.coffee
index a1462cf3cae65822be84d0d3df21117bc0f610b1..e1c5446eaace9ad2e89041d62cadaebbe6b9014c 100644
--- a/app/assets/javascripts/zen_mode.js.coffee
+++ b/app/assets/javascripts/zen_mode.js.coffee
@@ -1,56 +1,80 @@
+# Zen Mode (full screen) textarea
+#
+#= provides zen_mode:enter
+#= provides zen_mode:leave
+#
+#= require jquery.scrollTo
#= require dropzone
#= require mousetrap
#= require mousetrap/pause
-
+#
+# ### Events
+#
+# `zen_mode:enter`
+#
+# Fired when the "Edit in fullscreen" link is clicked.
+#
+# **Synchronicity** Sync
+# **Bubbles** Yes
+# **Cancelable** No
+# **Target** a.js-zen-enter
+#
+# `zen_mode:leave`
+#
+# Fired when the "Leave Fullscreen" link is clicked.
+#
+# **Synchronicity** Sync
+# **Bubbles** Yes
+# **Cancelable** No
+# **Target** a.js-zen-leave
+#
class @ZenMode
constructor: ->
- @active_zen_area = null
- @active_checkbox = null
- @scroll_position = 0
-
- $(window).scroll =>
- if not @active_checkbox
- @scroll_position = window.pageYOffset
+ @active_backdrop = null
+ @active_textarea = null
- $('body').on 'click', '.zen-enter-link', (e) =>
+ $(document).on 'click', '.js-zen-enter', (e) ->
e.preventDefault()
- $(e.currentTarget).closest('.zennable').find('.zen-toggle-comment').prop('checked', true).change()
+ $(e.currentTarget).trigger('zen_mode:enter')
- $('body').on 'click', '.zen-leave-link', (e) =>
+ $(document).on 'click', '.js-zen-leave', (e) ->
e.preventDefault()
- $(e.currentTarget).closest('.zennable').find('.zen-toggle-comment').prop('checked', false).change()
-
- $('body').on 'change', '.zen-toggle-comment', (e) =>
- checkbox = e.currentTarget
- if checkbox.checked
- # Disable other keyboard shortcuts in ZEN mode
- Mousetrap.pause()
- @updateActiveZenArea(checkbox)
- else
- @exitZenMode()
-
- $(document).on 'keydown', (e) =>
- if e.keyCode is 27 # Esc
- @exitZenMode()
+ $(e.currentTarget).trigger('zen_mode:leave')
+
+ $(document).on 'zen_mode:enter', (e) =>
+ @enter(e.target.parentNode)
+ $(document).on 'zen_mode:leave', (e) =>
+ @exit()
+
+ $(document).on 'keydown', (e) ->
+ if e.keyCode == 27 # Esc
e.preventDefault()
+ $(document).trigger('zen_mode:leave')
+
+ enter: (backdrop) ->
+ Mousetrap.pause()
+
+ @active_backdrop = $(backdrop)
+ @active_backdrop.addClass('fullscreen')
+
+ @active_textarea = @active_backdrop.find('textarea')
- updateActiveZenArea: (checkbox) =>
- @active_checkbox = $(checkbox)
- @active_checkbox.prop('checked', true)
- @active_zen_area = @active_checkbox.parent().find('textarea')
# Prevent a user-resized textarea from persisting to fullscreen
- @active_zen_area.removeAttr('style')
- @active_zen_area.focus()
+ @active_textarea.removeAttr('style')
+ @active_textarea.focus()
- exitZenMode: =>
- if @active_zen_area isnt null
+ exit: ->
+ if @active_textarea
Mousetrap.unpause()
- @active_checkbox.prop('checked', false)
- @active_zen_area = null
- @active_checkbox = null
- @restoreScroll(@scroll_position)
- # Enable dropzone when leaving ZEN mode
+
+ @active_textarea.closest('.zen-backdrop').removeClass('fullscreen')
+
+ @scrollTo(@active_textarea)
+
+ @active_textarea = null
+ @active_backdrop = null
+
Dropzone.forElement('.div-dropzone').enable()
- restoreScroll: (y) ->
- window.scrollTo(window.pageXOffset, y)
+ scrollTo: (zen_area) ->
+ $.scrollTo(zen_area, 0, offset: -150)
diff --git a/app/assets/stylesheets/framework/zen.scss b/app/assets/stylesheets/framework/zen.scss
index 32e2c020e06d2e6873119eba3aa5c4621579f216..002bd7e8ca5831669f33dd3045bd781a93e5b828 100644
--- a/app/assets/stylesheets/framework/zen.scss
+++ b/app/assets/stylesheets/framework/zen.scss
@@ -1,9 +1,5 @@
.zennable {
- .zen-toggle-comment {
- display: none;
- }
-
- .zen-enter-link {
+ a.js-zen-enter {
color: $gl-gray;
position: absolute;
top: 0px;
@@ -11,7 +7,7 @@
line-height: 40px;
}
- .zen-leave-link {
+ a.js-zen-leave {
display: none;
color: $gl-text-color;
position: absolute;
@@ -25,62 +21,41 @@
}
}
- // 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;
- top: 0;
- }
-
- input:checked ~ .zen-backdrop {
- background-color: white;
- position: fixed;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- z-index: 1031;
-
- textarea {
- border: none;
- box-shadow: none;
- border-radius: 0;
- color: #000;
- font-size: 20px;
- line-height: 26px;
- padding: 30px;
- display: block;
- outline: none;
- resize: none;
- height: 100vh;
- max-width: 900px;
- margin: 0 auto;
+ .zen-backdrop {
+ &.fullscreen {
+ background-color: white;
+ position: fixed;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ z-index: 1031;
+
+ textarea {
+ border: none;
+ box-shadow: none;
+ border-radius: 0;
+ color: #000;
+ font-size: 20px;
+ line-height: 26px;
+ padding: 30px;
+ display: block;
+ outline: none;
+ resize: none;
+ height: 100vh;
+ max-width: 900px;
+ margin: 0 auto;
+ }
+
+ a.js-zen-enter {
+ display: none;
+ }
+
+ a.js-zen-leave {
+ display: block;
+ position: absolute;
+ top: 0;
+ }
}
}
-
- // 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: #A8A8A8;
- }
-
- input:checked ~ .zen-backdrop textarea:-moz-placeholder {
- color: #A8A8A8;
- opacity: 1;
- }
-
- input:checked ~ .zen-backdrop textarea::-moz-placeholder {
- color: #A8A8A8;
- opacity: 1;
- }
-
- input:checked ~ .zen-backdrop textarea:-ms-input-placeholder {
- color: #A8A8A8;
- }
}
diff --git a/app/views/projects/_zen.html.haml b/app/views/projects/_zen.html.haml
index 7e6301abde82aca3767f01e850733c78b2e06113..d582956827555a48d5465f0f872ec745c4a2c54a 100644
--- a/app/views/projects/_zen.html.haml
+++ b/app/views/projects/_zen.html.haml
@@ -1,13 +1,12 @@
.zennable
- %input#zen-toggle-comment.zen-toggle-comment(tabindex="-1" type="checkbox")
.zen-backdrop
- classes << ' js-gfm-input markdown-area'
- if defined?(f) && f
- = f.text_area attr, class: classes, placeholder: ''
+ = f.text_area attr, class: classes
- else
- = text_area_tag attr, nil, class: classes, placeholder: ''
- %a.zen-enter-link(tabindex="-1" href="#")
+ = text_area_tag attr, nil, class: classes
+ %a.js-zen-enter(tabindex="-1" href="#")
= icon('expand')
Edit in fullscreen
- %a.zen-leave-link(href="#")
+ %a.js-zen-leave(tabindex="-1" href="#")
= icon('compress')
diff --git a/spec/javascripts/fixtures/zen_mode.html.haml b/spec/javascripts/fixtures/zen_mode.html.haml
index e867e4de2b99e65881d06e0fe873e2f98dc19851..1701652c61e49bbe9167b42f15bb0b2eb3c38381 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 4cb3836755f881abd9d4f03928a7b63e4326520d..b790fce01ede562c5723a1a6e30286e2301798c7 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}))