Fixes #3027. Likes popup uses rel='popup' and elgg.ui.popsUp() to position absolute.

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

2 files changed, 94 insertions, 28 deletions

diff --git a/js/lib/ui.js b/js/lib/ui.js
index 6da7e7470..627a8e209 100644
--- a/js/lib/ui.js
+++ b/js/lib/ui.js
@@ -14,9 +14,9 @@ elgg.ui.init = function () {
 
 	$('.elgg-toggler').live('click', elgg.ui.toggles);
 
-	$('.elgg-menu-page .elgg-menu-parent').live('click', elgg.ui.toggleMenu);
+	$('[rel=popup]').live('click', elgg.ui.popsUp);
 
-	$('.elgg-like-toggle').live('click', elgg.ui.toggleLikes);
+	$('.elgg-menu-page .elgg-menu-parent').live('click', elgg.ui.toggleMenu);
 
 	$('.elgg-requires-confirmation').live('click', elgg.ui.requiresConfirmation);
 	
@@ -27,7 +27,7 @@ elgg.ui.init = function () {
  * Toggles an element based on clicking a separate element
  *
  * Use .elgg-toggler on the toggler element
- * Set the href to target the item you want to toggle (<a href="#id-of-target">)
+ * Set the href to target the item you want to toggle (<a class="elgg-toggler" href="#id-of-target">)
  *
  * @param {Object} event
  * @return void
@@ -41,41 +41,105 @@ elgg.ui.toggles = function(event) {
 }
 
 /**
- * Toggles a child menu when the parent is clicked
+ * Pops up an element based on clicking a separate element
+ *
+ * Set the rel="popup" on the popper and set the href to target the
+ * item you want to toggle (<a rel="popup" href="#id-of-target">)
+ *
+ * You can set the position of the popup by putting a certain class on the popper.  Use
+ * elgg-popup-<targetH><targetV>-at-<thisH><thisV> where each section is one of the short hands
+ * below:
+ *	Horizontal:
+ *		l: left
+ *		c: center
+ *		r: right
+ *
+ *	Vertical:
+ *		t: top
+ *		c: center
+ *		b: bottom
+ *
+ *	Example:
+ *		elgg-popup-lt-at-rb Puts the popup window's left top corner at the popper's right bottom
+ *		corner.
+ *
+ *	You can set the position of the X and Y offsets by putting the class elgg-popup-offset-XXxYY
+ *	on the popper where XX and YY are the offsets:
+ *		elgg-popup-offset-15x35
+ *		
+ *	Offsets can be negative:
+ *		elgg-popup-offset--5x-35
  *
  * @param {Object} event
  * @return void
  */
-elgg.ui.toggleMenu = function(event) {
-	$(this).siblings().slideToggle('medium');
-	$(this).toggleClass('elgg-menu-closed elgg-menu-opened');
+elgg.ui.popsUp = function(event) {
 	event.preventDefault();
+
+	var target = $(this).toggleClass('elgg-state-active').attr('href');
+	var $target = $(target);
+
+	// hide if already open
+	if ($target.is(':visible')) {
+		$target.fadeOut();
+		return;
+	}
+	
+	var posMap = {
+		l: 'left',
+		c: 'center',
+		r: 'right',
+		t: 'top',
+		b: 'bottom'
+	};
+
+	var my = 'left top';
+	var at = 'right bottom';
+	var offsetX = 0;
+	var offsetY = 0;
+
+	// check for location classes on the popper upper
+	var posRegexp = new RegExp('elgg-popup-([lcr])([tcb])-at-([lcr])([tcb])$', 'i');
+	var offsetRegexp = new RegExp('elgg-popup-offset-(-?[0-9]+x-?[0-9]+)$', 'i');
+	var classes = $(this).attr('class').split(' ');
+	$(classes).each(function (i, el) {
+		if (posRegexp.test(el)) {
+			var pos = el.replace(posRegexp, '$1$2$3$4');
+
+			var myH = pos.substr(0, 1);
+			var myV = pos.substr(1, 1);
+			var toH = pos.substr(2, 1);
+			var toV = pos.substr(3, 1);
+
+			my = posMap[myH] + ' ' + posMap[myV];
+			at = posMap[toH] + ' ' + posMap[toV];
+		} else if (offsetRegexp.test(el)) {
+			var offsets = el.replace(offsetRegexp, '$1').split('x');
+			offsetX = offsets[0];
+			offsetY = offsets[1];
+		}
+	});
+
+	$target.appendTo('body')
+		.fadeIn()
+		.css('position', 'absolute')
+		.position({
+			'my': my,
+			'at': at,
+			'of': $(this),
+			'offset': offsetX + ' ' + offsetY
+		});
 }
 
 /**
- * Toggles the likes list
+ * Toggles a child menu when the parent is clicked
  *
  * @param {Object} event
  * @return void
  */
-elgg.ui.toggleLikes = function(event) {
-	var $list = $(this).next(".elgg-likes-list");
-	var position = $(this).position();
-	var startTop = position.top;
-	var stopTop = position.top - $list.height();
-	if ($list.css('display') == 'none') {
-		$('.elgg-likes-list').fadeOut();
-
-		$list.css('top', startTop);
-		$list.css('left', position.left - $list.width());
-		$list.animate({opacity: "toggle", top: stopTop}, 500);
-
-		$list.click(function(event) {
-			$list.fadeOut();
-		});
-	} else {
-		$list.animate({opacity: "toggle", top: startTop}, 500);
-	}
+elgg.ui.toggleMenu = function(event) {
+	$(this).siblings().slideToggle('medium');
+	$(this).toggleClass('elgg-menu-closed elgg-menu-opened');
 	event.preventDefault();
 }
 
diff --git a/views/default/core/likes/display.php b/views/default/core/likes/display.php
index 014796928..b04630e95 100644
--- a/views/default/core/likes/display.php
+++ b/views/default/core/likes/display.php
@@ -54,10 +54,12 @@ if ($num_of_likes) {
 	$params = array(
 		'text' => "$num_of_likes $likes_string",
 		'title' => elgg_echo('likes:see'),
-		'class' => 'elgg-like-toggle',
+		'class' => 'elgg-popup-rb-at-lt',
+		'rel' => 'popup',
+		'href' => "#$guid-likes"
 	);
 	$list = elgg_view('output/url', $params);
-	$list .= "<div class='elgg-module elgg-module-popup elgg-likes-list hidden clearfix'>";
+	$list .= "<div class='elgg-module elgg-module-popup elgg-likes-list hidden clearfix' id='$guid-likes'>";
 	$list .= elgg_list_annotations(array('guid' => $guid, 'annotation_name' => 'likes', 'limit' => 99));
 	$list .= "</div>";
 }