From bcab4bb5efd1cc499dc7d753115fe91b98f27bda Mon Sep 17 00:00:00 2001 From: Jose Ivan Vargas Date: Fri, 17 Feb 2017 11:28:52 -0600 Subject: Changed the javascript class from using the global scope to exporting it via webpack Also improved accesibility and change the id from user_callouts to a class --- app/assets/javascripts/dispatcher.js.es6 | 5 ++ app/assets/javascripts/user_callout.js | 50 +++++++++---------- app/assets/stylesheets/pages/profile.scss | 8 +-- app/views/dashboard/projects/index.html.haml | 3 -- app/views/shared/_user_callout.html.haml | 5 +- app/views/users/show.html.haml | 5 +- spec/features/user_callout_spec.rb | 6 +-- spec/javascripts/fixtures/user_callout.html.haml | 7 +-- spec/javascripts/user_callout_spec.js | 62 +++++++++++------------- 9 files changed, 73 insertions(+), 78 deletions(-) diff --git a/app/assets/javascripts/dispatcher.js.es6 b/app/assets/javascripts/dispatcher.js.es6 index 089ecedeb78..0f678492d4c 100644 --- a/app/assets/javascripts/dispatcher.js.es6 +++ b/app/assets/javascripts/dispatcher.js.es6 @@ -36,6 +36,7 @@ /* global Shortcuts */ const ShortcutsBlob = require('./shortcuts_blob'); +const UserCallout = require('./user_callout'); (function() { var Dispatcher; @@ -277,6 +278,9 @@ const ShortcutsBlob = require('./shortcuts_blob'); case 'ci:lints:show': new gl.CILintEditor(); break; + case 'users:show': + new UserCallout(); + break; } switch (path.first()) { case 'sessions': @@ -313,6 +317,7 @@ const ShortcutsBlob = require('./shortcuts_blob'); case 'dashboard': case 'root': shortcut_handler = new ShortcutsDashboardNavigation(); + new UserCallout(); break; case 'profiles': new NotificationsForm(); diff --git a/app/assets/javascripts/user_callout.js b/app/assets/javascripts/user_callout.js index 5d10bfc8290..85f85674e59 100644 --- a/app/assets/javascripts/user_callout.js +++ b/app/assets/javascripts/user_callout.js @@ -1,37 +1,35 @@ /* eslint-disable arrow-parens, class-methods-use-this, no-param-reassign */ /* global Cookies */ -((global) => { - const userCalloutElementName = '#user-callout'; - const dismissIcon = '.dismiss-icon'; - const userCalloutBtn = '.user-callout-btn'; +const userCalloutElementName = '.user-callout'; +const dismissIcon = '.dismiss-icon'; +const userCalloutBtn = '.user-callout-btn'; - const USER_CALLOUT_COOKIE = 'user_callout_dismissed'; +const USER_CALLOUT_COOKIE = 'user_callout_dismissed'; - class UserCallout { - constructor() { - this.isCalloutDismissed = Cookies.get(USER_CALLOUT_COOKIE); - this.init(); - } +class UserCallout { + constructor() { + this.isCalloutDismissed = Cookies.get(USER_CALLOUT_COOKIE); + this.init(); + this.isUserCalloutDismissed(); + } - init() { - $(document) - .on('click', dismissIcon, () => this.closeAndDismissCallout()) - .on('click', userCalloutBtn, () => this.closeAndDismissCallout()) - .on('DOMContentLoaded', () => this.isUserCalloutDismissed()); - } + init() { + $(document) + .on('click', dismissIcon, () => this.closeAndDismissCallout()) + .on('click', userCalloutBtn, () => this.closeAndDismissCallout()); + } - closeAndDismissCallout() { - $(userCalloutElementName).hide(); - Cookies.set(USER_CALLOUT_COOKIE, '1'); - } + closeAndDismissCallout() { + $(userCalloutElementName).hide(); + Cookies.set(USER_CALLOUT_COOKIE, '1'); + } - isUserCalloutDismissed() { - if (!this.isCalloutDismissed) { - $(userCalloutElementName).show(); - } + isUserCalloutDismissed() { + if (!this.isCalloutDismissed) { + $(userCalloutElementName).show(); } } +} - global.UserCallout = UserCallout; -})(window.gl || (window.gl = {})); +module.exports = UserCallout; diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss index c9dab696092..dd252bf1e57 100644 --- a/app/assets/stylesheets/pages/profile.scss +++ b/app/assets/stylesheets/pages/profile.scss @@ -278,7 +278,7 @@ table.u2f-registrations { } } -#user-callout { +.user-callout { display: none; margin: 24px auto 0; @@ -289,11 +289,13 @@ table.u2f-registrations { .landing { margin-bottom: $gl-padding; - overflow: hidden; + + .close { + margin-right: 20px; + } .dismiss-icon { float: right; - margin-right: 20px; cursor: pointer; color: $cycle-analytics-dismiss-icon-color; } diff --git a/app/views/dashboard/projects/index.html.haml b/app/views/dashboard/projects/index.html.haml index 61212bc8490..8276cce693c 100644 --- a/app/views/dashboard/projects/index.html.haml +++ b/app/views/dashboard/projects/index.html.haml @@ -17,6 +17,3 @@ = render 'projects' - else = render "zero_authorized_projects" - -:javascript - var userCallout = new gl.UserCallout(); diff --git a/app/views/shared/_user_callout.html.haml b/app/views/shared/_user_callout.html.haml index cef431fe9e7..af8c15d8291 100644 --- a/app/views/shared/_user_callout.html.haml +++ b/app/views/shared/_user_callout.html.haml @@ -1,6 +1,7 @@ -#user-callout +.user-callout .bordered-box.landing.content-block - = icon("times", class: "dismiss-icon") + %button.btn.btn-default.close{ type: "button" } + = icon("times", class: "dismiss-icon") .row .col-sm-3.col-xs-12.svg-container = custom_icon('icon_customization') diff --git a/app/views/users/show.html.haml b/app/views/users/show.html.haml index bee65875a99..d89001efb07 100644 --- a/app/views/users/show.html.haml +++ b/app/views/users/show.html.haml @@ -129,11 +129,8 @@ = spinner :javascript - var userProfile, userCallout; + var userProfile; userProfile = new gl.User({ action: "#{controller.action_name}" }); - - userCallout = new gl.UserCallout(); - diff --git a/spec/features/user_callout_spec.rb b/spec/features/user_callout_spec.rb index 7077ac2fc54..53a87d3c224 100644 --- a/spec/features/user_callout_spec.rb +++ b/spec/features/user_callout_spec.rb @@ -18,18 +18,18 @@ describe 'User Callouts', js: true do describe 'user callout should appear in two routes' do it 'shows up on the user profile' do visit user_path(user) - expect(find('#user-callout')).to have_content 'Customize your experience' + expect(find('.user-callout')).to have_content 'Customize your experience' end it 'shows up on the dashboard projects' do visit dashboard_projects_path - expect(find('#user-callout')).to have_content 'Customize your experience' + expect(find('.user-callout')).to have_content 'Customize your experience' end end it 'hides the user callout when click on the dismiss icon' do visit user_path(user) - within('#user-callout') do + within('.user-callout') do find('.dismiss-icon').click end expect(page).not_to have_selector('#user-callout') diff --git a/spec/javascripts/fixtures/user_callout.html.haml b/spec/javascripts/fixtures/user_callout.html.haml index 2aa6bf4b604..430e6c829ef 100644 --- a/spec/javascripts/fixtures/user_callout.html.haml +++ b/spec/javascripts/fixtures/user_callout.html.haml @@ -1,6 +1,7 @@ -#user-callout +.user-callout .bordered-box.landing.content-block - %i.fa.fa-times.dismiss-icon + %button.btn.btn-default.close{ type: "button" } + %i.fa.fa-times.dismiss-icon .row .col-sm-3.col-xs-12.svg-container .col-sm-8.col-xs-12.inner-content @@ -9,4 +10,4 @@ %p Change syntax themes, default project pages, and more in preferences. %a{ href: 'foo', class:'user-callout-btn' } - Check it out \ No newline at end of file + Check it out diff --git a/spec/javascripts/user_callout_spec.js b/spec/javascripts/user_callout_spec.js index 26a12bed067..72410e5369e 100644 --- a/spec/javascripts/user_callout_spec.js +++ b/spec/javascripts/user_callout_spec.js @@ -1,42 +1,36 @@ /* esint-disable space-before-function-paren, arrow-body-style */ -require('~/user_callout'); +const UserCallout = require('~/user_callout'); -((global) => { - const USER_CALLOUT_COOKIE = 'user_callout_dismissed'; - const Cookie = window.Cookies; +const USER_CALLOUT_COOKIE = 'user_callout_dismissed'; +const Cookie = window.Cookies; - describe('UserCallout', function () { - const fixtureName = 'static/user_callout.html.raw'; - preloadFixtures(fixtureName); +describe('UserCallout', function () { + const fixtureName = 'static/user_callout.html.raw'; + preloadFixtures(fixtureName); - it('should be defined in the global scope', () => { - expect(global.UserCallout).toBeDefined(); - }); - - beforeEach(() => { - loadFixtures(fixtureName); - this.userCallout = new global.UserCallout(); - this.dismissIcon = $('.dismiss-icon'); - this.userCalloutContainer = $('#user-callout'); - this.userCalloutBtn = $('.user-callout-btn'); - Cookie.set(USER_CALLOUT_COOKIE, 0); - }); + beforeEach(() => { + loadFixtures(fixtureName); + this.userCallout = new UserCallout(); + this.dismissIcon = $('.dismiss-icon'); + this.userCalloutContainer = $('.user-callout'); + this.userCalloutBtn = $('.user-callout-btn'); + Cookie.set(USER_CALLOUT_COOKIE, 0); + }); - it('shows when cookie is set to false', () => { - expect(Cookie.get(USER_CALLOUT_COOKIE)).toBeDefined(); - expect(this.userCalloutContainer.is(':visible')).toBe(true); - }); + it('shows when cookie is set to false', () => { + expect(Cookie.get(USER_CALLOUT_COOKIE)).toBeDefined(); + expect(this.userCalloutContainer.is(':visible')).toBe(true); + }); - it('hides when user clicks on the dismiss-icon', () => { - this.dismissIcon.click(); - expect(this.userCalloutContainer.is(':visible')).toBe(false); - expect(Cookie.get(USER_CALLOUT_COOKIE)).toBe('1'); - }); + it('hides when user clicks on the dismiss-icon', () => { + this.dismissIcon.click(); + expect(this.userCalloutContainer.is(':visible')).toBe(false); + expect(Cookie.get(USER_CALLOUT_COOKIE)).toBe('1'); + }); - it('hides when user clicks on the "check it out" button', () => { - this.userCalloutBtn.click(); - expect(this.userCalloutContainer.is(':visible')).toBe(false); - expect(Cookie.get(USER_CALLOUT_COOKIE)).toBe('1'); - }); + it('hides when user clicks on the "check it out" button', () => { + this.userCalloutBtn.click(); + expect(this.userCalloutContainer.is(':visible')).toBe(false); + expect(Cookie.get(USER_CALLOUT_COOKIE)).toBe('1'); }); -})(window.gl || (window.gl = {})); +}); -- cgit v1.2.1