ui.friends_picker.js 4.4 KB

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