summaryrefslogtreecommitdiff
path: root/app
diff options
context:
space:
mode:
authorBryce Johnson <bryce@gitlab.com>2016-09-08 14:26:43 +0200
committerBryce Johnson <bryce@gitlab.com>2016-10-05 11:25:00 +0200
commitcfb03b3d06a3dbd16c6e193a128bb737a0a327fd (patch)
tree74c4298e8ccc356e0cf1ff3373c16801f19b099b /app
parent2dc40f3c8061951624c1e922661311af650f2ef2 (diff)
downloadgitlab-ce-cfb03b3d06a3dbd16c6e193a128bb737a0a327fd.tar.gz
Refactor UserTabs to ES6.
Diffstat (limited to 'app')
-rw-r--r--app/assets/javascripts/user.js.es62
-rw-r--r--app/assets/javascripts/user_tabs.js.es6160
2 files changed, 161 insertions, 1 deletions
diff --git a/app/assets/javascripts/user.js.es6 b/app/assets/javascripts/user.js.es6
index 6889d3a7491..c5893745d74 100644
--- a/app/assets/javascripts/user.js.es6
+++ b/app/assets/javascripts/user.js.es6
@@ -14,7 +14,7 @@
}
initTabs() {
- return new UserTabs({
+ return new global.UserTabs({
parentEl: '.user-profile',
action: this.opts.action
});
diff --git a/app/assets/javascripts/user_tabs.js.es6 b/app/assets/javascripts/user_tabs.js.es6
new file mode 100644
index 00000000000..b787700070e
--- /dev/null
+++ b/app/assets/javascripts/user_tabs.js.es6
@@ -0,0 +1,160 @@
+/*
+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>
+*/
+(global => {
+ class UserTabs {
+ constructor (opts) {
+ this.loaded = {};
+ this.defaultAction = opts.defaultAction || 'activity';
+ this.action = opts.action || 'activity';
+ this.$parentEl = $(opts.parentEl) || $(document);
+ 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() {
+ return this.$parentEl.off('shown.bs.tab', '.nav-links a[data-toggle="tab"]')
+ .on('shown.bs.tab', '.nav-links a[data-toggle="tab"]', (event) => this.tabShown(event));
+ }
+
+ tabShown(event) {
+ const $target = $(event.target);
+ const action = $target.data('action');
+ const source = $target.attr('href');
+ this.setTab(source, action);
+ return this.setCurrentAction(action);
+ }
+
+ activateTab(action) {
+ return this.$parentEl.find(".nav-links .js-" + action + "-tab a")
+ .tab('show');
+ }
+
+ setTab(source, action) {
+ if (this.loaded[action]) {
+ return;
+ }
+ if (action === 'activity') {
+ this.loadActivities(source);
+ }
+ if (action === 'groups' || action === 'contributed' || action === 'projects' || action === 'snippets') {
+ return this.loadTab(source, action);
+ }
+ }
+
+ loadTab(source, action) {
+ return $.ajax({
+ beforeSend: () => this.toggleLoading(true),
+ complete: () => this.toggleLoading(false),
+ dataType: 'json',
+ type: 'GET',
+ url: source + ".json",
+ success: (data) => {
+ const tabSelector = 'div#' + action;
+ this.$parentEl.find(tabSelector).html(data.html);
+ this.loaded[action] = true;
+ return gl.utils.localTimeAgo($('.js-timeago', tabSelector));
+ }
+ });
+ }
+
+ loadActivities(source) {
+ if (this.loaded['activity']) {
+ return;
+ }
+ const $calendarWrap = this.$parentEl.find('.user-calendar');
+ $calendarWrap.load($calendarWrap.data('href'));
+ new Activities();
+ return this.loaded['activity'] = true;
+ }
+
+ toggleLoading(status) {
+ return this.$parentEl.find('.loading-status .loading')
+ .toggle(status);
+ }
+
+ setCurrentAction(action) {
+ const regExp = new RegExp('\/(' + this.actions.join('|') + ')(\.html)?\/?$');
+ let new_state = this._location.pathname;
+ new_state = new_state.replace(/\/+$/, "");
+ new_state = new_state.replace(regExp, '');
+ if (action !== this.defaultAction) {
+ new_state += "/" + action;
+ }
+ new_state += this._location.search + this._location.hash;
+ history.replaceState({
+ turbolinks: true,
+ url: new_state
+ }, document.title, new_state);
+ return new_state;
+ };
+ }
+ global.UserTabs = UserTabs;
+})(window.gl || (window.gl = {}));