new files for friends picker

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

7 files changed, 334 insertions, 0 deletions

diff --git a/_graphics/friends_picker_arrow_left.gif b/_graphics/friends_picker_arrow_left.gif
new file mode 100644
index 000000000..9615d0615
--- /dev/null
+++ b/_graphics/friends_picker_arrow_left.gif
diff --git a/_graphics/friends_picker_arrow_right.gif b/_graphics/friends_picker_arrow_right.gif
new file mode 100644
index 000000000..53d2595c3
--- /dev/null
+++ b/_graphics/friends_picker_arrow_right.gif
diff --git a/javascript/friendsPickerv1.js b/javascript/friendsPickerv1.js
new file mode 100755
index 000000000..3ecf4bfc3
--- /dev/null
+++ b/javascript/friendsPickerv1.js
@@ -0,0 +1,107 @@
+// elgg friendsPicker jquery plugin
+
+// create a separate namespace for each picker - so we can have multiple pickers per page
+var j = 0;
+
+jQuery.fn.friendsPicker = function(settings) {
+
+	settings = $.extend({ easeFunc: "easeOutExpo", easeTime: 1000, toolTip: false }, settings);
+	 
+	return this.each(function() {
+	
+		var container = $(this);
+		container.addClass("friendsPicker");
+		// set panelwidth manually as it's hidden initially
+		var panelWidth = 755;
+
+		// 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);
+		
+		// global variables for container.each function below
+		var friendsPickerNavigationWidth = 0;
+		var currentPanel = 1;
+		
+		// generate appropriate nav for each container
+		container.each(function(i) {
+			
+			// generate Left and Right arrows
+			$(this).before("<div class='friendsPickerNavigationL' id='friendsPickerNavigationL" + j + "'><a href='#'>Left</a><\/div>");
+			$(this).after("<div class='friendsPickerNavigationR' id='friendsPickerNavigationR" + j + "'><a href='#'>Right</a><\/div>");
+			
+			// generate a-z tabs
+			$(this).before("<div class='friendsPickerNavigation' id='friendsPickerNavigation" + j + "'><ul><\/ul><\/div>");
+			
+			$(this).find("div.panel").each(function(individualTabItemNumber) {
+				
+				$("div#friendsPickerNavigation" + j + " ul").append("<li class='tab" + (individualTabItemNumber+1) + "'><a href='#" + (individualTabItemNumber+1) + "'>" + $(this).attr("title") + "<\/a><\/li>");		
+			});
+			
+			// tabs navigation
+			$("div#friendsPickerNavigation" + j + " a").each(function(individualTabItemNumber) {
+				// calc friendsPickerNavigationWidth by summing width of each li
+				friendsPickerNavigationWidth += $(this).parent().width();
+				// set-up individual tab clicks
+				$(this).bind("click", function() {
+					$(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);
+				});
+			});
+			
+			// Right arow click function
+			$("div#friendsPickerNavigationR" + j + " 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");
+				} 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.friendsPicker_container").animate({ left: distanceToMoveFriendsPicker_container}, settings.easeTime, settings.easeFunc);
+				return false;
+			});
+			
+			// Left arrow click function
+			$("div#friendsPickerNavigationL" + j + " 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");
+				} 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.friendsPicker_container").animate({ left: distanceToMoveFriendsPicker_container}, settings.easeTime, settings.easeFunc);
+				return false;
+			});
+						
+				// apply 'current' class to currently selected tab link
+				$("div#friendsPickerNavigation" + j + " a:eq(0)").addClass("current");
+			
+		});
+		
+		// manually add class to corresponding tab for panels that have content - needs to be automated eventually
+		$("div#friendsPickerNavigation"  + j + " li.tab3 a").addClass("tabHasContent");
+		$("div#friendsPickerNavigation"  + j + " li.tab6 a").addClass("tabHasContent");
+		$("div#friendsPickerNavigation"  + j + " li.tab9 a").addClass("tabHasContent");
+		$("div#friendsPickerNavigation"  + j + " li.tab17 a").addClass("tabHasContent");
+		$("div#friendsPickerNavigation"  + j + " li.tab22 a").addClass("tabHasContent");
+		
+		// generate link to 'all friends in collection' - removed for now
+		//$("div#friendsPickerNavigation" + j).append("<div class='friendsPickerNavigationAll'><a href='#' >Collection members<\/a></div><br />");
+		$("div#friendsPickerNavigation" + j).append("<br />");
+
+		
+		j++;
+  });
+};
+
+
diff --git a/vendors/jquery/jquery-easing-compatibility.1.2.pack.js b/vendors/jquery/jquery-easing-compatibility.1.2.pack.js
new file mode 100755
index 000000000..70c332159
--- /dev/null
+++ b/vendors/jquery/jquery-easing-compatibility.1.2.pack.js
@@ -0,0 +1,10 @@
+/*
+ * jQuery Easing Compatibility v1 - http://gsgd.co.uk/sandbox/jquery.easing.php
+ *
+ * Adds compatibility for applications that use the pre 1.2 easing names
+ *
+ * Copyright (c) 2007 George Smith
+ * Licensed under the MIT License:
+ *   http://www.opensource.org/licenses/mit-license.php
+ */
+eval(function(p,a,c,k,e,d){e=function(c){return(c<a?"":e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('0.C(0.1,{7:2(x,t,b,c,d){3 0.1.D(x,t,b,c,d)},5:2(x,t,b,c,d){3 0.1.6(x,t,b,c,d)},h:2(x,t,b,c,d){3 0.1.B(x,t,b,c,d)},A:2(x,t,b,c,d){3 0.1.m(x,t,b,c,d)},y:2(x,t,b,c,d){3 0.1.w(x,t,b,c,d)},v:2(x,t,b,c,d){3 0.1.u(x,t,b,c,d)},s:2(x,t,b,c,d){3 0.1.r(x,t,b,c,d)},q:2(x,t,b,c,d){3 0.1.p(x,t,b,c,d)},o:2(x,t,b,c,d){3 0.1.n(x,t,b,c,d)},8:2(x,t,b,c,d){3 0.1.l(x,t,b,c,d)},g:2(x,t,b,c,d){3 0.1.j(x,t,b,c,d)},i:2(x,t,b,c,d){3 0.1.k(x,t,b,c,d)},z:2(x,t,b,c,d){3 0.1.f(x,t,b,c,d)},e:2(x,t,b,c,d){3 0.1.a(x,t,b,c,d)},9:2(x,t,b,c,d){3 0.1.4(x,t,b,c,d)}});',40,40,'jQuery|easing|function|return|easeInOutBack|easeOut|easeOutQuad|easeIn|elasin|backinout|easeOutBack||||backout|easeInBack|elasout|easeInOut|elasinout|easeOutElastic|easeInOutElastic|easeInElastic|easeInExpo|easeInOutBounce|bounceinout|easeOutBounce|bounceout|easeInBounce|bouncein||easeInOutExpo|expoinout|easeOutExpo||expoout|backin|expoin|easeInOutQuad|extend|easeInQuad'.split('|'),0,{}))
\ No newline at end of file
diff --git a/vendors/jquery/jquery-easing.1.2.pack.js b/vendors/jquery/jquery-easing.1.2.pack.js
new file mode 100755
index 000000000..dc61c3303
--- /dev/null
+++ b/vendors/jquery/jquery-easing.1.2.pack.js
@@ -0,0 +1,11 @@
+/*
+ * jQuery EasIng v1.1.2 - http://gsgd.co.uk/sandbox/jquery.easIng.php
+ *
+ * Uses the built In easIng capabilities added In jQuery 1.1
+ * to offer multiple easIng options
+ *
+ * Copyright (c) 2007 George Smith
+ * Licensed under the MIT License:
+ *   http://www.opensource.org/licenses/mit-license.php
+ */
+eval(function(p,a,c,k,e,d){e=function(c){return(c<a?"":e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('l.Y(l.n,{15:9(x,t,b,c,d){6 c*(t/=d)*t+b},V:9(x,t,b,c,d){6-c*(t/=d)*(t-2)+b},U:9(x,t,b,c,d){e((t/=d/2)<1)6 c/2*t*t+b;6-c/2*((--t)*(t-2)-1)+b},17:9(x,t,b,c,d){6 c*(t/=d)*t*t+b},P:9(x,t,b,c,d){6 c*((t=t/d-1)*t*t+1)+b},R:9(x,t,b,c,d){e((t/=d/2)<1)6 c/2*t*t*t+b;6 c/2*((t-=2)*t*t+2)+b},O:9(x,t,b,c,d){6 c*(t/=d)*t*t*t+b},13:9(x,t,b,c,d){6-c*((t=t/d-1)*t*t*t-1)+b},S:9(x,t,b,c,d){e((t/=d/2)<1)6 c/2*t*t*t*t+b;6-c/2*((t-=2)*t*t*t-2)+b},18:9(x,t,b,c,d){6 c*(t/=d)*t*t*t*t+b},G:9(x,t,b,c,d){6 c*((t=t/d-1)*t*t*t*t+1)+b},B:9(x,t,b,c,d){e((t/=d/2)<1)6 c/2*t*t*t*t*t+b;6 c/2*((t-=2)*t*t*t*t+2)+b},M:9(x,t,b,c,d){6-c*8.A(t/d*(8.g/2))+c+b},C:9(x,t,b,c,d){6 c*8.m(t/d*(8.g/2))+b},D:9(x,t,b,c,d){6-c/2*(8.A(8.g*t/d)-1)+b},16:9(x,t,b,c,d){6(t==0)?b:c*8.h(2,10*(t/d-1))+b},E:9(x,t,b,c,d){6(t==d)?b+c:c*(-8.h(2,-10*t/d)+1)+b},F:9(x,t,b,c,d){e(t==0)6 b;e(t==d)6 b+c;e((t/=d/2)<1)6 c/2*8.h(2,10*(t-1))+b;6 c/2*(-8.h(2,-10*--t)+2)+b},I:9(x,t,b,c,d){6-c*(8.o(1-(t/=d)*t)-1)+b},12:9(x,t,b,c,d){6 c*8.o(1-(t=t/d-1)*t)+b},11:9(x,t,b,c,d){e((t/=d/2)<1)6-c/2*(8.o(1-t*t)-1)+b;6 c/2*(8.o(1-(t-=2)*t)+1)+b},K:9(x,t,b,c,d){f s=1.j;f p=0;f a=c;e(t==0)6 b;e((t/=d)==1)6 b+c;e(!p)p=d*.3;e(a<8.r(c)){a=c;f s=p/4}k f s=p/(2*8.g)*8.u(c/a);6-(a*8.h(2,10*(t-=1))*8.m((t*d-s)*(2*8.g)/p))+b},X:9(x,t,b,c,d){f s=1.j;f p=0;f a=c;e(t==0)6 b;e((t/=d)==1)6 b+c;e(!p)p=d*.3;e(a<8.r(c)){a=c;f s=p/4}k f s=p/(2*8.g)*8.u(c/a);6 a*8.h(2,-10*t)*8.m((t*d-s)*(2*8.g)/p)+c+b},N:9(x,t,b,c,d){f s=1.j;f p=0;f a=c;e(t==0)6 b;e((t/=d/2)==2)6 b+c;e(!p)p=d*(.3*1.5);e(a<8.r(c)){a=c;f s=p/4}k f s=p/(2*8.g)*8.u(c/a);e(t<1)6-.5*(a*8.h(2,10*(t-=1))*8.m((t*d-s)*(2*8.g)/p))+b;6 a*8.h(2,-10*(t-=1))*8.m((t*d-s)*(2*8.g)/p)*.5+c+b},Z:9(x,t,b,c,d,s){e(s==w)s=1.j;6 c*(t/=d)*t*((s+1)*t-s)+b},14:9(x,t,b,c,d,s){e(s==w)s=1.j;6 c*((t=t/d-1)*t*((s+1)*t+s)+1)+b},H:9(x,t,b,c,d,s){e(s==w)s=1.j;e((t/=d/2)<1)6 c/2*(t*t*(((s*=(1.y))+1)*t-s))+b;6 c/2*((t-=2)*t*(((s*=(1.y))+1)*t+s)+2)+b},z:9(x,t,b,c,d){6 c-l.n.v(x,d-t,0,c,d)+b},v:9(x,t,b,c,d){e((t/=d)<(1/2.i)){6 c*(7.q*t*t)+b}k e(t<(2/2.i)){6 c*(7.q*(t-=(1.5/2.i))*t+.i)+b}k e(t<(2.5/2.i)){6 c*(7.q*(t-=(2.J/2.i))*t+.L)+b}k{6 c*(7.q*(t-=(2.Q/2.i))*t+.T)+b}},W:9(x,t,b,c,d){e(t<d/2)6 l.n.z(x,t*2,0,c,d)*.5+b;6 l.n.v(x,t*2-d,0,c,d)*.5+c*.5+b}});',62,71,'||||||return||Math|function|||||if|var|PI|pow|75|70158|else|jQuery|sin|easing|sqrt||5625|abs|||asin|easeOutBounce|undefined||525|easeInBounce|cos|easeInOutQuint|easeOutSine|easeInOutSine|easeOutExpo|easeInOutExpo|easeOutQuint|easeInOutBack|easeInCirc|25|easeInElastic|9375|easeInSine|easeInOutElastic|easeInQuart|easeOutCubic|625|easeInOutCubic|easeInOutQuart|984375|easeInOutQuad|easeOutQuad|easeInOutBounce|easeOutElastic|extend|easeInBack||easeInOutCirc|easeOutCirc|easeOutQuart|easeOutBack|easeInQuad|easeInExpo|easeInCubic|easeInQuint'.split('|'),0,{}))
\ No newline at end of file
diff --git a/views/default/css.php b/views/default/css.php
index fe4b98dda..d426062f5 100644
--- a/views/default/css.php
+++ b/views/default/css.php
@@ -1433,9 +1433,209 @@ table.search_gallery {
 }
 	
 	
+/* ***************************************
+	friends collections accordian
+*************************************** */	
+ul#friends_collections_accordian {
+	margin: 0 0 0 0;
+	padding: 0;
+	border-bottom:1px solid #cccccc;
+}
+#friends_collections_accordian li {
+	margin: 0 0 0 0;
+	padding: 0;
+	list-style-type: none;
+	color: #666666;
+}
+#friends_collections_accordian li h2 {
+	background:#efefef;
+	color: #999999;
+	padding:4px 2px 4px 6px;
+	margin:0;
+	border-top:1px solid #cccccc;
+	font-size:1.2em;
+	cursor:pointer;
+}
+#friends_collections_accordian li h2:hover {
+	background:#4690D6;
+	color:white;
+}
+
+#friends_collections_accordian .friends_picker {
+	background:white;
+	padding:0;
+	display:none;
+}
+#friends_collections_accordian .friends_collections_controls {
+	font-size:70%;
+	float:right;
+}
+#friends_collections_accordian .friends_collections_controls a {
+	color:#999999;
+	font-weight:normal;
+}
+
+div.expandall {
+	margin: 20px 0 0 0;
+	padding:0;
+}
+div.expandall p {
+	cursor:pointer;
+	color:#999999;
+	text-align:right;
+	margin: 0;
+	padding:0;
+
+}
 	
 	
+/* ***************************************
+	friends picker
+*************************************** */		
+.friendsPicker_container h3 { font-size:3em; text-align: left; margin:0 0 20px 0; color:#999999; }
+
+.friendsPicker .friendsPicker_container .panel ul {
+	text-align: left;
+	margin: 0;
+	padding:0;
+}
+
+.friendsPicker_wrapper {
+	margin: 0;
+	padding:0;
+	position: relative;
+	width: 100%;
+}
+
+.friendsPicker {
+	/*position: relative;*/
+	overflow: hidden; 
+	margin: 0;
+	padding:0;
+	width: 755px;
+	height: 270px;
+	/*clear: right;*/
+	background: white;
+
+}
+
+.friendsPicker .friendsPicker_container { /* long container used to house end-to-end panels. Width is calculated in JS  */
+	position: relative;
+	left: 0; top: 0;
+	width: 100%;
+	list-style-type: none;
+	/* -moz-user-select: none; */
+}
+
+.friendsPicker .friendsPicker_container .panel {
+	float:left;
+	height: 100%;
+	position: relative;
+	width: 755px;
+	margin: 0;
+	padding:0;
+}
+
+.friendsPicker .friendsPicker_container .panel .wrapper {
+	margin: 0;
+	padding: 10px;
+	background: #efefef;
+	min-height: 230px;
+
+}
+
+.friendsPickerNavigation {
+	margin: 0 0 20px 0;
+	padding:0;
 	
+}
+
+.friendsPickerNavigation ul {
+	list-style: none;
+}
+
+.friendsPickerNavigation ul li {
+	float: left;
+	margin:0;
+	background:white;
+}
+
+.friendsPickerNavigation a {
+	font-weight: bold;
+	text-align: center;
+	background: white;
+	color: #999999;
+	text-decoration: none;
+	display: block;
+	padding: 0;
+	width:20px;
+}
+
+.tabHasContent {
+	background: white; color:#333333 !important;
+}
+/* 
+.friendsPickerNavigation li.tab22 a { background: white; color:#333333; }
+*/
+.friendsPickerNavigation li a:hover {
+	background: lime;
+	color:white;
+}
+
+.friendsPickerNavigation li a.current {
+	background: #4690D6;
+	color:white !important;
+}
+
+.friendsPickerNavigationAll {
+	margin:0px 0 0 20px;
+	float:left;
+}
+.friendsPickerNavigationAll a {
+	font-weight: bold;
+	text-align: left;
+	font-size:0.8em;
+	background: white;
+	color: #999999;
+	text-decoration: none;
+	display: block;
+	padding: 0 4px 0 4px;
+	width:auto;
+}
+.friendsPickerNavigationAll a:hover {
+	background: #4690D6;
+	color:white;
+}
+
+.friendsPickerNavigationL, .friendsPickerNavigationR {
+	position: absolute;
+	top: 120px;
+	text-indent: -9000em;
+}
+
+.friendsPickerNavigationL a, .friendsPickerNavigationR a {
+	display: block;
+	height: 87px;
+	width: 43px;
+}
+
+.friendsPickerNavigationL {
+	right: 78px;
+	z-index:1;
+}
+
+.friendsPickerNavigationR {
+	right: 20px;
+	z-index:1;
+}
+
+.friendsPickerNavigationL {
+	background: url("<?php echo $vars['url']; ?>_graphics/friends_picker_arrow_left.gif") no-repeat center;
+}
+
+.friendsPickerNavigationR {
+	background: url("<?php echo $vars['url']; ?>_graphics/friends_picker_arrow_right.gif") no-repeat center;
+}	
 	
 	
 	
\ No newline at end of file
diff --git a/views/default/page_elements/header.php b/views/default/page_elements/header.php
index 6d9b826d4..0b802ca23 100644
--- a/views/default/page_elements/header.php
+++ b/views/default/page_elements/header.php
@@ -59,6 +59,12 @@ END;
 	<script type="text/javascript" src="<?php echo $vars['url']; ?>vendors/jquery/jquery-1.2.6.pack.js"></script>
 	<script type="text/javascript" src="<?php echo $vars['url']; ?>vendors/jquery/jquery-ui-personalized-1.5.packed.js"></script>
 	<script type="text/javascript" src="<?php echo $vars['url']; ?>javascript/initialise_elgg.js"></script>
+	
+	<!-- only needed on pages where we have friends collections and/or the friends picker-->
+	<script type="text/javascript" src="<?php echo $vars['url']; ?>vendors/jquery/jquery-easing.1.2.pack.js"></script>
+	<script type="text/javascript" src="<?php echo $vars['url']; ?>vendors/jquery/jquery-easing-compatibility.1.2.pack.js"></script>
+	<script type="text/javascript" src="<?php echo $vars['url']; ?>javascript/friendsPickerv1.js"></script>
+	
 	<!-- include the default css file -->
 	<link rel="stylesheet" href="<?php echo $vars['url']; ?>_css/css.css" type="text/css" />
 	<?php