@@ -11,59 +11,6 @@ import { __ } from '~/locale';
1111import ActivityCalendar from './activity_calendar' ;
1212import UserOverviewBlock from './user_overview_block' ;
1313
14- /**
15- * UserTabs
16- *
17- * Handles persisting and restoring the current tab selection and lazily-loading
18- * content on the Users#show page.
19- *
20- * ### Example Markup
21- *
22- * <ul class="nav-links">
23- * <li class="activity-tab active">
24- * <a data-action="activity" data-target="#activity" data-toggle="tab" href="/username">
25- * Activity
26- * </a>
27- * </li>
28- * <li class="groups-tab">
29- * <a data-action="groups" data-target="#groups" data-toggle="tab" href="/users/username/groups">
30- * Groups
31- * </a>
32- * </li>
33- * <li class="contributed-tab">
34- * ...
35- * </li>
36- * <li class="projects-tab">
37- * ...
38- * </li>
39- * <li class="snippets-tab">
40- * ...
41- * </li>
42- * </ul>
43- *
44- * <div class="tab-content">
45- * <div class="tab-pane" id="activity">
46- * Activity Content
47- * </div>
48- * <div class="tab-pane" id="groups">
49- * Groups Content
50- * </div>
51- * <div class="tab-pane" id="contributed">
52- * Contributed projects content
53- * </div>
54- * <div class="tab-pane" id="projects">
55- * Projects content
56- * </div>
57- * <div class="tab-pane" id="snippets">
58- * Snippets content
59- * </div>
60- * </div>
61- *
62- * <div class="loading">
63- * Loading Animation
64- * </div>
65- */
66-
6714const CALENDAR_TEMPLATE = `
6815 <div class="calendar">
6916 <div class="js-contrib-calendar gl-overflow-x-auto"></div>
@@ -96,91 +43,64 @@ const CALENDAR_TEMPLATE = `
9643
9744const CALENDAR_PERIOD_12_MONTHS = 12 ;
9845
46+ const DEFAULT_LOADER_ACTIONS = [
47+ 'groups' ,
48+ 'contributed' ,
49+ 'projects' ,
50+ 'starred' ,
51+ 'snippets' ,
52+ 'followers' ,
53+ 'following' ,
54+ ] ;
55+
9956export default class UserTabs {
100- constructor ( { defaultAction, action, parentEl } ) {
101- this . loaded = { } ;
102- this . defaultAction = defaultAction || 'overview' ;
103- this . action = action || this . defaultAction ;
104- this . $parentEl = $ ( parentEl ) || $ ( document ) ;
57+ constructor ( { parentEl } ) {
58+ this . $legacyTabsContainer = $ ( '#js-legacy-tabs-container' ) ;
59+ this . $parentEl = $ ( parentEl || document ) ;
10560 this . windowLocation = window . location ;
106- this . $parentEl . find ( '.nav-links a' ) . each ( ( i , navLink ) => {
107- this . loaded [ $ ( navLink ) . attr ( 'data-action' ) ] = false ;
108- } ) ;
109- this . actions = Object . keys ( this . loaded ) ;
110- this . bindEvents ( ) ;
11161
112- // TODO: refactor to make this configurable via constructor params with a default value of 'show'
113- if ( this . action === 'show' ) {
114- this . action = this . defaultAction ;
115- }
62+ const action = this . $legacyTabsContainer . data ( 'action' ) ;
63+ const endpoint = this . $legacyTabsContainer . data ( 'endpoint' ) ;
11664
117- this . activateTab ( this . action ) ;
65+ this . bindPaginationEvent ( ) ;
66+ this . loadPage ( action , endpoint ) ;
11867 }
11968
120- bindEvents ( ) {
121- this . $parentEl
122- . off ( 'shown.bs.tab' , '.nav-links a[data-toggle="tab"]' )
123- . on ( 'shown.bs.tab' , '.nav-links a[data-toggle="tab"]' , ( event ) => this . tabShown ( event ) )
124- . on ( 'click' , '.gl-pagination a' , ( event ) => this . changeProjectsPage ( event ) ) ;
69+ bindPaginationEvent ( ) {
70+ this . $parentEl . on ( 'click' , '.gl-pagination a' , ( event ) => this . changePage ( event ) ) ;
12571 }
12672
127- changeProjectsPage ( e ) {
73+ changePage ( e ) {
12874 e . preventDefault ( ) ;
12975
130- $ ( '.tab-pane.active ' ) . empty ( ) ;
76+ $ ( '#js-legacy-tabs-container ' ) . empty ( ) ;
13177 const endpoint = $ ( e . target ) . attr ( 'href' ) ;
132- this . loadTab ( this . getCurrentAction ( ) , endpoint ) ;
133- }
134-
135- tabShown ( event ) {
136- const $target = $ ( event . target ) ;
137- const action = $target . data ( 'action' ) ;
138- const source = $target . attr ( 'href' ) ;
139- const endpoint = $target . data ( 'endpoint' ) ;
140- this . setTab ( action , endpoint ) ;
141- return this . setCurrentAction ( source ) ;
142- }
143-
144- activateTab ( action ) {
145- return this . $parentEl . find ( `.nav-links .js-${ action } ) . tab ( 'show' ) ;
78+ const action = this . $legacyTabsContainer . data ( 'action' ) ;
79+ this . loadPage ( action , endpoint ) ;
14680 }
14781
148- setTab ( action , endpoint ) {
149- if ( this . loaded [ action ] ) {
150- return ;
151- }
82+ loadPage ( action , endpoint ) {
15283 if ( action === 'activity' ) {
153- this . loadActivities ( ) ;
84+ // eslint-disable-next-line no-new
85+ new Activities ( '#js-legacy-tabs-container' ) ;
15486 } else if ( action === 'overview' ) {
155- this . loadOverviewTab ( ) ;
156- }
157-
158- const loadableActions = [
159- 'groups' ,
160- 'contributed' ,
161- 'projects' ,
162- 'starred' ,
163- 'snippets' ,
164- 'followers' ,
165- 'following' ,
166- ] ;
167- if ( loadableActions . indexOf ( action ) > - 1 ) {
168- this . loadTab ( action , endpoint ) ;
87+ this . loadOverviewPage ( ) ;
88+ } else if ( DEFAULT_LOADER_ACTIONS . includes ( action ) ) {
89+ this . defaultPageLoader ( action , endpoint ) ;
16990 }
17091 }
17192
172- loadTab ( action , endpoint ) {
93+ defaultPageLoader ( action , endpoint ) {
17394 this . toggleLoading ( true ) ;
17495
17596 const params = action === 'projects' ? { skip_namespace : true } : { } ;
17697
17798 return axios
17899 . get ( endpoint , { params } )
179100 . then ( ( { data } ) => {
180- const tabSelector = `div#${ action } ;
181- this . $parentEl . find ( tabSelector ) . html ( data . html ) ;
182- this . loaded [ action ] = true ;
183- localTimeAgo ( document . querySelectorAll ( `${ tabSelector } ) ) ;
101+ const containerSelector = `div#js-legacy-tabs-container` ;
102+ this . $parentEl . find ( containerSelector ) . html ( data . html ) ;
103+ localTimeAgo ( document . querySelectorAll ( `${ containerSelector } ) ) ;
184104
185105 this . toggleLoading ( false ) ;
186106 } )
@@ -189,35 +109,18 @@ export default class UserTabs {
189109 } ) ;
190110 }
191111
192- loadActivities ( ) {
193- if ( this . loaded . activity ) {
194- return ;
195- }
196-
197- // eslint-disable-next-line no-new
198- new Activities ( '#activity' ) ;
199-
200- this . loaded . activity = true ;
201- }
202-
203- loadOverviewTab ( ) {
204- if ( this . loaded . overview ) {
205- return ;
206- }
207-
112+ loadOverviewPage ( ) {
208113 initReadMore ( ) ;
209114
210115 this . loadActivityCalendar ( ) ;
211116
212- UserTabs . renderMostRecentBlocks ( '#js-overview .activities-block' , {
117+ UserTabs . renderMostRecentBlocks ( '#js-legacy-tabs-container .activities-block' , {
213118 requestParams : { limit : 15 } ,
214119 } ) ;
215120
216- UserTabs . renderMostRecentBlocks ( '#js-overview .projects-block' , {
121+ UserTabs . renderMostRecentBlocks ( '#js-legacy-tabs-container .projects-block' , {
217122 requestParams : { limit : 3 , skip_pagination : true , skip_namespace : true , card_mode : true } ,
218123 } ) ;
219-
220- this . loaded . overview = true ;
221124 }
222125
223126 static renderMostRecentBlocks ( container , options ) {
@@ -234,7 +137,7 @@ export default class UserTabs {
234137 }
235138
236139 loadActivityCalendar ( ) {
237- const $calendarWrap = this . $parentEl . find ( '.tab-pane.active . user-calendar' ) ;
140+ const $calendarWrap = this . $parentEl . find ( '.user-calendar' ) ;
238141 const calendarPath = $calendarWrap . data ( 'calendarPath' ) ;
239142
240143 AjaxCache . retrieve ( calendarPath )
@@ -265,9 +168,9 @@ export default class UserTabs {
265168
266169 // eslint-disable-next-line no-new
267170 new ActivityCalendar ( {
268- container : '.tab-pane.active .js-contrib-calendar' ,
269- activitiesContainer : '.tab-pane.active .user-calendar-activities' ,
270- recentActivitiesContainer : '.tab-pane.active .overview-content-list' ,
171+ container : '#js-legacy-tabs-container .js-contrib-calendar' ,
172+ activitiesContainer : '#js-legacy-tabs-container .user-calendar-activities' ,
173+ recentActivitiesContainer : '#js-legacy-tabs-container .overview-content-list' ,
271174 timestamps : data ,
272175 calendarActivitiesPath,
273176 utcOffset,
@@ -283,22 +186,4 @@ export default class UserTabs {
283186 toggleLoading ( status ) {
284187 return this . $parentEl . find ( '.loading' ) . toggleClass ( 'hide' , ! status ) ;
285188 }
286-
287- setCurrentAction ( source ) {
288- let newState = source ;
289- newState = newState . replace ( / \/ + $ / , '' ) ;
290- newState += this . windowLocation . search + this . windowLocation . hash ;
291- window . history . replaceState (
292- {
293- url : newState ,
294- } ,
295- document . title ,
296- newState ,
297- ) ;
298- return newState ;
299- }
300-
301- getCurrentAction ( ) {
302- return this . $parentEl . find ( '.nav-links a.active' ) . data ( 'action' ) ;
303- }
304189}
0 commit comments