Commit bcab4bb5 authored by Jose Ivan Vargas's avatar Jose Ivan Vargas

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
parent 19a21107
......@@ -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();
......
/* 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();
#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')
......
#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
......
/* 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 = {}));
});
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