Completed
Push — js-scrutinizing ( 3d2f6f...f0d2d0 )
by Maxence
02:18
created

$(document).ready   A

Complexity

Conditions 4
Paths 2

Size

Total Lines 20

Duplication

Lines 0
Ratio 0 %

Importance

Changes 0
Metric Value
cc 4
nc 2
nop 1
dl 0
loc 20
rs 9.2
c 0
b 0
f 0
1
/*
2
 * Circles - Bring cloud-users closer together.
3
 *
4
 * This file is licensed under the Affero General Public License version 3 or
5
 * later. See the COPYING file.
6
 *
7
 * @author Maxence Lange <[email protected]>
8
 * @copyright 2017
9
 * @license GNU AGPL version 3 or any later version
10
 *
11
 * This program is free software: you can redistribute it and/or modify
12
 * it under the terms of the GNU Affero General Public License as
13
 * published by the Free Software Foundation, either version 3 of the
14
 * License, or (at your option) any later version.
15
 *
16
 * This program is distributed in the hope that it will be useful,
17
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
18
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
19
 * GNU Affero General Public License for more details.
20
 *
21
 * You should have received a copy of the GNU Affero General Public License
22
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
23
 *
24
 */
25
26
/** global: OC */
27
/** global: OCA */
28
/** global: Notyf */
29
30
$(document).ready(function () {
31
32
	/**
33
	 * @constructs Navigation
34
	 */
35
	var Navigation = function () {
36
		this.initialize();
37
38
	};
39
40
41
	Navigation.prototype = {
42
43
44
		initialize: function () {
45
46
			var api = OCA.Circles.api;
47
			//	var actions = OCA.Circles.actions;
48
49
			var self = this;
50
51
			var currCirclesType = '';
52
			var currentCircle = 0;
53
			var currentCircleLevel = 0;
54
			var lastSearchCircle = '';
55
			var lastSearchUser = '';
56
57
			var divNewTypeDefinition = $('#circles_new_type_definition');
58
			var divNewType = $('#circles_new_type');
59
			var divNewSubmit = $('#circles_new_submit');
60
			var divNewName = $('#circles_new_name');
61
			var divNavigation = $('#app-navigation.circles');
62
			var divCirclesList = $('#circles_list');
63
			var divEmptyContent = $('#emptycontent');
64
			var divMainUI = $('#mainui');
65
			var divMainUIMembers = $('#memberslist_table');
66
			var divMembersSearchResult = $('#members_search_result');
67
68
			var divJoinCircleAccept = $('#joincircle_acceptinvit');
69
			var divJoinCircleReject = $('#joincircle_rejectinvit');
70
			var divJoinCircleRequest = $('#joincircle_request');
71
			var divJoinCircleInvite = $('#joincircle_invit');
72
			var divJoinCircle = $('#joincircle');
73
			var divLeaveCircle = $('#leavecircle');
74
			var divAddMember = $('#addmember');
75
76
77
			/**
78
			 *
79
			 * @constructor
80
			 */
81
			this.UIReset = function () {
82
				divNewTypeDefinition.children('div').fadeOut(0);
83
				$('#circles_new_type_' + divNewType.children('option:selected').val()).fadeIn(
84
					0);
85
86
				divNewType.hide();
87
				divNewSubmit.hide();
88
				divNewTypeDefinition.hide();
89
90
				$('.icon-circles').css('background-image',
91
					'url(' + OC.imagePath('circles', 'colored') + ')');
92
93
				divMembersSearchResult.hide();
94
			};
95
96
			/**
97
			 *
98
			 */
99
			this.initTweaks = function () {
100
				$.fn.emptyTable = function () {
101
					this.children('tr').each(function () {
102
						if ($(this).attr('class') != 'header') {
103
							$(this).remove();
104
						}
105
					});
106
				};
107
108
109
			};
110
111
112
			this.initExperienceMembersManagment = function () {
113
				divJoinCircle.on('click', function () {
114
					api.joinCircle(currentCircle, self.joinCircleResult);
115
				});
116
117
				divLeaveCircle.on('click', function () {
118
					api.leaveCircle(currentCircle, self.leaveCircleResult);
119
				});
120
121
				divJoinCircleAccept.on('click', function () {
122
					api.joinCircle(currentCircle, self.joinCircleResult);
123
				});
124
125
				divJoinCircleReject.on('click', function () {
126
					api.leaveCircle(currentCircle, self.leaveCircleResult);
127
				});
128
129
				divAddMember.on('input propertychange paste focus', function () {
130
					self.searchMembersRequest($(this).val().trim());
131
				}).blur(function () {
132
					divMembersSearchResult.fadeOut(400);
133
				});
134
			};
135
136
137
			this.displayMembersInteraction = function (details) {
138
				if (details.user.level < 6) {
139
					divAddMember.hide();
140
				} else {
141
					divAddMember.show();
142
				}
143
144
				this.displayNonMemberInteraction(details);
145
146
				if (details.user.level == 9) {
147
					divJoinCircle.hide();
148
					divLeaveCircle.hide();
149
					return;
150
				}
151
152
				if (details.user.level >= 1) {
153
					divJoinCircle.hide();
154
					divLeaveCircle.show();
155
				}
156
157
			};
158
159
160
			this.displayNonMemberInteraction = function (details) {
161
				divJoinCircleAccept.hide();
162
				divJoinCircleReject.hide();
163
				divJoinCircleRequest.hide();
164
				divJoinCircleInvite.hide();
165
166
				if (details.user.status == 'Invited') {
167
					divJoinCircleInvite.show();
168
					divJoinCircleAccept.show();
169
					divJoinCircleReject.show();
170
					divJoinCircle.hide();
171
					divLeaveCircle.hide();
172
					return;
173
				}
174
175
				if (details.user.status == 'Requesting') {
176
					divJoinCircleRequest.show();
177
					divJoinCircle.hide();
178
					divLeaveCircle.show();
179
					return;
180
				}
181
182
				divJoinCircle.show();
183
				divLeaveCircle.hide();
184
			};
185
186
187
			/**
188
			 *
189
			 */
190
			this.initAnimationNewCircle = function () {
191
192
				divNewName.on('keyup', function () {
193
					self.onEventNewCircleName();
194
				});
195
196
				divNewType.on('change', function () {
197
					self.onEventNewCircleType();
198
				});
199
200
				divNewSubmit.on('click', function () {
201
					api.createCircle(divNewType.val(), divNewName.val(),
202
						self.createCircleResult);
203
				});
204
205
			};
206
207
208
			/**
209
			 *
210
			 */
211
			this.onEventNewCircle = function () {
212
213
				currentCircle = 0;
214
				currentCircleLevel = 0;
215
216
				divNavigation.hide('slide', 800);
217
				divCirclesList.children('div').removeClass('selected');
218
				divEmptyContent.show(800);
219
				divMainUI.fadeOut(800);
220
			};
221
222
			/**
223
			 *
224
			 */
225
			this.onEventNewCircleName = function () {
226
				this.onEventNewCircle();
227
				this.displayOptionsNewCircle((divNewName.val() !== ''));
228
			};
229
230
			/**
231
			 *
232
			 */
233
			this.onEventNewCircleType = function () {
234
				this.onEventNewCircle();
235
				divNewTypeDefinition.children('div').fadeOut(300);
236
				$('#circles_new_type_' + divNewType.children('option:selected').val()).fadeIn(
237
					300);
238
			};
239
240
			/**
241
			 *
242
			 * @param display
243
			 */
244
			this.displayOptionsNewCircle = function (display) {
245
				if (display) {
246
					divNewType.fadeIn(300);
247
					divNewSubmit.fadeIn(500);
248
					divNewTypeDefinition.fadeIn(700);
249
				}
250
				else {
251
					divNewType.fadeOut(700);
252
					divNewSubmit.fadeOut(500);
253
					divNewTypeDefinition.fadeOut(300);
254
				}
255
			};
256
257
258
			/**
259
			 *
260
			 */
261
			this.initExperienceCirclesList = function () {
262
263
				divCirclesList.children('div').on('click', function () {
264
					self.displayCirclesList($(this).attr('circle-type'));
265
				});
266
267
				$('#circles_search').on('input propertychange paste focus', function () {
268
					if (lastSearchCircle == $(this).val().trim()) {
269
						return;
270
					}
271
272
					lastSearchCircle = $(this).val().trim();
273
					api.searchCircles(currCirclesType, $(this).val().trim(),
274
						self.listCirclesResult);
275
				});
276
277
			};
278
279
280
			/**
281
			 *
282
			 * @param result
283
			 */
284
			this.createCircleResult = function (result) {
285
				var str = self.getStringTypeFromType(result.type);
286
287
				if (result.status == 1) {
288
					OCA.notification.onSuccess(str + " '" + result.name + "' created");
289
					self.displayCirclesList(result.circle.type);
290
					self.selectCircle(result.circle.id);
291
					return;
292
				}
293
294
				OCA.notification.onFail(
295
					str + " '" + result.name + "' NOT created: " +
296
					((result.error) ? result.error : 'no error message'));
297
			};
298
299
300
			/**
301
			 *
302
			 * @param type
303
			 * @returns {*}
304
			 */
305
			this.getStringTypeFromType = function (type) {
306
				switch (type) {
0 ignored issues
show
Coding Style introduced by
As per coding-style, switch statements should have a default case.
Loading history...
307
					case '1':
308
						return 'Personal circle';
309
					case '2':
310
						return 'Hidden circle';
311
					case '4':
312
						return 'Private circle';
313
					case '8':
314
						return 'Public circle';
315
				}
316
317
				return 'Circle';
318
			};
319
320
321
			/**
322
			 *
323
			 * @param type
324
			 */
325
			this.displayCirclesList = function (type) {
326
327
				currCirclesType = type;
328
				lastSearchCircle = '';
329
				lastSearchUser = '';
330
331
				currentCircle = 0;
332
				currentCircleLevel = 0;
333
334
				divNavigation.show('slide', 800);
335
				divEmptyContent.show(800);
336
				divMainUI.fadeOut(800);
337
338
				$('#circles_search').val('');
339
				$('#addmember').val('');
340
341
				this.UIresetCirclesList(type);
342
				api.listCircles(type, self.listCirclesResult);
343
			};
344
345
346
			/**
347
			 *
348
			 * @constructor
349
			 */
350
			this.UIresetCirclesList = function (type) {
351
352
				divCirclesList.children('div').removeClass('selected');
353
				divCirclesList.children().each(function () {
354
					if ($(this).attr('circle-type') == type.toLowerCase()) {
355
						$(this).addClass('selected');
356
					}
357
				});
358
359
				divNavigation.addClass('selected');
360
				divNavigation.children().each(function () {
361
					if ($(this).attr('id') != 'circles_search') {
362
						$(this).remove();
363
					}
364
				});
365
			};
366
367
368
			/**
369
			 *
370
			 * @param result
371
			 */
372
			this.listCirclesResult = function (result) {
373
374
				if (result.status < 1) {
375
					OCA.notification.onFail(
376
						'Issue while retreiving the list of the Circles: ' +
377
						((result.error) ? result.error : 'no error message'));
378
					return;
379
				}
380
381
				var data = result.data;
382
				for (var i = 0; i < data.length; i++) {
383
					var tmpl = self.generateTmplCircle(data[i]);
384
					divNavigation.append(
385
						'<div class="circle" circle-id="' + data[i].id + '">' + tmpl +
386
						'</div>');
387
				}
388
389
				divNavigation.children('.circle').on('click', function () {
390
					self.selectCircle($(this).attr('circle-id'));
391
				});
392
			};
393
394
395
			/**
396
			 *
397
			 * @returns {*|jQuery}
398
			 * @param entry
399
			 */
400
			this.generateTmplCircle = function (entry) {
401
				var tmpl = $('#tmpl_circle').html();
402
403
				tmpl = tmpl.replace(/%title%/, entry.name);
404
				tmpl = tmpl.replace(/%type%/, entry.type);
405
				tmpl = tmpl.replace(/%owner%/, entry.owner.user_id);
406
				tmpl = tmpl.replace(/%status%/, entry.user.status);
407
				tmpl = tmpl.replace(/%level_string%/, entry.user.level_string);
408
				tmpl = tmpl.replace(/%count%/, entry.count);
409
				tmpl = tmpl.replace(/%creation%/, entry.creation);
410
411
				return tmpl;
412
			};
413
414
415
			/**
416
			 *
417
			 * @param circle_id
418
			 */
419
			this.selectCircle = function (circle_id) {
420
				lastSearchUser = '';
421
				$('#addmember').val('');
422
423
				api.detailsCircle(circle_id, this.selectCircleResult);
424
			};
425
426
427
			this.selectCircleResult = function (result) {
428
429
				divMainUIMembers.emptyTable();
430
431
				if (result.status < 1) {
432
					OCA.notification.onFail(
433
						'Issue while retreiving the details of a circle: ' +
434
						((result.error) ? result.error : 'no error message'));
435
					return;
436
				}
437
438
				divNavigation.children('.circle').removeClass('selected');
439
				divNavigation.children(".circle[circle-id='" + result.circle_id + "']").each(
440
					function () {
441
						$(this).addClass('selected');
442
					});
443
444
				divEmptyContent.hide(800);
445
				divMainUI.fadeIn(800);
446
				currentCircle = result.circle_id;
447
				currentCircleLevel = result.details.user.level;
448
449
				self.displayMembersInteraction(result.details);
450
				self.displayMembers(result.details.members);
451
			};
452
453
454
			/**
455
			 *
456
			 * @param search
457
			 */
458
			this.searchMembersRequest = function (search) {
459
460
				if (lastSearchUser == search) {
461
					return;
462
				}
463
464
				lastSearchUser = search;
465
466
				$.get(OC.linkToOCS('apps/files_sharing/api/v1', 1) + 'sharees',
467
					{
468
						format: 'json',
469
						search: search,
470
						perPage: 200,
471
						itemType: 'principals'
472
					}, self.searchMembersResult);
473
			};
474
475
476
			this.searchMembersResult = function (response) {
477
478
				if (response === null ||
479
					(response.ocs.data.users === 0 && response.ocs.data.exact.users === 0)) {
480
					divMembersSearchResult.fadeOut(300);
481
					return;
482
				}
483
484
				divMembersSearchResult.children().remove();
485
486
				self.searchMembersResultFill(response.ocs.data.exact.users,
487
					response.ocs.data.users);
488
489
				$('.members_search').on('click', function () {
490
					api.addMember(currentCircle, $(this).attr('searchresult'),
491
						self.addMemberResult);
492
				});
493
				divMembersSearchResult.fadeIn(300);
494
495
			};
496
497
498
			this.searchMembersResultFill = function (exact, partial) {
499
				$.each(exact, function (index, value) {
500
					divMembersSearchResult.append(
501
						'<div class="members_search exact" searchresult="' +
502
						value.value.shareWith + '">' + value.label + '   (' +
503
						value.value.shareWith + ')</div>');
504
				});
505
506
				$.each(partial, function (index, value) {
507
					var currSearch = $('#addmember').val().trim();
508
					var line = value.label + '   (' + value.value.shareWith + ')';
509
					if (currSearch.length > 0) {
510
						line =
511
							line.replace(new RegExp('(' + currSearch + ')', 'gi'),
512
								'<b>$1</b>');
513
					}
514
515
					divMembersSearchResult.append(
516
						'<div class="members_search" searchresult="' +
517
						value.value.shareWith +
518
						'">' + line + '</div>');
519
				});
520
521
				divMembersSearchResult.children().first().css('border-top-width', '0px');
522
			};
523
524
525
			/**
526
			 *
527
			 * @param result
528
			 */
529
			this.addMemberResult = function (result) {
530
531
				if (result.status == 1) {
532
					OCA.notification.onSuccess(
533
						"Member '" + result.name + "' successfully added to the circle");
534
535
					self.displayMembers(result.members);
536
					return;
537
				}
538
				OCA.notification.onFail(
539
					"Member '" + result.name + "' NOT added to the circle: " +
540
					((result.error) ? result.error : 'no error message'));
541
			};
542
543
544
			this.generateTmplMember = function (entry) {
545
				var tmpl = $('#tmpl_member').html();
546
547
				tmpl = tmpl.replace(/%username%/g, entry.user_id);
548
				tmpl = tmpl.replace(/%level%/g, entry.level);
549
				tmpl = tmpl.replace(/%levelstring%/g, entry.level_string);
550
				tmpl = tmpl.replace(/%status%/, entry.status);
551
				tmpl = tmpl.replace(/%joined%/, entry.joined);
552
				tmpl = tmpl.replace(/%note%/, entry.note);
553
554
				return tmpl;
555
			};
556
557
558
			this.displayMembers = function (members) {
559
560
				divMainUIMembers.emptyTable();
561
562
				if (members === null) {
563
					divMainUIMembers.hide(200);
564
					return;
565
				}
566
567
				divMainUIMembers.show(200);
568
				for (var i = 0; i < members.length; i++) {
569
					divMainUIMembers.append(this.generateTmplMember(members[i]));
570
				}
571
572
				if (currentCircleLevel >= 6) {
573
					divMainUIMembers.children("[member-level!='9']").each(function () {
574
						$(this).children('.delete').show(0);
575
					});
576
577
					divMainUIMembers.children('.delete').on('click', function () {
578
						var member = $(this).parent().attr('member-id');
579
						api.removeMember(currentCircle, member, self.removeMemberResult);
580
					});
581
				}
582
583
			};
584
585
586
			this.removeMemberResult = function (result) {
587
				if (result.status == 1) {
588
589
					divMainUIMembers.children("[member-id='" + result.name + "']").each(
590
						function () {
591
							$(this).hide(300);
592
						});
593
					OCA.notification.onSuccess(
594
						"Member '" + result.name + "' successfully removed from the circle");
595
					return;
596
				}
597
598
				OCA.notification.onFail(
599
					"Member '" + result.name + "' NOT removed from the circle: " +
600
					((result.error) ? result.error : 'no error message'));
601
			};
602
603
604
			this.joinCircleResult = function (result) {
605
				if (result.status == 1) {
606
607
					divMainUIMembers.children("[member-id='" + result.name + "']").each(
608
						function () {
609
							$(this).hide(300);
610
						});
611
612
					if (result.member.level == 1) {
613
						OCA.notification.onSuccess(
614
							"You have successfully joined this circle");
615
					} else {
616
						OCA.notification.onSuccess(
617
							"You have requested an invitation to join this circle");
618
					}
619
					self.selectCircle(result.circle_id);
620
					return;
621
				}
622
623
				OCA.notification.onFail(
624
					"Cannot join this circle: " +
625
					((result.error) ? result.error : 'no error message'));
626
627
			};
628
629
			this.leaveCircleResult = function (result) {
630
				if (result.status == 1) {
631
632
					divMainUIMembers.children("[member-id='" + result.name + "']").each(
633
						function () {
634
							$(this).hide(300);
635
						});
636
637
					self.selectCircle(result.circle_id);
638
					OCA.notification.onSuccess(
639
						"You have successfully left this circle");
640
					return;
641
				}
642
643
				OCA.notification.onFail(
644
					"Cannot leave this circle: " +
645
					((result.error) ? result.error : 'no error message'));
646
647
			};
648
649
650
			/**
651
			 * Inits
652
			 */
653
			this.initTweaks();
654
			this.UIReset();
655
			this.initAnimationNewCircle();
656
			this.initExperienceCirclesList();
657
			this.initExperienceMembersManagment();
658
		}
659
	};
660
661
662
	/**
663
	 * @constructs Notification
664
	 */
665
	var Notification = function () {
666
		this.initialize();
667
	};
668
669
	Notification.prototype = {
670
671
		initialize: function () {
672
673
			//noinspection SpellCheckingInspection
674
			var notyf = new Notyf({
675
				delay: 5000
676
			});
677
678
			this.onSuccess = function (text) {
679
				notyf.confirm(text);
680
			};
681
682
			this.onFail = function (text) {
683
				notyf.alert(text);
684
			};
685
686
		}
687
688
	};
689
690
	OCA.Circles.Navigation = Navigation;
691
	OCA.Circles.navigation = new Navigation();
692
693
	OCA.Notification = Notification;
694
	OCA.notification = new Notification();
695
696
});
697
698