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

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 {
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;
......@@ -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
= 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')
......
......@@ -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 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
%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
/* 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 = {}));
});
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