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:
parent
19a21107d7
commit
bcab4bb5ef
9 changed files with 80 additions and 85 deletions
|
@ -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();
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -17,6 +17,3 @@
|
|||
= render 'projects'
|
||||
- else
|
||||
= render "zero_authorized_projects"
|
||||
|
||||
:javascript
|
||||
var userCallout = new gl.UserCallout();
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -129,11 +129,8 @@
|
|||
= spinner
|
||||
|
||||
:javascript
|
||||
var userProfile, userCallout;
|
||||
var userProfile;
|
||||
|
||||
userProfile = new gl.User({
|
||||
action: "#{controller.action_name}"
|
||||
});
|
||||
|
||||
userCallout = new gl.UserCallout();
|
||||
|
||||
|
|
|
@ -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')
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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 = {}));
|
||||
});
|
||||
|
|
Loading…
Reference in a new issue