From f76a3f3db767da92149545ea54115d5ff40d722e Mon Sep 17 00:00:00 2001 From: Robert Speicher Date: Thu, 21 May 2015 01:25:18 -0400 Subject: Add ZenMode javascript specs --- app/assets/javascripts/zen_mode.js.coffee | 12 +++++-- app/assets/stylesheets/generic/zen.scss | 10 +++++- spec/javascripts/fixtures/zen_mode.html.haml | 9 +++++ spec/javascripts/zen_mode_spec.js.coffee | 52 ++++++++++++++++++++++++++++ 4 files changed, 79 insertions(+), 4 deletions(-) create mode 100644 spec/javascripts/fixtures/zen_mode.html.haml create mode 100644 spec/javascripts/zen_mode_spec.js.coffee 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; } diff --git a/spec/javascripts/fixtures/zen_mode.html.haml b/spec/javascripts/fixtures/zen_mode.html.haml new file mode 100644 index 00000000000..e867e4de2b9 --- /dev/null +++ b/spec/javascripts/fixtures/zen_mode.html.haml @@ -0,0 +1,9 @@ +.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 diff --git a/spec/javascripts/zen_mode_spec.js.coffee b/spec/javascripts/zen_mode_spec.js.coffee new file mode 100644 index 00000000000..1f4ea58ad48 --- /dev/null +++ b/spec/javascripts/zen_mode_spec.js.coffee @@ -0,0 +1,52 @@ +#= 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) -- cgit v1.2.1 From 2313d42b37977afc884a2a2fc7e91180e0acbaf3 Mon Sep 17 00:00:00 2001 From: Robert Speicher Date: Sat, 23 May 2015 00:33:46 -0400 Subject: Bump jquery-rails version --- Gemfile | 22 +++++++++++----------- Gemfile.lock | 4 ++-- 2 files changed, 13 insertions(+), 13 deletions(-) diff --git a/Gemfile b/Gemfile index 94e2129f3c6..0ab0a45cdb5 100644 --- a/Gemfile +++ b/Gemfile @@ -195,20 +195,20 @@ gem "uglifier" gem 'turbolinks', '~> 2.5.0' gem 'jquery-turbolinks' -gem 'select2-rails' +gem 'addressable' +gem 'bootstrap-sass', '~> 3.0' +gem 'font-awesome-rails', '~> 4.2' +gem 'gitlab_emoji', '~> 0.1' +gem 'gon', '~> 5.0.0' gem 'jquery-atwho-rails', '~> 1.0.0' -gem "jquery-rails" -gem "jquery-ui-rails" -gem "jquery-scrollto-rails" -gem "raphael-rails", "~> 2.1.2" -gem 'bootstrap-sass', '~> 3.0' -gem "font-awesome-rails", '~> 4.2' -gem "gitlab_emoji", "~> 0.1" -gem "gon", '~> 5.0.0' +gem 'jquery-rails', '3.1.2' +gem 'jquery-scrollto-rails' +gem 'jquery-ui-rails' gem 'nprogress-rails' +gem 'raphael-rails', '~> 2.1.2' gem 'request_store' -gem "virtus" -gem 'addressable' +gem 'select2-rails' +gem 'virtus' group :development do gem 'brakeman', require: false diff --git a/Gemfile.lock b/Gemfile.lock index 80ae41dc8fc..c9b8fc1f554 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -301,7 +301,7 @@ GEM ice_cube (0.11.1) ice_nine (0.10.0) jquery-atwho-rails (1.0.1) - jquery-rails (3.1.0) + jquery-rails (3.1.2) railties (>= 3.0, < 5.0) thor (>= 0.14, < 2.0) jquery-scrollto-rails (1.4.3) @@ -746,7 +746,7 @@ DEPENDENCIES html-pipeline (~> 1.11.0) httparty jquery-atwho-rails (~> 1.0.0) - jquery-rails + jquery-rails (= 3.1.2) jquery-scrollto-rails jquery-turbolinks jquery-ui-rails -- cgit v1.2.1 From 456095440425f91028f218748f366bf16e5c7d4b Mon Sep 17 00:00:00 2001 From: Robert Speicher Date: Tue, 26 May 2015 18:33:04 -0400 Subject: Move jQuery enable/disable extensions to extensions/jquery Removes redundant enableButton/disableButton extensions, and adds specs for the jQuery extensions. --- app/assets/javascripts/application.js.coffee | 11 ------- app/assets/javascripts/extensions/jquery.js.coffee | 17 ++++++----- app/assets/javascripts/profile.js.coffee | 4 +-- app/views/projects/update.js.haml | 2 +- spec/javascripts/extensions/jquery_spec.js.coffee | 34 ++++++++++++++++++++++ spec/javascripts/spec_helper.coffee | 18 ++++++------ 6 files changed, 56 insertions(+), 30 deletions(-) create mode 100644 spec/javascripts/extensions/jquery_spec.js.coffee diff --git a/app/assets/javascripts/application.js.coffee b/app/assets/javascripts/application.js.coffee index 9fc313db9d0..075bcddf8bc 100644 --- a/app/assets/javascripts/application.js.coffee +++ b/app/assets/javascripts/application.js.coffee @@ -196,14 +196,3 @@ $ -> new ConfirmDangerModal(form, text) new Aside() - -(($) -> - # Disable an element and add the 'disabled' Bootstrap class - $.fn.extend disable: -> - $(@).attr('disabled', 'disabled').addClass('disabled') - - # Enable an element and remove the 'disabled' Bootstrap class - $.fn.extend enable: -> - $(@).removeAttr('disabled').removeClass('disabled') - -)(jQuery) diff --git a/app/assets/javascripts/extensions/jquery.js.coffee b/app/assets/javascripts/extensions/jquery.js.coffee index 40fb6cb9fc3..2a7dae4a863 100644 --- a/app/assets/javascripts/extensions/jquery.js.coffee +++ b/app/assets/javascripts/extensions/jquery.js.coffee @@ -3,11 +3,14 @@ $.fn.showAndHide = -> delay(3000). fadeOut() -$.fn.enableButton = -> - $(@).removeAttr('disabled'). - removeClass('disabled') - -$.fn.disableButton = -> - $(@).attr('disabled', 'disabled'). - addClass('disabled') +# Disable an element and add the 'disabled' Bootstrap class +$.fn.extend disable: -> + $(@) + .attr('disabled', 'disabled') + .addClass('disabled') +# Enable an element and remove the 'disabled' Bootstrap class +$.fn.extend enable: -> + $(@) + .removeAttr('disabled') + .removeClass('disabled') diff --git a/app/assets/javascripts/profile.js.coffee b/app/assets/javascripts/profile.js.coffee index de356fbec77..40459a9a155 100644 --- a/app/assets/javascripts/profile.js.coffee +++ b/app/assets/javascripts/profile.js.coffee @@ -12,11 +12,11 @@ class @Profile $(this).find('.update-failed').hide() $('.update-username form').on 'ajax:complete', -> - $(this).find('.btn-save').enableButton() + $(this).find('.btn-save').enable() $(this).find('.loading-gif').hide() $('.update-notifications').on 'ajax:complete', -> - $(this).find('.btn-save').enableButton() + $(this).find('.btn-save').enable() $('.js-choose-user-avatar-button').bind "click", -> diff --git a/app/views/projects/update.js.haml b/app/views/projects/update.js.haml index 4f3f4cab8d5..7d9bd08385a 100644 --- a/app/views/projects/update.js.haml +++ b/app/views/projects/update.js.haml @@ -6,4 +6,4 @@ $(".project-edit-errors").html("#{escape_javascript(render('errors'))}"); $('.save-project-loader').hide(); $('.project-edit-container').show(); - $('.project-edit-content .btn-save').enableButton(); + $('.project-edit-content .btn-save').enable(); diff --git a/spec/javascripts/extensions/jquery_spec.js.coffee b/spec/javascripts/extensions/jquery_spec.js.coffee new file mode 100644 index 00000000000..b10e16b7d01 --- /dev/null +++ b/spec/javascripts/extensions/jquery_spec.js.coffee @@ -0,0 +1,34 @@ +#= require extensions/jquery + +describe 'jQuery extensions', -> + describe 'disable', -> + beforeEach -> + fixture.set '' + + it 'adds the disabled attribute', -> + $input = $('input').first() + + $input.disable() + expect($input).toHaveAttr('disabled', 'disabled') + + it 'adds the disabled class', -> + $input = $('input').first() + + $input.disable() + expect($input).toHaveClass('disabled') + + describe 'enable', -> + beforeEach -> + fixture.set '' + + it 'removes the disabled attribute', -> + $input = $('input').first() + + $input.enable() + expect($input).not.toHaveAttr('disabled') + + it 'removes the disabled class', -> + $input = $('input').first() + + $input.enable() + expect($input).not.toHaveClass('disabled') diff --git a/spec/javascripts/spec_helper.coffee b/spec/javascripts/spec_helper.coffee index 892a539d96b..47b41dd2c81 100644 --- a/spec/javascripts/spec_helper.coffee +++ b/spec/javascripts/spec_helper.coffee @@ -1,12 +1,3 @@ -# Teaspoon includes some support files, but you can use anything from your own -# support path too. - -# require support/jasmine-jquery-1.7.0 -# require support/jasmine-jquery-2.0.0 -# require support/jasmine-jquery-2.1.0 -# require support/sinon -# require support/your-support-file - # PhantomJS (Teaspoons default driver) doesn't have support for # Function.prototype.bind, which has caused confusion. Use this polyfill to # avoid the confusion. @@ -21,6 +12,15 @@ #= require bootstrap #= require underscore +# Teaspoon includes some support files, but you can use anything from your own +# support path too. + +# require support/jasmine-jquery-1.7.0 +# require support/jasmine-jquery-2.0.0 +#= require support/jasmine-jquery-2.1.0 +# require support/sinon +# require support/your-support-file + # Deferring execution # If you're using CommonJS, RequireJS or some other asynchronous library you can -- cgit v1.2.1 From 39d5a4878fea8aa631c6b614bdebb9be7b975e79 Mon Sep 17 00:00:00 2001 From: Robert Speicher Date: Tue, 26 May 2015 18:43:14 -0400 Subject: Add JS specs for Array extensions --- spec/javascripts/extensions/array_spec.js.coffee | 12 ++++++++++++ 1 file changed, 12 insertions(+) create mode 100644 spec/javascripts/extensions/array_spec.js.coffee diff --git a/spec/javascripts/extensions/array_spec.js.coffee b/spec/javascripts/extensions/array_spec.js.coffee new file mode 100644 index 00000000000..4ceac619422 --- /dev/null +++ b/spec/javascripts/extensions/array_spec.js.coffee @@ -0,0 +1,12 @@ +#= require extensions/array + +describe 'Array extensions', -> + describe 'first', -> + it 'returns the first item', -> + arr = [0, 1, 2, 3, 4, 5] + expect(arr.first()).toBe(0) + + describe 'last', -> + it 'returns the last item', -> + arr = [0, 1, 2, 3, 4, 5] + expect(arr.last()).toBe(5) -- cgit v1.2.1 From 29626b08850bd5c868b4d71129d542f4fdc135ce Mon Sep 17 00:00:00 2001 From: Robert Speicher Date: Tue, 26 May 2015 18:43:02 -0400 Subject: Remove unused `showAndHide`, `simpleFormat`, and `linkify` functions Also removes redundant `unbind` call --- app/assets/javascripts/application.js.coffee | 10 ---------- app/assets/javascripts/extensions/jquery.js.coffee | 5 ----- 2 files changed, 15 deletions(-) diff --git a/app/assets/javascripts/application.js.coffee b/app/assets/javascripts/application.js.coffee index 075bcddf8bc..6a3f7386d5b 100644 --- a/app/assets/javascripts/application.js.coffee +++ b/app/assets/javascripts/application.js.coffee @@ -49,8 +49,6 @@ window.slugify = (text) -> window.ajaxGet = (url) -> $.ajax({type: "GET", url: url, dataType: "script"}) -window.showAndHide = (selector) -> - window.split = (val) -> return val.split( /,\s*/ ) @@ -92,15 +90,7 @@ window.disableButtonIfAnyEmptyField = (form, form_selector, button_selector) -> window.sanitize = (str) -> return str.replace(/<(?:.|\n)*?>/gm, '') -window.linkify = (str) -> - exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig - return str.replace(exp,"$1") - -window.simpleFormat = (str) -> - linkify(sanitize(str).replace(/\n/g, '
')) - window.unbindEvents = -> - $(document).unbind('scroll') $(document).off('scroll') window.shiftWindow = -> diff --git a/app/assets/javascripts/extensions/jquery.js.coffee b/app/assets/javascripts/extensions/jquery.js.coffee index 2a7dae4a863..0a9db8eb5ef 100644 --- a/app/assets/javascripts/extensions/jquery.js.coffee +++ b/app/assets/javascripts/extensions/jquery.js.coffee @@ -1,8 +1,3 @@ -$.fn.showAndHide = -> - $(@).show(). - delay(3000). - fadeOut() - # Disable an element and add the 'disabled' Bootstrap class $.fn.extend disable: -> $(@) -- cgit v1.2.1