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

diff --git a/js/lib/ui.js b/js/lib/ui.js
index 6da7e7470b92dbf901d6cef216c1c45d39daf1fd..627a8e2098d1f1841214b2399b1394ab62a8ca0c 100644 (file)
--- 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 01479692865c3d3fe66da03825c9abfa2c27a561..b04630e9501929e6a2a8bc3db7c61ca325fa6d17 100644 (file)
--- 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>";
 }