Updated Friends Picker UI and added to core css.

git-svn-id: http://code.elgg.org/elgg/trunk@5352 36083f99-b078-4883-b0ff-0f9b5a30f544

1 files changed, 19 insertions, 19 deletions

diff --git a/views/default/js/friendsPickerv1.php b/views/default/js/friendsPickerv1.php
index 32b495938..2fa4e373f 100644
--- a/views/default/js/friendsPickerv1.php
+++ b/views/default/js/friendsPickerv1.php
@@ -12,16 +12,16 @@ jQuery.fn.friendsPicker = function(iterator) {
 	return this.each(function() {
 	
 		var container = $(this);
-		container.addClass("friendsPicker");
+		container.addClass("friends_picker");
 		// set panelwidth manually as it's hidden initially - adjust this value for different themes/pagewidths 
-		var panelWidth = 678;
+		var panelWidth = 730;
 
 		// count the panels in the container
 		var panelCount = container.find("div.panel").size();
 		// calculate the width of all the panels lined up end-to-end
 		var friendsPicker_containerWidth = panelWidth*panelCount;
 		// specify width for the friendsPicker_container
-		container.find("div.friendsPicker_container").css("width" , friendsPicker_containerWidth);
+		container.find("div.friends_picker_container").css("width" , friendsPicker_containerWidth);
 		
 		// global variables for container.each function below
 		var friendsPickerNavigationWidth = 0;
@@ -30,17 +30,17 @@ jQuery.fn.friendsPicker = function(iterator) {
 		// generate appropriate nav for each container
 		container.each(function(i) {
 			// generate Left and Right arrows
-			$(this).before("<div class='friendsPickerNavigationL' id='friendsPickerNavigationL" + iterator + "'><a href='#'>Left</a><\/div>");
-			$(this).after("<div class='friendsPickerNavigationR' id='friendsPickerNavigationR" + iterator + "'><a href='#'>Right</a><\/div>");
+			$(this).before("<div class='friends_picker_navigation_l' id='friends_picker_navigation_l" + iterator + "'><a href='#'>Left</a><\/div>");
+			$(this).after("<div class='friends_picker_navigation_r' id='friends_picker_navigation_r" + iterator + "'><a href='#'>Right</a><\/div>");
 			
 			// generate a-z tabs
-			$(this).before("<div class='friendsPickerNavigation' id='friendsPickerNavigation" + iterator + "'><ul><\/ul><\/div>");
+			$(this).before("<div class='friends_picker_navigation' id='friends_picker_navigation" + iterator + "'><ul><\/ul><\/div>");
 			$(this).find("div.panel").each(function(individualTabItemNumber) {
-				$("div#friendsPickerNavigation" + iterator + " ul").append("<li class='tab" + (individualTabItemNumber+1) + "'><a href='#" + (individualTabItemNumber+1) + "'>" + $(this).attr("title") + "<\/a><\/li>");		
+				$("div#friends_picker_navigation" + iterator + " ul").append("<li class='tab" + (individualTabItemNumber+1) + "'><a href='#" + (individualTabItemNumber+1) + "'>" + $(this).attr("title") + "<\/a><\/li>");		
 			});
 			
 			// tabs navigation
-			$("div#friendsPickerNavigation" + iterator + " a").each(function(individualTabItemNumber) {
+			$("div#friends_picker_navigation" + iterator + " a").each(function(individualTabItemNumber) {
 				// calc friendsPickerNavigationWidth by summing width of each li
 				friendsPickerNavigationWidth += $(this).parent().width();
 				// set-up individual tab clicks
@@ -48,45 +48,45 @@ jQuery.fn.friendsPicker = function(iterator) {
 					$(this).addClass("current").parent().parent().find("a").not($(this)).removeClass("current"); 
 					var distanceToMoveFriendsPicker_container = - (panelWidth*individualTabItemNumber);
 					currentPanel = individualTabItemNumber + 1;
-					$(this).parent().parent().parent().next().find("div.friendsPicker_container").animate({ left: distanceToMoveFriendsPicker_container}, settings.easeTime, settings.easeFunc);
+					$(this).parent().parent().parent().next().find("div.friends_picker_container").animate({ left: distanceToMoveFriendsPicker_container}, settings.easeTime, settings.easeFunc);
 				});
 			});
 			
 			// Right arow click function
-			$("div#friendsPickerNavigationR" + iterator + " a").click(function() {
+			$("div#friends_picker_navigation_r" + iterator + " a").click(function() {
 				if (currentPanel == panelCount) {
 					var distanceToMoveFriendsPicker_container = 0;
 					currentPanel = 1; 
-					$(this).parent().parent().find("div.friendsPickerNavigation a.current").removeClass("current").parent().parent().find("a:eq(0)").addClass("current");
+					$(this).parent().parent().find("div.friends_picker_navigation a.current").removeClass("current").parent().parent().find("a:eq(0)").addClass("current");
 				} else {
 					var distanceToMoveFriendsPicker_container = - (panelWidth*currentPanel);
 					currentPanel += 1;
-					$(this).parent().parent().find("div.friendsPickerNavigation a.current").removeClass("current").parent().next().find("a").addClass("current");
+					$(this).parent().parent().find("div.friends_picker_navigation a.current").removeClass("current").parent().next().find("a").addClass("current");
 				};
-				$(this).parent().parent().find("div.friendsPicker_container").animate({ left: distanceToMoveFriendsPicker_container}, settings.easeTime, settings.easeFunc);
+				$(this).parent().parent().find("div.friends_picker_container").animate({ left: distanceToMoveFriendsPicker_container}, settings.easeTime, settings.easeFunc);
 				return false;
 			});
 			
 			// Left arrow click function
-			$("div#friendsPickerNavigationL" + iterator + " a").click(function() {
+			$("div#friends_picker_navigation_l" + iterator + " a").click(function() {
 				if (currentPanel == 1) {
 					var distanceToMoveFriendsPicker_container = - (panelWidth*(panelCount - 1));
 					currentPanel = panelCount;
-					$(this).parent().parent().find("div.friendsPickerNavigation a.current").removeClass("current").parent().parent().find("li:last a").addClass("current");
+					$(this).parent().parent().find("div.friends_picker_navigation a.current").removeClass("current").parent().parent().find("li:last a").addClass("current");
 				} else {
 					currentPanel -= 1;
 					var distanceToMoveFriendsPicker_container = - (panelWidth*(currentPanel - 1));
-					$(this).parent().parent().find("div.friendsPickerNavigation a.current").removeClass("current").parent().prev().find("a").addClass("current");
+					$(this).parent().parent().find("div.friends_picker_navigation a.current").removeClass("current").parent().prev().find("a").addClass("current");
 				};
-				$(this).parent().parent().find("div.friendsPicker_container").animate({ left: distanceToMoveFriendsPicker_container}, settings.easeTime, settings.easeFunc);
+				$(this).parent().parent().find("div.friends_picker_container").animate({ left: distanceToMoveFriendsPicker_container}, settings.easeTime, settings.easeFunc);
 				return false;
 			});
 						
 				// apply 'current' class to currently selected tab link
-				$("div#friendsPickerNavigation" + iterator + " a:eq(0)").addClass("current");
+				$("div#friends_picker_navigation" + iterator + " a:eq(0)").addClass("current");
 		});
 
-		$("div#friendsPickerNavigation" + iterator).append("<br />");		
+		$("div#friends_picker_navigation" + iterator).append("<br />");		
   });
 };