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
This commit is contained in:
Jose Ivan Vargas 2017-02-17 11:28:52 -06:00
parent 19a21107d7
commit bcab4bb5ef
9 changed files with 80 additions and 85 deletions

View file

@ -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();

View file

@ -1,24 +1,23 @@
/* 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 {
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());
.on('click', userCalloutBtn, () => this.closeAndDismissCallout());
}
closeAndDismissCallout() {
@ -31,7 +30,6 @@
$(userCalloutElementName).show();
}
}
}
}
global.UserCallout = UserCallout;
})(window.gl || (window.gl = {}));
module.exports = UserCallout;

View file

@ -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;
}

View file

@ -17,6 +17,3 @@
= render 'projects'
- else
= render "zero_authorized_projects"
:javascript
var userCallout = new gl.UserCallout();

View file

@ -1,5 +1,6 @@
#user-callout
.user-callout
.bordered-box.landing.content-block
%button.btn.btn-default.close{ type: "button" }
= icon("times", class: "dismiss-icon")
.row
.col-sm-3.col-xs-12.svg-container

View file

@ -129,11 +129,8 @@
= spinner
:javascript
var userProfile, userCallout;
var userProfile;
userProfile = new gl.User({
action: "#{controller.action_name}"
});
userCallout = new gl.UserCallout();

View file

@ -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')

View file

@ -1,5 +1,6 @@
#user-callout
.user-callout
.bordered-box.landing.content-block
%button.btn.btn-default.close{ type: "button" }
%i.fa.fa-times.dismiss-icon
.row
.col-sm-3.col-xs-12.svg-container

View file

@ -1,23 +1,18 @@
/* 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 () {
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.userCallout = new UserCallout();
this.dismissIcon = $('.dismiss-icon');
this.userCalloutContainer = $('#user-callout');
this.userCalloutContainer = $('.user-callout');
this.userCalloutBtn = $('.user-callout-btn');
Cookie.set(USER_CALLOUT_COOKIE, 0);
});
@ -38,5 +33,4 @@ require('~/user_callout');
expect(this.userCalloutContainer.is(':visible')).toBe(false);
expect(Cookie.get(USER_CALLOUT_COOKIE)).toBe('1');
});
});
})(window.gl || (window.gl = {}));
});