BigW Consortium Gitlab

Skip to content

G
gitlab-ce
Commit 66dee188 by Douwe Maan
Options

Merge branch 'rs-zenmode-cleanup' into 'master'

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. See merge request !2354
parents f41b535c 89ca4f04
Showing with 119 additions and 128 deletions
app/assets/javascripts/zen_mode.js.coffee
# 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)
app/assets/stylesheets/framework/zen.scss
.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;
}
}
app/views/projects/_zen.html.haml
.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')
spec/javascripts/fixtures/zen_mode.html.haml
.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
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}))
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