Elgg  Version 2.2
ui.friends_picker.js
Go to the documentation of this file.
1 /*
2  elgg friendsPicker plugin
3  adapted from Niall Doherty's excellent Coda-Slider - http://www.ndoherty.com/coda-slider
4  */
5 
6 
7 jQuery.fn.friendsPicker = function(iterator) {
8 
9  var settings;
10  settings = $.extend({ easeFunc: "easeOutExpo", easeTime: 1000, toolTip: false }, settings);
11 
12  return this.each(function() {
13 
14  var container = $(this);
15  container.addClass("friends-picker");
16  // set panelwidth manually as it's hidden initially - adjust this value for different themes/pagewidths
17  var panelWidth = 730;
18 
19  // count the panels in the container
20  var panelCount = container.find("div.panel").size();
21  // calculate the width of all the panels lined up end-to-end
22  var friendsPicker_containerWidth = panelWidth*panelCount;
23  // specify width for the friendsPicker_container
24  container.find("div.friends-picker-container").css("width" , friendsPicker_containerWidth);
25 
26  // global variables for container.each function below
27  var distanceToMoveFriendsPicker_container;
28  var friendsPickerNavigationWidth = 0;
29  var currentPanel = 1;
30 
31  // generate appropriate nav for each container
32  container.each(function(i) {
33  // generate Left and Right arrows
34  $(this).before("<div class='friends-picker-navigation-l' id='friends-picker-navigation-l" + iterator + "'><a href='#'>Left</a><\/div>");
35  $(this).after("<div class='friends-picker-navigation-r' id='friends-picker-navigation-r" + iterator + "'><a href='#'>Right</a><\/div>");
36 
37  // generate a-z tabs
38  $(this).before("<div class='friends-picker-navigation' id='friends-picker-navigation" + iterator + "'><ul><\/ul><\/div>");
39  $(this).find("div.panel").each(function(individualTabItemNumber) {
40  $("div#friends-picker-navigation" + iterator + " ul").append("<li class='tab" + (individualTabItemNumber+1) + "'><a href='#" + (individualTabItemNumber+1) + "'>" + $(this).attr("title") + "<\/a><\/li>");
41  });
42 
43  // tabs navigation
44  $("div#friends-picker-navigation" + iterator + " a").each(function(individualTabItemNumber) {
45  // calc friendsPickerNavigationWidth by summing width of each li
46  friendsPickerNavigationWidth += $(this).parent().width();
47  // set-up individual tab clicks
48  $(this).bind("click", function() {
49  $(this).addClass("current").parent().parent().find("a").not($(this)).removeClass("current");
50  distanceToMoveFriendsPicker_container = - (panelWidth*individualTabItemNumber);
51  currentPanel = individualTabItemNumber + 1;
52  $(this).parent().parent().parent().next().find("div.friends-picker-container").animate({ left: distanceToMoveFriendsPicker_container}, settings.easeTime, settings.easeFunc);
53  });
54  });
55 
56  // Right arow click function
57  $("div#friends-picker-navigation-r" + iterator + " a").click(function() {
58  if (currentPanel == panelCount) {
59  distanceToMoveFriendsPicker_container = 0;
60  currentPanel = 1;
61  $(this).parent().parent().find("div.friends-picker-navigation a.current").removeClass("current").parent().parent().find("a:eq(0)").addClass("current");
62  } else {
63  distanceToMoveFriendsPicker_container = - (panelWidth*currentPanel);
64  currentPanel += 1;
65  $(this).parent().parent().find("div.friends-picker-navigation a.current").removeClass("current").parent().next().find("a").addClass("current");
66  };
67  $(this).parent().parent().find("div.friends-picker-container").animate({ left: distanceToMoveFriendsPicker_container}, settings.easeTime, settings.easeFunc);
68  return false;
69  });
70 
71  // Left arrow click function
72  $("div#friends-picker-navigation-l" + iterator + " a").click(function() {
73  if (currentPanel == 1) {
74  distanceToMoveFriendsPicker_container = - (panelWidth*(panelCount - 1));
75  currentPanel = panelCount;
76  $(this).parent().parent().find("div.friends-picker-navigation a.current").removeClass("current").parent().parent().find("li:last a").addClass("current");
77  } else {
78  currentPanel -= 1;
79  distanceToMoveFriendsPicker_container = - (panelWidth*(currentPanel - 1));
80  $(this).parent().parent().find("div.friends-picker-navigation a.current").removeClass("current").parent().prev().find("a").addClass("current");
81  };
82  $(this).parent().parent().find("div.friends-picker-container").animate({ left: distanceToMoveFriendsPicker_container}, settings.easeTime, settings.easeFunc);
83  return false;
84  });
85 
86  // apply 'current' class to currently selected tab link
87  $("div#friends-picker-navigation" + iterator + " a:eq(0)").addClass("current");
88  });
89 
90  $("div#friends-picker-navigation" + iterator).append("<br />");
91  });
92 };
elgg form settings
Definition: admin.css.php:596
function elgg combo checkbox click(function(){if($(this).is(':checked')){$(this).prev().attr('disabled', true);$(this).prev().val('');}else{$(this).prev().attr('disabled', false);}})
margin left
Definition: admin.css.php:294
friends picker friends picker container
Definition: admin.css.php:772
i
Definition: admin.css.php:47