2017-03-17 11:38:41 -04:00
|
|
|
/* eslint-disable max-len, space-before-function-paren, no-underscore-dangle, consistent-return, comma-dangle, no-unused-vars, dot-notation, no-new, no-return-assign, camelcase, no-param-reassign, class-methods-use-this */
|
2016-12-13 22:01:05 -05:00
|
|
|
|
2016-09-08 08:26:43 -04:00
|
|
|
/*
|
|
|
|
UserTabs
|
|
|
|
|
|
|
|
Handles persisting and restoring the current tab selection and lazily-loading
|
|
|
|
content on the Users#show page.
|
|
|
|
|
|
|
|
### Example Markup
|
|
|
|
|
|
|
|
<ul class="nav-links">
|
|
|
|
<li class="activity-tab active">
|
|
|
|
<a data-action="activity" data-target="#activity" data-toggle="tab" href="/u/username">
|
|
|
|
Activity
|
|
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="groups-tab">
|
|
|
|
<a data-action="groups" data-target="#groups" data-toggle="tab" href="/u/username/groups">
|
|
|
|
Groups
|
|
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="contributed-tab">
|
|
|
|
<a data-action="contributed" data-target="#contributed" data-toggle="tab" href="/u/username/contributed">
|
|
|
|
Contributed projects
|
|
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="projects-tab">
|
|
|
|
<a data-action="projects" data-target="#projects" data-toggle="tab" href="/u/username/projects">
|
|
|
|
Personal projects
|
|
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="snippets-tab">
|
|
|
|
<a data-action="snippets" data-target="#snippets" data-toggle="tab" href="/u/username/snippets">
|
|
|
|
</a>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
<div class="tab-content">
|
|
|
|
<div class="tab-pane" id="activity">
|
|
|
|
Activity Content
|
|
|
|
</div>
|
|
|
|
<div class="tab-pane" id="groups">
|
|
|
|
Groups Content
|
|
|
|
</div>
|
|
|
|
<div class="tab-pane" id="contributed">
|
|
|
|
Contributed projects content
|
|
|
|
</div>
|
|
|
|
<div class="tab-pane" id="projects">
|
|
|
|
Projects content
|
|
|
|
</div>
|
|
|
|
<div class="tab-pane" id="snippets">
|
|
|
|
Snippets content
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="loading-status">
|
|
|
|
<div class="loading">
|
|
|
|
Loading Animation
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
*/
|
2016-09-08 11:22:14 -04:00
|
|
|
((global) => {
|
2016-09-08 08:26:43 -04:00
|
|
|
class UserTabs {
|
2016-09-09 12:31:26 -04:00
|
|
|
constructor ({ defaultAction, action, parentEl }) {
|
2016-09-08 08:26:43 -04:00
|
|
|
this.loaded = {};
|
2016-09-09 12:31:26 -04:00
|
|
|
this.defaultAction = defaultAction || 'activity';
|
|
|
|
this.action = action || this.defaultAction;
|
2016-09-09 10:57:13 -04:00
|
|
|
this.$parentEl = $(parentEl) || $(document);
|
2016-09-08 08:26:43 -04:00
|
|
|
this._location = window.location;
|
|
|
|
this.$parentEl.find('.nav-links a')
|
|
|
|
.each((i, navLink) => {
|
|
|
|
this.loaded[$(navLink).attr('data-action')] = false;
|
|
|
|
});
|
|
|
|
this.actions = Object.keys(this.loaded);
|
|
|
|
this.bindEvents();
|
|
|
|
|
|
|
|
if (this.action === 'show') {
|
|
|
|
this.action = this.defaultAction;
|
|
|
|
}
|
|
|
|
|
|
|
|
this.activateTab(this.action);
|
|
|
|
}
|
|
|
|
|
|
|
|
bindEvents() {
|
2017-03-17 11:38:41 -04:00
|
|
|
this.changeProjectsPageWrapper = this.changeProjectsPage.bind(this);
|
|
|
|
|
|
|
|
this.$parentEl.off('shown.bs.tab', '.nav-links a[data-toggle="tab"]')
|
2016-09-09 10:57:13 -04:00
|
|
|
.on('shown.bs.tab', '.nav-links a[data-toggle="tab"]', event => this.tabShown(event));
|
2017-03-17 11:38:41 -04:00
|
|
|
|
|
|
|
this.$parentEl.on('click', '.gl-pagination a', this.changeProjectsPageWrapper);
|
|
|
|
}
|
|
|
|
|
|
|
|
changeProjectsPage(e) {
|
|
|
|
e.preventDefault();
|
|
|
|
|
|
|
|
$('.tab-pane.active').empty();
|
2017-03-30 16:36:02 -04:00
|
|
|
const endpoint = $(e.target).attr('href');
|
|
|
|
this.loadTab(this.getCurrentAction(), endpoint);
|
2016-09-08 08:26:43 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
tabShown(event) {
|
|
|
|
const $target = $(event.target);
|
|
|
|
const action = $target.data('action');
|
|
|
|
const source = $target.attr('href');
|
2017-03-30 16:36:02 -04:00
|
|
|
const endpoint = $target.data('endpoint');
|
|
|
|
this.setTab(action, endpoint);
|
|
|
|
return this.setCurrentAction(source);
|
2016-09-08 08:26:43 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
activateTab(action) {
|
2016-09-09 10:57:13 -04:00
|
|
|
return this.$parentEl.find(`.nav-links .js-${action}-tab a`)
|
2016-09-08 08:26:43 -04:00
|
|
|
.tab('show');
|
|
|
|
}
|
|
|
|
|
2017-03-30 16:36:02 -04:00
|
|
|
setTab(action, endpoint) {
|
2016-09-08 08:26:43 -04:00
|
|
|
if (this.loaded[action]) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
if (action === 'activity') {
|
2017-03-30 16:36:02 -04:00
|
|
|
this.loadActivities();
|
2016-09-08 08:26:43 -04:00
|
|
|
}
|
2016-09-09 10:57:13 -04:00
|
|
|
|
2017-01-11 23:27:41 -05:00
|
|
|
const loadableActions = ['groups', 'contributed', 'projects', 'snippets'];
|
2016-09-09 10:57:13 -04:00
|
|
|
if (loadableActions.indexOf(action) > -1) {
|
2017-03-30 16:36:02 -04:00
|
|
|
return this.loadTab(action, endpoint);
|
2016-09-08 08:26:43 -04:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2017-03-30 16:36:02 -04:00
|
|
|
loadTab(action, endpoint) {
|
2016-09-08 08:26:43 -04:00
|
|
|
return $.ajax({
|
|
|
|
beforeSend: () => this.toggleLoading(true),
|
|
|
|
complete: () => this.toggleLoading(false),
|
|
|
|
dataType: 'json',
|
|
|
|
type: 'GET',
|
2017-03-30 16:36:02 -04:00
|
|
|
url: endpoint,
|
2016-09-08 08:26:43 -04:00
|
|
|
success: (data) => {
|
2016-09-09 10:57:13 -04:00
|
|
|
const tabSelector = `div#${action}`;
|
2016-09-08 08:26:43 -04:00
|
|
|
this.$parentEl.find(tabSelector).html(data.html);
|
|
|
|
this.loaded[action] = true;
|
|
|
|
return gl.utils.localTimeAgo($('.js-timeago', tabSelector));
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2017-03-30 16:36:02 -04:00
|
|
|
loadActivities() {
|
2016-09-08 08:26:43 -04:00
|
|
|
if (this.loaded['activity']) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
const $calendarWrap = this.$parentEl.find('.user-calendar');
|
|
|
|
$calendarWrap.load($calendarWrap.data('href'));
|
2016-11-20 00:52:53 -05:00
|
|
|
new gl.Activities();
|
2016-09-08 08:26:43 -04:00
|
|
|
return this.loaded['activity'] = true;
|
|
|
|
}
|
|
|
|
|
|
|
|
toggleLoading(status) {
|
|
|
|
return this.$parentEl.find('.loading-status .loading')
|
|
|
|
.toggle(status);
|
|
|
|
}
|
|
|
|
|
2017-03-30 16:36:02 -04:00
|
|
|
setCurrentAction(source) {
|
2017-01-10 17:54:56 -05:00
|
|
|
let new_state = source;
|
2016-09-09 10:57:13 -04:00
|
|
|
new_state = new_state.replace(/\/+$/, '');
|
2016-09-08 08:26:43 -04:00
|
|
|
new_state += this._location.search + this._location.hash;
|
|
|
|
history.replaceState({
|
|
|
|
url: new_state
|
|
|
|
}, document.title, new_state);
|
|
|
|
return new_state;
|
2016-09-19 10:48:20 -04:00
|
|
|
}
|
2017-03-17 11:38:41 -04:00
|
|
|
|
|
|
|
getCurrentAction() {
|
|
|
|
return this.$parentEl.find('.nav-links .active a').data('action');
|
|
|
|
}
|
2016-09-08 08:26:43 -04:00
|
|
|
}
|
|
|
|
global.UserTabs = UserTabs;
|
|
|
|
})(window.gl || (window.gl = {}));
|