aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--_graphics/friends_picker_arrow_left.gifbin0 -> 492 bytes
-rw-r--r--_graphics/friends_picker_arrow_right.gifbin0 -> 479 bytes
-rwxr-xr-xjavascript/friendsPickerv1.js107
-rwxr-xr-xvendors/jquery/jquery-easing-compatibility.1.2.pack.js10
-rwxr-xr-xvendors/jquery/jquery-easing.1.2.pack.js11
-rw-r--r--views/default/css.php200
-rw-r--r--views/default/page_elements/header.php6
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
Binary files differ
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
Binary files differ
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