aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorbrettp <brettp@36083f99-b078-4883-b0ff-0f9b5a30f544>2011-03-08 05:33:50 +0000
committerbrettp <brettp@36083f99-b078-4883-b0ff-0f9b5a30f544>2011-03-08 05:33:50 +0000
commitb134971a7b2dc7b4cf77057a4b39285dbb6edda7 (patch)
tree1da419dbf5f4b43d0cfc73096589368c4896ca54
parenteddb025760a6ae7866879e34dd127088af8f8702 (diff)
downloadelgg-b134971a7b2dc7b4cf77057a4b39285dbb6edda7.tar.gz
elgg-b134971a7b2dc7b4cf77057a4b39285dbb6edda7.tar.bz2
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
-rw-r--r--js/lib/ui.js116
-rw-r--r--views/default/core/likes/display.php6
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>";
}