Refactor sharing UI; bug fixes, code clean-up, and more efficient with less ajax calls

1 files changed, 306 insertions, 212 deletions

diff --git a/apps/files_sharing/js/share.js b/apps/files_sharing/js/share.js
index d9750761fc7..65118f5e85c 100644
--- a/apps/files_sharing/js/share.js
+++ b/apps/files_sharing/js/share.js
@@ -1,100 +1,270 @@
+OC.Share={
+	icons:[],
+	itemUsers:[],
+	itemGroups:[],
+	itemPrivateLink:false,
+	usersAndGroups:[],
+	loadIcons:function() {
+		// Cache all icons for shared files
+		$.getJSON(OC.filePath('files_sharing', 'ajax', 'getstatuses.php'), function(result) {
+			if (result && result.status === 'success') {
+				$.each(result.data, function(item, hasPrivateLink) {
+					if (hasPrivateLink) {
+						OC.Share.icons[item] = OC.imagePath('core', 'actions/public');
+					} else {
+						OC.Share.icons[item] = OC.imagePath('core', 'actions/shared');
+					}
+				});
+			}
+		});
+	},
+	loadItem:function(item) {
+		$.ajax({type: 'GET', url: OC.filePath('files_sharing', 'ajax', 'getitem.php'), data: { item: item }, async: false, success: function(result) {
+			if (result && result.status === 'success') {
+				var item = result.data;
+				OC.Share.itemUsers = item.users;
+				OC.Share.itemGroups = item.groups;
+				OC.Share.itemPrivateLink = item.privateLink;
+			}
+		}});
+	},
+	share:function(source, uid_shared_with, permissions, callback) {
+		$.post(OC.filePath('files_sharing', 'ajax', 'share.php'), { sources: source, uid_shared_with: uid_shared_with, permissions: permissions }, function(result) {
+			if (result && result.status === 'success') {
+				if (callback) {
+					callback(result.data);
+				}
+			} else {
+				OC.dialogs.alert('Error', 'Error while sharing');
+			}
+		});
+	},
+	unshare:function(source, uid_shared_with, callback) {
+		$.post(OC.filePath('files_sharing', 'ajax', 'unshare.php'), { source: source, uid_shared_with: uid_shared_with }, function(result) {
+			if (result && result.status === 'success') {
+				if (callback) {
+					callback();
+				}
+			} else {
+				OC.dialogs.alert('Error', 'Error while unsharing');
+			}
+		});
+	},
+	changePermissions:function(source, uid_shared_with, permissions) {
+		$.post(OC.filePath('files_sharing','ajax','setpermissions.php'), { source: source, uid_shared_with: uid_shared_with, permissions: permissions }, function(result) {
+			if (!result || result.status !== 'success') {
+				OC.dialogs.alert('Error', 'Error while changing permissions');
+			}
+		});
+	},
+	showDropDown:function(item, appendTo) {
+		OC.Share.loadItem(item);
+		var html = '<div id="dropdown" class="drop" data-item="'+item+'">';
+		html += '<select data-placeholder="User or Group" id="share_with" class="chzen-select">';
+		html += '<option value=""></option>';
+		html += '</select>';
+		html += '<div id="sharedWithList">';
+		html += '<ul id="userList"></ul>';
+		html += '<div id="groups" style="display:none;">';
+		html += '<br />';
+		html += 'Groups: ';
+		html += '<ul id="groupList"></ul>';
+		html += '</div>';
+		html += '</div>';
+		html += '<div id="privateLink">';
+		html += '<input type="checkbox" name="privateLinkCheckbox" id="privateLinkCheckbox" value="1" /><label for="privateLinkCheckbox">Share with private link</label>';
+		html += '<br />';
+		html += '<input id="privateLinkText" style="display:none; width:90%;" />';
+		html += '<input id="email" style="display:none; width:65%;" value="" placeholder="Email link to person" />';
+		html += '<input id="emailButton" style="display:none;" type="submit" value="Send" />';
+		html += '</div>';
+		$(html).appendTo(appendTo);
+		if (OC.Share.usersAndGroups.length < 1) {
+			$.getJSON(OC.filePath('files_sharing', 'ajax', 'userautocomplete.php'), function(users) {
+				if (users) {
+					OC.Share.usersAndGroups = users;
+					$.each(users, function(index, user) {
+						$(user).appendTo('#share_with');
+					});
+					$('#share_with').trigger('liszt:updated');
+				}
+			});
+		} else {
+			$.each(OC.Share.usersAndGroups, function(index, user) {
+				$(user).appendTo('#share_with');
+			});
+			$('#share_with').trigger('liszt:updated');
+		}
+		if (OC.Share.itemUsers) {
+			$.each(OC.Share.itemUsers, function(index, user) {
+				if (user.parentFolder) {
+					OC.Share.addSharedWith(user.uid, user.permissions, false, user.parentFolder);
+				} else {
+					OC.Share.addSharedWith(user.uid, user.permissions, false, false);
+				}
+			});
+		}
+		if (OC.Share.itemGroups) {
+			$.each(OC.Share.itemGroups, function(index, group) {
+				if (group.parentFolder) {
+					OC.Share.addSharedWith(group.gid, group.permissions, group.users, group.parentFolder);
+				} else {
+					OC.Share.addSharedWith(group.gid, group.permissions, group.users, false);
+				}
+			});
+		}
+		if (OC.Share.itemPrivateLink) {
+			OC.Share.showPrivateLink(item, OC.Share.itemPrivateLink);
+		}
+		$('#dropdown').show('blind');
+		$('#share_with').chosen();
+	},
+	hideDropDown:function(callback) {
+		$('#dropdown').hide('blind', function() {
+			$('#dropdown').remove();
+			if (callback) {
+				callback.call();
+			}
+		});
+	},
+	addSharedWith:function(uid_shared_with, permissions, isGroup, parentFolder) {
+		if (parentFolder) {
+			var sharedWith = '<li>Parent folder '+parentFolder+' shared with '+uid_shared_with+'</li>';
+		} else {
+			var checked = ((permissions > 0) ? 'checked="checked"' : 'style="display:none;"');
+			var style = ((permissions == 0) ? 'style="display:none;"' : '');
+			var sharedWith = '<li data-uid_shared_with="'+uid_shared_with+'">';
+			sharedWith += '<a href="" class="unshare" style="display:none;"><img class="svg" alt="Unshare" src="'+OC.imagePath('core','actions/delete')+'"/></a>';
+			sharedWith += uid_shared_with;
+			sharedWith += '<input type="checkbox" name="permissions" id="'+uid_shared_with+'" class="permissions" '+checked+' />';
+			sharedWith += '<label class="edit" for="'+uid_shared_with+'" '+style+'>can edit</label>';
+			sharedWith += '</li>';
+		}
+		if (isGroup) {
+			// Groups are added to a different list
+			$('#groups').show();
+			$(sharedWith).appendTo('#groupList');
+			// Remove group from select form
+			$('#share_with option[value="'+uid_shared_with+'(group)"]').remove();
+			$('#share_with').trigger('liszt:updated');
+			// Remove users in group from select form
+			$.each(isGroup, function(index, user) {
+				$('#share_with option[value="'+user+'"]').remove();
+				$('#share_with').trigger('liszt:updated');
+			});
+		} else {
+			$(sharedWith).appendTo('#userList');
+			// Remove user from select form
+			$('#share_with option[value="'+uid_shared_with+'"]').remove();
+			$('#share_with').trigger('liszt:updated');
+		}
+		
+	},
+	removeSharedWith:function(uid_shared_with) {
+		$('#sharedWithList li[data-uid_shared_with="'+uid_shared_with+'"]').remove();
+		if ($('#groupList li').length < 1) {
+			$('#groups').hide();
+		}
+		var option = '<option value="'+uid_shared_with+'">'+uid_shared_with+'</option>';
+		$(option).appendTo('#share_with');
+		$('#share_with').trigger('liszt:updated');
+	},
+	showPrivateLink:function(item, token) {
+		$('#privateLinkCheckbox').attr('checked', true);
+		var link = parent.location.protocol+'//'+location.host+OC.linkTo('files_sharing','get.php')+'?token='+token;
+		if (token.indexOf('&path=') == -1) {
+			link += '&file=' + item;
+		} else {
+			// Disable checkbox if inside a shared parent folder
+			$('#privateLinkCheckbox').attr('disabled', 'true');
+		}
+		$('#privateLinkText').val(link);
+		$('#privateLinkText').show('blind', function() {
+			$('#privateLinkText').after('<br id="emailBreak" />');
+			$('#email').show();
+			$('#emailButton').show();
+		});
+	},
+	hidePrivateLink:function() {
+		$('#privateLinkText').hide('blind');
+		$('#emailBreak').remove();
+		$('#email').hide();
+		$('#emailButton').hide();
+	},
+	emailPrivateLink:function() {
+		$('#email').css('font-weight', 'bold');
+		$('#email').animate({ fontWeight: 'normal' }, 2000, function() {
+			$(this).val('');
+		}).val('Email sent');
+		$.post(OC.filePath('files_sharing', 'ajax', 'email.php'), 'toaddress='+$('#email').val()+'&link='+$('#link').val());
+	},
+	dirname:function(path) {
+		return path.replace(/\\/g,'/').replace(/\/[^\/]*$/, '');
+	}
+}
+
 $(document).ready(function() {
-	var shared_status = {};
+	OC.Share.loadIcons();
+
 	if (typeof FileActions !== 'undefined') {
 		FileActions.register('all', 'Share', function(filename) {
-			if (scanFiles.scanning){return;}//workaround to prevent additional http request block scanning feedback
-			var icon;
-			if (typeof filename == 'undefined') {
-				return false;
-			}
-			var file = $('#dir').val()+'/'+filename;
-			if(shared_status[file])
-				return shared_status[file].icon;
-			$.ajax({
-				type: 'GET',
-				url: OC.linkTo('files_sharing', 'ajax/getitem.php'),
-				dataType: 'json',
-				data: {source: file},
-				async: false,
-				success: function(users) {
-					if (users) {
-						icon = OC.imagePath('core', 'actions/shared');
-						$.each(users, function(index, row) {
-							if (row.uid_shared_with == 'public') {
-								icon = OC.imagePath('core', 'actions/public');
-							}
-						});
-					} else {
-						icon = OC.imagePath('core', 'actions/share');
+			// Return the correct sharing icon
+			if (scanFiles.scanning) { return; } // workaround to prevent additional http request block scanning feedback
+			var item =  $('#dir').val() + '/' + filename;
+			// Check if icon is in cache
+			if (OC.Share.icons[item]) {
+				return OC.Share.icons[item];
+			} else {
+				var last = '';
+				var path = OC.Share.dirname(item);
+				// Search for possible parent folders that are shared
+				while (path != last) {
+					if (OC.Share.icons[path]) {
+						OC.Share.icons[item] = OC.Share.icons[path];
+						return OC.Share.icons[item];
 					}
-					shared_status[file]= { timestamp: new Date().getTime(), icon: icon };
+					last = path;
+					path = OC.Share.dirname(path);
 				}
-			});
-			return icon;
+				OC.Share.icons[item] = OC.imagePath('core', 'actions/share');
+				return OC.Share.icons[item];
+			}
 		}, function(filename) {
+			var file = $('#dir').val() + '/' + filename;
+			var appendTo = $('tr').filterAttr('data-file',filename).find('td.filename');
+			// Check if drop down is already visible for a different file
 			if (($('#dropdown').length > 0)) {
-				$('#dropdown').hide('blind', function() {
-					var dropdownFile = $('#dropdown').data('file') 
-					var file = $('#dir').val()+'/'+filename;
-					$('#dropdown').remove();
-					$('tr').removeClass('mouseOver');
-					if (dropdownFile != file) {
-						createDropdown(filename, file);
-					}
-				});
+				if (file != $('#dropdown').data('item')) {
+					OC.Share.hideDropDown(function () {
+						$('tr').removeClass('mouseOver');
+						$('tr').filterAttr('data-file',filename).addClass('mouseOver');
+						OC.Share.showDropDown(file, appendTo);
+					});
+				}
 			} else {
-				createDropdown(filename, $('#dir').val()+'/'+filename);
+				$('tr').filterAttr('data-file',filename).addClass('mouseOver');
+				OC.Share.showDropDown(file, appendTo);
 			}
 		});
 	};
-
-	$('.share').click(function(event) {
-		event.preventDefault();
-		event.stopPropagation();
-		var filenames = getSelectedFiles('name');
-		var length = filenames.length;
-		var files = '';
-		for (var i = 0; i < length; i++) {
-			files += $('#dir').val()+'/'+filenames[i]+';';
-		}
-		createDropdown(false, files);
-	});
 	
 	$(this).click(function(event) {
 		if (!($(event.target).hasClass('drop')) && $(event.target).parents().index($('#dropdown')) == -1) {
 			if ($('#dropdown').is(':visible')) {
-				delete shared_status[$('#dropdown').data('file')]; //Remove File from icon cache
-				$('#dropdown').hide('blind', function() {
-					$('#dropdown').remove();
+				OC.Share.hideDropDown(function() {
 					$('tr').removeClass('mouseOver');
 				});
 			}
 		}
 	});
-	
-	$('#share_with').live('change', function() {
-		var source = $('#dropdown').data('file');
-		var uid_shared_with = $(this).val();
-		var permissions = 0;
-		var data = 'sources='+encodeURIComponent(source)+'&uid_shared_with='+encodeURIComponent(uid_shared_with)+'&permissions='+encodeURIComponent(permissions);
-		$.ajax({
-			type: 'POST',
-			url: OC.linkTo('files_sharing','ajax/share.php'),
-			cache: false,
-			data: data,
-			success: function(result) {
-				if (result !== 'false') {
-					addUser(uid_shared_with, permissions, false);
-				}
-			}
-		});
-	});
-	
-	$('#shared_list > li').live('mouseenter', function(event) {
+
+	$('#sharedWithList li').live('mouseenter', function(event) {
+		// Show permissions and unshare button
 		$(':hidden', this).show();
 	});
 	
-	$('#shared_list > li').live('mouseleave', function(event) {
+	$('#sharedWithList li').live('mouseleave', function(event) {
+		// Hide permissions and unshare button
 		$('a', this).hide();
 		if (!$('input:[type=checkbox]', this).is(':checked')) {
 			$('input:[type=checkbox]', this).hide();
@@ -102,161 +272,85 @@ $(document).ready(function() {
 		}
 	});
 	
-	$('.permissions').live('change', function() {
-		var permissions = (this.checked) ? 1 : 0;
-		var source = $('#dropdown').data('file');
-		var uid_shared_with = $(this).parent().data('uid_shared_with');
-		var data = 'source='+encodeURIComponent(source)+'&uid_shared_with='+encodeURIComponent(uid_shared_with)+'&permissions='+encodeURIComponent(permissions);
-		$.ajax({
-			type: 'GET',
-			url: OC.linkTo('files_sharing','ajax/setpermissions.php'),
-			cache: false,
-			data: data
+	$('#share_with').live('change', function() {
+		var item = $('#dropdown').data('item');
+		var uid_shared_with = $(this).val();
+		var pos = uid_shared_with.indexOf('(group)');
+		var isGroup = false;
+		if (pos != -1) {
+			// Remove '(group)' from uid_shared_with
+			uid_shared_with = uid_shared_with.substr(0, pos);
+			isGroup = true;
+		}
+		OC.Share.share(item, uid_shared_with, 0, function() {
+			if (isGroup) {
+				// Reload item because we don't know which users are in the group
+				OC.Share.loadItem(item);
+				var users;
+				$.each(OC.Share.itemGroups, function(index, group) {
+					if (group.gid == uid_shared_with) {
+						users = group.users;
+					}
+				});
+				OC.Share.addSharedWith(uid_shared_with, 0, users, false);
+			} else {
+				OC.Share.addSharedWith(uid_shared_with, 0, false, false);
+			}
+			// Change icon
+			if (!OC.Share.itemPrivateLink) {
+				OC.Share.icons[item] = OC.imagePath('core', 'actions/shared');
+			}
 		});
 	});
-
-	$('.unshare').live('click', function(event) {
-		event.preventDefault();
-		var user = $(this).parent();
-		var source = $('#dropdown').data('file');
-		var uid_shared_with = user.data('uid_shared_with');
-		var data = 'source='+encodeURIComponent(source)+'&uid_shared_with='+encodeURIComponent(uid_shared_with);
-		$.ajax({
-			type: 'GET',
-			url: OC.linkTo('files_sharing','ajax/unshare.php'),
-			cache: false,
-			data: data,
-			success: function() {
-				var option = '<option value="'+uid_shared_with+'">'+uid_shared_with+'</option>';
-				$(user).remove();
-				$(option).appendTo('#share_with');
-				$('#share_with').trigger('liszt:updated');
+	
+	$('.unshare').live('click', function() {
+		var item = $('#dropdown').data('item');
+		var uid_shared_with = $(this).parent().data('uid_shared_with');
+		OC.Share.unshare(item, uid_shared_with, function() {
+			OC.Share.removeSharedWith(uid_shared_with);
+			// Reload item to update cached users and groups for the icon check
+			OC.Share.loadItem(item);
+			// Change icon
+			if (!OC.Share.itemPrivateLink && !OC.Share.itemUsers && !OC.Share.itemGroups) {
+				OC.Share.icons[item] = OC.imagePath('core', 'actions/share');
 			}
 		});
 	});
 	
-	$('#makelink').live('change', function() {
+	$('.permissions').live('change', function() {
+		var permissions = (this.checked) ? 1 : 0;
+		OC.Share.changePermissions($('#dropdown').data('item'), $(this).parent().data('uid_shared_with'), permissions);
+	});
+	
+	$('#privateLinkCheckbox').live('change', function() {
+		var item = $('#dropdown').data('item');
 		if (this.checked) {
-			var source = $('#dropdown').data('file');
-			var uid_shared_with = 'public';
-			var permissions = 0;
-			var data = 'sources='+encodeURIComponent(source)+'&uid_shared_with='+encodeURIComponent(uid_shared_with)+'&permissions='+encodeURIComponent(permissions);
-			$.ajax({
-				type: 'POST',
-				url: OC.linkTo('files_sharing','ajax/share.php'),
-				cache: false,
-				data: data,
-				success: function(token) {
-					if (token) {
-						showPublicLink(token, source.substr(source.lastIndexOf('/')));
-					}
-				}
+			// Create a private link
+			OC.Share.share(item, 'public', 0, function(token) {
+				OC.Share.showPrivateLink(item, token);
+				// Change icon
+				OC.Share.icons[item] = OC.imagePath('core', 'actions/public');
 			});
 		} else {
-			var source = $('#dropdown').data('file');
-			var uid_shared_with = 'public';
-			var data = 'source='+encodeURIComponent(source)+'&uid_shared_with='+encodeURIComponent(uid_shared_with);
-			$.ajax({
-				type: 'GET',
-				url: OC.linkTo('files_sharing','ajax/unshare.php'),
-				cache: false,
-				data: data,
-				success: function(){
-					$('#link').hide('blind');
-					$('#emailBreak').remove();
-					$('#email').hide();
-					$('#emailButton').hide();
+			// Delete private link
+			OC.Share.unshare(item, 'public', function() {
+				OC.Share.hidePrivateLink();
+				// Change icon
+				if (OC.Share.itemUsers || OC.Share.itemGroups) {
+					OC.Share.icons[item] = OC.imagePath('core', 'actions/shared');
+				} else {
+					OC.Share.icons[item] = OC.imagePath('core', 'actions/share');
 				}
 			});
 		}
 	});
 	
-	$('#link').live('click', function() {
+	$('#privateLinkText').live('click', function() {
 		$(this).focus();
 		$(this).select();
 	});
 
 	$('#emailButton').live('click', function() {
-		$('#email').css('font-weight', 'bold');
-		$('#email').animate({ fontWeight: 'normal' }, 2000, function() {
-			$(this).val('');
-		}).val('Email sent');
-		$.post(OC.filePath('files_sharing','ajax','email.php'), 'toaddress='+$('#email').val()+'&link='+$('#link').val());
+		OC.Share.emailPrivateLink();
 	});
-});
-
-function createDropdown(filename, files) {
-	var html = '<div id="dropdown" class="drop" data-file="'+files+'">';
-	html += '<div id="private">';
-	html += '<select data-placeholder="User or Group" id="share_with" class="chzen-select">';
-	html += '<option value=""></option>';
-	html += '</select>';
-	html += '<ul id="shared_list"></ul>';
-	html += '</div>';
-	html += '<div id="public">';
-	html += '<input type="checkbox" name="makelink" id="makelink" value="1" /><label for="makelink">Share with private link</label>';
-	//html += '<input type="checkbox" name="public_link_write" id="public_link_write" value="1" /><label for="public_link_write">allow upload</label>';
-	html += '<br />';
-	html += '<input id="link" style="display:none; width:90%;" />';
-	html += '<input id="email" style="display:none; width:65%;" value="" placeholder="Email link to person" />';
-	html += '<input id="emailButton" style="display:none;" type="submit" value="Send" />';
-	html += '</div>';
-	if (filename) {
-		$('tr').filterAttr('data-file',filename).addClass('mouseOver');
-		$(html).appendTo($('tr').filterAttr('data-file',filename).find('td.filename'));
-	} else {
-		$(html).appendTo($('thead .share'));
-	}
-	$.getJSON(OC.linkTo('files_sharing', 'ajax/userautocomplete.php'), function(users) {
-		if (users) {
-			$.each(users, function(index, row) {
-				$(row).appendTo('#share_with');
-			});
-			$('#share_with').trigger('liszt:updated');
-		}
-	});
-	$.getJSON(OC.linkTo('files_sharing', 'ajax/getitem.php'), { source: files }, function(users) {
-		if (users) {
-			$.each(users, function(index, row) {
-				if (row.uid_shared_with == 'public') {
-					showPublicLink(row.token, '/'+filename);
-				} else if (isNaN(index)) {
-					addUser(row.uid_shared_with, row.permissions, index.substr(0, index.lastIndexOf('-')));
-				} else {
-					addUser(row.uid_shared_with, row.permissions, false);
-				}
-			});
-		}
-	});
-	$('#dropdown').show('blind');
-	$('#share_with').chosen();
-}
-
-function addUser(uid_shared_with, permissions, parentFolder) {
-	if (parentFolder) {
-		var user = '<li>Parent folder '+parentFolder+' shared with '+uid_shared_with+'</li>';
-	} else {
-		var checked = ((permissions > 0) ? 'checked="checked"' : 'style="display:none;"');
-		var style = ((permissions == 0) ? 'style="display:none;"' : '');
-		var user = '<li data-uid_shared_with="'+uid_shared_with+'">';
-		user += '<a href="" class="unshare" style="display:none;"><img class="svg" alt="Unshare" src="'+OC.imagePath('core','actions/delete')+'"/></a>';
-		user += uid_shared_with;
-		user += '<input type="checkbox" name="permissions" id="'+uid_shared_with+'" class="permissions" '+checked+' />';
-		user += '<label for="'+uid_shared_with+'" '+style+'>can edit</label>';
-		user += '</li>';
-	}
-	$('#share_with option[value="'+uid_shared_with+'"]').remove();
-	$('#share_with').trigger('liszt:updated');
-	$(user).appendTo('#shared_list');
-}
-
-function showPublicLink(token, file) {
-	$('#makelink').attr('checked', true);
-	$('#link').data('token', token);
-	$('#link').val(parent.location.protocol+'//'+location.host+OC.linkTo('files_sharing','get.php')+'?token='+token+'&f='+file);
-	$('#link').show('blind', function() {
-		$('#link').after('<br id="emailBreak" />');
-		$('#email').show();
-		$('#emailButton').show();
-	});
-}
+});
\ No newline at end of file